Hackpads are smart collaborative documents. Join Hackpad Now.
14 days ago
Unfiled. Edited by Kay Dale 14 days ago
Full list of the design patterns on this wiki.

1 day ago
0 / 9
Unfiled. Edited by Cosmin Viorel 1 day ago
  • Repeat payments
Ed H This page can be bypassed by passing a *chosen* payment provider directly to Worldpay. Not ideal (card providers can be inferred from the card number), but this gives control of the page design to us.
Visa's version:
Tim P
  • Further reading
Somme S
  • Styling the Default WorldPay page and making it more accessible
WorldPay payment pages are not very usable but there are a few things you can do with a bit of javascript and css.
  • hide unwanted optional fields, help, buttons and required asterix
  • remove ugly WorldPay header
  • highlight errors and jump the user to the error
  • add (optional) for optional fields
  • style the payment button
  • make it responsive (with javascript)
after :
Pietro D We took an extra step on Your tax account and managed to customise the page even more:
Tim P
  •  Nice work :+1:
5 days ago
Unfiled. Edited by Lee Chin 5 days ago
David S
  • Some guidance on suitable formats for confirmation codes would be useful. i.e. if we send a letter/email/SMS to a user, giving them a code we want them to enter into a web application to confirm that it's them, what format should we chooseenter into a web application to confirm that it's them, what format should we choose for the code? For "Help with Fees" at MoJ, they used 6 characters from this set [ 3 4 6 7 9 A C D E F G H J K L M N P Q R T V W X Y ] to minimise ambiguity, and presented the code as XX-XX-XX to make it easy to read.
6 days ago
0 / 2
Unfiled. Edited by James Laney 6 days ago
  • Two digit years
Tim P Some users enter 2 digit years in the year box. It's fine to accept this format for narrow date ranges, but don't use it for dates that could range over more than 100 years.
Date ranges
Always validate date ranges to make sure the end date is after the start date. If the user changes the start date to be later than the end date you can do one of these:
  • give an error message
  • set the end date to the start date
  • shift the end date by the same amount as the start date shifted
Which approach you take depends on the context. For example, if you change the start of a calendar appointment then typically the end will shift by the same amount, because the start time of an appointment tends to be more variable than it's duration.
Tim P
  • Do we have any research on using sliders to represent ranges?
Caroline J
  • Tim Paul Yes: don't use them. We have the evidence that our low digital skills users struggle with drop downs. I have seen people with pretty good digital skills and dexterity struggle with sliders. 
  • Did you have any particular circumstance in mind where sliders seem like a good option? Might be able to suggest a way around it
Brian H
  • Users like the look of sliders but I’ve seen many struggle; especially when any kind of accuracy is needed.  On desktop their perceived benefits generally don’t outweigh the usability and accessibility flaws (Ithey may perform better on mobile though). 
Tim P Calendar controls
Only p calendar controls if they match the users likely mental model of the date they're being asked to enter. For example - a calendar control is not appropriate for date-of-birth because people know these by heart. However, if the day of the week or week of the month is relevant then a calendar control might be appropriate.
Tim P
  • Keith - What do you make of the apparently conflicting advice we give on date and time formatting below?
Keith E
  • The mainstream guidance is to show full dates, ie "14 June 2015", without hyphens/dashes. But as Ed notes below, this is for our content, not for user inputs.
Ed H
  • I'd also add that the mainstream guidance is quite lacking for services. The design manual used to have a good page on 'content for transactions' but this was deleted some time ago.
Keith E
  • I think Beck is working on recreating something like that
It also explains how to format dates. 
  • click D to find the advice on Dates
Our previous advice said "Avoid shortening month names, but if you absolutely have to, use princeton shortening."  This differs from the advice in the style guide, which has a slightly different shortening. The Princeton one specifies all the months but in a confusing format; the style guide only says what to do for some of the months.
Ed H
  • What's confusing about the princeton one? The style guide should really give all the shortened versions, not just some of them.
