Download Applying user-centered design to mobile application development PDF

TitleApplying user-centered design to mobile application development
TagsTypes School Work
File Size222.4 KB
Total Pages5
Document Text Contents
Page 1

COMMUNICATIONS OF THE ACM July 2005/Vol. 48, No. 7 55

D
igia was among the first
companies to develop
third-party software
applications that can be
installed in Symbian smart
phones by service providers
or end users [3]. In 2001,
Digia was searching for new

product ideas for the nascent smart phone
market. At the same time, the User Experience (UE) Group
was established in the company and we began to work
together with software engineers to transform product ideas
into final products. The first product we worked on was the
navigation software for Nokia Communicators known as
Genimap Navigator, which utilized a Global Positioning
System connection and a map database on a network server.

B y E E V A K A N G A S a n d
T I M O K I N N U N E NIllustration by Lisa Haney

Applying
User-Centered
Design to Mobile Application Development
Two case studies demonstrate the need for mobile usability testing methods
given the challenges of the mobile software market.

Page 2

56 July 2005/Vol. 48, No. 7 COMMUNICATIONS OF THE ACM

W
hen mobile phones started to
include cameras and Multimedia
Messaging (MMS) capabilities,
we discovered in a Contextual

Design (CD) study [1] that users would also like to
edit the images on their mobile phones. For example,
they would prefer to send their digital images via
MMS rather than using another method. The second
product we designed was an application called Image-
Plus, where users can, for example, add a text balloon
with a message to the picture and send it directly from
their mobile phones.

In this article, we discuss the User-Centered
Design (UCD) process we used for the Genimap
Navigator and ImagePlus products (see Figure 1).
Genimap Navigator is presented here due to its
mobile context of use and ImagePlus due to its direct
manipulation interaction that was new to the phones
at the time it was introduced. Both products have
been adopted by the market. Genimap Navigator was
licensed by Genimap, which is selling and distribut-
ing the product under its own brand. ImagePlus is
licensed by several mobile phone manufacturers and
also sold directly to end users via the Web.

For each project we used a slightly different
process (see Figures 2 and 3). For Genimap Naviga-
tor, technology development was performed first
and UCD came to the process after the concept and
initial requirements were already determined by
product management and the customer. In the
ImagePlus development process, we were able to
start at an early phase making a Contextual Inquiry
(CI) study on end-user needs before setting the
product targets and requirements. Both projects had
major time and cost constraints, which affected the
selection of the methods and the willingness to
make changes, based on the usability recommenda-
tions. These projects were the first UCD projects in
the company, so we sometimes faced organizational
resistance against our usability design activities. We
use these two examples to examine what worked,
what did not work, and what we would do differ-
ently in retrospect.

CASE 1: GENIMAP NAVIGATOR

T
echnology development for the Gen-
imap Navigator started several months
before Digia’s UE group was estab-
lished and brought into the project.

Product management had set the high-level require-
ments with the customer (licensee) and technological
partners. There was no chance to conduct any user
needs study. We were expected to create the user
interface (UI) specification for a pilot product run-

ning on the Communicator. This pilot product
would be used by the customer organization and field
test users before committing to a commercial prod-
uct.

Since the pilot implementation project had
already started, we had to create the UI specifica-
tions as quickly as possible. To guide our designs, we
had feature requirements from the customer and the
UI style guide for the Nokia Communicator. We
decided to have a three-day UI design workshop
with engineers and make a quick paper prototype
test with co-workers at the office. The design
seemed to work for co-workers so we documented it
in the UI specification document. This design was
not completely followed by the project engineers
because they had already started implementation
while we were still working on the document.

At this point, our feeling was that we and our cus-
tomer did not know enough about the real needs of
the end users. We decided to use pilot testing to get
real user-needs data. After the pilot product was
ready for testing, 20 participants used the pilot ver-
sion for three weeks and kept a diary of their experi-
ences [7]. After the test period, the diaries were
analyzed and our usability specialist interviewed the
users. This provided us with the facts about the
importance of the features during actual use as well
as the usability problems in the product.

