This document summarizes a presentation about adapting user interface patterns for mobile platforms. It discusses how interface patterns were traditionally designed for single devices and tasks, but now must support multiple tasks, devices, and environments as users are increasingly mobile. The presentation describes gathering usability guidelines for multiple platforms and applying them to modify existing interface patterns from an industrial system to support touch interfaces like Android and iOS. User testing was conducted to evaluate alternative pattern implementations and determine the most preferred version. The goal is to develop context-aware interface patterns that can dynamically change based on factors like device and environment.

1. Jean Vanderdonckt,Thanh-Diane Nguyen When User Interface Patterns become Mobile – IntegraNova MES goes into the wild

2. Aboutthepresenters Prof. Jean VanderdoncktHead of Louvain Interaction Lab (LiLab)Louvain School of ManagementUniversité catholique de LouvainLouvain-la-Neuve, Belgiumjean.vanderdonckt@uclouvain.bewww.lilab.eu, www.lilab.be Thanh-Diane NguyenResearch and Teaching AssistantPhD studentthanh-diane.nguyen@uclouvain.be These slides are freely available at: www.slideshare.net/jeanvdd/when-user-interface-patterns-become-mobile

3. Whatis the situation so far? In interactive systemstoday, the predominant situation = 1 user carrying out 1 taskat a time with 1 device (platform) in 1 environment User Task Platform Environment

4. Whatis the situation so far? Some variant situation = 1 user carrying out n tasksat a time with 1 device (platform) in 1 environment (multi-tasking) User Tasks Platform Environment

5. Whatis the situation so far? Consequent situation = 1 user carrying out n tasksatn timeswithm platforms in 1 environment (e.g., in office) (multi-platform) User Tasks Platforms Environment

6. Whatis the situation so far? Final situation = 1 user carrying out n tasksat n times with m platforms in p environments (e.g., in office, at home, in plane, on the road) (multi-environments) User Tasks Platforms Environments

7. Why multiple monitors? Deviceside Monitor surface increases, whilepricedecreases [Harris,2002]

8. Why multiple monitors? User side Usersprefer more display surface User’sproductivityincreasesfrom 10% to 30% (althoughsomeusabilityproblems are raised) [Harris,2002]

9. Why multiple monitors? User side Usersprefer more display surface User’sproductivityincreasesfrom 10% to 30% Effects of Display Size on Task Times 160 140 120 100 Small Average Task Time (Seconds) 80 Large 60 40 20 0 [Czerwinsky,2005]

10. Why multiple monitors? User side Usersprefer more display surface User’sproductivityincreasesfrom 10% to 30% The tasks were easy to perform 5 4 3 Average Rating (1=Disagree, 5=Agree) 2 1 0 Small Large [Czerwinsky,2005] Display Size

11. Why multiple monitors? User side Usersprefer more display surface User’sproductivityincreasesfrom 10% to 30% [Czerwinsky,2005]

12. (Amount of interactive systems) (Amount of end users) 10 to 50 systems for 1 user 10000 50000 2 or 3 systems for 1 user 1 system for 1 user 1000 5000 100 500 1 system for 100 users 10 50 [Weiser, 1998] 1970 1980 1990 2000 2010 2020 [ForresterResearch, 2002] Why multiple platforms?

13. Why multiple platforms? Some, many, all?

14. [Pierce et al.,2004] Whichplatformsshouldbesupported? Somereasons Sales increase Capabilitiesincrease

15. Whichplatformsshouldbesupported? Break-even point before 2014 [MEE 2010]

16. For which type of user?

17. For which type of user?

18. Consequence: transcodingneeded

19. Which mobile phone to choose? Feature phones Screen resolution is too small Web browsing: forget about it Specific reasons Smart phones Screen resolution is moderate Equipped with a physical keyboard Web browsing: possible, but not very usable Touch phones Screen resolution becomes reasonable (iPhone is 320 x 480 pixels) Supports various gestures for scrolling, zooming and navigating User satisfaction ratings are highest for these devices

20. Worldwide touch phone Sales to End Users by Operating System 2009 year 2010 year Selected Smartphones: Android by its great increase in sales and using iOS : The first iPhone has revolutionized the design (own patterns and guidelines) of electronic devices that surround us. 20 Whichtouch phones to choose?

21. First recommendation Develop User Interface Patterns for both smart phones and touch phones No otherprioritydevices Unlessyou have a good reason to support a specialdevice "Mobile sites beat full web sites", surprisingly (Nielsen Norman Group) Better phones perform better in terms of average success rates (task completion): Feature phones: 38% Smartphones: 55% Touch phones: 75%

22. First recommendation Consequence: dilemmabetweentwoapproaches Single universaldevelopment: one for all Multiple optimiseddevelopment: one for each

