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
• 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
• 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.
 4.2 Interface Selection Options
• 4.2.1 Hardware Platforms
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
• 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
Suited for: Spatial training, tele-experience and tele-
presence, immersive entertainment
 4.2 Interface Selection Options
4.2.2 Software Interface Components
• Icons
• Menus
• Direct interaction
• Windows/layers
• GUI components: for soliciting input from a user in a convenient way
• Text box
• Toolbar
• Forms
• Dialog/combo boxes
• 3-D interface
• 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