responsive & organic design

Responsive & Organic designINTERACTION DESIGN

A referential book such as a handbook or manual.

Interaction Design: Responsive & OrganicDesign

INDEX

Responsive Design

Organic Design


Responsive Design


Responsive designs can create simple, consistent user experiences across a multitude of devices, but they are not panaceas for future-proofing designs.

Devices proliferate for users, frustrate designers.The mobile web is exploding. With mobile’s ascendance, businesses need to prioritize their mobile strategy and investment. But for too many companies, mobile is still an afterthought, when it should be considered a more critical investment than their desktop strategy.

What are Responsive and Screen-tailored web design and why should I care?Responsive design has emerged as a potential salve to development complexity, especially as companies are understandably looking for operational efficiencies. Typically, a site tailored for mobile viewing has a distinct domain (such as mobile.example.com).

It generally requires a separate code base, its own content and UX strategy, and a discrete visual design. This means a brand has to build two separate websites, with potentially double the workload when it comes to maintenance.

RESPONSIVE


RESPONSIVE CODING

Code 1 Code 2 Code 3

Code

Screen size tailored approach

Responsive approach

Equal to 3 independent projects

Equal to 1.5 projects


Responsive design is not limited to the User Interface only but to the Content and Experience model as well.

What is Responsive Visual Design (UI)?Responsive web design allows the layout and content to reformat, reposition and resize itself in real time. It uses a single code base to serve HTML based on the user’s device and browsers. It includes fluid grid, flexible images and media queries to deliberately modify the page layout for different viewing contexts.

What is Responsive Content Design?Responsive content design allows the content re-organizing to better fit the user experience needs in each different devices. This including option to hide/show specific content group, cut long sentence and / or identify different call to action based on the screen. (es: “Sign Up for Join to the community” in the desktop version could become “Sign Up” on mobile)

What is Responsive Experience Design (UI)?As well the User Experience steps process change for better fit and simply the usability in each different screen device especially then the Human Interface change from pointer (mouse), touch or Selector (remoto control)

RESPONSIVE


RESPONSIVE BEHAVIORS Animated Images


RESPONSIVE VISUAL & CONTENT

Not Responsive Content

Responsive Content

Not Responsive UI

Responsive UI


RESPONSIVE USER EXPERIENCE (UXD)

Sequential UX

Companion UX

Simultaneous UX

Equal UX VS Responsive UX

Improving UX


Pros and Cons

There are advantages and disadvantages to each methodology. There are several factors an organization should consider when deciding which approach to adopt:

RESPONSIVE VS TAILORED

Responsive TraditionalPRO CONS PRO CONS

Single code base requires less long-terms maintenance

More UX / Schematic Design constraints

Traditional code bases ensure UX and Content will be optimized for specific devices

Code become outdates quickly as new sizes, resolutions and form factors arise.

Allow faster adaption to new screen size

Longer lead time and higher one-time setup cost

Lower on-time setup costs and shorter Q/A process High maintenance costs

Single URL for improve search ranking and social sharing experiences

Requires high collaboration between Interactions, Visual design and Development

Better devices integration for locations and touch

Some users may not want a sperate experience particularly on tablets

No need to set up server-side redirects

Harder to integrate IAB standar Ads

Loading only mobile assets potentially results faster load time

Potentially different URL structures can impact SEO.

Potentially lowers mobile bounce rates while increase page views and time spent

May have to make functionally compromises if user goals vary between desktop and mobile.


RESPONSIVE

Businesses need to think carefully about their users experiences, as well as their overall business goals, content, organizational structure and technical expertise.

Businesses need to align organizational structure with the chosen design framework.A company that adopts a responsive design approach may also need to realign its organizational structure and processes. Responsive design requires Interaction design team & technical developers to be involved much earlier in the design process to understand what functionality is feasible. Content strategists also need to understand how designing for responsive affects copy, with a need for shorter, more concise language.

Additionally, reviewing work in responsive design requires ongoing input across different devices, rather than intermittent wireframe reviews. Most importantly, digital and mobile departments must be integrated to make responsive design work.

