Professional Documents
Culture Documents
FiaStenmark PDF
FiaStenmark PDF
FiaStenmark PDF
Umeå University
Department of Computing Science
SE-901 87 UMEÅ
SWEDEN
Abstract
This master thesis report describes the design process and the result of a new user
interface to an existing application prototype. The existing prototype is a position
aware instant messaging application for mobile phones. The aim of the new design is
to make the user interface suitable for touch screens. A scientific background to the
design work is given through a literature study of touch screen interfaces. The interface
suggestion is evaluated and re-designed according to feedback. The resulting interface
suggestion is shown.
ii
Contents
1 Introduction 1
1.1 About the author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Company . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.3 Report outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2 Problem Description 3
2.1 Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 Product goals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.3 Educational goals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
iii
iv CONTENTS
5 Methods 21
5.1 Identify needs and establish requirements . . . . . . . . . . . . . . . . . 21
5.2 (Re)Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
5.3 Build interactive version . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
5.4 Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
6 Accomplishment 25
6.1 Target group and brainstorming . . . . . . . . . . . . . . . . . . . . . . 25
6.2 Design of conceptual models . . . . . . . . . . . . . . . . . . . . . . . . . 25
6.2.1 The cube . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
6.2.2 The flip chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
6.2.3 Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
6.2.4 The tree . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
6.2.5 Drag and drop . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
6.2.6 Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
6.3 Designing graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
6.4 Evaluation and redesign . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
7 Results 33
7.1 Functionality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
7.1.1 Instant messaging functionality . . . . . . . . . . . . . . . . . . . 33
7.1.2 Positioning/map . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
7.1.3 Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
7.2 Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
8 Conclusions/discussion 45
8.1 Future work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
9 Acknowledgements 47
References 49
A Design choices 51
CONTENTS v
B Brainstorming 53
B.1 Brainstorm summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
B.1.1 Things to show on a map . . . . . . . . . . . . . . . . . . . . . . 53
B.1.2 Map and instant messaging . . . . . . . . . . . . . . . . . . . . . 54
B.1.3 Privacy issues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
B.1.4 Visualisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
C Evaluation 57
C.1 person1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
C.2 person2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
C.3 person3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
C.4 person4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
C.5 person5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
C.6 person6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
C.7 person7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
C.8 Things to change after evaluation on lo-fi prototype . . . . . . . . . . . 61
vi CONTENTS
Chapter 1
Introduction
This report describes a master thesis work that is carried out to complete a Master
of science in Interaction technology and design at Umeå University. The master thesis
work is made at the company Apptoo AB situated in Umeå that develops software for
handheld devices.
1.2 Company
Apptoo has specialised on developing software where positioning is a main function.
Today the company mostly develops software for other companies. On the side it tries
to develop its own application where the main idea is to be able to see different kinds of
information on a map, especially where your friends are and to contact them through
this application. Apptoo already has a working prototype of the application, but the
prototype is made for a Smartphone without touch screen. Now Apptoo wants a new
user interface adapted to handheld devices with touch screen.
1
2 Chapter 1. Introduction
process of designing a new user interface will be described and the finishing result will
be shown and discussed. There are still things to be done before the user interface can
be used as a product and some of these issues are reported in the end.
Chapter 2
Problem Description
In this chapter the problem will be described and background information will be pro-
vided. The main goals of the project and the methods used in the process will be
described.
2.1 Background
The company Apptoo AB (Apptoo) works with software for different platforms and
are specialized on applications for handheld devices. Apptoo have developed a concept
where they have an application that shows maps and positions provided via GPS (Global
Positioning System). On these maps they can show different kinds of information like
where buses are, location based news and where your friends on your IM (Instant Mes-
saging) list are. Since there are a lot of different platforms on the mobile market today
and there is a high cost to port an application between the platforms, Apptoo wants
to have a user interface that is built for cross-platform usage. There are mainly two
techniques that can be used to build cross-platform applications for handheld devices,
Java ME and Flash Lite. The problem is that it is not always possible to access the
functions in the device (like the GPS) via these languages. In an earlier master thesis,
two students made a prototype where they succeeded in making a proxy between the de-
vice and Flash Lite so that Flash Lite could access all information that was needed from
the device [1]. They also made a prototype of an IM-application that showed positions
of the people in the contact list. The result of their master thesis was shown on a mobile
convention in Barcelona 2008. Apptoo saw that most of the other companies had less
functionality, but more graphics in what they presented on the convention. Based on
that knowledge they wanted to develop the user interface, this time for touch screens.
3
4 Chapter 2. Problem Description
prototype. Since Apptoo had a proxy that worked fine with Flash Lite they also wanted
the prototype to be made in Flash Lite.
3.1 Hardware
There exist different techniques for making touch screens, but it is hard to find informa-
tion about which device that use which technique. However, by looking at the different
techniques advantages and drawbacks you can make an informed guess about which
technique is used. The technologies that exist are resistive touch screens, capacitive
touch screens, surface acoustic wave touch screens and infrared touch screens.
5
6 Chapter 3. Touch screen interfaces in handheld devices
Separators
Resistive
layer
Conductive
layer
Glass
panel
from reaching the receiver a touch event is registered, see figure 3.4. One disadvantage
with this technique is that the touch even can be triggered before the screen is touched.
But the positive side is that the lifetime of the screen does not depend on the touch
technique since it is not integrated into the screen. [2]
Transducer Reflectors
Sound waves
Figure 3.3: Illustration of how a surface acoustic wave touch screen works.
can use it as a cell phone. The Smartphone can have a touch screen as a complement.
A pocketPC can be either a Smartphone or a PDA.
3.3 Software
Every Smartphone, PDA, pocketPC and feature phone runs an OS (operating system).
The feature phones runs OSes that does not let anyone develop software for the phones
that uses anything more than a very restricted number of functions in the cell phone.
PocketPCs runs, as mentioned earlier, the Microsoft Windows Mobile OS that is a
miniature version of the Microsoft Windows desktop OS. Other PDAs and Smartphones
run other OSes that are highly developed. Examples of OSes are Windows Mobile,
Symbian OS, Garnet OS and OSX. The OSes on PDAs and Smartphones make it possible
for software developers to develop programs exploiting more of the functionality of the
device. To develop programs you can use different programming languages depending
on the OS. To access the device functionality you often need to use some variety of the
C or C++ programming languages.
3.4. Limitations in devices 9
= transmitter
= receiver
mobile, but the mobility is a problem because you can never know in what context the
device and the applications on the device will be used. Handheld devices can be used
when travelling and then the network connections can change depending on where the
user is. The context will also change, as a designer you never know if the user will be
in a light or dark environment, if it is quiet or loud, private or business, whether the
user has his/her attention on the application or if the user focuses his/her attention on
something else. [3]
3.5.2 Multi touch, drag, flick, sweep, long press and double press
Multi touch is when you concurrently can touch the screen in more than one place and all
the touches are registered. Multi touch is contrasted to singletouch which is when only
one touch can be registered. To use multi touch in an application both the hardware
and the OS needs to support it. Since most of the devices on the market today do not
support multi touch, this report will concentrate on single touch interaction.
It is hard to design a user interface for a little more complex application if you
can only use press or not press. To solve this problem different kinds of combinations
between touching and not touching have been used.
Drag, sweep and flick are essentially the same thing but give different effects in the
interface. In all these interaction techniques you put your finger to the screen and move
it around, still touching the screen. Drag means that you put your finger on an object
on the screen and moves it to another spot on the screen. This is for example used
to relocate icons on a desktop. Flick is pretty much the same as drag, but in flick the
object you move around has a virtual mass and the virtual surrounding has a virtual
friction so when you let go of the object it continues in the same direction for a distance
3.5. Interaction techniques 11
depending on the speed you gave it. This is used in some systems to browse through
long lists. Sweep is a movement that does not move around any object, it is just a
sweeping movement over the screen. This can be used to change the current view in a
system.
Long press is when you touch the screen at the same point for a few seconds. This
is used in the windows mobile OS to access contextual menus. Double press is when
you make two short touches within a small time interval. This is for example used to
make selections. Double press is often used in combination with a single short press
that marks an object and then the doublepress is used to select the object.
Electronic ink
If a user writes with a stylus on the screen and the writing is saved just the way it was
done it is called electronic ink, see figure 3.5. In this way the user can write or draw
pictures or make combinations between the two and save or send it. The good thing
is that the text is saved the way it is written, a signature is a signature and there will
be no interpretation errors. The downside is that electronic ink takes a lot of memory
to store and it takes a lot of bandwidth to send it to someone else. The quality of the
writing also depends on screen resolution and writing skills of the user. [6]
Handwriting recognition
Handwriting recognition uses the same input-method as electronic ink, but the letters are
interpreted and translated from the electronic ink into digital representations of letters,
see figure 3.6. This is a good approach since it does not demand as much memory and
bandwidth as electronic ink, but the translation from the writing on the screen to the
digital letters is complex and before the user has learnt how to write so that the system
understand there will be many errors. [6]
Soft QWERTY
QWERTY keyboards are the keyboards that have the traditional layout for the English
language. It is named after the first six characters on the keyboard layout. If there is no
hardware keyboard but a touch screen a software keyboard can be shown on the screen
and the user can write on it with a stylus or maybe with a finger, depending on the size
of the keys. The good thing with this approach is that no interpretation needs to be
done because the letters are already digital. But to fit on the screen the keys are often
small and it can be hard to press the right button. In figure 3.7 an illustration of a soft
QWERTY is shown. [6]
12 Chapter 3. Touch screen interfaces in handheld devices
Soft numpad
On feature phones the numpad is used for text input. The numpad have fewer keys
than a QWERTY keyboard. If the numpad is used as a software numpad the keys can
be made bigger than the keys on software QWERTY keyboard. This is good if the user
wants to use a finger as an input device. Unfortunately the numpad needs either some
algorithm that helps the user write words like T9 or the user needs to tap many times
for each letter. In figure 3.8 an illustration of a soft numpad is shown. [6]
ab
and make the list items twice as thick and lay them two in a row. For a visualisation
of this, see figure 3.9. As mentioned earlier the buttons needs to have different sizes
depending on whether the user should be able to use it with a finger or if it needs to
have a stylus.
Q W E R T Y U I O P
A S D F G H J K L
Z X C V B N M
.?123 Return
right direction, but the user can still not feel the buttons. The visual feedback is also a
problem since if the application is used with a finger the finger and hand will cover much
of the screen, and especially the part of the screen that is manipulated. Even though
there are disadvantages with the touch screens, the fact that the user can use direct
manipulation gives the interface designer a freedom to think outside the traditional user
interfaces in handheld devices and I think that this will produce many exciting and cre-
ative interface solutions in the near future. Some are already here, like HTC diamond´s
TouchFlow, Apple´s iPhone and SonyEricsson´s Xperia.
– Visibility. Visibility is needed for the user to know what can be done.
– Feedback. Feedback is needed for the user to know what have been done.
– Consistency. Consistency is good because then the user only have to figure out
how one thing is done and then do the same thing again.
3.7. Design principles 15
1 2 3
ABC DEF
4 5 6
GHI JKL MNO
7 8 9
PQRS TUV XYZ
#
*a/A 0+
space
– Affordance. Affordance is what signals the object sends out, for example, that
a handle of a cup says “hold here”. [8]
A B
Figure 3.9: A is a list that is easily navigated with up and down buttons. The list items
are thin and hard to hit with a finger. B is a list that is adopted to touch screens. The
list has as many items and fills the same space but they are easier to hit with a finger.
These are good principles and of much help when designing user interfaces. It is however
important to remember that it is not just the functionality itself that is important. How
the interface looks and feels is also very important. Donald Norman has also written the
book Emotional design, why we love (or hate) everyday things. In this book he points
out how important it is that a product looks and feels good [9]. And that is something
to remember when designing user interfaces. Even if all the design principles is followed,
it is not certain that the interface will be liked by the users, and even if the interface
breaks some rules it can still be liked.
Chapter 4
As mentioned in chapter 3.6, some interesting interfaces for handheld devices with touch
screen exist on the market. In this chapter three of them will be described more closely,
iPhone from Apple, Touch Diamond from HTC and Xperia from SonyEricsson.
17
18 Chapter 4. Related interfaces on market today
shrinks and moves to the side and the new item grows and are placed in the middle.
The animations does not feels intrusive and are quick enough to not be frustrating.
The start menu has a black background and coloured icons. The icons have rounded
corners and a white text beneath each. When the background is not black, it is light
grey with a horizontal gradient. A light blue colour is also often used. The graphics
feels professional but soft with the black, grey, blue and rounded corners. The iPhone
have managed to maintain the same graphics throughout the entire interface.
The information provided here is taken from SonyEricsson’s own demonstation video
[10].
4.4 Learnings
When looking at these three mobile phones it is easy to see that the iPhone is the most
consistent one, and at the same time the easiest to use. The hardware and the software
are developed at the same time by the same company. The root to the problems in the
other two mobile phone’s is that the user interface is not consistent and not specially
developed for the hardware. They both use windows mobile as operating system which
is a very general operating system and therefore almost never fits perfectly to the current
situation. To make a good user interface, the context needs to be considered such as
hardware, other software, operating system, who the user is and other things.
20 Chapter 4. Related interfaces on market today
Chapter 5
Methods
Preece, Rogers and Sharp write in the book Interaction design, beyond human-computer
interaction about different design processes that can be used when developing user
centred software. The different design processes contain the same steps but in different
order and/or more or less time. The different steps are identifying needs and establish
requirements, design or redesign, prototyping and evaluation.
One of the most generic design processes Preece et al present is visualised in figure
5.1. There you can see the four steps and how you can move between them. This design
process is an iterative process where you revisit the different steps as many times you
need and can to reach a good enough result. [5]
Identifying needs/
establish requirements
(Re)Design Evaluate
21
22 Chapter 5. Methods
The data gathering can be done in different ways, which way you should choose
depends on what kind of data you want and how much resources you have. Question-
naires, interviews, focus groups and workshops, naturalistic observation and studying
documentation are some of the techniques used.
Questionnaires are a good choice if you want answers to specific questions but you
need to be careful when you design the questionnaire otherwise you will not get accurate
results. Interviews are good for exploring issues, but it is a time consuming technique
and it is important that the interviewees are comfortable with the situation. You also
need to know that the interviewer can have a big influence on the result. Focus groups
and workshops are good if you want to collect multiple viewpoints but as the leader
of workshops you need to make sure that everyone can communicate their opinion and
that the workshop is not taken over by one or two dominant participants. Naturalistic
observation is good if you want to understand the context of the user activity. This
approach is very time consuming and huge amount of data is produced. Studying
documentation is good if you want to learn about procedures, regulations and standards.
You need to be aware that there is a discrepancy between the written procedures and
how the work is done in the real world.
When the data is gathered you need to analyse it to be able to identify the needs
and establish requirements. To do this some different techniques are available for use.
You can draw data-flow diagrams, state charts, work-flow charts or other charts or
diagrams. Instead of drawing diagrams you can use other kinds of task description
such as scenarios or use cases. Another approach is task analysis that is primary used
to analyse existing systems. The descriptions, charts and diagrams can then help you
understand the situation and by analysing the situations you can identify needs and
establish requirements. It is a good idea to prioritise the requirements so that the
system designer knows what is most important and what is less important.
5.2 (Re)Design
In the (re)design phase you want to design a system that meets as many requirements
as possible. To visualise the design it is appropriate to do prototypes. A prototype is
a simplified system that aims to show others the idea. A prototype can be anything
from simple images on paper to a software programme that runs with a few bugs. What
kind of prototype that is suitable to use depends on where in the design process you
are. In the beginning it is suitable to have a lo-fi (low fidelity) prototype such as a
paper prototype and when the process goes on the prototypes should go more and more
towards a hi-fi (high fidelity) prototype such as a working software prototype.
When designing there are lots of things to consider and a lot of conflicts to take
into consideration. When designing for mobile phones for example you need to take
the small screen and the limited input abilities into consideration when deciding how
much information should be showed and how it should be shown to still be readable and
interactable.
Designing a software system is a complex task since there are many parameters to
take into consideration and there probably do not exists an optimal design, and even if
there existed an optimal design for one system, it would not work on another system.
To make the decisions easier you can look at different usability and design principles and
try to apply them. Some usability principles are given in section 3.7, design principles.
5.3. Build interactive version 23
5.4 Evaluation
Before moving on with a design suggestion you need to evaluate it to see if it meets
the needs and requirements. There exist different evaluation paradigms in the human-
computer-interaction field. Field studies, usability testing, predictive and quick and
dirty are four of them. In field studies the users are studied in their natural context
and this approach is normally used in the beginning of the design process to find out
the needs of the user. Usability testing is performed in a laboratory environment and a
prototype is used while the evaluator gives the user a task to perform on the prototype.
Predictive evaluation is performed with expert evaluators and no users are involved.
These three approaches is very time consuming if they are carried out accurately. The
quick and dirty approach is exactly what the name implies, any of the other approaches
is used but in a much faster and in a less accurately way. In a smaller project with
limited time and money, where you still want to evaluate the result, quick and dirty is
the way to go.
24 Chapter 5. Methods
Chapter 6
Accomplishment
The work done during the master thesis has followed the design process described in
chapter 4, methods. The first accomplishment during the master thesis was a study on
what existed on the mobile market today, especially in the area of touch screen interfaces.
The result from this part of the thesis is shown in chapter 3, touch screen interfaces in
handheld devices on the market today. During the first weeks the different alternatives
for implementing the user interface were examined and the decision to implement the
user interface in Flash to run on a HTC Touch was made. A resume of how the work
was carried out and what was accomplished is presented in this chapter.
25
26 Chapter 6. Accomplishment
interface metaphors. One example of such metaphor is the desktop in computers. The
desktop corresponds to the physical desk and you can use a trashcan, put documents
on the desktop and have folders that you put documents in both in the physical world
and in the virtual world. Since people know what can be done with these things in the
real world, it is easy for the user to understand how the corresponding things should be
used in the virtual world.
The suggestions from the brainstorming session and inspiration from other appli-
cations was the starting point for designing conceptual models. The models were just
very rough suggestion for how to interact with the application and five suggestions are
described closer here.
6.2.3 Buttons
The third suggestion was to make a traditional user interface that uses buttons to
navigate between different views. A suggestion for how this could be visualised is shown
in figure 6.3. The good thing with this approach is that everyone that has ever used a
software interface will recognise how to navigate, but on the other hand it will not be a
memorable user interface.
buttons into leafs and make them grow dynamically depending on how often they were
used in the interface. If one leaf was used all the time it would grow and the other would
shrink. How this suggestion could be visualised is shown in figure 6.4. The positive thing
about this suggestion was that it is very dynamic, more leaves could be added at any
time and it would be different from the other interfaces existing in mobile applications
today. The negative sides are probably the same things, it is hard for the user to learn
the interface if it constantly changes and it is harder to make a mental model if it does
not work like anything else the user already have used.
The negative is that it is hard to expand the application with further functionality.
6.2.6 Evaluation
Since the process could not go on with all the suggestions, a few persons were asked
about which suggestions they would like to use in this kind of application. All persons
thought that the cube and the flip chat would be unpractical to use and that the other
three suggestions were better. The drag and drop suggestion, the tree suggestions and
the buttons suggestion were the suggestions that continued in the design process.
so, how? Should transparency be used? If so, how? Other user interfaces on PDAs
seemed to use dark colours and primary black, grey and dark blue. They also used a lot
of gradients to create a feeling of depth in the interface. Black, grey and dark blue are
colours that give a professional and serious impression. Instead of choosing the same
colour scheme as the other PDA application interfaces the Apptoo logotype was chosen
as the role model. The colours were taken from the logotype as well as the shapes.
Gradients were used since they were used in the Apptoo logotype. When the graphics
were tested in the PDA provided for the master thesis the gradients became granulate
on the screen. The graphics was reworked without any gradients.
The pictures were shown and explained to six students at the education Interaction
technology and design and to two persons without technical education. The persons were
showed the pictures and an open interview was held with each of them. They were asked
to talk about what they thought were positive and negative about the suggestions, what
they liked and disliked and if they had any suggestions that could make the interfaces/the
application better. To end with, they were asked to choose which suggestion they liked
most. One person could not decide between two suggestions and therefore voted for
two different suggestions. In the end, all three suggestions got three votes each. A
decision about which interface to use in a software prototype had to be done, and since
no suggestion won in the small vote, the suggestion that felt most fun to implement
was chosen. Consequently, the drag and drop suggestion was implemented as a software
prototype. Before the implementation, the things that had been pointed out as problems
in the evaluation were taken into consideration and corrected.
6.4. Evaluation and redesign 31
Results
The first results of this master thesis are five conceptual model suggestions, the cube,
the flip chart, the button suggestion, the tree and the drag and drop presented in the
previous chapter. Out of these, the tree, the drag and drop and the button suggestions
were further developed. After evaluation the drag and drop suggestion was redesigned
and implemented in a software prototype. In this chapter the final drag and drop
interface suggestion will be described. In figure 7.1 a device held by a hand is shown to
demonstrate the approximate size of the device and its screen.
7.1 Functionality
The main functionality of the application is to combine instant messaging with position-
ing. The application therefore has much of the functionality taken from ordinary desktop
applications for instant messaging and some of the functionality from GPS navigators.
Additionally, the application has some functionality that is specific for the combination
of positioning and instant messaging. The most obvious function is that you can see
your contacts on a map. There are privacy issues with showing a person’s location, and
therefore the functionality is designed in a way that helps the user to take control over
what positioning information is showed about him/her self.
There are three main areas into which the functions can be divided, instant mes-
saging, positioning/map and menu. Since there is only one application and not three
different applications, these areas are of course closely connected. The three areas are
closer described in the following sections.
33
34 Chapter 7. Results
7.1.2 Positioning/map
The idea is to have a map and show different information on the map and to be able to
interact with the information. The information can for example be the positions of the
contacts in the contact list, the closest way to a particular address or information about
good restaurants in the area. The user can choose what information should be shown
and can edit some of the information. Of course the user can zoom in and out on the
map. A figure summarizing the functionality can be seen in figure 7.3.
7.1.3 Menu
In the menu the user should have the tools to change the general things in the interface
such as sound, language, graphical style, chat settings, text input and privacy settings.
In the graphic style the user is able to choose between three different suggestions, the
buttons, the drag and drop and the tree suggestion. Chat settings gives the user the
ability to group contacts, add contacts and remove contacts. The user can choose in
what way he/she wants to make text input. MessageEase is one of the input options an
is an input method developed for handheld devices with touchscreen. A figure of the
functionality can be seen in figure 7.4.
7.2 Interface
Throughout the whole interface the thought is that the user marks an object with a
single tap and choose it with a double tap. The objects are placed with regards to that
most people are right handed and with the aim to let the user manoeuvre the interface
as much as possible with only one hand.
As could be seen in the previous section the application has three different graphic
styles that the user can choose between. Only the drag and drop suggestion is developed
into an interface suggestion, and therefore that is the only one presented here.
The application is called KIT, a short form of Keep-In-Touch. The name and symbols
that shows the status of the application is shown in a status bar on top of the screen.
There you can see if your position is visible for anyone of your contacts, how much
reception the phone has, the mane of the application, how much power that is left in
the battery and if there are any unread messages. Except for the status bar there are
three tabs visible on the screen, MAP, TALK and MENU. For a visualisation, see figure
7.5.
If the MAP tab is dragged from the right to the left side of the screen, a map with
four icons is shown. The plus and minus icons are for zooming on the map, the pin is
for using way finder and the i-symbol is for administrating what information should be
shown on the map. An image of this is shown in figure 7.6.
If the MENU tab is dragged out from its place on the left side to the right side the
different menu options becomes visible. Figure 7.7 shows how this looks.
If the TALK tab is dragged from its plce in the bottom of the screen to the top of
the screen a list of contacts becomes visible. Here you can tap on a contact and start
communicating with him/her via instant messaging, SMS or telephone call. To see an
image of the active TALK tab and the contact list, see figure 7.8.
If both the MAP and the TALK tabs are active at the same time the contacts that
reveal their position will be shown on the map. From this view the user can tap on
a contact on the map and start communicate. The conversation will be shown on the
7.2. Interface 35
map, but even if the blue tab is inactivated, the conversation will still continue without
the map. To see an example of how it can look with both TALK and MAP active, see
figure 7.9.
The software prototype of this interface shows how parts of the interface should look
and feel. The three tabs can be dragged in and out and the TALK and MAP tabs can
be combined. All of the contacts are static and have static data. To navigate through
the prototype you need to know which buttons to tap and in which order. The interface
can be run on a HTC Touch.
36 Chapter 7. Results
Figure 7.2: The functionality of the instant messaging part of the application.
Figure 7.5: The KIT interface when all tabs are closed.
40 Chapter 7. Results
Figure 7.9: Image of the MAP and TALK tabs active. Contacts can be shown on the
map.
44 Chapter 7. Results
Chapter 8
Conclusions/discussion
The goals that were set in the beginning of the master thesis about developing a new
user interface to an existing application, to create a software prototype in Flash Lite
that can run on a HTC Touch, to learn graphics and animation programs and apply
my knowledge from my education on a real project are all reached. I ran into some
problems and therefore the prototype is not as extended as planned.
When I was looking for information about which version of Flash that could be used
with touch screens I realised how much harder it can be to find out that something does
not work than to find that something does work. To find out that something does not
work means that you have to examine every possible solution, to find out that something
do work you only need to find one working solution.
The user interface suggestion did not turn out as I had expected, the fact that I could
not use gradients as a part of the graphics made the interface not as modern looking as
I had hoped in the beginning.
When the implementation of the software prototype was about to start my plan
was to make much of the prototype from code and not use the timeline in the Flash
animation programme for more than just a few lines of code. This approach would
have made the prototype easier to build on in the future. However, since I had little
experience about actionscript, the programming language used in Flash, it was hard to
find a system design that worked. When I had tried to do that for a while, I realised
that I did not have time to do it that strictly and a prototype built on code in the
timeline was the solution.
When I started to implement the prototype I realised how many design decisions
there is to be made in every little button in the interface. Even if I had decided on the
big things and how main-screens should look, there were still buttons and small choices
in menus to make decisions about. A list of some of the design decisions made can be
found in the appendix A.
45
46 Chapter 8. Conclusions/discussion
As the interface looks today it is the colours of the Apptoo logotype that dominates
the interface. To make it easier to sell it to other companies they need to be able to
brand it. More discrete colours would make branding easier.
Chapter 9
Acknowledgements
This master thesis would not have been done without the cooperation with Apptoo AB.
They have given me insight in how it is to work in a small software company. They also
provided two different supervisors, Hugo Börjesson and Martin Kurtsson, which I would
like to thank for their input and support. I would also like to thank my supervisor at
the university, Håkan Gulliksson, both for being my supervisor during this master thesis
and for his commitment in creating and constantly developing the program interaction
technology and design. I appreciate all the help and encouragement I have received from
my family and friends. And last but not least, thank you to all that helped me with
brainstorming and evaluation during the design process.
47
48 Chapter 9. Acknowledgements
References
[1] Jakop Berg and Martin Kurtsson. A position aware mobile instant messaging client.
2008.
[2] Densitron Corporation. Introduction to touch solutions. 2007.
[3] Mark Dunlop and Stephen Brewster. The challange of mobile devices for human
computer interaction. Personal and Ubiquitous Computing, 6:235–236, 2002.
[4] Apple inc. http://www.apple.com/se/iphone/guidedtour/, 2008-10-19.
[5] Helen Sharp Jennifer Preece, Yvonne Rogers. Interaction Design Beyond Human-
Computer Interaction. John Wiley Sons, Inc., John Wiley Sons, Inc., 605 Third
Avenue, New York, NY 10158-0012, 2002.
[6] I. Scott MacKenzie and M. William Soukoreff. Text entry for mobile computing:
Models and methods, theory and practice. HUMAN-COMPUTER INTERAC-
TION, 17:147–198, 2002.
[7] inc. Mass Multmedia. http://www.touchscreens.com/intro-touchtypes-saw.html,
2008-10-19.
[8] Donald A. Norman. The Design of Everyday Things. The MIT Press, London,
England, 1998.
[9] Donald A. Norman. Emotional Design. Basic Books, Basic Books, 387 Park Avenue
South, New York, NY 10016-8810, 2004.
[10] SonyEricsson. http://www.sonyericsson.com/x1/index.aspx?en-gb/product, 2008-
10-19.
49
50 REFERENCES
Appendix A
Design choices
As mentioned in the report, there are a lot of design choices to make. Designing a user
interface is a complex task since there are many parameters to take into account and
you do not even know if there exists an optimal solution.
During the work, small design decisions have been taken all the time. Decisions like
where to place a button, what colour it should have, what size is appropriate etcetera.
However, these small decisions are based on some bigger decisions like what colour the
interface should have, what interaction model should be used and if it needs to be used
without a stylus. Some of the design choices are described here.
One of the first design decisions that were taken was that the application should be
usable without a stylus as much as possible. I had used the SonyEricsson P1 smartphone
and did not like that it was almost impossible to use it without a stylus. I thought that
a chat application is something you want to use for a short while, put it away for a
moment, use it again a while and so on and that you do not want to find a stylus every
time you use the application.
Since the decision about finger interaction was taken, text input was a problem. To
use a software qwerty keyboard on the screen provided for the master thesis was almost
impossible without a stylus. Handwriting recognition and electronic ink is also based
on stylus interaction. I found a text input method called MessageEase on the Internet
that was developed to overcome my problem. Since it will be a new input method for
the user it will take some time to learn it, but I thought it looked practical. No stylus
needed. But, since I know that everyone are different when it comes to text input, I
want the input method to be changeable.
I thought a lot about how to design for both right and left-handed persons. In the
beginning I thought that the interface should be as symmetric as possible so that a left-
handed person would be able to use the application in the same way as a right-handed
person. Later this informal decision was changed because the interaction concept that
was developed was based on asymmetric menus.
Privacy issues are a problem in this kind of applications. I am aware of them, but
are those not interested in technology aware of that other can see where they are? To
make the users aware of when they reveals their position, I added an icon that looks like
a watching eye. The icon is visible as long as the user reveals the current position.
I looked at other interfaces, especially the iPhone, Xperia and HTC Touch to find
out what kind of graphics are popular now. Black, grey and blue were the colours used
together with gradients to create a feeling of a not totally flat interface. I did not want
51
52 Chapter A. Design choices
the dark colours that were used in the other interfaces, and therefore decided to use the
colours in the Apptoo logotype that is colourful and light. I played around and found a
style that I liked and decided to continue with. Unfortunately it did not look good with
the gradients on the screen, so I changed the graphics.
Icons versus text in menus is a tricky question. Text is good in the way that even
the first time you see the interface, you can find what you are looking for. The bad
thing is that text is in a particular language and you need to find the right word in that
language. It is also harder to remember the next time you use the interface. Icons are
multi-lingual and if the icon is good you will know what it means already the first time
you use the interface and also the next time you will recognise it. The bad thing is that
designing an icon is a science in itself. Some icons are used in the interface, but since
icons were not a focus area in the master thesis, I decided to use icons where there exists
some kind of standard and to use text elsewhere.
The master thesis that were made prior to this at Apptoo stated that a status bar
was good to have both because the user should be informed of the system status and
that the user will then recognise the application as a part of the operating system. A
status bar with battery level and signal strength was therefore designed.
One design problem that I did not really solve was what to do in the map-view with
contacts without available positions and with contacts outside the current view. As the
application looks now, persons without position can only be found in the view without
map and persons outside the view are not visible until that part of the map is shown.
Appendix B
Brainstorming
– What functionality can be valuable to have if you have a map in a mobile phone?
– If you at the same time can chat with your friend, what functionality can be
valuable then?
– What privacy issues can you see with this and how to avoid them?
– How can map, instant messagning and other functilonality be visualised? (like
pan, zoom, information)
– Busses
– Free parkings
– Friends
– Paths, shortcuts
– Bicycle path
– Compass
– Geocaching
– Problems in traffic
– Roads
53
54 Chapter B. Brainstorming
– Hotel
– Job openings
– Restaurant menus
– Reminders, for example when you pass foodstore you get shoping list
– Apartments to rent
– Shortest way with bike, bus, train etc and different combinations there of
– Speeding cameras
– Police control
– Meter maid
– Weather report
– Can show with position on map and picture taken how it looks where I am.
B.1.4 Visualisation
– Zoom with + and - buttons
– Zoom with slider
– Pan with touch
– Pan with flick
– Drag finger right to pan right, drag finger left to pan left.
– Relative distances to friends
56 Chapter B. Brainstorming
Appendix C
Evaluation
The person was first showed a slideshow on the PDA of pictures from three interface
suggestions, the button suggestion, the drag and drop suggestion and the tree suggestion.
Then he/she was asked to explain what he/she thought it was and what he/she thought
about it. Then the pictures were looked at closer and he/she was encouraged to point
out if any problems in the interfaces were found. I pointed out the problems I had found
and alternative solutions were discussed. In the end he/she was asked to decide which
interface he/she would like to use.
C.1 person1
– the drag-n-drop suggestion feels easiest to use.
– hard to see what button in the top of screen in chat that is marked.
– Does not show that there are two different squares in the conversation in the chat
screen in the button suggestion.
– treeconcept most beautiful and new but hard to see the whole picture.
57
58 Chapter C. Evaluation
C.2 person2
– the menu best in the tree-suggestion.
– if you use the application outside you need to have more distinct ways to show
active choises.
– the persons and functions should be separatd more in the chat-view in the button-
suggestion.
– can not see that there are two squraes in the chat-view.
– can not see who you are talking to in the chat screen that comes from the map.
– the drag-n-drop is too asymetric. Annoying. lots of space. pixels disappear, can
you afford that?
– miss a direction in the interface. maybe drag all layers from one side.
– does not need the keyboard all the time. Let the user choose when to show it and
you have lots of more space.
– good, cosy start, then leave the theme with the tree.
C.3 person3
– buttons: easiest, drag: asymmetric, tree: most beautiful.
– notice what alternative is active in the button-suggestion, but it would help if the
other was toned out.
– Does not work with the peron choices, need other solution for example drop-down
menu or scrollist.
– picture can be a choise for the user.
– Only first name in a contactlist does not work, need to add last name.
– need some way to mark who is a coworker an who is a personal friend.
– need something that shows that there are people outside the map.
– the color-coding is unclear, would be more clear if the colors appeared in the
contact list as well.
– use the word close instead of exit. Less frightening.
– drag-and-drop happy, refreshing colors.
– would like the structure from buttons but the colors from drag-n-drop.
– funny with th drag-n-drop concept, but messy and would like other kind of tabs
instead.
– need a horizontal scroll for contacts in chat-view.
– does NOT like alternative 1 of menues in drag-n-drop.
– does not like tree concept, except for the concept of the contactlist.
– Buttons won, but with the colors from drag-n-drop.
C.4 person4
– buttons: crowded, drag: best and felt like the map got lots of space, tree not good
because of all the text that runs sideways.
– should make a color differense when a button is activated instead of moving it.
Green is not the best option since forest-areas is green on a map.
– Hard to see who writes what.
– really important to have a picture.
– use a flip instead of scroll in the interface.
– Do not use the word chat when you can call and send sms too. Use talk instead.
– exit not a good word, use close instead.
– liked the menu in button-suggestion.
60 Chapter C. Evaluation
C.5 person5
– The drag-n-drop suggeston was best especially when the functionality was com-
bined.
– When the menu is active, do not show the other options.
– Worth a try to use context bsased menu.
– use text in the ikon for chat
– use branches in the background for the list of people in tree-suggestion to create
a direction in the interface.
– Use a pin with a circle as ikon instead of the globe with the pin.
– the picture in the chat-picture is not nessesary, but if you use a computer you look
more at the picture than the text.
– menu in button-alternative looks and feels good. probably easy to learn the posi-
tions so you dont need to look at the screen all the time.
– in drag-n-drop suggestion, alternative 2 for menu is better.
– Likes the tree-suggeston.
– But the ability too choose user interface winns, would probably use drag-n-drop
most.
C.6 person6
– Liked the appearence of the tree-suggestion
– Liked the background in the drag-n-drop suggestion, but not the color of the tabs
– the alternative with the buttons not speciall at all
– contactlist in treesuggestion better if all leaves are in the same direction.
– tree-menu good if it is a good animation.
– use the word settings instead of menu in tree-suggestion
– Likes the tree-suggestion best
C.7. person7 61
C.7 person7
– Good overview in all suggestions
– the menu is easier than the contactlist to read in the tree suggestion.
– Understands how to use all the three suggestions. To navigate among open con-
verations, use a drop-down-menu.
– the buttons on the top of the chatscreen is too small, you can not choose one of
them without risking to choose wrong.
– it is hard to see the difference between the alterantives to use for contact and the
different conversations.
– The button in the bottom of the screen in the chat-mode in the tree-suggestion
can not be there because of technical restrictions.
– the persons and functions should be separatd more in the chat-view in the button-
suggestion.
– can not see who you are talking to in the chat screen that comes from the map,
add that information.
– does not need the keyboard all the time. Let the user choose when to show it and
you have lots of more space.
62 Chapter C. Evaluation
– Only first name in a contactlist does not work, need to add last name.
– need some way to mark who is a coworker an who is a personal friend.
– need something that shows that there are people outside the map. Maybe by the
circles I found in other interface. relate to our ability to close geometric figures.
– funny with th drag-n-drop concept, but messy and would like other kind of tabs
instead, maybe redesign the tabs. or leave it that way since it belongs to the
apptoo-concept.
– Green is not the best option since forest-areas is green on a map. Needs to be
taken into account.
– Do not use the word chat when you can call and send sms too. Use talk instead.
– use text in the ikon for chat
– Use a pin with a circle as ikon instead of the globe with the pin.