23. First recommendation How to revisit UI Patterns for IntegraNova MES? What information shouldbeincluded? Deducefrom the object model What to gracefuldegrade? Deducefrom types of contents and tasksthat Are time-critical (e.g., deadline-based, emergency) Manipulate constantly-updating information Involvefrequently-used information Require privacy Are intrinsically based on communication with others (social networks, forums, twitter). Platform considerations (layout) Whatusability guidelines to consider? General purpose vs platformspecific

24. Step 1. Gatherusability guidelines Problems Huge variety of devices, software/hardware Large quantity of available guidelines Limitations of current works about guidelines Incompleteness Heavy description Difficult interpretation Conflicting issues Out of date information Lack of classification of guidelines Examples Guideline: “Impose a style in using CSS” Guideline: “Let the user to choose its policy” (Norcier ,2008) Guideline for desktop computer: “Design a page in order to be readable in 800 x 600 resolution” (Norcier ,2008) Guideline for widescreen: “Design for 1024x768 minimum resolution” (Michele McDonough ,2010)

25. Goal Provide user interface designers and developers with support for designing multi-platform user interfaces Sub-Goals Know the state of the art related to guidelines for multi-platform interfaces. Create the ergonomic guide Disseminate the ergonomic guide among research groups devoted to improve usability of software systems. Verify the usefulness of guidelines by an application 25 Step 1. Gatherusability guidelines

26. Step 1. Gatherusability guidelines Methodology based on the design cycle research

27. Step 1. Gatherusability guidelines Process

28. Step 1. Gatherusability guidelines Usability guideline template

29. Step 1. Gatherusability guidelines Example

30. Step 1. Gatherusability guidelines DESTINE : Design & Evaluation STudio for INtent-based Ergonomic web sites Compatible XML language called GDL Description of categories 237 available ergonomic guidelines for multi-plaforms in the database. List, name, description, resume, illustration of each guideline Structured and complete view on each guideline related to own categories

31. Step 1. Gatherusability guidelines

32. Step 1. Gatherusability guidelines

33. Step 1. Gatherusability guidelines

34. Step 1. Gatherusability guidelines

35. Sub-step 1: Describe the context of use in terms of tags  P + E / D / P&T(S) Sub-step 2 : Idetify adaptation techniques for the context Context : narrowbandwidth smallscreenresolution P + E / D / P&T(S) touch phone  Step 2. When to applywhich guideline?

36. Step 3. Apply them to User Interface patterns Web View and Office View generated by IntegraNova MES

37. Step 3. Apply them to User Interface patterns Application of the ergonomic guide on Android: HAT

38. Step 3. Apply them to User Interface patterns Application of the ergonomic guide on iOS:HAT

39. Step 3. Apply them to User Interface patterns Application of the ergonomic guide on Android: Service Interaction Unit (SIU)

40. Step 3. Apply them to User Interface patterns Application of the ergonomic guide on iOS: SIU 40

41. Step 3. Apply them to User Interface patterns Application of the ergonomic guide on Android: Population Interaction Unit (PIU)

42. Step 3. Apply them to User Interface patterns Application of the ergonomic guide on Android:PIU Model selection, filtering

43. Application of the ergonomic guide on Android:Master Detail Interaction Unit Step 3. Apply them to User Interface patterns

44. Step 4. Which User Interface pattern is usable? For eachIntegraNova MES User Interface Pattern Twoplatforms (iOS vs Android) Threealternate user interfaces based on Usability guidelines Adaptation techniques Ask end user which one do theyprefer 44

45. Example #1: SIU Divergence of evolutions Mobile platforms Web interfaces Flaws Not adapted for small screen Not adapted for touch screen… Goals Keepfunctionalities Use new technologiescapabilities 45 Step 4. Which User Interface pattern is usable?

47. Adapted to touchscreen

48. Adapted to small screenStep 4. Which User Interface pattern is usable?

50. Adapted to touchscreen

51. Adapted to small screen

52. Reduced workload47 Step 4. Which User Interface pattern is usable?

54. Adapted to touchscreen

55. Adapted to small screen

56. Reduced workload

57. Good guidance48 Step 4. Which User Interface pattern is usable?

58. Different versions exhibitdifferentbehaviors Which version is the mostpreferred by end users on the targetplatform and why? For thispurpose, weconducted an experiment IBM CSUQ questionnaire with 19 questions Each question on a 5-point Likertscale 4 resultingmetrics Correlation: r=0.94 (!) 49 Step 4. Which User Interface pattern is usable?

59. Paired tests SYSUSE Version 2 > Version 1 INFOQUAL, INTERQUAL, USABILITY : Version 2 > Version 1 Version 3 > Version 1 50 Step 4. Which User Interface pattern is usable?

60. Example #2: adaptthe home page http://www.chambre-d-hote-baie-de-somme.com/ for touchplatforms(e.g., an Apple iPad, a TabletPC) Use alternative designs Take user preferenceintoaccountwhen possible 51 Step 4. Which User Interface pattern is usable?

