Mobile App Design: Learn Brilliant Yet Simple Design Rules · PDF fileMobile App Design: Learn...
-
Upload
truongnhan -
Category
Documents
-
view
218 -
download
0
Transcript of Mobile App Design: Learn Brilliant Yet Simple Design Rules · PDF fileMobile App Design: Learn...
#mstrworld
#mstrworld
Jenny Loudis, Manager Mobile Solutions
Mobile App Design: Learn Brilliant Yet Simple Design Rules
5.5B connected mobile devices from a population of 7B people.
50% of people use an app on their mobile device 10x or more a day.
42% increase of mobile app adoption,
with 30% in mobile BI
ClickFox/Gartner
Why design?
“Design doesn’t need to be delightful for it to work, but that’s like saying
food doesn’t need to be tasty to keep us alive.”
Frank Chimero, The Shape of Design
User-Centered Design
7
“Once a system is in development, correcting a problem costs 10x as much as fixing the same
problem in design. If the system has been released, it costs 100x as much relative to
fixing in design.”
Who gets a seat at the table?
• Product Owner
• Project Manager
• Technical Developer
• Designer
• Business Analyst
• User
Stanford d.School
EMPATHIZE
DEFINE
IDEATE
PROTOTYPE
TEST
EMPATHIZE
Stanford d.School
Pixel Media
14
EMPATHIZE
Stanford d.School
DEFINE
Why are you making an app?
Use one sentence.
Who are your primary users?
Create a User Story
Who are your primary users?
Define a persona.
Phone or tablet?
Define a device.
Adobe Digital Index
Localytics
#mstrworld 28
EMPATHIZE
Stanford d.School
DEFINE
IDEATE
How will the user navigate the app?
Make it obvious and consistent.
• www.lukew.com
www.lukew.com
How will you display the details? Follow the user scenario, and reveal information as the user expresses interest / as it becomes
relevant.
Map > infowindow Grid > infowindow Selectors and filters Swipeable panels
EMPATHIZE
Stanford d.School
DEFINE
IDEATE
PROTOTYPE
#mstrworld
#mstrworld
EMPATHIZE
• Stanford d.School
DEFINE
IDEATE
PROTOTYPE
TEST
Iterate
#mstrworld
EMPATHIZE
• Stanford d.School
DEFINE
IDEATE
PROTOTYPE
TEST
Visual Magic
“Data isn’t like your kids, you don’t have to pretend to love
them all equally”
Amanda Cox, NY Times
Grouping How do you use shapes to convey a hierarchy?
47
Color
Stick to a well-defined palette.
Typography
Stick with 1-2 readable fonts.
Sans-serif
Helvetica Neue Arial Futura
Serif
Georgia Times New Roman
Garamond
Dark contrast, more emphasis
Bold for emphasis (metrics) Light for less emphasis (labels)
Less contrast for less emphasis
Smaller font for less emphasis
Comic sans
Iconography Use universal imagery that will be
easily recognized
#mstrworld 61
Other Formatting Tips in MSTR
Explore your options – it’s worth it.
71
72
Examples
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
Questions?
#mstrworld
Much credit to these sources
• Frank Chimero, The Shape of Design • The Noun Project, for icons • Smashing Magazine • Adobe Digital Index • Localytics • Luke W • Form Design
#mstrworld
Inspiration for better design
• Dribble • 24 beautifully designed web dashboards that data geeks will love • Designing to iOS7 • Icons Inspired by iOS7