the human brain relationship: advanced and adaptive user interfaces
DESCRIPTION
Come learn how Windows Presentation Foundation can be used to create a flexible and adaptive UI that matches our cognitive abilities. Learn how to create a UI that solves the "too hard for beginners, and too easy for pros" problem. Find out what it takes to create real, efficient UX using adaptive UI, and review real production applications that implement the paradigm.TRANSCRIPT
Crossing The Usability ChasmAdvanced and Adaptive User Interfaces
Dr. Gil Hupert-Graff Managing DirectorUI – Human Factors [email protected]
Yochay KiriatyArchitect EvangelistMicrosoft [email protected]
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 [email protected]
Yochay KiriatyArchitect EvangelistMicrosoft [email protected]
©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
