Presentation given at mobile Mondays labs event in Boston on September 10th 2012. The topic is an intro to the state of mobile experience design. Topics covered are the mobile problem, user interface design for mobile, and user experience design for mobile. More info see http://momoboston.com/
The presenter is Adrian Mendoza, co-founder of Marlin Mobile based in Boston. Visit Adrian Mendoza sblog at http://www.marlinmobile.com/blog
3. DEVICES CARRIERS
IOS
ANDROID
marlinmobile MOBILE UX WITH ADRIAN MENDOZA 3
4. OS’S OS VERSIONS
marlinmobile MOBILE UX WITH ADRIAN MENDOZA 4
5. SCREEN RESOLUTIONS
2048
x
1536
pixels
1024
X
768
pixels
960
x
1600
pixels
480
x
854
pixels
What the?
480
x
800
pixels
320
x
480
pixels
marlinmobile MOBILE UX WITH ADRIAN MENDOZA 5
6. IT’S A MILLION MATRIX PROBLEM
Your
Mobile
User
Experience
marlinmobile MOBILE UX WITH ADRIAN MENDOZA 6
8. BE ON THE DEVICE
This is a start, but in no way is it scalable.
marlinmobile MOBILE UX WITH ADRIAN MENDOZA 8
9. KNOW THY DEVICES
7X
difference
Real devices = Real Results.
marlinmobile MOBILE UX WITH ADRIAN MENDOZA 9
10. KNOW THY USERS
Source: Google
marlinmobile MOBILE UX WITH ADRIAN MENDOZA 10
11. KNOW THY USERS
Do you know what your user wants, have you asked them? Feedback is king.
marlinmobile MOBILE UX WITH ADRIAN MENDOZA 11
12. KNOW THAT EXPECTATIONS ARE DIFFERENT
One
extra
click
One
404 error extra
second
One
extra
MB
Mobile is not your desktop experience
The concept of failure is redefined. Its not just about your site being down its about
your experience not being optimized for mobile.
marlinmobile MOBILE UX WITH ADRIAN MENDOZA 12
13. KNOW THAT DESIGN IS DIFFERENT
• Use Gestures instead of Clicks
• UI needs space for fingers (around 48 pixels)
• Users and UI are different for each platform
(For example: Android users know what a menu button is.. iPhone
user use the big button approach. “one button for all”)
• Design, user experience, and developer are tied together
Design
UX Dev
marlinmobile MOBILE UX WITH ADRIAN MENDOZA 13
14. WIREFRAME FOR MOBILE
• Design screens based around flows. Not just a single screen
• Show call to actions after the each flow
• Keep the users in a loop
marlinmobile MOBILE UX WITH ADRIAN MENDOZA 14
15. PROTOTYPING …. BE ON THE DEVICE
I wasn’t
kidding
Everything changes when you get on the device. See how the UI looks, interacts, and
get feedback from users.
marlinmobile MOBILE UX WITH ADRIAN MENDOZA 15
16. CREATE A MOBILE “EXPERIENCE” STRATEGY
• Design for multiple platforms if you can
• Target your users if you know them
• Ask the hard question before you start.
• Are you a mobile web, app, or web app
Or are you all of the above?
Are you designing for a tablet?
• Weight the advantages and disadvantages of each
(For example: Do you go response and weigh the performance
issues )
marlinmobile MOBILE UX WITH ADRIAN MENDOZA 16