Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

When User Interface Patterns Become Mobile

This presentation contains the slides presented during the 8th Scientific Advisory Board Meeting for Integranova, Oliva Nova (Spain), 29-30 September 2011.

  • Be the first to comment

When User Interface Patterns Become Mobile

  1. 1. Jean Vanderdonckt,Thanh-Diane Nguyen<br />When User Interface Patterns<br />become Mobile –<br />IntegraNova MES goes<br />into the wild<br />
  2. 2. Aboutthepresenters<br />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<br />Thanh-Diane NguyenResearch and Teaching AssistantPhD studentthanh-diane.nguyen@uclouvain.be<br />These slides are freely available at: www.slideshare.net/jeanvdd/when-user-interface-patterns-become-mobile<br />
  3. 3. Whatis the situation so far?<br />In interactive systemstoday, the predominant situation = 1 user carrying out 1 taskat a time with 1 device (platform) in 1 environment<br />User<br />Task<br />Platform<br />Environment<br />
  4. 4. Whatis the situation so far?<br />Some variant situation = 1 user carrying out n tasksat a time with 1 device (platform) in 1 environment (multi-tasking)<br />User<br />Tasks<br />Platform<br />Environment<br />
  5. 5. Whatis the situation so far?<br />Consequent situation = 1 user carrying out n tasksatn timeswithm platforms in 1 environment (e.g., in office) (multi-platform)<br />User<br />Tasks<br />Platforms<br />Environment<br />
  6. 6. Whatis the situation so far?<br />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) <br />User<br />Tasks<br />Platforms<br />Environments<br />
  7. 7. Why multiple monitors?<br />Deviceside<br />Monitor surface increases, whilepricedecreases<br />[Harris,2002]<br />
  8. 8. Why multiple monitors?<br />User side<br />Usersprefer more display surface<br />User’sproductivityincreasesfrom 10% to 30% (althoughsomeusabilityproblems are raised) <br />[Harris,2002]<br />
  9. 9. Why multiple monitors?<br />User side<br />Usersprefer more display surface<br />User’sproductivityincreasesfrom 10% to 30%<br />Effects of Display Size on Task Times<br />160<br />140<br />120<br />100<br />Small<br />Average Task Time (Seconds)<br />80<br />Large<br />60<br />40<br />20<br />0<br />[Czerwinsky,2005]<br />
  10. 10. Why multiple monitors?<br />User side<br />Usersprefer more display surface<br />User’sproductivityincreasesfrom 10% to 30%<br />The tasks were easy to perform<br />5<br />4<br />3<br />Average Rating (1=Disagree, <br />5=Agree)<br />2<br />1<br />0<br />Small<br />Large<br />[Czerwinsky,2005]<br />Display Size<br />
  11. 11. Why multiple monitors?<br />User side<br />Usersprefer more display surface<br />User’sproductivityincreasesfrom 10% to 30%<br />[Czerwinsky,2005]<br />
  12. 12. (Amount of interactive systems)<br />(Amount of end users)<br />10 to 50 systems<br />for 1 user<br />10000<br />50000<br />2 or 3 systems<br />for 1 user<br />1 system for 1 user<br />1000<br />5000<br />100<br />500<br />1 system for 100 users<br />10<br />50<br />[Weiser, 1998]<br />1970<br />1980<br />1990<br />2000<br />2010<br />2020<br />[ForresterResearch, 2002]<br />Why multiple platforms?<br />
  13. 13. Why multiple platforms?<br />Some, many, all?<br />
  14. 14. [Pierce et al.,2004]<br />Whichplatformsshouldbesupported?<br />Somereasons<br />Sales increase<br />Capabilitiesincrease<br />
  15. 15. Whichplatformsshouldbesupported?<br />Break-even point before 2014<br />[MEE 2010]<br />
  16. 16. For which type of user?<br />
  17. 17. For which type of user?<br />
  18. 18. Consequence: transcodingneeded<br />
  19. 19. Which mobile phone to choose?<br />Feature phones<br />Screen resolution is too small<br />Web browsing: forget about it<br />Specific reasons<br />Smart phones<br />Screen resolution is moderate<br />Equipped with a physical keyboard<br />Web browsing: possible, but not very usable<br />Touch phones<br />Screen resolution becomes reasonable (iPhone is 320 x 480 pixels)<br />Supports various gestures for scrolling, zooming and navigating<br />User satisfaction ratings are highest for these devices<br />
  20. 20. Worldwide touch phone Sales to End Users by Operating System<br /> 2009 year <br /> 2010 year<br />Selected Smartphones: <br />Android by its great increase in sales and using<br />iOS : The first iPhone has revolutionized the design (own patterns and guidelines) of electronic devices that surround us.<br />20<br />Whichtouch phones to choose?<br />
  21. 21. First recommendation<br />Develop User Interface Patterns for both smart phones and touch phones<br />No otherprioritydevices<br />Unlessyou have a good reason to support a specialdevice<br />"Mobile sites beat full web sites", surprisingly (Nielsen Norman Group)<br />Better phones perform better in terms of average success rates (task completion):<br />Feature phones: 38%<br />Smartphones: 55%<br />Touch phones: 75%<br />
  22. 22. First recommendation<br />Consequence: dilemmabetweentwoapproaches<br />Single universaldevelopment: one for all<br />Multiple optimiseddevelopment: one for each<br />
  23. 23. First recommendation<br />How to revisit UI Patterns for IntegraNova MES?<br />What information shouldbeincluded?<br />Deducefrom the object model<br />What to gracefuldegrade?<br />Deducefrom types of contents and tasksthat<br />Are time-critical (e.g., deadline-based, emergency)<br />Manipulate constantly-updating information<br />Involvefrequently-used information<br />Require privacy<br />Are intrinsically based on communication with others (social networks, forums, twitter).<br />Platform considerations (layout)<br />Whatusability guidelines to consider?<br />General purpose vs platformspecific<br />
  24. 24. Step 1. Gatherusability guidelines<br />Problems<br />Huge variety of devices, software/hardware<br />Large quantity of available guidelines<br />Limitations of current works about guidelines<br />Incompleteness<br />Heavy description<br />Difficult interpretation<br />Conflicting issues<br />Out of date information<br />Lack of classification of guidelines<br />Examples<br />Guideline: “Impose a style in using CSS”<br />Guideline: “Let the user to choose its policy” (Norcier ,2008)<br />Guideline for desktop computer: “Design a page in order to be readable in 800 x 600 resolution” (Norcier ,2008)<br />Guideline for widescreen: “Design for 1024x768 minimum resolution” (Michele McDonough ,2010)<br />
  25. 25. Goal<br />Provide user interface designers and developers with support for designing multi-platform user interfaces<br />Sub-Goals<br />Know the state of the art related to guidelines for multi-platform interfaces.<br />Create the ergonomic guide<br />Disseminate the ergonomic guide among research groups devoted to improve usability of software systems.<br />Verify the usefulness of guidelines by an application<br />25<br />Step 1. Gatherusability guidelines<br />
  26. 26. Step 1. Gatherusability guidelines<br />Methodology based on the design cycle research<br />
  27. 27. Step 1. Gatherusability guidelines<br />Process<br />
  28. 28. Step 1. Gatherusability guidelines<br />Usability guideline template<br />
  29. 29. Step 1. Gatherusability guidelines<br />Example<br />
  30. 30. Step 1. Gatherusability guidelines<br />DESTINE : Design & Evaluation STudio for INtent-based Ergonomic web sites<br />Compatible XML language called GDL<br />Description of categories<br />237 available ergonomic guidelines for multi-plaforms in the database.<br />List, name, description, resume, illustration of each guideline<br />Structured and complete view on each guideline related to own categories<br />
  31. 31. Step 1. Gatherusability guidelines<br />
  32. 32. Step 1. Gatherusability guidelines<br />
  33. 33. Step 1. Gatherusability guidelines<br />
  34. 34. Step 1. Gatherusability guidelines<br />
  35. 35. Sub-step 1: Describe the context of use in terms of tags<br /> P + E / D / P&T(S)<br />Sub-step 2 : Idetify adaptation techniques for the context<br />Context : narrowbandwidth<br />smallscreenresolution P + E / D / P&T(S)<br />touch phone<br /><br />Step 2. When to applywhich guideline?<br />
  36. 36. Step 3. Apply them to User Interface patterns<br />Web View and Office View generated by IntegraNova MES<br />
  37. 37. Step 3. Apply them to User Interface patterns<br />Application of the ergonomic guide on Android: HAT<br />
  38. 38. Step 3. Apply them to User Interface patterns<br />Application of the ergonomic guide on iOS:HAT<br />
  39. 39. Step 3. Apply them to User Interface patterns<br />Application of the ergonomic guide on Android: Service Interaction Unit (SIU)<br />
  40. 40. Step 3. Apply them to User Interface patterns<br />Application of the ergonomic guide on iOS: SIU<br />40<br />
  41. 41. Step 3. Apply them to User Interface patterns<br />Application of the ergonomic guide on Android: Population Interaction Unit (PIU)<br />
  42. 42. Step 3. Apply them to User Interface patterns<br />Application of the ergonomic guide on Android:PIU<br />Model selection, filtering<br />
  43. 43. Application of the ergonomic guide on Android:Master Detail Interaction Unit<br />Step 3. Apply them to User Interface patterns<br />
  44. 44. Step 4. Which User Interface pattern is usable?<br />For eachIntegraNova MES User Interface Pattern<br />Twoplatforms (iOS vs Android)<br />Threealternate user interfaces based on<br />Usability guidelines<br />Adaptation techniques<br />Ask end user which one do theyprefer<br />44<br />
  45. 45. Example #1: SIU<br />Divergence of evolutions<br />Mobile platforms <br />Web interfaces<br />Flaws<br />Not adapted for small screen<br />Not adapted for touch screen…<br />Goals<br />Keepfunctionalities<br />Use new technologiescapabilities<br />45<br />Step 4. Which User Interface pattern is usable?<br />
  46. 46. Solution #1<br />Used tools<br />Jquerymobile<br />Applied techniques<br />None<br />Consequences<br /><ul><li>Important workload due tovertical scrolling
  47. 47. Adapted to touchscreen
  48. 48. Adapted to small screen</li></ul>Step 4. Which User Interface pattern is usable?<br />
  49. 49. Solution #2<br />Used tools<br />Jquery mobile<br />Applied techniques<br />Select remove principle (W3C)<br />Mesh structure (W3C)<br />Consequences<br /><ul><li>Weak guidance
  50. 50. Adapted to touchscreen
  51. 51. Adapted to small screen
  52. 52. Reduced workload</li></ul>47<br />Step 4. Which User Interface pattern is usable?<br />
  53. 53. Solution #3<br />Used tools<br />Jquery mobile<br />Applied techniques<br />Decomposition (W3C)<br />Linear structure (W3C)<br />Consequences<br /><ul><li>No feedback
  54. 54. Adapted to touchscreen
  55. 55. Adapted to small screen
  56. 56. Reduced workload
  57. 57. Good guidance</li></ul>48<br />Step 4. Which User Interface pattern is usable?<br />
  58. 58. Different versions exhibitdifferentbehaviors<br />Which version is the mostpreferred by end users on the targetplatform and why?<br />For thispurpose, weconducted an experiment<br />IBM CSUQ questionnaire with 19 questions<br />Each question on a 5-point Likertscale<br />4 resultingmetrics<br />Correlation: r=0.94 (!)<br />49<br />Step 4. Which User Interface pattern is usable?<br />
  59. 59. Paired tests<br />SYSUSE<br /> Version 2 > Version 1<br />INFOQUAL, INTERQUAL, USABILITY : <br />Version 2 > Version 1<br />Version 3 > Version 1<br />50<br />Step 4. Which User Interface pattern is usable?<br />
  60. 60. Example #2: adaptthe home page http://www.chambre-d-hote-baie-de-somme.com/ for touchplatforms(e.g., an Apple iPad, a TabletPC)<br />Use alternative designs<br />Take user preferenceintoaccountwhen possible<br />51<br />Step 4. Which User Interface pattern is usable?<br />
  61. 61. Step 4. Which User Interface pattern is usable?<br />Solution #1<br />Used tools<br />Jquery<br />Applied techniques<br />Decomposition (W3C)<br />Hierarchical structure (W3C)<br />Consequences<br /><ul><li>Confusion between buttons
  62. 62. Good guidance
  63. 63. Good consistency</li></ul>52<br />
  64. 64. Solution #2<br />Used tools<br />Jquery<br />Applied techniques<br />Decomposition (W3C)<br />Hierarchical structure (W3C)<br />Consequences<br /><ul><li>Loss of space  More vertical scrolling
  65. 65. Very good guidance
  66. 66. No more confusion between buttons</li></ul>53<br />Step 4. Which User Interface pattern is usable?<br />
  67. 67. Solution #3<br />Used tools<br />Jquery<br />Applied techniques<br />Full mesh structure (W3C)<br />Hierarchical structure (W3C)<br />Consequences<br /><ul><li>Bad guidance
  68. 68. Reduced workload</li></ul>54<br />Step 4. Which User Interface pattern is usable?<br />
  69. 69. Paired tests<br />SYSUSE<br />Version 1 > Version 2<br />INFOQUAL, INTERQUAL, ERGONOMY : <br />No significance<br />55<br />Step 4. Which User Interface pattern is usable?<br />
  70. 70. Example #3: adapt the Wikipedia page about YouTube http://www.chambre-d-hote-baie-de-somme.com/ for a smartphone<br />Use alternative designs<br />Take user preferenceintoaccountwhen possible<br />56<br />Step 4. Which User Interface pattern is usable?<br />
  71. 71. Solution #1<br />Used tools<br />Jquery mobile<br />Applied techniques<br />Select remove principle (W3C)<br />Mesh structure (W3C)<br />Consequences<br /><ul><li>Adapted to touchscreen
  72. 72. Adapted to small screen
  73. 73. Reduced workload
  74. 74. Very good guidance</li></ul>57<br />Step 4. Which User Interface pattern is usable?<br />
  75. 75. Solution #3<br />Used tools<br />Jquery mobile<br />Applied techniques<br />Star structure<br />Decomposition (W3C)<br />Consequences<br /><ul><li>Adapted to touchscreen
  76. 76. Adapted to small screen
  77. 77. Reduced workload
  78. 78. Good guidance</li></ul>58<br />Step 4. Which User Interface pattern is usable?<br />
  79. 79. Solution #3<br />Used tools<br />Jquery mobile<br />Applied techniques<br />Intra links (W3C)<br />Consequences<br /><ul><li>Important workload
  80. 80. Adapted to touchscreen
  81. 81. Adapted to small screen</li></ul>59<br />Step 4. Which User Interface pattern is usable?<br />
  82. 82. Preferences<br />Paired tests<br />SYSUSE, INFOQUAL, INTERQUAL<br />Version 1 > Version 3<br />Version 2 > Version 3<br />Usability : <br />Version 2 > Version 1> Version 3<br />60<br />Step 4. Which User Interface pattern is usable?<br />
  83. 83. So far, User Interface Patterns<br />Are appliedat design-time<br />Are predefined, inflexible<br />Are not context-dependent<br />New goal: go beyondthis situation<br />Determinetypicalcontexts of use (not all!)<br />Elicitrules for users, platforms, and environments<br />Use alternative UI patterns for the samecontext<br />Prioritize adaptation rulesinto a meta-rule<br />61<br />Pushing User Interface patterns to their best<br />
  84. 84. Pushing User Interface patterns to their best<br />62<br />
  85. 85. Context-aware adaptation of user interfaces<br />63<br />User interface pattern depending on the platform<br />Textual<br />Graphical<br />
  86. 86. Context-aware adaptation of user interfaces<br />Touch phones<br />64<br />Night version, 2 days<br />Day version, 2 days<br />
  87. 87. Context-aware adaptation of user interfaces<br />Tablet PC & iPad<br />65<br />Night version, 4 days<br />Day version, 4 days<br />
  88. 88. Context-aware adaptation of user interfaces<br />Desktop version<br />66<br />
  89. 89. 67<br />Context-aware adaptation of user interfaces<br />
  90. 90. Conclusion<br />User interface patterns are required<br />To maintainconsistency<br />To promotesystematicdevelopment<br />But shouldbeexpanded<br />To cover more contexts of use<br />Touch phones: iOS & Android<br />To switchfrom one pattern to another one when the context of use changes (not everythingcouldbepredefined, new contextsappear)<br />To beadaptedthemselves<br />TowardsContext-dependent UI patterns<br />
  91. 91. User Interface eXtensibleMarkupLanguage<br />http://www.usixml.org<br />http://www.usixml.eu<br />Register as a member of the UsiXML End-User Club at<br />http://www.usixml.eu/end_user_club<br />For more information and downloading,http://www.lilab.eu<br />Thankyouverymuch for your attention!<br />
  92. 92. User Interface eXtensibleMarkupLanguage<br />http://www.usixml.org<br />FP7 Selfmanprojecthttp://www.ist-selfman.org/<br />For more information and downloading,http://www.lilab.eu<br />Thankyouverymuch for your attention!<br />FP7 Serenoaprojecthttp://www.serenoa-fp7.eu<br />FP7 Humanprojecthttp://www.human.aero/<br />
  93. 93. SPAIN <br />Ctra. Las Marinas, km 2 <br />03700 Denia, Alicante <br />Tel: +34 96 642 70 60 <br />Fax: +34 96 642 70 05 <br />infod@integranova.com <br />www.integranova.com <br />Edificio Torre Europa <br />Paseo de la Castellana, 95–15º A <br />28046 Madrid <br />Tel: +34 91 418 58 17 <br />Fax: +34 91 418 69 99 <br />Sorolla Center <br />Av. Cortes Valencianas, 58 pl. 5ª <br />46015 Valencia <br />Tel: +34 96 045 16 48 <br />Fax: +34 96 045 16 01 <br />Avda. Diagonal, 640 – 6A <br />08017 Barcelona <br />Tel: +34 93 230 41 03 <br />Fax: +34 93 228 78 99 <br />GERMANY <br />Bavariaring 17 <br />80336 München <br />Tel: +49 89 520 310 40 <br />Fax: +49 89 520 310 422 <br />info@integranova.de <br />www.integranova.com <br />Terminalstrasse Mitte 18 <br />85356 München <br />Tel: +49 89 97007 - 264 <br />Fax: + 49 89 97007 - 200 <br />Collenbachstraße 47 <br />40476 Düsseldorf <br />Tel: +49 211 948 42 25 <br />Fax: +49 211 948 42 21 <br />info@integranova.de <br />www.integranova.com <br />SWITZERLAND <br />World Trade Center <br />Leutschenbachstrasse, 95 <br />8050 Zürich <br />Tel: +41 44 308 36 31 <br />Fax: +41 44 308 35 00 <br />info@integranova.ch <br />www.integranova.ch <br />AUSTRIA <br />Office Park Airport <br />Office Park I Top B02 <br />1300 Viena <br />Tel: +43 1 22787 149 <br />Fax: +43 1 22787 200 <br />USA <br />530 Lytton Avenue <br />2nd. Floor. <br />Palo Alto, CA 94301 <br />Tel: +1 650 617-3401 <br />Fax: +1 650 617-3201 <br />1221 Brickell <br />Av. Suite 1540 <br />33131 Miami/Florida <br />Tel: +1 305-3585988 <br />Fax: +1 305-3586844<br />

×