lördag 28 mars 2015

Course Theory and our Project

This blog post aims to explain from my perspective how the course theory influenced our project and the final design of the prototype. We would read theory from the book and apply that knowledge through frameworks and suggestions the book had to offer. All page numbers and chapters reference to the 1st edition of Interaction Design: Beyond Human-Computer Interaction).

We started off by conceptualising the problem space by attempting to answer the following questions: (Ch 2, page 38)
  • Are there problems with the existing solution (if that solution exists) ?
  • Why do you think your proposed idea is useful? 
  • How will your proposed design support people in their activities ?
This was a useful framework that the book suggested and we managed to solve those questions throughout our project.

We also used the conceptual model based on activities, mainly when we were designing and coding the prototype. This conceptual model involved the user performing activities such as: (Ch 2, page 41)
  • instructing 
  • conversing
  • manipulating and navigating
  • exploring and browsing

With this model, we identified the main interaction a user would have with the app. Those  activities were manipulating and navigating as well as exploring and browsing. This is because our app involves users interacting with information and navigating through different pages. There was no form of instructions the user could give the app nor was there any conversing with the app.

Theory from chapter 3 (Understanding Users) helped us deal with the psychology perspective of the app. The idea of cognition (Ch 3, page 74)  is important when designing an app like ours because we wanted users to feel engaged and to pay attention while exerting as little brain power as possible. When I coded the prototype, I kept in mind that small details such as how the placement of buttons can affect a user's interaction with the app. One issue in the first version of the prototype was a back button I implemented. The button allowed you to return to the previous page. The problem with this button was the way our pages were set up. A hierarchy of the pages looks like this:



The issue with the back button was that a user had to press it excessively to return to the home page. The page layout is not linear but it is more like a web. There are several links one can use to access different pages (such as buttons). If a user were to navigate through ten pages for example, they would have to press the back button ten times to return home. When we tested users and performed a think aloud evaluation, this was a common issue that the users would complain about. To fix this, I replaced the back button with a home button which reduced the time it takes to return to the home page.

Information presentation (Ch 3, page 76) was also a key influence to the prototype because of the app's reliance on text based information. To ensure that everything was easy to read, font sizes and spacing was applied in an appropriate manner.

In chapter 5 (Understanding how interfaces affect users), one particular aspect that we could relate to was user frustration. All of us at some point have experienced frustration with an app and this can cause a user to stop using it all together (especially if there are better alternatives out there). The theory provided several main causes of user frustration such as gimmicks, error messages, overburdening the user and appearance.(Ch5, pages 148-153) The main sources of frustration that was concentrated upon was gimmicks and the appearance. Some gimmicks popped up in our user testing such as the "select language" button which did not actually change the language. However, coding several languages into the prototype takes time and this was only a prototype so this was not too much of an issue. However, the quiz had a flaw where it would  provide a pop-up saying "Correct Answer" when a user selected any answer. This lead them to a false sense of achievement until they realised the bug. This section on user frustration helped us identify issues that users commonly have and helped us prevent those issues from appearing in the final design.

In our exercise, we combined our conventional and non-conventional prototypes and in this process, we were able to identify the main requirements the app would need to fulfil. On page 207, "A user may be a novice, an expert, a casual or a frequent user" was a useful quote because it made me realise the importance of the user's skills. If we make the app too complex, it could be difficult for novices such as children and old people to understand the features. If the app was designed to be too simplistic with constant reminders on how to use the app, more advanced users may not find it as appealing to use. The aim was to instead, create something with a simplistic interface but if the user needed help, they could rely on the panel page. This page is opened by a button labelled "help" located at the top right of the home page. This way, a more advanced or frequent user who is familiar with the interface won't be annoyed by reminders on how to use the app.

There were several methods of obtaining data (questionnaires, interviews, workshops, natural observation and studying documentation) but we only used a select few. (Ch7, page 211) I believe that the most applicable form of data gathering was questionnaires and natural observation. Interviews are good to get in-depth analysis but finding willing participants would have been difficult. Questionnaires is what we used and participants would give us or short statements for their answers. Natural observation worked to a certain extent because we could observe physical interaction within the museum (a person interacting with a device). However the user's thought processes are harder to determine this technique.

Compromises in prototyping (Ch 8, page 246) is something that popped up when deciding how far the features were meant to be implemented. For example, the select language button simulates what it would be like to select the language but does not actually change it. We wanted to focus more on the design rather than implementing 6 different languages which could be done when the app actually gets made.

