FiaStenmark PDF

Design of a touch screen
interface for a mobile position

aware instant messaging client
Fia Stenmark
November 14, 2008

Master’s Thesis in Computing Science, 30 ECTS credits
Supervisor at CS-UmU: Håkan Gulliksson
Examiner: Per Lindström
Umeå University
Department of Computing Science
SE-901 87 UMEÅ
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
3 Touch screen interfaces in handheld devices 5

3.1 Hardware . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3.1.1 Resistive touch screen . . . . . . . . . . . . . . . . . . . . . . . . 5
3.1.2 Capacitive touch screen . . . . . . . . . . . . . . . . . . . . . . . 5
3.1.3 Surface acoustic wave touch screen . . . . . . . . . . . . . . . . . 6
3.1.4 Infrared touch screen . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.2 Handheld devices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.3 Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.4 Limitations in devices . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.5 Interaction techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.5.1 Stylus and finger . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.5.2 Multi touch, drag, flick, sweep, long press and double press . . . 10
3.5.3 Text input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.5.4 Icons and buttons . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.6 Interaction benefits and problems . . . . . . . . . . . . . . . . . . . . . . 13
3.7 Design principles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4 Related interfaces on market today 17

4.1 iPhone from Apple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4.1.1 Interaction technique . . . . . . . . . . . . . . . . . . . . . . . . . 17
4.1.2 Graphics and animations . . . . . . . . . . . . . . . . . . . . . . 17
iii
iv CONTENTS
4.2 Touch Diamond from HTC . . . . . . . . . . . . . . . . . . . . . . . . . 18

4.3 Xperia from SonyEricsson . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.4 Learnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
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 Umeå University. The master thesis
work is made at the company Apptoo AB situated in Umeå that develops software for
handheld devices.
1.1 About the author

During my education I have taken courses in human cognition, industrial design, human-
computer-interaction and computer science. The courses in human cognition have given
me an understanding about how the human cognition works and what limitations it
has. The courses in industrial design have given me an understanding about how to
visualise ideas and how to make interfaces send out the signals I want. The design
process is another important thing that has been a focus in these courses. In human-
computer-interaction-courses the knowledge of the human cognition is applied to de-
signing functions and user interfaces in systems and to evaluate the result. Finally, the
courses in computer science have given me the tool of programming that makes me able
to implement systems. During my last year I have focused on user interfaces, mobile
applications and web development.
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.3 Report outline

This report will give a description of the problem to solve during the master thesis work
followed by a review of the touch screen interfaces on the market today. The work
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.
2.2 Product goals

Apptoo had a prototype that worked fine technically, but they wanted a new user in-
terface, this time for a handheld device with a touch screen. To be able to compete on
the market with the application they wanted a user interface that was intuitive, easy
to use and had a good look-and-feel. In other words, a software prototype should be
made of the user interface, but there were no demands on actual functionality in the
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.
2.3 Educational goals

The main goal with this master thesis from an educational perspective was to make a
project on my own, get an insight to how software companies works and to get experience
from the telecom industry. To learn graphic tools such as Illustrator and animation tools
such as Flash was also important aspects of this master thesis. Applying the skills from
the education Interaction technology and design on a real project was also a part of the
goal.
Chapter 3
Touch screen interfaces in

handheld devices
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.
3.1.1 Resistive touch screen

The resistive touch screens consists of one conductive and one resistive layer that are
kept separated by small separators. When the screen is touched the layers get in contact
and that causes changes in the electrical current, see figure3.1. The changes in electrical
current can then be registered as a touch-event. This technique makes it possible for
different objects such as finger, gloved finger or stylus to trigger the touch-events. The
technique also makes the touch screens pressure sensitive, which means that you can
make a difference between a hard and a light touch. The manufacturer also says that
this technique provides high touch resolution. The disadvantage is that these resistive
and conductive layers lies on top of the screen and that makes the screen to have less
clarity and the resistive layers can be damaged by sharp objects. [2]
3.1.2 Capacitive touch screen

Capacitive touch screens have a capacitive layer on top of the screen and when the layer
is touched by a finger, circuits in the corners of the screen can detect the capacitance
changes, see figure 3.2. The advantages of this technique are that it has high touch
resolution and does not limit clarity of the screen, but the disadvantage is that it only
works with a finger or other conductive object. Stylus or gloved finger will not work. A
special-made stylus can be used if it is conductive. [2]
5
6 Chapter 3. Touch screen interfaces in handheld devices
Separators
Resistive
layer
Conductive
layer
Glass
panel
Figure 3.1: Illustration of how a resistive touch screen works.
3.1.3 Surface acoustic wave touch screen

