HCI DESIGN

CHAPTER- 4
 Lecture Plan

• 4.1 The Overall Design Process

• 4.2 Interface Selection Options
• 4.2.1 Hardware Platforms
• 4.2.2 Software Interface Components
• 4.3 Wire-Framing
• 4.4 Design Example
• 4.4.1 Requirements Analysis
• 4.4.2 User Analysis
• 4.4.3 Making a Scenario and Task Modeling
• 4.4.4 Interface Selection and Consolidation
4.1 The Overall Design Process
User Analysis
• The results of the user analysis will be reflected back to
the requirements, and this could identify additional UI
requirements (functional or nonfunctional).

• To reinforce the original requirements analysis to

further accommodate the potential users in a more
complete way.

• For instance, a particular age group might necessitate

certain interaction features such as a large font size and
high contrast.
 What is Task Analysis
– Task Analysis is a process of analyzing the way
people perform their tasks
• The things they do
• The things they act on
• The things they need to know
Requirement Analysis
• Any software design starts with a careful
analysis of the functional requirements.
• Functional-task requirements
• Functional-UI requirements
• Non-functional UI requirements
Scenario and task modeling
• Identifying the application task structure and
the sequential relationships between the different
elements.

• Through the process of storyboarding, a rough visual

profile of the interface can be sketched.

• The storyboard will serve as a starting point for

drawing the object-class diagram, message diagrams,
and the use cases for preliminary implementation and
programming.
 Interface selection and consolidation
• For each of the subtasks and scenes in the storyboard—
particularly software interface components (e.g.,
widgets), interaction technique (e.g., voice recognition),
and hardware (sensors, actuators, buttons, display,
etc.)—choices will be made.

• Not all of these interface components may be available

on a working platform

• Certain choices will have to be retracted in the interest of

employing a particular interaction platform.
 4.2 Interface Selection Options

• 4.2.1 Hardware Platforms

– Different interactions and subtasks may require various
individual devices (sensors and displays).

– Choice of a design configuration for the hardware

interaction platform is largely determined by the
characteristics of the task/application.

• 4.2.2 Software Interface Components

 4.2 Interface Selection Options

4.2.1 Hardware Platforms

• Desktop
Suited for: Office-related tasks, time consuming/serious
tasks, multitasking
• Smartphones
Suited for: Simple and short tasks, special-purpose
tasks
• Tablet
Suited for: Simple, mobile, and short tasks, but those
that require a relatively large screen
 • Embedded
Suited for: Special tasks and situations where interaction
and computations are needed on the spot
(e.g., printer, rice cooker, mp3 player, personal media player)
• TV/consoles
Suited for: TV-centric tasks, limited interaction, tasks that
need privacy
• Kiosks/installations
Suited for: Public users and installations, limited
interaction, short series of selection tasks, monitoring tasks
• Virtual reality
Large-surround and high-resolution projection screen/head-mounted
display/stereoscopic display, 3-D tracking sensors, 3-D sound system,
haptic/tactile display, special sensors, peripherals (microphone, camera, depth
sensors, glove)

Suited for: Spatial training, tele-experience and tele-presence, immersive

entertainment
 4.2 Interface Selection Options
4.2.2 Software Interface Components
• Icons - Interactable objects may be visually represented as
a compact and small pictogram such as an icon.

• The recent Windows Metro–style interface has introduced a

new type of icon called a tile that can dynamically change
its look with useful information associated with what the
icon is supposed to represent.
• Menus - Menus allow activations of commands and tasks
through selection (recognition) rather than recall.

• Typical menus are organized as a one-dimensional list or a

two-dimensional (2-D).

• Different styles of menus 1: (a) pull down, (b) pop up, (c)
2-D application bar, (d) 1-D toolbar, and (e) tabs.
Different styles of menus 2: (a) buttons, (b) check boxes and radio
buttons, (c) slider
menu, (d) image map.
 Where to Use Different Menu Styles
