Creating our train icon

We need an icon for our app. The icon should show which section of the train is nearest the user's exit. The icon should also show how crowded the different parts of the train are.

So we need a symbolic representation of a train, an exit mark for that train, and a way to mark crowding in that train.

This symbolic representation should ideally show all the wagons and all the doors.

• So that it becomes clear for users exactly where to go for available seating.
• So that it's possible to indicate "short train" by removing a wagon from the icon.

This is a Stockholm metro train:

Below is a drawing of the rough proportions of the full metro train, with the standard set of 3 wagons and each wagon with 3 sections. 21 door pairs in total on one side:

"I'm barely 2-dimensional! Choo-choo!"

If the above drawing would be shrunk down to fit in the app, it would look like a horizontal line. We have to change the proportions of the wagons to make the full icon recognizable as a metro train. 

When squashing the train horizontally it won't be possible to keep the details of all the doors and windows as was initially desired. Instead of 2-3 door pairs and 5-6 windows per section we'll reduce it down to 1 door pair per section and 1 window on the side of each entrance:

That’s not too far off what the real wagons look like. In the app we have about 320 pixels to fit the three wagons in:

That's still too long and thin.

The existing icons in the app (below) are 25 pixels high:

  

So the proportions of the train needs to be about 12:1, making each wagon about 4:1:

And let's simplify it further to the style used by the existing icons:

There we have it, now to join them together and mark where the ideal exit is:

And we colour the exit arrow to the colour of the station's exit as a way to give additional information (accelerator) to expert users:

And add a heatmap gradient of how crowded the train is:

That heatmap is very visible, but it overpowers the visual symbol of the train. Let’s try to tone the heatmap down, keeping it strongest at the floor of the train where the people are actually standing and sitting:

The colour palette of the heat map and the shape of the exit arrow was further adjusted to better fit when placed in the app, as can be seen in the prototype.

Summary of Think-Alouds

Everyone used a similar usability test on the prototype in form of answering:

Find the way from T-Centralen to Södermalmstorg using the prototype.

Some main comments from the think- alouds were:

-          App is clear. But there might me some frustrating excessive confirmation.

-          The crowding information should be on the platforms as well.

-          The red and green text should only be green at the word “red” and “green”.

Some of the most emotional reactions from the users of the prototype was that it was working or dong things for you that the “real” app does not. Maybe the prototype was too simple in to get focus on the main features.

The tests was done in a fast mention and without any longer breaks which might indicate that the app doesn't require the highest level of counciouss decisionmaking that interferes with spoken language that Gulan mentioned on his lectures.

The users understood quickly that the trains indicated crowding information but not in which way. The question mark, showing further information of the train icon, was in some case spotted and used but in others not used.  In the case where it was used the reaction was that it was understandable.

For our final design we should probably change the information in the app based on the feed- back and also change the symbols used for lines and exits (discussed in the “övning 5”).

Think aloud

The task during the think aloud was to, using the prototype, find the fastest way to travel between T-Centralen and Södermalmstorg using SL transportation, and where in the train one should be located. The test subject was Per, a 18 year old high school student.

Transcript (translated from Swedish) Ok, so I guess I click the SL app. And type the place I want to go in this field? [the user enters the locations in the prototype] Hmm ah, this route seems good. [the user selected the first route]
So, red line to Norsborg. Ohh, what does this train show? [the user clicks around a bit on the train, hitting the explanation button] Ah so it shows how crowded the train is. But why is the arrow not on the green part? [user looks a bit confused at phone, until he read the remaining explanation text] ok... that's good I guess, but what is the pink exit? [I show the user the image of leaving the train] pink arrows! So they take me to the best exit, if I follow them, I guess closest to where I want to be? Cool!

Q: why did you select the first route so quickly? Isn't that usually the first one arrive? At least in the app I used

Q: So you missed the explanation of the arrow first, how come? Well I was looking for what the train colors was, and their explanation was in bold color, so I think it just got my attention first

Reflection: The user quickly found his way around in the app, which was very good. It took a bit of time to get the explanations for all of the information on the route screen, however this should only be a problem the first time. The user found the experience very familiar to other applications, which enabled him to reuse trained behaviors from those context, like immediately choosing the first route because it is the fastest.

Think Aloud (Ludvig Janiuk)

Subject: 18-year old male, tech savvy but does not use sl app.

Task: Find the way from T-Centralen to Södermalmstorg using the SL-app in this prototype. Then imagine you are actually going that path and describe how you use the information you got.

Think-aloud: Ok so I want to use the sl app, I open it, I want to type the station [taps text field] oh, it appeared, ok, hm.. [small silence] So am I supposed to choose a route, or press "sök" first? Well here is a route that matches the stations so I'll just use it. [taps the first route] Oh, so now I have routes to choose from, Ok I'll pick the first [taps first route] ok this looks like it.

Me: Now imagine you are at TC and you just looked that up. How do you proceed to find your way to Södermalmstorg?

