Skip to content

Commit 9646ae7

Browse files
author
duff-a11y
committed
Added a forth blog post with correct styling
1 parent 6dcccd7 commit 9646ae7

34 files changed

+255
-23
lines changed

‎_data/settings.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ blurbs:
5757
page were you’ll find more information.</p>
5858
<p>If you just have ideas, comments, questions, feedback or other contributions
5959
on the prototype please share these with us. They don’t have to be technical they can be of any kind. Email us at
60-
typing@axesslab.com and mark the email with typing in the dark.</p>
60+
<a href="mailto:typing@axesslab.com">typing@axesslab.com</a> and mark the email with typing in the dark.</p>
6161
<p>Thank you <3 /The typing in the dark team</p>'
6262
}
6363

‎_includes/header.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<nav class="navbar navbar-expand-lg navbar-dark">
33
<a class="navbar-brand font-tertiary h3 nav-logo" href="{{ '/' | relative_url }}">
44
{% if site.data.settings.logo %}
5-
<img src="{{ '/assets/images/' | relative_url }}{{ site.data.settings.logo }}" alt="{{ site.data.settings.title }}">
5+
<img src="{{ '/assets/images/' | relative_url }}{{ site.data.settings.logo }}" alt="{{ site.data.settings.title }}" class="nav-image">
66
{% endif %}
77
</a>
88
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"

‎_layouts/post.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -33,18 +33,18 @@ <h1 class="text-white font-tertiary">{{ page.title }}</h1>
3333
<div class="col-12 text-center">
3434
<h2 class="section-title">Similar Stories</h2>
3535
</div>
36+
<div class="card-deck">
3637
{% for post in site.posts offset:0 limit:3 %}
37-
<div class="col-lg-4 col-sm-6 mb-4 mb-lg-0">
38-
<article class="card shadow">
38+
<div class="card shadow">
3939
<img class="rounded card-img-top" src="{{ "/assets/images/blog/" | relative_url }}{{ post.image }}" alt="{{ post.title }}">
4040
<div class="card-body">
4141
<p class="card-title"><a class="text-dark" href="{{ post.url | relative_url }}">{{ post.title }}</a>
4242
</p>
4343
<a href="{{ post.url | relative_url }}" class="btn btn-xs btn-primary">Read More</a>
4444
</div>
45-
</article>
45+
</div>
46+
{% endfor %}
4647
</div>
47-
{% endfor %}
4848
</div>
4949
</div>
5050
</section>

‎_posts/2019-10-24-concept-ideas-wireframes-user-testing.md