The pilot study revealed the needs that arise from
the mobile context of use were not supported by the
product. For example, Genimap Navigator has a
“yellow pages” service search for locating services
based on a text string. In the pilot test we discovered
that users wanted to know about the location of the
nearest taxi station, but the service search provided
the location of the taxi owner’s home or office. The
service was not context-aware at all. It was also dis-
covered that the limited context of services was one
of the main reasons why users considered the ser-
vices not useful. Information and service needs vary,
not only according to the location but also accord-
ing the user and the usage situation [6].

Based on the pilot test results, we revised the UI of
the commercial version. We provided access to the
three most frequently used features from the applica-
tion command buttons, and moved the less-used fea-
tures to the menu, since we were not able to convince
the customer to omit them. To confirm the design
changes, we conducted a one-day paper prototype
test with three end users. We also reported the ser-
vice-related usability problems to the customer.

Finally, when the commercial version was com-
pleted and delivered to customer, we organized a
usability test with the real product to get feedback

Page 3

for potential future product ver-
sions. Again, we did not have a
large budget for an as-yet unclear
business case, so the test was con-
ducted in a laboratory setting, not in mobile envi-
ronment. The usability test revealed several
problems in the product, but improvement recom-
mendations were too late for the delivered product.

CASE 2: IMAGEPLUS

P
arallel with the Genimap Navigator
development we convinced company
management there is a process very
suitable for undertaking front-end

research for product ideas. We conducted a two-
month CD study, in which eight persons from UE,
engineering, and marketing participated. The study
focused on mobile messaging among professionals
and teenagers and included both CI and concept
design for several applications.

One of the concepts from the study was an inte-
grated image or multimedia message editor in the
phone. The visual and emotional communication
between teenagers prompted this idea. When the
first Series 60 camera phone with MMS (the Nokia
7650 model) was introduced, it did not have image
editing capabilities, so the company considered the
concept an idea worth developing.

In addition to inquiry findings, we examined var-
ious PC image editing software to gain more under-
standing of the features and interaction. We easily

created a long feature list by compiling the basic
image editing features of the PC software. Then we
focused on designing the basic user interaction using
the Series 60 UI style. We decided to apply the direct
manipulation concept of a PC-based mouse to the
phone’s joystick key. We tested the design proposal
with a paper prototype and iterated the basic menu
structure and editing tool selection to improve the
UI. After the paper prototype test we documented
the functional and UI specification using User Envi-
ronment Design (UED) notation [1], which also
included interaction design proposals for all the
required features.

Project management used the UED overview to
estimate implementation effort for each feature.
Business and time-to-market calculations required
that the project was completed within half a year,
therefore we had to eliminate some features. Based
on the findings of the earlier CD study, we decided
to create a simple PowerPoint-like application for
informal multimedia messaging rather than a full-
featured Photoshop-like application for serious
image editing.

We defined usability requirements for the main
tasks and used these to create a usability verification
plan. Due to the small budget, we decided not to
develop a UI prototype for usability verification, but
instead used the actual software implemented in
each increment. During the development period, the
UE team concentrated on refining the interaction
details especially for direct manipulation tasks—

COMMUNICATIONS OF THE ACM July 2005/Vol. 48, No. 7 57

Figure 1. Genimap
Navigator and

ImagePlus.

The most important aspect of the design
process is to provide the user with the real usage context.

For mobile phones this means users need to be able to touch the

buttons and see software that feels like it is actually working.

Page 4

resizing, rotating, or moving—of inserted icons, text
boxes, and frames. Soon we noticed that interaction
copied from the PC mouse did not work with the
phone’s joystick. One of the project engineers
invented a better way for resizing and rotating,
which proved to be suc-
cessful in usability tests.

