Hackpads are smart collaborative documents. .

Tim Paul

1130 days ago
Unfiled. Edited by Tim Paul 1130 days ago
Iconography where possible to show the whole customer journey and the things you will need before you start (or after you finish — for example, when online Visa & Immigration form is submitted, the applicant still has things left to do) to shape customers' expectations.
Tim P
  • Not sure we should explicitly recommend iconography, though there's clearly a time and place for it. We need to clarify our position on icons and pictograms. I'd be interested to hear any views from the exemplars.
The start page for any complex transaction should clearly communicate a number of things:
  • The broad eligibility requirements for the transaction
  • The high level customer journey - especially any offline elements
  • The information the user will be required to submit
  • Things the user will need to know about or have decided
  • Whether there's a financial cost involved
  • Some indication of how long the process might take
  • Something we discovered when researching Lasting Power of Attorney is that some people will just jump in regardless. We needed a way of supporting those people from within the transaction flow - giving them access to the information they need to make these important decisions. We chose to do this with a light-box because: a) the help is pretty comprehensive and b) we didn't want to drag people away from the screen they were on. It still felt a little weird though so I'm keen to hear other approaches. The second thing we did was allow users to save their progress. In the end this meant building account management and all sorts - but we knew from research that people often pause for weeks or even longer to consider their options, talk to relatives and solicitors etc.
548 days ago
Unfiled. Edited by Tim Paul 548 days ago
Ed H
Tim P
  • Lasting Power of Attorney requires that the user create, print and sign a document, then register it online, then post it. I just took a look at the current service though and I don't think they do a great job of the printing part. What I remember from research though is that users did not expect to be printing and signing anything (digital means digital right?), so we had to really signpost this heavily in advance. We even resorted to pictograms of printers and post boxes (though these have been removed now).
56 days ago
Unfiled. Edited by Tim Paul 56 days ago
Tim P
  • GOV.UK Notify
Advice from Chris Hill-Scott:
File formats
Let users upload .csv files, .xls files, .xlsx files, .ods files, etc. – but convert them to CSV internally before you start trying to read the contents.
Not everyone has Excel, and the tools that people are already using might not export to Excel. Also, it’s not an open standard.
File upload UI
Put a button on the page that opens the system file picker. As soon as the user has chosen the file, submit the form for them and redirect them to a page that shows the contents of the file, along with any errors. There’s a little GIF of this here: https://github.com/alphagov/notifications-admin/pull/424
On the page where you show the contents of the file, have a re-upload button (in case anything is wrong).
Give users a single, clear error message that tells them what to fix. This is the most important thing. It’s better to make users step through each potential error one at a time than bombard them with all the errors at once. You can see screenshots of various examples here: https://github.com/alphagov/notifications-admin/pull/646
It’s much easier to do this when users are uploading one file at a time.
  • Research
253 days ago
Unfiled. Edited by Tim Paul 253 days ago
  • Paginating lists, tables or search results
Paginating lists or search results comes at a cost because you're hiding information from users.
Set the default number of results per page so that pagination is rarely needed.
Tim P Use analytics to establish how far down the list users tend to still find relevant results.
Use this to decide how many results per page to show.
Avoid infinite scroll
  • Pagination on guides
For guides that are intended to be read in a certain order, use previous and next links, like this:
Jason B
  • Be interested in how this tested as there is no obvious indication of which page you are on. Works well in the power of attorney example where you are navigating between page titles rather than a list of numbers. 
  • Other examples on GOV.UK
Zac T
  • Where can I get hold of the SASS used for the Previous/Next example? I've seen it on multiple sites and we need to implement it on a site for OPG
702 days ago
Unfiled. Edited by Tim Paul 702 days ago
Tim P Postcode Anywhere
Has anyone used this or similar? Would be very interested to know how it performs with users - especially the single line version.
903 days ago
Unfiled. Edited by Ed Horsford , Gemma Leigh , Joe Lanman , Tim Paul 903 days ago
  • visually fade the underlying page whilst a modal dialogue is open. This helps users of screen magnifiers understand why they’re unable to interact with the underlying page
Ed H
  • prevent scrolling of the underlying page whilst a modal dialog is open. The user should not be able to interact with the original page whilst it's open.
LPA 'add another'
The Lasting Power of Attorney service uses modal dialogs for 'add another' functionality. The summary is shown on screen, but modals used to edit it.
Joe L
  • this seems like something that would be better as a separate page. There's a lot of content and it's quite complex. 
Tim P
  • I agree. I was young and naive when I did this. Actually, the real reason was that we were using the 'accordion form' pattern which got really confusing once you entered any loops, so we had to break out from the accordion somehow. It also made the loop 'feel' different to the normal flow. It tested fine - I think users don't really register they're in a modal when it's that big. I'm sure now we'd try a different approach, but I'm still keen to see a really good solution to multi-page loops within wizard style flows.
GOV.UK Verify
I'd normally use 'expanders' to do this, but on this page, the grid layout doesn't work well with expanders.
Ed H
  • What's an expander?
Gemma L
  • Details/summary - progressive disclosure (I think).
Ed H
  • Gotcha.
  • For me modals can be useful for where you want to provide additional functionality - details isn't always suited to this.
Gemma L
  • GOV.UK Verify 
An example of resizing modal windows for smaller screens.
Joe L
  • Just thinking about the back button. I haven't seen anyone try and use it on the desktop version, but I imagine they might with the mobile design as it looks like a new page.
  • We could either make it look more 'popup-y' (show a bit of background around the edge) or support the back button, so pressing it hides the dialog
343 days ago
Unfiled. Edited by Tim Paul 343 days ago
Don't cite legislation (no-one will read it). For example: "Providing false information is an offence under section 2(a) of the Financial Services and Markets Act 2000"  is less effective than "Providing false information is an offence".
Tim P Informed consent
Clicking on a checkbox carries no more legal weight than just having them click a button. 
There's some evidence that people have become so used to this technique that it no longer carries any significance, but more research is required.
Ed H
  • This question has come up several times, and I don't think we have consensus here. The UI is not just about having legal weight. We've seen users who will blindly click on the green button without reading. Whilst they may click on an 'I agree' checkbox without reading, at least they've made conscious decision ('informed consent') to do that. They're aware that they've agreed to do something. With the button alone there will be users who don't even realise they've made an agreement at all.

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