1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<title>Prescription Form UI Improvements</title>
<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
</head>
<nav>
<a href="#menu">Menu ↓</a>
</nav>
<main>
<h1 id="prescription-form-ui-improvements">Prescription Form UI Improvements</h1>
<p>2019-03-13</p>
<p>I was browsing the Clearly website a few days ago and ended up using their prescription form to update my worsening eyesight. The design of this form wasn’t <em>bad</em> per se, but it could certainly be improved.</p>
<h2 id="current-design-of-the-prescription-view">Current design of the prescription view</h2>
<p><img src="/public/images/prescription-ui.webp" alt="Default prescription UI" /></p>
<p>As I stated, this design isn’t horrible by any means, but right away we can notice some problems:</p>
<ul>
<li>the layout causes the users’ eyes to jump between left-to-right and top-to-bottom without good correlation</li>
<li>title content and <code>next</code> buttons are centered, while dropdowns are presented as left-to-right</li>
<li>anchor link coloring is inconsistent</li>
<li>too much whitespace between interactive sections</li>
<li>dropdown height overly large</li>
</ul>
<h2 id="starting-to-make-some-changes">Starting to make some changes</h2>
<p>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).</p>
<p><img src="/public/images/prescription-ui-update-1.webp" alt="Layout wireframe UI" /></p>
<p>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. </p>
<p>The previous layout also had the <code>PD</code> 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 <code>PD</code> down into it’s own row, grouping the unrelated tasks on the page separately.</p>
<blockquote>
<p>You’ll also notice that I’ve updated the dropdowns to use a monospace font to convey that these options are number inputs.</p>
</blockquote>
<p>Finally we place the button actions in-line with the <code>PD</code> block since it previously ate up far more real estate than was necessary.</p>
<h2 id="adding-some-color">Adding some color</h2>
<p>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.</p>
<p><img src="/public/images/prescription-ui-update-2.webp" alt="Layout UI with color" /></p>
<h2 id="finishing-touches">Finishing touches</h2>
<p>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.</p>
<ul>
<li>make default select styling include depth and importance (this is the main action of the page afterall)</li>
<li>round out harsh corner edges on elements</li>
<li>set labels and row items with more pleasing backgrounds (while still maintaining contrast)</li>
<li>give the <code>next</code> button visual importance (make it look like a real button)</li>
</ul>
<p><img src="/public/images/prescription-ui-update-final.webp" alt="Layout UI with color" /></p>
<p>That’s it!</p>
<footer role="contentinfo">
<h2>Menu Navigation</h2>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/uses">Uses</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/resume">Resume</a></li>
<li><a href="/colophon">Colophon</a></li>
<li><a href="/now">Now</a></li>
<li><a href="/donate">Donate</a></li>
<li><a href="/atom.xml">RSS</a></li>
<li><a href="#top">↑ Top of the page</a></li>
</ul>
<small>
Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
Maintained with ♥ for the web. <br>
Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
</small>
</footer>
|
