Final prototype

Final prototype (click here)

This is the final iteration of the prototype, as it was presented on the 13th of november.

eMap - Travel with me

eMap - Travel with me

Final Prototype

The end product of this project is "eMap - Travel with me". It is a stationary infoscreen, that can be found in all the tourist hubs, like hotels, old town, tourist attractions,  but also at metro, bus and ferry stations. It helps the users to plan their route and provides the possibility to "take away" the planned route in form of a printed map or digitally on the phone, transmitted via bluetooth or NFC.

eMap: planning a route

For planning a route our product provides functionalities similiar to Google Maps or the SL App. These applications are usually used by Stockholmers themselves and are widely accepted. However, our user group the tourists do not use them, as these technologies require internet access, which can be very expensive for the foreign tourists. Especially older travelers for example are not used to phones and mobile applications. Therefore they prefer asking someone or using stationary maps at the stations or their own maps.
With eMap they now can plan their route easily without having to use the expensive roaming. They can print their route or take it with them on their phone as an image (via bluethooth or NFC). The interface is easy to use and very intuitive, so that even users, who are not that technology affine can use it without problems. 

Route send to phone via bluetooth or NFC

printed version of the map

Additionally to the standard functionality of planning a route, also additional functionalities specialized for our target group is available. eMap, for example, presents the user diffrent types of routes, such as the fastest, the cheapest or, what is most interesting for many tourists, the most scenic route, with most sightseeing on the way. Also can users filter the map to display tourist attractions, restaurants, malls, etc. to them on demand ( following the rule: overview first, zoom and filter, details on demand). 

eMap with tourist attractions displayed - detailed information on  Skansen

Information about the design process and the project can be found in this blog or in our final presentation as well (Find the final Presentation here!).

Final Prototype: Test the final prototype here!

Iterations of Prototyping (Teammeetings)

by Fredrik and Suhanyaa

First Iteration

In the first iteration of the prototyping first sketches of the design idea were made (Check out the first iteration here!). A heuristic evaluation of expert users was then performed based on the sketches. This was our first very low-fi-prototype. It was very easy and cheap to make, and easy to modify and therefore very flexible, which made it easy for us, to react on feedback and suggestions from fellow students during the heuristic evaluation.

Second Iteration 

After the meeting on the 28th of october, each teammember gathered design ideas and created individual sketches for our paper prototype (see individual design ideas and sketches here). We discussed the ideas from the paper-prototype sketches coupled with the feedback from the heuristic evaluation from exercise 4 and made second iteration of our prototype, an interactive low-fidelity prototype  prototype using Flinto. This iteration was fairly simple but was intended to be used for the think-aloud evaluation. (See Think-aloud data)

Flinto prototype (Check out our 1st Iteration Prototype here)

Third Iteration

On november 2nd of november we met up to discuss the think-aloud evaluation feedback and to make another iteration of the prototype, this time a more high-fidelity prototype. Some of the key points from the think-aloud feedback were the following:

• Some icons were confusing
• Unclear whether the map is interactive
• The colours of the routes on the map were confusing

We commenced to work on the second iteration thinking about these things and the result was something like this:

Check out the 2nd prototype here

We took in consideration the fact that some of our think-aloud evaluation participants wasn't initially sure whether the map was interactive or not so we made it span the whole screen to accentuate that fact. We also tried to make the icons clearer but unfortunately we didn't have the time to properly show what happens when you click all of them in this prototype. Lastly we changed the colours of the routes showing on the map, simply highlighting the one selected instead of having a colour-coding system.

Fourth Iteration

On the 8th and 9th of november our group met up to discuss the feedback we got from exercise number 5 were we presented the 2nd iteration. Here are the key-points from that feedback:

• Make the text window smaller/slimmer
• Refine tourist attraction information
• The theme of the design has a pre-dated look
• As it is meant for tourists, add more tourist relevant information

We took these things into consideration when we started to make the final iteration of the prototype.

Think-aload

This was a think-aload exercise conducted using the think-aload protocol from the book in order to evaluate the first prototype. I wanted the data to capture any problems,thoughts or ideas the user might encounter when seeing the prototype for the first time. As soon as the user got any thoughts related to the design, the user was asked to speak his thoughts loudly so I could get a more unfiltered reaction and thus a more accurate evaluation. 

