måndag 23 november 2015

Final Prototype

We found the Unity prototype quite time consuming and hard to complete in the short amount of time before our final presentation. So we decided to modify and finalize our user interface in Photoshop for a more clean, sophisticated and more integrated looking design.

The following screen will be located on the ferry:

If the user touch/press the grey "button" the ferry will go via Skeppsholmen before arriving at Djurgården. We also took inconsideration of the feedbacks and evaluations and improved the indications and informations. As seen above we introduced a "Go via" hand icon to further indicate that it's a touchable action, we also changed to route indication to distinguish from current and optional route which is also informed in the information bar down at the bottom.

If Skeppsholmen is touched, the route changes and Skeppsholmen turns green.

Then there are some problems during certain hours of the day, if the boat is marked with A in the time table, there is a certain route to travel.
Boat marked with A:
Skeppsholmen - Slussen route: Travel via Djurgården before arriving at Slussen.
Djurgården - Skeppsholmen route: Travel via Slussen before arriving at Skeppsholmen.

If you are at Djurgården on your way to Skeppsholmen, this is the interface you will face. It is easy to understand, since the text on the top is pretty self-explanatory. The route also changes to green, but with 45% opacity which makes it not as visible as the current destination( Slussen), but still visible enough.

Final evaluation of prototype

To evaluate our prototype we began with presenting the prototype to an usability consultant (an expert in the field of HCI), who performed a heuristic evaluation on spot. We used the feedback we got to improve our user interface in the best way possible. The recieved feedback comments from the expert:
  • No indicator which tell the current route
  • Bad choice of coloring, hard to distinguish
  • Unclear button interaction
  • Easy to understand the purpose
  • Outstanding design
  • Simple solution to a problem

The next evaluation method we used was think-aloud. Here we evaluated our prototype in action by having a non-expert test it to see how the ordinary users could handle our prototype. This is what we got:

  • Nothing that indicates the button
  • Bad choice for the colors on the different routes
  • No text that tells if the boat goes via Skeppsholmen.
  • Hard to distinguish gray and green.

lördag 21 november 2015

RCA for Problems to See Posts Before Cirka September 24

I had some problems to find some of my older posts when following up a comment from the formative feedback.

This ended up as a Root Cause Analysis aka RCA, since I followed up the feedback was that the evaluators missed a transcript that I believed was there. And I did also not find the post, until I learned that Blogger just shows 40 posts on the first page. Then you are supposed to click the link "Äldre Inlägg" slightly hidden at the bottom of the very, very long page.

Indications that at least some people fails to find some posts on this blog.

Root Cause:
The Blogger user interface (main page) puts a strong focus on the most recent posts. Older posts are deferred to secondary pages that are easy to miss.


There is a setting for numbers of posts on first page. I have just changed it to 400 (and later changed it to 400 days, rather than pages). This has not resulted in all posts listed on the page, but the link menu to the right to older posts does indeed cover all of 2015 and all posts appear to be linked from there.

Long Term Solution:

Major changes to the Blog design or evaluate new blog platform. Not relevant in this timeframe.

High Fidelity Prototype using the Unity 3D Game Engine

Video of the Hi-Fi prototype made in the Unity 3D engine.

Below is an interactive Unity3d Prototype. It requires the Unity3D web player plugin and will offer you to an install it if needed. The main difference between the movie above and the interactive prototype is that you are free to click the button for Skeppsholmen whenever you like. Then you may find the less frequent use cases that we decided to not model, following Pareto's principle to concentrate on the few details (popularized as "20% of the work") with most impact and ignoring the massive number of details that remains for perfection.

The only direct user interaction is the button that requests a trip via Skeppsholmen and updates the route and boat animation accordingly.

The following points from the think-alouds and peer/expert-feedback sessions has been implemented:
  •  A separate "button" for adding a stop at Skeppsholmen's warf since the previous solution was too hard to recognize as a button.
  • More distinct colour plotting the route.
  • Distinct marking of the actual chosen route for the ferry.
  • Direction for the ferry.
  • Text changes to (via Skeppsholmen) at button press.
  • Button press gives a distinct response, by update of button text, route on the map and destination text.

