Designing with applications in mind
-
Upload
michel-rousseau -
Category
Design
-
view
265 -
download
0
Transcript of Designing with applications in mind
![Page 1: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/1.jpg)
Designing with applications in mind
![Page 2: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/2.jpg)
Michel RousseauUX/ UI tech evangelistMicrosoft France
@rousseau_michel
![Page 3: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/3.jpg)
App design, what is it?
![Page 4: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/4.jpg)
100 % process
0 % Art0 % nice0 % hypster related thing
![Page 5: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/5.jpg)
It’s a resolving process
![Page 6: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/6.jpg)
A fully integrated process
![Page 7: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/7.jpg)
It is a mandatory process
![Page 8: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/8.jpg)
![Page 9: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/9.jpg)
![Page 10: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/10.jpg)
![Page 11: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/11.jpg)
![Page 12: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/12.jpg)
feasible
viable
desirable
business
technical
Design Thinking
![Page 13: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/13.jpg)
Creation techniques
![Page 14: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/14.jpg)
Les techniques de création
brainstorming exploration consolidation
![Page 15: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/15.jpg)
Brainstorming
A brainstorming session lasts 20 mnsseveral sessions.several groups.several approaches.
![Page 16: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/16.jpg)
Generate conceptsExtract new ideas,Output new scenarios,Find out approaches.
What do you need:
Craziness, delusion, imagination, poetry
![Page 17: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/17.jpg)
![Page 18: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/18.jpg)
![Page 19: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/19.jpg)
Exploration
![Page 20: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/20.jpg)
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.
![Page 21: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/21.jpg)
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
![Page 22: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/22.jpg)
12:38CONTOSO COOKBOOK
regions
12:38
Regional recipes
12:38
Recipe Detail
12:38
About
12:38
Notes & PhotosBack BackBack
Back
![Page 23: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/23.jpg)
![Page 24: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/24.jpg)
Consolidation
![Page 25: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/25.jpg)
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
![Page 26: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/26.jpg)
Branding everywhere
![Page 27: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/27.jpg)
Create an unique graphic charter,Give an authentic value to the app concepts,Define an app silhouette and a color space.
![Page 28: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/28.jpg)
storytellingInvite the user to share the values of the brands Add visual added value Make your apps more sexy.
![Page 29: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/29.jpg)
![Page 30: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/30.jpg)
![Page 31: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/31.jpg)
![Page 32: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/32.jpg)
![Page 33: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/33.jpg)
10 top-most tips while designing an application
![Page 34: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/34.jpg)
1. Stay simple
Even in a complex context, always vote for the simpliest solution.
![Page 35: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/35.jpg)
2. Feedback.An interactive element must provide feedback.If there is a delayed action, you must keep the user informed.
![Page 36: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/36.jpg)
3. Consistency.Whatever the page, a specific interaction must have the same reaction.
![Page 37: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/37.jpg)
4. Reliability.An application must run seamlessly and smoothly.
![Page 38: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/38.jpg)
5. Security.No dead ends. No blockers.An action should always be stoped or cancelled.
![Page 39: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/39.jpg)
6. Extensibility.The app model must adapt to a raise of data.
![Page 40: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/40.jpg)
7. Portability.The app model must adapt to any change of context (from PC to smartphones, for instance).
![Page 41: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/41.jpg)
8. Modularity.Create independant modules with a strong design pattern allows more flexibility.
![Page 42: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/42.jpg)
9. Strenght.An app has to be user-proof and should return to a safe state if shit happens.
![Page 43: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/43.jpg)
10. Performance.Whatever the platform, the method, your app must be fluid, dynamic and ressource efficient.
![Page 44: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/44.jpg)
The big 5 in application design
![Page 45: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/45.jpg)
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.
![Page 46: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/46.jpg)
![Page 47: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/47.jpg)
Law of proximity
When you see a group of objects, they are related to a common task.
![Page 48: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/48.jpg)
Go to the next slide?
CancelYes
![Page 49: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/49.jpg)
The rule of thirds
Use a strong grid to focus the user on the call to actions buttons and on specific contents.
![Page 50: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/50.jpg)
![Page 51: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/51.jpg)
Hick’s law
More choices implies longer decision time.
![Page 52: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/52.jpg)
![Page 53: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/53.jpg)
Pareto principle
80 % of the users will only use 20 % of an application.
![Page 54: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/54.jpg)
![Page 55: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/55.jpg)
5 roles in application design
![Page 56: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/56.jpg)
The User experience designer (UX)
Is in the middle of all the interactions between users and a brand, or a service (application, packaging, web,…)
![Page 57: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/57.jpg)
The user interface designer (UI)
Creates the interfaces and the structures that rules the relation between the user and the machine.
![Page 58: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/58.jpg)
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…)
![Page 59: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/59.jpg)
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, …)
![Page 60: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/60.jpg)
The ergonomist
Brings the one and only scientific point of view, with a strong society analysis.
![Page 61: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/61.jpg)
Design tendencies
![Page 62: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/62.jpg)
flat design has won this battle
![Page 63: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/63.jpg)
![Page 64: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/64.jpg)
![Page 65: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/65.jpg)
![Page 66: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/66.jpg)
readibility
mobile & touch first
web content first
![Page 67: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/67.jpg)
With specific shades
![Page 68: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/68.jpg)
![Page 69: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/69.jpg)
And specific evolutions…
![Page 70: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/70.jpg)
![Page 71: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/71.jpg)
![Page 72: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/72.jpg)
And specific gimmicks
![Page 73: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/73.jpg)
![Page 74: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/74.jpg)
![Page 75: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/75.jpg)
…but with the same logic :
![Page 76: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/76.jpg)
What about logos ?
![Page 77: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/77.jpg)
Mono-script Facets
![Page 78: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/78.jpg)
Lines Pompons
![Page 79: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/79.jpg)
Links Geometrics
![Page 80: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/80.jpg)
Hexagons Dynamics
![Page 81: Designing with applications in mind](https://reader035.fdocuments.us/reader035/viewer/2022062900/58ed88da1a28ab2b398b4691/html5/thumbnails/81.jpg)
Designing with applications in mind@rousseau_michel