Embed Size (px)
Citation preview
#mstrworld
App Design Tricks: Make Your Apps Beautiful and Increase User Adoption
Jenny Loudis, Manager Mobile Solutions
#mstrworld 2
The Mobile Service Line A commitment to Mobile excellence
Worldwide perspective on Customer Successes (and failures)
Bi-directional relationship with MicroStrategy Engineering
Over 100 years of combined Mobile Application experience
Committed to helping our customers succeed in every stage of their Mobile Strategy
User-Centered Design
4
“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.”
EMPATHIZE
DEFINE
DEATE
PROTOTYPE
TEST
EMPATHIZE
DEFINE
DEATE
PROTOTYPE
TEST
EMPATHIZE
DEFINE
DEATE
PROTOTYPE
TEST
Who gets a seat at the table?
Product Owner
Project Manager
Technical Developer
Designer
Business Analyst
User
EMPATHIZE
DEFINE
DEATE
PROTOTYPE
TEST
EMPATHIZE
DEFINE
DEATE
PROTOTYPE
TEST
Why are you making an app?
Use one sentence.
EMPATHIZE
Who are your primary users?
Define the personas.
EMPATHIZE
“Data isn’t like your kids, you don’t have to pretend to love
them all equally”
Amanda Cox, NY Times
Pixel Media
23
24
As a <user> I want <goal/desire> So that <benefit>
Marketing Manager Check on the status of a campaign
I can see if there are any operational issues
Marketing Manager Open a support ticket I can get any issues resolved quickly
Marketing Associate See the KPIs of a campaign over time
I can understand how a campaign is performing
25
As a <user> I want <goal/desire>
So that <benefit>
Existing Report/Data
Marketing Manager
Check on the status of a campaign
I can see if there are any operational issues
Campaign Status
Marketing Manager
Open a support ticket
I can get any issues resolved quickly
N/A
Marketing Associate
See the KPIs of a campaign over time
I can understand how a campaign is performing
Need to break down by day
EMPATHIZE
DEFINE
Phone or tablet?
Define a device.
Localytics
31
EMPATHIZE
DEFNE
IDEATE
33
EMPATHIZE
DEFNE
IDEATE
#mstrworld
How will the user navigate the app?
Make it obvious and consistent.
www.lukew.com
www.lukew.com
How will you organize content and display the details?
Follow the user scenario, and reveal information as the user expresses interest / as it becomes
relevant.
#mstrworld
Choose the right visualizations for your data
EMPATHIZE
DEFNE
IDEATE
User Testing
Iterate
63
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
Grouping How do you use shapes to convey a hierarchy?
67
Contrast
Direct the attention of the user
Dark contrast, more emphasis
Bold for emphasis (metrics) Light for less emphasis (labels)
Less contrast for less emphasis
Smaller font for less emphasis
Color
Stick to a well-defined palette.
Typography
Stick with 1-2 readable fonts.
Sans-serif
Helvetica Neue Arial Futura Avenir
Serif
Georgia Times New Roman
Garamond
Comic sans
Iconography Use universal imagery that will be
easily recognized
#mstrworld 84
85
86
87
Other Formatting Tips in MSTR
Explore your options – it’s worth it.
100
101
102
103
104
105
106
107
Examples
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
#mstrworld 124
#mstrworld 125
#mstrworld 126
127
128
129
130
131
“Perfection is achieved, not when there is nothing more to add, but when there is nothing
left to take away.”
Antoine de Saint-Exuper
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 • 50 User Experience Best Practices • Hack Design
#mstrworld
Inspiration for better design
• Dribble • 24 beautifully designed web dashboards that data geeks will love • Designing to iOS7 • Icons Inspired by iOS7 • 20 Excellent Wireframing Tools for Mobile • The Mobile Single-Purpose App Strategy • A Guide to Creating Dashboards that People Love to Use
