Applying user-centered design to mobile application development

Download Applying user-centered design to mobile application development

Post on 13-Dec-2015

218 views

Category:

Documents

6 download

DESCRIPTION

User Centered Design

TRANSCRIPT

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

    Digia was among the firstcompanies to develop third-party software applications that can beinstalled in Symbian smartphones by service providersor 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) Groupwas established in the company and we began to worktogether with software engineers to transform product ideasinto final products. The first product we worked on was thenavigation software for Nokia Communicators known asGenimap Navigator, which utilized a Global PositioningSystem 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-CenteredDesign to Mobile Application DevelopmentTwo case studies demonstrate the need for mobile usability testing methodsgiven the challenges of the mobile software market.

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

    When mobile phones started toinclude cameras and MultimediaMessaging (MMS) capabilities,we discovered in a Contextual

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

    In this article, we discuss the User-CenteredDesign (UCD) process we used for the GenimapNavigator and ImagePlus products (see Figure 1).Genimap Navigator is presented here due to itsmobile context of use and ImagePlus due to its directmanipulation interaction that was new to the phonesat the time it was introduced. Both products havebeen adopted by the market. Genimap Navigator waslicensed by Genimap, which is selling and distribut-ing the product under its own brand. ImagePlus islicensed by several mobile phone manufacturers andalso sold directly to end users via the Web.

    For each project we used a slightly differentprocess (see Figures 2 and 3). For Genimap Naviga-tor, technology development was performed firstand UCD came to the process after the concept andinitial requirements were already determined byproduct management and the customer. In theImagePlus development process, we were able tostart at an early phase making a Contextual Inquiry(CI) study on end-user needs before setting theproduct targets and requirements. Both projects hadmajor time and cost constraints, which affected theselection of the methods and the willingness tomake changes, based on the usability recommenda-tions. These projects were the first UCD projects inthe company, so we sometimes faced organizationalresistance against our usability design activities. Weuse these two examples to examine what worked,what did not work, and what we would do differ-ently in retrospect.

    CASE 1: GENIMAP NAVIGATOR

    Technology development for the Gen-imap Navigator started several monthsbefore Digias UE group was estab-lished and brought into the project.

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

    ning on the Communicator. This pilot productwould be used by the customer organization and fieldtest users before committing to a commercial prod-uct.

    Since the pilot implementation project hadalready started, we had to create the UI specifica-tions as quickly as possible. To guide our designs, wehad feature requirements from the customer and theUI style guide for the Nokia Communicator. Wedecided to have a three-day UI design workshopwith engineers and make a quick paper prototypetest with co-workers at the office. The designseemed to work for co-workers so we documented itin the UI specification document. This design wasnot completely followed by the project engineersbecause they had already started implementationwhile 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 ofthe end users. We decided to use pilot testing to getreal user-needs data. After the pilot product wasready 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 wereanalyzed and our usability specialist interviewed theusers. This provided us with the facts about theimportance of the features during actual use as wellas the usability problems in the product.

    The pilot study revealed the needs that arise fromthe mobile context of use were not supported by theproduct. For example, Genimap Navigator has ayellow pages service search for locating servicesbased on a text string. In the pilot test we discoveredthat users wanted to know about the location of thenearest taxi station, but the service search providedthe location of the taxi owners home or office. Theservice was not context-aware at all. It was also dis-covered that the limited context of services was oneof 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 ofthe commercial version. We provided access to thethree 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 convincethe customer to omit them. To confirm the designchanges, we conducted a one-day paper prototypetest 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 ausability test with the real product to get feedback

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

    CASE 2: IMAGEPLUS

    Parallel with the Genimap Navigatordevelopment we convinced companymanagement there is a process verysuitable 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 studyfocused on mobile messaging among professionalsand teenagers and included both CI and conceptdesign for several applications.

    One of the concepts from the study was an inte-grated image or multimedia message editor in thephone. The visual and emotional communicationbetween teenagers prompted this idea. When thefirst Series 60 camera phone with MMS (the Nokia7650 model) was introduced, it did not have imageediting capabilities, so the company considered theconcept 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 basicimage editing features of the PC software. Then wefocused on designing the basic user interaction usingthe Series 60 UI style. We decided to apply the directmanipulation concept of a PC-based mouse to thephones joystick key. We tested the design proposalwith a paper prototype and iterated the basic menustructure and editing tool selection to improve theUI. After the paper prototype test we documentedthe functional and UI specification using User Envi-ronment Design (UED) notation [1], which alsoincluded interaction design proposals for all therequired features.

    Project management used the UED overview toestimate implementation effort for each feature.Business and time-to-market calculations requiredthat the project was completed within half a year,therefore we had to eliminate some features. Basedon the findings of the earlier CD study, we decidedto create a simple PowerPoint-like application forinformal multimedia messaging rather than a full-featured Photoshop-like application for seriousimage editing.

    We defined usability requirements for the maintasks and used these to create a usability verificationplan. Due to the small budget, we decided not todevelop a UI prototype for usability verification, butinstead used the actual software implemented ineach increment. During the development period, theUE team concentrated on refining the interactiondetails especially for direct manipulation tasks

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

    Figure 1. GenimapNavigator and

    ImagePlus.

    The most important aspect of the designprocess 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.

  • resizing, rotating, or movingof inserted icons, textboxes, and frames. Soon we noticed that interactioncopied from the PC mouse did not work with thephones joystick. One of the project engineersinvented a better way for resizing and rotating,which proved to be suc-cessful in usability tests.

    We organized twousability test rounds thatcaused several changerequests to bring directmanipulation to therequired usability level. Alot of effort and iterations were required to get awhat-you-see-is-what-you-get experience when cre-ating a cartoon-like text box on top of the image. Itwas also determined by Ketola that many rounds ofiteration are often needed to get the UI details rightin mobile phone design [8]. In addition, one of ourcompetitors launched their product before us, andwe were able to reuse one interaction idea that madedirect manipulation finally acceptable. The projectwas completed three months later than the initialschedule. This delay wascaused by both a lack of engineering resourcesand the change requestsfrom the usability tests.

    LESSONS LEARNED

    The Gen-imap Navi-gator and ImagePlus projects taughtus a lot about how to apply UCD

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

    Focused CI studies. Even though ImagePlus is asuccessful product, we have not used such large CIstudies in every development project. For a smallcompany or customer, it seems quite challenging toinvest in user-needs research, since the budget isoften planned to cover only the implementationcosts. If we have had a design case where we lackuser-needs understanding, we have made a focusedCI study by two or three UE designers instead of alarge user needs study conducted by a cross-organi-zational team. We have conducted the study in alight way, interviewing only 68 people and analyz-ing the data by creating affinity diagram, sequencemodels, and personas [2]. Often when a budget has

    been extremely small, we only use the contextualpaper prototype tests in the specification phase ofthe project to get the necessary insight on userneeds. Users are interviewed in the beginning of thesession before presenting the prototype and when

    going through themock-up, test tasks arecreated based on theinterview. Hurst callsthis method of gettingthe test tasks from usersa listening lab [4].

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

    ImagePlus, paper prototyping helped to get end-userfeedback before anything was implemented. It waseasy to add and remove featureseven halfwaythrough a test. It is a method that every interactiondesigner at Digia uses when designing the first pro-posal of a new software application before writingthe UI specifications. When the application is sim-

    ple and interaction isbased on standard UIstyle components, apaper prototype test is asufficient method forverifying usability beforethe actual implementa-tion. However, wheneverwe create new, moresophisticated interactionwithout a clear design

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

    In the ImagePlus project we were able to iteratethe UI details by making the changes to the actualcode. Even though the final usability of the productwas good, the constant change requests causeddelays and frustration in the project. We have notcalculated the money spent on iterations, but ourcurrent understanding is that we should find theusability problems in interaction design earlierbefore the implementationto avoid unnecessarychange requests. In PC and Web environments, UIprototypes can be created and quickly modified withcurrent tools parallel to specification work. PCdemos can also be created for mobile applicationsfaster and with less effort than actual coding in thephone, but they cannot be used very well for gettingthe 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.

    Technologicalresearch

    Initial featurerequirements

    UI design workshop andpaper prototype testing

    Pilotimplementation

    Pilot field testand diary study

    UI design revision andpaper prototype test

    Implementationof commercial

    version

    Final usabilitytest

    Technologicalresearch

    Initial featurerequirements

    UI design workshop andpaper prototype testing

    Pilotimplementation

    Pilot field testand diary study

    UI design revision andpaper prototype test

    Implementationof commercial

    version

    Final usabilitytest

    R

    Figure 2. Genimap Navigatordesign process.

    Kangas fig 3 (7/05)

    Figure 3. ImagePlus design process.

    Contextualdesign study

    Competitorproductanalysis

    UI design andpaper prototype testing

    Usabilityrequirements

    SoftwareImplementation

    Usability testswith early product

    versions

    Change requests

    Contextualdesign study

    Competitorproductanalysis

    UI design andpaper prototype testing

    Usabilityrequirements

    SoftwareImplementation

    Usability testswith early product

    versions

    Change requests

    Figure 3. ImagePlus design process.

  • or when testing devices involving stylus interaction.After ImagePlus we made a UI prototype for one

    project just by hacking a demo into the actual phonewith C++ code. The demo focused on the usabilityissues identified in paper prototype phase so it did notinclude all the features. Even though the developmentof the demo took six person-weeks to implement, ithelped us to define the detailed interaction during thespecification phase. Our biggest concern is finding bet-ter tools to make quick UI prototypes with less costthan actual coding. Mobile device manufacturers haveworked in this area as well [911].

    Usability testing in the mobile context. In theImagePlus project, usability testing of the productwas conducted in the meeting room (usability lab)environment. The tests and results were useful andsuited to this application because the end-user taskswere not related to a specific mobile context.

    For Genimap Navigator, traditional usability testswere not very useful because simulating the relevantuse cases was not possible in the office. We con-ducted a large pilot study in the middle of develop-ment, which gave us a large amount of informationthat was missing at the start. However, a large pilotstudy is too expensive and occurs too late to get end-user requirements for the product. The diarymethod was good for gathering information aboutthe usage of the functions, but not very efficient forgathering the detailed usability issues on the go. Wewere missing the important insight from the ongo-ing tasks that is useful in traditional usability tests.In future projects that have a mobile context, we willalso include an observational part during field test-ing. Replacing the video cameras used in a usabilitylab with something more portable is one area thatneeds to be developed. For example, Isomursu et al.[5] have studied using camera phones to supportobservations in a mobile context.

    CONCLUSION

    When designing any product, mobileor not, good UCD practices helpto ensure the product works. Nofeature should be added to the

    product only because it is easy and cheap to imple-ment, or because you think it is a good idea. The mostimportant aspect of the design process is to provide theuser with the real usage context. For mobile phonesthis means users need to be able to touch the buttonsand see software that feels like it is actually working.Paper prototypes are good because they can be used forverifying the product requirements without any invest-ments in technology or development. They can also beused in a real context to get a relevant testing environ-

    ment, but they are not sufficient for solving the usabil-ity issues of the final product, especially detailed inter-action or performance.

    We are planning to work on practices that speedup the construction of realistic prototypes for mobilephones [12]. This will allow us to test as if we hadthe final product, but the prototype can be providedearlier and less expensively. In addition, methodsand tools for observing and testing in the mobilecontext needs to be developed further. Our experi-ence shows that realistic prototypes are even moreimportant for understanding the detailed require-ments of mobile software when compared to tradi-tional software. Even though we have had mobilephones and other mobile devices for some time,there will be an increasing number of opportunitiesfor application developers. We are confident we cancontinue to use traditional proven design practices aswe improve them and increase their flexibility for amore mobile environment.

    References1. Beyer H. and Holtzblatt, K. Contextual Design: Defining Customer-Cen-

    tered Systems. Morgan Kaufmann, San Francisco, 1997. 2. Cooper, A. About Face: The Essentials of User Interface Design. Wiley,

    NY, 1995.3. Digia. Programming for the Series 60 Platform and Symbian OS. Sym-

    bian Press, Wiley, NY, 2003. 4. Hurst, M. Four words to improve user research. GoodExperience.com,

    2003; www.goodexperience.com/blog/archives/000021.php.5. Isomursu, M., Kuutti, K., Vinm, S. Experience clip: Method for user

    participation and evaluation of mobile concepts. In Proceedings of Par-ticipatory Design 2004 (PDC 2004), (July 2004, Toronto, Canada).

    6. Kaasinen, E. User need for location aware mobile services. Pers UbiquitCompot 7 (2003).

    7. Kangas E, Sinisammal J, Paihonen S (2003) Diary as a Usability Test-ing Method. In C. Stephanidis and J. Jacko, Eds, Human-ComputerInteraction: Theory and Practice (Part I). Proceedings of HCI Interna-tional 2003 2nd International Conference on Universal Access in Human-Computer Interaction. (June 2003, Crete, Greece). Lawrence ErlbaumAssociates, London, 2003.

    8. Ketola, P. Integrating usability with concurrent engineering in mobilephone development. Doctoral thesis, University of Tampere, 2002.

    9. Kiljander, H. User interface prototyping of handportable communicatingproducts. Licentiate Thesis, Helsinki University of Technology, 1997.

    10. Pering, C. Interaction design prototyping of communicator devices:Towards meeting the hardware-software challenge. Interactions 9, 6(Nov.Dec. 2002).

    11. Rajatie, S. A rapid simulation tool supporting early user interactiondesign of mobile phones. University of Oulu, Department of Informa-tion Processing Science, 2002.

    12. Tiihonen, V. UI prototyping as a part of smartphone software conceptdesign and UI specification. Masters Thesis in Information Technology(Mobile Computing), 2005.

    Eeva Kangas (eeva.kangas@digia.com) is a team manager andusability specialist in the User Experience Group in SysOpen DigiasSmartphone Business Division in Oulu, Finland. Timo Kinnunen (timo.kinnunen@digia.com) is a senior design manager in the User Experience Group in SysOpen DigiasSmartphone Business Division in Oulu, Finland.

    Genimap Navigator is a registered trademark of Genimap Oy.

    2005 ACM 0001-0782/05/0700 $5.00

    c

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