-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcompainion.html
322 lines (265 loc) · 16.3 KB
/
compainion.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
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
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Grab Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400|Montserrat" rel="stylesheet">
<!-- Custom CSS File -->
<link rel="stylesheet" href="./css/custom.css">
<!-- Page Title -->
<title>Hello, world!</title>
<!-- This is our Meta Description -->
<meta name="description" content="What you write here will often show up in search results under the page title">
</head>
<body>
<!-- This is where our Navbar lives -->
<nav class="navbar fixed-top navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="#"><img src="./img/common/ams.png" width="70" height="30" class="d-inline-block align-top nav-bar-img" alt=""> SKR</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="./index.html">Home</a>
<a class="nav-item nav-link active" href="compainion.html">Compainion Website <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="./portfolio.html">Portfolio</a>
<a class="nav-item nav-link" href="./process-journal.html">Process Journal</a>
<a class="nav-item nav-link active" href="./process-journal.html">Final Portfolio </a>
<a class="nav-item nav-link" href="contact.html">Contact</a>
</div>
</div>
</div>
</nav>
<!-- Navbar End -->
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="row master-heading">
<div class="col-md-12">
<h1>Compainion Website</h1>
</div>
</div>
<div class="row section-heading">
<div class="col-md-12">
<h3>Introduction</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>AMS autonomous mobility scooter is designed primarily for elderly, also the elderly diseases are also considered in designing their applications such as big icons and texts for presbyopia, medication reminders for dementia. Some special features to help users monitoring their health consideration (heartbeat, blood pressure etc.).
</p>
</div>
</div>
<div class="row section-heading" id="User Testing">
<div class="col-md-12">
<h3>1. User testing</h3>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>Based on the feedbacks from paper prototype and wireframe, there are some issues that need to test with users and find elderly personalized way to fix them in the final product. Firstly, text prompts are needed under the icons that can help elderly to get better understanding with the icons. Secondly, the interface should be very clear and as simple as possible. Additionally, users prefer AMS can bring them home with just a single button. Fourthly, the size of font in the interface can be change anytime for users with presbyopia. Finally, an emergency button should be put in an obvious position and included in every page of the screen. These are main functions we are focusing on when we are testing with users.</p>
</div>
<div class="col-md-6">
<br>
<br>
<img src="./img/process-journal/11.JPG" class="img-fluid" alt="Responsive image">
<span class="img-caption">Figure 1.1 - Mengyu using the map in AMS interface</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h5 style="color: #65735F;"> Who did we test with? How and where did we test?
</h5>
<p>Mainly old people, some students with design background and designers. Because elderly are the target
users of AMS, we tested with them first. Our group found that many old people like to go to Sport &
Aquatic Centre, so we went there and tested our product with a couple who are over 50-year-old. There
are three tester who are relatives of us, both are over 60. Design students and designers, we could easily
find in Wilkinson building while they gave many suggestions about the visual style and typesetting.
Invision was used in the test, the user seat in a chair pretends an old person riding AMS.</p>
</div>
</div>
<div class="row section-heading" id="Result & Recommendations">
<div class="col-md-12">
<h3>2. Result & Recommendations</h3>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h5 style="color: #65735F;"> Home
</h5>
<p>Because of the 2D colour used by most of the interface, the gradient colour of the "help" key seems too abrupt, and the user suggests using a slightly lighter colour. Because the icon is too small, the colour of the icon is too bright and there is no primary colour style that makes it difficult for users with presbyopia to use. The button lines of the page turning are very thin, and the user feels that it is not obvious enough. Separating the date and time makes the user feel uncomfortable.
</p>
<p style="color: #608779;">We designed the “help” button with a gradient colour to make it obvious for user, so we changed it with a darker colour, but it is still a gradient colour. The icons changed to bigger vision with soft pastel colours and the date is put next to the time.</p>
</div>
<div class="col-md-6">
<br>
<br>
<br>
<img src="./img/process-journal/help.png" class="img-fluid" alt="Responsive image">
<span class="img-caption">Figure 1 - Help</span>
</div>
</div>
<div class="row">
<div class="col-md-6">
<br>
<br>
<img src="./img/process-journal/h.png" class="img-fluid" alt="Responsive image">
<span class="img-caption">Figure 2 - State of health</span>
</div>
<div class="col-md-6">
<h5 style="color: #65735F;"> Health management
</h5>
<p>There are some problems with typography and color. The big "back" key affects the overall aesthetics, and the three health test functions are crowded together that make the right side of the entire page look messy. After the test, only "very healthy" is displayed on the left side of the screen, and the left layout is very monotonous. Which makes the entire page looking inharmonious (2 participates).
</p>
<p style="color: #608779;">We both agreed this opinion, so we change the layout of the page and added an emoji under “very healthy”.</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h5 style="color: #65735F;"> Map
</h5>
<p>If the map can be enlarged, it can make the user see more clearly, and add the positioning function to let the user know the current location.(1 participate)
</p>
<p style="color: #608779;">Even only 1 participate mentioned it, it is a good point to show where the user is.
</p>
</div>
</div>
<div class="row slide-show">
<div class="col-md-12">
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators2" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators2" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="./img/process-journal/carousel-images1/1.png?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./img/process-journal/carousel-images1/2.png?auto=yes&bg=666&fg=444&t1ext=Second slide" alt="Second slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h5 style="color: #65735F;"> Color
</h5>
<p style="color: #608779;">At first we chose the color we liked, but some colors may not be suitable for the elderly. On a website, people discuss the colors that older people like.
“Older people can be drawn to soft pastels but they may not have the vitality of hue needed to stimulate the mind and mood. Eyesight problems can also impair how the colour is seen and what is seen.
Softer shades of reds and oranges are warming and can help with circulation and energy levels. Peaches, apricots, warm tans, terracottas and pinks can also be used for this purpose. Reflecting on the past and thoughts of a spiritual future can also be reflected in colour choices. Soft blues, lavender mauves and violets are colours that connect to the spiritual or reflective mood.
Studies carried out in nursing/rest homes indicate that soft pinky-beiges contrasted with soft blue/greens are soothing and peaceful. ”
</p>
</div>
</div>
<div class="row section-heading" id="Original Flowchart">
<div class="col-md-12">
<h3>3.Original Flowchart</h3>
</div>
</div>
<div class="row section-heading">
<div class="col-md-12">
<img src="./img/process-journal/y.png" class="img-fluid" alt="Responsive image">
</div>
</div>
<div class="row section-heading" id="Result & Recommendations">
<div class="col-md-12">
<h3>4.Result & Recommendations </h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>For the user to have a better interactive experience, drag mode should be flexible to move anywhere in the map rather than only show the page that they have done the action (That is a technical problem in Invision, we didn’t find the function). More features can be included in the interface to make testers feeling that product is in real, there are some buttons unable to use in the interface.</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<br>
<p>Furthermore, the button of changing font size can be clearer in the header that directly shows “A+” and “A-” rather than click “A”. In the health page, one tutor mentioned that “state of health” and the testing functions have a strange layout causing an ambiguous interface of the screen. </p>
</div>
<div class="col-md-8">
<video width="100%" height="400" src="./video/deco2200video.mov" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen controls type="video/mov"> </video>
</div>
</div>
<div class="row section-heading" id="Final Flowchart">
<div class="col-md-12">
<h3>5. Final Flowchart</h3>
</div>
</div>
<div class="row section-heading">
<div class="col-md-12">
<img src="./img/process-journal/c.png" class="img-fluid" alt="Responsive image">
</div>
</div>
<div class="row section-heading" id="Invision">
<div class="col-md-12">
<h3>6.Invision</h3>
<p>When user's heartbeat is higher than 125, the slowing speed page will automatically comes up. That is a single page in Invision.</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
</div>
<!-- End Content -->
</div>
<!-- This is a little navigation menu. If you want to use it, make sure you hide it in mobile view. Also, it'd be a good idea to positition 'fixed' so it stays with people as they scroll - but choice is up to you! -->
<div class="col-md-2 ml-auto">
<div class="floating-nav" id="floating-navigation">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link float-nav-link active" href="#User Testing">1. User Testing</a>
</li>
<li class="nav-item">
<a class="nav-link float-nav-link" href="#Result & Recommendations">2. Result & Recommendations</a>
</li>
<li class="nav-item">
<a class="nav-link float-nav-link" href="#Original Flowchart">3. Original Flowchart</a>
</li>
<li class="nav-item">
<a class="nav-link float-nav-link" href="#Result & Recommendations">4. Final Result & Recommendations</a>
</li>
<li class="nav-item">
<a class="nav-link float-nav-link" href="#Final Flowchart">5. Final Flowchart</a>
</li> <li class="nav-item">
<a class="nav-link float-nav-link" href="#Invision">6. Invision</a>
</li>
</ul>
</div>
</div>
<div class="col-md-12">
<iframe width="100%" height="700" src="https://invis.io/K3OQZN5HDZY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-6">
<p>© 2018 SKR</p>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>