Juan Sanchez | Experience Architect
2. Who is this guy?
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
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
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
• Great way to show clients what their (and your)
Image via testiphone.com
19. Mobile UI Design: Test, test, test
• Test interactions
• UI overload/fatigue