Surface acoustic wave touch screens have transducers and reflectors in the edges that
sends out and register acoustic waves, see figure 3.3. If a soft object touches the screen
the waves is absorbed and the sensors can calculate where the touch is located. The
advantage of using this technique is that no coating is needed on the screen, which
allows this technique to have the highest screen clarity. The technique has a high touch
resolution but it can only register touches from soft objects like a finger or a stylus with
a rubber top. Touching it with a hard object will not absorb the acoustic waves and
therefore no touch event will be registered. [2] [7]
3.1.4 Infrared touch screen

Infrared touch screens have a panel around it where two of the four sides have transmit-
ters that sends out infrared light in a matrix. On the other two sides there are receivers
that receives the infrared light. When a finger or other object stop the infrared light
3.2. Handheld devices 7
Figure 3.2: Illustration of how a capacitive touch screen works.
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]
3.2 Handheld devices

Handheld devices can be many different things with the common attributes that they
are electronic gadgets small enough to be held in one hand. Handheld devices can
be small gaming consoles, devices specially made for car navigation or devices with
cell phone functionality. This report will concentrate on the devices with cell phone
functionality. This group of handheld devices can be divided into subgroups. There are
PDAs (Personal Digital Assistant), Smartphones, pocketPCs and feature phones. It does
not seem to exist a standard on what a Smartphone, PDA and feature phone actually is,
but at least a pocketPC needs to run the Microsoft Windows Mobile operating system.
I would say that a feature phone is the simplest kind of cell phone and has limited
functionality, no touch screen and if you need to input text thit is made through a
numpad. A Smartphone and a PDA are pretty much the same, but a PDA has a
touch screen and does not need to have the cell phone functionality as a main function.
Smartphones provide some kind of miniature qwerty-keyboard and it is obvious that you
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
Figure 3.4: Illustration of how a infra red touch screen works.
3.4 Limitations in devices

There are many limitations and constraints when developing software for the PDAs
and Smartphones, such as screen size and resolution, processing capacity, battery time,
unreliable connections to networks and a changing context.
The screen size and its resolution is something that changes over time, new devices
released into the market all of the time. New devices need to make a compromise
between how small the device should be and how big the screen should be. One of
the biggest screens I know of today in a Smartphone/PDA is the screen on the iPhone
from Apple Inc. The screen is 3.5 inches and has a resolution of 320 * 480 pixels. The
limited screen size is a problem if you are designing a system that needs to show a lot
of information.
The limited processing power is something you need to take into consideration when
designing mobile applications. No one like applications that are too slow, therefore you
need to make sure that the application can be run on the target device without being
sluggish. If there happens to be important things in the application that takes a long
time to process, make sure that you provide feedback to the user.
The battery time is related to screen size and processing power. More screen size
and more processing power take more battery. And, you do not want to put to much
battery into a handheld device since it then would be too big and heavy.
The problem with unreliable network connections is closely linked to the problem
with changing contexts. The whole idea with a handheld device is that it should be
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 Interaction techniques

A PDA or Smartphone is something that you can always take with you. You can use it
to make notes for yourself and to communicate with others. Since it is supposed to be a
part of the owners daily life it is important that the owner can interact with the device
in a satisfying way. When interacting with a touch screen, there are only two things you
can do, touch the screen and not touch the screen. In the following subsections different
ways to solve the problems with the limited interactions techniques are presented and
the problem with text input on touch screens is briefly discussed.
3.5.1 Stylus and finger

There are different approaches for how to design a user interface for PDAs and Smart-
phones with touch screens. Among the first things you need to consider is whether you
want the interface to be manoeuvred with a stylus, a finger or both. The good things
if you decide to design for use of a stylus is that the buttons can be smaller since the
stylus tip is much smaller than a fingertip. Another thing is that the stylus is thinner
than a finger and thus does not cover as much of the screen as a finger does. A finger
on the other hand is something that you always have with you. You cannot forget it at
home and you do not need to make the extra moves to release the stylus from its place
and then put it back. And, you are very used to using your fingers as pointing devices.
If you decide to design for finger interaction it is easier to use that solution with a stylus
than to use a stylus-designed solution with a finger.
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.
3.5.3 Text input

