ࡱ> QSPY ;bjbjWW )n==7*]88 Dc FHHH:V * $  N N <<<<"FF<t<hF,`g<6Human Computer Interaction Definitions The study of People, Computer Technology and the way they interact with each other. The study of how humans interact with computers, focusing on how to make computers more useful & usable. Contributing Bodies Computer Science Engineering & Design Implementation, Feasibility, Performance & Reliability Artificial Intelligence Cognitive Science Linguistics UI Text On-line Help Ergonomics & Human Factors Navigation & Feedback Visual Design Shapes, Colours, Layout, Icons, etc Social & Organisational Psychology Analysing the psychology of users Education Training Course design & delivery Relative to target audience Purpose Why Bother? The main aim is to produce systems that are Usable Safe Functional Effective Efficient Everyone has trouble with setting video Lots of stories about poor UI design UI only a small part of the overall system but arguably the most important An integrated UI must be ensured with consistent standards for text ( size & font ), colours, layout, buttons, etc. A good UI is easily learned by a novice user Beneficial to get early user feedback on UI It could highlight missing or under-rated functionality Benefits of HCI Increased Safety Reduce Human Error Economic Benefits Higher Productivity Reduce Training Costs Improve Job Satisfaction - Reduce Staff Turnover Reduce Support Costs - Service helpdesk Improve Customer Satisfaction Their query can be dealt with quickly & effectively ( the operator was able to answer all their questions accurately while they were on the phone ). Types of Interaction Interaction takes place at the User Interface Not just GUI Windows Icons Menus Other methods include Touch Screens Speech Recognition - Natural Language Interaction Sounds - Warnings & Errors Gestures - Fighter Pilots - Line-of-Sight Targeting Considerations Improved access for physically challenged Accuracy Speed Ease of use Training requirements Does the user feel comfortable using the method? Does it give sensible feedback? Different UIs in Different Situations Warehouse - touch screen Back Office - mouse, keyboard, etc. Developments in HCI Mouse Conceptualised in 1965 First products emerged 1980 1 button mouse Subsequently, 2 & 3 button mouse Latest - rollerball & shaped rollerball Windowing System Conceptualised in 1960 First products emerged 1974 - X Windows, MS Windows Applications Word Processing, Spreadsheets, Databases etc. Integrated Applications - OLE, DDE Hypertext Conceptualised in 1960 First products emerged 1987 Mosaic - first web browser Popularised by WWW Icons Interface Builders Speech & Gesture Virtual Reality HCI has a relatively short history What Makes a Good UI? Usability Effectiveness How easily a task can be completed? Learnability How much training & practice is needed before the system can be used effectively? Is it natural to use - intuitive? Different levels of expertise - Novice, Intermediate or Expert Flexibility Is the interface still effective if there are changes in the task or environment? User Attitude & Expectations Do users find the system tiring & frustrating or rewarding & satisfying? Influenced by alternatives - competitive or similar products Different ways to achieve the same result Users' Mental Models Interaction with system causes users to form a Mental Model of ...what is in the system how it is built how the components interact with each other This has a serious affect on the usability of the system. Computer System can be thought of as an Iceberg Only a fraction is visible on the surface but a large structure of objects, relationships and behaviours is hidden. The mental model of the user is concerned with understanding the submerged part of the system. Example The analogy between a desktop ( the surface of a physical desk ) and the Computer Desktop Views A visual representation of an object in the UI. There may be many views of an object, e.g. a document in a word processor Icon View - the document is minimised Outline View - shows the document structure Edit View - editing & manipulating the text Print Preview - the page as it would be printed on paper User-Centred Development To achieve a high level of usability, a user-centred approach to system development must be followed. Some features of this are The designer should know who the end users are and what their requirements are. End users play an active role throughout the analysis and design The designers and end users jointly evaluate the usability of designs early in development and modify designs according to feedback. This requires that a prototyping approach to system development is taken. Contrast with System-Centred Development Specify functionality requirements Specify & design the system data Design system functions Design user interface 'on top' of system functions Following this approach, user interface often provides fragmented support for user tasks and are difficult for users to learn & use Highlights of UCD Effort Objectives The system ( & UI ) has well understood & supported objectives. A top-down UI architecture can be designed A quick turn-around from User Task Analysis Lots of design iterations from End-User feedback sessions Characteristics Analyse Users & their tasks Iterative Approach to Designing & Evaluating the UI HCI vs. UCD Terms are often used interchangeably HCI - scientific approach UCD - applied approach Research Areas Prototyping Interaction & Navigation will become very important in marketing on the WWW. Why would a user prefer to click 1 link rather than another? Visual Communications Related to the above but more generalised Applications Interactive Learning Hypermedia WWW User Task Analysis Goals Define who the End-Users are What are they going to achieve by using the system? What are their Characteristics & Expectations? In what type of environment(s) will be the system operate - warehouse vs. back office Rationale for Using UCD Support for a task will increase the system usefulness Users are the experts, not the analysts or designers Designers often make assumptions about End-Users Attitudes Knowledge Computer Literacy Get the Users involved as early as possible in Lifecycle Prototyping Rapid Application Development Almost Prototype should be thrown away after the information gathering has been completed. RAD - the final result becomes the installed application Advantages Find out UI requirements early on What users want or don't want - like/don't like Could identify requirements for additional functionality Wouldn't it be good if it would Disadvantages Prototype typically becomes the actual system Supposed to be thrown away Actual system may not live up to expectations in terms of performance, reliability, etc. Prototype has affected user expectations UI Development Guidelines System may be very good functionally but if the UI is unfriendly or difficult to use, the users won't want to use it. Implement UI that a) the users like ; and b) suits their level of computer literacy Support for different tasks Series of steps that are needed to complete a task are implemented by navigating a number of related forms or dialogs Common Sense with using fonts, sizes, colours, etc. Have any of the target users got any visual impairments - colour blindness, epilepsy, etc. Navigation Use shortcuts sensibly & consistently throughout Don't make the user have to move between keyboard & mouse repeatedly Feedback Error messages must make sense if the user caused the error Should give some guidance on how to avoid the problem next time 'Fault 136 - Invalid key code' doesn't mean anything in any user context For Technical, non-recoverable errors this is acceptable when Technical Service have to get involved to bring the system back on-line and to investigate the cause ( and prevention ) of the error 'Value must be numeric' tells the user (s)he tried to input a character other than 0->9 3 Levels of Error Messages Guidance - 'Enter the customer's account number' Warning - 'Value must be supplied' Fatal - 'Required data not supplied' Implications of Human Cognition Limited Memory Don't make users remember Frequent task closure Recognition rather than recall Humans make errors Prevention Intercept error with helpful error messages Allow the user to undo an actin if they don't like the result Scope for Exploration Allow them to explore the system's capabilities without the fear of them doing any permanent damage Task Analysis - Information Gathering User Characteristics Domain knowledge Expectations Work Environment Roles & Responsibilities Priorities Organisational Values Tasks Task Flow Bottlenecks Inputs / Outputs Items used / needed to complete tasks Reports Forms How are they used Example Hotel Check-in Methods Notes Audio Video Advantages At the coal-face The end-users are being watched / listened to What they do and say No intermediary bias There are no interpretations from another party Disadvantages Subset of tasks Only a subset of tasks may be observed Access to users work area May be difficult to gain permission Time consuming Sometimes too much data can be observed Difficult to make notes ( video & audio ) Interviews Face-to-face Phone Paper Surveys Advantages Low cost Can be done remotely Disadvantages Answers limited to the scope of the questions Could lead respondent down 1 path - what about others? I/O Control & Processing Software Process Resources ( data ) are supplied, processed ( transformed / used in some unspecified way ) and then output ( to the calling module or to storage devices ). It may be in a different format but it should be different in some way. Examples of Input/Output Objects Function Parameter Data File Keyboard keypress Input Processing Information supplied to the computer should be checked Verification Password checking Typed in twice Validation Acceptable value - within limits 0 - 10, Y/N, A|B|C, etc. Picture checks - date formatting - dd/mm/yyyy or dd/mon/yyyy Compatibility 2 values working together to create a 3rd - do they check out - 7 * 8 != 54 Check Digit - explain The aim is to prevent rather than cure - garbage in, garbage out. Batch Processing requires that the process can cope with such errors and does not fail at the first sign of trouble These processes could run for hours - flag the problem and move on Output Processing Similar to Input Processing, the output should be good data :- verified, validated, coherent and in the correct format 2dp, 4 digit year, 30 char string The best possible value should be generated else subsequent processing may fail for the same reasons as listed above. If the data cannot be guaranteed, a flag may be used to indicate the dodgy output The aim is to represent digital data in a comprehensible format comprehensible to the receiving process 10 Heuristics Visibility of System Status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time, e.g. progress bars percentage or units processed counters; Match Between System & Real World The system should speak the users language with words, phrases and concepts familiar to the user, rather than system-oriented terms. User Control & Freedom Users often choose system functions by mistake and will need a clearly marked emergency exit to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. Consistency & Standards Users should not have to wonder whether different words, situations or actions mean t he same thing. Follow platform conventions. Error Prevention Even better that good error messages is a careful design which prevents a problem from occurring in the first place Recognition Rather Than Recall Make objects, actions and option visible. The user should not have to remember information from 1 part of the dialogue to another. Instructions for the use of the system should be visible or easily retrievable whenever appropriate. Flexibility & Efficiency of Use Accelerators unseen by the novice user may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. Aesthetic & Minimalist Design Dialogues should not contain information that is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. Help Users Recognise, Diagnose & Recover From Errors Error message should be expressed in plain language ( no codes ), precisely indicate the problem and constructively suggest a solution. Help & Documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the users task, list concrete steps to be carried out and not be too large. User Interface Design 8 golden rules of dialog design strive for consistency shortcuts for frequent users design dialogs to yield closure offer information feedback simple error handling easy reversal of actions support internal focus control reduce short term memory load (7 ? 2) Data display guidelines consistency of display efficient assimilation of information by the user minimise user memory load compatibility between data entry screens & data display flexibility of user control Operator attention Bold underlining larger fonts colour (up to four colours) colour blinking (can change one colour to another) black & white ? white & black audio User interface styles - avoid mixing styles when possible Menus (reduce memorisation required by user) command list small enough to fit in single menu user should have access to all relevant items without referring to a manual logical item presentation sequences alphabetical, numerical ordering, time (most frequently used) physical properties (value, height, weight) most important items first icons are harder to recognise than words - during a visual search avoid screen clutter don't assume user will notice cues like colour or borders changing these represents drastic environment (Alex Fleming, 2001 Page PAGE 18 .+0+99;;;;;;;;;;;mHnH jU j6CJ H*5'{ Vn(JT]v & R H >4!$' & R H >4!$'v'L 8d > f   / ] j r x ~ $ 3 ] f l x   B V \ s  C P ~ %6Fij=|@}'Tav'L 8d & R H >4!$' & R H >4!$' > f   / ] j r x ~ $ 3 ] f l x  & R H >4!$' & R H >4!$'   B V \ s  C P ~  & R H >4!$' & R H >4!$'%6Fij=|@} & R H >4!$' & R H >4!$''T)s*+DV%Nq & R H >4!$' & R H >4!$')s*+DV%Nqab{Wg(4M  +/0CIf7n34@^f P<[i/ !!P!!!"aqab{Wg(4M & R H >4!$' & R H >4!$'  +/0CIf7n34@^ & R H >4!$' & R H >4!$'^f P<[i/  & R H >4!$' & R H >4!$' !!P!!!""#@#c#######$$%$Q$$ & R H >4!$' & R H >4!$'""#@#c#######$$%$Q$$$ % %0%E%V%c%t%%%%%%%%& &&!&)&8&A&G&M&S&^&o&&&&&''<'V'z'''''''(((0(>(l((((())))**I*V*h*w*****+S+i+j+++!,d,e,w,,-----a$$ % %0%E%V%c%t%%%%%%%%& &&!&)&8&A&G& & R H >4!$' & R H >4!$'G&M&S&^&o&&&&&''<'V'z'''''''(((0(>( & R H >4!$' & R H >4!$'>(l((((())))**I*V*h*w*****+S+i+j+++!, & R H >4!$'!,d,e,w,,-----.D.E.T.U.q.r.)/*/L/M/////0000-.D.E.T.U.q.r.)/*/L/M/////0000M1N1_1`111112222333344555555666666667797:7U7V7l7m7777777777782838M8N8888888888888888*9+9I9J9P9Q999a0M1N1_1`1111122223333445555556666666667797:7U7V7l7m7777777777782838M8N88888888888888888*9+9I9J9P9Q9999997:8:\:$99997:8:\:::::$;%;:;;;u;;;;;;;;; \:::::$;%;:;;;u;;;;;;;;;d 3r !(#$%`'('0&P P. A!"#$% [:@:NormalPP6B*mH nH F@F Heading 1$h@& 56>*CJ@@"@ Heading 2@@& 56CJ:@2: Heading 3 R@&6CJ,@, Heading 4$@&<A@<Default Paragraph Font.O. Bullet list<>@<Title$ 56B*CJ$JC@JBody Text Indent 6B*CJ8J@"8SubtitleB*CJ,@2,Header  9r 4 @B4Footer p#CJ7n))),;v q^ $G&>(!,068\:; "#$%&()*+-./02346"-9;!',15#&,!77777 Alex Fleming)C:\WebPages\afleming\lectures\hci-ucd.doc}p4y(b_Ibp4b_dp4dhp4hh.hh))88)()()pp()  .@ @ .  .hh.hh.hh.}_Ibdhb_dy(@HP DeskJet 400LPT1:HPDSKJTBHP DeskJet 400 (Monochrome)HP DeskJet 400@f ,,@MSUD$HP DeskJet 400 (Monochrome)dHP DeskJet 400@f ,,@MSUD$HP DeskJet 400 (Monochrome)d]7@GzTimes New Roman5Symbol3& zArial"L\L\eDCF- ,("0<@Human Computer Interaction Alex Fleming Alex Fleming RhubarB26 Oh+'0 $ @ L X dpxHuman Computer Interactionuma Alex Flemingr Ilex Normal.dotg Alex Flemingr I2exMicrosoft Word 8.0r@F#@^$@^@^-  , ՜.+,D՜.+,H hp|   (<@j Human Computer Interaction Title 6> _PID_GUIDAN{315B6B21-ECDD-11D5-ABB6-00C0DFEA7724}  !"#$%&'()*+,-./012345679:;<=>?ABCDEFGIJKLMNORRoot Entry Fx3%T1Table8WordDocument)nSummaryInformation(@DocumentSummaryInformation8HCompObjjObjectPool  FMicrosoft Word Document MSWordDocWord.Document.89q