Upgrade to Pro — share decks privately, control downloads, hide ads and more …

User Experience of Online Maps

richjohnston
April 25, 2014
140

User Experience of Online Maps

A talk I gave at the 2014 HCID day at City University - practical guidance and examples of how to get the design of online maps right for your users.

richjohnston

April 25, 2014
Tweet

Transcript

  1. webcredible > customer experience design 2 Contents • Introduction: About

    me • User Experience: Special considerations for maps • Usability guidelines for online maps • Usable maps • Useful maps • Beautiful maps • The future of maps
  2. webcredible > customer experience design 7 Dissertation: User Centred Design

    of a web geo-visualisation 5 semi structured user interviews Feedback from client Initial wireframing Academic / competitor research Brief from client Interactive prototyping & design documentation Feedback from users Expert review (CW & HE)
  3. webcredible > customer experience design 11 Geographic data quality Accuracy:

    For a given object(s) on the map how close is it to being in the real life location? Precision: How much detail is given to particular object(s) that are being represented? Completeness: How many objects are represented across the whole map?
  4. webcredible > customer experience design 13 Digital map best practice

    Digital map best practice Is the map optimised for specific viewing on a computer screen (i.e. not looking as it should be on paper)? Does the map use the largest amount of space available / appropriate? Is the map simple and intuitive to use? Is the colour scheme consistent? Do the selected colours correspond to common expectations about colour codes? Are the polygon areas identified by a name, title or similar? For each level of zoom is the information provided sufficient and relevant? Do the links and content on or surrounding the map interfere with its usage? Do the surrounding links open in a separate window? Are there details provided on the accuracy, up-date-ness and overall quality of the data?
  5. webcredible > customer experience design 14 Attribute selection, search and

    legend design Legend Design / Data representation Is there an appropriate amount of data classes / types? Is the colour scheme appropriate to the nature of the data? Is the legend of sufficient size? Is the legend placed clearly prominently on or near the map? Are classification types intuitive given the data? Is the legend positioned so it does not block important aspects of the map? Is iconography suitable and does it appropriately convey a meaning? Attribute selection/search Are different types of searching allowed? Are previous searches saved? Is the area of selected interest centered on the map? Do the result symbols cover up the map? At the default scale is enough information provided to give an overview of the map’s contents?
  6. webcredible > customer experience design 16 Data sources Forever maps

    (based on open street maps) – Crowd sourced Google maps – Commercially produced data Ordnance Survey – National mapping agency
  7. webcredible > customer experience design 18 Cartographic techniques Aggregation –

    amalgamating similar features Generalization – e.g. simplification of features
  8. webcredible > customer experience design 19 Standard map interactions Pan

    Zoom Orientation Nearby location Description The process of changing the position at which the view is displayed, without modifying the scale The process of magnifying or reducing the scale of a map or image displayed on the Change the direction the map faces in (e.g. which way is North?) Centre the map on your current or last known location Gesture / control Tap, hold and move Double tap Pinch
  9. webcredible > customer experience design 20 Dynamic map interactions -

    examples Use of interactions actually on the map - Citymapper Linking – Forever maps
  10. webcredible > customer experience design 22 Illustreets – ‘mashup’ /

    data visualisation http://cartodb.com/visualize http://illustreets.co.uk/
  11. webcredible > customer experience design 23 Community maps – Mapping

    for change http://www.communitymaps.org.uk/version6_1/includes/MiniSite.php?minisitename=Hack ney%20Wick&minisite_group=
  12. webcredible > customer experience design 24 Find it, Fix it,

    Love it – Tower Hamlets http://www.towerhamlets.gov.uk/default.aspx?page=831
  13. webcredible > customer experience design 25 Use-it – crowd sourced

    / cross-channel http://www.use-it.travel/cities/detail/antwerp/
  14. webcredible > customer experience design 27 3D Tube map (with

    moving trains) http://brunoimbrizi.com/experiments/#/07
  15. webcredible > customer experience design 33 Natural user interface (NUI)

    http://sites.garmin.com/edge/?lang=en&country=GB#ride
  16. webcredible > customer experience design 35 Quantified self (and others)

    ‘Cards’ – Google Now ‘Moves’ - ProtoGeo ‘Strava’