1. INTERACTION
- Quick Tour -
1
L.F.M.I 2014

2. Interaction is…
•
•
•
•
•
Process of information transfer from user to the computer and from computer to the user.
Interaction models: translations between user and system
Ergonomics: physical characteristics of interaction
Interaction styles: the nature of user/system dialog
Context: social, organizational, motivational
L.F.M.I 2014
2

3. Ergonomics
•
•
•
Study of the physical
characteristics of
interaction
How the controls are
designed, the physical
environment in which the
interaction takes place, the
layout & physical qualities
of the screen.
Ergonomics issues
• arrangement of
controls and displays
• surrounding physical
environment
• health issues
L.F.M.I 2014
• use of colour
3

4. Common interaction styles
•
•
•
•
•
•
•
•
Command line interface
Menus
Natural language
Question/answer and query dialogue
Form-fills and spreadsheets
Wimp (Windows, Icons, Menus and Pointers)
Point and click
Three–dimensional interfaces
L.F.M.I 2014
4

5. User Interaction Styles
•
Interaction can be seen as a dialog between the computer and the user.
•
Linguistic manipulation
- by typing in commands
•
Direct manipulation
- by using some sort of pointing device
L.F.M.I 2014
5

6. Interaction Styles : Menu
Binary Menus
Pull-Down, Pop Up and Toolbars
• Often have more than two items
Menus
– True/False
• Pull-Down menus always
– Male/Female
available to the user by making
– Yes/No
selections on a top menu.
– Radio Buttons Choice
• Keyboard shortcuts ; Ctrl– Check Boxes Choice
C , Ctrl+V, etc
• Multiple-item Menus
• Multiple-selection menus or check
• Toolbars, iconic menus and
boxes
palettes
L.F.M.I 2014
• Pop up menu
6

7. Interaction Styles : Menus for Long Lists
Scrolling Menus, Combo Boxes & Fisheye Menus
L.F.M.I 2014
7

8. Interaction Styles : Menus for Long Lists
• Embedded Menus & Hotlinks :
• Embedded menus are an alternative to explicit menus
• The menu items might be embedded in text or graphics and still be selectable.
L.F.M.I 2014
8

9. Interaction Styles : Combination of
Multiple Menus
1.
2.
3.
4.
Linear menu sequences
Simultaneous menus
Tree-structured menu
Menu maps
L.F.M.I 2014
9

10. Interaction Styles : Dialog Boxes
•
•
Dialog box design is combination of
menu selection and form fill.
Can also contain task-specific functions
such as; entering the customer’s name
and address for a car rental; specifying
clothing size, color and fabric for an
order entry system.
L.F.M.I 2014
10

11. Interaction
Design
•
Users’
capabilities
User-centered approach is based on :
•
•
•
Early focus on users and tasks: directly
studying
cognitive, behavioral, anthropomorphi
c & attitudinal characteristics
Empirical measurement: users’
reactions and performance to
scenarios, manuals, simulations &
prototypes are observed, recorded
and analysed
Iterative design: when problems are
found in user testing, fix them and
L.F.M.I 2014
carry out more tests
• Size of hands
• Motor abilities
• Height
• Strength
• Disabilities
11

12. Four basic activities in IDx
•
•
•
•
Identifying needs and establishing
requirements
Developing alternative designs
Building interactive versions of the
designs
Evaluating designs
L.F.M.I 2014
user-centered design approach
12

13. Lifecycle models
•
Lifecycle models are:
•
•
management tools
simplified versions of reality
L.F.M.I 2014
Traditional ‘waterfall’ lifecycle
Spiral Lifecycle model
13

14. Lifecycle Model
L.F.M.I 2014
Life Cycle for RAD (Rapid Application
Development
Dynamic Systems Development Method
14

15. Lifecycle Model
The Star lifecycle model
L.F.M.I 2014
Usability engineering lifecycle model
15

16. INTERFACE DESIGN 1
- Quick Tour -
L.F.M.I 2014
16

17. What is User Interface?
•
•
•
•
•
•
The user interface, or the human/computer interface is what the user sees, and includes:
the physical controls – buttons, etc.
what the system looks like (if there is a monitor – the system could be a washing machine
or a photocopier)
how the system accepts input from the user
how the system responds to user input
how the system outputs the results of processing
L.F.M.I 2014
17

18. Human-Computer Interface
•
•
A human and a computer communicates.
A human usually has 5 senses:
Sight,
Hearing,
Touch,
Taste,
Smell
L.F.M.I 2014
•
•
•
•
•
•
•
•
A keyboard, for typing,
A mouse, for clicking,
A scanner, for copying,
A camera, for images.
A monitor, for displaying,
A printer, for printing,
A sound card. For audio,
A DVD, for video.
18

19. Metaphor: Computer objects as
visible, moveable objects
•
•
•
•
•
•
•
•
Items represented as icons
a metaphor provides a lot of information
it enables the transfer of skills
good metaphors provide natural mappings
metaphors are not taken literally
they can highlight underlying assumptions
metaphors are not symmetrical
they can be violated
Desktop Metaphor (Macintosh)
L.F.M.I 2014
19

20. Expressive Interface: to make the ‘look and
feel’ of an interface appealing.
Ways of conveying the status of a system are through the use of :
Dynamic icons : a recycle bin expanding when a file is placed into it.
Animations : a bee flying across the screen indicating that the computer is doing
something, like checking files
Spoken messages, using various kinds of voices, telling the user what need to be
done.
Various sounds indicating actions and events (window closing, files being
dragged, new email arriving).
L.F.M.I 2014
20

21. Expressive Interface
• Benefit of expressive interface :
Provide reassuring feedback to the user
that can be both informative and fun
Influences how pleasurable it to interact
with.
The more effective the use of imagery at
the interface, the more engaging and
enjoyable it can be.
L.F.M.I 2014
Emoticons - compensate for lack of
expressiveness in text
communication
21

22. •
Gimmicks
Amusing to the designer but not the user. - Clicking on a link to a website only to discover
that it is still ‘under construction’
Error Messages
“the application has expectedly quit due to poor coding in the operating system”
•
Shneiderman’s guidelines for error messages include:
• avoid using terms like FATAL, INVALID, BAD
• Audio warnings
• Avoid UPPERCASE and long code numbers
• Messages should be precise rather than vague
L.F.M.I context-sensitive help
• Provide 2014
22

23. Website Error messages
“The requested page /helpme is not available on the web server.”
If you followed a link or bookmark to get to this page, please let us know, so that we can fix the
problem. Please include the URL of the referring page as well as the URL of the missing page.
L.F.M.I 2014
23

24. Summary
• Affective aspects are concerned with how interactive systems make people
respond in emotional ways
• Well-designed interfaces can elicit good feelings in users
• Expressive interfaces can provide reassuring feedback
• Badly designed interfaces make people angry and frustrated
L.F.M.I 2014
24