"I see a lot of buttons", "The search box is easily found","Im a bit confused about what the map is there for","Can I stretch the map?","The icons on the map is a little confusing","The language button is good","The color of the line showing my direction on the map should maybe be a bit stronger.","More text could explain the flow better or using symbols who can move to indicate what they mean.".

Feedback On Paper Prototype

Feedback from a think aloud trial. The subject was not in our target group.

At first she as unsure of what the purpuse was and on where to click.
Then she discovered that if you hold down the button the areas where you can click are highlighted, and she tried the flag, the language option, that was clear what it meant.. She did not try to move the map, and she did not know what the stars or the flag was. She typed in H that was avaliable for the destination, and clicked on the highlighted one there. She was very unsure of what to do the entire time, and got confused about where to click to continue. When she got to the part where she was going to get the directions printed, the only icon she understood was the print option, she did not know what nfc or bluetooth was. She was unsure of what it would print, if it was just the map or the entire screen. The directions with the train and the walking was easy to understand.

Feedback on paper prototype

We performed think-aloud on several subjects. The subjects were acquaintances and friends and were not in our target group, and will most likely have an influence of western standard in interaction. Regardless, we believe this will give accurate data since we really only want to test the initial interactive flow of the application and look for major errors.

Initial screen.

The user were tasked to find a route to "Hornsgatan".

The first impression

• Many found the map too zoomed out - most users tried to zoom in and move the map around
• After exploring the map - the green flag was clicked, not dragged (though nothing happens in our prototype)
• After clicking the flag, the Points of Interest star was clicked.
• A few did not realize the purpose of the application, and found the map to be too zoomed in.
• A few instantly clicked the destination before even interacting with the map

Points of Interests screen.

General flow

• Spent time playing around with the Points of Interest (star), briefly forgetting their objective of Hornsgatan
• ... but when done exploring they clicked the destination above the POI list and quickly found a route
• The few whom did not play around with the Points of Interests found a route much faster 

Route screen
 
Overall

• Transport symbols/icons not clear.
• Colours on routes were confusing, connected the subway with the corresponding line colours - "the blue subway line does not go to Slussen, what?"
• Unclear what the transportation selection buttons do.
• The icons on the route screen were confusing, only the bluetooth icon was clear - but not its purpose ("Bluetooth? Why would I want to connect with the application?")
• When realizing the print-button printed a paper from the machine, they asked themselves "what does it print? The screen, the map, the directions...?"
• When suggesting the print-button would lead to a pop-up where they could choose what to print, they still looked confused as they interpreted the icons as the final step an not as something which brings up options. 
• "People are gonna troll this so hard and just print papers until it runs out"

•  "Why is the screen still zoomed out when I have my destination, why does it not auto-fit according the the route?"
• None noticed the POI-stars on the map
• None interacted with the header

Kommentarer till think aloud

• Otydliga bilder, behöver förklaras.

1. ex    
2. Destination/varifrån
3. Stjärnan
4. Pilen bland färdmedel

• Liten karta.
• Jobbigt funktion för att bestämma tiden.

Paper-prototypes

Low-fi prototype ideas

Fredrik:

Suhanyaa:

Main Screen of the stationary infoboard

Main Screen with focus on map 

Main Screen when "Tourist Attraction"-Button clicked

detailed description to selected tourist attraction

Edvin:

Henning:

Emil:

Jonas:

Prototype meeting

Meeting 14/10-15

We met up to further discuss our design idea and to start creating a  prototype. We gathered our design ideas and created sketches of our concept(first sketches). When the meeting concluded we agreed that for our next meeting, everyone in the group should reflect on the sketches made and the ideas discussed and then create individual paper-prototypes based on that. The different solutions will then be used to make a low-fi-prototype using either Flinto or Invision. 

Next meeting is taking place on the 28/10-15

A possible design for the front page

First sketches of the stationary info-screen

