Design of a touch screen interface for a mobile position aware instant messaging client

(1)

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: H˚

akan Gulliksson

Examiner: Per Lindstr¨

om

Ume˚

a University

Department of Computing Science

SE-901 87 UME˚

A

(2)

(3)

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.

(4)

(5)

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˚a University. The master thesis work is made at the company Apptoo AB situated in Ume˚a 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

(10)

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.

(11)

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

(12)

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.

(13)

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]

(14)

Conductive

layer

Separators

Resistive

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

(15)

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

(16)

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.

(17)

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

(18)

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

(19)

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]

(20)

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

(21)

3.6. Interaction benefits and problems 13

a b

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

(22)

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

(23)

3.7. Design principles 15 1 2 ABC DEF3 4 GHI 5 JKL MNO6 7 PQRS 8 TUV XYZ9 *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]

(24)

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.

(25)

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

(26)

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.

4.2.1 Interaction technique

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.

4.2.2 Graphics and animations

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.

(27)

4.4. Learnings 19

The information provided here is taken from SonyEricsson’s own demonstation video [10].

4.3.1 Interaction technique

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.

4.3.2 Graphics and animations

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.

(28)

(29)

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]

(Re)Design Identifying needs/ establish requirements Evaluate Build interacive version Final product

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?”.

(30)

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.

(31)

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.

(32)

(33)

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

(34)

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

(35)

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.

(36)

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

(37)

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.

(38)

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.

(39)

6.4. Evaluation and redesign 31

(40)

(41)

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.

(42)

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

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

(43)

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.

(44)

(45)

7.2. Interface 37

Figure 7.2: The functionality of the instant messaging part of the application.

(46)

(47)

7.2. Interface 39

(48)

(49)

7.2. Interface 41

(50)

(51)

7.2. Interface 43

Figure 7.9: Image of the MAP and TALK tabs active. Contacts can be shown on the map.

(52)

(53)

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.

(54)

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.

(55)

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¨orjesson 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˚akan 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.

(56)

(57)

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.

(58)

(59)

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-left-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

(60)

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.

(61)

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

(62)

– 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

Design of a touch screen interface for a mobile position aware instant messaging client