The evaluation paradigm we used was the "quick and dirty" paradigm . In the evaluation process, we just gave participants the prototype and wanted to see if they could figure it out for themselves. We did not use the usability testing paradigm because we would be controlling the evaluation. By having the users evaluating the app for themselves, they are able to spot potential flaws that we may have overlooked. (Ch 11, pages 340-343)



torsdag 26 mars 2015

A Final Meeting until Monday Presentation

Hi guys!

First of all, I would like to congratulate all of you that our prototype was selected to be presented on the final presentation on Monday next week.

Meeting on Friday (tomorrow) 10:00-12:00

We already have a good presentation, but as Jonas stressed during the last session, focus should be put on the marketing aspect. That is, we should convince the museum stuff (they will constitute a part of the jury).
  • 10:00 - 12:00, Friday 27/3. Room 7, Dürer. KTH Library.
The presentation is available here:

Preparation for the Meeting

  • Go through the presentation
  • Search for relevant images/graphs/tables (anything with numbers that proves our point).
  • Think about other things that can be added to convince the audience.

App prototype

  • The bugs can be fixed.

Summary

Short conclusion: We have to win!

måndag 23 mars 2015

Preperation for Final Presentation

Good work everyone ! By next week, the prototype will be improved. But in order for that to happen, I will need:


  •  a list of changes that need to be made (solutions to the bugs).
  •  a suggestion for a colour theme.
  •  a name for our app, app icon is optional.
Here is an updated version of the prototype, fixed the quiz bug, implemented a home button. Changed the home page theme (if we agree that it works, I will then do the same theme on the rest of the pages)

söndag 22 mars 2015

The presentation tomorow

As you all might know, tomorrow we are to present our prototype that we've worked on for the entire term. Here's the plan:

Meeting up at 13:00

  • I've already booked the room no. 3 (called  Scheele) in the library. We have till 15:00.
Presentation
  • A new presentation is now available. It's not entirely done, but at least the layout and some basic things are there.
  • See it here
See you tomorrow!

måndag 9 mars 2015

thinking aloud with martin nilsson

I had a 21 year old woman from Germany perform the think-aloud.  While not exactly a thespian (experienced or otherwise), I felt her artistic background put her as close to our “crazy persona” as a social reject like me could manage to dig up.

I served her the mandatory disclaimer: Prototype is a prototype and has limited functionality. (This had to be repeated several times throughout the process. Complaints about functionality have been included anyway in the name of completeness. Also it was pretty funny.) I further explained what the intended purpose of the product was, etc., providing some context to the abstract implementation of the application.

QUIZ:
Right out of the gate, she made fun of the grammar mistake in the first question. She exclaimed she was a genius when she got the second question right, but I had to explain how the thing is just bugged and you can’t actually fail any subsequent question if you pass the firs. A crippling blow to her confidence, but we powered on. Finally, she voiced some miscellaneous issues regarding the specific questions chosen. Ultimately, however, there was not much usable intel.

QR-SCANNER:
So she pressed the QR-code and got to the rocket info, which she wasn’t really interested in, and because of some misaligned text didn’t realize the Aeroplane picture linked to ANOTHER exhibit, but I told her it was and she said Oh.

SETTINGS:
She didn’t know what the Clear Exhibits button did and frankly neither did I. She wanted to change the language to her native Latvian but quickly figured out it doesn’t actually work and promptly began criticizing me for it.

OVERALL:
With the limited functionality in mind, there wasn’t a whole lot for her to reflect on. She said the overall idea was cool, though, and that as long as the information from the app acts as a supplement, rather than a replacement, it’d be a welcome addition to her museum experience. She was positive toward both the idea of treasure hunting and answering quizzes.

As a finale to the entire thing, she left me with a quote. I suspect this quote is a bit of a jab at the limited functionality but, again, for completeness, I will include this too: “It accomplished absolutely none of the parameters set out by the project unless those parameters were to make the least functional and useful webpage ever.”

Think Aloud - Artem

I performed the experiment on an old lady. I introduced her to the setting, i.e. a museum, and that this is an app installed on her smartphone, and that she should tell me everything she thinks about.

In the beginning, there were some difficulties to understand what to do, partly due to the fact that it was in English. I told her to navigate to the help page, she was able to interpret the instructions and navigate back to the main page.