After the brainstorming, we decided to focus on one of our two project proposals: Improved ticket machine with ability to print a map with directions (and ferry/bus/trail stations)
However, we realized during further ideation sessions, that a ticket machine will not match our requirments that we extracted from the field studies. Our users want to find their route on an easy and fast way. If users can buy their ticket at the same machine, it is more likely that users have to spent a lot of time on the machine, while other potential users have to wait. Furthermore we do not want our concept to be dependent on SL or other companies. Our infoscreen should not only help people that want to use public transportation, but generally everyone (mainly tourist) who wants to find a route from A to B. Therefore, we moved away from the idea of creating an improved ticket machine to creating a stationary info-screen that helps people to plan their route from A to B in an very easy, intuitive and fast way. The info-screen is fitted to the needs of our target user group, the tourists. It also provides the possibility to print individualized map with the chosen route information.

Some of the first sketches of our solution.

Design of the physical device

Main screen

initial screen to animate user to start interaction

main screen with tourist attraction button clicked

choose languages (appears, when flag sign on main screen clicked)

Our Evaluation Method (from seminar 2)

Requirements

Primary Requirements
   - Fast
   - Easy to use
   - User not required to have internet connection
   - Provide all relevant travel information

Secondary Requirements
   - Sustainabilty
   - Fun to use

  

Evaluation Framework

Using the DECIDE framework

Determine the goals
- Does the solution solve the task/ fix the problem?
- Does the proposed solution fulfil the requirements?

Explore the questions
- How long did it take to fulfil the task? (Was it fast?)
- Did you find all the information needed:
- How to get from A to B
- Which transportation means to use
- Cost of travel
- Route
- Where to find the stations
- Travel duration
   - How clear was the information the user got?
- Was it easy to use? 
   - Did any complications occur during performing the task?

Choose evaluation methods 
   - Thinking aloud: controlled setting, user involved
- Analytics: Fitt's Law

Practical issues
   - We have no budget, so it cannot cost us anything
   - ???

Ethical issues
   - Printing papers can damage the environment.

Final evaluation   
   - To make sure the data is trustworthy, we can use triangulation

Feedback

Further define what we mean with "controlled environment":
   - Whom do we use as user?
   - Do we controll all variables? 
   - Where do we perform this?
   - etc...

Notes Seminar 2 - Jonas Masko

Evaluations, the DECIDE framework (cha 13):

1. Goals
   The target group and what they want with the product. This is critical to be able to evaluate the final product.
2. Questions
   Break down the major goal into smaller parts by continually asking "why", giving a set of questions to be answred by gathering data. Which leads to finding a...
3. Method!
   A suitable method to evaluate the product. This needs to be adjusted to the context it is used.
4. Practical Issues
   Budget questions? Are the group of people participating gin user studies relevant? Enough time? Expertice sufficient? etc...
5. Ethical Issues
   Mostly targeted towards the participants. Have they been treated correctly, paid enough, kept their anonymity, contract signed? etc...
6. Final Evaluation
   Time to evaluate the data and result. The result and data should also be able to be presented at this point. Key aspects to evaluate are: biases, reliability, scope & validity.

Different evaluation methods (cha 15):
Analyze the results without a user using heuristic evaluation or walktrough can be done consulting an expert. Walkthrough can involve both expert and user.

Heuristic evaluation evaluates EVERYTHING (real world correlation, standards, consistent, error avoiding, efficiency, memory...). First you brief the participant what is gonna happen and what is evaluated. Experts can initially show "how it's done".

Analytic: Analyzing the user using secret logging (can be an ethical issue...) and then analyzing it afterwards.

Notes on seminar 2

Chapter 13. Evaluations.

Its important to evaluate your work, both with yourself and with a user, so you get many different viewpoints. This helps to understand the users requirements, which takes time for the designers to find out what exactly these are. Things that limit evaluations are tight schedules, low budgets or limited access to users.

The DECIDE framework is a good one, a checklist.

· Determine the goals

Who wants it and why? Let the goals guide the evaluation.

· Explore the questions

Find the questions relevant to the goals, break them down in further questions. Continually ask why, why, why?

· Choose the evaluation methods

Finding the right method is important, so you don’t choose something that does not fit with the issue at hand, for example doing observations on the natural behavior of something, but in a controlled environment. If it’s not their natural habitat, their behavior will not be natural.

· Identify the practical issues

Its helpful to do a pilot study at first, to see the largest issues. Other questions to ask yourself is: is this the right people to participate, do we have the time or the budget for this, do we have the expertise needed?

· Decide how to deal with the ethical issues

