Unit III

Design Process and Interaction Styles

By: Rudragouda Patil
 what is design?
Achieving goals within constraints

• Goals – purpose
• What is the purpose of the design we are intending to produce?
Who is it for? Why do they want it?
• Constraints
• What materials must we use? What standards must we adopt?
How much can it cost? How much time do we have to develop it?
Are there health and safety issues? In the case of the personal
movie player: does it have to withstand rain? Must we use existing
video standards to download movies? Do we need to build in
copyright protection?
• Trade-offs
The process of design

scenarios
what is task analysis
wanted guidelines
principles
interviews analysis precise
ethnography specification
design
what is there
vs. dialogue implement
what is wanted notations and deploy
evaluation
prototype
heuristics architectures
documentation
help
Ethnographic Observations
• Ethnography is a study of culture.
• Organizational culture exists within the minds of the people who
make up that organization
• This culture evolves over time, contains dominant cultures and
subcultures, and is subject to its own rules, rites, myths and symbols
• Ethnographic methods are qualitative, inductive, exploratory and
longitudinal. They achieve a thick, rich description over a relatively
small area.
• Time and Place are important practical consideration for Ethnographic
Observations.
Contextual Inquiry
• Contextual inquiry is a type of ethnographic field study that involves
in-depth observation and interviews of a small sample of users to gain
a robust understanding of work practices and behaviors.

• Context: The research takes place in the users’ natural environment

as they conduct their activities the way they normally would. The
context could be in their home, office, or somewhere else entirely.
• Inquiry: The researcher watches the user as she performs her task
and asks for information to understand how and why users do what
they do.
Why Conduct Contextual Inquiry
• The early discovery stages for a new feature or product.
• Resolve the drawbacks of other qualitative-research methodologies
such as surveys and interviews.
• Developer get to see things that wouldn’t anticipate and uncover low-
level details that have become habitual and invisible.
• Developer g
• et to see the interruptions, superstitious behaviors, and illogical
processes that directly influence UX work
Participatory Design
• Participatory design process involves all stakeholders in the design
process, so that the end result meets the needs they are desiring.
• Participatory design is used in various areas such as software design,
architecture, landscape architecture, product design, sustainability,
graphic design, planning, urban design, and even medicine.
• Participatory design is not a style, but focus on processes and
procedures of designing.
• It is seen as a way of removing design accountability and origination
by designers.
Participatory Design
• Brings end-users and customers to the design (and, one could argue,
development) process.
• Relocating end-users into the world of research and development.
• Inclusion of external participants can open some new areas and
directions.
• During the development and implementation phase, comments and
feedback from users are equally important, cherish developers.
Iterative Designs
• The iterative design process means that you return to expand and
enhance this material repeatedly – until the entire system has been
implemented and deployed.
• Scenarios
• Clear, comprehensive requirements have been defined
• Major requirements are defined at the onset, but some functionality may
evolve over time in collaboration with the client
• Time-to-market is a constraining element in the project
• Innovative technology is involved – and being learnt by the development
team as they work
• Goals are subject to change over time
Iterative Design
• Greater efficiency and faster time to market
• Lower product development costs
• Thorough product testing
• Fewer redesigns
• More user-friendly products
Navigation Design
• Navigation design is a design process that utilizes hyperlinks to
organize information on a website so that site visitors can navigate, or
find, the information they are looking for. Navigation can be text-
based or image-based.
Basic aspects of good navigation:
• Link to home page - When laying out the navigation, ensure the home page can be reached
from any displayed page.
• Group like functions - Gather similar functionality in one screen location where the user
expects to see them. For example, think about the editing functions in a word processor. All
the available editing functions are reachable from one location usually under the 'Edit'
function.
• Limit hyperlinks - Hyperlinks relating to the subject are always desirable, but don't overdo the
number of hyperlinks. The more hyperlinks used, the more complex the page appears.
• Three click rule - Web page destinations must be reached within three clicks. More than three
clicks indicate a complex structure requiring reorganization.
• Consistency - Maintain consistency among pages. Place navigation in the same location on
each page. For example, if your home page feature vertical side bar navigation on the left side
of the page, the vertical side bar navigation should appear on the left side of every page.
Navigation Design Fundamentals
• Creating effective navigation begins with three fundamental concepts:

• Content - Outline the material, separating significant blocks of information into

