HCID2014: UX of online maps. Richard Johnston, Webcredible

1,178 views

Published on

This talk will provide an overview of how to get the user experience of online maps right, and will give practical tips by demonstrating best practice examples from around the web. It’ll also include discussion why, in my experience, it’s important to get this right when working on client projects.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,178
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HCID2014: UX of online maps. Richard Johnston, Webcredible

  1. 1. USER EXPERIENCE OF ONLINE MAPS City University - #HCID2014 23rd April 2014Richard Johnston - @boomrich richard@webcredible.com
  2. 2. 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
  3. 3. webcredible > customer experience design 3 INTRODUCTION: ABOUT ME
  4. 4. webcredible > customer experience design 4 BSc Computer Science
  5. 5. webcredible > customer experience design 5 NVQ 2: Health and social care
  6. 6. webcredible > customer experience design 6 UCL: MSc GIS 2009-10
  7. 7. 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)
  8. 8. webcredible > customer experience design 8 Dissertation: User Centred Design of a web geo-visualisation
  9. 9. webcredible > customer experience design 9 USER EXPERIENCE: CONSIDERATIONS FOR MAPS
  10. 10. webcredible > customer experience design 10 Designing for a user’s map experience
  11. 11. 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?
  12. 12. webcredible > customer experience design 12 DIGITAL MAP USABILITY GUIDELINES
  13. 13. 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?
  14. 14. 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?
  15. 15. webcredible > customer experience design 15 USABLE MAPS – THE BASICS
  16. 16. 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
  17. 17. webcredible > customer experience design 17 Geographic data constraints Data downloads Battery life Position
  18. 18. webcredible > customer experience design 18 Cartographic techniques Aggregation – amalgamating similar features Generalization – e.g. simplification of features
  19. 19. 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
  20. 20. webcredible > customer experience design 20 Dynamic map interactions - examples Use of interactions actually on the map - Citymapper Linking – Forever maps
  21. 21. webcredible > customer experience design 21 USEFUL MAPS
  22. 22. webcredible > customer experience design 22 Illustreets – ‘mashup’ / data visualisation http://cartodb.com/visualize http://illustreets.co.uk/
  23. 23. 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=
  24. 24. webcredible > customer experience design 24 Find it, Fix it, Love it – Tower Hamlets http://www.towerhamlets.gov.uk/default.aspx?page=831
  25. 25. webcredible > customer experience design 25 Use-it – crowd sourced / cross-channel http://www.use-it.travel/cities/detail/antwerp/
  26. 26. webcredible > customer experience design 26 BEAUTIFUL MAPS
  27. 27. webcredible > customer experience design 27 3D Tube map (with moving trains) http://brunoimbrizi.com/experiments/#/07
  28. 28. webcredible > customer experience design 28 Twitter Trendsmap http://trendsmap.com/
  29. 29. webcredible > customer experience design 29 London in motion http://mappinglondon.co.uk/2013/london-in-motion/
  30. 30. webcredible > customer experience design 30 FUTURE OF MAPS
  31. 31. webcredible > customer experience design 31 Semantic web? http://inspire-geoportal.ec.europa.eu/discovery/
  32. 32. webcredible > customer experience design 32 Haptic maps http://vimeo.com/35462652http://www.fastcodesign.com/1671924/iphone- maps-for-the-blind-using-haptic-tech
  33. 33. webcredible > customer experience design 33 Natural user interface (NUI) http://sites.garmin.com/edge/?lang=en&country=GB#ride
  34. 34. webcredible > customer experience design 34 Data visualisation (& geovisualisation) http://www.gicentre.net/goodwincreative2013
  35. 35. webcredible > customer experience design 35 Quantified self (and others) ‘Cards’ – Google Now ‘Moves’ - ProtoGeo ‘Strava’
  36. 36. creating people-centred, efficient & delightful digital experiences since 2003 Richard Johnston - @boomrich - richard@webcredible.com

×