#think-aloud

[ucre2014-blog]

Simple usability tests where users think out loud are cheap, robust, flexible, and easy to learn. Thinking aloud should be the first tool in your UX toolbox, even though it entails some risks and doesn't solve all problems.

[ucre2014-blog]

[a2group]

Think-aloud observation and analysis

The think-aloud was done on an iPad by a user who is from Sweden and speaks both swedish and english fluently. The user was first briefly told about the museum and the identified problem. She was then given the following instructions:

1. Say what you are going to do.

2. Say what you think will happen.

3. Perform the action.

Events are noted <> and user thoughts "".

<User reads the swedish part of the instructions and ignores the english> "Alright I got it"

"Now I am going to touch somewhere outside the instructionbox"

"I think the instructionbox will disappear and the background picture will be visible"

<User touches the screen outside the instructionbox>

"Cool! Alright I will touch the middle informationbox"

"I think that a white box with the detailed information will appear"

<User touches the box in the middle>

"What!? Nothing is happening"

<User is extremely confused and tries again>

"It does not work"

<To be able to continue the user is told that only the far left one works>

"Oh alright"

<User touches the far left informationbox>

"Cool! Now I am going to touch outside this white box with the information in it to get back to screen I came from"

<User touched outside the box>

"Now I am going to try to zoom by using regular touchscreen movements"

<User pinches in the air>

"I think that the screen will zoom in to the part where I am pinching"

<User pinches>

<Nothing happens>

"It does not work"

<User tries again>

"The zoom does not work"

Short analysis: To begin with the whole screen was not visible on an iPad. Therefore the instructionsbutton in the bottom right corner could not be seen. This made the user forget about the function to hide/show the informationboxes.

The only things that made the user confused was that some informationboxes were not activated and that the zoom function did not work. This is of course not our intention and we had already planned to fix this before the think aloud was conducted.

The pictures that illustrated how to interact made the user quickly understand how to perform the different actions.

Something that bothered the user was that the larger of the informationboxes were too big. The user would also have preferred to see the whole picture without the informationboxes in the beginning, with a button on the side to toggle the informationboxes on and off. Since the instructionbutton in the corner was not visible the user could only read the instructions once and the user never really caught that pressing anywhere (but not on the informationboxes) would toggle the informationboxes. So it is unclear if a specific toggle button would be necessary or not.

//Fredrik Ljung

[a2group]

Think-aloud Observation

In this blog post I will present results from an observation of a user interacting with our prototype, using the think-aloud technique which is explained in chapter 7 in the book Interaction Design - Beyond Human-Computer Interaction, 3rd Edition.

Before the observation started the user was briefly told about: - Historiska Museet - The defined problem - The consequences of the defined problem

The user is a woman that speaks fluently English, but no Swedish. She was instructed to think out loud and that no questions would be answered during the observation. I was sitting next to her.

Setting: Samsung NP740U3E (touch screen) The user’s thoughts are noted ‘’ and events <>

<Figure 1 appears, looks at the screen>

‘I can’t see the picture, the whole picture.’

<silence … >

‘What are these?’ <points at each of the three placeholders but does not touch the screen>

<looks at the screen>

‘Aha, tap to toggle info boxes.’

<looks at the screen>

‘But am I doing it on the boxes or not? On these boxes?’ <points at each of the three placeholders but does not touch the screen>

‘So? I don’t know. This is weird. I don’t know.’

<looks at the screen, taps the placeholder in the middle>

‘Well?’

 <Figure 2 appears, pause and silence>

‘Aha, they are like talking and thinking or what?’

<taps the top info box which is not activated in the prototype, pauses, and taps the same box again>

‘What?’

‘This is a joke or what? It’s not doing anything.’

<silence … >

‘I mean it’s not doing anything.’

<taps the left info box which is activated in the prototype, Figure 3 appears>

‘Aha, it is.’

<pauses and reads the placeholder text in the right column which is written in Latin>

‘So? I don’t understand it.’ <taps the screen below the placeholder text, Figure 2 appears>

<taps the bottom-right help icon, Figure 1 appears>

<silence … >

‘I don’t get this. This is pointless.’ <taps the placeholder to the right, Figure 2 appears>

‘What is the point? I’m at the same place.’ <taps the screen where there is no info box, Figure 4 appears>

‘I think I’m done.’

Figure 1

Figure 2

Figure 3

Figure 4

Discussion

It is clear that the user was confused by the placeholders on the start/help screen, although the text below the placeholders helped her understand how to begin. The small delay after the start/help screen also seemed to confuse her for a while, as well as the fact that only one of the six info boxes was activated. The placeholder text written in Latin inside the info boxes also confused her. All these observed thoughts describe problems that were already known and will be solved in the final prototype.

  One interesting observation is that the user thought the info boxes represented speech bubbles and/or thought bubbles, instead of boxes with information about details in the painting. This means that we have to consider the design of the info boxes for the final prototype. Another observation that we need to consider is that the user never used zoom, even though there was information about the zoom function and she used a touch screen.

/ Alexander

[a2group]

Think-aloud observation and analysis

The think aloud was done on a user over the internet via screen sharing and VoIP. The user willingly participated after had after having the context about the museum , but not the functions of the device, explained. The user is not from Sweden and does not understand Swedish. The user were given the following instructions for the think aloud:

1. Say what you're going to do

2. Say what you think will happen

3. Do the thing that you said you were going to do

Setting: Desktop computer Events are noted < > and thoughts ""

<User reads the bottom text of the instruction menu, but interrupts looking at the placeholders>

"Wait...what are these placeholders? I'm confused"