Many applications in PDAs and smartphones are dependent on text input, and if the
device does not provide any keyboard, how should the user write? There are different
solution to this problems with two different main approaches. One is that the user
writes on the screen with a stylus like he or she would have written with a pen on paper.
The other is to provide some kind of software keypad where the user can tap in the
letters like if he or she would have used hardware buttons to make text-input. A brief
description of the techniques electronic ink, handwriting recognition, soft qwerty and
soft numpad will be given.
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]
Figure 3.5: Illustration of electronic ink
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]
3.5.4 Icons and buttons

To navigate through a user interface there needs to be some kind of menu or menues.
A menu needs to give information about what will happen if an option is chosen. This
information can be visualised in text or in images. It is said that a picture says more than
1000 words and that might be true, but it is a whole science in itself to design icons that
sends the right message to the user. The menu option needs to have buttons that are
big enough to press with stylus or finger. Some of the interfaces made for touch screens
(for example windows mobile) seems to have been translated directly from screens not
allowing for touch and thus have inherited the same buttons, menus and lists. In an
interface for Smartphones without touch screen you want to have lists that the user can
easily step through with up and down keys. Then it is suitable to have just one item
per row and make the rows thin. But if the same list is to be used with a touch screen it
can be hard to press the right row, and there is no need for navigation through up and
down keys any more. Maybe it would be better to make a simple re-design of the list
3.6. Interaction benefits and problems 13
ab
Figure 3.6: Illustration of handwriting recognition
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.
3.6 Interaction benefits and problems

When designing user interfaces, touch screens provides for more freedom since the inter-
face is not restricted by the hardware buttons. This is good because you do not need to
map the buttons in the interface to hardware buttons, direct manipulation can be used
instead. Direct manipulation is when an object is manipulated directly, not through
something else. If you brush your hair you directly manipulate the brush but if you use
a remote control to change music on your stereo that is not direct manipulation. Since
direct manipulation is something that is used everyday in the physical world people
knows how it works. Another feature is that buttons do not have to be placed such that
it is easy to navigate between them with the up, down, left and right buttons. The big
disadvantage with touch screens is the lack of feedback, especially haptic feedback. If
a device has hardware buttons the user can feel where the buttons are and when the
button is pushed and released. After some practise the user can use the application
without looking at the screen. Some of my friends can write a SMS and send it without
even taking the hand and feature phone out of their pocket. This cannot be done if an
application only has a touch screen. The mobile phone HTC diamond has tried to give
haptic feedback in their user interface by sending out vibrations. It is a small step in the
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
Figure 3.7: Illustration of software QWERTY
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.
3.7 Design principles

The small screen, the changing context and the restricted input abilities make the design
of user interfaces harder than design for ordinary desktop applications. But, the design
principles and usability principles that applies to desktop applications should still be
regarded as valid. And of course the designers common sense should be used all of
the time. Donald Norman writes in The design of everyday things about the design
principles for user interfaces.
– 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.
– Constraint. Constraints show what cannot be done.
– Mapping. Mapping is needed for the user to know how to do something.
– 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
Figure 3.8: Illustration of software numpad
– Affordance. Affordance is what signals the object sends out, for example, that
a handle of a cup says “hold here”. [8]
Preece et al writes about another set of usability principles developed by Nielsen et

al. The usability principles says:
1. Visibility of system status.
2. Match between system and the real world.
3. User control and freedom.
4. Consistency and standards.
5. Help users recognize, diagnose, and recover from errors.
6. Error prevention.
7. Recognition rather than recall.
8. Flexibility and efficiency of use.
9. Aesthetics and minimalistic design.
10. Help and documentation. [5]
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
Related interfaces on market

today
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.
4.1 iPhone from Apple

According to the iPhone demonstration video on Apple’s homepage, iPhone sets a new
standard for what is possible on a mobile phone [4]. The iPhone uses a very sensitive
capacitive screen and the hardware and software feels very integrated. Apple seems to
have made the decision to rather make a device with less functionality that works fine
than to make a device with lot of functionality that does not work perfect. Here is a
description of the over all graphics, animations and interaction techniques.
4.1.1 Interaction technique