Think-aloud: Yes so I'm supposed to take the red line to Norsborg.. what's that train thing? [small silence] Does the color represent... places, right? How crowded it is? Can I press that question button? [presses it, then reads text that appears] Oh, so the color is for the exit later? Ok cool [presses cross to fold it] Now, I find the right train on TC and I use the door with the arrow because I can stand becuase it's just 3 minutes. Then I exit the train at Slussen and I'm going to look for a pink exit? [I show picture of exitting thru door] Oh ok, so I follow the pink arrows to the exit. Smart, so the phone knows about them. Then I just need to follow the arrows, right?

Me: Yes, that's it.

Analysis: I'm overall pleased, the subject had no problem grasping the train icon thing, but he was ofteh slow in how he proceeded. This maybe because he's not used to the sl app, and maybe becuase there's often a lot of information in the screen.

Individual think aloud

Assignment and user

Find an itineries from T-Centralen to Södermalmstorg and try figure out which part of the train that is most fittingly to travel in and also how to find the exit closest by Södermalmtorg.
User was Hanna 24 years old studying social science and travels daily between Slussen and T-Centralen where she transfers to another train. She uses iPhone and have never owned a smartphone running Android (which is the OS in the prototype).

Translated notes

- I'll start by opening the SL-app i assume (Taps the icon)
- Then I'll first write the origin of my travel (Taps the "my position" field)
- Okay this was weird the text both T-Centralen and Södermalmstorg appeared in the text fields. I guess this has something to do with this kind of prototype..? Anyhow I'll continue

- I have some options of suggested itineries, I want this one (Taps the travel)
- Here is some new stuff. Hmm. Green usually indicates where one wants to be at, therefore I'll be placing myself in the green part of the train. (Points on the train displaying crowding information)

- No wait there's a small pink arrow here. That color is the same as the text instructiong me on which exit to take, that's where I'm suppose to stand right?! But is that in the front or in the back of the train? Hmm. I'll clock this questionmark and see if it provides any info. (Clicks (?)-symbol)

- Aha so this tells me how croeded the train is. I get it, obviously here I'll have to choose between having a seat or be close to my exit. 

Reflection

I'm happy with the result of the think aloud the behaviour of the user was corresponding very well to how we'd expected. The familiarities with the already existing SL application makes navigating a breeze if you are already familiar with that it seems. The tester never went silent during the assignment either which indicates that the app doesn't require the highest level of counciouss decisionmaking that interfears with spoken language that Gulan mentioned on his lectures.

Think- Aloud - Niklas Lindqvist

The assignment given was to find, with help from the prototype, the fastest way from T-centralen to Södermalmstorg in Stockholm. The user was Anna, a 20 year old student at KTH.

Part 1 - The App

Translated notes:

- Okay, ah, I think i should use this app. I recognize it since i have a similar one on my phone.

(clicks the icon)

-wow! it works. Ill try to write the start point here.

 (clicks upper bar)

-Oh, alright it did it for me. Nice.

(pushes the search button)

-Oh, Okay. I guess I'm done now.

- Oh nice, there is some crowding information I guess (points at the train in the application), and also witch exit i should use.

Questions:

Q1: What is new in this prototype compared to yours?

- It shows crowding information and exit.

Me: If you press the "?" what happens.

-Oh, okay, it shows me information about the picture of the train, I understand.

Q2: What do you think about the changes?

I like them, i would like to have this in my existing app.

Part 2 - The images

Q3: what do you see in these images?

- I can see the same arrows as the once used in the app. probably pointing towards the exit.. And also that the dots represents the exits at the information sign.

- Oh, i see that the color also show on the map, that is cool. Does this map exist at the stations?

Me/Q4: no, its made in Photoshop. Do you think there are any improvements to be done?

- I would like to see the crowding information on the platform as well, since i do not check my phone every time i travel. Also the red text might be reduced to only the word red. Its a bit to much color i think.  

Individual think-aloud

Female, 20's, technology-savy, on-and-off metro commuter:

So I'm at T-Centralen and I'm going to Södermalmstorg...

I'm not absolutely certain where Södermalmstorg is, so I open the SL-app, it knows where I am and I input "Sodermalmstorg". I only have to input "sö" and tap the correct suggestion, easily done.

Given that it uses locations known to the app, I feel that I should not have to confirm the route again, but that's fine.

I get suggestions of arrangements for my route, and I pick the first one without thinking about it further. Perhaps I'm slightly frustrated by the previous seemingly excessive confirmation.

I see that I'm supposed to take the red line, so I look up from the app and make sure that I'm walking in the right direction.

Having spotted a sign with a red arrow directing me to the platform for the train towards Norsborg, i return my gaze to the app.

I see that I want to be toward the left side of the train (as viewed from the platform), to disembark nearest to the pink station exit. I return the phone to my pocket and continue walking toward the platform.

I arrive at the platform and see that the trains toward Norsborg are on my left. This means that I want to sit in the opposite end of the train, so I start walking along the platform.

I look at my phone again to make sure that I'm not mistaken. I never closed the SL-app so it's still showing me the same route arrangement. I see that it had indeed indicated the left side of the train. Pink exit — that bit I remembered more clearly.

I notice that the coming train is crowded near my exit, which makes me less motivated to keep walking toward it. I'm at mid-platform and there should be some seats there on the train, so I stop and wait the remaining minute before the train arrives. Sitting, if only for about 5 minutes, will be nice.

I close the app to read some mails, making a last mental note: Pink.