Date post: | 24-Dec-2015 |
Category: |
Documents |
Upload: | brian-webster |
View: | 227 times |
Download: | 0 times |
1
Human Computer Interaction
User Interface
2
What is a User Interface?
The user interface is the part of a software program that allow users to interact with computer (system) and carry out their task.
3
User Interface
• Today, building the Human-Computer Interface consumes 50 – 70 percent of the
systems development effort.
• In other words, to users, the interface is the system.
• Users care about what they enter into and get out of the system and how the entire
experience of interaction feels.
4
Human Computer Interaction – User Interface development cycle
• HCI = design, prototyping, evaluation, and implementation of user interfaces (UIs)
design Implementation(Prototype)
evaluation
5
Iteration
At every stage! Design
Prototype
Evaluate
6
Why Study User Interfaces?
• Major part of work for “real” programs– approximately 50%
• You will work on “real” software– intended for users other than yourself
• Bad user interfaces cost expensive
• User interfaces are hard to get right– people are different and unpredictable
7
Who builds UIs?
• A team of specialists (ideally)– graphic designers– interaction / interface designers– marketers– test engineers– software engineers
8
Five Key Ideas about UIs in HCI
• Visibility
• Feedback
• Goal
• Affordance
• Task
9
• Visibility: all necessary controls should be visible for the user – he/she is supposed to be able to use them in correct way.
• Always keep users informed about what is going on, through providing appropriate feedback within reasonable time.
• Visibility is the mapping between a control and its effect:– Show controls (toolbars, menus).– Indicate mappings (Toolbar icons and graphics, enable & disable).– Provide feedback (Messages).
– The User Interface should help the user always understand:• The current state of the system.• What operations can be done.
Five Key Ideas about UIs in HCI Cont.
10
• Feedback– When anything changes it should be made visible.– Feedback concerning the actions executed:
• When you are executing an action give a feedback to the user.
– Feedback concerning their results:• After an action executed, display results and make
user aware of the results.
• Goal– A state the user wants to reach:
• To be talking with somebody on the phone.• To have saved a file.
Five Key Ideas about UIs in HCI Cont.
11
• Affordance– An affordance is a quality of an object, or an
environment, which allows an individual to perform an action
– The set of operations and procedures that can be done to an object (is the fundamental properties of an object which express how it might be used).
– ‘Perceived affordance’ is what typical users think can be done to an object
• Should a door be pulled or pushed?• What does this icon mean?
Five Key Ideas about UIs in HCI Cont.
12
Affordance
• Every action should be mapped to a graphical icon which can easily be understood by users.
• After an action is accomplished, a sound should indicate whether the action is successful.
• Communicate with the user when necessary.
13
• Task– An action the user wants to do:
• To call somebody
• To save the file
– Goals tasks, tasks goals.
Five Key Ideas about UIs in HCI Cont.
14
Bad User Interfaces
• Hard to tell the difference between the two icons and names
15
16
17
Interface design• Interface design is important for several reasons:
1. The better the user interface the easier it is to train people to use it.
2. Reducing training costs.
3. The better your user interface the less help people will need to use it, so reducing your support costs.
4. The better your user interface the more your users will like to use it.
5. Increasing their satisfaction with the work that you have done.
18
User Interface Malfunctions(األعطال )
Key idea:
•“There are no good user interfaces ... just user interfaces that fit(مناسب )”– A truly bad user interface never fits
•To maximize fitness, we must minimize the occurrence of ‘malfunctions’ in the context of the expected use of the system.
19
Definitions of malfunction
•“A mismatch between what the user wants, needs or expects and what the system provides”.
•“A breakdown(تعطل ) in usability”.
•“An obstacle(عقبة ) to performing a desired task”.
20
• HCI should be designed to achieve a fit between the ( human ) user, computer and task.
• Fit: The match between the computer design, the user and the task so as to optimize the human resources needed to accomplish the task.
• Performance: Reflects both the efficiency of performing the task and the quality of the task product.
• Well-being: reflects an overall concern with the user’s physical and psychological(نفسي ) welfare(خير ).
The fit of HCI elements
21
The fit of HCI elements leads to performance and well-being
Human
Fit
Task Computer
Performance&
Well-being
22
What constitutes(يشكل ) a good user interface?
• Achieve required performance by operator(مشغل ), control and maintenance
personnel.• Minimize skill and personnel requirements and
training time.• Achieve required reliability of person-computer combinations ( reliability, availability, security and
data integrity ).• Foster(تعزيز ) design standardization within and
among systems ( integration, consistency and portability ).
23
Human Computer Interaction
Usability and Design
24
Usability
• A usable system is:– easy to learn– easy to remember how to use– effective to use– efficient to use– safe to use– enjoyable to use
25
Why is usability important?
• Many everyday systems and products seem to be designed with little regard to usability.
• This list contains examples of interactive products: – mobile phone, computer, personal organizer, remote
control, coffee machine, ATM, etc….
26
List of common measurable goals for usability:
• Time to learn how to operate the system.• Speed of performance.
• Rate of errors made by users.• User’s retention(احتفاظ ) time of information
presented.• User’s satisfaction with the system.
• Yet high-quality HCI is not just about usability or performance. It is also about emotions and
about the overall physical and social experience of interacting with computers.
27
Principles supporting usability
LearnabilityThe ease with which new users can begin effective interaction and achieve maximal performance.
FlexibilityThe multiplicity of ways the user and system exchange information.
Robustness ( Powerful )The level of support provided to the user in determining successful achievement ( Error Handling ).
28
1. Learnability Principles
• The ease with which new users can begin effective interaction and achieve maximal performance. There are a lot of aspects which support the learnability principle in usability subject, such as:– Predictability.– Synthesizability.– Generalizability.– Familiarity.– Consistency.
29
learnability Principles Cont.
Predictability– Determining effect of future actions based on
past interaction history.
Synthesizability(تجميع )– Assessing the effect of past actions.– While the user learns the system, the user
constructs a picture of the inner of the black box.
30
Generalizability– Extending specific interaction knowledge to new
situations.– The user guess the functionality of new
commands.– Can knowledge of one system/UI be extended
to other similar ones?– Example: cut & paste in different applications.
learnability Principles Cont.
31
Familiarity– How prior knowledge applies to new system.– New user get good clues to use the system.– Names and icons that are common to the users
domain.
Consistency– Likeness(تشابه ) in input/output behaviour arising from
similar situations or task objectives.– Operation perform similarly for similar inputs.
learnability Principles Cont.
32
2. Flexibility Principles
• Multiplicity of ways that users and system exchange information, and the following are some aspects which support the flexibility principle:– Dialog Initiative(مبادرة ).– Multithreading.– Task migratability(الهجرة ).– Substitutivity(استبدال ).– Customizability.
33
Flexibility Principles Cnt.Dialogue initiative
– Freedom from system imposed(فرضت ) constraints on input dialogue.
– Old dialogue boxes are called system pre-emptive. System does all prompts, user responds sometimes necessary.
– Modern dialogue boxes are called user pre-emptive. More flexible, user initiates actions.
Multithreading– Ability of system to support user interaction for
more than one task at a time.– Allow user to perform simultaneous tasks.
34
Task migratability– Passing responsibility for task execution between
user and system.
– The user perform the task or have the computer perform the tasks.
– Example: Spell-checking.
Flexibility Principles Cnt.
35
Substitutivity– Allowing equivalent values of input and
output to be substituted for each other.
– Assume different forms for equivalent values.
– Allow different ways of presenting output.
– The user should be able to see the results in the units of the user's choice.
Flexibility Principles Cnt.
36
Flexibility Principles Cnt.
37
Customizability
– Modifiability of the user interface by user or system ( adaptability ).
– The user modify the interface in order to improve efficiency.
– The user can add commands, or change font size for better visibility.
Flexibility Principles Cnt.
38
3. Robustness(متانة ) Principles
• Supporting user in determining successful achievement and assessment of goals, by the following concepts:
– Observability.– Recoverability.– Responsiveness.– Task Conformance.
39
Principles robustness Cnt.
Observability
– Ability of user to evaluate the internal state of the system from its perceivable representation.
– Browsability:• Explore current state (without changing it).
– Reachability:• Navigate through observable states.
– Persistence: • Is how long the system states or user inputs
are visible to the user.
40
Recoverability
– Ability of user to take corrective action once an error has been recognized.
– At a minimum the user ought(يجب ) to be able to correct the output, forward recovery, (Ability to fix when we can’t undo).
– Users have grown accustomed to the undo command, backward recovery.
Principles robustness Cnt.
41
Responsiveness– How the user perceives the rate of communication with
the system.
– Response time• Time for system to respond in some way to user action (s).
– The system respond in suitable time.
– Some applications require msec response, others seconds and some applications can run overnight.
Principles robustness Cnt.
42
•Task conformance–Degree to which system services support
(perform) all of the user's tasks.– Task completeness
• Can system do all tasks?
– Does it allow user to define new tasks?
Principles robustness Cnt.
43
User-centred design
• In UI design the needs of the user are paramount( قصوى and where the ( أهميةuser is involved in the design process.
• UI design always involves the development of prototype interfaces.
44
The UI design process
• UI design is an iterative process involving close liaisons( المتبادلة between ( العالقاتusers and designers.
• The 3 core activities in this process are:– User analysis. Understand what the users will
do with the system;– System prototyping. Develop a series of
prototypes for experiment;– Interface evaluation. Experiment with these
prototypes with users.
45
The design process
Executableprototype
Designprototype
Produce paper-based design
prototype
Producedynamic design
prototype
Evaluate designwith end-users
Implementfinal userinterface
Evaluate designwith end-users
Analyse andunderstand
user activities
46
User analysis
• User analyses have to be described in terms that users and other designers can understand.
• Scenarios where you describe typical episodes(الحلقات ) of use, are one way of describing these analyses.
47
Analysis techniques
• Task analysis– Models the steps involved in completing a
task.
• Interviewing and questionnaires– Asks the users about the work they do.
• Ethnography– Observes the user at work.
48
User interface prototyping
• The aim of prototyping is to allow users to gain direct experience with the interface.
• Prototyping may be a two-stage process:– Early in the process, paper prototypes may be
used;– The design is then refined and increasingly
sophisticated automated prototypes are then developed.
49
User interface evaluation
• Some evaluation of a user interface design
should be carried out to assess its suitability.
• Ideally, an interface should be evaluated against a usability specification.
50
Information presentation
• Information presentation is concerned with presenting system information to system users
• The information may be presented directly or may be transformed in some way for presentation
• The Model-View-Controller approach is a way of supporting multiple presentations of data
Information tobe displayed
Presentationsoftware
Display
51
Error messages• Error message design is critically important. • Poor error messages can mean that a user
rejects rather than accepts a system• Messages should be polite, concise, consistent
and constructive• The background and experience of users
should be the determining factor in message design.
52
HCI design models
• The waterfall life cycle model.
• The star life cycle model.
• Rapid prototyping model.
53
Design Process Models
• Waterfall model The waterfall model assumes that the
design is fixed before entering to the next phase of design. Does not fit well in interactive systems. – It is a sequence of steps from software
engineering field.
• Spiral model– Only continue after step if feedback is positive.
54
Waterfall Model( From Software Engineering Field )
Application Description
RequirementsSpecification
SystemDesign
Product
Initiation
Analysis
Design
Implementation
55
The waterfall model
• Application description – General description of the purpose and the functions
of the system to be designed.
• Requirements specification – Detailed description of the functions the system
should perform.
• System design– Defining the software functions and software
modules.
• Product– The resulting implementation of the system
56
The star life cycle
Task analysis / functional analysis
Requirements specification
Conceptual design / formal design
Prototyping
Implementation
Evaluation
57
The star life cycle
• The design of interactive systems typically does not follow a specific order of steps.
• The design can start in any step - followed by evaluation.
• Needs good software tools.
58
Software prototyping
• A prototype is an initial version of a system used to demonstrate concepts and try out design options.
• Different kinds of prototyping:– Low fidelity.– High fidelity.
• Compromises in prototyping:– Vertical.– Horizontal.
59
Why prototype?• Evaluation and feedback are central to interaction design.
• Stakeholders can see, hold, interact with a prototype easily.
• Team members can communicate effectively.
• You can test out ideas for yourself .
• It encourages reflection: very important aspect of design.
• Prototypes answer questions, and support designers in choosing between alternatives.
60
Benefits of prototyping
• Improved system usability.
• A closer match to users’ real needs.
• Improved design quality.
• Improved maintainability.
• Reduced development effort.
61
What to prototype?
• Work flow, task design.
• Screen layouts and information display.
• Difficult, controversial, critical areas.
62
Low-fidelity( الدقة ( منخفضPrototyping
• Uses a medium which is unlike the final medium, e.g. paper, cardboard.
• Is quick, cheap and easily changed.
• Examples:sketches of screens, task sequences,
storyboards, etc…
63
High-fidelity prototyping
• Uses materials that you would expect to be in
the final product.
• Prototype looks more like the final system than
a low-fidelity version.
64
Compromises(التسويات ) in prototyping
•Two common types of compromise:• Horizontal: provide a wide range of
functions, but with little details.
• Vertical: provide a lot of details for only a few functions.
•Compromises in prototypes mustn’t be ignored.
65
The prototyping process
Establishprototypeobjectives
Defineprototype
functionality
Developprototype
Evaluateprototype
Prototypingplan
Outlinedefinition
Executableprototype
Evaluationreport
66
Sketches
– Drawing of the outward(الخارجي ) appearance of the intended system.
– Sketching is important to low-fidelity prototyping
Computer Telephone
Last Name:
First Name:
Phone:
Place Call Help
67
Storyboard of a computer telephone
Computer Telephone Last Name: First Name: Phone:
Place Call Help
Help->
Computer Telephone
Last Name: Greenberg First Name: Phone:
Place Call Help
Dialling....
Cancel
Call connected...
Computer Telephone
Last Name: Greenberg First Name: Phone:
Place Call Help
Connected
Hang up
Call completed...
Return
Help Screen You can enter either the person's name or their number. Then hit the place button to call them
Call by name->
Computer Telephone
Last Name: Greenberg First Name: Phone:
Place Call Help
Establishing connection->
68
Computer Telephone Last Name: First Name: Phone:
Place Call Help
Help-
Type name and place call
Return
Help Screen You can enter either the person's name or their number. Then hit the place button to call them
Computer Telephone Last Name: First Name: Phone:
Place Call Help
Computer Telephone
Last Name: Greenberg First Name: Phone:
Place Call Help
Computer Telephone
Last Name: Greenberg First Name: Phone:
Place Call Help
Dialling....
Cancel
Computer Telephone
Last Name: Greenberg First Name: Phone:
Place Call Help
Connected
Hang up
Computer Telephone Last Name: First Name: Phone:
Place Call Help
69
UI design principles
• UI design must take account of the needs, experience and capabilities of the system users.
• Designers should be aware of people’s physical and mental limitations (e.g. limited short-term memory) and should recognise that people make mistakes.
• UI design principles underlie interface designs although not all principles are applicable to all designs.
70
Design principles• User familiarity
– The interface should be based on user-oriented terms and concepts rather than computer concepts. For example, an office system should use concepts such as letters, documents, folders etc. rather than directories, file identifiers, etc.
• Consistency– The system should display an appropriate level
of consistency. Commands and menus should have the same format, command punctuation(الترقيم ) should be similar, etc.
• Minimal surprise– If a command operates in a known way, the user should
be able to predict the operation of comparable commands.
71
Design principles Cnt.• Recoverability
– The system should provide some resilience(مرونة ) to user errors and allow the user to recover from errors. This might include an undo facility, confirmation of destructive actions, 'soft' deletes, etc.
• User guidance– Some user guidance such as help systems, on-line
manuals, etc. should be supplied.
• User diversity(تنوع )– Interaction facilities for different types of user should
be supported. For example, some users have seeing difficulties and so larger text should be available.
72
User interface design principlesPrinciple DescriptionUser familiarity The interface should use terms and
concepts which are drawn from theexperience of the people who will make mostuse of the system.
Consistency The interface should be consistent in that,wherever possible, comparable operationsshould be activated in the same way.
Minimal surprise Users should never be surprised by thebehaviour of a system.
Recoverability The interface should include mechanisms toallow users to recover from errors.
User guidance The interface should provide meaningfulfeedback when errors occur and providecontext-sensitive user help facilities.
User diversity The interface should provide appropriateinteraction facilities for different types ofsystem user.
73
Interactive systems and software life cycle
• How to develop the Software ?
• Software is:– Large number of connected computer
programs.– High level of quality.
74
Factors of Software Quality
• Correctness• Reliable• Robustness• Friendly User Interface• Modifiable• Compatible• Portable• Interpretable• Efficiency• Well documented
75
Feasibility Study
Customer
Request to develop SW
Requirement Engineering
Yes
76
Requirement Engineering
• Requirement Elicitation.
• Requirement Analysis.
• Requirement Validation.
• Requirement Specification.
77
Requirement Types
• Functional Requirement.
• Non-Functional Requirement.
• Data.
• Domain.
• Constraint.
• Glossary.
78
Interactive systems
• After the iterative process, the result of the requirement engineering must be:– Clear.– Accurate.– Complete.
79
Feasibility StudyFeasibility Study
Customer
Request to develop SW
Requirement EngineeringRequirement Engineering
Yes
Architecture designArchitecture designProblemProblem
SolvingSolving
80
Requirement Engineering Phases:
Domain understandingDomain understanding
Req. ElicitationReq. Elicitation
Req. DecompositionReq. Decomposition
Conflict ResolutionConflict Resolution
Req. PrioritizationReq. Prioritization
Req. ValidationReq. Validation
Req. SpecificationReq. Specification
Design)1(
)2(
)3(
)4(
)7(
)6(
)5(
81
Architecture designArchitecture design Module DesignModule Design Coding UnitCoding Unit
Unit TestingUnit TestingSystem integration ,linking, connectionSystem integration ,linking, connectionSystem testingSystem testing
Accepting testing
Accepting testing
Deployment Usage
Deployment Usage