Being a mobile leader requires choosing the right design framework, and that choice must be driven by user needs and expectations.

Businesses need to think carefully about their users experiences, as well as their overall business goals, content, organizational structure and technical expertise. For some, these factors will lead to choosing a hybrid approach combining the best of responsive and discrete methodologies. Whatever the ultimate approach, businesses must recognize that while future-proofing is an alluring concept, it remains far from a proven reality.


Organic Design


ORGANIC DESIGN

The Organic Design is a process method to create easy interfaces and user experience customized on the consumer knowledge and environment.

Progressive approachThat’s the most important rule for any UI Designer and Architect. The general dynamic of this argument is “the Interface change his aspect and complexity proportional to the evolving of User knowledge about the interface”. The perfect interface is when it will be customized for each user and evolving in the time for follow the user experience. The user found around him only he need.

Ambient determinate the aspectOne of most frequently error starting since the the beginning of each UI project is the Skin of interface. Very often we spend few time to understand how our UI design will be display in different device and how many different use it can have from each user.

Itʼs look like as decide to be an Eskimo (People from North Pole), were like as an Eskimo and living like as an Eskimo and think to be able to live in any corner of the world from Africa, to Arabia, from Pacific to Miami. This is one of the most important needs of any UI. The Adaptation to the ambient. The adaptation donʼt change his main function but will determinate the look&feel and the interactive design behaviors.

Progressive Approach

Ambient Determinate the aspect


ORGANIC DESIGN

The elements determinate the group comportmentStarting to think at an interface like as a group of single elements, related them self with a strong property of grouping focused to a specific job/s. Now think to an UI like as a the people group of Survival Reality Show, the kind, property and expertise to each people will be determinate the good life or the death of entire team. This is the same things happen in any UI design project; choose the right UI element, interactive behaviors, how many elements determinate the result like as put chocolate into the milk for have a light brown or dark brown result.

Sharing is the engine of evolutionAt the base of any evolution process, the “sharing” capabilities, determinate the good or bad performing in any team. The best team in the world in any sport will be Football, Basket, Soccer, F1, etc.., are winner because they move like as “10” but they think like as “1”. They have a good based sharing knowledge, they have the same vision, same focus, same target with different roles. Sharing a method in the same UI or sharing a visual element in more elements grid make a best performing and make the structure more light.

Optimize and think ModularOptimize, Optimize, Optimize. Donʼt have any redundancy of UI elements, this help you to make a most quickly interface development and more easy update and customization process when needed.

Think to each grid element like as modular, the Interface design reflects the typical human activity especially the mobility, Art and financial rules. In finance for example, when a modular unit donʼt work well and / or make debit, it will be close or changed with other without shake other unit parent or father.

The elements determinate the group comportment Optimize and think Modular


ORGANIC DESIGN

The Interface change his aspect and complexity proportional to the evolving of User knowledge about the product.

Complexity & User KnowledgeWhen you create grid and group elements focused to specific function, think the discover of this “grid” with a progressive approach. An other variable element of UI behaviors is the TIME and each USER. The TIME of experience of each user with the Interface determinate his knowledge of the tool and this is reflect into a sharing of “work method”, “Workflow” and “UI organization” between the tool and the User. Is like as talk with a Baby or talk with a professional Developer, the start point will be different.

EvolvingAn other step to consider when you design UI is the evolving of the elements and the grid in their skill and behaviors.

Directly linked to previous point of “complexity” and “Ambient Relation” the design work, the look&Feel and architecture of the grid, require to be think into a progress evolution where very ofter you need to consider “not-programatic-evolutions-step”. Usually this is translate in “This space will manage future buttons or needs...”

Complexity & User Knowledge

INTERACTION DESIGN DEPARTMENT

Thank you.

Author: Mirco Pasqualini, April 2014

responsive & organic design

Design

responsive content design

responsive web design

responsive visual design

responsive organicdesignpros

projectsinteraction

discrete visual design

screentailored web design

mobile web