USER EXPERIENCE OF ONLINE

MAPS City University - #HCID2014

23rd April 2014 Richard Johnston - @boomrich

richard@webcredible.com

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

webcredible > customer experience design 3

INTRODUCTION:

ABOUT ME

webcredible > customer experience design 4

BSc Computer Science

webcredible > customer experience design 5

NVQ 2: Health and social care

webcredible > customer experience design 6

UCL: MSc GIS 2009-10

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)

webcredible > customer experience design 8

Dissertation: User Centred Design of a web geo-visualisation

webcredible > customer experience design 9

USER EXPERIENCE:

CONSIDERATIONS FOR MAPS

webcredible > customer experience design 10

Designing for a user’s map experience

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?

webcredible > customer experience design 12

DIGITAL MAP USABILITY

GUIDELINES

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?

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?

webcredible > customer experience design 15

USABLE MAPS – THE

BASICS

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

webcredible > customer experience design 17

Geographic data constraints

Data downloads Battery life Position

webcredible > customer experience design 18

Cartographic techniques

Aggregation – amalgamating

similar features

Generalization – e.g. simplification

of features

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

webcredible > customer experience design 20

Dynamic map interactions - examples

Use of interactions actually on the

map - Citymapper

Linking – Forever maps

webcredible > customer experience design 21

USEFUL MAPS

webcredible > customer experience design 22

Illustreets – ‘mashup’ / data visualisation

http://cartodb.com/visualize http://illustreets.co.uk/

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=

webcredible > customer experience design 24

Find it, Fix it, Love it – Tower Hamlets

http://www.towerhamlets.gov.uk/default.aspx?page=831

webcredible > customer experience design 25

Use-it – crowd sourced / cross-channel

http://www.use-it.travel/cities/detail/antwerp/

webcredible > customer experience design 26

BEAUTIFUL MAPS

webcredible > customer experience design 27

3D Tube map (with moving trains)

http://brunoimbrizi.com/experiments/#/07

webcredible > customer experience design 28

Twitter Trendsmap

http://trendsmap.com/

webcredible > customer experience design 29

London in motion

http://mappinglondon.co.uk/2013/london-in-motion/

webcredible > customer experience design 30

FUTURE OF MAPS

webcredible > customer experience design 31

Semantic web?

http://inspire-geoportal.ec.europa.eu/discovery/

webcredible > customer experience design 32

Haptic maps

http://vimeo.com/35462652

http://www.fastcodesign.com/1671924/iphone-

maps-for-the-blind-using-haptic-tech

webcredible > customer experience design 33

Natural user interface (NUI)

http://sites.garmin.com/edge/?lang=en&country=GB#ride

webcredible > customer experience design 34

Data visualisation (& geovisualisation)

http://www.gicentre.net/goodwincreative2013

webcredible > customer experience design 35

Quantified self (and others)

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

creating

people-centred, efficient

& delightful digital

experiences

since 2003

Richard Johnston - @boomrich - richard@webcredible.com