As I stated, this design isn’t horrible by any means, but right away we can notice some problems:
nextbuttons are centered, while dropdowns are presented as left-to-right
Let’s tackle these problems one at a time. First, we want a more defined page layout so the user can scan through the content more easily (left-to-right, down to the next line, then repeat).
We have now left-aligned the title content to be flush with the OD/OS elements below it to help keep the reading flow consistent.
The previous layout also had the
PD in-line with the OD/OS element rows which created a problem of resetting the user thought-process. Since it requires the user to jump from the “right eye” option to the “PD” option, then back to “left eye” option it breaks the flow of user “tasks”. The new UI shifts the
PD down into it’s own row, grouping the unrelated tasks on the page separately.
Finally we place the button actions in-line with the
PD block since it previously ate up far more real estate than was necessary.
The original design has some inconsistencies with the link coloring - some being a muted grey while others use the accented blue. Updating all interactive links to use Clearly’s default blue accent color would make for a better disconnect from non-interactive elements.
Now that the most important aspects of the refreshed UI are complete (layout, UX flow), we can implement all the visual extras to cleanup our basic wireframe.
nextbutton visual importance (make it look like a real button)
← Back to all articles
If you would like help support this blog, please consider donating to help keep articles ad-free.
This site is an honorary member of the 1MB Club.
No third-party advertising or data collection - More about privacy.
Built with Jekyll & hosted on Netlify.
Maintained with ♥ for the web.
This page is valid HTML