Pietro D
  • I'm a bit more confused now. The Princeton one for January would be 5 Jan. 2015?
Caroline J The service manual page says:
"6. Formatting dates
The default date format to use is this one:
  • 8 July 2014
Periods of time should be formatted like this:
  • 8 July to 9 August"
It's not at all clear that the section relates to output dates rather than input
  • Do some research to find out whether users notice shortening at all, and if so which one works best for them
  • Reconcile the style guide advice with the service manual advice. 
Tim P Using native date pickers
Mat H
  • Has there been any user research in favour of native date pickers? On 'Visit someone in prison' (formally Prison Visits Booking) we used this for touch devices which support 'date' type inputs with feature detection (Modernizr).
  • We had some technical problems with Samsung devices which very strangely switched day and months on certain months and another bug led us to remove the native date picker. 
  • We have since found that users are as comfortable entering memorable dates in 3 fields on a touch device as they are desktop. The pattern and number type attributes enforce the numeric virtual keyboard which aids input. The only thing that's lost - on iOS certainly - is the next field button (tab equivalent).
  • Also, native date pickers will suffer from the the same problems as drop downs for the year field, as they require a lot of scrolling (or even worse - tapping on Android (when the user doesn't realise they can swipe)).
Gemma L
  • For the Android Galaxy S5 in the screenshot below, the date picker obscures all the content on the screen. Starting at current year isn't helpful when entering a date of birth and will require a lot of scrolling. GOV.UK elements has removed the native date picker.
Mat H
  • Examples on GOV.UK
Caroline J Date range example
The Air Accidents Investigation Branch (AAIB) reports page has a date range filter.
This  page has tested very well - but bear in mind that the users of the page are highly specialist, and would be nearly all high confidence/ high skills Internet users. 
We started with a more specific date thing that wanted dd/mm/yyyy and  then we noticed that that didn't really map to how people thought about  dates in this context (they were more inclined to say: "reports after 2009" than "reports after 01/01/2010"). So we opened up our validation based  on analytics and then wrote a test suite for all the date formats we  wanted to support and then implemented date parsing to support that. 
Tim P
  • Implementation
Specifically, this pull request and this commit.
Alice B Date patterns from users
Looking at the analytics for https://www.gov.uk/government/publications (as of 5th/Nov/2014) we can see users entering the following date formats:
Caroline J (These numbers are from the range picker above, with a suggested input of 01/01/2013 and with users who are mostly high skills/high confidence). 
Format example Count %
01/01/1964 1412 75.79%
01/01/11 138 7.41%
september 2014 68 3.65%
01 January 2014 44 2.36%
2008 35 1.88%
1/1/1990 30 1.61%
01.01.1997 30 1.61%
1 January 2014 27 1.45%
1/06/2013 26 1.40%
25/09/014 13 0.70%
01/05 /14 7 0.38%
31st august 2015 7 0.38%
01.08.14 5 0.27%
10 pm 3 0.16%
01012013 3 0.16%
01/03/02014 3 0.16%
2 11 2014 2 0.11%
01-01-2002 2 0.11%
2004/6/1 2 0.11%
01/012001 2 0.11%
26+nov 1 0.05%
Oct.1,2014 1 0.05%
may2010 1 0.05%
09/2013 1 0.05%
Cath R In  user research on this picker, we saw people leaning towards putting the date in the suggested format - they feel like they have to even though they  might prefer to enter it more loosely e.g. June or 2010. One participant put in June in the main search field (instead of the date picker) and expected it to automatically default to June 2014
Mat H Prison Visit Booking (PVB)
In  PVB we have users are required to pick up to three possible visiting  slots within the next 28 days. A day can contain multiple slots. The  user must first select a day to see the slots.
Slot Picker Calendar in it's initial state:
The  grid is built as a table. Each day is an anchor element allowing  tabbing. "May" is also an anchor element. When clicked, JavaScript  changes the scroll position of the day cells.
Slot Picker Calendar selected:
7 days ago
Unfiled. Edited by Harry Trimble 7 days ago
  1. Prepare for a test
Harry T
  1. Check when a test or appointment is
  1. Take a test
  1. Book an inspection
  1. Prepare for a inspection
  1. Get something inspected
  1. Receive inspection results
  1. Report something
  1. Provide a photograph
  1. Get a physical proof
  1. Get digital proof
  1. Search for a record
  1. Check personal record
  1. Calculate something
  1. Pay for something
  1. Get paid 
  1. Fill in a form
  1. Prove identity 
  1. Update details
  1. Prove address
  1. Keep records 
  1. Submit data
  1. Register something
  1. Declare something
  1. Get notified
  1. Get advice 
  1. Get insured 
  1. Train for something
  1. Share personal data 
  1. Stop something
  1. Pause something (e.g. state pension)
  1. Replace something
  1. Find a service provider (e.g. childminder)
  1. Check responsibilities (i.e. now I have permission what must I do to keep it)
  1. Check status (view driving licence, check state pension) 
  1. Save and return
  1. Create an account 
  1. Attend an interview/ appointment 
8 days ago
3 / 3
Unfiled. Edited by Gavin Wye 8 days ago
Gavin W
  • Other examples
Here's one approach that attempts to get the best of both worlds:
8 days ago
Unfiled. Edited by Gavin Wye 8 days ago
 Definition of internal tool:
Andy P
  • A system that is used inside Government by Government staff or agencies representing Government 
  • this doesn't mean only government employees, or agents see the system - the public/people we serve also do - for example screen sharing when citizens meet government in job centres, or contact centres (Land Registry will show citizens their screen)
  • These systems exist as part of the whole service - so they should be designed to help government representatives meet the needs people outside of government have of us.
Context of use of internal Government systems
  • Many staff spend their entire working days using internal tools, and jump between multiple systems as they have to use multiple ones simultaneous to do their job. E.g. case workers may have to consult/enter data into 3 or 4 systems to complete one case.  
  • Note that when working between different systems, some users arrange the systems on their screen in specific ways to maximise either efficiency and utilise screen real estate, for example having one system in a window on one side of the screen and another on the other side to speed up cut and paste or cross referencing 
  • The tool will be accessed from a variety of screen sizes and device types (mobile, tablet). 
  • Many tools are used frequently by users who become expert in the system, but other tools are only used very occasionally, so it cannot be assumed that users are familiar with the form and function of an internal system.
User Needs
  • Need for cohesion: 
  • As a gov employee I need to know where I can find functionality on the internal tools I use so that I can be efficient in my job
  • “Where is the search box here?" 
  • Need for recognition:
  • As a gov employee I need to be able to quickly identify which tool I am looking at when I glance at the page so that I am efficient and reduce mistakes  
  • "Which tool of the tools I have open is this one?"
  • Need for trust and reassurance 
  • As a gov employee I need to have trust in the internal tool that I am using, so that I can be confident using it and showing it to citizens when necessary 
Types of content in current internal tool header’s:
  • Primary nav and Secondary nav
  • Department name
  • Service name 
  • Navigation elements - pattern that top left includes link back to dashboard/top of the tool 
  • Breadcrumb trail
  • Page name 
  • Search box
  • Page controls 
Can internal tools that are not on Gov.uk be allowed to use Transport and Crest? 
  • currently not.  But we discussed the value of trust these element bring, and the assurance 'the thing' meets a certain standard (discussion about internal assessments and if/how that would be governed.  Desire to have some form of assessment/governance for internal systems)
Summary of thoughts / recommendations from the day:

Contact Support

Please check out our How-to Guide and FAQ first to see if your question is already answered! :)

If you have a feature request, please add it to this pad. Thanks!

Log in / Sign up