![Page 1: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/1.jpg)
Crossing The Usability ChasmAdvanced and Adaptive User Interfaces
Dr. Gil Hupert-Graff Managing DirectorUI – Human Factors [email protected]
Yochay KiriatyArchitect EvangelistMicrosoft [email protected]
![Page 2: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/2.jpg)
Turnning the pageOne of the first impressive demos in WPF
Demo
![Page 3: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/3.jpg)
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
![Page 4: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/4.jpg)
Crossing the Usability ChasmUX as a Chasm – A short Intro. to your brainCrossing the ChasmWatch your step while crossing
![Page 5: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/5.jpg)
![Page 6: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/6.jpg)
![Page 7: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/7.jpg)
This is not the chasm we are talking about…
We are not talking about disabilities.
![Page 8: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/8.jpg)
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?”
![Page 9: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/9.jpg)
Our brain can catch a ball
![Page 10: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/10.jpg)
Our brain can analyze a complex situation
![Page 11: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/11.jpg)
![Page 12: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/12.jpg)
The Challenger Disaster
![Page 13: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/13.jpg)
Early information
![Page 14: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/14.jpg)
It could be different
Edward R. Tufte, Visual Explanations: Images and Quantities, Evidence and Narrative (1992)
![Page 15: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/15.jpg)
0
50
100
150
200
250
300
1985 1990 1995 2000 2005
Wʱ rd
China Population (10^8)
Number of Features in MS Word
![Page 16: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/16.jpg)
Computers changes rapidly, people don’t!
Late 40’sEarly 60’s Early 70’sEarly 80’sThe 90’sEarly 2008
![Page 17: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/17.jpg)
It is all about bridging the chasm
![Page 18: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/18.jpg)
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
![Page 19: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/19.jpg)
We don’t mean this…
![Page 20: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/20.jpg)
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.
![Page 21: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/21.jpg)
Traditional Navigating Tools
![Page 22: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/22.jpg)
www.tafiti.comA search engine in action
Demo
![Page 23: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/23.jpg)
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
![Page 24: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/24.jpg)
What is attention?
Attention is simply the assignation of the mechanisms of analysis to a limited part of the perceptual field. (Neisser , 1974)
![Page 25: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/25.jpg)
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
![Page 26: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/26.jpg)
Word Speller In ActionA thinking process disruptor
Demo
![Page 27: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/27.jpg)
Word Speller* In ActionThe adaptive approach
* Also exists in WPF Text Control
Demo
![Page 28: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/28.jpg)
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 …
![Page 29: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/29.jpg)
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
![Page 30: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/30.jpg)
What is a mental model?
When I move files from the draft folder to the final folder, do they really move?
![Page 31: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/31.jpg)
Shopping Cart – A powerfull mental model
![Page 32: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/32.jpg)
![Page 33: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/33.jpg)
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.
![Page 34: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/34.jpg)
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 … ?
![Page 35: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/35.jpg)
Turnning the pageA mental model of a book
Demo
![Page 36: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/36.jpg)
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:
![Page 37: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/37.jpg)
Zooming Demo
Demo
![Page 38: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/38.jpg)
Prest ViewsLearning the mental model via animation
Demo
![Page 39: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/39.jpg)
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
![Page 40: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/40.jpg)
The Graph Demo
Trend change across years
Demo
![Page 41: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/41.jpg)
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
![Page 42: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/42.jpg)
Why How and What do we manipulate?Why?
In order to improve Usability (effectiveness, efficiency and satisfaction)
What?Mental ModelAttentionLoad
How?ColorSizeMovement
![Page 43: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/43.jpg)
News ApplicationThe first production WPF application in Israel
Demo
![Page 44: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/44.jpg)
Lets look again at the demoes
Turning the pageZoomingPresets AnimationPatient filesSpellerTafitiNews
![Page 45: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/45.jpg)
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
![Page 46: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/46.jpg)
Not all the users are the same …
![Page 47: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/47.jpg)
How long does the user willing to wait?
![Page 48: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/48.jpg)
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
![Page 49: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/49.jpg)
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
![Page 50: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/50.jpg)
Adaptive User InterfaceChanging animation speed
Demo
![Page 51: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/51.jpg)
A Question About Smart Tag
How can one use a smart tag in word editor using only the keyboard, not using the mouse?
![Page 52: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/52.jpg)
Clue
Right click = Shift+F10
![Page 53: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/53.jpg)
The Smart Tag Idea
Press Alt+Shift+F10
![Page 54: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/54.jpg)
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
![Page 55: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/55.jpg)
Dynamic Button Size Demo
Demo
![Page 56: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/56.jpg)
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.
![Page 57: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/57.jpg)
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
![Page 58: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/58.jpg)
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.
![Page 59: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/59.jpg)
Have we harm the UX?
Will we lose the audience/ users/ rating?Is the answer different for leisure applications or professional ones?
![Page 60: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/60.jpg)
Part 1 – There is a ChasmPart 2 – Tools to narrow the chasmPart 3 – The next step – Adaptive UI
Crossing the Usability Chasm Summary
![Page 61: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/61.jpg)
Patient Monitoring
Demo
![Page 62: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/62.jpg)
www.kartoo.comAnother search engine in action
Demo
![Page 63: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/63.jpg)
Our Message
Better UsabilityEffectivenessEfficiencySatisfaction
More Value to the userMore profitGet Professional help
More Information www.NextGUI.com
![Page 64: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/64.jpg)
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:
![Page 65: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/65.jpg)
Summary 2/3 – The chasm narrowing tools
By wisely usingColor changesSize changesMovements
We can manipulatemental modelsattention
And getEnhanced NavigationImproved Dialog styleBetter Mental ModelsClearer Visualization
![Page 66: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/66.jpg)
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.
![Page 67: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/67.jpg)
Dr. Gil Hupert-Graff Managing DirectorUI – Human Factors [email protected]
Yochay KiriatyArchitect EvangelistMicrosoft [email protected]
![Page 68: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/68.jpg)
©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.
![Page 69: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/69.jpg)
Q&A
![Page 70: The Human Brain Relationship: Advanced and Adaptive User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062319/55527707b4c905b4598b482b/html5/thumbnails/70.jpg)