The start menu consists of small icons for different applications. Which and how many
icons there are in the start menu is decided by the user. If the user wants to re-arrange
the icons he/she can use a long press and then drag the icons around. To scroll in a list
on the iPhone, drag and flick is used. To zoom in or out two fingers are used and the
fingers are separated or dragged closer together. To push a software button, a single tap
is used. When changing picture in a slideshow, a sweep is used. To visualize a collection
of items such as pictures or music albums a 3D view called Cover Flow can be used. It is
supposed to resemble a bookshelf where you can browse through the items by dragging
your finger on the screen.
4.1.2 Graphics and animations

The iPhone uses many small animations in the interface to help the user build a mental
model. For example, when a long press is used in the main menu so that the icons can
be re-arranged, the icons starts to shiver to show that they are not static any more. The
cover flow is nicely animated so that when the active item changes, the previous item
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.
4.2 Touch Diamond from HTC

The Touch Diamond made by HTC uses the operating system Microsoft Windows Mo-
bile. On top of windows mobile, HTC have built their own interface Touch Flow 3D.
The device has a resistive touch screen that feels insensitive and slow. You really need
to push the screen to make something happen.

The interaction in the Touch Flow 3D is inconsistent. Flick can be used to scroll in
lists, but it is not always possible to stop the scrolling. The direction of the scroll is
also inconsistent and is often interpreted as a tap. A simple browse through the contact
list mostly ends with calling a random person. You can use the main menus and start
use the functionality in the mobile phone through Touch Flow 3D, but it is limited
and does not reach all the way in the menu structure. Where the Touch Flow 3D ends
the windows mobile interface is visible instead. This makes the interface even more
inconsistent. By making a circular movement on the screen you are supposed to zoom
in or out but it does not work all the time.

The Touch Flow 3D uses animations, everywhere. When navigating in menus, when
checking emails, when checking weather reports etcetera. The animations are well done
and look cool, especially the weather animations.
The interface are, as long as it is Touch Flow and not windows mobile, made in black
and grey with only colours in some special places like in pictures and the sun in the
weather animation. The background is black and the interface uses shapes, gradients
and shades to create a feeling of 3D in the different views and animations. All icons
are on the other hand made without any shadings, they have a uniform grey tone. The
graphics look professional and cool. Unfortunately the graphics are slightly ruined by
the fact that windows mobile breaks the graphic style.
4.3 Xperia from SonyEricsson

Xperia runs the Microsoft Windows Mobile operating system but SonyEricsson has made
propriatory start menu. The mobile phone has a resistive screen and a hardware qwerty
keyboard. Besides the touch screen the Xperia also has an optical joystick that can be
used to navigate the interface. Since the release date for the Xperia was September 30
2008 there are limited information about how the hardware and software really works.
4.4. Learnings 19
The information provided here is taken from SonyEricsson’s own demonstation video
[10].

The Xperia provides the user with different ways to do the same thing. The user can
for example use the hardware keyboard or a software keyboard and he/she can use the
touch screen or the optical joystick.

Most of the animations in the Xperia interface seem to be fading in and fading out when
changing views.
The colours in the interface are mainly black, grey and blue. The main menu has a
black background with coloured icons for different applications. When you move away
from the main menu the colours change and the graphics are not consistent. Sometimes
lists are blue and have no boarders between the items and sometimes the lists have grey
background and boarders separate the items. This is a result of combining a propriatory
user interface and the windows mobile interface. Fortunately both interfaces uses the
same colours and that makes the interface look professional with the neutral colours.
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
Build interacive Final product

version
Figure 5.1: The designprocess visualised as Preece et al suggests.
5.1 Identify needs and establish requirements

The first step in the design process is to identify needs and establish requirements. This
is done by gathering data to answer the questions “What are we trying to achieve?”
“How can we achieve it? ” and “Why should we achieve it?”.
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.3 Build interactive version

This is the phase in the process where you actually produce something. You draw the
lo-fi prototype, you make a slideshow, you implement the software prototype or you
implement the final product.
This phase might seems like the most important phase since this is where things
get produced, but this phase cannot be done without first going through the previous
design-phases.
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.
6.1 Target group and brainstorming

