-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathinteraction.html
More file actions
294 lines (237 loc) · 16.7 KB
/
interaction.html
File metadata and controls
294 lines (237 loc) · 16.7 KB
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-68883515-1', 'auto');
ga('send', 'pageview');
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SkipQueues - Interaction</title>
<link rel="shortcut icon" type="image/x-icon" href="./img/coffee.ico" />
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/grayscale.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/landing-page.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/agency.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="index.html">
<i class="fa fa-coffee"></i> <span class="light">Skip</span>Queues
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<li >
<a href="./index.html">Home</a>
</li>
<li>
<a href="./service-design.html">Service design</a>
</li>
<li>
<a style="color: rgb(239,71,58);" href="./product-design.html">Product design</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Header -->
<a name="about"></a>
<div class="intro-header">
<div class="container" style="height:250px;">
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h2 class="intro-message-title">Interaction</h2>
<p id="headerDescription" >In order to create an interaction design of the system it is required to use high fidelity prototyping. It simulates the final product in order to get valuable feedbacks from its use.</p>
<div class="row">
<a href="#content" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.intro-header -->
<!-- Page Content -->
<a name="services"></a>
<div class="content-section-a" id="content">
<div class="container">
<div class="row">
<div class="col-lg-7 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">Goals</h2>
<p class="lead">• Create a realistic application prototype</p>
<p class="lead">• Create a global version of its functionality</p>
<p class="lead">• Learn from the prototyping software including both positive and negative aspects
<p class="lead">• Identifying product lacks and comprehend how they affect
</div>
<div class="col-lg-5 col-sm-6" >
<img class="img-responsive" src="img/interaction.png" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="content-section-a timelinePanel" id="content">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading titlesTimeline">Steps</h2>
</div>
</div>
<div class="row" id="rowTimeline">
<div class="col-lg-12" >
<ul class="timeline" style="float:left; margin-left:0;">
<li class="timeline-inverted">
<div class="timeline-image bola">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 id="titlesTimeline2">Step 1</h4>
<h4 class="subheading" id="titlesTimeline2">Interactive Prototype</h4>
</div>
<div class="timeline-body">
<p class="text-muted">The software Axure is used for the elaboration of this prototype. It is a wireframing and rapid prototyping software</p>
<br>
<h5 >Evaluation: Evaluation with experts</h5>
<br>
<p class="text-muted">Some recommendations from Material Design were proposed like the redistribution of some information elements or the addition of a fixed toolbar at the lower part of the application. The functionality of the toolbar would be to place the essential information that should be viewed at all time: The actual balance and the shopping cart. It was also mentioned to incorporate the “+” google button when you wanted to add an element to the shopping cart when visualizing its information, as this static button symbolizes the main action of the page you are viewing.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image bola">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 id="titlesTimeline2">Step 2</h4>
<h4 class="subheading" id="titlesTimeline2">Software Prototype</h4>
</div>
<div class="timeline-body">
<p class="text-muted">The software Ionic is used for the elaboration of this prototype. It is a mobile development framework that is based on JavaScript, HTML5 and CSS3. It has a very good performance and UI tools that enable a fast and efficient development. The main objective is to create a product as similar as possible as the final product so that we can evaluate its use with the user.</p>
<br>
<h5 >Evaluation: Evaluation with experts</h5>
<br>
<p class="text-muted">One aspect that has changed a lot over the implementation of the application is the shopping cart. At the beginning of the implementation it was planned to set it in the upper right corner, next to the current balance, but after the expert recommendations it was decided to remove it from that position as the top bar’s functionality in android is for research. The contents of the shopping cart have also changed with the aim of reducing the amount of information displayed to the user. </p>
<br>
<p class="text-muted"> Another change was the location of the buy button on the product information page. With this change it is always visible to the user and this will expedite the purchase.</p>
<br>
<div class="row">
<div class="col-md-5">
<h5 >Evaluation: Question Asking Protocol</h5>
<br>
<p class="text-muted">The evaluation of usability of the system was carried out by a single member over different days and situations. During the evaluation some specific questions were asked to the user so that it was possible to collect vital information about the usability and its user experience.</p>
</div>
<div class="col-md-7" style="margin: 20px 0 10px">
<div class="embed-container"><iframe src="https://player.vimeo.com/video/140589603?color=ef473a&title=0&byline=0&portrait=0" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
</div>
</div>
<h5 style="margin-top:40px;">Evaluation: Think Aloud Protocol</h5>
<div class="row" style="margin-top:45px;margin-bottom:15px;">
<div class="col-md-7" style="margin: 0px 0 10px">
<div class="embed-container"><iframe src="https://player.vimeo.com/video/140590126?color=ef473a&title=0&byline=0&portrait=0" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
</div>
<div class="col-md-5">
<p class="text-muted">The evaluation of usability of the system was carried out by four members over different days and situations.</p>
<br>
<p class="text-muted">Two of the members were asked to use the software prototype, during the evaluation of usability, the participants were asked to undertake the following tasks while contributing their opinions and feelings on the application. </p>
</div>
</div>
<p class="text-muted"> The tasks were:</p>
<p class="text-muted"> • Analyzing the overview of the application</p>
<p class="text-muted"> • Conducted tasks imposed to be done on the application</p>
<p class="text-muted"> • Discussing their feelings and opinions about their actions and the usability of the application. </p>
<br>
<div class="row" style="margin-top:10px;">
<div class="col-md-5">
<p class="text-muted" style="margin-top:5px;">The following two members underwent a wizard of oz, where they used the application with a purpose: to order a burger and to live the experience of what it would really be using the application. They order the burger on the application and go get in the cafeteria. Once the participants performed the test were again asked to perform the think aloud protocol.</p>
</div>
<div class="col-md-7" style="margin: 10px 0 10px">
<div class="embed-container"><iframe src="https://player.vimeo.com/video/141989965?color=ef473a&title=0&byline=0&portrait=0" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /.content-section-a -->
<a name="contact"></a>
<div class="banner" style="text-align:center;" id="definition-product">
<div class="container" style="display: inline; vertical-align: middle;">
<div class="row" id="rowbanner" style="text-align:center;margin-right:0px; margin-left:0px;" >
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-2" id="largerItem" class="colbanner" style="display:table-cell; vertical-align:middle; text-align:-webkit-center;">
<div style="height:97.5px; display: table-cell; vertical-align: middle;">
<h2 id="nextPhases">Visual Design</h2>
<!--<p>To become familiar with the context and find out the current service problems,
the users hierarchy and their expectations and needs, different research techniques are carried out.</p>-->
</div>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-2" class="colbanner" >
<a href="visualization.html" class="btn btn-circle page-scroll" id="buttonLeft">
<i class="fa fa-angle-double-left animated"></i>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-3" class="colbanner" style="display:table-cell; vertical-align:middle; padding:0px; text-align:-webkit-center;">
<div style="height:97.5px; display: table-cell; vertical-align: middle;">
<h2 id="nextPhases" style="color: rgb(239,71,58);">Interaction</h2>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.banner -->
<!-- Footer -->
<footer>
<div class="container text-center">
<p id="footerText">© 2015 SkipQueues</p>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/grayscale.js"></script>
</body>
</html>