A2

MDID14 - Project group: A2 | Museum: Historiska museet | Target group: Tourists (Domestic & International)

[a2group]

Final presentation

Today we have been working on the final presentation coming up this Friday. We also made some minor changes in the prototype after evaluating think-aloud analysis.

Presentation

[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

[a2group]

Presentation

Today we have been working on our first presentation for the exercise group.

You can view it here:

Presentation

[a2group]

Today we have worked on our main scenario for the presentation coming up in two weeks.

Here is the result.

[a2group]

First interactive prototype

After receiving and reviewing feedback we started editing the previous sketches. After deciding about every detail we started developing an interactive prototype using http://proto.io. Here is the prototype so far:

Prototype

[a2group]

Prototyping :)

[a2group]

Feedback from group a3

While we received mostly positive feedback there were some points that needed further development, yeah. Those were:

The buttonless design felt a little bit to empty and unintuitive.

We decided to add "Info-buttons" instead of relying on areas of the picture being triggers for the information to appear.

A3 suggested that we put small flags on the idle screen to select language, however we decided to stay with the "parallel text design" used in the rest of the museum. (Two parallel texts in two different languages but both cover the same topic.

The objective of our buttonless design (originally our "extreme design") was to provoke the evaluator to propose only the most necessary buttons and features. We felt that we received this and that they did not focus on the more trivial details.

[a2group]

Evaluation of group a1's project

Today we have evaluated a1's product concerning an application with museum objects prior to a museum visit. We brought forth the following feedback:

Good

They had a clear design and layout.

The concept was good and we expect the users (teachers, guides and students) to use it more than one time (as long as the material requirements of having computers/tablets are met).

The functionality was well adapted and felt central in the product.

Could be improved:

We felt that the "mini-games " took the focus away from the main purpose of the product. We thought that it was an unnecessary addition to the product because there was no clear proof that it would make the target group more interested.

It was unclear how much guides and teachers were involved in the product. The guide's role in the entire thing was mostly missing due to not having made his/her interface.

The concept is not applicable to smartphones due to size constraints with the platform. A computer or tablet is a must for this to work.

[a2group]

Evaluating group 1's design

[a2group]

Final Static Design Decision

After a group voting a decision has been taken. We will proceed with the buttonless design. We have also prepared a few Powerpoint slides for the presentation on Monday.

[a2group]

After discussing both designs last meeting we made two lists of good and bad things with each design.

Good things:

+ Few distractions. Enable the user to focus on the task.

+ Easy to use with familiar gestures.

+ Modern UI.

Things needed to be improved:

- Language support.

- Instructions.

- Screen size.

We first considered the instruction issue and came up with a solution that uses a dialog box when screen is in idle (screen automatically switches to idle mode after x seconds without user). Another issue was the language support. The first prototype only supported English but since Swedish is a language that our target group uses we wanted to add it. At first we considered having language buttons in an instruction dialog box or in the bottom right corner, but since we want to minimize button usage we instead chose to take advantage of the screen width. By putting both Swedish and English information in the detail box we fulfilled our goal. The above pictures show the final result of our prototype so far.

[a2group]

Prototyping :)

[a2group]

After out first design process we realised that the following things were good about our design: + Very intuitive +Language options + Very clear design + Familiar (iPad) + Detailed contents The following functions needed to be adjusted: - Might be a little too small - Wall of text / buttons To fix the problems with the size we decided to leave the iPad behind and aim for a larger touchscreen. To fix the clutter with the buttons we decided to move the zoom function from the bottom left corner to a vertical position effectively keeping all buttons within the same area. Also, we changed the shape of the clickable buttons to circles and the text button symbol from an "i" to a more illustrative symbol. To reduce the intrusiveness of the large amount text we decided to shorten the larger portions of the text to a more digestible size. We added a  "read more" button to read the full portion of that specific paragraph. Instead of the summaries in the bottom left corner of the text screen to some quick facts eg artist, year when it was painted etc. We also reduced the size of the borders and added a frame around the screen.

[a2group]

The design process for the conventional design was similar to our “extreme design” counterparts; each individual came up with their own design and some suggestions for functions, bearing the conventional idea in mind. We quickly realised we all had roughly the same idea for what the interface could look like, so through some iterative work we agreed on the design of some key functions like language selection and zoom/3D-viewing. The result was a simple, minimalistic design without too much clutter and options suitable for both our personas..