The first thing that needed to be done was to identify needs and establish requirements.
To do this it is a good idea to talk to the target group for the product. The interface was
to be run on a PDA with touch screen, and since PDAs are more expensive than feature
phones the conclusion was that the users of PDAs have a bigger interest for technical
devices. Young people tend to adopt new applications quicker than older people and
since the idea of IM with positioning is a new concept, the target audience is probably
young enough to appreciate the new application but old enough to afford a PDA. Since
the target group is interested in technology they probably keep up to date with the
new devices and applications on the market and they therefore have high expectations
on the application, both in functionality and in the look and feel of the user interface.
To get as many ideas as possible about both functionality and ways to interact with
the application a brainstorming session was held, mainly with people from the target
group, but also with a few persons that do not have the technical interest to get another
perspective. The ideas were drawn and written on paper during the session and later
summarized in a document. All the functionality from the brainstorming session could
not fit into the application and its interface, therefore prioritisation had to be done.
6.2 Design of conceptual models

When designing a user interface it is important that the user gets a good mental model
of how the system works so that the user can guess how to use it and not have to follow
instructions or learn everything. To give the user a mental model it is common to use
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.1 The cube

The first suggestion was to make a virtual cube that could be turned by sweeps in
different directions. In this way each side on the cube could have its own functions.
This idea was inspired by the touch flow interface in the HTC Touch. The difference
would be that this version had six sides in comparison to the three sides in the touch
flow. An early sketch how this could be visualised can be seen in figure 6.1. The positive
sides with this are that a cube is something that exists in the real world and that you
could change view without having a button that takes up space. The negative sides are
that there can only exist six sides and the interface could never be expanded into more
views.
6.2.2 The flip chart

The second suggestion was to make a virtual flip chart where you could change page by
making an upward sweep in the right or left side of the screen. How this suggestion could
be visualised is shown in figure 6.2. The inspiration was my own sketching block that I
used to make small drawings and notes for different interface suggestions. The positive
sides with this suggestion are that I think that everyone that will use the application have
also used a flip chart and therefore understands how to interact and if someone wants to
expand the interface with more pages in the future that is possible. The most negative
thing about it is that you can only turn page in one direction, you will eventually come
around and find the same view again, but it can take many sweeps depending on how
many pages there are in the chart.
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.
6.2.4 The tree

The fourth suggestion was inspired first by Apptoos logotype that consists of three parts
and where each part in my eyes looks like a leaf and secondly by the fact that I wanted
to make a dynamic interface suggestion. The interaction is essentially the same as the
button alternative but with a different visualisation. The thought was to make the
6.2. Design of conceptual models 27
Figure 6.1: Example of visualisation of the cube concept.
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.
6.2.5 Drag and drop

The possibility to use drag and drop and my own mental model of how mashups works
were the inspiration for the fifth suggestion. The suggestion is to have three tabs that
can be dragged out and overlap each other. If the tab with the map and the tab with
the IM overlap each other, the IM contacts is shown with a position on the map. How
this could be visualised is shown in figure 6.5. The positive aspect of this suggestion is
that it clearly shows what the idea of the application is, to combine IM with positioning.
Figure 6.2: Example of visualisation of the flip chart concept.
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.
6.3 Designing graphics

Designing graphics was a problem that was overlooked in the planning phase. There
were a lot of decisions to take considering the graphics in the application. What colours
should be used? How should the colours be used? Should gradients be used? And if
6.4. Evaluation and redesign 29
Figure 6.3: Example of visualisation of the buttons concept.
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.
6.4 Evaluation and redesign

The three suggestions buttons, tree and drag and drop were further developed and
decisions about how the different views should look and work were taken. Pictures of
the suggestions were made and put together so that they could be shown in the PDA.
Figure 6.4: Example of visualisation of the tree concept.
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
Figure 6.5: Example of visualisation of the drag and drop concept.

Chapter 7
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.
7.1.1 Instant messaging functionality

As mentioned earlier, much of the instant messaging functionality in this application
is the same as in an ordinary desktop instant messaging application. For example the
application havs a list of contacts, you can administrate the contacts, choose if the
contact should be able to see your position and you can choose a contact. Of course you
can read and send messages. Since this application is to be on a phone, the user has the
ability to choose if he/she wants to send a message via internet, send an SMS or make
a phone call. The user can choose to see the position of his/her contacts on a map. A
figure describing the functionality can be seen in figure 7.2.
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.
Figure 7.1: Handhold device to show screensize.

7.2. Interface 37
Figure 7.2: The functionality of the instant messaging part of the application.
Figure 7.3: The functionality of the positioning/map part of the application.

Figure 7.4: The functionality of the menu part of the application.

