-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjuly.html
190 lines (189 loc) · 14.2 KB
/
july.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
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<meta content='width=device-width, initial-scale=1.0' name='viewport' />
<meta content='Mon, 1 August 2011 10:00:00 GMT' http-equiv='expires' />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
<!-- Comment in layout -->
<link href="stylesheets/reset_html5.css" media="screen" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Goudy+Bookletter+1911" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/common.css" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/wa-2011-07.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="javascripts/wa-2011-07.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-298580-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
<!--[if lte IE 8]>
<script src="javascripts/html5.js" type="text/javascript"></script>
<![endif]-->
<title>With Associates — A digital agency, we build and design websites and apps</title>
</head>
<body class='index'>
<nav class='global_header instapaper_ignore'>
<div class='container'>
<a href='/' id='logo'>
<img src='images/wa-logo.png' />
</a>
<ul>
<li class='first'>
<a href="/january">Jan</a>
</li>
<li>
<a href="/february">Feb</a>
</li>
<li>
<a href="/march">Mar</a>
</li>
<li>
<a href="/april">Apr</a>
</li>
<li>
<a href="/may">May</a>
</li>
<li>
<a href="/june">Jun</a>
</li>
<li class='active'>
<a href="/july">Jul</a>
</li>
<li><a href="/august">Aug</a></li>
<li><a href="/september">Sep</a></li>
<li><a href="/october">Oct</a></li>
<li><a href="/november">Nov</a></li>
<li><a href="/december">Dec</a></li>
</ul>
<a class="toggle" id="whats-this" href="#">What’s this?</a>
<div id='more'>
<p>We’re changing our site every month this year with an aim to experiment, play, discuss and learn more about the ever evolving nature of the digital environment.</p>
<form action='http://withassociates.createsend.com/t/r/s/ikkkjd/' id='subForm' method='post'>
<p>Follow <a href="http://www.twitter.com/withassociates">@withassociates</a> for updates, <a href="january">read more behind the idea</a>,<br/>or sign up for email updates <input type="email" name="cm-ikkkjd-ikkkjd" id="ikkkjd-ikkkjd" placeholder="example@domain.com"> <input type="submit" value="Sign up" class="button" /></p>
</form>
</div>
</div>
</nav>
<div id='main' role='main'>
<div class='container'>
<header>
<img alt='With Associates' size='168x22' src='/images/with-associates.gif' />
</header>
<div id='intro'>
<p>We’re a digital agency that design and build websites and apps with a passion<br/>for good user experience<a href="#what-is">*</a>.</p>
</div>
<div class='cols slice'>
<div class='col first'>
<p>We’re a digital agency based in North London that plan, design and build websites, apps and user interfaces. More specifically, ‘we’ are currently made up of <a href="http://twitter.com/mathewwilson" target="_blank">Mathew Wilson</a>, <a href="http://twitter.com/erino" target="_blank">Erin Staniland</a>, <a href="http://twitter.com/weesquirt" target="_blank">Jenifer Dunn</a>, <a href="http://twitter.com/almonk" target="_blank">Al Monk</a>, <a href="http://twitter.com/jgwhite" target="_blank">Jamie White</a> and <a href="http://twitter.com/lawrencebrown" target="_blank">Lawrence Brown</a>.</p>
</div>
<div class='col'>
<p>Our collaborative practice allows us the luxury of working with a broad range of clients. From <a href="http://www.lorva.co.uk">independent artists</a> to <a href="http://www.vitsoe.com">renowned furniture manufacturers</a>, from <a href="http://cutlasercut.com">SMEs</a> to <a href="http://www.sohohouse.com">international groups</a>, and from <a href="http://www.itsnicethat.com">established blogs</a> to new and <a href="http://visual-editions.com">experimental publishers</a>.</p>
<p><a href="june"><strong>View a collection of case studies.</strong></a></p>
</div>
<div class='col'>
<ul class='icons'>
<li class='twitter'><a href="http://www.twitter.com/withassociates">Twitter</a></li>
<li class='flickr'><a href="http://www.flickr.com/photos/withassociates">Flickr</a></li>
<li class='email'><a href="mailto:hello@withassociates.com">Email</a></li>
</ul>
<ul class='vcard'>
<li class='fn org'>With Associates</li>
<li class='adr'>
<span class='street-address'>100 De Beauvoir Road</span>
<span class='locality'>London</span>
<span class='postal-code'>N1 4EN</span>
</li>
<li><a href="http://maps.google.co.uk/maps?q=100+De+Beauvoir+Rd&hl=en&sll=51.543132,-0.08008&sspn=0.023381,0.035448&z=16&iwloc=A">Google Map</a></li>
<li><a href="mailto:hello@withassociates.com" class="email">hello@withassociates.com</a></li>
<li class='tel'>+ 44 (0)20 7923 4757</li>
</ul>
</div>
</div>
<div class='slice'>
<h1>
<span class='by-line'>This month’s topic…</span>
<span id='what-is'><a>*</a>What is user experience?</span>
<span class='month'>July 2011</span>
</h1>
<div class='col col_620'>
<h2>Introduction</h2>
<p>Here at With, we’re a little obsessed with a concept that we like to call ‘good internet’. Good internet is that deep down, happy, warm feeling you get inside when you’re using a website and it “just works”.</p>
<p>It’s intangible, ethereal and hard to vocalise what exactly is behind this feeling, but it is there and it makes a big difference.</p>
<p>Contrast this with the feeling of frustration you get when using a ‘bad website’; one that doesn’t really seem to be working the way you want it. Whether that’s due to speed, illegibility, incomprehensibility or a thousand other smaller details – we all know there are many ways that computers can annoy us, but what makes the difference between e-rage and a site that we love to use can often be very hard to pin down.</p>
<p>It is this void between you and the interface you are using (be it a website, app, game, cash machine etc) that User Experience design aims to address. This is not to say we can dictate the experience that a user has, but we can plan for it to be as good as possible given a set of scenarios that are likely to occur.</p>
<h2>A fictional case study</h2>
<p>To illustrate our point more clearly, we devised an entirely fictional scenario in which a design agency (Blob) and technical agency (Technobits) are working together to fulfil a brief for their (also fictional) client.</p>
<p>The client, Hildebrands, a premier London-based tailors, wishes to expand its’ service to customers by providing a new online member’s section wherein users can check the progression of their finely made goods.</p>
<p>After several months designing and building the new members section, only a small number of tasks remain. The most pressing of these being a login screen so members can actually access the new system.</p>
<p>The login screen is designed by Blob and sent for client approval. Great work! The only feedback is for some extra copy to help users of the old system and a telephone number to ring if there are any problems.</p>
<p>A few days later, Technobits deliver version 1.0 that adheres beautifully to the new design style, and that they are confident fulfils the functionality requirements that the client requested.</p>
<p class='instruction'>Have a play with the version 1.0 login page below to get a feel for how it works. Try wrong passwords / usernames / and tabbing between text fields, everything you would do in a real environment. The username and password is <strong>demo@demo.com</strong> and <strong>demo</strong> but also see what happens when you enter the wrong information.</p>
</div>
<div class='holder'>
<iframe height='860' scrolling='no' src='http://uxform1.html.withassociates.com' width='920'></iframe>
</div>
<div class='col col_620'>
<h2>A user’s bad experience…</h2>
<p>A few days later, the CEO of Hildebrands, makes an irate phonecall to Technobits. One of his loyal customers had been using the new system and was unable to login. Even more unfortunately, this particular customer had recently placed a large order, which they have now cancelled out of frustration.</p>
<p>Mr Hildebrand demands answers as to why the login process is so tedious, and Blob defer blame to Technobits, for not implementing their designs to a high enough standard.</p>
<p>In a move to remedy the situation, Technobits and Blob agree to hire a User Experience (UX) designer to plan a better user flow for the login screen, with aim to lower customer frustration levels.</p>
<p>After a few hours work, the UX designer highlights a list of problems with the version 1.0 login process:</p>
<ul>
<li>Too much copy – important information is not clear</li>
<li>Using the tab key to move between fields does not work as expected</li>
<li>Both input fields clear completely after unsuccessfully logging in; this aggravates users who may have only typed their password wrong</li>
<li>Login and cancel buttons have no distinguishing prominence</li>
<li>The ‘Enter’ key does not submit the form</li>
<li>Forgotten password information details are hard to find and the language used is confusing</li>
<li>Errors are useless to the majority of users</li>
</ul>
<p>The UX designer concludes that these issues must be resolved in order to provide a level of digital service, that is equivalent to the physical experience within the physical store.</p>
<p class='instruction'>After several days working with Blob and Technobits, the UX designer provides the following functional demo. Again, the username and password is <strong>demo@demo.com</strong> and <strong>demo</strong> but also see what happens when you enter the wrong information.</p>
</div>
<div class='holder'>
<iframe height='600' scrolling='no' src='http://uxform2.html.withassociates.com' width='920'></iframe>
</div>
<div class='col col_620'>
<p>Along with the demo, the UX designer provides a list of the features added, changed and removed:</p>
<ul>
<li>The design of the form is simplified, the unnecessary cancel button is removed and the login button is made especially prominent</li>
<li>A helpful and simple support message is displayed after the user enters a username and password incorrectly 3 times</li>
<li>Using the tab key to move between fields works as expected</li>
<li>Clear and useful notification when a password has been entered incorrectly – revealing the ‘forgot password’ link only when necessary</li>
<li>Legible error messages</li>
</ul>
<p>After some lengthy user testing, Blob and Technobits agree that the new version is much more likely to aid users with the login process.</p>
<h2>To conclude our tale</h2>
<p>Naturally, this is an extremely simplified scenario focusing on a small (although important) piece of functionality in a project where budgets and deadlines are not a factor, but hopefully it has highlighted a tiny amount of what ‘user experience’ is, and means to users.</p>
<p>If possible, user experience should be considered throughout the whole development process of a system, from project requirements to build and testing.</p>
<p>When we have good customer service the experience sticks, we share it, and go back to the business again and again. User Experience is the same and we know the only way to make ‘good internet’ is to pay attention to every experience every website user is having.</p>
</div>
</div>
<footer>
<ul class='vcard'>
<li class='fn org'>With Associates</li>
<li class='adr'>
<span class='street-address'>100 De Beauvoir Road</span>
<span class='locality'>London</span>
<span class='postal-code'>N1 4EN</span>
</li>
<li>Company Registration No: 0C313207</li>
<li class='contact'><a href="http://www.twitter.com/withassociates">Twitter</a></li>
<li class='contact'><a href="http://www.flickr.com/photos/withassociates">Flickr</a></li>
<li class='contact'><a href="mailto:hello@withassociates.com">hello@withassociates.com</a></li>
</ul>
</footer>
</div>
</div>
<!--# include file="/with-banner/index.html" -->
</body>
</html>