It was confusing to get the point of the main screen that said “scan an IR code”. She tried to click on the text but it did not work. I guided her to press on the QR scan button, and then I told her that this is actually available at every exhibit (a code). She pressed on the code and got to the page with the rocket exhibit. Later she pressed on the aircraft exhibit and then I told her to try to go the home page. Everything worked out perfectly.

She was able to change the language (although I had to explain that it isn't supposed to work). Later, I told her to take a Quiz and as a result, she was quite happy since she got all questions right! She tried the "treasure hunt", but again, I had to explain the way it works since it is currently just an idea.


In the end I asked her to give me some quick feedback and tell me about her user experience. She said that this is not difficult to understand, but it [interface] requires some time to get used to. If it would be in her mother tongue, it would be easier according to her.

Think Aloud - Robin Bråtfors

I performed the think aloud with a 11 year old boy who is very interested in cars and mobile games. His interests, age and knowledge is similair to our primary persona and I think he's a fitting test user. He has experience with quiz apps such as "Quizkampen", but he has never used a QR code. His english knowledge seemed to be sufficient.

I explained the context of the app, how it will be used and what happens if you press different buttons. But I wanted him to mostly explore by himself and so I set up a scenario (a museum visit) to immerse in him in the experience.

The first thing he did was to click on help, he didn't understand everything but he told me he got the gist of it. Then he decided to take the quiz but after answering the first question, it took a few seconds for him to realise there were more questions if you scrolled. When he had answered all the questions he wondered what he was supposed to do next, so I had to tell him that there was no "game over" screen or score board implemented yet.

So he moved onto the QR scanning, he didn't know what QR was but he realised that the code was clickable when he moused over it. I explained how QR worked and it would be implemented later on.

After that, he clicked on the treasure hunt and realized he had to use the scan function to complete it, he clicked on the QR scan and was dissapointed when he got the rockets exhibit again.

So he ignored it and decided to explore the settings. He noticed that the language change didn't do anything and I told him that it wasn't fully implemented yet. Then he clicked on the "clear exhibits" button and I told him about the checklist function, which shows all the exhibits you've scanned on the "home screen", and that he had just cleared all his history.

Because of that, he wannted to take a look at the home screen but he
was confused by the lack of a home button and frustrated when I told him he had to press the "back" button until he made it to the home screen.

Overall, he seemed to be able to understand the app and how to use it. I think it would be nice to have an independant QR scan that is assigned to the treasure hunt, this will make it more specific and focused. Navigation seemed to be a little clumsy, with the major flaw being the lack of a home button.

Something unrelated to the think-aloud evaluation that I noticed, was that the quiz automatically corrected every following answer as "correct" if the previous one was correct.


söndag 8 mars 2015

Think Aloud - Arsalan

Tested by 3 people, all of them have had previous experience with apps.

Generally:

They suggested that the app could have a better colour scheme instead of using white and grey. On some pages, the footer bar had 2 buttons but they were not centred (there should have been equal amounts of space between the edge of the screen and the buttons). Finally, they mentioned that the lack of the home button is a bit tedious. This is because if they want to return to the home page, they have to keep on pressing the back button (a button which redirects the user to the previous page).

Home Page:

They liked the placement of the help page (as a pop-up that opens when pressed on). They also found the settings button to be useful and the instructions were simple enough to understand.

QR Scanner Page:

They didn't understand that to advance to the next page, you have to tap on the QR image. The idea was that when you are using this app in reality, the QR page would display what your phone's camera would be seeing. There, you would scan the QR and it would automatically redirect you to the exhibit's page. But since this is a web-based prototype without any features a phone has, we had to improvise by using this page.

Another issue with the QR scanner page is that every time you press it, it only opens the Rocket page. The idea was that it should open up a different page each time you press the QR button.

Quiz page:

They noticed that the quiz would give the pop-up "Correct Answer" on questions 2-5 for any alternative they selected. They also would have liked to have a page which displayed the results rather than have a pop-up after every question.

Exhibit pages:

They noticed that the aeroplane exhibit page has "Rocket" as its header. It was unclear to the users that you could visit a specific exhibit's page by tapping on the image. This information should have been available in the help page.

Settings page:

They realised that the change language button does not actually change the language. I explained that this was a prototype and full functionality isn't required at this point. They tried out the clear exhibits button but it took them a while to realise the effect this had. This is because they had to keep pressing the back button to reach the home page.


Hosted version of the prototype

In order to access the final prototype directly, please go to http://dev.ksdn.se/hcikth/.

lördag 7 mars 2015

Think-aloud evaluation of the prototype

This is my think-aloud test, done in a simulated environment with a kid in elementary school age. Keep in mind that the prototype isn't fully functional so i had to explain the whole time why a certain something didn't work. The think-aloud was done entirely in Swedish, but I translated it to English here.
Before i started the experiment, i told the user that this is an app for the technical museum, and his task is to explore all the functions that it offers.

[Start of the experiment]: The user is looking around at the home page.
User is clicking at 'Take the Quiz' button.
User: I'm gonna take the quiz, looks like it has questions.
User sees the first question and chooses one of the alternatives.
User starts to scroll down.
Me: You're scrolling down to get to the other questions.
User: Yeah, i realize that.
User does the same thing with all the other questions. During whole this time he's talking exclusively about the questions of the quiz, so I'll omit what he said here.
At the end of the quiz, the user is still at the quiz page. He looks around and then clicks on the 'Treasure hunt' button.
Me: Why did you click there?
User: I don't know, I'm just testing.
Here I had to explain that the treasure hunt page is incomplete and that he had to go somewhere else, so the user clicked on the 'Scan QR code' button. Once he was in the scanning page, he seemed confused as what to do next, so i explained that he had to click on the QR-code.
(Note: In this prototype, there is no real scanning function, so the user is supposed to click on a picture of a QR-code and pretend that he is scanning)
When the user clicked on the QR-code, he gets redirected to a page with a picture of a rocket and information of rockets. User starts reading the information.
User: I don't understand, too much English.
User clicks on a picture of an airplane and gets redirected to the airplane page. He then looks around and clicks on the settings button. In the settings page, he clicks on the 'clear exhibits' button.
User: 'Exhibits cleared', I don't know what this is supposed to be
User: Oh look, i can change language.
User chooses to change language setting to Swedish. He then proceeds to go back to the home page.
User: Wait, nothing has changed, it's still in English.
Here i had to explain that the other languages weren't actually implemented.
Right then i choose to terminate the experiment because i thought that there wasn't anything more to test.

Since the user choose to click on the 'clear the exhibits' button earlier, he never realized that scanned pages show up at the home page. He also never bothered to click on the 'Help' button despite the fact that he seemed to click on everything else.

The thing that immediately comes to mind when i think of this experiment, is that we shouldn't expect of children to know perfect English or that they know immediately how to change the language to Swedish (or their other language of preference). Otherwise it seems like they understood the interface of the prototype, that they had to click on the buttons and what kind of things they expected to show up on these pages, or that they had to click on the picture of the airplane to get to the page of the airplane.

Final Prototype

You can find it here.


fredag 6 mars 2015

Before exercise 5

Hi, i hope everyone reads this.

Before Monday afternoon we have to summarize the results from each person's test and post one short analysis in the blog. We also have to prepare a 5-10 minutes presentation (using a projector) where we have to present our problem, the main scenario and the prototype. How are we going to organize all of this in 2 days? I don't think we'll be able to meet up before Monday since I'm currently away. Do you want to meet up without me anyway, or should we all meet up before lunch time (10-12) in Monday at the library before the exercise session starts?

I personally prefer the second option, and I'll assume that it's what we're going to do unless someone says something otherwise here.

tisdag 3 mars 2015

Prototype

Hi guys !

You can find the basic version of our prototype here . Download the folder and just open index.html in a web browser. You will need to resize the browser because we are simulating a mobile device (otherwise everything will look stretched out). Suggest any improvements or critics in the comments below.

Change Log (changes made after this version of the prototype):

  • Exhibits can be added and cleared.
  • Pictures of exhibits have a name attached to them now (like Rocket, Car)
  • You can now click on an image and it will redirect you to the associated exhibit (only works for Rocket as of now)
  • Treasure Hunt has been updated.
  • Removed Take the Quiz button on Take the Quiz page. 
  • Changed theme to black (this can be reverted by changing one word in the code)
  • Implemented Artem and Abdallah's latest suggestions


Discussion:

Note that each page has a footer bar. In it contains buttons with essential function. Something to discuss would be if the buttons I placed on each page are appropriate for the page itself and whether or not a home button is necessary (a button redirecting the user to the main page).

A colour theme other than white and grey would be great to have, any suggestions for colours to use?