h2 computing (9597)
DESCRIPTION
H2 Computing (9597). Module 2 : Interface And Interactions. 2.1 Interacting with computers. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/1.jpg)
H2 Computing (9597)Module 2 : Interface And Interactions
![Page 2: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/2.jpg)
2.1 Interacting with computersStudents will learn about and apply good design principles and techniques for effective user interfaces and interactions to facilitate navigation and usability of computer systems; and data input and output for computer systems. Students will also know and understand the effects of technology developments and the use of technology on people and organizations, and in society.
Students should know and understand2.1.1 Types of user interfaces
(eg. Command line, menu, form-based, graphical)2.1.2 Specifications of appropriate interface and user interaction2.1.3 Design considerations for user interfaces2.1.4 Interaction techniques such as mouse click, key press, use of voice, gesture,
and eye movement2.1.5 Interaction styles such as command line, menu, graphical user interface
and virtual reality2.1.6 Social, ethical and economic effects of the use of computers at work, in
life and play.
![Page 3: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/3.jpg)
“ Human-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them. ”
[ ACM SIGCHI Curricula for Human-Computer Interaction [Hewett et al., 2002, page 5] ]
What is Human Computer interaction?
![Page 4: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/4.jpg)
Design• A plan or drawing produced to show the look and
function or workings of object before it is made.
Evaluation• Assessment• the making of a judgement about the amount,
number, or value of something;
Implementation• Execution• the process of putting a decision or plan into effect;
![Page 5: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/5.jpg)
Interactive
• Accepting input from a human. • Interactive computer systems are programs
that allow users to enter data or commands.• A non-interactive program is one that, when
started, continues without requiring human contact.
• A compiler is a non-interactive program, as are all batch processing applications.
![Page 6: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/6.jpg)
Why is HCI important?
It all comes down what it aims to achieve
The goal of interaction between a human and a machine at the user interface is effective operation and control of the machine, and feedback from the machine which aids the operator in making operational decisions.
Effective: successful in producing a desired or intended result
![Page 7: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/7.jpg)
Why HCI?
User interfaces exist for various systems, and provide a means of:• Input
– allowing the users to manipulate a system• Output
– allowing the system to indicate the effects of the users' manipulation
![Page 8: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/8.jpg)
Task
What are the common input and output devices and how we use them to • Manipulate & maneuver in a computer system• allowing the system to indicate the effects of
the users' manipulationWhy is it an effective device?Explore different I/O methods
![Page 9: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/9.jpg)
Task OutcomeI/O devices provides a medium for interactivityInput devices
• Purpose: Provides data and control signals to a computer
Output devices
• Purpose: converts machine-readable information into human-readable form
Your answers must cover inputs and outputs for the followings: • Text• Graphics• Sound• Video
![Page 10: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/10.jpg)
Task OutcomeI/O devices provides a medium for interactivityInput devices
• Purpose: Provides data and control signals to a computer• Capture user inputs such as text, sound, movements, graphics, gestures• Devices: Keyboard, Mouse, Microphone, Scanner, Video Cameras, …• The choice of it depends on the what is to be communicated to the computer• Example:
– Keyboard (text), – Mouse (pointing), – Microphone (Audio), – Scanner (Graphics), – Video Cam (Sequences)
![Page 11: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/11.jpg)
Task OutcomeI/O devices provides a medium for interactivity
Output devices
• Purpose: converts machine-readable information into human-readable form • Devices: Monitor/Displays, Speakers, Printer, ….• The choice of it depends on the what is to be communicated to human• Example:
– Monitor (Display text, graphics, videos), – Speakers (Audio), – Printer (Graphics)
![Page 12: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/12.jpg)
How about this?
![Page 13: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/13.jpg)
How about this?Accelerometer
• a device that can measure the force of acceleration, whether caused by gravity or by movement.
• An accelerometer can therefore measure the speed of movement of an object it is attached to.
![Page 14: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/14.jpg)
How about this?Gyroscope
• It is a device used to measure or maintain orientation.
• the gyroscope together with the device’s accelerometer improves motion sensing accuracy and allows the iPad to measure in which direction you are moving/rotating it in space (roll, pitch and yaw), how much and how fast.
![Page 15: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/15.jpg)
How about this?Accelerometer + three-axis gyroscope + compass
• They sense which direction iPad is heading and how it’s moving. So games, maps, and other apps know your every twist, turn, tilt, and 360.
![Page 16: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/16.jpg)
Rare Devices• Input: Nose Hardware - Gesture interface• Output: Smell-O-TV - Release Scents
• Scent as an Outputhttps://www.youtube.com/watch?v=PiWdF3u9C0whttp://mashable.com/2014/03/05/oscar-mayer-bacon-app/?utm_cid=mash-com-fb-main-link
![Page 17: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/17.jpg)
“ Human-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them. ”
[ ACM SIGCHI Curricula for Human-Computer Interaction [Hewett et al., 2002, page 5] ]
![Page 18: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/18.jpg)
Interacting with computers
What is user interface?• In short, UI …• The means by which the user and a computer
system interact, in particular the use of input devices and software
![Page 19: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/19.jpg)
Good or Bad UI? Why? How do we measure?
![Page 20: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/20.jpg)
EFFECTS OF BAD UI DESIGN
![Page 21: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/21.jpg)
Popular InterfacesWindow OS
MAC OS
Characteristics of these OS UIs that make them widely adopted?
![Page 22: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/22.jpg)
EvolutionWindows 8
Note that:• Some of the key
UIs in older versions are replaced/removed/ Hidden
![Page 23: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/23.jpg)
Mobile InterfacesIOS• Enable by new devices
![Page 24: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/24.jpg)
Mobile Interfaces
Android• Enable by new devices
![Page 25: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/25.jpg)
Things to ponder
• What are the different types of UI?• Characteristics of good/Bad UIs • How UI evolves from versions/time?
Before we study the above, its important to look at Usability:• What do we use it for?• What are the outcomes we hope to achieve from using the system?
![Page 26: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/26.jpg)
Interacting with computers
Outcome of an effective UI DesignUsability
– is the ease of use and learnability of a human-made object.
– It is not possible to evaluate the usability of an interface without tying it up with the actual activities the user wants to use the system for.
![Page 27: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/27.jpg)
What do you think is the level of usability for Windows OS UI?
(Windows 7)
![Page 28: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/28.jpg)
Interacting with computersSpecifications of appropriate interface and user interactionUnder this questions we have a few things to clarify
What kind of interface are we looking at?
What is the purpose of using the computer?
![Page 29: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/29.jpg)
Interacting with computers
What is the purpose of using the computer?
![Page 30: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/30.jpg)
What is the purpose of using the computer?
We interact through Computers for various purposeFor Work & Studies
– Word processing– Presentation– Data analysis– Programming
For Leisure– Gaming– Browsing Web sites
• etc
![Page 31: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/31.jpg)
Interacting with computers
What kind of interface are we looking at?
![Page 32: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/32.jpg)
Interacting with computers
What are the different types of interfaces?• Graphical User interface• Command line interface• Menu interface
![Page 33: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/33.jpg)
Interacting with computers
What are the different types of interfaces?• Graphical User interface
– A visual way of interacting with a computer using items such as windows, icons, and menus.
– Instead of typing in a command we ‘click’ , ’Select’ using a pointing device
Devices: Pointing Devices, Mouse, touchpads etc
![Page 34: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/34.jpg)
What are the characteristics of GUI?
![Page 35: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/35.jpg)
What are the characteristics of GUI?
• User interacts with graphics rather than text• Direct manipulation of the graphic elements• user clicks on a visual screen that has icons,
windows and menus, by using a pointing device, such as a mouse.
• Hints/Help given via pop ups• WIMP "window, icon, menu and pointing device"
paradigm– Note: Not all GUIs satisfy the WIMP paradigm eg. Mobile
![Page 36: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/36.jpg)
Interacting with computers
Command line interface• accept only predefined command names
Eg. DOS (non-graphical command line operating system created for IBM compatible computers that was first introduced by Microsoft in August 1981)- List of commands @- http://www.computerhope.com/overview.htm- Command prompt
Device: Keyboards
![Page 37: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/37.jpg)
What are the characteristics of CLI?
• User interacts by input text• No help given unless command input by user• What are the strengths of CLI ?
![Page 38: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/38.jpg)
What are the strengths of CLI?– Complete control over system
• Passing of arguments for a command– Powerful for many tasks
• consider having a directory with hundreds of different file types in it. Moving, copying, eventually renaming them would be very hard in a GUI file browser
– Less memory– Allow a user to perform one or more commands using
one simple, easy to write command.
IF CLI is so good why do masses still move on to GUI?
![Page 39: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/39.jpg)
Interacting with computers
Menu interface– menu based interface offers the user a list of
option from which the user can choose.– menu-based interfaces allow the user to select the
correct command from a list (the menu) presented onscreen
– Beside applications, commonly found on monitors , TV, devices
![Page 40: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/40.jpg)
![Page 41: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/41.jpg)
![Page 42: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/42.jpg)
![Page 43: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/43.jpg)
Characteristics of Menu Based Interface?
• User interacts by choosing the correct/ preferred options
• No help necessary• Why MBI?
![Page 44: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/44.jpg)
Characteristics of Menu Based Interface?
• Why MBI?– Easy to use– No commands to remember– Confined by Input methods– To Limit the input choices
![Page 45: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/45.jpg)
Interacting with computers
Other UIsTouchscreens (No pointing devices)• They work by your finger touching a screen. The pressure
is detected and translated by the device into instructions.• Used in
– Cashpoint machines (ATMs) have touch sensitive screens– Ticket ordering systems in train and bus stations– Museums and art galleries often have touch sensitive screens– Smart phones make use of touch sensitive interfaces
• Very similar to GUI just without the input devices
![Page 46: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/46.jpg)
Task 2 – Pair Work - 10 minsTask descriptions: Compare & Contrast the various form of UI• What are the strength of each UI?• What are the weakness of each UI?Which is the best UI and why?
![Page 47: H2 Computing (9597)](https://reader035.vdocument.in/reader035/viewer/2022062305/56816374550346895dd451b8/html5/thumbnails/47.jpg)
HomeworkExpand on your group work and do a write up on the strength & weaknesses of
– CLI– MBI– GUI
In your opinion, which is the best interface and justify why so.
Word processed and print a copy for submission.