Interface choices, platform, menus and colors.

According to one of the leading statistics companies on the internet, Statista, 60% of the european population owns a smartphone(1). This, in combination with smartphones being mobile and attractive to our target group, we thought it obvious to create a smartphone app that solves the issues highlighted during the data gathering. Since many of the issues we've encountered are related to navigation and users travelling, a smartphone is the best choice based on its size and capability. Navigational issues have previously been solved using smartphones in other apps, and they have proven to be superior to other platforms. The following text describes our process of developing a good user interface design.

The mobile information architecture we have chosen is the Hub & Spoke model (2). Each category in the main menu of our app follows the concept of having a start, a goal and different checkpoints between these two. At each checkpoint, the user is given a choice. This is a very straightforward hierarchy that aims to not overwhelm the user. This is especially important for people who are not used to computer interfaces. Another reason we chose this hierarchy is because of the potentially stressful environment the app will be used in. This idea was bred when reading about the Cognitive Approach theorem, which says that a user is generally more capable of solving one task at a time.

Another point strongly related to the user's environment is the color choices of the design. We use blue & green as background colors for our sub-menu buttons. Using the app in very bright daylight requires darker colors, while more dim environments require brighter colors. We've decided to change the contrast of the colors based on the light-sensor of the smartphone. This perfects the interface visibility in each situation. The idea to change the contrast and depth of color based on the surrounding lighting was bred after reading Murch's Rules(3). The buttons for each sub-menu have different colors. When a user enters these sub-menus, the background color of the header will be the same as the buttons, the goal of this is to increase the user's familiarity with the app, so that navigation wont be dependant on text. After a while, users will navigate only by the different colors. The idea of navigating by use of color was brought to us by Julie A. Jecko & Andrew Sears (The Human Computer Interaction Handbook, p. 133, 2003).

Main Menu

Important factors when using smarpthones to illustrate
our design choices.

Motivated application functions

The main problems highlighted in the semistructured interviews with our target group, first time travellers, were.

* Trouble buying tickets.
* Trouble finding destination.
* Not knowing what to do.

Based on these problems, we created personas, scenarios, pain points & requirements. The design should help users find their destination, it should supply a simple way of purchasing tickets, it should provide multiple languages & it should provide activity suggestions. Some of our own thoughts regarding the requirements involved a small use of bandwidth & preferably being able to function offline. In addition to this, we found it obvious to provide information about restaurants/cafés since spending a day as a tourist tends to induce hunger.

With these requirements and solutions in mind we set out to create the design. We started out the iterative design process with a lot of functions and methods in mind. During the process, we realized that some of these were overambitious and slightly unnecessary. As we developed the design, we progressively focused more and more on the actual issues highlighted in the pain points & requirements. 

The first category in the current design is called "My Tickets". A user will find his purchased tickets in this section. We have placed it at the top, and colored it in a distinctive color, because of its importance to the user. In addition to this, a small orange notification in the top right corner of the button displays how many active tickets a user has. The second category, "Food", displays a number of restaurants/cafés with a short description sorted by their distance to the user, the closest one being at the top. 

The third category, "Amusement", contains fun things to do in Djurgården. When clicking a museum for example, a short bit of information pops up as well as distance and an option to start the GPS. This category was derived from the interviews, people did not know what to do and therefore we added the category. 

The fourth category, "Transport", is highly relevant to the issues interviewees had with finding their way around Djurgården. It provides routing information between and a start & a destination given by the user, and it provides different ways of transportation. You can also buy tickets that are valid on a specific route or during a timelimit. 

The fifth category, "Walks", was also derived from the interviews. It provides guided routes around Djurgården for any bored tourists to enjoy. It is a refreshing alternative to being indoors, and why not enjoy the beauty of Djurgården?

Interface choices, icons and functionality.

The use of icons in graphical user interfaces brings many positive aspects to usability and function. An icon can represent a word or a sentence through metaphoric design (1) . An icon uses less space than words, but still depicts the functionality and purpose of a button. This makes the interface less clustered and more informative, since we're using screen space more efficiently.

The settings icon in our design is represented by a gearwheel. This is a very common symbol related to changing application settings. When a user has entered the settings mode, we have decided to gray out the settings button. This aims to alert the user that s/he can not enter the settings mode, while currently in the settings mode. A subconcept derived from the theory of Anthromorphic Approach called Constraints. In the transport section, we have used the same concept in combination with a bit of color theory to convey the current options a user has. As a user enters the transport section, the options of transportation are grayed out. To be able to pick a way of transportation, the user has to enter a start and a destination. To emphasize this, a red outlining flickers around the start & destination input when a user taps the transportational options without having entered a start & destination. When a user has started a route, a bit of text appears that tells the user how to travel. Which bus to take, where to get off etc. The text is written in a human-like manner, to apply a feeling of trust to the user. This is a subconcept of the Anthromorphic Approach.

