when user interface patterns become mobile

Jean Vanderdonckt,Thanh-Diane NguyenWhen User Interface Patternsbecome Mobile –IntegraNova MES goesinto the wild

About the presenters

• Prof. Jean VanderdoncktHead of Louvain Interaction Lab (LiLab)Louvain School of ManagementUniversité catholique de LouvainLouvain-la-Neuve, [email protected], www.lilab.be

• Thanh-Diane NguyenResearch and Teaching AssistantPhD [email protected]

• These slides are freely available at: www.slideshare.net/jeanvdd/when-user-interface-patterns-become-mobile

mailto:[email protected]

http://www.lilab.eu/

http://www.lilab.be/

mailto:[email protected]

http://www.slideshare.net/jeanvdd/when-user-interface-patterns-become-mobile

What is the situation so far?

• In interactive systems today, the predominant situation = 1 user carrying out 1 task at a time with 1 device (platform) in 1 environment

User

Task Platform

Environment


• Some variant situation = 1 user carrying out n tasks at a time with 1 device (platform) in 1 environment (multi-tasking)

User

Tasks Platform

Environment


• Consequent situation = 1 user carrying out n tasks at n times with m platforms in 1 environment (e.g., in office) (multi-platform)

User

Tasks Platforms

Environment


• Final situation = 1 user carrying out n tasks at 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

Why multiple monitors?

• Device side– Monitor surface increases, while price decreases

Projected LCD Pricing 2002-2005

$437$378 $327 $283

$699$597

$510$436

$1,089

$905

$752$625

$0

$200

$400

$600

$800

$1,000

$1,200

2002 2003 2004 2005

$U

S

15" -13.5%

17" -14.6%

18" -16.9%

[Harris,2002]


• User side– Users prefer more display surface– User’s productivity increases from 10% to 30%

(although some usability problems are raised)

[Harris,2002]

Mutiple PCs and Displays

0%

10%

20%

30%

40%

50%

60%

70%

80%

None Multiple monitorsattached to

multiplecomputers.

Laptop anddesktop monitor

connectedtogether.

Dualmon or higher

Config

Pe

rce

nt

Re

sp

on

da

nts

All



[Czerwinsky,2005]

Effects of Display Size on Task Times

0

20

40

60

80

100

120

140

160

Avera

ge T

ask

Tim

e (

Seco

nds)

Small

Large



[Czerwinsky,2005]

The tasks were easy to perform

01

2

3

4

5

Small LargeDisplay Size

Avera

ge R

ati

ng (

1=

Dis

agre

e,

5=

Agre

e)



[Czerwinsky,2005]

I was satisfied with the ease of windows layout

012345

Display Size

Ave

rage

Rat

ing

(1=D

isag

ree,

5=Agr

ee)

Small

Large

1970 1980 1990 2000 2010 2020

10

100

1000

10000(Amount of end users)

(Amount of interactive systems)

50

500

5000

50000

1 system for 100 users

1 system for 1 user

2 or 3 systemsfor 1 user

10 to 50 systemsfor 1 user

[Weiser, 1998]

[Forrester Research, 2002]

Why multiple platforms?

Why multiple platforms?

• Some, many, all?

http://www.samsungfuns.com/Wallscreen/photos/2/2/highlighted.aspx

http://www.panoramtech.com/products/facility.html

Unit Sales (per thousand)

0

100.000

200.000

300.000

400.000

500.000

600.000

700.000

800.000

900.000

1.000.000

1997

1998

1999

2000

2001

2002

2003

2004

2005

2006

2007

Mobile Terminals

PC units

[Pierce et al.,2004]

Which platforms should be supported?

• Some reasons– Sales increase– Capabilities increase

Which platforms should be supported?

• Break-even point before 2014

[MEE 2010]

For which type of user?

Web users 100%

Multi-platform users 52%

Everywhere users 30%

For which type of user?

Personal computer

Personal Smartphone

Personal desktop computer

Professional desktop computer