We organized two
usability test rounds that
caused several change
requests to bring direct
manipulation to the
required usability level. A
lot of effort and iterations were required to get a
what-you-see-is-what-you-get experience when cre-
ating a cartoon-like text box on top of the image. It
was also determined by Ketola that many rounds of
iteration are often needed to get the UI details right
in mobile phone design [8]. In addition, one of our
competitors launched their product before us, and
we were able to reuse one interaction idea that made
direct manipulation finally acceptable. The project
was completed three months later than the initial
schedule. This delay was
caused by both a lack
of engineering resources
and the change requests
from the usability tests.

LESSONS LEARNED

T
he Gen-
imap Navi-
gator and ImagePlus projects taught
us a lot about how to apply UCD

within tight budgets and schedules. After the proj-
ects, we developed our software engineering process
so that we could apply UCD more effectively to the
upcoming projects. Here, we discuss the UCD activ-
ities we consider especially useful in mobile applica-
tion development.

Focused CI studies. Even though ImagePlus is a
successful product, we have not used such large CI
studies in every development project. For a small
company or customer, it seems quite challenging to
invest in user-needs research, since the budget is
often planned to cover only the implementation
costs. If we have had a design case where we lack
user-needs understanding, we have made a focused
CI study by two or three UE designers instead of a
large user needs study conducted by a cross-organi-
zational team. We have conducted the study in a
light way, interviewing only 6–8 people and analyz-
ing the data by creating affinity diagram, sequence
models, and personas [2]. Often when a budget has

been extremely small, we only use the contextual
paper prototype tests in the specification phase of
the project to get the necessary insight on user
needs. Users are interviewed in the beginning of the
session before presenting the prototype and when

going through the
mock-up, test tasks are
created based on the
interview. Hurst calls
this method of getting
the test tasks from users
a listening lab [4].

Realistic UI proto-
types for mobile appli-
cations. With both
Genimap Navigator and

ImagePlus, paper prototyping helped to get end-user
feedback before anything was implemented. It was
easy to add and remove features—even halfway
through a test. It is a method that every interaction
designer at Digia uses when designing the first pro-
posal of a new software application before writing
the UI specifications. When the application is sim-

ple and interaction is
based on standard UI
style components, a
paper prototype test is a
sufficient method for
verifying usability before
the actual implementa-
tion. However, whenever
we create new, more
sophisticated interaction
without a clear design

reference, such as map zooming in Genimap Navi-
gator or direct manipulation in ImagePlus, a more
realistic UI prototype is needed.

In the ImagePlus project we were able to iterate
the UI details by making the changes to the actual
code. Even though the final usability of the product
was good, the constant change requests caused
delays and frustration in the project. We have not
calculated the money spent on iterations, but our
current understanding is that we should find the
usability problems in interaction design earlier—
before the implementation—to avoid unnecessary
change requests. In PC and Web environments, UI
prototypes can be created and quickly modified with
current tools parallel to specification work. PC
demos can also be created for mobile applications
faster and with less effort than actual coding in the
phone, but they cannot be used very well for getting
the real feeling from the keypad and display interac-
tion. PC demos are more useful for visual UI testing,

58 July 2005/Vol. 48, No. 7 COMMUNICATIONS OF THE ACM

Kangas fig 2 (7/05)

Figure 2. Genimap Navigator design process.

Technological
research

Initial feature
requirements

UI design workshop and
paper prototype testing

Pilot
implementation

Pilot field test
and diary study

UI design revision and
paper prototype test

Implementation
of commercial

version

Final usability
test

Technological
research

Initial feature
requirements

UI design workshop and
paper prototype testing

Pilot
implementation

Pilot field test
and diary study

UI design revision and
paper prototype test

Implementation
of commercial

version

Final usability
test

R

Figure 2. Genimap Navigator
design process.

Figure 3. ImagePlus
design process.

Similer Documents