7.2. Interface 39
Figure 7.5: The KIT interface when all tabs are closed.
Figure 7.6: Image of the MAP tab active.

7.2. Interface 41
Figure 7.7: The MENU tab when it is active.

Figure 7.8: Image of the TALK tab active.

7.2. Interface 43
Figure 7.9: Image of the MAP and TALK tabs active. Contacts can be shown on the
map.
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.
8.1 Future work

The first thing that needs to be done is to examine if there exists any interest for this
kind of application and then to examine if the interface suggestion developed in this
master thesis is liked by the users. If there exists an interest for both the application
and the interface, then it needs to be implemented, either in Flash to work with the
existing proxy or in some other technique.
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 Bö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, Hå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
This is the areas I asked the group to brainstorm around:
– 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)
B.1 Brainstorm summary

B.1.1 Things to show on a map
– Where are my keys?
– Busses
– Free parkings
– Friends
– Paths, shortcuts
– Bicycle path
– Compass
– Electronic leash (warning if pet or child moves outside an area.)
– Geocaching
– Navigator both text and image, distance and calculated traveltime
– Problems in traffic
– Roads
53
54 Chapter B. Brainstorming
– Hotel
– Restaurants, stores etc with reviews
– Zoom in/out, pan
– Job openings
– Open hours for stores, restaurants etc.
– Restaurant menus
– Restaurants, cafees etc in area.
– Reminders, for example when you pass foodstore you get shoping list
– Apartments to rent
– Landmarks like churches when navigating
– Picture of the building or other destination you are navigating to.
– Advertising and special offers
– Stations, when to get of the bus/subway/train
– Automatic cash dispencer
– Shortest way with bike, bus, train etc and different combinations there of
– South, North, East, West
– Speeding cameras
– Police control
– Meter maid
– Speed limits on roads
– Traffic accidents, closed roads
– Warning for emergency vehicles
– Weather report
B.1.2 Map and instant messaging

– See position of friends on map
– Push own position to show friend where I am now
– Can show with position on map and picture taken how it looks where I am.
– Good in many professions
– Good for meetings

B.1. Brainstorm summary 55
B.1.3 Privacy issues

– Different visibility for different friends/groups of friends, more or less exact.
– Do not want to reveal that one are in the bathroom
– Is it ok to keep track of children? Of employees?
B.1.4 Visualisation
– Zoom with + and - buttons
– Zoom with slider
– Pan with touch
– Pan with flick
– Pan with arrows in margin

– Colour coding, stores got one colour, restaurants another etc.
– Create different layers (like in photoshop) with dfferent information on each.
– Different information depending on how zoomed in the map is

– 3D-format
– zoom by dragging two corners of map, like iphone
– zoom by double tap on map and a dialog zoom in/zoom out comes up
– 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.
– the button alternative was too green.
– the tree-alterantive was most beautiful.
– 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.
– Good looking menu in button suggestion.
– Easy to understand the concept in drag-n-drop suggestion.
– Second designsuggestion of menu in dra-n-drop is best.
– treeconcept most beautiful and new but hard to see the whole picture.
– start menu best in tree suggestion.
– hard to see the color-coding in tree-suggestion in the contactlist.
– drag-n-drop is the winner!
57
58 Chapter C. Evaluation
C.2 person2
– the menu best in the tree-suggestion.
– drag-n-drop felt messy.
– first gave recognition.
– 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.
– The picture adds value.
– how s the contacts in the contactlist organized?
– can not see who you are talking to in the chat screen that comes from the map.
– Exit and minimize is unclear. maybe ikons instead.
– innovative menu in the button-suggestion.
– 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.
– need to be able to go from chat to contactlist.
– does not need the keyboard all the time. Let the user choose when to show it and
you have lots of more space.
– menu alternative 2 is better that alternative 1 in the drag-n-drop suggestion.
– treesuggestion harmonic and relaxed. Can be used as screensaver. green back-

gound preferably.
– do not like that the text runs in different directions.
– doe not notice menu-button, make it stand out more.
– difficult with different directions.
– extra clicks to go to other functions feels old.
– good, cosy start, then leave the theme with the tree.
– the last info-layer-ikkon better that the i with a circle.
– you should be able to choose colors by yourself.
– The stabil buttos is the winner!

C.3. person3 59
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.
– drag lots of space and feels good. easy to understand.

