User Experience Design

User experience design is a set of incremental process activities that help the development team and the
project stakeholders focus on providing a positive experience for users of the software product.

User Experience Design Elements

User experience design tries to ensure that no aspect of software appears in the final release candidate
without the explicit decision of the development team and other stakeholders to include it. This means
taking into account every reasonable user action and expectation during every step of the
development process.

The Garrett’s organization of UX design can be interpreted as follows for software product
development:

 Strategy. Identifies user needs and customer business goals that form the
basis for all UX design work .

 Scope. Includes both the functional and content (e.g., information, media, services)
requirements needed to realize a feature set consistent with the project strategy.

 Structure. Consists of the interaction design [e.g., how the system reacts in response to user
actions and information architecture].

 Skeleton. Comprised of three components:

 information design (e.g., presentation of content in a way to make it understandable to the user),
 interface design [e.g., arranging interface screen objects to allow the user to work with the
system functionality,

 navigation design (e.g., the set of screen elements that allow users to traverse the information
architecture)

 Surface. Presents visual design or the appearance of the finished project to its users .

Several cross-cutting aspects of UX design are of particular interest to software engineers:

information architecture, user interaction design, usability engineering, and visual design.

Information Architecture
 The term information architecture is used to indicate structures that lead to better organization,
labeling, navigation, and searching of content objects.

 Content architecture focuses on the manner in which content objects (or composite objects such
as screens or widgets) are structured for presentation and navigation.

 Architecture design is conducted in parallel with interface design, aesthetic design, and content
 design.

 Because the software architecture may have a strong influence on navigation, the decisions
made during this design action will influence work conducted during navigation design.

User Interaction Design

• Interaction design focuses on the interface between a product and its user.
• User interaction should be defined by the stakeholders in the user stories created to describe how
users can accomplish their goals using the software product.

• This suggests that user interaction design should also include a plan for how information should
be presented within such a system and how to enable the user to understand that information.

The Questions user interaction designers must ask when devising user interfaces:
1. What can users do with a mouse, finger, or stylus to interact with the interface directly?
2. What about the appearance (e.g., color, shape, size) gives users clues about how the user
interaction functions?

3. What information do you provide to let users know what will happen before they perform an
action?

4. Are there any constraints put in place to help prevent errors?

5. Do error messages provide a way for users to correct a problem or explain why an error occurs?
6. What feedback do users get once an action is performed?

7. Are the interface elements a reasonable size to facilitate interaction?

8. What familiar or standard formats should be used to display information and accept input?

Usability Engineering
• Usability engineering is part of UX design work that defines the specification, design, and testing
of the human-computer interaction portion of a software product.

• This software engineering action focuses on devising human-computer interfaces that have high
usability. Usability engineering provides structured methods for achieving efficiency and
elegance in interface design.

• Accessibility is another aspect of usability engineering that should be considered when designing
user interactions with the software.

• Accessibility is the degree to which people with special needs (e.g., sight impaired, deaf, elderly,
cognitively impaired) are provided with a means to perceive, understand, navigate, and interact
with computer products.
 Visual Design
• Visual design, also called aesthetic design or graphic design, is an artistic endeavor that
complements the technical aspects of the user experience design.

• To perform effective aesthetic design, you should return to the user hierarchy developed as part
of the requirements model and ask, “Who are the product’s users and what ‘look’ do they desire?”

• Graphic design considers every aspect of the look and feel of a web or mobile app.

• The graphic design process begins with screen layout and proceeds into a consideration of global
color schemes; type fonts, sizes, and styles; the use of supplementary media (e.g., audio, video,
animation); and all other aesthetic elements of an application.

THE GOLDEN RULES

Theo Mandel coins three golden rules:
1. Place the user in control.
2. Reduce the user’s memory load.
3. Make the interface consistent.
These golden rules actually form the basis for a set of user interface design principles that guide
this important aspect of software design.

Place the User in Control

Mandel defines a number of design principles that allow the user to maintain control:
Define interaction modes in a way that does not force a user into unnecessary or undesired
actions. An interaction mode is the current state of the interface.
Provide for flexible interaction. Because different users have different interaction preferences,
choices should be provided. For example, software might allow a user to interact via keyboard
commands, mouse movement, a digitizer pen, a multi touch screen, or voice recognition
commands.
Allow user interaction to be interruptible and undoable. Even when involved in a sequence of
actions, the user should be able to interrupt the sequence to do something else (without losing the
work that had been done). The user should also be able to “undo” any action.
Streamline interaction as skill levels advance and allow the interaction to be customized.
Users often find that they perform the same sequence of interactions repeatedly. It is worthwhile
 to design a “macro” mechanism that enables an advanced user to customize the interface to
facilitate interaction.

Hide technical internals from the casual user. The user interface should move the user into the
virtual world of the application. The user should not be aware of the operating system, file
management functions, or other arcane computing technology.
Design for direct interaction with objects that appear on the screen. The user feels a sense of
control when able to manipulate the objects that are necessary to perform a task in a manner similar
to what would occur if the object were a physical thing.

Reduce the User’s Memory Load

The more a user has to remember, the more error-prone the interaction with the system will
be. It is for this reason that a well-designed user interface does not tax the user’s memory.
Whenever possible, the system should “remember” pertinent information and assist the user with
an interaction scenario that assists recall. Mandel defines design principles that enable an interface
to reduce the user’s memory load:
Reduce demand on short-term memory. When users are involved in complex tasks, the demand
on short-term memory can be significant. The interface should be designed to reduce the
requirement to remember past actions, inputs, and results.
Establish meaningful defaults. The initial set of defaults should make sense for the average user,
but a user should be able to specify individual preferences. However, a “reset” option should be
available, enabling the redefinition of original default values.
Define shortcuts that are intuitive. When mnemonics are used to accomplish a system function
(e.g., alt-P to invoke the print function), the mnemonic should be tied to the action in a way that is
easy to remember (e.g., first letter of the task to be invoked).
The visual layout of the interface should be based on a real-world metaphor. For example, a
bill payment system should use a checkbook and check register metaphor to guide the user through
the bill paying process. This enables the user to rely on well-understood visual cues, rather than
memorizing an arcane interaction sequence.
Disclose information in a progressive fashion. The interface should be organized hierarchically.
That is, information about a task, an object, or some behavior should be presented first at a high
level of abstraction. More detail should be presented after the user indicates interest with a mouse
pick.
Make the Interface Consistent

The interface should present and acquire information in a consistent fashion. This implies
that
(1) all visual information is organized according to design rules that are maintained
throughout all screen displays,

(2) input mechanisms are constrained to a limited set that is used consistently throughout
the application, and

(3) mechanisms for navigating from task to task are consistently defined and
implemented.

Mandel defines a set of design principles that help make the interface consistent:

Allow the user to put the current task into a meaningful context. Many interfaces
implement complex layers of interactions with dozens of screen images. It is important
to provide indicators (e.g., window titles, graphical icons, consistent color coding) that
enable the user to know the context of the work at hand.
Maintain consistency across a family of applications. A set of applications should all
implement the same design rules so that consistency is maintained for all interaction.
If past interactive models have created user expectations, do not make changes
unless there is a compelling reason to do so. Once a particular interactive sequence has
become a de facto standard (e.g., the use of alt-S to save a file), the user expects this in
every application he encounters. A change (e.g., using alt-S to invoke scaling) will cause
confusion.

USER INTERFACE ANALYSIS AND DESIGN

 The overall process for analyzing and designing a user interface begins with the creation of
different models of system function.
 First the human and computer-oriented tasks that are required to achieve system function
and then considering the design issues that apply to all interface designs.
 Tools are used to prototype and ultimately implement the design model, and the result is
evaluated by end users for quality.
Interface Analysis and Design Models
Four different models come into play when a user interface is to be analyzed and designed.

 A human engineer (or the software engineer) establishes a user model,

 The software engineer creates a design model,

 The end user develops a mental image that is often called the user’s mental model
or the system perception, and

 The implementers of the system create an implementation model.

The role of the interface designer is to reconcile these differences and derive a consistent
representation of the interface

User Profile Model

• Establishes the profile of the end-users of the system

– Based on age, gender, physical abilities, education, cultural or ethnic
background, motivation, goals, and personality
• Considers syntactic knowledge of the user
– The mechanics of interaction that are required to use the interface effectively
• Considers semantic knowledge of the user
– The underlying sense of the application; an understanding of the functions that
are performed, the meaning of input and output, and the objectives of the system
• Categorizes users as
– Novices
• No syntactic knowledge of the system, little semantic knowledge of the
application, only general computer usage
– Knowledgeable, intermittent users
• Reasonable semantic knowledge of the system, low recall of syntactic
information to use the interface
– Knowledgeable, frequent users
• Good semantic and syntactic knowledge (i.e., power user), look for
shortcuts and abbreviated modes of operation

Design Model
  Derived from the analysis model of the requirements
 Incorporates data, architectural, interface, and procedural representations of the
software
 Constrained by information in the requirements specification that helps define
the user of the system
 Normally is incidental to other parts of the design model
• But in many cases it is as important as the other parts

User's Mental Model

• Often called the user's system perception

• Consists of the image of the system that users carry in their heads

• Accuracy of the description depends upon the user’s profile and overall familiarity
with the software in the application domain

Implementation Model

• Consists of the look and feel of the interface combined with all supporting
information (books, videos, help files) that describe system syntax and semantics

• Strives to agree with the user's mental model; users then feel comfortable with the
software and use it effectively

• Serves as a translation of the design model by providing a realization of the

information contained in the user profile model and the user’s mental model

The Process
The analysis and design process for user interfaces is iterative and can be
represented using a spiral model . The user interface analysis and design process begins
at the interior of the spiral and encompasses four distinct framework activities
(1) interface analysis and modeling,
(2) interface design,
(3) interface construction, and
(4) interface validation.
Interface analysis focuses on the profile of the users who will interact with the system.
Skill level, business understanding, and general receptiveness to the new system are
recorded; and different user categories are defined. For each user category, requirements
are elicited. Once general requirements have been defined, a more detailed task analysis
is conducted. Those tasks that the user performs to accomplish the goals of the system
are identified, described, and elaborated (over a number of iterative passes through the
spiral).

Fig : The user interface design process

Finally, analysis of the user environment focuses on the physical work environment.
Among the questions to be asked are
• Where will the interface be located physically?
• Will the user be sitting, standing, or performing other tasks unrelated to the
interface?
• Does the interface hardware accommodate space, light, or noise constraints?
• Are there special human factors considerations driven by environmental factors?
Interface design is to define a set of interface objects and actions that enable a user to
perform all defined tasks in a manner that meets every usability goal defined for the
system.
Interface construction normally begins with the creation of a prototype that enables
usage scenarios to be evaluated. As the iterative design process continues, a user interface
tool kit may be used to complete the construction of the interface.
Interface validation focuses on
(1) the ability of the interface to implement every user task correctly, to accommodate all
task variations, and to achieve all general user requirements;
(2) the degree to which the interface is easy to use and easy to learn, and
(3) the users’ acceptance of the interface as a useful tool in their work.