View
2.501
Download
1
Category
Preview:
DESCRIPTION
A presentation from Mobile Monday Colorado on Mobile UI Design.
Citation preview
EffectiveUIJuan Sanchez | Experience Architect
Who is this guy?
EffectiveUI?
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.
What EffectiveUI does
• User Research
• Competitive Analysis
• Use Case Development
• Interaction Design
• UI Development
• User Acceptance
• API Architecture
Legacy Systems
API
Mobile Desktop Web
User Experience and Design
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
EffectiveUI + eBay
EffectiveUI + Herff Jones
EffectiveUI + National Geographic
EffectiveUI + Mobile
Lessons LearnedMobile UI Design
• 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?
Mobile UI Design: Figure out what matters
• 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
Mobile UI Design: What’s the use case?
Image via mindingthegaps.com
• 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.
Mobile UI Design: Device knowledge
• “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
Mobile UI Design: Appearance
• Use the native UI
• Read the HIG and design guidelines
• Follow established conventions
• Don't follow established conventions
Mobile UI Design: Design jump starts
Image via metaspark.com
• 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 ?!??!
Mobile UI Design: Help designers see
Image via blogs.tech-recipes.com
• 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
Mobile UI Design: Help clients see
Image via testiphone.com
• Test interactions
• Gestures
• UI overload/fatigue
• Performance
Mobile UI Design: Test, test, test
Any questions?
Recommended