– would like to have menu from button-suggestion in drag-suggestion.
– tree-suggestion better as a theme. made the interpretation that the sizes in the
contact-view symbolized distances.
– Does not like that the text is not horizontal, but if it is not the original theme it
is ok.
– The winner is drag with menu from buttons and the tree as an additional theme.
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
– Likes suggestion with tree and drag-n-drop
– the menu is easier than the contactlist to read in the tree suggestion.
– the picture is important in the chat-view
– use the words END CHAT insead of exit.
– Understands how to use all the three suggestions. To navigate among open con-
verations, use a drop-down-menu.
– alternative 2 in the buttonsuggestion is better as menu.
– the tree-suggestion looks great! good menu.
– The tree-suggestion winns.
C.8 Things to change after evaluation on lo-fi proto-

type
– Not as obvious for everyone as for me that informationlayers is layers. Use the i
symbol. should work in english, swedish and hopefully many other languages.
– 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.
– use the menu from the button-suggestion in all suggestions.
– use drag-n-drop suggestion as default, but have the others as themes.
– the persons and functions should be separatd more in the chat-view in the button-
suggestion.
– add different sorting-alternatives in the contactlist
– can not see who you are talking to in the chat screen that comes from the map,
add that information.
– Exit and minimize is unclear. maybe ikons instead.
– need to be able to go from chat to contactlist.
– does not need the keyboard all the time. Let the user choose when to show it and
you have lots of more space.
– treesuggestion harmonic and relaxed. Can be used as screensaver. green back-

gound preferably.
– notice what alternative is active in the button-suggestion, but it would help if the
other was toned out.
– 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.
– use the word settings instead of menu in tree-suggestion

– To navigate among open converations, use a drop-down-menu.

FiaStenmark PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

FiaStenmark PDF

Uploaded by

Copyright:

Available Formats

Design of a touch screen

interface for a mobile position

November 14, 2008

3 Touch screen interfaces in handheld devices 5

4 Related interfaces on market today 17

4.2 Touch Diamond from HTC . . . . . . . . . . . . . . . . . . . . . . . . . 18

1.1 About the author

1.3 Report outline

2.2 Product goals

2.3 Educational goals

Touch screen interfaces in

3.1.1 Resistive touch screen

3.1.2 Capacitive touch screen

Figure 3.1: Illustration of how a resistive touch screen works.

3.1.3 Surface acoustic wave touch screen

3.1.4 Infrared touch screen

Figure 3.2: Illustration of how a capacitive touch screen works.

3.2 Handheld devices

Figure 3.4: Illustration of how a infra red touch screen works.

3.4 Limitations in devices

3.5 Interaction techniques

3.5.1 Stylus and finger

3.5.3 Text input

Figure 3.5: Illustration of electronic ink

3.5.4 Icons and buttons

Figure 3.6: Illustration of handwriting recognition

3.6 Interaction benefits and problems

Figure 3.7: Illustration of software QWERTY

3.7 Design principles

– Constraint. Constraints show what cannot be done.

– Mapping. Mapping is needed for the user to know how to do something.

Figure 3.8: Illustration of software numpad

Preece et al writes about another set of usability principles developed by Nielsen et

Related interfaces on market

4.1 iPhone from Apple

4.1.1 Interaction technique

4.1.2 Graphics and animations

4.2 Touch Diamond from HTC

4.2.1 Interaction technique

4.2.2 Graphics and animations

4.3 Xperia from SonyEricsson

4.3.1 Interaction technique

4.3.2 Graphics and animations

Build interacive Final product

Figure 5.1: The designprocess visualised as Preece et al suggests.

5.1 Identify needs and establish requirements

5.3 Build interactive version

6.1 Target group and brainstorming

6.2 Design of conceptual models

6.2.1 The cube

6.2.2 The flip chart

6.2.4 The tree

Figure 6.1: Example of visualisation of the cube concept.

6.2.5 Drag and drop

Figure 6.2: Example of visualisation of the flip chart concept.

6.3 Designing graphics

Figure 6.3: Example of visualisation of the buttons concept.

6.4 Evaluation and redesign

Figure 6.4: Example of visualisation of the tree concept.

Figure 6.5: Example of visualisation of the drag and drop concept.

7.1.1 Instant messaging functionality

Figure 7.1: Handhold device to show screensize.

Figure 7.3: The functionality of the positioning/map part of the application.