the human brain relationship: advanced and adaptive user interfaces

Crossing The Usability ChasmAdvanced and Adaptive User Interfaces

Dr. Gil Hupert-Graff Managing DirectorUI – Human Factors Ltdhgil@ui.co.il

Yochay KiriatyArchitect EvangelistMicrosoft Israelyochayk@microsoft.com

Turnning the pageOne of the first impressive demos in WPF

Demo

Who is UI and Next GUI?Founded in 1998Over 800 ProjectsOver 300 CustomersThe leading usability company in IsraelEntrepreneur in WPF design and implementationJoined WizMagic.com from LA to start Next GUI:

Located in USSpecializes in WPF and Silverlight Applications.

www.NextGUI.com

Crossing the Usability ChasmUX as a Chasm – A short Intro. to your brainCrossing the ChasmWatch your step while crossing

This is not the chasm we are talking about…

We are not talking about disabilities.

Our brain can understand complex things

“The SPSS Processor is terminating due to a catastrophic error. Any working data file is lost. An attempt has been made to perform an input or output operation which is inconsistent with the mode of the file, e.g. direct access on a sequential file. This is a programming erro Restart the processor?”

Our brain can catch a ball

Our brain can analyze a complex situation

The Challenger Disaster

Early information

It could be different

Edward R. Tufte, Visual Explanations: Images and Quantities, Evidence and Narrative (1992)

0

50

100

150

200

250

300

1985 1990 1995 2000 2005

Wʱ rd

China Population (10^8)

Number of Features in MS Word

Computers changes rapidly, people don’t!

Late 40’sEarly 60’s Early 70’sEarly 80’sThe 90’sEarly 2008

It is all about bridging the chasm

Crossing the Usability Chasm

UX as a Chasm – A short Intro. to your brainCrossing the Chasm:

Enhanced NavigationImproved Dialog styleBetter Mental ModelingClearer VisualizationCrossing the Chasm Summary

Watch your step while crossing

We don’t mean this…

What is navigation model?Navigation model is the user's knowledge of her present location in the application and of the way to reach other specific locations or processes.

Traditional Navigating Tools

www.tafiti.comA search engine in action

Demo

Crossing the Usability Chasm

UX as a Chasm – A short Intro. to your brainCrossing the Chasm:

Enhanced NavigationImproved Dialog styleBetter Mental ModelingClearer VisualizationCrossing the Chasm Summary

Watch your step while crossing

What is attention?

Attention is simply the assignation of the mechanisms of analysis to a limited part of the perceptual field. (Neisser , 1974)

Attention exercise

12*12= 14*25= 12/5 =

13*13=18*25=17/6=1.4*6=124/4+9=11*(9+6)=2+6/4*5=7-9+12*3=6*6*7=

1.3*4= 5.2125/5+7= 3212*(3+5)= 964+5/2*4= 147-8+9*2= 17 5*5*8= 200

144350

2.4

Word Speller In ActionA thinking process disruptor

Demo

Word Speller* In ActionThe adaptive approach

* Also exists in WPF Text Control

Demo

Speller Leason

The red color attract attention and harm the main task – phrasing a sentence.Activating the speller in the correct timing of the workflow (Enter/ Save/ Print/ Send), improves the human performance.Save money …

Crossing the Usability Chasm

UX as a Chasm – A short Intro. to your brainCrossing the Chasm:

Enhanced NavigationImproved Dialog styleBetter Mental ModelingClearer VisualizationCrossing the Chasm Summary

Watch your step while crossing

What is a mental model?

When I move files from the draft folder to the final folder, do they really move?

Shopping Cart – A powerfull mental model

Mental Model Mefinition?

The mental model is knowledge of how the system works, what its components are, how they are related, what the internal processes are, and how they affect the components. Carroll, J. M., & Olson, J. R. (1987). Mental models in human-computer interaction: Research issues about what the user of software knows.

What is a mental model?A model the user have about the system:

What does it contain?Why does it contain it?How does it behave?Why does it behave this way?

It enables the user to work with the system and give answers to questions like

What will happen if I will press here?How can I … ?

Turnning the pageA mental model of a book

Demo

Zooming

When turning the mouse wheel forward (i.e. toward the table) what should happened zoom in or zoom out?The answer depends of the mental model you adopt. If it is a page that you have in mind, then it is zoom out, but if it is a camera, then it is zoom in. MS choose the camera mental model. About half of the world is paying the price With WPF it is easy to solve the problem:

