MODULE 3 – HCI DESIGN

Interface selection options, wire-framing, naïve design framework

 The Overall Design Process
• HCI design is an integral part of a larger software design (and its
architectural development) and is defined as the process of
establishing the basic framework for user interaction (UI), which
includes the following iterative steps and activities.
• HCI design includes all of the preparatory activities required to
develop an interactive software product that will provide a high level
of usability and a good user experience when it is actually
implemented.
The Overall Design Process
The Overall Design Process
• Requirements analysis:
• careful analysis of the functional requirements
• functional-task requirements: functions that are to be activated directly by
the user through interaction
• functional-UI requirements: functions that are important in realizing certain
aspects of the user experience . Eg: adjust display resolution
• nonfunctional UI requirements: UI features (rather than computational
functions) that are not directly related to accomplishing the main application
task. Eg: requiring a certain font size or type according to a corporate
guideline
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)
• a process to reinforce the original requirements analysis to further
accommodate the potential users in a more complete way.
• particular age group might necessitate certain interaction features such as a
large font size and high contrast, or there might be need for a functional UI
feature to adjust the scrolling speed
The Overall Design Process
• Scenario and task modeling:
• Equally important to user analysis is task analysis and modelling
• Identifying the application task structure and the sequential relationships
between the different elements.
• draw a more detailed scenario or storyboard to envision how the system would
be used and to assess both the appropriateness of the task model and the
feasibility of the given requirements.
• iterative process to refine the original rough requirements.
• the storyboard will serve as another helpful medium in selecting the actual
software or hardware interface.
• It will also serve as a starting point for drawing the object-class diagram, message
diagrams, and the use cases for preliminary implementation and programming.
The Overall Design Process
• 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
• consolidated into a practical package, because not all of these interface components may
be available on a working platform((e.g., Android™-based smartphone, desktop PC, mp3
player)

• For instance, for a particular subtask and application context, the designer might have
chosen voice recognition to be the most fitting interaction technique. However, if the
required platform does not support a voice sensor or network access to the remote
recognition server, an alternative will have to be devised. Such concessions can be made
for many reasons besides platform requirements, such as due to constraints in budget,
time, personnel, etc
 Interface Selection Options - Hardware
Platforms
• Desktop (stationary): Monitor (typical
size: 17–42 in.; resolution: 1280 × 1012
or higher); keyboard, mouse, speakers/
headphones (microphone) (Figure 4.2)
• Suited for: Office-related tasks, time-
consuming/serious tasks, multitasking
 Interface Selection Options - Hardware
Platforms
• Smartphones/handhelds (mobile): LCD
screen (typical size: 3.5–5 in., resolution:
720 × 1280 or higher, weight ≈ 120 g),
buttons, touch screen,
speaker/headphones, microphone,
camera, sensors (acceleration, tilt, light,
gyro, proximity, compass, barometer),
vibrators, mini “qwerty” keyboard
• Suited for: Simple and short tasks,
special-purpose tasks
 Interface Selection Options - Hardware
Platforms
• Tablet/pads (mobile): LCD screen (typical
size: 7–10 in., resolution: 720 × 1280 or
higher, weight ≈ 700 g), buttons, touch
screen, speaker/headphones,
microphone, camera, vibrators, sensors
(acceleration, tilt, light, gyro, proximity,
compass, barometer)
• Suited for: Simple, mobile, and short
tasks, but those that require a relatively
large screen (e.g., a sales pitch;
 Interface Selection Options - Hardware
Platforms
• Embedded (stationary/mobile): LCD/LED
screen (typical size: less than 3–5 in.,
resolution: low), buttons, special sensors,
and output devices (touch screen, speaker,
microphone, special sensors); embedded
devices may be mobile or stationary and
offer only very limited interaction for a few
simple functionalities
• 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
 Interface Selection Options - Hardware
Platforms
• TV/consoles (stationary): LCD/LED screen
(typical size: >42 in., resolution: HD),
button-based remote control, speaker,
microphone, game controller, special
sensors, peripherals (camera, wireless
keyboard, Wii mote–like device [1], depth
sensor such as Kinect [2, 3]) (Figure 4.5)
• Suited for: TV-centric tasks, limited
interaction, tasks that need privacy (e.g.,
wild-gesture-based games in the living
room)
 Interface Selection Options - Hardware
Platforms
• Kiosks/installations (stationary): LCD
screen (typical size: 10–13 in.,
resolution: low to medium), buttons,
speaker, touch screen, special sensors,
peripherals (microphone, camera,
RFID/credit-card reader, heavy-duty
keyboard) (Figure 4.6)
• Suited for: Public users and installations,
limited interaction, short series of
selection tasks, monitoring tasks
 Interface Selection Options - Hardware
Platforms
• Virtual reality (stationary): 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) (Figure 4.7)
• Suited for: Spatial training, tele-
experience and tele-presence,
immersive entertainment
 Interface Selection Options - Hardware
Platforms
• Free form (stationary and mobile): Special-purpose hardware platforms
consisting of a customized configuration of individual devices best suited for a
given task (when cost is not the biggest factor). (There are many such custom-
designed interfaces)
 Interface Selection Options - Software
Interface Component
• Windows/layers: Modern desktop computer
interfaces are designed around windows,
which are visual output channels and
abstractions for individual computational
processes.
• For a single application, a number of subtasks
may be needed concurrently and thus must
be interfaced through multiple windows.
• One window among the many (or task) would
be “active,” and this window becomes
“focused” by placing the mouse cursor over it
or by an explicit click. F
 Interface Selection Options - Software
Interface Component
• nonoverlapping layers (a full-screen
window) may be used in which individual
layers are activated in turn by “flipping”
through them (e.g., flicking movements on
touch screens)
• multiple device and single-user experience
• Other important detailed considerations
for a window (for supporting interaction
for a subtask) might be its size, interior
layout, and management method (e.g.,
activation, deactivation, suspension)
Interface Selection Options - Software
Interface Component
• Icons: Interactable objects may be
visually represented as a compact and
small pictogram such as an icon (and
similarly as an “earcon” for the aural
modality).
• a compact representation designed for
facilitated interaction, icons must be
designed to be as informative or
distinctive as possible despite their
small size and compactness.
Interface Selection Options - Software
Interface Component
• Menus: Menus allow activations of commands and tasks through selection
(recognition) rather than recall.
• one-dimensional list or a two-dimensional (2-D) array of items (represented
in text or as icons/earcons).
• Three subtask:
• (a) activating the menu and laying out the items (if not already activated by
default),
• (b) visually scanning and moving through the items (and scrolling if the
display space is not sufficient to contain and show the whole menu of items at
once), and
• (c) choosing the wanted item.
Interface Selection Options - Software
Interface Component
Interface Selection Options - Software
Interface Component
Interface Selection Options - Software
Interface Component
Interface Selection Options - Software
Interface Component
• Direct interaction: The mouse/touch-based interaction is strongly tied
to the concept of direct and visual interaction.
• Before the mouse era, the HCI was mostly in the form of keyboard
inputting of text commands.
• The mouse made it possible for users to apply a direct metaphoric
“touch” upon the target objects (which are visually and
metaphorically represented as concrete objects with the icons) rather
than “commanding” the operating system (via keyboard input) to
indirectly invoke the job.
Interface Selection Options - Software
Interface Component
• GUI components: WIMP (window, icon, mouse, and pointer)
• Text box: Used for making short/medium alphanumeric input
• Toolbar: A small group of frequently used icons/functions organized
horizontally or vertically for a quick direct access
• Forms: Mixture of menus, buttons, and text boxes for long thematic
input
• Dialog/combo boxes: Mixture of menus, buttons, and text boxes for
short mixed-mode input
Interface Selection Options - Software
Interface Component
Interface Selection Options - Software
Interface Component
• 3-D interface (in 2-D interaction input space):
• Standard GUI elements that are operated and presented in the 2-D space, i.e.,
they are controlled by a mouse or touch screen and laid out on a 2-D screen.
• 3-D games and navigation
Wire-Framing
• The interaction modeling and interface options can be put together
concretely using the so-called wire-framing process.
• Wire-frames look like page schematics or screen blueprints, which
serve as a visual guide that represents the skeletal framework of a
website or interface .
• It depicts the page layout or arrangement of the UI objects and how
they respond to each other.
• 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.
Wire-Framing
www.fluidui.com
“Naïve” Design Example: No Sheets 1.0
• Requirements Analysis
• simple interactive smartphone (Android) application, called No Sheets
• eliminating the need to handle paper sheet music
“Naïve” Design Example: No Sheets 1.0
• Requirements Analysis
“Naïve” Design Example: No Sheets 1.0
• User Analysis
• The typical user for No Sheets is a smartphone owner and novice/
intermediate piano player (perhaps someone who wants to show off
their musical skill at a piano bar)
• a viewing distance of about 50 cm subtending
a letter of ±1 cm
• No gender consideration
“Naïve” Design Example: No Sheets 1.0
• User Analysis
• how the chord/music information should be displayed (e.g., portrait vs.
landscape, information layout and locations of the control buttons,
color-coding method, up-down scrolling vs. left-right paging, etc
“Naïve” Design Example: No Sheets 1.0
• Making a Scenario and Task Modeling
“Naïve” Design Example: No Sheets 1.0
• Making a Scenario and Task Modeling
• Select tempo: Set the tempo of the paging
• Show timed music information: Show the current/next chord/ beat/lyric
• Play/Pause: Activate/deactivate the paging
• Fast-forward: Manually move forward to a particular point in the
song
• Review: Manually move backward to a particular point in the song
• Show instruction: Show the instruction as to how to use the system
• Set preferences: Set preferences for information display and other
• Show software information: Show version number and developer
information
“Naïve” Design Example: No Sheets 1.0
“Naïve” Design Example: No Sheets 1.0
“Naïve” Design Example: No Sheets 1.0
• Interface Selection and Consolidation
• It is very important that we try to adhere to the HCI principles, guidelines, and
theories to justify and prioritize our decision.
“Naïve” Design Example: No Sheets 1.0