+214
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
---
2+
layout: post
3+
title: Concept ideas, wireframes & user testing
4+
date: 2019-10-24 09:30:22 +0200
5+
image: blog4/image23.png
6+
author: Sofie Hansson
7+
---
8+
9+
It was time to go from problem [read the previous blog post][previous_post] to solution and therefore we created wireframes of the concept. We chose one question that we felt we haven’t got the answer yet, which is:
10+
11+
> How can we create an inspiring product that motivates the user to learn the keyboard while having fun?
12+
13+
## Design studio workshop
14+
We gathered the whole project team to have a design studio workshop, everyone joined and we were 8 people in total with different roles and perspectives on the project. Two people in the project group also has a visual impairment and therefore expert knowledge about typing tutors.
15+
16+
<div class="row">
17+
<div class="col-md-6 col-xs-12">
18+
<img src="{{site.baseurl}}/assets/images/blog/blog4/image1.jpg" alt="The project team sitting by their desk." class="img-fluid rounded w-100">
19+
</div>
20+
<div class="col-md-6 col-xs-12">
21+
<img src="{{site.baseurl}}/assets/images/blog/blog4/image2.jpg" alt="Hampus, Karin and Erik talking and sketching." class="img-fluid rounded w-100">
22+
</div>
23+
</div>
24+
25+
We did three different exercises in pairs and built on each other's ideas for typing in the dark. At the end we chose the idea that most people felt that we wanted to move forward with.
26+
27+
<div class="row">
28+
<div class="col-md-6 col-xs-12">
29+
<img src="{{site.baseurl}}/assets/images/blog/blog4/image3.jpg" alt="Emilia skyping with Daniel" class="img-fluid rounded w-100">
30+
</div>
31+
<div class="col-md-6 col-xs-12">
32+
<img src="{{site.baseurl}}/assets/images/blog/blog4/image4.jpg" alt="Joakim skyping with Claudio." class="img-fluid rounded w-100">
33+
</div>
34+
</div>
35+
36+
It was a ninja game that had a storytelling and a level based game. First you chose a ninja you train the character at the gym like Pokemon go. After that you go into a dark cave and there you get a challenge if you do the challenge well you can get different grades of karate belts from red to black. So this is a hypothesis we wanted to move forward with the gamification in combination with a logical way to learn.
37+
38+
<div class="row">
39+
<div class="col-md-6 col-xs-12">
40+
<img src="{{site.baseurl}}/assets/images/blog/blog4/image5.jpg" alt="Whiteboard with paper sketched" class="img-fluid rounded w-100">
41+
</div>
42+
<div class="col-md-6 col-xs-12">
43+
<img src="{{site.baseurl}}/assets/images/blog/blog4/image6.jpg" alt="Paper sketches of ninja game." class="img-fluid rounded w-100">
44+
</div>
45+
</div>
46+
47+
## Concept
48+
The concept is built on the research about how to learn the keyboard in a pedagogical way, based on the market analysis and interviews with people how has taught kids to type on a keyboard.
49+
50+
### Step by step learning
51+
<ol>
52+
<li>
53+
<div>
54+
<strong>Interaction with the keyboard.</strong>
55+
<p>
56+
Just beginning to interact with the keyboard without right or wrongs or just pressing buttons is a really important step to motivate the user to begin to learn. Otherwise this can be a bit of a resistance, so this step is important for beginners to find it fun and intriguing to continue.
57+
</p>
58+
</div>
59+
</li>
60+
<li>
61+
<div>
62+
<strong>Placement of the fingers row 0.</strong>
63+
<p>
64+
This is the first step to learn the keyboard starting with F and J because the are marked on the keyboard. This is a starting point to navigate the keyboard without having to look at it. Then you continue with that row also called row 0.
65+
</p>
66+
</div>
67+
</li>
68+
<li>
69+
<div>
70+
<strong>Placement of the fingers row +1 and -1.</strong>
71+
<p>
72+
These are the rows above and under row 0. If you can navigate from row 0 to +1 and -1, know which finger to use on what letter you can be faster and more accurate while typing on a keyboard. This also means you don’t have to look at the keyboard. So placement of the fingers are the most important step.
73+
</p>
74+
</div>
75+
</li>
76+
<li>
77+
<div>
78+
<strong>Words and sentences.</strong>
79+
<p>
80+
The users wants to quickly start typing easy words to make the task more fun. It’s more motivating to type words instead of just pressing buttons. This could go over to more advanced words and sentences when you are more of an expert.
81+
</p>
82+
</div>
83+
</li>
84+
<li>
85+
<div>
86+
<strong>Speed.</strong>
87+
<p>
88+
Users are motivated by being able to type faster and more correct as the progress in their learning. This is why the next step is to measure the speed and being better at that.
89+
</p>
90+
</div>
91+
</li>
92+
</ol>
93+
94+
With these steps to learn in mind we found inspiration from a tool that is used to learn eye tracking. From Look to learn that use 5 areas of learning eye tracking, created by Tobii Dynavox, read more [Look to Learn][look-to-learn].
95+
96+
So this is the ground that we wanted to build a gaming experience on, with a ninja theme. Taking inspiration from common and populaire games like the candy crush saga where you level up in visualisation of a path. When everyone is starting on the easiest level continuing to more advanced levels.
97+
98+
## Wireframes
99+
We started by drawing simple sketches on paper, where we began with the core interaction. This is where user gets to know which letter or word the are supposed to write, in our prototype we started with f and j. Then we made prototypes in [Adobe XD][adobe-xd].
100+
101+
![Design of challenge 1, print screen.][image7]{:class="img-fluid w-100 rounded float-left mr-5 mb-4"}
102+
103+
The challenges are that there are sound feedback that needs to happen in this interaction. First there needs to be a text to speech that reads the letter the user is supposed to write. Then a sound if it was right or wrong and third the letter that the user actually wrote. At the same time we need to think about if the user has a screen reader on and if the text to speech and screen reader will be colliding saying the same things creating an echo that is not pleasten for the user. We will write a blog post about sound interaction only for this project, as it is very complex.
104+
105+
![Design of challenge 1 F and J, print screen.][image8]{:class="img-fluid w-100 rounded float-left mr-5 mb-4"}
106+
107+
We also need to have visualisation on the screen for those of us who can see and are using a zoom tool. So in a simple interaction pressing one letter on the keyboard a lot of things needs to be considered.
108+
109+
![Design of challenge 1 F and J, print screen.][image9]{:class="img-fluid w-100 rounded float-left mr-5 mb-4"}
110+
111+
This was the first challenge for the developers to make and finding and adding sound resources to the prototype, both text to speech but also sound effects.
112+
113+
Then we wanted to add the first step with integrating with the keyboard without being right or wrong, so we added the Ninja theme. First of with an introduction to the game. After that choose your character by using arrow up and down and pressing enter. Which are important keys to learn because people using a screen reader often use these buttons to navigate.
114+
115+
Pressing enter to start the games and different missions are also important because if you have a visual impairment, you won’t you the mouse only the keyboard.
116+
117+
<div class="row">
118+
<div class="col-md-6 col-xs-12">
119+
<img src="{{site.baseurl}}/assets/images/blog/blog4/image10.png" alt="Design of introduction, print screen." class="img-fluid rounded w-100">
120+
</div>
121+
<div class="col-md-6 col-xs-12">
122+
<img src="{{site.baseurl}}/assets/images/blog/blog4/image11.png" alt="Design of choosing character, print screen." class="img-fluid rounded w-100">
123+
</div>
124+
</div>
125+
126+
<div class="row">
127+
<div class="col-md-6 col-xs-12">
128+
<img src="{{site.baseurl}}/assets/images/blog/blog4/image12.png" alt="Design of training character, print screen." class="img-fluid rounded w-100">
129+
</div>
130+
<div class="col-md-6 col-xs-12">
131+
<img src="{{site.baseurl}}/assets/images/blog/blog4/image13.png" alt="Design of challenge 1 done, print screen." class="img-fluid rounded w-100">
132+
</div>
133+
</div>
134+
135+
## Iteration
136+
To be able to test the prototype in a realistic way with users it needs to be developed because the prototyping tools doesn't give sound feedback, only visual. So the next step was to add more details to the prototype with ninja theme and sounds, to be able to test it with users.
137+
138+
### Interaction with the keyboard
139+
We added more content to the prototype and a path to the different levels.
140+
141+
<div class="row">
142+
<div class="col-md-6 col-xs-12">
143+
<img src="{{site.baseurl}}/assets/images/blog/blog4/image14.png" alt="Design of introduction, print screen." class="img-fluid rounded w-100">
144+
</div>
145+
<div class="col-md-6 col-xs-12">
146+
<img src="{{site.baseurl}}/assets/images/blog/blog4/image15.png" alt="Design different challenges, print screen." class="img-fluid rounded w-100">
147+
</div>
148+
</div>
149+
150+
We added characters with short descriptions of how they look as image description, so the user could choose the one they like.
151+
152+
<div class="row">
153+
<div class="col-md-6 col-xs-12">
154+
<img src="{{site.baseurl}}/assets/images/blog/blog4/image16.png" alt="Design of choosing character, print screen." class="img-fluid rounded w-100">
155+
</div>
156+
<div class="col-md-6 col-xs-12">
157+
<img src="{{site.baseurl}}/assets/images/blog/blog4/image17.png" alt="Design of choosing character, print screen." class="img-fluid rounded w-100">
158+
</div>
159+
</div>
160+
161+
We added a step to train you ninja, so when the user is pressing different buttons they just make different sounds like boxning or sword sound effects. This is important as a first step of just interacting with the keyboard and having fun. After this training of the ninja character, they get a yellow belt in karate as a reward to keep the user motivated to get more belts.
162+
163+
<div class="row">
164+
<div class="col-md-6 col-xs-12">
165+
<img src="{{site.baseurl}}/assets/images/blog/blog4/image18.png" alt="Design of training character, print screen." class="img-fluid rounded w-100">
166+
</div>
167+
<div class="col-md-6 col-xs-12">
168+
<img src="{{site.baseurl}}/assets/images/blog/blog4/image19.png" alt="Design of character ready, print screen." class="img-fluid rounded w-100">
169+
</div>
170+
</div>
171+
172+
### Placement of fingers row 0.
173+
The step after that they go in to the core interaction as challenge 1 with finding and using F and J. So that we follow the concept of learning we have set up. We also got feedback from a user with a visual impairment using a zoom tool the have the input field and the letter you’re supposed to write at the same place, so we changed that visualization.
174+
175+
<div class="row">
176+
<div class="col-md-6 col-xs-12">
177+
<img src="{{site.baseurl}}/assets/images/blog/blog4/image20.png" alt="Design of introduction challenge 1, print screen" class="img-fluid rounded w-100">
178+
</div>
179+
<div class="col-md-6 col-xs-12">
180+
<img src="{{site.baseurl}}/assets/images/blog/blog4/image21.png" alt="Design of challenge 1, print screen." class="img-fluid rounded w-100">
181+
</div>
182+
</div>
183+
184+
In this project we want to focus on the first steps of interacting with the keyboard because our primary target group are beginners. So step 3, 4 and 5 haven’t in this phase been explored yet.
185+
186+
## User testing
187+
Now that we had a concept and some developed parts of the prototype that both had keyboard interactions, sound feedback and content we wanted to try it with a user of our target group. So we met with a 10 year old boy in 4th grade who just started to learn how to type on a keyboard.
188+
Here’s an image of his laptop he uses in school with some stickers on some of the buttons like f, j shift for example and a braille display he can read and write with.
189+
190+
![Laptop, braille display and a white cane on a table.][image22]{:class="img-fluid w-100 rounded float-left mr-5 mb-4"}
191+
192+
193+
In the user test we tried the concept, interactions and sound feedback from start, choosing ninja, training ninja and the first challenge with F and J.
194+
195+
### Summary of the user test
196+
The things that work well are the ninja theme, the user like the theme and thinks it’s fun and different from other typing tutor games. He understands the concept of training the ninja and sound feedback is enough. He feels motivated to want to get better and wants the black belt in karate as something he wants to accomplish. So the overall concept of gaming, missions, reward and ninja theme works well with this user.
197+
198+
Some things that can be improved is the timing of the sound, text to speech and some navigation. It is sometimes hard to know when then exercise starts and ends. The user realise when he press the wrong button at the f and j interaction and quickly press the right button so for this user he wouldn’t need a wrong indication feedback on this first level.
199+
200+
We asked if he had an idea of what would be a fun challenges after this level and he said that it would be nice to write words, maybe talking to another ninja. Also the whole alphabet is a fun mission to do and learn. So mostly something with letters or words in a fun context.
201+
202+
![Hands on a keyboard.][image23]{:class="img-fluid w-100 rounded float-left mr-5 mb-4"}
203+
204+
205+
[adobe-xd]: https://www.adobe.com/products/xd.html
206+
[look-to-learn]: https://www.tobiidynavox.com/software/partner-software/look-to-learn/
207+
[previous_post]: {{site.baseurl}}/2019/10/17/defining-the-challenges-and-setting-goals-that-creates-value-for-the-user/
208+
[image7]: {{site.baseurl}}/assets/images/blog/blog4/image7.png
209+
[image8]: {{site.baseurl}}/assets/images/blog/blog4/image8.png
210+
[image9]: {{site.baseurl}}/assets/images/blog/blog4/image9.png
211+
[image22]: {{site.baseurl}}/assets/images/blog/blog4/image22.jpg
212+
[image23]: {{site.baseurl}}/assets/images/blog/blog4/image23.png
213+
214+

