-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhci1.html
More file actions
153 lines (141 loc) · 8.31 KB
/
hci1.html
File metadata and controls
153 lines (141 loc) · 8.31 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
<!DOCTYPE HTML>
<!--
Phantom by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>HCI Assignment 1</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<div class="inner">
<!-- Logo -->
<a href="index.html" class="logo">
<span class="symbol"><img src="images/logo.svg" alt="" /></span><span class="title">Kaiyu Shi</span>
</a>
<!-- Nav -->
<nav>
<ul>
<li><a href="#menu">Menu</a></li>
</ul>
</nav>
</div>
</header>
<!-- Menu -->
<nav id="menu">
<h2>Menu</h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="misc.html">Miscellaneous</a></li>
<li><a href="photography.html">Photography</a></li>
</ul>
</nav>
<!-- Main -->
<div id="main">
<div class="inner">
<h1>Spotify Redesign</h1>
<span class="image main"><img src="images/hci1/topbanner.png" alt="" /></span>
<h2><b>Introduction</b></h2>
<p>I redesigned the Spotify webapp interface through a process of contexual inquiry, building a sequential model, developing a low fidelity prototype, and evaluating the prototype with a participant.</p>
<p>Spotify is a popular music streaming app used by millions of people. While the functionality of their various interfaces are fairly straight-forward in terms of ease of use, there are some features that can be obtuse if the user does not have prior experience with it or have not used the interface in a long time. By using Contextual Inquiry and analysing how others use the interface via a task-driven approach, I can discover the "pain points" in the design of the existing interface and come up with ways to potentially improve it.</p>
<h2><b>Contextual Inquiry</b></h2>
<p><span class="image left"><img src="images/hci1/sara.png" alt="" style="width:200px;height:200px;" /></span>
<h4>Participant</h4>
Name: Sara Lee <br>
Age: 24 <br>
Education Level: Masters Degree <br>
Occupational Field: Education <br><br><br>
</p>
<p>Sara is representative of the age group that forms a large portion of Spotify’s user base. Because she is not involved with HCI, and not involved in the UX industry, she is a good candidate for this CI.</p>
<h4>Tasks</h4>
<p>The tasks I have chosen for the Contextual Inquiry are typical tasks that one might perform on Spotify, with slightly more complexity than simple playback of content.</p>
<ol>
<li>Find a new song and add to a playlist.</li>
<li>Add songs to queue and view the queue.</li>
<li>Share a song to social media.</li>
</ol>
<h4>Video</h4>
<br><br>
<video controls width="800">
<source src="/videos/hci1/cismall.mp4" type="video/mp4">
</video>
<h2><b>Sequential Models</b></h2>
<p>Using the CI video, I analyzed the participant’s activity while doing the tasks, and laid it out as sequential models.</p>
<img src="images/hci1/page1.png" alt="" style="float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;" />
<img src="images/hci1/page2.png" alt="" style="float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;" />
<img src="images/hci1/page3.png" alt="" style="float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;" />
<p style="clear: both;"></p>
<h2><b>Lo-Fi Prototype</b></h2>
<p>Using ideas I generated by examing the key pain points from the CI, I sketched out a Lo-Fi prototype:</p>
<span class="image main"><img src="images/hci1/page4.png" alt=""style="width: 70%;"/></span>
<p>The general idea is to make relevant features more grouped together and visible, so that the user can access them more directly. For example, the queue is now displayed on the main screen, and adding new songs to the queue can be done directly in the queue via a simple search interface. Instead of clicking the search button to access the search screen, the user can search directly from the text box at the top of the interface at all times. Sharing can be accessed by clicking the share button at the bottom corner of the interface, which reminds users of the functionality. By default it shares the currently playing song, but the user can also drag in other songs.</p>
<p>I then took the sketch and made it interactive using PowerPoint. It was easy to add visual elements from the Spotify webapp to help the prototype look more authentic, despite being a lo-fi model. </p>
<iframe src="https://livejohnshopkins-my.sharepoint.com/personal/kshi10_jh_edu/_layouts/15/Doc.aspx?sourcedoc={a404222d-159a-4639-9cb5-92334e6fa484}&action=embedview&wdAr=1.7777777777777777" width="1186px" height="691px" frameborder="0">This is an embedded <a target="_blank" href="https://office.com">Microsoft Office</a> presentation, powered by <a target="_blank" href="https://office.com/webapps">Office</a>.</iframe>
<p>You can interact with the interface by clicking on "Search", "Share", or "Add Songs to Queue"</p>
<h2><b>Evaluation</b></h2>
<p>I evaluated my prototype with Sara, by asking her to perform the same 3 tasks as before. At the end I asked her to compare her experiences and thoughts on the interface. This prototype was perceived as an improvement by the participant, although she had some initial confusion regarding how to interact with the interface prototype initially when attempting task 2. I believe this was because of her existing experience of doing the same for the CI. </p>
<video controls width="800">
<source src="/videos/hci1/evalsmall.mp4" type="video/mp4">
</video>
</div>
</div>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<section>
<h2>Get in touch</h2>
<form method="post" action="#">
<div class="fields">
<div class="field half">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="field half">
<input type="email" name="email" id="email" placeholder="Email" />
</div>
<div class="field">
<textarea name="message" id="message" placeholder="Message"></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send" class="primary" /></li>
</ul>
</form>
</section>
<section>
<h2>Follow</h2>
<ul class="icons">
<li><a href="#" class="icon brands style2 fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon brands style2 fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon brands style2 fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon brands style2 fa-dribbble"><span class="label">Dribbble</span></a></li>
<li><a href="#" class="icon brands style2 fa-github"><span class="label">GitHub</span></a></li>
<li><a href="#" class="icon brands style2 fa-500px"><span class="label">500px</span></a></li>
<li><a href="#" class="icon solid style2 fa-phone"><span class="label">Phone</span></a></li>
<li><a href="#" class="icon solid style2 fa-envelope"><span class="label">Email</span></a></li>
</ul>
</section>
<ul class="copyright">
<li>© Untitled. All rights reserved</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>