New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Maps #75

Open
govuk-design-system opened this Issue Jan 15, 2018 · 16 comments

Comments

10 participants
@govuk-design-system
Collaborator

govuk-design-system commented Jan 15, 2018

What

How and when to use mapping interfaces. How to make sure that information in maps is accessible.

Example of "Find apprenticeship training" service

screen shot 2018-02-21 at 09 00 41

Why

Services that use this pattern:

Anything else

@govuk-design-system govuk-design-system created this issue from a note in GOV.UK Design System Community Backlog (Agreed) Jan 15, 2018

@joelanman

This comment has been minimized.

Member

joelanman commented Apr 5, 2018

There don't seem to be any government services using maps yet - the apprenticeships example above is a prototype, and doesn't appear to be live (yet?)

@nickcolley

This comment has been minimized.

Contributor

nickcolley commented Apr 5, 2018

Then Flood information service have an excellent example of using maps with alternative ways to view the same information to overcome the inherent accessibility issues with maps.

https://flood-warning-information.service.gov.uk/warnings

@joelanman

This comment has been minimized.

Member

joelanman commented Apr 5, 2018

Excellent, thanks @nickcolley !

@timpaul

This comment has been minimized.

Contributor

timpaul commented Apr 9, 2018

The Rural Payments service has mapping elements, but it's all behind a login: https://www.gov.uk/claim-rural-payments

@igloosi

This comment has been minimized.

Contributor

igloosi commented Apr 9, 2018

please tell me the other one is Google Maps :)

@timpaul timpaul added pattern component and removed pattern labels May 21, 2018

@timpaul timpaul referenced this issue May 24, 2018

Closed

Location Map #139

@danleech-defra

This comment has been minimized.

danleech-defra commented Jun 26, 2018

Thanks @nickcolley, we have been doing more work with maps since but still early prototypes. In addition to giving them a more gov.uk style we've been exploring the following...
Map interactions; keyboard access; fullscreen and browser history, feature presentation plus more. The big challenge is accessibility though. We have done limited testing so far but have more planned.

Here's a couple of screens. Drop me an email I can send login details.

mobile-screens
tablet-screens

@sanjaypoyzer

This comment has been minimized.

sanjaypoyzer commented Aug 21, 2018

We did some work around maps and helping people understand Parking Permits zones on the Verify Local project. In particular we made sure the right information was also available in text, making the map a progressive enhancement. https://verify-local-patterns.herokuapp.com/service-patterns/parking-permit/check/design

@frankieroberto

This comment has been minimized.

Collaborator

frankieroberto commented Oct 3, 2018

The Flood map for planning service displays flood data on a map, using an overlay on Ordnance Survey tiles, with a legend:

flood-map-for-planning

@frankieroberto

This comment has been minimized.

Collaborator

frankieroberto commented Oct 3, 2018

The Find and compare schools in England has a feature to view the search results on a map (vs list) via a toggle. It uses Google Maps, with a custom overlay (with markers being "clustered" when close together):

find-and-compare-schools

@frankieroberto

This comment has been minimized.

Collaborator

frankieroberto commented Oct 4, 2018

The Teaching jobs service displays maps on the individual job listing pages:

teaching-jobs

@frankieroberto

This comment has been minimized.

Collaborator

frankieroberto commented Oct 10, 2018

Here's an example from the Check if you can get legal aid service:

check-if-you-can-get-legal-aid

(The map itself currently has a "development purposes only" overlay due to the Google Maps pricing model changes)

@frankieroberto

This comment has been minimized.

Collaborator

frankieroberto commented Oct 25, 2018

The Search property information service displays a map on property pages:

search-property-information

It uses the Leaflet javascript library and the default OpenStreetMap tile server.

@frankieroberto

This comment has been minimized.

Collaborator

frankieroberto commented Oct 25, 2018

The Find an apprenticeship service includes maps on the search results page and the individual listing pages:

find-an-apprenticeship

These all use Google Maps.

@fofr

This comment has been minimized.

fofr commented Oct 26, 2018

We're trialling a variety of Google Maps styles in user research at the moment for finding postgraduate teacher training. We want to show courses on a map so their locations can be more easily compared, the user need is around choosing a course with a manageable commute.

screen shot 2018-10-26 at 11 45 13

We've found that:

  • users preferred a full screen map to a boxed one (like schools performance use), it let them see street names and landmarks they know more easily, they could orientate themselves faster. We thought this might have some negative affects – the page is quite different, but users seemed familiar with this kind of map layout
  • using pins alone meant that users would open and close and move between pins but would forget which course was which on the map, it was hard to go back to something they'd seen before – we've switched to using text instead of pins
  • we added radius circles with labels "5 miles", "10 miles", and these tested well for quickly gauging a distance, it also led users to consider some pins they'd have otherwise thought were "too far"
  • we've tweaked the Google map style to remove business points of interest to make the map clearer (we've kept transits and landmarks as users are more likely to relate to these)
  • to save space, when the pop-up window is shown we don't keep the initial label
@frankieroberto

This comment has been minimized.

Collaborator

frankieroberto commented Nov 12, 2018

The Life in the UK test booking service includes a maps to help users pick a test location:

life in the uk test booking

@pripley-ea

This comment has been minimized.

pripley-ea commented Nov 13, 2018

mp-02-c
Future map for Marine Planning.

Here the key is part of the layer menu and the colour swatches are numbered so people with deuteranopia or protanopia (green or red colour blindness) can still read the map.

Previous design iterations had the key in a tab as the list can be quite large however we found users missed this. Having the key as part of the layer menu was readily understood by users.

We used the GDS colour safe palette where possible. In instances where more swatches were needed then Ordnance Survey also have developed a colour safe palette for further options. These can be adapted for our own purposes and changed to suit, testing for colour blindness in Photoshop and with users.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment