An Introduction to HCI and Storyboarding

1
An Introduction to HCI and Storyboarding

• Week 3

2
Aims

• To understand the program development cycle
• Program planning
• Program tools
• To understand the importance of HCI within
  software development
• To be capable of developing storyboards
• To specify the interface and
• Modules required to handle associated events

3
What is HCI?

• Human-Computer Interaction
• Definition
• to provide an understanding of how users
  function, the tasks they need to perform and the
  way a computer system needs to be structured to
  facilitate the carrying out of those tasks
  (Faulkner, p1-2)

4
Usability
The effectiveness, efficiency and satisfaction
with which specified users can achieve specified
goals in particular environments. (ISO
9241-11.3)

• Five key principles
• naturalness
• consistency
• relevance
• supportiveness
• flexibility

5
Overview of interaction styles

• Two main ways to classify interaction styles
• linguistic
• command language interface
• conversational, e.g. Q/A, menus, form fill-in
• graphic user interface (GUI)
• direct manipulation of objects, WIMP
• also uses elements of linguistic interfaces

6
Interface design issues

• Need to consider elements of WIMP (window, icon,
  menu, pointer) interfaces
• GUI systems use a variety of interface components
  (widgets)
• - window title bar, control panel, resize
  buttons
• - check box - option (radio)
  button
• - sliders (scroll bars) - menus
• - icons - cursor

7
Tools to help HCI design

• HCI design is highly creative
• designers try to understand users by considering
  their whole social situation
• involvement of users through
• game-playing, meetings, prototyping
• design techniques bring the system to life
• emphasis on visualising design and holistic view

8
What are storyboards?

• Pictorial representations of the system
• Present illustrations of key concepts
• system / technology
• users
• environment
• interaction

9
Uses of storyboards

• Shows initial designs for the system
• Can be used to
• demonstrate mock-ups of screens
• trace progression from one part of screen to
  another
• check understanding of commands, dialogue
• Provides concrete design representation for
  designer to work on with the end users

10
HCI Information Resource
Follow the links to interests from Lynne
Humphries home page (http//osiris.sunderland.ac
.uk/cs0lhu/Lynne/LHhome.htm) or
http//osiris.sunderland.ac.uk/cs0lhu/Lynne/inter
ests.htm
11
Storyboards http//www-2.cs.cmu.edu/landay/resea
rch/publications/SILK_CHI/jal1bdy.html
12
Visual Basic Review
The event led environment
The program must react correctly to whatever the
user does
User clicks button
Execute the buttons click event procedure
Every object has many events e.g. MouseMove,
DragOver, LostFocus
Each Object also has a number of methods
Syntax
object.method
cmdOK.SetFocus
Example