When User Interface Patterns Become Mobile

2,302 views

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,302
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
28
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

×