The work on this Hi-Fi prototype resulted in further findings by ourselves, and informal feedback collected from friends, peers and family during the process:
  • Even a simple map animation gets complex when a route may be changed by user input at any stage in the animation.
  • When is it too late to request a visit to Skeppsholmen?
  • The alternate route is not visible. It should be visualized and explained properly.
  • It is very hard to draw the line between prototyping and product design when using a tool that is powerful enough to work in a final design.
In retrospect, it maybe was a poor choice to use a production level tool like Unity for prototyping. We did indeed not find any better tool, but the ability of Unity to handle advanced improvement made every suggestion into a decision wether to improve or not. Spend time on improving presentation details or time on higher level holistic design while we still are in an early phase and can make drastic changes?

fredag 20 november 2015

Think-aloud, Group summation

It is clear that our first prototype is confusing for the users. The major problems were that the screen was not well informed to be interactive and the information for another route was missing i form of text. The test users were i different ages and at least one problem was common among them all. The good thing is that the problems are not so many and the test users was not so experienced with traveling on the boat.

Some of the problems:

  • Not so good color choise.
  • Not obvious that you have to/able to press Skeppsholmen on the screen.
  • When you go via Skeppsholmen the text do not change to "via Skeppsholem".
  • The green and grey travel pattern is impossible to understand. Must clarify.

We knew that we needed to improve it in a way so that it is easier to understand. We evaluated the feedback to perfect the prototype for the final presentation.  

torsdag 19 november 2015

Think aloud, Marcus

I did the think aloud on a friend. He is not from Stockholm and have only been on the boat once. At first he didn’t understand the prototype by only looking at it, but after I explained a lite about it he started to understand what he was looking at. I told him to imagine himself on the ferry and that he was going to skeppsholmen from slussen.  It was not clear that the screen was interactive so the grey area was confusing. Both the route and the boat symbol was pretty understandable. He thought that the screen could be a little smaller.

The design is good but not perfect. It is both confusing and unclear that about information and interaction. The interaction button need to be well informed and the route change. The person in the information both could also help to instruct and inform the users. Maybe change the route color since it hard to see.

onsdag 18 november 2015

Think Aloud Martin

To do my think aloud evaluation I asked my mom to try to use our prototype. She said that the idea was good but it was unclear what purpose it had from just looking at it. It needed to be improved so that it would be clear to everyone how it is used. She imagine what it would be if she was a tourist and was trying to use something similar abroad. First of all she didn’t know that one could press on the screen to get the boat to change direction and pass by Skeppsholmen on the way to Djurgården. Our prototype didn’t have any text that showed the function.

One thing that we could improve with our prototype is to add an information box that the user can make the boat pass by Skeppsholmen by pressing on Skeppsholmen on the map. Since the main purpose of the prototype is the interactive part where the user communicates with the captain by clicking on the map, we want this to be clear for everyone. Another thing to improve with the prototype is to make labels for the different routes, which makes it clearer of which the current route is. As of now the prototype does not display the direction that the boat is going in. This could be improved by adding arrows along the route that point in the forward direction. 

onsdag 11 november 2015

Think Aloud for Lo-Fi prototype, Mårten

I interviewed my son, evaluating our lo-fi prototype using the Think Aloud method. He was selected due to similarity to a tourist --  young enough to just have tourist level familiarity with Slussen and Djurgården, while still old enough to travel by himself.

He was assigned the task to go from slussen to Djurgården, but make a short visit on Skeppsholmen on the way. Then look at/interact with the Lo-Fi prototype printed out on paper, imagine it on a wall and describe how he interprets it.

  • Why is it 1 min on one paper and 15 min on the other one?
  • Why is there no wharf on the close side of Skeppsholmen?
  • The green and grey travel pattern is impossible to understand. Must clarify.
  • More optimal if he could take a short trip to the near side of skeppsholmen, do his errand and take a short trip on the other side to Djurgården.
  • Will the boat turn back to slussen directly from Skeppsholmen? Very messy to tell how the boat goes between the three warf's, what order and if it's the same boat or need to wait for the right one.
  • Does the boat wait at the Skeppsholmen warf or should I check the schedule for a later trip? Can I do that at Skeppsholmen?
  • Do I have to wait long for the next boat at Skeppsholmen? Then I migth be better crossing the bridge and go for a bus or tram.
  • No comment about the "button area" of Skeppsholmen. When asked --> Isn't that a forest?
  • Is there a bus to Skansen at the Djurgården warf?
