While digital interactive products have shorter history compared to physical products, we have learned so many UI conventions over the course of time as we interact with various products. Which is why whenever we come across a digital product with UI conventions used the wrong way, we get confused, get frustrated, and get an unpleasant experience.
Here’s one of such examples which I came across, which is part of a wizard to change an address on one of public sector websites.
At the end of the wizard, it asks you whether you want to use your new address as voting address, as well as whether you are a US citizen or not.
This screenshot is a review or a confirmation screen on what you selected for those two questions.
It’s a fairly simple screen, but has several issues.
Let’s take a look at those one by one.
First, an Edit button right after a sentence that says “Check this box if you do not want your new address used for voter registration purposes” seems like you can edit this sentence. But this is a sentence to which you mark a checkmark based upon, which brings up the next issue.
There’s a checkbox below this sentence. A checkbox is usually clickable, but this one is not clickable. This checkbox is here to show its “unchecked status” because you did not click it in the previous screen.
Next, you have the 2nd Edit button after “US Citizen”. Again at a first glance, it looks like when you click this 2nd Edit button, you can edit “US Citizen” to something else, and because of that, “US Citizen” looks like your answer.
But when you take a closer look, there’s a dropdown menu with a text label “No”.
At this point, you realize that this is your answer, and “US Citizen” is more like a question statement that you answered “No” for.
So how can we improve this?
Here’s the improved design that I created.
There are two information blocks, each block consists of a question and an answer.
As you can see, the blue area is the title section which is about a question, the orange area is the answer section, which is your answer to the questions above.
Here’s a breakdown of information block.
The blue title section just have a title.
But the orange answer section consists of a few elements.
1 – “Your answer:”
2 – Edit button
3 – The actual answer “I allow my new address used for voter registration purposes.
I added “Your answer” and converted the checkbox answer into a sentence answer, which reads “I allow my new address used for. Voter registration purposes.”
As a result, it made things clearer in terms of what was asked and how you responded, so that you can accurately review your answers.
When we take a look at just the information block structure, it becomes clear that there are title section and answer section, and edit button clearly belongs to answer section.
When the structure between original design and the improved design are compared side by side, the difference is pretty obvious that the improved design has much clearer, simpler structure.
Because design is about an overall system, not just a single screen, improving the review screen leads to improving other relevant screens such as voting address screen, and US citizen screen.
Here’s the original design of the voting address screen.
Here’s the improved design, extending the same principle from the review screen design study, which is to organize it into question (or title) to answer structure.
Similarly, here’s the original design of the US citizen screen.
And here’s the improved design of the US citizenship screen.
We only went through just 3 screens, but the actual wizard has more steps and screens.
In reality, the entire wizard needs to be studied and designed together.
I’m not going to cover that in this video, but you get the point!
Check out YouTube version here.
Here’s another article on UI conventions.