What is Design?

Design means achieving the goals within constraints.

• Goals – purpose (who is it for, why do they want it, How your design look like in future)

• Constraints - materials, platforms

GOLDEN RULE OF DESIGN which we are suppose to understand the requirements of the user and the materials
going to use.

GOLDEN RULE OF DESIGN according to HCI

• Understand computers limitations, capacities, tools, platforms

• And understand people psychological, social aspects, human error and their interaction.

Steps

• Requirements - what is there and what is wanted.

• Analysis - ordering and understanding

• Design - what to do and how to decide

 • Iteration and Prototyping - getting it right and finding what is really needed.

• Implementation and Deployment - making it and getting it out there

• Testing

• Usability –

Finding problems and fixing them?

Deciding what to fix?

User Focus

As a developer we are suppose to know your user personae (characters) and cultural probes like as follows

• Who are they?

• Probably not like you!

• Talk to them

• Watch them

• Use your imagination

Scenarios

• A scenario is an idealised but detailed description of a specific instance of human-computer interaction (HCI).
Stories for design/ / Rich Stories for interaction/ Description of stories design.

• Scenarios force you to think about the design in details and notice potential problem before they happen.

A set of scenarios can be used as a “filter bank” to weed out theories whose scope is too narrow for them to apply to
many real HCI situations.

Scenarios, basically means circumstance for design, use and reuse of the product.

Stories for Design

• communicate with others

• Validate other models

• Understand dynamics

Linearity

• Time is linear - our lives are linear (but don’t show alternatives)

What will Users want to do?

Step-by-Step Walkthrough - what can they see (sketches, screen shots), what do they do (keyboard, mouse etc.) and
what are they thinking?
Navigation

• Navigation is a field of study that focuses on the process of monitoring and controlling the movement

Navigation design is basically divided into two major types,

• Local Structure – Single Screen

• Global Structure – Whole Screen

• Local Structure – Single Screen

• Global Structure – Whole Screen

• Widget choice - menus, buttons and etc.

• Screen design

• Application navigation design

• Environment - other apps

• Widget choice - menus, buttons and etc.

• Screen design

• Application navigation design

 • Environment - other apps

Screen Design and Layout

Basic principles of screen design and layout starts with grouping, structure,

order alignment use of white space

• Ask - what is the user doing?

• Think - what information, comparisons, order

• Design - form follows function

• White Space

White space is the area between design elements.

It is also the space within individual design elements,

including the space between typography glyphs

readable characters).

• Physical Controls

Iteration and Prototypes

• Getting better and starting well

• You never get it right first time

• If at first you don’t succeed

Pitfalls of prototyping

• Move little by little

• Malverns or the Matterhorn?

• Need a good start point

• Need to understand what is wrong

HCI Software Process

Human-computer interaction (HCI) is a multidisciplinary field of study focusing on the design of computer technology
and, in particular, the interaction between humans (the users) and computers.

There are, the 3 main components of HCI,

• The user

• The computer itself

• The ways they work together.

• Engineering: It’s a structured application of Scientific Technique to development of Product.

• Software engineering is the discipline for understanding the software design process, or life cycle

• Designing for usability occurs at all stages of the life cycle, not as a single isolated activity

Verification and validation

• Verification - designing the product right

• Validation - designing the right product

The Life Cycle for Interactive Systems

Usability Engineering

• The ultimate test of usability based on measurement of user experience

• Usability engineering demands that specific usability measures be made explicit as requirements

Usability specification

• Usability attribute/principle

• Measuring concept

• Measuring method

• Now level/ worst case/ planned level/ best case

Problems

• Usability specification requires level of detail that may not be

• Possible early in design satisfying a usability specification

• Does not necessarily satisfy usability

ISO-9241 Usability Standard

Adopts traditional usability categories:

• Effectiveness - can you achieve what you want to?

• Efficiency - can you do it without wasting effort?

• Satisfaction - do you enjoy the process?

Prototyping in Practice

Concrete representation of all interactive system.

Prototype A type of development in which emphasis is placed on developing prototypes early in the development
process to permit early feedback and analysis in support of the development process.

Iterative design and prototyping

• Iterative design overcomes inherent problems of incomplete requirements

