-
Notifications
You must be signed in to change notification settings - Fork 0
/
filter.html
241 lines (212 loc) · 12.9 KB
/
filter.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
<!DOCTYPE html>
<html lang="en">
<head>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title> Minna K-T </title>
<link href="./filter.css" rel="stylesheet" type="text/css">
<link rel="icon"
type="image/png"
href="./images/favicon/favicon.ico" />
</head>
<body>
<div class = "wrapper">
<div class = "confetti"> </div>
<div class = "container">
<div class = "header">
<div class = "name">
<a href="./index.html">MINNA KIMURA-THOLLANDER</a>
</div>
</div>
<div class = "content">
<div class="intro">
<div class="title-box">
<div class = "title-big">MoriDB</div>
<img src="./images/moridb/leaf.png" height="40">
</div>
<div class = "date"> December 2019 | UI/UX</div>
<div class = "summary">
With so much content and information available on modern websites,
live filtering has become a powerful feature to help users immediately
find what they seek. A good filtering system combined with a good UI can
improve user experience not only by allowing users to avoid the frustration of clutter,
but by giving them a way to seamlessly navigate your website.
</div>
<div class = "summary">
As an exploration of filtering systems, I built a database of Animal Crossing characters— those
cute little Nintendo animals— that supports live filtering and sorting.
The goal of this project was to help Animal Crossing fans like me find and save their favorite
characters!
</div>
</div>
<div class = "tom-nook">
<img src="./images/moridb/tom_nook.png" height="250" alt="tom nook throwing sum confetti">
<div class="caption"> Let's get started :] </div>
</div>
<div class = "paragraph">
<div class = "title">Data Collection</div>
<div class = "summary">
Before anything, I had to collect my data.
I used Python's <span class="bold">BeautifulSoup</span> library to web scrape for Animal Crossing villager data,
which included animal type, gender, personality, birthday, and catchphrase.
</div>
<div class = "summary">
I couldn't find all of the information about villagers that I wanted to collect on a single website,
so I actually ended up
having to scrape and synthesize data from 4 different sources. Fortunately, now anyone who
wants to use my application will have the convenience of being able to view villager data
in one place! 😁
</div>
</div>
<div class = "paragraph">
<div class = "title"> Card Prototyping</div>
<div class = "summary">
It was important for me to be able to communicate the information associated with each
villager in a concise, clean way. The information I had to display on the villager cards
included 6 fields— image, name, gender, catchphrase, personality, and birthday.
The question was, how could I best display this information such that it would be easy for a user to parse?
</div>
<div class = "summary">
To answer this question, I created 3 different card designs in Figma, and evaluated them.
You can see the three designs below:
</div>
<img src="./images/moridb/experiments.PNG" width="700">
<br/> <br/>
<div class = "summary">
And here are my notes from when I evaluated each of these designs:
</div>
<div class="analysis-box">
<div class= "summary design1">
DESIGN #1:
</div>
<ul>
<li>
Too much contrast between the bold and standard fonts.
</li>
<li> It over-labels the content. A more defined layout would not
need any labels in the first place.</li>
</ul>
<div class= "summary design1">
DESIGN #2:
</div>
<ul>
<li>
It's fine, but too much of the text is consolidated at the
bottom of the card, making it a little uncomfortable to look at.
</li>
<li>
No need to label that the animal is a deer— it's evident enough from the picture!
</li>
</ul>
<div class= "summary design1">
DESIGN #3:
</div>
<ul>
<li>
The distribution of text is much better, but the personality
label looks out of place. It would look better with the same personality label
as design #2.
</li>
</ul>
</div>
<br/>
<div class="summary">
In the end, I found that I liked the overall design of #2 and the text distribution of #3, so I
combined their best elements to design my final card:
</div>
<img src="./images/moridb/card.PNG" width="200">
</div>
<div class = "paragraph">
<div class = "split-box">
<img src="./images/moridb/filterbox.PNG" height="450px">
<div class = "summary-box">
<div class = "title">Usability Design Principles</div>
<div class = "summary">
Another main focus for this project was the sidebar containing the filtering options.
I wanted to make sure it could streamline user experience, and be intuitive enough
to not require any further explanation.
</div>
<div class = "summary">
For the sidebar, I labeled the categories with underlined, bold green text
and used subtle grey horizontal lines to indicate separate functionality
between Filter, Sort, and Favorites.
</div>
<div class = "summary">
Additionally, I made sure that the sidebar was sticky and would
follow the user as they scrolled. It would probably be very annoying for a
user to have to constantly scroll all the way up to change the
fields that they filtered and sorted on. Ensuring that this functionality
is available wherever the user is on the page makes for a much less
frustrating experience!
</div>
</div>
</div>
</div>
<div class = "paragraph">
<div class = "title">Development</div>
<div class = "summary">
In organizing my cards, I stuck to a grid layout with with ample whitespace, since
there were already a lot of elements (over 100 villager cards!) on the screen.
I chose a grid because the uniformity of it helps users parse information more
quickly.
</div>
<div class = "summary">
Here's what the page looks like when you first open it. The villagers are organized
alphabetically by name by default.
</div>
<img src = "./images/moridb/acdb.PNG" alt="unfiltered" width = "800px">
<div class = "summary">
You can filter by either personality or animal type. You can also
sort them alphabetically, or by their birthdays. (The game actually
celebrates villager birthdays, so this feature is handy!)
Lastly, you also have the option of favoriting villagers by clicking
the little heart in the corner of the card.
</div>
<div class = "summary">
Ok, let's try it out. Here's what you see if you choose to filter on a "Peppy" personality:
</div>
<img src = "./images/moridb/peppy.PNG" alt="filtered by Peppy" width = "800px">
<div class = "summary">
Nice, and what if we wanted to sort by birthday on these Peppy villagers?
</div>
<img src = "./images/moridb/sortbday.PNG" alt="sorting by birthday" width = "800px">
<div class = "summary">
This works too!
</div>
</div>
<div class = "paragraph">
<div class = "title">Conclusion & Future Work</div>
<div class = "summary">
I loved working on this project, since it was a pleasant intersection between my affinity for
cute video games and web apps! There are a couple things I could polish however, before I
consider this a finished work.
</div>
<div class = "summary">
Currently, my application doesn't allow you to filter for multiple things on a single field.
So for example, say you want to filter for both the "Peppy" and "Jock" personalities. This
cannot be done— you can only filter one at a time. If I wanted to implement this I'd
have to change the dropdowns to a different UI element, since dropdowns imply a single choice!
</div>
<div class = "summary">
Additionally, it currently relies on third party image links. This is quite bad especially
if those websites go poof. 💥
To remedy this, I would need to download the image files using a Python script, then host them somewhere (either
on my server or on a database like MongoDB).
</div>
<div class = "summary">
Overall, this was a really fun project to work on, and I'm excited by the ways I can improve it! 😀
</div>
</div>
<div class = "back2top">
<a href="#top">Back to top of page</a>
</div>
</div>
</div>
</div>
</body>
</html>