interaction styles
DESCRIPTION
Interaction Styles. Graphical User Interfaces. Graphical User Interfaces (GUI). GUIs WIMP (Windows, Icons, Menus and Pointers) NERD (Navigation, Evaluation, Refinement & Demonstration) GUIs are graphical interfaces. Most computer interfaces are GUI based. GUI Interaction Styles. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/1.jpg)
Interaction StylesInteraction Styles
Graphical User Interfaces
![Page 2: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/2.jpg)
Graphical User Interfaces (GUI)
GUIs 1. WIMP (Windows, Icons, Menus and Pointers)
2. NERD (Navigation, Evaluation, Refinement & Demonstration)
GUIs are graphical interfaces.
Most computer interfaces are GUI based.
![Page 3: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/3.jpg)
GUI Interaction Styles1. Typed-Command Languages (Not really GUI)
2. Data & Scientific Visualization
3. Visual Databases
4. Video
5. Animation
6. Virtual Reality
7. Multimedia-Hypermedia
8. Touchscreens
9. Speech Synthesis
10. Natural Language
![Page 4: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/4.jpg)
Interaction StylesInteraction Styles
Typed-Command Languages
![Page 5: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/5.jpg)
Typed-Command Languages
Typed-Command Languages– UNIX, DOS, SQL
Advantages– Provides powerful, brief and rapid HCI.– Great for power users
Disadvantage– Extensive training to learn all of the commands.– Large number of errors due to typos
![Page 6: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/6.jpg)
Design Guides
Choose meaningful, specific, distinctive names.
Command format should be consistent.– Examples: ls –l , head -10 x.txt, etc.
Allow easy correction of typing errors.– UNIX uses arrow keys
Allow users to create macros, shortcuts
![Page 7: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/7.jpg)
Interaction StylesInteraction Styles
Data and Scientific Visualization
![Page 8: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/8.jpg)
Data and Scientific Visualization Interfaces that use graphics to represent data.
– Models real world data (sometimes in real time)– Creates visual representation of physical phenomenon
Examples:– Medical Imaging of the human body (full body scans)– Fluid flow (air over an airplane’s wing)– Weather patterns– 3D Imaging of Molecules, DNA, etc.
![Page 9: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/9.jpg)
Interaction StylesInteraction Styles
Visual Databases
![Page 10: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/10.jpg)
Visual Databases
Represent data (usually textual) in a visual format.
Multimedia databases are visual databases.
Examples:– A collection of images in a museum under a common
interface.– Scatter plots, graphs, Treemaps (U of Maryland)
![Page 11: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/11.jpg)
What’s The Difference?
Data & Scientific Visualization – Typically represents real time physical phenomenon– Created as real world changes
Visual Databases– Not changing at the time visualization is created.– Usually a historical point of view.
• Historical meaning not right now.
![Page 12: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/12.jpg)
Interaction StylesInteraction Styles
Video
![Page 13: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/13.jpg)
Video Captures the real world in the form of digital
video.
Disadvantages:– Formats: mpeg, avi, Quicktime, etc.– Size
Advantages:– Good for some training environments– Gives the real perspective on the world– Entertaining
![Page 14: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/14.jpg)
Interaction StylesInteraction Styles
Animation
![Page 15: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/15.jpg)
Animation Where visual databases and scientific
visualization meet.
Cartoon like representations of characters and their world.
Common uses:– Training simulation.– Entertainment– Education
![Page 16: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/16.jpg)
Animation vs. Video
Animation is made up, fictional.
Video is real, reality.
Both are used for the same purposes.
When to use video vs. animation?– Depends: can you get real video?– Do you have animation software?
![Page 17: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/17.jpg)
Interaction StylesInteraction Styles
Virtual Reality
![Page 18: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/18.jpg)
Virtual Reality Allows people to immerse into interface.
Advantages:– Great for training.– Good simulation environment
Disadvantages:– Expensive, at the moment– Dangerous to your health if it is too real
![Page 19: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/19.jpg)
Interaction StylesInteraction Styles
Multimedia-Hypermedia
![Page 20: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/20.jpg)
Multimedia-Hypermedia
World Wide Web
Advantages:– Accessibility is growing– We all know and use the web– Access from almost anywhere
Disadvantages:– So easy to develop, design is compromised.
![Page 21: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/21.jpg)
Interaction StylesInteraction Styles
Touchscreens
![Page 22: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/22.jpg)
Touchscreens
Your finger is the pointer/mouse.
Advantages:– More people have fingers than those with a mouse.– Durable in harsh environments and public areas.
Disadvantages:– Arm fatigue can be an issue when typing is needed.– Screen space is not always appropriate
![Page 23: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/23.jpg)
Touchscreens
Personal Digital Assistants (PDA) are touchscreen devices.
![Page 24: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/24.jpg)
Interaction StylesInteraction Styles
Speech Synthesis
![Page 25: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/25.jpg)
Speech Synthesis
Audible sounds and words from the computer.
Advantages:– Visually and physically disabled users– It is natural to listen
Disadvantages:– Synthetic voices can be annoying for some users
![Page 26: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/26.jpg)
Agent User Interfaces
![Page 27: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/27.jpg)
Interaction StylesInteraction Styles
Natural Language
![Page 28: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/28.jpg)
Natural Language
HCI is accomplished using natural language. This could be spoken or typed natural language. HCI is close to Human-Human Interaction.
![Page 29: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/29.jpg)
Natural Language
Advantages:– It is natural to interact natural– Requires less training
Disadvantages:– Speech recognition is good, but not really good.
![Page 30: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/30.jpg)
Interaction StylesInteraction Styles
Interaction Style Selection
![Page 31: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/31.jpg)
How To Select Interaction Style?
1. Typed-Command Languages (Not really GUI)
2. Data & Scientific Visualization
3. Visual Databases
4. Video
5. Animation
6. Virtual Reality
7. Multimedia-Hypermedia
8. Touchscreens
9. Speech Synthesis
10. Natural Language
![Page 32: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/32.jpg)
Interaction Style Selection
1. User Centered Design– Do the users like cartoons, video?– Visually and/or physically disabled?– What interaction style are the users use to using?
2. Environment– Public access– Internet access– Classroom access– Infrastructure
![Page 33: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/33.jpg)
Interaction Style Selection
3. Money– How much do they want to spend?
![Page 34: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/34.jpg)
Example Client: Local school district.
Goal: Provide students with up to date information on school events.
How do you proceed?
![Page 35: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/35.jpg)
Example Client: Local school district.
Goal: Educate students on racial tensions in America in the 20th Century, for their school district’s region.
How do you proceed?
![Page 36: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/36.jpg)
Example Client: Google.
Goal: Provide employees with 401K updates.
How do you proceed?
![Page 37: Interaction Styles](https://reader035.vdocuments.mx/reader035/viewer/2022062321/56812c2e550346895d90afe0/html5/thumbnails/37.jpg)
Example Client: FOX Sports.
Goal: Provide online viewers with up to date stats on currently running games.
How do you proceed?