Feature phone

Game station (Wii, Playstation, Xbox,…)

Professional laptop

Nintendo game station

Multimedia player

Tablet PC / iPad

Professional smartphone

0% 10% 20% 30% 40% 50% 60% 70% 80% 90%

69%

31%

68%

35%

18%

18%

14%

8%

7%

4%

4%

81%

77%

66%

41%

33%

32%

22%

17%

16%

12%

11%

Everywhere users

Web users

Consequence: transcoding needed

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

• 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

Which touch phones to choose?

First recommendation

• Develop User Interface Patterns for both smart phones and touch phones– No other priority devices– Unless you have a good reason to support a special

device– "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%


• Consequence: dilemma between two approaches– Single universal development: one for all– Multiple optimised development: one for each


• How to revisit UI Patterns for IntegraNova MES?– What information should be included?

• Deduce from the object model– What to graceful degrade?

• Deduce from types of contents and tasks that– Are time-critical (e.g., deadline-based, emergency)– Manipulate constantly-updating information– Involve frequently-used information– Require privacy– Are intrinsically based on communication with others (social networks,

forums, twitter).• Platform considerations (layout)

– What usability guidelines to consider?• General purpose vs platform specific

Performance

Size

Mobile Phone

SmartphonePocket PC

Tablet Computer

Notebook

Laptop

Desktop Computer

Step 1. Gather usability 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)

• 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



• Methodology based on the design cycle research


• Process


• Usability guideline template


• Example


• 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

Context : narrow bandwidth small screen resolution P + E / D / P&T(S) touch phone

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

Step 2. When to apply which guideline?

Step 3. Apply them to User Interface patterns

• Web View and Office View generated by IntegraNova MES


• Application of the ergonomic guide on Android: HAT


• Application of the ergonomic guide on iOS:HAT


Application of the ergonomic guide on Android: Service Interaction Unit (SIU)


• Application of the ergonomic guide on iOS: SIU

40


• Application of the ergonomic guide on Android: Population Interaction Unit (PIU)


• Application of the ergonomic guide on Android:PIU– Model selection, filtering

• Application of the ergonomic guide on Android:Master Detail Interaction Unit


Step 4. Which User Interface pattern is usable?

• For each IntegraNova MES User Interface Pattern– Two platforms (iOS vs Android)– Three alternate user interfaces based on

• Usability guidelines• Adaptation techniques

– Ask end user which one do they prefer

44

• Example #1: SIU– Divergence of evolutions

• Mobile platforms • Web interfaces

– Flaws• Not adapted for small screen• Not adapted for touch screen…

– Goals• Keep functionalities• Use new technologies

capabilities

45


• Solution #1– Used tools

• Jquery mobile

– Applied techniques• None

– ConsequencesX Important workload due to

vertical scrollingAdapted to touchscreenAdapted to small screen



• Jquery mobile

– Applied techniques• Select remove principle (W3C)• Mesh structure (W3C)

– ConsequencesX Weak guidanceAdapted to touchscreenAdapted to small screenReduced workload

47



• Jquery mobile

– Applied techniques• Decomposition (W3C)• Linear structure (W3C)

– ConsequencesX No feedbackAdapted to touchscreenAdapted to small screenReduced workloadGood guidance

48


• Different versions exhibit different behaviors• Which version is the most preferred by end

users on the target platform and why?– For this purpose, we conducted an experiment– IBM CSUQ questionnaire with 19 questions

• Each question on a 5-point Likert scale• 4 resulting metrics• Correlation: r=0.94 (!)

49


– Paired tests• SYSUSE

– Version 2 > Version 1• INFOQUAL, INTERQUAL, USABILITY :

– Version 2 > Version 1– Version 3 > Version 1

50


• Example #2: adapt the home page http://www.chambre-d-hote-baie-de-somme.com/ for touch platforms (e.g., an Apple iPad, a TabletPC)

• Use alternative designs• Take user preference into account when

possible

51




• Jquery