Zooming Demo

Demo

Prest ViewsLearning the mental model via animation

Demo

Crossing the Usability Chasm

UX as a Chasm – A short Intro. to your brainCrossing the Chasm:

Enhanced NavigationImproved Dialog styleBetter Mental ModelingClearer VisualizationCrossing the Chasm Summary

Watch your step while crossing

The Graph Demo

Trend change across years

Demo

Crossing the Usability Chasm

UX as a Chasm – A short Intro. to your brainCrossing the Chasm:

Enhanced NavigationImproved Dialog styleBetter Mental ModelingClearer VisualizationCrossing the Chasm Summary

Watch your step while crossing

Why How and What do we manipulate?Why?

In order to improve Usability (effectiveness, efficiency and satisfaction)

What?Mental ModelAttentionLoad

How?ColorSizeMovement

News ApplicationThe first production WPF application in Israel

Demo

Lets look again at the demoes

Turning the pageZoomingPresets AnimationPatient filesSpellerTafitiNews

Crossing the Usability Chasm

UX as a Chasm – A short Intro. to your brainCrossing the Chasm:Watch your step while crossing

The Expert-Novice problemThe solution: Adaptive user interfaceAdaptive user interface Summary

Not all the users are the same …

How long does the user willing to wait?

Novice

Experts

Frequent use

Rare Use

Movement improve

understanding

Movement disturbs and cause sense of

slowing down

Movement enhances memory

Movement is needed for

understandingPregnancy self test

ATM

VS in its first days

Word

Animation needs

Crossing the Usability Chasm

UX as a Chasm – A short Intro. to your brainCrossing the Chasm:Watch your step while crossing

The Expert-Novice problemThe solution: Adaptive user interfaceAdaptive user interface Summary

Adaptive User InterfaceChanging animation speed

Demo

A Question About Smart Tag

How can one use a smart tag in word editor using only the keyboard, not using the mouse?

Clue

Right click = Shift+F10

The Smart Tag Idea

Press Alt+Shift+F10

Fits law

The time needed to reach a target is proportional to the distance from the target and the size of the target

t~d/st = time to complete the actiond = distance between hand (mouse) and

the target.s = Target size

Dynamic Button Size Demo

Demo

Which buttons will become bigger?

If you want to shorten operation time,Make the most used buttons bigger

If you want to raise the features usage,

Make the unused buttons bigger

In both cases it might improve efficiency.

Crossing the Usability Chasm

UX as a Chasm – A short Intro. to your brainCrossing the Chasm:Watch your step while crossing

The Expert-Novice problemThe solution: Adaptive user interfaceAdaptive user interface Summary

What do we change, and to what direction?

What do we change?Effect’s lengthEffect’s amplitude

What is the direction?Usually down to zeroBut not always, like in the buttons size.

Have we harm the UX?

Will we lose the audience/ users/ rating?Is the answer different for leisure applications or professional ones?

Part 1 – There is a ChasmPart 2 – Tools to narrow the chasmPart 3 – The next step – Adaptive UI

Crossing the Usability Chasm Summary

Patient Monitoring

Demo

www.kartoo.comAnother search engine in action

Demo

Our Message

Better UsabilityEffectivenessEfficiencySatisfaction

More Value to the userMore profitGet Professional help

More Information www.NextGUI.com

Summary 1/3 – The usability chasm

The human brain is limited, but the demands are in constant progress – This is the usability chasm origin.A professional usability design may help narrowing the chasm.WPF make it even easier for the usability engineers:

Summary 2/3 – The chasm narrowing tools

By wisely usingColor changesSize changesMovements

We can manipulatemental modelsattention

And getEnhanced NavigationImproved Dialog styleBetter Mental ModelsClearer Visualization

Summary 3/3 – Adaptive UX

Even if you used the tool wisely, you are trapped in the Novice – Expert dilemma:The effects help the novice, but annoy the expertWe proposed the adaptive UX, as a solution.It helps in:

Preventing the annoyance Improve efficiency (shorten operation time)Improve effectiveness (raising the feature use)

In most cases effects should extinct with time/ usageThis is only the beginning of correct use of WPF abilities, a lot more is expected in the next few years.

Dr. Gil Hupert-Graff Managing DirectorUI – Human Factors Ltdhgil@ui.co.il

Yochay KiriatyArchitect EvangelistMicrosoft Israelyochayk@microsoft.com

©2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after

the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Q&A