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.

Some links:

HIG (Human Interface Guidelines – handy!)

General Reference

 

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.

Comments

Thanks

Glad you're talking about this! I know that this conference was more about designing Apps, but was there any discussion about the idea of better designing your website for effective display on tablets and other mobile devices?

One of the things that I've at least heard speculation about is that HTML5, because of it's more interactive features, will to some extent serve as a cross-platform alternative to creating apps for specific devices. I'd love to hear your thoughts on this if there was any scuttlebutt  about it.

My community is comprisef of a lot of small to medium sized nonprofits -- and creating a site that is optimized well for mobile is probably the most accessible way, well, likely the only way, to reach this audience for them. Thoughts?

-Cary

websites on mobile

Hi Cary,

The session dealt with design more than which to use but did discuss considerations for apps, mobile optimized sites and hybrids (sites pulled into an app framework so they can be in the store).

The rules above apply to all but the main points for website specifically are mostly around reducing dependence on connection and download. That is - use native fonts (not the spiffy new google fonts etc options), only use large images when they are really needed etc. This is because even in towns like SF your connection can be slow, flaky or fail - something designers seem to take into consideration less and less on website in general.

HTML 5 wasn't discussed much since this was more about the look than the how to, but I have heard the same as you in regards to this being the bridge between platforms. Not sure it's worth it yet for nonprofits to prioritize converting their site language though.

HTML 5, platform detection or graceful degradation should definitely be considerations for all organizations that are doing a redesign now or in the near future. If that sort of investment is a ways off, I'd recommend checking out your sites on all the devices you can get your hands on and dealing with the worst usability problems (flash navigation, scrambled/overlapping content, tiny font size, un-tappable links etc) with some quick fixes to features, layout and css in the mean time. And of course simplifying donation forms would be the first place to work with.

Good luck with your sites.