– Applied techniques• Decomposition (W3C)• Hierarchical structure (W3C)

– ConsequencesX Confusion between buttonsGood guidanceGood consistency

52


• Jquery

– Applied techniques• Decomposition (W3C)• Hierarchical structure (W3C)

– ConsequencesX Loss of space More vertical scrollingVery good guidanceNo more confusion between buttons

53



• Jquery

– Applied techniques• Full mesh structure (W3C)• Hierarchical structure (W3C)

– ConsequencesX Bad guidanceReduced workload

54


– Paired tests• SYSUSE

– Version 1 > Version 2• INFOQUAL, INTERQUAL, ERGONOMY :

– No significance55


• Example #3: adapt the Wikipedia page about YouTube http://www.chambre-d-hote-baie-de-somme.com/ for a smart phone

• Use alternative designs• Take user preference into account when

possible

56



• Jquery mobile

– Applied techniques• Select remove principle (W3C)• Mesh structure (W3C)

– ConsequencesAdapted to touchscreenAdapted to small screenReduced workloadVery good guidance

57



• Jquery mobile

– Applied techniques• Star structure• Decomposition (W3C)

– ConsequencesAdapted to touchscreenAdapted to small screenReduced workloadGood guidance

58



• Jquery mobile

– Applied techniques• Intra links (W3C)

– ConsequencesX Important workloadAdapted to touchscreenAdapted to small screen

59


– Preferences

– Paired tests• SYSUSE, INFOQUAL, INTERQUAL

– Version 1 > Version 3– Version 2 > Version 3

• Usability : – Version 2 > Version 1 > Version 3

60


• So far, User Interface Patterns– Are applied at design-time– Are predefined, inflexible– Are not context-dependent

• New goal: go beyond this situation– Determine typical contexts of use (not all!)– Elicit rules for users, platforms, and environments– Use alternative UI patterns for the same context– Prioritize adaptation rules into a meta-rule

61

Pushing User Interface patterns to their best

Pushing User Interface patterns to their best62

Context-aware adaptation of user interfaces

User interface pattern depending on the platform

Textual

Graphical

63


• Touch phones

64

Night version, 2 days Day version, 2 days


• Tablet PC & iPad

65

Night version, 4 days Day version, 4 days


• Desktop version

66

67


Conclusion

• User interface patterns are required– To maintain consistency– To promote systematic development

• But should be expanded– To cover more contexts of use

• Touch phones: iOS & Android

– To switch from one pattern to another one when the context of use changes (not everything could be predefined, new contexts appear)

– To be adapted themselves

• Towards Context-dependent UI patterns

For more information and downloading,http://www.lilab.eu

User Interface eXtensible Markup Languagehttp://www.usixml.orghttp://www.usixml.euRegister as a member of the UsiXML End-User Club at

http://www.usixml.eu/end_user_club

Thank you very much for your attention!



http://www.usixml.org/


http://www.usixml.eu/

http://itea.usixml.org/

For more information and downloading,http://www.lilab.eu

User Interface eXtensible Markup Languagehttp://www.usixml.org

FP7 Selfman projecthttp://www.ist-selfman.org/

Thank you very much for your attention!

FP7 Serenoa projecthttp://www.serenoa-fp7.eu

FP7 Human projecthttp://www.human.aero/





http://www.ist-selfman.org/


http://www.serenoa-fp7.eu/



SPAIN Ctra. Las Marinas, km 2 03700 Denia, Alicante Tel: +34 96 642 70 60 Fax: +34 96 642 70 05 [email protected] 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 [email protected] 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 [email protected] www.integranova.com

SWITZERLAND World Trade Center Leutschenbachstrasse, 95 8050 Zürich Tel: +41 44 308 36 31 Fax: +41 44 308 35 00 [email protected] 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

when user interface patterns become mobile

Technology

user interface

user interface

user interface

user sideusersprefer

aware adaptation

version 2

display surfaceusersproductivityincreasesfrom

mesh structure