Check out this presentation from EffectiveUI's Juan Sanchez on mobile UI design (presented on Monday, 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?