Should the participants be anonym? How do we protect their information? Have they signed a consent form if we are to use their info? Have we been honest with them?

· Evaluate, analyze, interpret, and present the data.

Decide how reliable your data is, if its consistent or makes sense. Is the person you interviewed a reliable source? How valid was your evaluation method, now in hindsight? If it effects the environment, or if the environment effected your evaluation, is it relevant? Are we or any of our participants bias? Is that relevant?

Its common to not follow this strictly linearly, but rather jump back and forth, since reality is rarly this simple.

 Chapter 15 Evaluation: Inspections, analytics, and models

Deal with different kinds of evaluations.

Walkthroughs, a expert help the participant.

Heuristic evaluation: Factors like Visability of system status, how it corrilates to the real world, how much freedom do the user has, how good are the standards, is it consistent, how do we avoid errors, is it efficient to use, are important, and its also important to think about that the users should recognize things, minimalistic design, and give them good help.

You start a Heuristic evaluation with a briefing session so they know what to do, then you do the evaluation, where the expert does it first, then the evaluators do it, then finish with a defreafing season.

Cognitive walkthrough, you simulate the users problem solving in each step.

Pluarstic walktrhought.

Several evaluators take on different roles,

Questions for us: What model should we use, shall we follow the decide framework?

Notes on reading seminar 2 by Suhanyaa

Evaluation is an key part of the design process. While the design evolves, changes and developes throughout the iterations of the process, evaluation enables the team to ensure that the users needs are still met.
The main questions the evaluation process aims to answer are:

• How well does the design satisfy the requirements? 
• Does the design offer an appropriate user experience?

Chapter 13

In chapter 13, the authors present an evaluation framework, which aimes to help planning the evaluation studies. The presented framework DECIDE can be devided in 6 parts. Initially the high-level goals of the evaluation studies must be determined. By that the scope of the studies can be set, which helps to guide the evaluation. Secondly, questions, that should be answered by the evaluation, have to be formed. In the next step an evaluation methods has to be chosen. This depends not only on the questions formed and the context, but also on practical issues. Often a combination of diffrent methods can be chosen. Afterwards one has to identify practical issues, such as issues involving the participants, facilities and equipment needed, schedule and budget constraints or expertise needed to conduct and evaluate the studies. In the fifth step the evaluators have to decide on how to deal with any ethical issues that might arise during the evaluation process. In the final step the evaluation takes place. The design is evaluated and the resultsare analyzed, interpreted and presented. However during this process the evaluators must check, whether the gathered data is consistent, valid, whether it has ecological validity, whether the results are distorted and therefore biases occure and whether those are within the scope of the study. 

Chapter 15

In chapter 15 diffrent types of evaluation methods are presented. Methods presented are heuristic evaluations and diffrent types of walkthroughs as well as analytics. Both heuristic evaluation and walktroughs do not require the presence of the user, but can be conducted by experts. In analytics, however, the user interaction is secretely logged and analysed afterwards.  

Reading Seminar 2

Chapter 13 explains the key concepts of evaluation and how important it is for the design process. It brings up different types of evaluation methods including controlled settings involving users, natural settings involving users and any setting not involving users. There are pros and cons for each type and deciding which one to use depends on what you want to evaluate. Often combining two or more is the best way to go if you want to get a broad understanding of how the design process is going. Doing evaluation in the early stages of the design process where you are involving the users does seem to be a important point the book wants to make.

Chapter 13 also discusses how you need to be aware of the potential of misinterpreting the data once it is collected. This involves the reliability, validity and the possibility of biases towards the data or evaluation method. Making sure the data you collected is valid is obviously very important for the evaluation but still something that may be overlooked sometimes. Triangulating the data is a good method to make sure the data is valid and thus improving the evaluation process.

Chapter 15 discusses evaluation methods without  involving the users. One method is called Inspections where one form of it is called Heuristic evaluation where a expert conducts an evaluation guided by a set of usability principles called heuristics. The expert is meant to go through the interface to search for any interaction element that would not uphold the usability principles, fix them and do several more iterations.

Evaluation is a crucial part of the design process because it tells you if you are going in the right direction, if you have to adjust something before moving forward or simply start over again. How to conduct the evaluation is entirely dependent upon the specific project. Obviously it would be great to have 100 experts evaluating every step, but it would not be financially feasible. Evaluating with the help of users is most likely cheaper but then the data might have to be more analyzed. Finding the right balance is what appears to be the designers most important job.

