Human Computer Interaction User Interface - PowerPoint PPT Presentation

Loading...

PPT – Human Computer Interaction User Interface PowerPoint presentation | free to download - id: 573e6b-MzU3Y



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Human Computer Interaction User Interface

Description:

Human Computer Interaction User Interface * * * * * * * * * * * * * * * * * * * * * * * * * * * * Sketches Drawing of the outward( ) appearance of the ... – PowerPoint PPT presentation

Number of Views:96
Avg rating:3.0/5.0
Slides: 82
Provided by: Ayman62
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Human Computer Interaction User Interface


1
Human Computer InteractionUser 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)

5
Iteration
  • At every stage!

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
Five Key Ideas about UIs in HCI Cont.
  • 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.

10
Five Key Ideas about UIs in HCI Cont.
  • 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.

11
Five Key Ideas about UIs in HCI Cont.
  • 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?

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
Five Key Ideas about UIs in HCI Cont.
  • Task
  • An action the user wants to do
  • To call somebody
  • To save the file
  • Goals ? tasks, tasks ? goals.

14
Bad User Interfaces
  • Hard to tell the difference between the two icons
    and names

15
(No Transcript)
16
(No Transcript)
17
Interface design
  • Interface design is important for several
    reasons
  • The better the user interface the easier it is to
    train people to use it.
  • Reducing training costs.
  • The better your user interface the less help
    people will need to use it, so reducing your
    support costs.
  • The better your user interface the more your
    users will like to use it.
  • 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
The fit of HCI elements
  • 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
    users physical and psychological(???? )
    welfare(??? ).

21
The fit of HCI elements leads to performance and
well-being
Human
Fit
Performance Well-being
Task
Computer
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 InteractionUsability 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.
  • Users retention(?????? ) time of information
    presented.
  • Users 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
  • Learnability
  • The ease with which new users can begin effective
    interaction and achieve maximal performance.
  • Flexibility
  • The 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
learnability Principles Cont.
  • 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.

31
learnability Principles Cont.
  • 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.

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
Flexibility Principles Cnt.
  • 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.

35
Flexibility Principles Cnt.
  • 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.

36
Flexibility Principles Cnt.
37
Flexibility Principles Cnt.
  • 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.

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
Principles robustness Cnt.
  • 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 cant undo).
  •  
  • Users have grown accustomed to the undo command,
    backward recovery.

41
Principles robustness Cnt.
  • 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.

42
Principles robustness Cnt.
  • 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?

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
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

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
)
Initiation
Application Description
Analysis
Requirements Specification
Design
System Design
Implementation
Product
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
Implementation
Evaluation
Prototyping
Requirements specification
Conceptual design / formal design
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 mustnt be ignored.

65
The prototyping process
66
Sketches
  • Drawing of the outward(??????? ) appearance of
    the intended system.
  • Sketching is important to low-fidelity
    prototyping

67
Storyboard of a computer telephone
68


Help-
Type name and place call
69
UI design principles
  • UI design must take account of the needs,
    experience and capabilities of the system users.
  • Designers should be aware of peoples 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 principles
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
Request to develop SW
Yes
Feasibility Study
Requirement Engineering
Customer
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
Request to develop SW
Yes
Feasibility Study
Requirement Engineering
Customer
Architecture design
Problem
Solving
80
Requirement Engineering Phases
Design
(1)
Domain understanding
(7)
Req. Specification
(2)
Req. Elicitation
(6)
Req. Validation
(3)
Req. Decomposition
(5)
Req. Prioritization
(4)
Conflict Resolution
81
(No Transcript)
About PowerShow.com