• Prototypes
 • Simulate or animate some features of intended system

• Different types of prototypes

• Throw-away

• Incremental

• Evolutionary

Techniques for Prototyping

• Storyboards - need not be computer-based, it can be animated

• Limited functionality simulations - some part of system functionality

provided by designers tools like HyperCard are common for these

Wizard technique.

Design Rationale

• A design rationale is the explicit listing of decisions made during a design process, and the reasons why those
decisions were made.

• Its primary goal is to support designers by providing a means to record and communicate the argumentation
and reasoning behind the design process.

Benefits of design rationale

• Communication throughout life cycle

• Reuse of design knowledge across products

• Enforces design discipline

• Organizes potentially large design space

Types of design rationale

• Process-oriented - preserves order of deliberation and decision-making

• Structure-oriented - emphasizes post hoc structuring of considered design alternatives

Application of design rationale

• Design verification — The design rationale can be used to verify if the design decisions and the product itself
are the reflection of what the designers and the users actually wanted.

• Design evaluation — The design rationale is used to evaluate the various design alternatives discussed
during the design process.

• Design maintenance — The design rationale helps to determine the changes that are necessary to modify
the design.

• Design reuse — The design rationale is used to determine how the existing design could be reused for a new
requirement with or without any changes in it. If there is a need to modify the design, then the DR also
suggests what needs to be modified in the design.

• Design teaching — The design rationale could be used as a resource to teach people who are unfamiliar with
the design and the system.

• Design communication — The design rationale facilitates better communication among people who are
involved in the design process and thus helps to come up with a better design.

• Design assistance — The design rationale could be used to verify the design decisions made during the
design process.

• Design documentation — The design rationale is used to document the entire design process which involves
the meeting room deliberations, alternatives discussed, reasons behind the design decisions and the product
overview.

Types of Design Rules

• Principles

• Abstract design rules

• Low authority

• High generality

• Standards

• Specific design rules

• High authority

• Limited application

• Guidelines

• Lower authority
 • More general application

Principles to Support Usability

• Learnability - the ease with which new users can begin effective interaction and achieve maximal
performance.

• Flexibility - the multiplicity of ways the user and system exchange information.

• Robustness - the level of support provided

the user in determining successful achievement and assessment of goal-directed behaviour.

Standards

• Standards are set by national or international bodies to ensure compliance by a large community of
designers standards require sound underlying theory and slowly changing technology.

• Hardware standards more common than software high authority and low level of detail.

• ISO 9241 defines usability as effectiveness, efficiency and satisfaction with which users accomplish tasks.

Shneiderman’s 8 Golden Rules

1. Strive for consistency

2. Enable frequent users to use shortcuts

3. Offer informative feedback

4. Design dialogs to yield closure

5. Offer error prevention and simple error handling

6. Permit easy reversal of actions

7. Support internal locus of control

8. Reduce short-term memory load

Norman’s 7 Principles

1. Use both knowledge in the world and knowledge in the head.

2. Simplify the structure of tasks.

3. Make things visible: bridge the gulfs of Execution and Evaluation.

4. Get the mappings right.

5. Exploit the power of constraints, both natural and artificial.

6. Design for error.

7. When all else fails, standardize.

Evaluation Techniques

Evaluation

• Tests usability and functionality of system

• Occurs in laboratory, field and/or in collaboration with users

• Evaluates both design and implementation

• Should be considered at all stages in the design life cycle

Goals of Evaluation

• Assess extent of system functionality

• Assess effect of interface on user

• Identify specific problems

Evaluating Designs

Cognitive Walkthrough - Evaluates design on how well it supports user in learning task
Heuristic Evaluation - Design examined by experts to see if these are violated
Review-based Evaluation - Results from the literature used to support or refute parts of design.

Evaluating through user Participation

• Laboratory Studies

• Field Studies

Evaluating Implementations

• Simulation

• Prototype

• Full implementation

Observational Methods

• Think Aloud

• Cooperative Evaluation

• Protocol Analysis

• Automated Analysis

• Post-task Walkthroughs

Query Techniques

• Interviews
 • Questionnaires

Physiological methods

• Eye tracking

• Physiological measurement

Choosing an Evaluation Method

when in process: design vs. implementation

