Take Aways from NNG's Visual Design for Mobile Devices Seminar
I definitely went to the big city, both literally and figuratively. San Francisco and the Nielsen Norman Group seminar respectively – both felt a bit like Oz. They were exhausting and exhilarating in equal measure.
While I was already a bit intimidated by the vast sea of things to learn about designing for mobile/tablet sites and apps, I found things are even more complicated than I knew. So much for a quick one day learning experience. As usual, I have been sucked into researching and reading everything I can get my hands on about this new (to me) area of design.
The presenters (Kara McCain, NNG & Rob Abbott, Egg Haus) were great – well informed, good communicators, with a clear understanding of what it was we had all showed up to learn. Our printed workbooks were the only real disappointment – as a design nerd and internet geek I just don’t see why this wasn’t online, or at least printed well. Printed out resource URLS are so last century. But I’ve included some of the links here, so you can click right through.
With so many devices, each with their own peculiarities, they compared designing for mobile to the early wild-west days of web design during the browser wars (Netscape!) of the 90′s and early 00′s. What works on one breaks on another and none of them can agree to a standard. I’d have to say though that the challenges remind me more of the headaches and learning curve to be overcome in the design of (good) HTML emails, which have to deal with even more variables to accommodate so many different methods of access and display.
Some of the general guidelines sound just like best practices for a good donation form – less is more, – make it easy, – get them to do the next thing quickly and without distraction. That applies to any mobile screen and is even ten times as important for forms on a mobile.
Some Key Take-Aways:
Icons are King
- Your App Icon *is* your brand on the store and launcher screens
- Unless you have a good reason, stick with the standard look for Tab bar & Menu icons (top and bottom bars)
- Don’t use any unneeded icons for list views, they just add noise.
Don’t Add Anything (you don’t need)
- As in – think twice about big images and graphics, users don’t have patience and connections can flake out
- Same goes for fancy fonts. Use what’s native.
- And content too. Fight back internally to keep things streamlined. Only top priority items on the screen (its small)
Tap Area (links & buttons) Design is Critical
- Make tap areas as big as you can (especially if they are important)
- Don’t put tap areas close together, which leads to accidents. More padding is better.
- Placement is crucial to avoid accidents too (Big actions like Send need to be away from the space bar for example)
Motion is More Important on Mobile
- People not only will horizontal swipe to navigate, they expect it
- Good transitions reinforce user confidence, bad ones make them avoid your app
- Remember user Feedback (visual changes that show actions or states) - test to make sure its still visible from under the user’s finger
Design & Details Do Matter
- People *do* notice good and bad design on mobile and act accordingly
- Never put text in images, they look fuzzy at best, unreadable at worst
- Always check your design on real devices in the real world
It really all came down to KISS: Keep It Simple Stupid. Sadly, simple is not exactly easy.
HIG (Human Interface Guidelines – handy!)
And Some Questions:
- Do you have a mobile device?
- What do you do with it?
- Any great sites and Apps you love or examples of really awful ones?
- Know of any resources I shouldn’t miss?
I really hope you’ll leave some new trails for me to follow in the comments.