a hierarchical form ensuring each block has a single purpose; these blocks will
become your web pages.
• Audience - Identify the audience, keeping the navigation consistent with their
knowledge level. Ensure the navigational instructions are clear, concise, and not
overly simplistic or complex.
• Orientation - Determine in which orientation the navigation will appear. Will the
navigation be laid out in a horizontal or vertical orientation? Either orientation is
acceptable, however the horizontal orientation is more widely accepted. Much
depends on the content and which orientation best presents the information.
Visual Design
• Visual design aims to improve a design’s/product’s aesthetic appeal
and usability with suitable images, typography, space, layout and
color.
• Users’ first impressions typically form in 50 milliseconds
• Many people mistake it to mean that designers include attractive
elements just to maximize an item’s appeal.
• Actually, you use visual design to create and organize elements to A)
lead the user’s eye to an item’s functionality, and B) make the
aesthetics consistent.
Visual Design
• These are some of the most common—and fundamental—elements
and principles of visual design:
• Lines (straight/curved/geometric/organic) – use these to create divisions, textures and
shapes.
• Shapes – use lines, different colors, etc. to create enclosed/self-contained areas.
• Negative space/whitespace – use the blank area around a “positive” shape to create a
figure/ground effect or calm the design overall.
• Volume – use this to show the rich fullness of all three dimensions of elements on two-
dimensional screens.
• Value – use this to set the relationship between lightness and darkness, typically through a
light source to create shadows and highlights.
• Color – use this to set the theme/tone and attract attention.
• Texture – use this to define an object’s surface.
Visual Design Principals
• Unity – use this to establish harmony between page elements, so they
appear to belong together and users aren’t distracted by chaotic (e.g.,
misaligned) layouts.
• Gestalt - use these principles of how people perceive objects to guide how
users interpret your design.
• Hierarchy – use placement, font, etc. to show importance.
• Balance – use this to distribute elements evenly.
• Contrast – use differences in color, etc. to accentuate elements.
• Scale – use this to emphasize elements to establish importance or depth.
• Dominance – use an object’s size, color, etc. to make it stand out.
Unity has to do with all elements on a page visually or conceptually appearing to belong
together. Visual design must strike a balance between unity and variety to avoid a dull or
overwhelming design.

•Gestalt, in visual design, helps users perceive the overall design as opposed to individual elements.
If the design elements are arranged properly, the Gestalt of the overall design will be very clear.

•Space is “defined when something is placed in it”, according to Alex White, The Elements of Graphic
Design. Incorporating space into a design helps reduce noise, increase readability, and/or create
illusion. White space is an important part of your layout strategy.

•Hierarchy shows the difference in significance between items. Designers often create hierarchies
through different font sizes, colors, and placement on the page. Usually, items at the top are perceived
as most important.
•Balance creates the perception that there is equal distribution. This does not always imply that there
is symmetry.

•Contrast focuses on making items stand out by emphasizing differences in size, color, direction, and
other characteristics
•.
•Scale identifies a range of sizes; it creates interest and depth by demonstrating how each item
relates to each other based on size.

•Dominance focuses on having one element as the focal point and others being subordinate. This is
often done through scaling and contrasting based on size, color, position, shape, etc.

•Similarity refers to creating continuity throughout a design without direct duplication. Similarity is
used to make pieces work together over an interface and help users learn the interface quicker.
Design Patterns

• Patterns and pattern languages for

describing patterns are ways to describe
best practices, explain good designs, and
capture experience in a way that it is
possible for others to reuse this experience
Interaction Design Patterns
• An interaction design (ID) pattern is a general repeatable solution to a
commonly-occurring usability problem in interface design or interaction
design. An ID pattern usually consists of the following elements:
• Problem: Problems are related to the usage of the system and are
relevant to the user or any other stakeholder that is interested in
usability.
• Use when: a situation (in terms of the tasks, the users and the context
of use) giving rise to a usability problem. This section extends the plain
problem-solutions dichotomy by describing situations in which the
problems occur.
• Principle: a pattern is usually based on one or more ergonomic
principles such as user guidance, or consistency, or error management.
• Solution: a proven solution to the problem. A solution describes only
the core of the problem, and the designer has the freedom to
implement it in many ways. Other patterns may be needed to solve sub
problems.
• Why: How and why the pattern actually works, including an analysis of
how it may affect certain attributes of usability. The why should
describe which usability aspects should have been improved or which
other aspects might suffer.
• Examples: Each example shows how the pattern has been successfully
applied in a real life system. This is often accompanied by a
screenshot and a short description.
• Implementation: Some patterns provide implementation details.
Scenarios
• Scenarios describe the stories and context behind why a specific user
or user group comes to your site. They note the goals and questions
to be achieved and sometimes define the possibilities of how the
user(s) can achieve them on the site.
What to Consider When Writing Scenarios
• Who is the user? Use the personas that have been developed to
reflect the real, major user groups coming to your site.
• Why does the user come to the site? Note what motivates the user
to come to the site and their expectations upon arrival, if any.
• What goals does he/she have? Through task analysis, you can better
understand the what the user wants on your site and therefore what
the site must have for them to leave satisfied.
• Goal- or Task-Based Scenarios state only what the user wants to do.
• Example: You are traveling to Pune for your job next week and you
want to check on the amount you can be reimbursed for meals and
other expenses.
• Elaborated Scenarios give more user story details. These details give
the Web team a deeper understanding of the users and users’
characteristics
• Scenarios can also work together with personas by serving as the
stories behind why the particular persona would come to your
website.
Interaction Styles: CLI
• Command Line Interface:
• Advantages
• Flexible.
• Appeals to expert users.
• Supports creation of user-defined "scripts" or macros.
• Is suitable for interacting with networked computers even with low bandwidth.
•
Disadvantages
• Retention of commands is generally very poor.
• Learnability of commands is very poor.
• Error rates are high.
• Error messages and assistance are hard to provide because of the diversity of possibilities plus the
complexity of mapping from tasks to interface concepts and syntax.
• Not suitable for non-expert users.
Form Fill-in:
• Advantages
• Simplifies data entry.
• Shortens learning in that the fields are predefined and need only be
'recognised'.
• Guides the user via the predefined rules.