style of evaluation: laboratory vs. field

how objective: subjective vs. objective

type of measures: qualitative vs. quantitative

level of information: high level vs. low level

level of interference: obtrusive vs. unobtrusive

resources available: time, subjects, equipment, expertise

Cognitive Models

➢ Cognitive systems learn and interact naturally with humans to extend what either humans or machine could
do on their own.

➢ Cognitive systems help human experts make better decision by penetrating the complexity of Big Data.

➢ Cognitive models represent users of interactive systems.

• Hierarchical models represent a user‘s task and goal structure.

• Linguistic models represent the user–system grammar.

• Physical and device models represent human motor skills.

• Cognitive architectures underlie all of these cognitive models.

Goal and Task Hierarchies

• To achieve this goal we divide it into several subgoals,

say gathering the data together, producing the tables and

histograms, and writing the descriptive material.

• Concentrating on the data gathering, we decide to split

this into further subgoals: find the names of all introductory

HCI textbooks and then search the book sales database for

these books.

• Similarly, each of the other subgoals is divided up into further subgoals, until some level of detail is found at
which we decide to stop.

Task Hierarchies Techniques

• GOMS => (Goals, Operators, Methods and Selection)

• CCT => (Cognitive Complexity Theory)

• HTA => (Hierarchical Task Analysis)

GOMS

• Goals = what the user wants to achieve

• Operators = basic actions user performs

• Methods = decomposition of a goal into subgoals/operators

 • Selection = means of choosing between competing methods

CCT (Cognitive Complexity Theory)

• Two parallel descriptions:

User production rules

Device generalised transition networks

• Production rules are of the form:

If condition then action

• Transition networks covered under dialogue models

HTA => (Hierarchical Task Analysis)

• Describes an activity in terms of its specific goals, subgoals, operations, and plans.

• Once the analysis is complete, the task activity is described in detail.

• To construct an in-depth list of goals or tasks associated with a specific process.

Linguistic Notations

• Understanding the user's behaviour and cognitive difficulty based on analysis of language between user and
system.

• Similar in emphasis to dialogue models

➢ Backus–Naur Form (BNF)

• Very common notation from computer science

• A purely syntactic view of the dialogue

➢ Task–Action Grammar (TAG)

• Making consistency more explicit

• Encoding user's world knowledge

• Parameterised grammar rules

• Nonterminals are modified to include additional semantic features

Socio-Organizational Issues and Stakeholder Requirements

• In addition to generic issues, designers must identify specific stakeholder requirements within their
organizational context.

• Socio-technical models capture both human and technical requirements. Soft systems methodology takes a
broader view of human and organizational issues.

• Organizational issues affect acceptance - conflict & power, who benefits, encouraging use
 • Stakeholders - identify their requirements in organizational context

• Socio-technical models - human and technical requirements

• Soft systems methodology - broader view of human and organizational issues

• Participatory design - includes the user directly in the design process

• Ethnographic methods - study users in context, unbiased/unbalanced perspective

Communication

• All computer systems, single user or multi-user, interact with the work-groups and organizations in which
they are used.

• We need to understand normal human-human communication:

➢ Face-to-face communication involves eyes, face and body

➢ Conversation can be analyzed to establish its detailed structure.

• This can then be applied to text-based conversation, which has:

➢ Reduced feedback for confirmation

➢ Less context to disambiguate utterances

➢ Slower pace of interaction but is more easily reviewed.

Face-to-Face Communication

• It involves speech, hearing, body language and eye-gaze.

• A person has to be familiar with existing norms, to learn a new norm.

• Another factor is the personal space, this varies based on the context, environment, diversity and
culture.

• The above factor comes into pitcher, when there is a video conference between two individuals from
different background.

• The factor of eye gaze is important during a video conference as the cameras are usually mounted
away from the monitor and it is important to have eye contact during a conversation.

• Back channels help giving the listener some clues or more information about the conversation.

• The role of interruptions like 'um's and 'ah's are very important as they can be used by participants in a
conversation to claim the turn.

Conversation

• Transcripts can be used as a heavily annotated conversation structure, but still lacks the back channel
information.

• Another structure is of turn-taking, this can be interpreted as Adjacency pairs, e.g.: A-x, B-x, A-y, B-y

