Designing maps applications for usability on mobile and desktop #io2011 #android #geo

Jez Fletcher

Luke Mahé

Overview
Defining “user experience”
Difference b/w desktop and mobile
Pain points

What is user experience
UI, layout, controls

1. respect the intent of the user
2. don’t give them a problem, give them a solution
3. ensure their experience matches their mental model
4. what is the intent of a user using a mapping application

What is desktop used for?
Planning
Sorting through information
Evaluating different options
Decision making

What is mobile used for?

immediacy
context

Desktop vs Mobile
mouse vs touch
screen size and resolution – not as much real estate on mobile devices
bandwidth
location – hard to narrow on desktop

processing power
cache – browser is limited

Why do we care?
If the user experience sucks, people aren’t coming back

If _______ is done badly, the user experience sucks.

Layout
     Clutter
     Things not being where the user expects them to be
     Desktop
          Have the map and the content
          break out the content
          detailed info windows
     Mobile
          map or the content
          avoid info windows

Data
     Clutter
     Trying to show too much

     Obstructing what the user is interested in
     Not giving them the info they want
     Breaking the mental model of the data

Controlling the map
     Breaking the mental model – not having desktop controls where users expect

     making interaction obvious
          mouse over/tooltips
          consistent buttons
          click vs touch
     removing functionality from mobile – don’t dumb down, simplify

Responsiveness
     don’t break the mental model
     dragging is slow
     latency in dealing with requests

Storage
     Reliability data doesn’t show on the map
     Editability
     Latency – don’t rely on single homed db 

Sharing
     Sharing between desktop and iphone

          planning vs active
     sharing b/w people
          storing data
          sending this to friends
     Interactive/social

Map styling

Justin O’Beirne
Styling Google Maps for Data Overlays
“Styled Maps Using Google Maps API Version 3”
1. You can remove map elements
     Maployed!
     NYT – 2010 Census

     Trulia – Price reduction map
2. You can simplify elements
     NYT – Mapping America
     WSJ – Champions’ Guide to the New York Marathon
     Google uses it for bicycle paths

3. You can modify the color of nearly everything
Goal: To bring your data front-and-center

Tips
1. Don’t be afraid to take stuff off the map
     Don’t hesitate to remove the maps roads if your mashup has nothing to do with navigation

     Be careful
2. Sketch out your ideas

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s