Transcript from the think-aloud session.

söndag 8 november 2015

Think-aloud evaluation, Staffan Sandberg

I did my think-aloud evaluation on my father since he was the best fit for our main persona, he has used the ferry before, but it was a few years ago so he has almost the same mindset as a tourist visiting Stockholm.
I gave him a scenario of him standing at Slussen with the goal of taking the ferry to Skepsholmen. I showed him our prototype and told him to tell me what he was thinking while looking at it, I also told him that the screen was located in the queue while wating for the ferry to arrive. The image he was looking at was the first one in our blog post called "Prototype".

The first thing he said was that the green dot is our current position and the red one is probably the ferry. Then he said that it seems like this ferry will go to Djurgården (green line) so i'll wait for the next one which will go via Skeppsholmen. I told him that the ferry won't go via Skeppsholmen unless you tell the personnel and that it was a touch screen. He then pressed at Skeppsholmen and i switched to the second image in the "Prototype" post. He then said that he was unsure if the ferry would go via Skeppsholmen since the text still said "Djurgården" and not "Djurgården via Skeppsholmen" which is typical on SL-screens. He also pointed out that the green and gray line look quite similar.

This made it clear that we have to improve on a few things:
  • "the red dot is probably the ferry".
  • Not obvious that you have to/able to press Skeppsholmen on the screen.
  • When you go via Skeppsholmen the text do not change to "via Skeppsholem".
  • The green and gray line look quite similar.
I think that think-aloud evaluation is a great method to find where users get stuck and don't know what do do next. Since they always have to say what they think you can later figgure out why they thougt something would work a certain way and improve the design. A drawback is that it's not always easy to say what you think, users may do somethig, can't explain why and just move on.

torsdag 5 november 2015

Think aloud Vincent

For my think aloud evaluation I asked my younger sister to interact with the screen, I told her to imagine herself as a user standing at the wharf at Slussen on her way to Djurgården, but she has to go through Skeppsholmen for a quick errand first. Since our prototype is not functioning as it should as it only shows pictures and animation, not an interactive one, she didn’t grasp it at first. So I told her that this is only a prototype for demonstrational purposes and not a functioning one at all.  She then realized that the grey thing hovering Skeppsholmen were actually a button to change the route, but she told me that the different colored lines were a little misleading since subway lines uses the same method to differentiate between different lines.

I realized that our design is great but is in need of a slight modification, such as a better indicating button of Skeppsholmen, maybe even information telling passengers to click on Skeppsholmen if that’s the desired destination. The colored trajectories should be modified as well as it could confuse commuters, an easy solution is to add a dashed line for the route which is not being used.


Here's a few pictures of our Power Point based prototype, This prototype will be placed both at the stations and ferry.
As seen on the picture above Skeppsholmen has a grey thing hovering over it and the route is also grey. The grey thing is actually a button, if pressed, the button will turn green and the route will then also change.

Placement on the boat.

The position of the screen on the ferry as of now will be placed on both sides(hallways).
The screen on each station on the otherhand should be placed right before you get onboard the ferry. Above is just an example of where it could be placed.

tisdag 3 november 2015

Seminar notes during 2:nd seminar group discussion

What to do if we had unlimited time for evaluation.

Make lo-fi prototype on paper.
Evalutation without users, Walk through with team to do some homework to remove glaring usability problems before talking to real users.

  Perform real-life evaluation. Ride the boat and show lo-fi prototype to potential users asking for feedback.
  Improve lo-fi prototype
until no obvious improvements found

Make heuristic evaluation of the refined lofi prototype and improve if necessary.

Make a first prototype using off the shelf hardware and standard software like Unity or Unreal.

Lab evaluation of extremely advanced graphics. Particle animations, advanced wave animations, bird flocks and other eye candy. Does it make any difference in user perception or is it just worthless bells and whistless?