Designing with applications in mind

Michel RousseauUX/ UI tech evangelistMicrosoft France

@rousseau_michel

App design, what is it?

100 % process

0 % Art0 % nice0 % hypster related thing

It’s a resolving process

A fully integrated process

It is a mandatory process

feasible

viable

desirable

business

technical

Design Thinking

Creation techniques

Les techniques de création

brainstorming exploration consolidation

Brainstorming

A brainstorming session lasts 20 mnsseveral sessions.several groups.several approaches.

Generate conceptsExtract new ideas,Output new scenarios,Find out approaches.

What do you need:

Craziness, delusion, imagination, poetry

Exploration

Gather several approaches (why and how),Gather ideas,Concepts prototyping,Create mental schemes,Work with personae, first user tests.

What do you need:

prototyping, storyboarding, wireframing, sketching skills.

12:38

Tex

t

Tex

t

Tex

t

Tex

t

CONTOSO COOKBOOK

regions12:38

Text

CONTOSO COOKBOOK

indian recCONTOSO COOKBOOK

recipes ind

pivot

Tex

t

Tex

t

Tex

t

Tex

t

12:38Contoso Cookbook

Shows recipes grouped by regional style. User can view recipes, also add pictures and notes

12:38CONTOSO COOKBOOK

regions

12:38

Regional recipes

12:38

Recipe Detail

12:38

About

12:38

Notes & PhotosBack BackBack

Back

Consolidation

Fine tune what can be done (feasible).Schedules, plannings, effort matrix…What do I know / what should I learn?Make decisions, rank ideas, voting.User testing.

What do you need:

Tests, decisions, consistency

Branding everywhere

Create an unique graphic charter,Give an authentic value to the app concepts,Define an app silhouette and a color space.

storytellingInvite the user to share the values of the brands Add visual added value Make your apps more sexy.

10 top-most tips while designing an application

1. Stay simple

Even in a complex context, always vote for the simpliest solution.

2. Feedback.An interactive element must provide feedback.If there is a delayed action, you must keep the user informed.

3. Consistency.Whatever the page, a specific interaction must have the same reaction.

4. Reliability.An application must run seamlessly and smoothly.

5. Security.No dead ends. No blockers.An action should always be stoped or cancelled.

6. Extensibility.The app model must adapt to a raise of data.

7. Portability.The app model must adapt to any change of context (from PC to smartphones, for instance).

8. Modularity.Create independant modules with a strong design pattern allows more flexibility.

9. Strenght.An app has to be user-proof and should return to a safe state if shit happens.

10. Performance.Whatever the platform, the method, your app must be fluid, dynamic and ressource efficient.

The big 5 in application design

Fitt’s Law

the time required to move to a target area is a function of the ratio between the distance to the target and the width of the target.

Law of proximity

When you see a group of objects, they are related to a common task.

Go to the next slide?

CancelYes

The rule of thirds

Use a strong grid to focus the user on the call to actions buttons and on specific contents.

Hick’s law

More choices implies longer decision time.

Pareto principle

80 % of the users will only use 20 % of an application.

5 roles in application design

The User experience designer (UX)

Is in the middle of all the interactions between users and a brand, or a service (application, packaging, web,…)

The user interface designer (UI)

Creates the interfaces and the structures that rules the relation between the user and the machine.

The Interaction designer (Ixd)

Has a peripherical vision of all the applications, and translate that in a branding langage for multiple usages (connected watches, mobile purposes, gaming consoles, etc…)

The Solution designer

Is the main role of the digital transformation, in order to convert an industrial process into a digital one (dematerialisation, social networks, …)

The ergonomist

Brings the one and only scientific point of view, with a strong society analysis.

Design tendencies

flat design has won this battle

readibility

mobile & touch first

web content first

With specific shades

And specific evolutions…

And specific gimmicks

…but with the same logic :

What about logos ?

Mono-script Facets

Lines Pompons

Links Geometrics

Hexagons Dynamics

Designing with applications in mind@rousseau_michel