62. Good guidance

63. Good consistency52

65. Very good guidance

66. No more confusion between buttons53 Step 4. Which User Interface pattern is usable?

68. Reduced workload54 Step 4. Which User Interface pattern is usable?

69. Paired tests SYSUSE Version 1 > Version 2 INFOQUAL, INTERQUAL, ERGONOMY : No significance 55 Step 4. Which User Interface pattern is usable?

70. Example #3: adapt the Wikipedia page about YouTube http://www.chambre-d-hote-baie-de-somme.com/ for a smartphone Use alternative designs Take user preferenceintoaccountwhen possible 56 Step 4. Which User Interface pattern is usable?

72. Adapted to small screen

73. Reduced workload

74. Very good guidance57 Step 4. Which User Interface pattern is usable?

76. Adapted to small screen

77. Reduced workload

78. Good guidance58 Step 4. Which User Interface pattern is usable?

80. Adapted to touchscreen

81. Adapted to small screen59 Step 4. Which User Interface pattern is usable?

82. Preferences Paired tests SYSUSE, INFOQUAL, INTERQUAL Version 1 > Version 3 Version 2 > Version 3 Usability : Version 2 > Version 1> Version 3 60 Step 4. Which User Interface pattern is usable?

83. So far, User Interface Patterns Are appliedat design-time Are predefined, inflexible Are not context-dependent New goal: go beyondthis situation Determinetypicalcontexts of use (not all!) Elicitrules for users, platforms, and environments Use alternative UI patterns for the samecontext Prioritize adaptation rulesinto a meta-rule 61 Pushing User Interface patterns to their best

84. Pushing User Interface patterns to their best 62

85. Context-aware adaptation of user interfaces 63 User interface pattern depending on the platform Textual Graphical

86. Context-aware adaptation of user interfaces Touch phones 64 Night version, 2 days Day version, 2 days

87. Context-aware adaptation of user interfaces Tablet PC & iPad 65 Night version, 4 days Day version, 4 days

88. Context-aware adaptation of user interfaces Desktop version 66

89. 67 Context-aware adaptation of user interfaces

90. Conclusion User interface patterns are required To maintainconsistency To promotesystematicdevelopment But shouldbeexpanded To cover more contexts of use Touch phones: iOS & Android To switchfrom one pattern to another one when the context of use changes (not everythingcouldbepredefined, new contextsappear) To beadaptedthemselves TowardsContext-dependent UI patterns

91. User Interface eXtensibleMarkupLanguage http://www.usixml.org http://www.usixml.eu Register as a member of the UsiXML End-User Club at http://www.usixml.eu/end_user_club For more information and downloading,http://www.lilab.eu Thankyouverymuch for your attention!

92. User Interface eXtensibleMarkupLanguage http://www.usixml.org FP7 Selfmanprojecthttp://www.ist-selfman.org/ For more information and downloading,http://www.lilab.eu Thankyouverymuch for your attention! FP7 Serenoaprojecthttp://www.serenoa-fp7.eu FP7 Humanprojecthttp://www.human.aero/

93. SPAIN Ctra. Las Marinas, km 2 03700 Denia, Alicante Tel: +34 96 642 70 60 Fax: +34 96 642 70 05 infod@integranova.com www.integranova.com Edificio Torre Europa Paseo de la Castellana, 95–15º A 28046 Madrid Tel: +34 91 418 58 17 Fax: +34 91 418 69 99 Sorolla Center Av. Cortes Valencianas, 58 pl. 5ª 46015 Valencia Tel: +34 96 045 16 48 Fax: +34 96 045 16 01 Avda. Diagonal, 640 – 6A 08017 Barcelona Tel: +34 93 230 41 03 Fax: +34 93 228 78 99 GERMANY Bavariaring 17 80336 München Tel: +49 89 520 310 40 Fax: +49 89 520 310 422 info@integranova.de www.integranova.com Terminalstrasse Mitte 18 85356 München Tel: +49 89 97007 - 264 Fax: + 49 89 97007 - 200 Collenbachstraße 47 40476 Düsseldorf Tel: +49 211 948 42 25 Fax: +49 211 948 42 21 info@integranova.de www.integranova.com SWITZERLAND World Trade Center Leutschenbachstrasse, 95 8050 Zürich Tel: +41 44 308 36 31 Fax: +41 44 308 35 00 info@integranova.ch www.integranova.ch AUSTRIA Office Park Airport Office Park I Top B02 1300 Viena Tel: +43 1 22787 149 Fax: +43 1 22787 200 USA 530 Lytton Avenue 2nd. Floor. Palo Alto, CA 94301 Tel: +1 650 617-3401 Fax: +1 650 617-3201 1221 Brickell Av. Suite 1540 33131 Miami/Florida Tel: +1 305-3585988 Fax: +1 305-3586844