‎_sass/_buttons.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -41,16 +41,16 @@
4141
color: $white;
4242

4343
&:active {
44-
background: lighten($color: $primary-color, $amount: 10) !important;
44+
background: lighten($color: $primary-color, $amount: 9) !important;
4545
}
4646

4747
&:hover {
48-
background: lighten($color: $primary-color, $amount: 10);
48+
background: lighten($color: $primary-color, $amount: 9);
4949
}
5050

5151
&.focus,
5252
&.active {
53-
background: lighten($color: $primary-color, $amount: 10) !important;
53+
background: lighten($color: $primary-color, $amount: 9) !important;
5454
box-shadow: none !important;
5555
}
5656
}
@@ -60,16 +60,16 @@
6060
color: $white;
6161

6262
&:active {
63-
background: lighten($color: $secondary-color, $amount: 10) !important;
63+
background: lighten($color: $secondary-color, $amount: 9) !important;
6464
}
6565

6666
&:hover {
67-
background: lighten($color: $secondary-color, $amount: 10);
67+
background: lighten($color: $secondary-color, $amount: 9);
6868
}
6969

7070
&.focus,
7171
&.active {
72-
background: lighten($color: $secondary-color, $amount: 10) !important;
72+
background: lighten($color: $secondary-color, $amount: 9) !important;
7373
box-shadow: none !important;
7474
}
7575
}

