A presentation from EffectiveUI's Juan Sanchez on mobile UI design (presented on April 26, 2010, at the ATLAS Institute). Juan, part of the team behind EffectiveUI's Ideate iPad app, joined a slate of other mobile gurus for this Mobile Monday Colorado event.

1. EffectiveUI
Juan Sanchez | Experience Architect

2. Who is this guy?

3. EffectiveUI?

4. EffectiveUI is a user experience agency
EffectiveUI is an award-winning, user-centered design
and development agency that creates and implements
custom web, mobile and desktop applications for
today’s most respected organizations.

5. What EffectiveUI does
• User Research
• Competitive Analysis
User Experience and Design
• Use Case Development
• Interaction Design
Mobile Desktop Web
• UI Development
• User Acceptance
• API Architecture API
Legacy Systems

6. 8 criteria for good user experience
• provide valuable feedback
• behave with consistency
• behave in a familiar way
• be obvious and efficient
• be responsive and perform
• help people and businesses accomplish goals
• be brand consistent and elegant
• be progressive and trustworthy

7. EffectiveUI + eBay

8. EffectiveUI + Herff Jones

9. EffectiveUI + National Geographic

10. EffectiveUI + Mobile

11. Lessons Learned
Mobile UI Design

12. Mobile UI Design: Figure out what matters
• What’s the “soul” of the app?
• Find the true use for the application and what
sets it apart from other applications
• Mobile does not mean shrinking your website or
app down, it degrades the experience
• Can it be a web app?

13. Mobile UI Design: What’s the use case?
• How is this app going to be used?
• Primary touch point?
• Companion application?
• Optimized UI for a larger app?
• A lot of what's done with a mobile
app informs the mobile or web app
Image via mindingthegaps.com

14. Mobile UI Design: Device knowledge
• Device prototypes
• Made a wooden iPad to test before
device was available
• Go to Best Buy and play around with
the phones, cameras, TVs, etc.
They're a great device lab.

15. Mobile UI Design: Appearance
• “Small things” like app icons can make a difference
• Metaphors can work
• Design can win over features
• Maintain focussed views
• Don’t overwhelm*
• Remember how people interact with devices: fingers
• Long processes can be smoothed over with
delightful interactions

16. Mobile UI Design: Design jump starts
• Use the native UI
• Read the HIG and design guidelines
• Follow established conventions
• Don't follow established conventions
Image via metaspark.com

17. Mobile UI Design: Help designers see
• Get designers as close to the real thing as you can
• Get them set up with the dev environment
• Test and run on the simulators
• Even better, get them loading on to a device
• Show them what it means to implement their designs
• Even let them add assets and commit :-O ?!??!
Image via blogs.tech-recipes.com

18. Mobile UI Design: Help clients see
• Testing your design
• Create a simple HTML website with hotspots
and send the URL to a client
• Email images to a client that they can load in
their phone
• Great way to show clients what their (and your)
decisions mean
Image via testiphone.com

19. Mobile UI Design: Test, test, test
• Test interactions
• Gestures
• UI overload/fatigue
• Performance

20. Any questions?