Seminar 2

Seminar 2 MDI

Both chapters discussed different ways of gathering data about the users to improve ones interaction-product idea. Some methods didn’t include any data from the user.

Chapter 13, the complete proccess for planning and gather information about possible users, primarily with the DECIDE-framework. First, on has to determine the goals och the datagathering. It’s up to the developer to choose which methods to use, but he/she should have in mind that it influences the resultiong analysing. Secondly, the developer should think about is if the datagathering-method will give answers to what is questioned. The third step is to actually choose the method. The fourth is too critically analyse the result and see if it’s reliable. Fifth step is to discuss whether the proccess has been ethical. Finally you interpretate the data and do the final analysis. It’s important to know that you might have to go back and change different stages of the proccess and that other steps might be affected by this change. There are also different terms used to evaluate the different results, these are reliability, validity, ecological validity, biases and scope.

Chapter 15 was about methods do analyse interaction without involving any user. This could be used by pretending to be a user and structurally go through the technical device with a heuristic protocol as help. The protocol has several parts in which usability is deivided into. Therefore you can check which of these that the product satisfies.

Another method is to meassure very small subtasks, such as moving the cursor of the computer. Every small subtask is simplyfied to improve the experience doing the main task. There are also some formulas used to predict whether a task is easy to do, two examples of these are GOMS and KLM.

Seminar 2 notes (Fredrik Schmied)

Chapter 13:

Evaluation is about how well a projects requirements are met by the design.

The DECIDE framework is a proposed framework to structure planning for evaluation.

DECIDE framework checklist:

1. Determine the goals

• What are the goals of the evaluation? Who wants it and why? Goals guide the evaluation by helping to determine the goals.

2. Explore the questions

• Taking the goals of the evaluation in consideration, formulate related questions to explore a possible issue.

3. Choose the evaluation method

• Depending on what suits the situation best, choose a method of evaluation. Triangulation through multiple methods is sometimes the best solution.

4. Identify the practical issues

• Choose the participants appropriately
• Make sure the facilities and equipment used is suitable for the evaluation study
• Consider schedule and budget
• Make sure the evaluation team has the expertise necessary to complete a proper evaluation

5. Decide how to deal with the ethical issues

• When dealing with people for an evaluation these following points help ensure it is done ethically:
• Tell people the goals of the study and what to expect if they agree to participate
• Be sure to clarify that anonymity is to be upheld.
• Give participants the liberty to stop the evaluation whenever
• Ask for permission in advance to quote participants.

6. Evaluate, analyze, interpret, and present the data

• Ask yourself the following:
• Reliability: Will others using the same method get similar results?
• Validity: Is the method measuring what is intended?
• Ecological validity: Does the location change how the participants react and behave?
• Biases: Are the evaluators being as objective as possible?
• Scope: How much can the findings of the study be generalized?

This list is not meant necessarily be followed in the order presented, rather be iterated upon since decisions about some items might impact others.

Chapter 15

This chapter is about methods that are based on understanding users through knowledge codified in heuristics, remotely gathered data, or models that predict users’ performance.

Heuristic Evaluation is a usability inspection method for user-interface elements that was developed by Nielsen and his colleagues. They came up with a set of principles that should guide design projects in a usability perspective. These principles include: Visibility of system status, Match between system and the real world, User control and freedom, Consistency an Standards, Error prevention, Recognition rather than recall, Flexibility and efficiency of use, Aesthetic and minimalist design, Help users recognise, diagnose, and recover from errors, Help and documentation.

These principles are pretty self-explanatory and sometimes even intuitive yet crucial to ask yourself throughout the design process to catch potential flaws.

Alternative approach to heuristic evaluation is Walkthroughs.

Cognitive Walkthroughs - Involves simulating a user’s problem-solving process at each step in the human-computer dialog.

Pluralistic Walkthroughs - A sort of roleplay where evaluators take the role of a typical user.

The GOMS model (goals, operators, methods, selection rules) - An attempt to model the knowledge and cognitive processes involved when users interact with systems.

The Keystroke Level Model - Provides numerical predictions of user performance. A task can be compared in terms of the time it takes to perform them.