• Context varies according to the conversation.

 • The focus of the context can also varies, this means that it is difficult to keep track of context using
adjacency pairs.

• Break-downs during conversations is often a case and can be noticed by analyzing the transcripts.

• Reaching a common ground or grounding is very essential to understand the shared context.

Text-Based Communication

• 4 types of communication

• Discrete e.g. email

• Linear e.g. single transcript

• Non-linear e.g. linked through hypertext fashion

• Spatial e.g. messages arranged in 2D surface

• Difference between this and face-to-face communication is that it has lack of back channels and states

• Turn-taking is the fundamental structure used here.

Group working

• The roles and relationship between the group individuals are different and may change during the
conversation.

• Physical layout is important to consider here to maintain the factors in face-to-face communication.

Collaboration Models

What is dialogue?

• Conversation between two or more parties

- Usually cooperative

• In user interfaces

- Refers to the structure of the interaction

- Syntactic level of human–computer ‘conversation’

• Levels

• Lexical – shape of icons, actual keys pressed

• Syntactic – order of inputs and outputs

• Semantic – effect on internal application/data

Dialogue Notations and Design

• Dialogue Notations

Diagrammatic - state transition networks, JSD diagrams, flow charts

Textual - formal grammars, production rules, CSP

 • Dialogue linked to

The semantics of the system – what it does

The presentation of the system – how it looks

• Formal descriptions can be analysed

For inconsistent actions

For difficult to reverse actions

For missing actions

For potential miskeying errors

Hypertext

• Hypertext is text displayed on a computer display or other electronic devices with references (hyperlinks) to
other text that the reader can immediately access.

• Hypertext documents are interconnected by hyperlinks, which are typically activated by a mouse click,
keypress set, or screen touch.

• Apart from text, the term "hypertext" is also sometimes used to describe tables, images, and other
presentational content formats with integrated hyperlinks.

• Understanding hypertext

- text escapes linearity, words and the page

• Imposes strict linear progression on the reader

• Non-linear structure

• Blocks of text (pages)

• Links between pages create a mesh or network

• Users follow their own path through information

Multimedia

• It is type of information through electronic means, Internet. It comprised of graphics, text, videos, audios,
animations, information on laptops and other similar devices. The elements of multimedia shows us quality
pictures, animations, sounds, text information which directly impacts on the user’s brain. Even we can
perform editing on these different types of multimedia.

Hypermedia

• A lot of hypermedia types have been proposed (CCXML, RDF/XML, SensorML, Sitemap XML, SMIL, SVG, TriG,
TriX, Turtle, and others)

• Some of the commonly used types are HAL, JSON-LD, and Collection+JSON.

Comparison Multimedia vs Hypermedia

S.No. Comparison Multimedia Hypermedia

It represents the various forms of representing It is an extension of hypertext and not

1. Basic
the information. considered as text-based.

2. Types available Both linear and non-linear available. Only non-linear available.

It combines with hypertext to form a It combines both hypertext as well as

3. Relation
hypermedia. multimedia to represent information.

It is used for inter-connectivity among

It basically works on interaction and
4. Based on elements and also for the cross
interactivity.
referencing.
 Requirements of It requires it own delivery system called as It provides the clickable links to
5.
hardware multimedia delivery system. increase capability.

It is the combination of the media and content

Information It is more contrasting in nature and
6. which stores the information in some form
present used in non-linear data representation.
across the devices.

WWW

• The development of the World Wide Web was begun in 1989 by Tim Berners-Lee and his colleagues at CERN,
an international scientific organization based in Geneva, Switzerland.

• World Wide Web (WWW), byname the Web, the leading information retrieval service of the Internet (the
worldwide computer network).

• The Web gives users access to a vast array of documents that are connected to each other by means of
hypertext or hypermedia links—i.e., hyperlinks, electronic connections that link related pieces of information
in order to allow a user easy access to them.

• A hypertext document with its corresponding text and hyperlinks is written in HyperText Markup Language
(HTML) and is assigned an online address called a Uniform Resource Locator (URL).

• They created a protocol, HyperText Transfer Protocol (HTTP), which standardized communication between
servers and clients. Their text-based Web browser was made available for general release in January 1992.