MENU TYPE USAGE
Pull down Top level (main) categorical menu
Pop up Object specific, context specific
Toolbar Functional/operational tasks
Tabs File folder metaphor (categorical menu)
Scroll menu Long menu (many menu items)
2-D array/Image maps Identification of items by icons (vs. by
long names) or pictures
Buttons/Hyperlinks Short menu (few choices)
Check boxes/Radio buttons Multiple choice/exclusive choice
Hot keys For expert users
Aural menu Telemarketing and for use by the
disabled
• Direct interaction - The mouse/touch-based interaction is
strongly tied to the concept of direct and visual interaction.
• GUI components: for soliciting input from a user in a
convenient way (WIMP (window, icon, mouse, and
pointer) Interfaces).
• Forms
• Toolbar
• Dialog box
• Combo box
• 3-D interface - For this reason, non-WIMP–based interfaces
such as 3D motion gestures are gaining popularity.
• Other (non-WIMP) interfaces:
Voice recognition, language understanding,
gesture recognition
 4.3 Wire-Framing

INTERACTION MODELLING
&
INTERFACE OPTIONS
Cont...
• Originated from making rough specifications
for website page design
&
Resembles Scenarios or Storyboards.
Cont...
• Looks like page schematics or screen
blueprints, which serve as a visual guide that
represents the skeletal framework of a website
or interface
• The wireframe depicts the page layout or
arrangement of the website’s content,
including interface elements and navigational
systems, and how they work together.
Cont...
• Wireframes can be pencil drawings or
sketches on a whiteboard, or they can be
produced by means of a broad array of free or
commercial software applications.
• Wireframes help establish functionality and
the relationships between different screen
templates of a website.
Cont...
Overall Interaction Behaviour
Design Content of a Screen
(How Screen Switches over a
Interaction)
Ex:
Cont...
Wireframes focus on:
• The range of functions available
• The relative priorities of the information and
functions
• The rules for displaying certain kinds of
information
• The effect of different scenarios on the display
 Advantages of Wireframing
• It provides an early visual that can be used to review with the
client.
• From a practical perspective, the wireframes ensure the page
content and functionality are positioned correctly based on
user and business needs.
• To see how exactly your Product can help customers
• To make a showable blueprint of your application
• Fast iterations to a perfect Product and avoiding pitfalls in the
future
• It Saves Your Money & Time during Development
 Disadvantages of Wireframing
• As the wireframes do not include any design,
or account for technical implications, it is not
always easy for the client to grasp the
concept.
• The designer will also have to translate the
wireframes into a design, so communication
to support the wireframe is often needed to
explain why page elements are positioned as
they are.
Cont...
Elements of wireframes
1. Information design
2. Navigation design
3. Interface design
User interface design includes selecting
and arranging interface elements to enable
users to interact with the functionality of the
system. The goal is to facilitate usability and
efficiency as much as possible.
4.4 Design Example(No Sheets 1.0)

• 4.4.1 Requirements Analysis

• 4.4.2 User Analysis
• 4.4.3 Making a Scenario and Task Modeling
• 4.4.4 Interface Selection and Consolidation
– finalizing the choice of particular interfaces for the individual
subtasks
– It is very important that we try to adhere to the HCI principles,
guidelines, and theories to justify and prioritize our decision
Requirements Analysis
• Design of a simple interactive smartphone
(Android) application, called No Sheets.
• The main purpose of this application is to use
the smart phone to present sheet music,
thereby eliminating the need to handle paper
sheet music.
Cont...
User Analysis
• Smartphone owner and
• Novice/intermediate piano player
• How the chord/music information should be
displayed
 Table 4.3 User Interface Requirements
from a Very Minimal User Analysis
• Display mode - Portrait

• Layout - Top: Song title

Middle: Chord – Beat – Lyrics
Bottom: Control buttons

• Paging - Left to right

Current chord/music info in the left
Next chord/music info in the right

• Colors - Current chord: Yellow with blue background

Next chord: Reversed
Buttons: Red
Background: Black
Making a Scenario and Task Modeling
A POSSIBLE STATE-TRANSITION
DIAGRAM for No Sheets
 Storyboarding
• A storyboard is then drawn based on the task
model to further envision its usage and
possible interface choices.
• There is no fixed format
... want to show of my piano
skills ... but don’t have my
notes handy ...
oh yeah! my smartphone ...
• Select song
• Select temp
• Play (Show chords)
• Show instruction No Sheets
from a main menu/
Select Song
screen touch
Select Tempo
Play
Instruction

• Select song
• Select temp
• Play (Show chords)
• Show instruction
• Scroll and select by touch
• Finish by selection, OK, return
button
from a main menu/
screen touch