Grayed out options when no
start & destination entered. 

Red outline to emphasize a constraint

We have used icons in the transportational section to preinform the user about the type of a certain destination. A quick example of this is when a user starts typing in "Djurgården Ferry" in the destination field, a suggestion accompanied by a ferry-icon, distance & a short description pops up.

Different icons represent the type of destination.

Some of the functionality in the design has been created with the platform in mind. For example, one of the downsides with using a mobile platform is the difficulty encountered when typing. This is relevant when using the search bar, since the user has to type. Because of this, we have designed a search bar that "suggests" relevant key phrases/words as a user starts typing. This aims to minimize the total amount of typing the user has to do.

Suggestions, icons & distance to locations.

When clicking the food section, a scrollable list appears. We have decided to place an oblong icon on the right side of the screen that conveys to the user that the list is scrollable, a common thing seen in many other phone applications. This is a sub concept of the Anthromorphic Approach called Affordances(2), using symbols & icons to convey specific actions the user can take to manipulate the interface. 

Motivated design changes

At the last exercise, we presented our first prototype. Compared to the other prototypes our concrete design was not as visually engaging. The conceptual design was well received. We received feedback regarding the settings button not being highlighted when in the settings menu. The navigational feedback at the bottom of the app was not consistent. Today, we have decided on some changes based on this feedback, these will be summarized below. 

Firstly, we have decided on having the search bar, settings button and navigational footer statically placed. These will never disappear. The current submenu the user is in will be highlighted in the navigational footer, same goes with the settings button. 

Additional changes we've made include changing the content of the search function. A user will now be able to search for addresses, a transport option will appear that opens the map and guides the user towards a chosen destination. The food submenu has been changed. When clicking the button it now displays all of the restaurants and cafés in Djurgården ordered by their distance to the user. We decided on this since there are only 15 restaurants/cafés in Djurgården. We decided to order the amusement sub-menu in a similar fashion. This design choice is supported by the theory of automated learning (Marilyn Mantei, John Mylopoulos), designing user actions that always follow a predetermined pattern to increase learning. 

Changes to the map involve adding static WC-icons that depict public toilets. We've also added a button that appears when a route is started, the button allows the user to cancel the route. 

In the main menu, we've added a "tickets" button. The user will be able to see their purchased tickets there. We chose to place it in the main menu to make it as easy and obvious as possible to access  purchased tickets.  If the ticket is bought online, it will be usable even when the application is offline. 

Summary of think out loud sessions

The different sessions had the following in common:

Pros

• All main problems are considered
• Interesting augmented reality feature
• Different languages

Cons

• Inconsistent design elements
• Learning curve maybe steep (for complete novices)

We will need more iterations of tests and re-designs in order to complete the design. First, we will correct the obvious mistakes visible in mybalsamiq and then we will do the final prototype in a more advanced prototyping tool.

Think aloud Evaluation-War

This think aloud evaluation was conducted by a younger student that isn’t from Stockholm and who hasn’t a great local knowledge of Stockholm especially the area of Djurgården. The user was chosen mainly due to the similarity to a tourist, which are our main target group as well as first time travellers.

I told the user to imagine a scenario where the he is standing at the docks in Slussen and that he wants to travel to Vasa museum by using the ferry.

The user starts this task by thinking on which button he should press, amusement or transport. He seems a bit confused, after the user thought for 10 seconds he presses the transport button, which he then comes to the transportation part where the user then presses the Choice of Transportation button. He then clicks on the Public Transportation without hesitating. On the Public Transportation mockup he tries to click on the Ferry route and nothing happens. He’s seems a bit confused and tries to click on Public Transportation text but the nothing happens. He then looks at me and back to the computer screen and clicks on the Start button. He then gets a map with the price and travel route, he presses the payment button and completed this tasked without any major problems.

I also assigned the user to a second tasked, where the user should choose a city walk tour. The user starts by clicking on the City walk button and then he choose the historical walk and get jammed.  This task moved on without any problems until the user has come to the interface that will transport him from his position to the closest starting point on the map.  He doesn’t know what to do or what the purpose with this map is. I tell him what this map will transport him from his position to the closest starting point on the map, where he can start his city walk from that point. He then nods and tells me that we could do it more understandable so that the user know what to next.

The user also did a walkthrough in our smartphone application and came with pros and cons with our product:

Pros:

• Very simply and understandable interface.
• Understandable icons.
• Great that user can choose between several languages.
• Great the buttons that takes you to a new interface are colorized.
• Great that you can choose between a variety of Taxi Company’s and that there price are compared.

Cons:

• The main menu looks a bit boring with the white background.
• The button text on the main menu can be bold because there are main functions of the app and makes it more readable.
• You can’t zoom in or out on the maps.
• The design of the application can be more sophisticated.