Live from #ISUM12: Best Practices for Better UX/UI Design in Mobile & Tablets with Sally Benham @saya4
“Live” notes from Internet Summit 2012 in Raleigh, November 7-8, 2012. See all my notes from Internet Summit 2012 by clicking here. Feel free to use these anywhere, but please credit me if you do.
Saya “Sally” Benham. Creative Director, Design 4UX
Designing for the Mobile Mindset
Differences with Desktop
People have an emotional connection to their smartphones that they don’t have to their desktops.
More interaction. Orientation sensors, direct touch experience for users, etc.
Sequential aspects to interaction: unlock phone, launch app, login to app account, use app, etc. More modal than the desktop – on the desktop you can choose many different paths to accomplish things.
Gathering Data and Understanding your Audience.
Who is my target market? What’s your relationship to the target market as designer? Are you part of it or not?
Personas, user interviews, etc.
Data should help us find the point-of-pain relevant to our App design.
Responsive Web Design vs. Mobile App Design
Responsive Web Design (RWD) is a design approach in which a site is crafted to provide an optimal viewing experience accords a wide range of devices without requiring a separate app. (example: bostonglobe.com)
Benefits: design it once, use it on all devices. No app required, only access from browser:
Drawbacks: Requires clever design and implementation to make it work. If you have limited assets and information, RWD is great. But it typically requires a fast internet connection. Images are scaled by browser, so requires more processing power. Also requires compromises in the design because certain interactions don’t map well to the rescaled/reflowed content.
Mobile website design means a website specially designed for access on mobile devices. Involves different design and code than normal websites, but allows use of mobile-optimized images and less processing power.
Benefits: Faster because the code is smaller/less complicated.
Drawbacks: Doesn’t typically handle specific tools and processes, especially related to eCommerce.
Mobile App Design.
Benefits: Focus on one task: calendar, to-do list, etc. Can enter and store specific personal information related to the task.
Drawbacks: Must be written specifically for a given device. Users need to actively download and install them to begin using. Cost considerably more to develop than typical mobile web development.
Screen Orientation Considerations
Mobile devices are unique in that they have multiple orientations.
Consider the default orientation. For phones this is portrait, but for Win8 table & Blackberry Playbook it’s landscape.
If possible, use a design that is flexible and can adjust to either orientation without losing critical information or features.
Navigation Patterns
Navigation is a critical UX design consideration because it’s how we tell users how to go and find information and use it.
In general, put control buttons at the bottom of your app and information at the top.
Several different types of navigation:
Search-based. User signs in or inputs a search term, and then goes to the next screen where results are located.
Listed Item Navigation. Very popular, a list of items that can usually be expanded to show more information in the same page.
Vertical Navigation. Not popular in the mobile platform. Navigation buttons located along the side of the screen rather than at the bottom.
Horizontal or Tab Navigation. 90% of web or mobile sites use this. Fixed permanent navigation bar at bottom and then additional navigation items above as necessary.
Scrolling Horizontal Bar. Like horizontal navigation but you can scroll left and right to uncover more navigations.
Image-based Navigation. Similar to icon-based images, but typically not recommended due to loss of detail in images.
Gesture Design. A new approach to smartphone design. Incorporates non-verbal communication where body actions communicate a particular message: pointing, tapping, pitching sliding are known, but apps & sites are starting to use blowing, shaking, arm movement, etc.
Use of Icons
Icons are a quick & easy way to pass information to the user in a concise & simple way. Carries an emotional, non-verbal message.
Icons are a visual coding system. They represent an idea, experience, object, or action. Receivers view the icon and “decode” it to get the message.
International vs. Conventional. Flame, for instance, means “fire” – it’s international. Other things, like “Statue of Liberty” might mean “Freedom” in the US but won’t translate to other countries.
UX, Microcopy, and Input Design
Remember the UI is very small.
44-pixel rule (88 pixels on retina display) — size of a fingertip per Apple’s guidelines.
Notifications & Microcopy. Inform users about the content they care about and is important to them at the moment it arrives. Example: traffic jam information before the user gets in his car in the morning.
Don’t interrupt users for Sales offers. Respect their quiet time. Don’t bother them. Don’t spam them. They’ll remove your app.
Let users personalize their notifications as much as possible. Example: ESPN lets users pick a sport, team, kind of alerts, etc.
Consider push notifications as part of your brand. You should care about language, design, and content. They’re simple but you can be creative.
Be short but valuable. Providing relevant, concise information builds trust with the user.