<Instructor explains to the user that they're temporary illustrations and to be replaced with more intuitive pictures>

<User goes back to reading>

"Wait... there's tapping in two different places. Tapping does two different things?"

<User gets confused>

"Oh I see, if you tap it will toggle a box and if you tap on the box again it will show more details of the box? And if you tap elsewhere it will close it I guess?"

<User gets asked how to zoom, zoom isn't available on the computer, but the user gives the correct answer>

"I'm going to tap the screen because I'm assuming that it will make this screen go away"

<User taps>

"Oh wait.. this isn't..oh it does. Ahhh....I see"

<User now realizes what the info boxes are>

"I'm going to click this info box to make it pop up with more information"

<User taps the info box. Only one functioning info box is available in the prototype. The instructor tells the user to pick that one instead. User taps the info box>

"Ok. .."

<User gets confused about the languages in the information screen>

"Ooh, title. This one I imagine."

"I want to close it so I click on it again"

<User taps screen  to get out of information box>

<The user gets told to remove the info boxes>

"I click on the info box again"

<click on the info box, nothing happens>

"Oh wait"

<User clicks a little bit above the info box. The boxes toggle>

<The user clicks a few times on different places and sees that the boxes toggle>

<The instructor asks the user to get back to the instruction screen>

"ooh, here!"

<User taps the info box in the bottom right corner>

Short analysis:

The user got confused because she didn't understand what the information was referring to until she got to the main screen. This may be solved by adding the related images in the placeholders. The user had to test to understand what it meant by tapping to toggle the info boxes, when she originally thought it meant that if you tap the actual info boxes it would toggle them. She thought it would be a better idea if the instruction said "Tap *what* to toggle the info boxes" , where *what* is what you're supposed to tap. The user thought this was confusing when tap was being used under another placeholder as well , but said that it would probably be fine once the illustrations were implemented.

To "finalize" the prototype, we should implement intuitive pictures instead of the placeholders , make more info boxes useable and differentiate the languages in the information boxes more clearer.  Make instructions slightly more understandable.

//Alexander Janson

[a2group]

Think-Aloud observation and analysis

Setting: Desktop computer Events are noted < > and thoughts ""

"Ok, so I can use this to get information on how to use the application" < User identifies the information screen as a tool to acknowledge how to interact with the application > "Placeholder feels awkward so I have to read the text under." < User reads first information > "Tap to toggle information boxes". < Instantly toggles the information box by clicking on the information box > < Sees the small detail buttons on items > "Can I click this?" < Clicks > "Aha" < Clicks out of detail > "Why is it at him?" < Notices all the detail buttons > "Aha So you can know more about specific items" < Tries to click on different detail buttons > < Clicks on bottom right information button > "Tap on box to show details, aha" < User is confusing toggle info boxes with tap on box to show details > < Toggles out of information and clicks to show detail buttons > < Toggle information > < Reads information again > "Aha you can zoom also"*

* Zoom is not supported by computer.

Short analysis: User instantly starts interacting after just reading first instruction frame. User confuses toggle info boxes with the actual information screen. This could probably be be fixed by renaming information screen to instruction screen to minimize confusion. Information boxes could be renamed detail boxes. User first tries to click on detail boxes but not until reading the instructions the 3rd time he thinks about zooming the picture. This should be considered since one of the main features is interacting with the painting by zooming. Another thing to think about is that It's not obvious for the user that the detail boxes give's the user more information about object. This should be rethinked and we should consider different buttons. Lastly, we should implement illustrating pictures for the instructions since that could make the user understand the instructions more quickly and clearly.

/ Fredrik Hallsmar

[venuesthlm]

The final post

The final stage is finally here! We have now finished the project and our hard work has paid off by winning in our group!

The purpose of this final post includes a summary of the whole project and a final reflection as a group. It will then be easier to follow our workflow and how the project has come from ideas to a high-fidelity prototype.

Workflow

The whole purpose with the project was to design something usable for tourists in Stockholm. Our first stage was to brainstorm ideas and decide which target group we were aiming for. We decided that our target group were young tourists visiting Stockholm who wanted to participate in the nightlife. Read more about the first few steps here.

We followed this up with interviewing our target group to get an overview of what they actually wanted and needed. We also made state-of-the-art analyses and think-aloud-evaluations of several already existing solutions, all of which helped us in identifying the problem space. After analyzing the results, we saw a need in a solution which helps the user to find a club or a bar which suits your preferences and how to get there. Read the summary of the analysis here.

At this point we decided that we should make an application for smartphones which helps the user to find a club or a bar by filtering by their preferences or searching and then get a description how to get there.

Later, we made personas and scenarios which helps us get a view from the users perspective. Read more about the personas and scenarios here.

When we had completed this, we started with the prototyping and designing step. After making a few different low-fidelity prototypes and making thorough evaluations (e.g. think-aloud) of them and looking at existing solutions (state-of-the-art) for inspiration, we decided what our final design should be like. We developed an appearance from our prototype layout.

We decided to go for this design, make some adjustments following other project groups' evaluations of our design, and then developed our final, high-fidelity prototype. Read more about the prototype here.

We renamed the application from the working-title to Venue Stockholm and designed a logo. The logo is designed to fit the theme.

This final prototype is developed by us using HTML5, CSS, JavaScript and PHP for backend and easy managing.

See it in action here!

Final words

We are very pleased with our project and think that we have learned a lot about the core concepts of HCI, which includes everything from the iteration process to the development from the end-user's viewpoint. Hopefully, everyone who uses the prototype feels the same way as we do and has a great experience with our application.