-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcase_study--gymsales_settings_page.html
178 lines (151 loc) · 10.8 KB
/
case_study--gymsales_settings_page.html
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Design of a settings page | by Vedran Arnautovic</title>
<link rel="stylesheet" src="http://normalize-css.googlecode.com/svn/trunk/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/app.css">
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700|Roboto' rel='stylesheet' type='text/css'>
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon'/ >
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="public"/>
</head>
<body>
<!-- NAV -->
<nav class="nav nav--on-light-bg noselect" id="nav">
<ul class="nav__list">
<li class="nav__item"><a href="index.html">Home</a></li>
<li class="nav__item"><a href="about_vedran.html">About me</a></li>
<li class="nav__item nav__item--selected"><a href="vedrans_design_work.html">My work</a></li>
</ul>
</nav>
<!-- Make nav sticky on scroll -->
<script type="text/javascript" src="/js/sticky_nav.js"></script>
<script type="text/javascript">formatStickyNav("@colour-light-gray");</script>
<!-- lazy load images -->
<script src="js/lazy_img.js"></script>
<!-- CASE STUDY INTRO -->
<div class="section section--medium">
<div class="section__content section--top-of-page section--last-in-section section__content--allow-wide">
<h1 class="h1-heading">Design of a settings page</h1>
<p><a class ="link link--on-light-bg link--inline" target="_blank" href="http://gymsales.net">GymSales</a> are a provider of lead and member management software for gyms and fitness centres.</p>
<p>As their product grew in complexity, so did their settings page – it required some attention before it could grow further.</p>
</div>
</div>
<div class="section section--light ">
<div class="sub-section__content sub-section--first-in-section">
<h2 class="h2-heading">The challenge</h2>
<p>Restructure the current settings page to allow more intuitive discovery of settings items and to allow for the page to grow – in other words, allow for more setting sections to be added.</p>
</div>
<div class="sub-section__content">
<h2 class="h2-heading">Current state</h2>
<p>The existing page had a number of problems. Here are the three key problems I wanted to address.</p>
<h3 class="h3-heading">Visual noise</h3>
<p>Unnecessary UI elements create visual noise and distract the user from completing their task.</p>
<div id="prob1-img-container" class="image--medium placeholder" data-large="resources/images/settings_page_problems1.png">
<img id="prob1-img-placeholder" class="img-small" src="resources/images/settings_page_problems1_PLACEHOLDER.png">
<div style="padding-bottom: 26.66%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('prob1-img-container','prob1-img-placeholder',"Visual clutter on existing site");</script>
<p>In the image above, you can see that the gym name is repeated, as is the label ‘General settings’. The horizontal divider lines are unnecessary – adequate separation can be better achieved through smart use of white space.</p>
<h3 class="h3-heading">Menu hard to find</h3>
<p>The way you accessed different sections of the settings page was through a tiny ‘Menu’ item shown in the image above, in the top right. This was neither intuitive, nor easy to find.</p>
<h3 class="h3-heading">Poor form structure</h3>
<p>The forms used in the settings page needed a lot of work.</p>
<div id="prob2-img-container" class="image--medium placeholder" data-large="resources/images/settings_page_problems2.png">
<img id="prob2-img-placeholder" class="img-small" src="resources/images/settings_page_problems2_PLACEHOLDER.png">
<div style="padding-bottom: 26.66%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('prob2-img-container','prob2-img-placeholder',"Issues with existing form structure");</script>
<ul class="list">
<li class="list__item">Two column layout requires the user’s eye to zig-zag through the form, which is harder than scanning straight down the page.</li>
<li class="list__item">Labels to the left of the field are generally understood to perform worse than labels on top of fields.</li>
<li class="list__item">Left justified labels, combined with a two column layout, cause the labels to be closer to the fields they are not related to.</li>
</ul>
</div>
<div class="sub-section__content">
<h2 class="h2-heading">Research</h2>
<p>First up, I did some research to see how well known sites with complex settings pages solve this problem. I looked at Facebook, Slack and Google Inbox. You can see the screenshots <a class ="link link--on-light-bg link--inline" target="_blank" href="https://www.dropbox.com/sh/9dqjnvq03xwpqvi/AABZ_QtGZD9gz4nbVl8HvzR2a?dl=0">here</a>.</p>
<p>The common layouts were flat, tabbed and left hand side menu.</p>
<div id="layout-img-container" class="image--medium image--with-caption placeholder" data-large="resources/images/settings_page_layouts.jpg">
<img id="layout-img-placeholder" class="img-small" src="resources/images/settings_page_layouts_PLACEHOLDER.jpg">
<div style="padding-bottom: 58.98%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('layout-img-container','layout-img-placeholder',"My sketch documenting the basic layouts in common use");</script>
<div class="image-caption">My sketch documenting the basic layouts in common use</div>
</div>
<div class="sub-section__content">
<h2 class="h2-heading">Considering page layouts</h2>
<p>In the context of GymSales, the most common layouts would look this.</p>
<h3 class="h3-heading">Flat page</h3>
<p>This design would require too much scrolling, and would quickly result in a settings page that is way too long.</p>
<div id="alt2-img-container" class="image--medium placeholder" data-large="resources/images/gs_settings_alt2.png">
<img id="alt2-img-placeholder" class="img-small" src="resources/images/gs_settings_alt2_PLACEHOLDER.png">
<div style="padding-bottom: 86.82%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('alt2-img-container','alt2-img-placeholder',"Layout alternative 2");</script>
<h3 class="h3-heading">Horizontal tabs</h3>
<p>Sooner or later, we would run out of space for the horizontal tabs. This could be used for groups of settings sections, with a flat page within each one. However, we would still run the risk of having some very long pages.</p>
<div id="alt3-img-container" class="image--medium placeholder" data-large="resources/images/gs_settings_alt3.png">
<img id="alt3-img-placeholder" class="img-small" src="resources/images/gs_settings_alt3_PLACEHOLDER.png">
<div style="padding-bottom: 86.82%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('alt3-img-container','alt3-img-placeholder',"Layout alternative 3");</script>
<h3 class="h3-heading">Left hand side menu</h3>
<p>This is the approach used by Facebook, amongst others, and provides most flexibility in terms of adding sections later on. Also, it is very easy to locate the items in the left hand menu.</p>
<div id="alt1-img-container" class="image--medium placeholder" data-large="resources/images/gs_settings_alt1.png">
<img id="alt1-img-placeholder" class="img-small" src="resources/images/gs_settings_alt1_PLACEHOLDER.png">
<div style="padding-bottom: 86.82%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('alt1-img-container','alt1-img-placeholder',"Layout alternative 1");</script>
</div>
<div class="sub-section__content">
<h2 class="h2-heading">The final design</h2>
<p>The key features of the final design are:</p>
<ul class="list">
<li class="list__item">The sections available are immediatelly visible via the left hand side menu.</li>
<li class="list__item">New sections can easily be added to the menu.</li>
<li class="list__item">Form design is inline with best pracice, regarding layout and field labeling.</li>
<li class="list__item">Visually, the page is much cleaner that the original</li>
</ul>
<div id="final-img-container" class="image--medium placeholder" data-large="resources/images/gs_settings_page_long.png">
<img id="final-img-placeholder" class="img-small" src="resources/images/gs_settings_page_long_PLACEHOLDER.png">
<div style="padding-bottom: 107.81%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('final-img-container','final-img-placeholder',"The final layout for the settings page");</script>
</div>
<div class="sub-section__content sub-section--last-in-section">
<h2 class="h2-heading">The outcome</h2>
<p>Soon after launching the new design, we needed to add another section to the settings page. This time, the development team needed no input from me, and could just follow the new layout pattern.</p>
<p>We now had a settings page that was much easier to maintain, add to and navigate.</p>
</div>
<div class="section section--medium section--nav">
<div class="sub-section__content sub-section--last-in-section">
<a class="link link--on-light-bg link--case-study-nav" href="vedrans_design_work.html#DesignOfASettingsPage">Back to ‘My work’</a>
<a class="link link--on-light-bg link--inline" href="vedrans_design_work.html#SideProjects">View my side projects</a>
</div>
</div>
</div>
<!-- START FOOTER -->
<script src="js/clipboard.min.js"></script>
<script src="js/copy_email.js"></script>
<div id='footer'></div>
<div class="footer section--dark footer__content">
<div class="section__content noselect">
<div id="email-bttn" class="bttn bttn--almost-black bttn--email">
<span class="bttn__label" id="email-label"
onmouseover="mouseOver('email-label')"
onmouseout="mouseOut('email-label','[email protected]')"
data-clipboard-text="[email protected]">
</span>
</div>
<a class ="link link--on-dark-bg link__footer" target="_blank" href="https://twitter.com/vedranio">Twitter</a>
<a class ="link link--on-dark-bg link__footer" target="_blank" href="https://medium.com/@vedranio">Medium</a>
<a class ="link link--on-dark-bg link__footer" target="_blank" href="https://www.linkedin.com/in/vedran-arnautovic-716a1b128">LinkedIn</a>
<a class ="link link--on-dark-bg link__footer" target="_blank" href="https://github.com/vedranio">GitHub</a>
<a class ="link link--on-dark-bg link__footer" target="_blank" href="https://www.instagram.com/vedran_arnautovic/">Instagram</a>
<script type="text/javascript">copyEmailToClipBoard('.bttn__label','email-label', "bttn__label","[email protected]");</script>
</div>
</div>
<!-- END FOOTER -->
</html>