‎_sass/_common.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ body {
2323
justify-content: center;
2424
}
2525

26-
ol,
27-
ul {
26+
27+
ol, ul {
2828
list-style-type: none;
2929
margin: 0px;
3030
}

‎_sass/_typography.scss

+1-3
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,7 @@ h1,h2,h3,h4,h5,h6 {
3434
}
3535

3636
.display-lg {
37-
@include desktop {
38-
font-size: 4em;
39-
}
37+
font-size: 5em;
4038
}
4139

4240
h1, .h1{

‎_sass/_variables.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ $body-color: #fff;
88
$border-color: #c7c7c7;
99
$black: #000;
1010
$white: #fff;
11-
$gray: #eaeaea;
11+
$gray: #f2f2f2;
1212
$link-color: #2a7ab0;
1313

1414

‎_sass/templates/_blog.scss

+14-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ blockquote > p {
1616
display: inline-block;
1717
padding: 10px 20px;
1818
background: $gray;
19-
border-left: 2px solid $primary-color;
19+
border-left: 3px solid $secondary-color;
2020
font-style: italic;
2121
font-size: 22px;
2222
line-height: inherit;
@@ -49,6 +49,19 @@ blockquote > p {
4949
}
5050
}
5151
}
52+
ol {
53+
li {
54+
list-style-type: decimal;
55+
&::before {
56+
color: $primary-color;
57+
font-weight: bold;
58+
font-size: 1.25em;
59+
display: inline-block;
60+
width: 1em;
61+
margin-left: -1em;
62+
}
63+
}
64+
}
5265
}
5366

