When User Interface Patterns Become Mobile

  • 1,869 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,869
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
23
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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?
  • 46. Solution #1
    Used tools
    Jquerymobile
    Applied techniques
    None
    Consequences
    • Important workload due tovertical scrolling
    • 47. Adapted to touchscreen
    • 48. Adapted to small screen
    Step 4. Which User Interface pattern is usable?
  • 49. Solution #2
    Used tools
    Jquery mobile
    Applied techniques
    Select remove principle (W3C)
    Mesh structure (W3C)
    Consequences
    • Weak guidance
    • 50. Adapted to touchscreen
    • 51. Adapted to small screen
    • 52. Reduced workload
    47
    Step 4. Which User Interface pattern is usable?
  • 53. Solution #3
    Used tools
    Jquery mobile
    Applied techniques
    Decomposition (W3C)
    Linear structure (W3C)
    Consequences
    • No feedback
    • 54. Adapted to touchscreen
    • 55. Adapted to small screen
    • 56. Reduced workload
    • 57. Good guidance
    48
    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?
  • 61. Step 4. Which User Interface pattern is usable?
    Solution #1
    Used tools
    Jquery
    Applied techniques
    Decomposition (W3C)
    Hierarchical structure (W3C)
    Consequences
    • Confusion between buttons
    • 62. Good guidance
    • 63. Good consistency
    52
  • 64. Solution #2
    Used tools
    Jquery
    Applied techniques
    Decomposition (W3C)
    Hierarchical structure (W3C)
    Consequences
    • Loss of space  More vertical scrolling
    • 65. Very good guidance
    • 66. No more confusion between buttons
    53
    Step 4. Which User Interface pattern is usable?
  • 67. Solution #3
    Used tools
    Jquery
    Applied techniques
    Full mesh structure (W3C)
    Hierarchical structure (W3C)
    Consequences
    • Bad guidance
    • 68. Reduced workload
    54
    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?
  • 71. Solution #1
    Used tools
    Jquery mobile
    Applied techniques
    Select remove principle (W3C)
    Mesh structure (W3C)
    Consequences
    • Adapted to touchscreen
    • 72. Adapted to small screen
    • 73. Reduced workload
    • 74. Very good guidance
    57
    Step 4. Which User Interface pattern is usable?
  • 75. Solution #3
    Used tools
    Jquery mobile
    Applied techniques
    Star structure
    Decomposition (W3C)
    Consequences
    • Adapted to touchscreen
    • 76. Adapted to small screen
    • 77. Reduced workload
    • 78. Good guidance
    58
    Step 4. Which User Interface pattern is usable?
  • 79. Solution #3
    Used tools
    Jquery mobile
    Applied techniques
    Intra links (W3C)
    Consequences
    • Important workload
    • 80. Adapted to touchscreen
    • 81. Adapted to small screen
    59
    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