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.
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.
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).
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.
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.
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.
I'd normally use 'expanders' to do this, but on this page, the grid layout doesn't work well with expanders.
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".
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.