• Disadvantages
• Consumes screen space.
• Usually sets the scene for rigid formalisation of the business processes
Menu Selection
• Advantages
• Ideal for novice or intermittent users.
• Can appeal to expert users if display and selection mechanisms are rapid and if appropriate
"shortcuts" are implemented.
• Affords exploration (users can "look around" in the menus for the appropriate command, unlike
having to remember the name of a command and its spelling when using command language.)
• Structures decision making.
• Allows easy support of error handling as the user's input does not have to be parsed (as with
command language).

• Disadvantages
• Too many menus may lead to information overload or complexity of discouraging proportions.
• May be slow for frequent users.
• May not be suited for small graphic displays.
Direct Manipulation
• Direct manipulation systems have the following characteristics:
• Visibility of the object of interest.
• Rapid, reversible, incremental actions.
• Replacement of complex command language syntax by direct manipulation of
the object of interest.
Direct Manipulation
• Advantages
• Visually presents task concepts.
• Easy to learn.
• Errors can be avoided more easily.
• Encourages exploration.
• High subjective satisfaction.
• Recognition memory (as opposed to cued or free recall memory)

• Disadvantages
• May be more difficult to programme.
• Not suitable for small graphic displays.
• Spatial and visual representation is not always preferable.
• Metaphors can be misleading since the “the essence of metaphor is understanding and experiencing one kind
of thing in terms of another” (Lakoff and Johnson 1983: p. 5), which, by definition, makes a metaphor
different from what it represents or points to.
• Compact notations may better suit expert users.
Internationalization
• Internationalization is the process of designing and developing your
software or mobile application product so it can be adapted and
localized to different cultures, regions, and languages.
• Internationalization helps you build your software or mobile
application product with future markets and languages in mind.
Interactive Systems and SDLC
1. Obtain user ideas about the proposed system
Discuss the system with the prospective users/customers. Compare it
to an existing one, (if there is one), and identify the weaknesses and
strengths of the existing system. Detailed questionnaires to targeted
prospective users. Task analysis.
2. Decide general design approach
May depend on hardware and software to be used, and past
conventions, as well as suitability to task in hand.
Questions that may have to be considered: WIMP interface or
command line? What input/output devices, what hardware, software
tools? Interface guidelines?
SDLC
3. Initial requirements specification
User requirements (what the user wants it to do: enter this, display
that). May also include initial attempt at architectural design (how
the system will provide the services).
4. Design
Interaction design and interface design how the system responds to
things, how and what information is presented and entered. Ties in
to architectural design and detailed design i.e. structure and detail
of code modules.
SDLC
5. Prototype
Produce a developmental version to check that designers ideas meet customers
requirements, and to try out novel concepts to see if they work, and so on.
Prototypes are not necessarily functional, particularly if they are trying out new
interface/interaction ideas - they can be mocked up, perhaps first on paper, then
on the machine, before ever being attached to pieces of code.
6. Evaluate
Prototypes and near-working systems, in alpha or beta release, should be
carefully evaluated to see if they meet the clients requirements and are easy,
intuitive and sensible to use. It is often the case that prospective users are very
different to the actual designers and so find certain things particularly difficult
with the current system, and the aim of evaluating the system at this stage is to
catch these errors.
SDLC
7. Redesign
The system should be redesigned to correct the problems found earlier this
may be minor or may be major, depending on what was discovered.
8. Re-implement
The re-implementation may be to produce the final version, or another
prototype for another round of refinement of ideas. It is sometimes the
case that many prototypes are tested, until finally the design is agree.
• For some projects, the prototype is then discarded and the system re-
implemented from scratch, often in a different language, with considerations
of efficiency and functionality as well as interaction and interface.