5467
.card-title {

‎_sass/templates/_navigation.scss

+11-4
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,25 @@
11
.navigation{
2-
padding: 40px 130px;
2+
padding: 0px 130px;
33
transition: .3s ease;
44
&.nav-bg {
55
background-color: $bg-color-2;
6-
padding: 15px 100px;
6+
padding: 0px 130px;
77
@include desktop {
8-
padding: 15px 20px;
8+
padding: 10px;
99
}
1010
}
1111
@include desktop {
12-
padding: 20px;
12+
padding: 10px;
1313
background: $bg-color-2;
1414
}
1515

16+
& .nav-image {
17+
height: 70px;
18+
@include desktop {
19+
height: 50px;
20+
}
21+
}
22+
1623
& .nav-logo:focus {
1724
border: 2px solid $white;
1825
}

‎assets/images/blog/blog4/image1.jpg

1.21 MB
Loading

‎assets/images/blog/blog4/image10.png

238 KB
Loading

‎assets/images/blog/blog4/image11.png

200 KB
Loading

‎assets/images/blog/blog4/image12.png

206 KB
Loading

‎assets/images/blog/blog4/image13.png

194 KB
Loading

‎assets/images/blog/blog4/image14.png

234 KB
Loading

‎assets/images/blog/blog4/image15.png

227 KB
Loading

‎assets/images/blog/blog4/image16.png

181 KB
Loading

‎assets/images/blog/blog4/image17.png

222 KB
Loading

‎assets/images/blog/blog4/image18.png

163 KB
Loading

‎assets/images/blog/blog4/image19.png

170 KB
Loading

‎assets/images/blog/blog4/image2.JPG

1.76 MB
Loading

‎assets/images/blog/blog4/image20.png

248 KB
Loading

‎assets/images/blog/blog4/image21.png

137 KB
Loading

‎assets/images/blog/blog4/image22.jpg

669 KB
Loading

‎assets/images/blog/blog4/image23.png

4.41 MB
Loading

‎assets/images/blog/blog4/image3.JPG

1.87 MB
Loading

‎assets/images/blog/blog4/image4.JPG

2.07 MB
Loading

‎assets/images/blog/blog4/image5.JPG

1.51 MB
Loading

‎assets/images/blog/blog4/image6.JPG

1.65 MB
Loading

‎assets/images/blog/blog4/image7.png

265 KB
Loading

‎assets/images/blog/blog4/image8.png

254 KB
Loading

‎assets/images/blog/blog4/image9.png

120 KB
Loading

‎assets/images/logo.png

6.71 KB
Loading

0 commit comments

Comments
 (0)