CCS370-UI AND UX DESIGN PIT-CSE-III Year –V

COMPUTATION SEM

PANIMALAR INSTITUTE OF TECHNOLOGY

DEPARTMENT OF CSE
R-2021
ACADEMIC YEAR :2022-2023
BATCH :2021-2025
YEAR/SEM :III/V
SUBJECTCODE/TITLE :CCS370/UI AND UX DESIGN
UNIT-2

FOUNDATIONS OF UI DESIGN

1
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

UNIT II FOUNDATIONS OF UI DESIGN

Visual and UI Principles - UI Elements and Patterns - Interaction Behaviors and Principles –
Branding - Style Guides

VISUAL AND UI PRINCIPLES

Visual design
 Visual design aims to improve a design‘s /product‘s aesthetic appeal and usability with suitable
images, typography, space, layout and color.
 Visual design is about more than aesthetics. Designers place elements carefully to create interfaces
that optimize user experience and drive conversion.

Visual Design is Aesthetic, Strategic Design

 Visual design gives first impression
Users‘ first impressions typically form in 50 milliseconds. This fact reflects the visceral level of emotional
design-in other words, the user‘s first impression of or reaction to a design. If users don‘t like what is show,
they will leave. So, visual design is a vital part of your work as a designer.
 Purpose of visual design
Visual design is used to create and organize elements to
A) lead the user‘s eye to an item‘s functionality
B) make the aesthetics consistent.
 Need of visual design
Designers compose and arrange website content around each page‘s purpose to ensure that content gives off
the right visual cues.
The smallest and subtlest details will affect what users think and how they feel. So, designers must always
show users the right things in the right way.
 Challenges for visual designers
1. User uncertainty. Therefore, a visual design should draw their attention to the important aspects and
strike the balance between a fresh, powerful design and something users expect to see.
2. The application of visual design will depend on product, its organization/industry and its users
3. A major factor in visual design is that designers work to accommodate user limitations such as
cognitive load.

THE KEY ELEMENTS & PRINCIPLES OF VISUAL DESIGN

Visual design is about creating and making the general aesthetics of a product consistent. To create the
aesthetic style of a website or app, designers work with fundamental elements of visual design, arranging
them according to principles of design.

Elements of Visual Design

Any product — from software products such as websites and apps to hardware products such as toasters and
hairdryers — can be broken down into fundamental elements of visual design as follows:

2
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
LINE
Lines are strokes connecting two points, and the most basic element of visual design. We can use them to
create shapes, and when we repeat them, we can form patterns that create textures.

A line connects two points and is the simplest element of design.

Properties of line
Lines can possess a large variety of properties that allow us to convey a range of expressions.
For example, lines can be thick or thin, straight or curved, have uniform width or taper off, be geometric
(i.e., look like they are drawn by a ruler or compass) or organic (i.e., look like they are drawn by hand).

Lines are simple, but can convey different emotions by using different properties.
A line can also be implied: that is, suggested by forming an invisible connection between other elements.
Example: In the logo of the Interaction Design Foundation, for instance, the words ―Interaction Design

3
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
Foundation‖ around the tree connect to create a semicircular implied line.

SHAPE
Shapes are self-contained areas, usually formed by lines (although they may also be formed by using a
different colour, value or texture). A shape has two dimensions: length and width.

We tend to identify objects by their basic shapes, and only focus on the details (such as lines, values, colours
and textures) on closer inspection. For this reason, shapes are crucial elements that we designers use for
quick and effective communication.

NEGATIVE/WHITE SPACE
Negative space (also known as white space) is the empty area around a (positive) shape. The relation
between the shape and the space is called figure/ground, where the shape is the figure and the area around
the shape is the ground. Negative space is just as important as the positive shape itself — because it helps to
define the boundaries of the positive space and brings balance to a composition.

Negative space, also called white space, is the empty area around a positive shape. You can choose to see

4
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
this as a blue ball set against a light blue rectangle — or, is it a light blue rectangle with a hole in it?

Some designs make use of negative space to create interesting visual effects. For example, the famous World
Wide Fund for Nature (WWF) logo makes use of the confusion between positive shape and negative space to
create the image of a panda.

WWF‘s logo doesn‘t explicitly draw out the entire panda: it cleverly uses negative (white) space around the
black shapes to suggest the rest of the panda.

VOLUME
Volume applies to visuals that are three-dimensional and have length, width and depth. We rarely use
volume in visual design, because most digital products end up being viewed on a 2D screen, although some
apps and websites do use 3D models and graphics.

VALUE
Value, quite simply, describes light and dark.

5
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

A design with a high contrast of values (i.e., one which makes use of light and dark values) creates a sense of
clarity, while a design with similar values creates a sense of subtlety. We can also use value to simulate
volume in 2D, for instance, by using lighter values where the light hits the object and darker values for
shadows.

Differences in values create clear designs, while designs using similar values tend to look subtle.

COLOUR
Colour is an element of light. Colour theory is a branch of design focused on the mixing and usage of
different colours in design and art. In colour theory, an important distinction exists between colours that mix
subtractively and colours that mix additively.

SUBTRACTIVE MIX
In paint, colours mix subtractively because the pigments in paints absorb light. When different pigments are
mixed together, the mixture absorbs a wider range of light, resulting in a darker colour. A subtractive mix of
cyan, magenta and yellow will result in a black colour. A subtractive mix of colours in paint and print
produces the CMYK (i.e., Cyan, Magenta, Yellow and blacK) colour system.

ADDITIVE MIX
In digital design, where the product shows up on a screen, colours mix additively, since the screen emits
light and colours add to one another accordingly. When different colours are mixed together on a screen, the
mixture emits a wider range of light, resulting in a lighter colour. An additive mix of red, blue and green
colours on screens will produce white light. An additive mix of colours on digital screens produces the RGB
(i.e., Red, Green, Blue) colour system.

6
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
The subtractive mix of colours in paint and print produces the CMYK colour system. The additive mix of
colours on digital screens produces the RGB colour system.

We use colours in visual design to convey emotions in and add variety and interest to our designs, separate
distinct areas of a page, and differentiate our work from the competition.
TEXTURE
Texture is the surface quality of an object.

Texture can be created by a repeated pattern of lines, or by using tiled images of textures. Above, the
diagonal lines add a ‗grip‘ effect to an otherwise ‗smooth‘ rectangle.
Types of texture
There are two types of textures: tactile textures, where you can feel the texture, and implied textures, where
you can only see — i.e., not feel — the texture. Most visual designers will work with implied textures, since
screens are unable to produce tactile textures.
Example:
The app icon designs in iOS 6 and earlier mimic the glossy texture of glass to incite users to tap them. Later,
Apple introduced a linen fabric texture to much of its user interface.

iOS 1-6 app icons feature a glossy texture so that they look like actual buttons.

VISUAL DESIGN PRINCIPLES

7
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
The elements of visual design — line, shape, negative/white space, volume, value, colour and texture —
describe the building blocks of a product‘s aesthetics. On the other hand, the principles of design tell how
these elements can and should go together for the best results. Many of the principles below are closely
related and complement one another.

Unity
Unity has to do with creating a sense of harmony between all elements in a page. A page with elements that
are visually or conceptually arranged together will likely create a sense of unity.

A lack of unity in designs can create a sense of unease and chaos. Our eyes govern our judgements.
When we‘re designing websites, we can make use of a grid for achieving a sense of unity, since elements
organised in a grid will follow an orderly arrangement.

Gestalt
Gestalt refers to our tendency to perceive the sum of all parts as opposed to the individual elements. The
human eye and brain perceive a unified shape in a different way to the way they perceive the individual parts
of such shapes. In particular, we tend to perceive the overall shape of an object first, before perceiving the
details (lines, textures, etc.) of the object.

Gestalt is the reason that we can see a square, circle and triangle even though the lines are not complete. We
8
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
see the whole formed by the dotted lines first, before perceiving the separate dotted lines in each of the
images.
Example:
The WWF logo,is an example of making use of the principle of gestalt to create interesting designs. By
placing the parts of a panda near one another and strategically, the design makes use of our tendency to view
the whole of an image rather than its parts, thereby creating an illusion of a panda.
Need for gestalt
Gestalt is important, for instance, in making separate sections of a website distinct by increasing the white
space between them. As designers, we should make sure that the parts of a website we group together by
using gestalt principles — i.e., if they are close to one another, have the same shape, and/or are similarly
sized — are indeed conceptually grouped together.
Designs with clear sections are easier to process and scan than those without clear distinctions between
sections — especially if the sections are conceptually distinct.

Hierarchy
Hierarchy shows the difference in importance of the elements in a design. Colour and size are the most
common ways we can create hierarchy — for instance, by highlighting a primary button, or using larger
fonts for headings. Items that appear at the top of a page or app also tend to be viewed as having a higher
hierarchy than those appearing below.

Font size and style is one of the ways to establish hierarchy.

Balance
Balance is the principle governing how we distribute the elements of a design evenly. Balanced designs tend
to appear calm, stable and natural, while imbalanced designs make us feel uneasy.

Balanced designs appear stable, while imbalanced designs seem unsustainable and unnatural.

9
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
Balance can be achieved by having symmetry in the design (for instance, having a webpage with centralised
text and images).We achieve asymmetrical balance when we arrange differently sized elements in a way that
results in unity.
Contrast
We use contrast to make an element stand out by manipulating differences in colour, value, size and other
factors. We often use the colour red to make certain elements stand out. In iOS, red often appears in the
―Delete‖ action to signify that an (often) irreversible action is about to occur.
On the other hand, green is often something we use (at least in Western design) in positive actions such as
―Go‖ and ―Accept‖ — thus highlighting that we cannot ignore the cultural meaning of colours when
designing for contrast.

Red, a colour with high contrast, is used widely in iOS for the “Delete” function.

10
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
Scale
Scale describes the relative sizes of the elements in a design. By using scale to make an element larger than
others appearing with it, you can emphasise that element. Not only can you make an element stand out this
way—you can also use scale to create a sense of depth .Exaggerated scales of images also add a certain level
of interest and drama to them.

Scale can be used to create a hierarchy for and add emphasis to certain elements on a design.

Dominance
Dominance creates focus on a single element. We can use colour, shape, contrast, scale, and/or positioning to
achieve this. For instance, most websites have a main ―hero‖ image, which uses dominance to appeal to
users, drawing them to it naturally.

Dominance can be established by using positioning, shape and colour, among many other factors.

When working in visual design, we should ensure that we use dominance while still maintaining the unity
and balance of websites — if not, the design would potentially produce a disorienting experience for users.

Examples of Visual Design Elements and Principles

Google’s homepage
Google‘s homepage is one of the most visited webpages in the world. The raw simplicity of the page is
partly why it is so well designed, but here are other factors that make this page work superbly:

11
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

Dominance: The large Google logo and search box gives it dominance, making it the core (and to most,
sole) focus of the entire page.

Contrast (and colour): Google‘s logo uses bright (mostly primary) colours, and these mix well, forming a
visually pleasing logo. The logo also has sufficient contrast against a white background, making it stand out
on the page.

Shape: The search box uses a rectangular shape to delineate the search field, making it very usable.

Negative space: Google‘s homepage is predominantly made out of negative space, which makes the search
box the centre of attention. The negative space also works well for the page, as it acts like a blank sheet of
paper before users type in their search terms.

Balance: The page is almost vertically symmetrical, resulting in a sense of balance that is very pleasing and
calm to look at.

Quartz’s homepage
Quartz is a digital-first and mobile-first news agency with a global audience, launched in 2012 by Atlantic
Media, which also publishes The Atlantic. It has a bold homepage that puts the featured news stories front
and centre. Here‘s how the principles of design and design elements come together:

12
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

Dominance: The main news story immediately catches your eyes because its large, bold font makes it
dominant on the homepage.

Hierarchy: The homepage uses a clear hierarchy to establish the relative importance of various elements.
The main story, with the largest text and bolded weight, has the highest hierarchy. The next four stories,
positioned below the main story, have smaller fonts to show their subordinate hierarchy under the main
story.

Scale, value and colour: Quartz‘s homepage features a large (full page height) ―Q‖, which is a mask of the
hero image for the main story. The large ―Q‖ quickly establishes the identity of the website (since ―Q‖ stands
for ―Quartz‖) with the use of scale. However, the relative light value and greyscale colour of the ―Q‖ makes
it fade into the background, thus bringing the overall focus to the headline of the main story instead.

Negative space: Most of the homepage is negative space, which allows the content to shine through. When
the mouse is brought over the main story headline, the ―Q‖ mask disappears, filling the negative space with
the featured image. This is an example of how a unique play of negative space can stimulate interest in a
website‘s design.

Unity: Quartz uses a grid system in its website to create a sense of unity. For instance, the four stories have
equal width and are uniformly spaced, creating a sense of orderliness and structure.

13
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
Careful Visual Design + Good Usability = Successful Design

A visual designer, you should strive to create content that is consistent and predictably organized, but at the
same time impressively distinct. A visual designer wants to meet users‘ expectations so they win and keep
their trust, and impress them with a unique brand presence.
Brand style guides typically define standards about color use, typography, etc.
As part of the design process you shouldn‘t forget accessibility when you judge how best to approach visual
design regarding color, contrast, etc.

UI PRINCIPLES
User interface (UI)
―UI‖ is short for ―User Interface.‖ UI focuses on the screens, icons, buttons, visual elements and interfaces in
a user experience.
User interface (UI) Design
User interface (UI) design is the process designers use to build interfaces in software or computerized
devices, focusing on looks or style. Designers aim to create interfaces which users find easy to use and
pleasurable. UI design refers to graphical user interfaces and other forms—e.g., voice-controlled interfaces.
Designing User Interfaces for Users
User interfaces are the access points where users interact with designs. They come in three formats:

Graphical user interfaces (GUIs)—Users interact with visual representations on digital control panels. A
computer‘s desktop is a GUI.

Voice-controlled interfaces (VUIs)—Users interact with these through their voices. Most smart assistants—
e.g., Siri on iPhone and Alexa on Amazon devices—are VUIs.

Gesture-based interfaces—Users engage with 3D design spaces through bodily motions: e.g., in virtual
reality (VR) games.

Considerations To design best UIs

Users judge designs quickly and care about usability and likeability.

Users don‘t care about the design, but about getting their tasks done easily and with minimum effort.

The design should therefore be ―invisible‖: Users shouldn‘t focus on design but on completing tasks: e.g.,
ordering pizza on Domino‘s Zero Click app.

So, understand the users‘ contexts and task flows to fine-tune the best, most intuitive UIs that deliver
seamless experiences.

UIs should also be enjoyable (or at least satisfying and frustration-free).

When your design predicts users‘ needs, users can enjoy more personalized and immersive experiences.
Delight them, and they‘ll keep returning.

Where appropriate, elements of gamification can make your design more fun.
14
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

UIs should communicate brand values and reinforce users’ trust.

Good design is emotional design. Users associate good feelings with brands that speak to them at all levels
and keep the magic of pleasurable, seamless experiences alive.

Airbnb’s simple, inviting layout lets users satisfy their travel needs quickly, easily and enjoyably.

HOW TO MAKE GREAT UI’s

BASIC PRINCIPLES OF UI DESIGN:

To deliver impressive GUIs, remember—users are humans, with needs such as comfort and a limit on their
mental capacities.

1.Make buttons and other common elements perform predictably (including responses such as pinch-to-
zoom) so users can unconsciously use them everywhere. Form should follow function.

2.Maintain high discoverability. Clearly label icons and include well-indicated affordances: e.g., shadows for
buttons.

3.Keep interfaces simple (with only elements that help serve users‘ purposes) and create an ―invisible‖ feel.

4.Respect the user‘s eye and attention regarding layout. Focus on hierarchy and readability:

a.Use proper alignment. Typically choose edge (over center) alignment.

15
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

b.Draw attention to key features using:

 Color, brightness and contrast. Avoid including colors or buttons excessively.

 Text via font sizes, bold type/weighting, italics, capitals and distance between letters. Users should
pick up meanings just by scanning.

5.Minimize the number of actions for performing tasks but focus on one chief function per page. Guide users
by indicating preferred actions. Ease complex tasks by using progressive disclosure.

6.Put controls near objects that users want to control. For example, a button to submit a form should be near
the form.

7.Keep users informed regarding system responses/actions with feedback.

8.Use appropriate UI design patterns to help guide users and reduce burdens (e.g., pre-fill forms). Beware of
using dark patterns, which include hard-to-see prefilled opt-in/opt-out checkboxes and sneaking items into
users‘ carts.

9.Maintain brand consistency.

10.Always provide next steps which users can deduce naturally, whatever their context.

NIELSEN AND MOLICH'S 10 USER INTERFACE DESIGN GUIDELINES

Visibility of system status: Users should always be informed of system operations with easy to understand
and highly visible status displayed on the screen within a reasonable amount of time.

Match between system and the real world: Designers should endeavor to mirror the language and
concepts users would find in the real world based on who their target users are. Presenting information in
logical order and piggybacking on user‘s expectations derived from their real-world experiences will reduce
cognitive strain and make systems easier to use.

User control and freedom: Offer users a digital space where backward steps are possible, including
undoing and redoing previous actions.

Consistency and standards: Interface designers should ensure that both the graphic elements and
terminology are maintained across similar platforms. For example, an icon that represents one category or
concept should not represent a different concept when used on a different screen.
Error prevention: Whenever possible, design systems so that potential errors are kept to a minimum. Users
do not like being called upon to detect and remedy problems, which may on occasion be beyond their level
of expertise. Eliminating or flagging actions that may result in errors are two possible means of achieving
error prevention.

16
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
Recognition rather than recall: Minimize cognitive load by maintaining task-relevant information within
the display while users explore the interface. Human attention is limited and we are only capable of
maintaining around five items in our short-term memory at one time. Due to the limitations of short-term
memory, designers should ensure users can simply employ recognition instead of recalling information
across parts of the dialogue.

Flexibility and efficiency of use: With increased use comes the demand for less interactions that allow
faster navigation. This can be achieved by using abbreviations, function keys, hidden commands and macro
facilities. Users should be able to customize or tailor the interface to suit their needs so that frequent actions
can be achieved through more convenient means.

Aesthetic and minimalist design: Keep clutter to a minimum. All unnecessary information competes for the
user's limited attentional resources, which could inhibit user‘s memory retrieval of relevant information.
Therefore, the display must be reduced to only the necessary components for the current tasks, while
providing clearly visible and unambiguous means of navigating to other content.

Help users recognize, diagnose and recover from errors: Designers should assume users are unable to
understand technical terminology, therefore, error messages should almost always be expressed in plain
language to ensure nothing gets lost in translation.

Help and documentation: Ideally, we want users to navigate the system without having to resort to
documentation. However, depending on the type of solution, documentation may be necessary. When users
require help, ensure it is easily located, specific to the task at hand and worded in a way that will guide them
through the necessary steps towards a solution to the issue they are facing.

EXAMPLE TO LEARN HOW ADOBE INTEGRATES NIELSEN AND MOLICH'S TEN USER
INTERFACE DESIGN GUIDELINES
Adobe Systems Incorporated, the large North American computer software company, is a great example of
how designs reflecting Nielsen and Molich‘s ten user interface guidelines can lead to success for a company.
Adobe Photoshop, which is a raster graphics editor exhibits the characteristics of a well designed user
interface that reflects these guidelines.

1. Visibility of System Status

Photoshop does a great job of letting the user know what‘s happening with the program by visually showing
the user what their actions have led to whenever possible. For example, when users move layers around in
the Layers palette, they can visually see the layer being represented as physically dragged within the space.

17
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

The cursor graphic goes from representing an open-hand to a gripped hand when the user drags a layer
around within the Layers palette. This makes it easier to instantly understand the system status. Additionally,
Adobe‘s choice of using a ‗hand‘ is a great example of the second guideline where the system matches the
real world.

2. System Match To The Real World

An example of Photoshop mimicking the real world in terms and representations that their target users would
understand, is where they design the information structure and terminology to mirror the same wording we
would use in the world of photography or print media. Familiar concepts and terms like RGB,
Hue/Saturation/Brightness and CMYK are used to represent color, while various tools like the dodge tool
and the burn tool mimics a traditional darkroom technique for photographs.

18
CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

Photoshop‘s Dodge Tool and Burn Tool mimics a traditional darkroom technique for photographs

19
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

Photoshop utilizes the term, ―Exposure‖, as commonly used in the world of photography.

3. User Control and Freedom

Photoshop is very good at providing users with control every step of the way. As the user makes changes to
an image or adds various artistic effects, they are able to quickly and easily take a step backwards if they
make an error, for instance.

20
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

The users are in control as they can take a Step Backward or Step Forward under the Edit menu, or
alternatively they can use Photoshop‘s keyboard shortcuts like Alt+Ctrl+Z, for example.

4. Consistency and Standards

Photoshop maintains a standard layout and look and feel when it comes to the menu bar. They also utilize
commonly known terminology such as ―New…‖, ―Open…‖, ―Save As…‖, etc.

21
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

The File menu in Photoshop displays a variety of highly familiar options.

5. Error Prevention
To prevent users from making errors, Photoshop provides a brief description or label of the tools when a user
hovers over it to help make sure users are using the proper tool for the task at hand.

22
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

The user hovers over the eraser icon and Photoshop displays the ―Eraser Tool‖ label.

6. Recognition rather than Recall

Whether it be making a selection from the artistic filters menu, or opening a new image file, Photoshop
provides a sample view for users to make the right choice. This allows for the user to visually recognize
what they‘re looking for instead of having to recall the name or typing it in to search for it. Perhaps you have
encountered other photo editing programs which ask you to recall and type the name of the file you want to
work on. This can indeed be really difficult to recall as it is often something to the effect of:
29412_09342.JPG.

23
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

The user is able to visually recognize the sunset image by its thumbnail and select it.

7. Flexibility and Efficiency of Use

One of the many reasons for frequent users to love Photoshop is for its flexibility and efficiency. Users are
able to utilize its flexibility by organizing and adding to their Workspace, as well as making things more
efficient by saving it for future use.

24
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

Photoshop gives frequent users the ability to save their preferred workspace-setup.
8. Aesthetic And Minimalist Design
The toolbar in Photoshop only displays the icons and is neatly tucked to the side to help keep clutter to a
minimum, and maintain a minimalist aesthetic.

The Photoshop toolbar is minimalist and avoids clutter by representing the tools with icons only.

25
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
9. Help Users Recognize, Diagnose and Recover from Errors
Whenever there is an error, Photoshop provides dialogue that lets the user know what went wrong and how
to fix it.

In this error message for the user‘s misuse of the clone stamp, Photoshop explains what went wrong, the
reason why and how the user should proceed from there.

10. Help and documentation

Help and documentation can be accessed easily via the main menu bar. From there, you can find a wide
variety of help topics and tutorials on how to make full use of the program.

26
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

The window displays information on how to create rollovers in the context of web graphics. The user is also
able to see a list of topics on the side menu.

UI ELEMENTS AND PATTERNS

UI ELEMENTS:
When designing your interface, try to be consistent and predictable in your choice of interface elements.
Whether they are aware of it or not, users have become familiar with elements acting in a certain way, so
choosing to adopt those elements when appropriate will help with task completion, efficiency, and
satisfaction.

Interface elements include but are not limited to:

 Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text fields, date
field
 Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
 Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
 Containers: accordion

27
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
Input Controls

Element Description Examples

Checkboxes Checkboxes allow the user to

select one or more options from
a set. It is usually best to
present checkboxes in a vertical
list. More than one column is
acceptable as well if the list is
long enough that it might
require scrolling or if
comparison of terms might be
necessary.

Radio Radio buttons are used to allow

buttons users to select one item at a
time.

Dropdown Dropdown lists allow users to

lists select one item at a time,
similarly to radio buttons, but
are more compact allowing you
to save space. Consider adding
text to the field, such as ‗Select
one‘ to help the user recognize
the necessary action.

28
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

Element Description Examples

List boxes List boxes, like checkboxes,

allow users to select a multiple
items at a time,but are more
compact and can support a
longer list of options if needed.

Buttons A button indicates an action

upon touch and is typically
labeled using text, an icon, or
both.

Dropdown The dropdown button consists

Button of a button that when clicked
displays a drop-down list of
mutually exclusive items.

Toggles A toggle button allows the user

to change a setting between two
states. They are most effective
when the on/off states are
visually distinct.

Text fields Text fields allow users to enter

text. It can allow either a single
line or multiple lines of text.

29
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

Element Description Examples

Date and A date picker allows users to

time pickers select a date and/or time. By
using the picker, the
information is consistently
formatted and input into the
system.

Navigational Components

Element Description Examples

Search Field A search box allows

users to enter a
keyword or phrase
(query) and submit
it to search the
index with the
intention of getting
back the most
relevant results.
Typically search
fields are single-line
text boxes and are
often accompanied
by a search button.

30
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

Element Description Examples

Breadcrumb Breadcrumbs allow

users to identify
their current
location within the
system by providing
a clickable trail of
proceeding pages to
navigate by.

Pagination Pagination divides

content up between
pages, and allows
users to skip
between pages or go
in order through the
content.

Tags Tags allow users to

find content in the
same
category. Some
tagging systems
also allow users to
apply their own tags
to content by
entering them into
the system.

31
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

Element Description Examples

Sliders A slider, also

known as a track
bar, allows users to
set or adjust a
value. When the
user changes the
value, it does not
change the format
of the interface or
other info on the
screen.

Icons An icon is a
simplified image
serving as an
intuitive symbol
that is used to help
users to navigate the
system. Typically,
icons are
hyperlinked.

Image Image carousels

Carousel allow users to
browse through a
set of items and
make a selection of
one if they so
choose. Typically,
the images are

32
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

Element Description Examples

hyperlinked.

Information Components

Element Description Examples

Notifications A notification is an
update message that
announces
something new for
the user to see.
Notifications are
typically used to
indicate items such
as, the successful
completion of a
task, or an error or
warning message.

Progress A progress bar

Bars indicates where a
user is as they
advance through a
series of steps in a
process. Typically,
progress bars are
not clickable.

33
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

Element Description Examples

Tool Tips A tooltip allows a

user to see hints
when they hover
over an item
indicating the name
or purpose of the
item.

Message A message box is a

Boxes small window that
provides
information to users
and requires them
to take an action
before they can
move forward.

Modal A modal window

Window requires users to
(pop-up) interact with it in
some way before
they can return to
the system.

34
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
Containers

Element Description Examples

Accordion An accordion is a vertically stacked list of items that

utilizes show/ hide functionality. When a label is
clicked, it expands the section showing the content
within. There can have one or more items showing at a
time and may have default states that reveal one or
more sections without the user clicking

User Interface (UI) Design Patterns

User interface (UI) design patterns are reusable/recurring components which designers use to solve common
problems in user interface design. For example, the breadcrumbs design pattern lets users retrace their steps.
Designers can apply them to a broad range of cases, but must adapt each to the specific context of use.

Why Design Patterns are Such Powerful Design Aids

Websites and apps have a conventional look and feel because of design patterns such as global navigation
and tab bars. In UI design, you can use design patterns as a quick way to build interfaces that solve a
problem—for instance, a date picker design pattern to let users quickly pick a date in a form. So, UI design
patterns serve as design blueprints that allow designers to choose the best and commonly used interfaces for
the specific context the user faces.
Each pattern typically contains:

 A user‘s usability-related problem.

 The context/situation where that problem happens.
 The principle involved—e.g., error management.
 The proven solution for the designer to implement to address the core of the problem.
 Why—the reason for the pattern‘s existence and how it can affect usability.
 Examples—which show the pattern‘s successful real-life application (e.g., screenshots and
descriptions).
 Implementation—some patterns include detailed instructions.

Common UI Design Patterns

Some of the most common UI design patterns are:

Breadcrumbs – Use linked labels to provide secondary navigation that shows the path from the front to the
35
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
current site page in the hierarchy.
Lazy Registration – Forms can put users off registration. So, use this sign-up pattern to let users sample
what your site/app offers for free or familiarize themselves with it. Then, you show them a sign-up form. For
example, Amazon allows unrestricted navigation and cart-loading before it prompts users to register for an
account. Note:When content is accessible only to registered users or users must keep entering details, offer
them simplified/low-effort sign-up forms. Minimize/Avoid optional information fields. Use the Required
Field Markers pattern to guide users to enter needed data.
Forgiving Format – Let users enter data in various formats (e.g., city/town/village or zip code).
Clear Primary Actions – Make buttons stand out with color so users know what to do (e.g., ―Submit‖). You
may have to decide which actions take priority.
Progressive Disclosure – Show users only features relevant for the task at hand, one per screen. If you break
input demands into sections, you‘ll reduce cognitive load (e.g., ―Show More‖).
Hover Controls – Hide nonessential information on detailed pages to let users find relevant information
more easily.
Steps Left – Designers typically combine this with a wizard pattern. It shows how many steps a user has to
take to complete a task. You can use gamification (an incentivizing design pattern) here to enhance
engagement.
Subscription Plans – Offer users an options menu (including ―Sign-up‖ buttons) for joining at certain rates.
Leaderboard – You can boost engagement if you use this social media pattern.
Dark Patterns – Some designers use these to lead or trick users into performing certain actions, typically in
e-commerce so they spend more or surrender personal information. Dark patterns range in harmfulness.
Some designers leave an unchecked opt-out box as a default to secure customer information. Others slip
items into shopping carts. To use dark patterns responsibly, you must be ethical and have empathy with your
users. Dark patterns are risky because user mistrust and feedback can destroy a brand‘s reputation overnight.

This page uses the design patterns progress tracker, clear primary actions and progressive disclosure.
36
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
Taking Care with Design Patterns
Merits:
UI design patterns let you save time and money since you can copy and adapt them into your design—
instead of reinventing the wheel for every new interface. They also facilitate faster prototyping and user
familiarity.
Challenges
We should use Design patterns carefully. The wrong choices can prove costly – for example, if you:
Approach problems incorrectly because you‘re over-relying on patterns.
Don‘t fine-tune patterns to specific contexts.
Don‘t customize a distinct brand image (e.g., your website ultimately resembles Facebook).
Overlook management requirements. If you create your own patterns, you must clearly define how to use
them and with what types of problems, version-control them, and store them for team access.

INTERACTION BEHAVIORS AND PRINCIPLES:

Interaction Design
Interaction Design (IxD) is the design of interactive products and services in which a designer‘s focus goes
beyond the item in development to include the way users will interact with it. Thus, close scrutiny of users‘
needs, limitations and contexts, etc. empowers designers to customize output to suit precise demands
Interaction Design Dimensions
Designers‘ work in IxD involves five dimensions: words (1D), visual representations (2D), physical
objects/space (3D), time (4D), and behavior (5D).
• Words (1D) encompass text, such as button labels, which help give users the right amount of
information.
• Visual representations (2D) are graphical elements such as images, typography and icons that aid in
user interaction.
• Physical objects/space (3D) refers to the medium through which users interact with the product or
service—for instance, a laptop via a mouse, or a mobile phone via fingers.
• Time (4D) relates to media that changes with time, such as animations, videos and sounds.
• Behavior (5D) is concerned with how the previous four dimensions define the interactions a product
affords—for instance, how users can perform actions on a website, or how users can operate a car. Behavior
also refers to how the product reacts to the users‘ inputs and provides feedback.
Important questions interaction designers ask
• What can a user do with their mouse, finger, or stylus to directly interact with the interface? This
helps us define the possible user interactions with the product.
• What about the appearance (colour, shape, size, etc.) gives the user a clue about how it may function?
This helps us give users clues about what behaviours are possible.
• Do error messages provide a way for the user to correct the problem or explain why the error
occurred? This lets us anticipate and mitigate errors.
• What feedback does a user get once an action is performed? This allows us to ensure that the system
provides feedback in a reasonable time after user actions.
• Are the interface elements a reasonable size to interact with? Questions like this helps us think
strategically about each element used in the product.
• Are familiar or standard formats used? Standard elements and formats are used to simplify and
enhance the learnability of a product.

37
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

What do interaction designers do?

Design strategy
This is concerned with what the goal(s) of a user are, and in turn what interactions are necessary to achieve
these goals. Depending on the company, interaction designers might have to conduct user research to find
out what the goals of the users are before creating a strategy that translates that into interactions.
Wireframes and prototypes
This again depends on the job description of the company, but most interaction designers are tasked to create
wireframes that lay out the interactions in the product. Sometimes, interaction designers might also create
interactive prototypes and/or high-fidelity prototypes that look exactly like the actual app or website.
Interaction Design is a Part of User Experience Design

The term ―interaction design‖ is sometimes used interchangeably with ―user experience design‖. That‘s
understandable, considering interaction design is an essential part of UX design. Indeed, UX design entails
shaping the experience of using a product, and a big part of that experience involves the needed interaction
between the user and the product.

Five major characteristics of interaction design

1.1.1 Design involves changing situations by shaping and deploying artifacts
For changing a situation by devising and implementing, say, a new political initiative could certainly be
viewed as a design act but not an act of interaction design.
1.1.2 Design is about exploring possible futures
Exploring possible futures in interaction design often involves inviting the future users in various forms of
participation.
1.1.3 Design entails framing the ―problem‖ in parallel with creating possible ―solutions‖
Exploring possible futures implies not only different ―design solutions‖ but also different ―problems.‖
1.1.4 Design involves thinking through sketching and other tangible representations
When sketching snapshots or aspects of possible futures (such as a not-yet-existing product), the designer is
not merely copying images from her inner eye.
1.1.5 Design addresses instrumental, technical, aesthetical and ethical aspects throughout
Technical decisions influence the aesthetic qualities of the resulting interaction, instrumental choices on
38
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
features to offer have ethical repercussions, and so on.
What is Interaction Design Process?

The interaction design (IxD) process is what designers use to create solutions centered on users‘ needs, aims
and behavior when interacting with products. The IxD process involves 5 stages: discovering what users
need/want, analyzing that, designing a potential solution, prototyping it and implementing and deploying it.

1. Find the users’ needs/wants—It‘s easy to assume you know what users want/need and their relevant
contexts. Discover their real requirements:
a. Observe people.
b. Interview people.
c. Examine existing solutions—while remembering it‘s hard to envisage future needs, technologies, etc.
2. Do analysis to sort and order your findings so they make sense. This may be through a:
. Narrative/story of how someone uses a system.
a. Task analysis, breaking down a user‘s steps/sub-steps.
3. Design a potential solution according to design guidelines and fundamental design principles (e.g.,
giving appropriate feedback for users‘ actions). Use the best techniques to match how users will interact with
it in terms of, for example, navigation.
4. Start prototyping—Give users an idea of what the product will look like and let them test it, and/or give it
to experts to evaluate its effectiveness using heuristics.
5. Implement and deploy what you have built.
The IxD process is iterative—nobody designs anything right the first time, especially regarding more
innovative solutions.

Interaction Design Principles

Aesthetics
Principle: Aesthetic design should be left to those schooled and skilled in its application: Graphic/visual designers
Principle: Fashion should never trump usability
Principle: User test the visual design as thoroughly as the behavioral design
Anticipation
Principle: Bring to the user all the information and tools needed for each step of the process
Autonomy
Principle: The computer, interface, and task environment all ―belong‖ to the user, but user-autonomy doesn‘t mean we
abandon rules
Principle: Enable users to make their own decisions, even ones aesthetically poor or behaviorally less efficient
Principle: Exercise responsible control
Principle: Use status mechanisms to keep users aware and informed
Principle: Keep status information up to date and within easy view
Principle: Ensure status information is accurate
Color
Color blindness
Principle: Any time you use color to convey information in the interface, you should also use clear, secondary cues to
39
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
convey the information to those who cannot see the colors presented.
Principle: Test your site to see what color-blind individuals see
Color as a vital interface element
Principle: Do not avoid color in the interface just because not every user can see every color.
Principle: Do not strip away or overwhelm color cues in the interface because of a passing graphic-design fad.
Consistency
1) Levels of Consistency
Principle: The importance of maintaining strict consistency varies by level.
1. Top level consistency

• Platform consistency: Be generally consistent with de jureAs dictated by guidelines and standards & de factoThe
unwritten rules to which the community adheres. standards

• In-house consistency: Maintain a general look & feel across your products/services

Communicates brand and makes adoption of your other products and services easier and faster

2. Consistency across a suite of products, e. g., Microsoft Office

General look & feel communicates family

3. The overall look & feel of a single app, application or service–splash screens, design elements, etc.
4. Small visible structures, such as icons, symbols, buttons, scroll bars, etc.
5. Invisible structures
6. Interpretation of user behavior
2) Induced Inconsistency
Principle: It is just important to be visually inconsistent when things act differently as it is to be visually consistent
when things act the same
3) Continuity
Principle: Over time, strive for continuity, not consistency
4) Consistency with User Expectation
Principle: ―The most important consistency is consistency with user expectations‖
Defaults
Principle: Defaults within fields should be easy to ―blow away
Principle: Defaults should be ―intelligent‖ and responsive
Principle: Replace the word ―default‖ with a more meaningful and responsive term
Principle: Both your vocabulary and visual design must communicate the scope of a reversion
Discoverability
Principle: Any attempt to hide complexity will serve to increase it
Principle: If you choose to hide complexity, do so in the showroom only
Principle: If the user cannot find it, it does not exist
Use Active Discovery to guide people to more advanced features

Principle: Controls and other objects necessary for the successful use of software should be visibly accessible at all
times
Principle: There is no ―elegance‖ exception to discoverability
Principle: With the exception of small mobile devices, controls do not belong in the middle of the content area
Principle: Communicate your gestural vocabulary with visual diagrams
Principle: Strive for Balance
Principle: User-test for discoverability

40
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
Efficiency of the User
Principle: Look at the user‘s productivity, not the computer‘s
Principle: Keep the user occupied
Principle: To maximize the efficiency of a business or other organization you must maximize everyone‘s efficiency,
not just the efficiency of the IT department or a similar group
Principle: The great efficiency breakthroughs in software are to be found in the fundamental architecture of the system,
not in the surface design of the interface
Principle: Error messages should actually help
Explorable Interfaces
Principle: Give users well-marked roads and landmarks, then let them shift into four-wheel drive
Principle: Sometimes you do have to provide deep ruts
Principle: Offer users stable perceptual cues for a sense of ―home‖
Principle: Make Actions reversible
Principle: Always allow ―Undo‖
Principle: Always allow a way out
Principle: Make it easy and attractive to stay in

Fitts‘s Law
Principle: The time to acquire a target is a function of the distance to and size of the target
Multiple Fitts: The time to acquire multiple targets is the sum of the time to acquire each
Principle: Fitts‘s Law is in effect regardless of the kind of pointing device or the nature of the target
Principle: Fitts‘s Law requires a stop watch test
Human Interface Objects
Principle: Human-interface objects can be seen, heard, felt, or otherwise perceived
Principle: Human-interface objects have a standard way of being manipulated
Principle: Human-interface objects have standard resulting behaviors
Principle: Human-interface objects should be understandable, self-consistent, and stable
Principle: Use a new object when you want a user to interact with it in a different way or when it will result in different
behavior
Latency Reduction
Wherever possible, use multi-threading to push latency into the background
Principle: Reduce the user‘s experience of latency
Acknowledge all button clicks by visual or aural feedback within 50 milliseconds
Trap multiple clicks of the same button or object.
Principle: Keep users informed when they face delay
Principle: Make it faster to begin with
Learnability
Principle: Limit the Trade-Offs
Principle: Avoid only testing for learnability
Metaphors, Use of
Principle: Choose metaphors that will enable users to instantly grasp the finest details of the conceptual model
Principle: Bring metaphors ―alive‖ by appealing to people‘s perceptions–sight, sound, touch, and
proprioception/kinesthesia–as well as triggering their memories
Principle: Expand beyond literal interpretation of real-world counterparts
Principle: If a metaphor is holding you back, abandon it
Protect Users‘ Work
Principle: Ensure that users never lose their work
Readability
Principle: Text that must be read should have high contrast
Principle: Use font sizes that are large enough to be readable on standard displays

41
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
Principle: Favor particularly large characters for the actual data you intend to display, as opposed to labels and
instructions.
Principle: Menu and button labels should have the key word(s) first, forming unique labels
Principle: Test all designs on your oldest expected user population
Principle: There‘s often an inverse relationship between the ―prettiness‖ of a font and its readability.
Simplicity
Principle: Balance ease of installation vs. ease of use
Principle: Avoid the ―Illusion of Simplicity‖
Principle: Use Progressive Revelation to flatten the learning curve
Principle: Do not simplify by eliminating necessary capabilities
State
Principle: Because many of our browser-based products exist in a stateless environment, we have the responsibility to
track state as needed
Principle: State information should be stored in encrypted form on the server when they log off
Principle: Make clear what you will store & protect the user‘s information
Visible Navigation
Principle: Make navigation visible
Principle: Limit screen counts by using overlays

BRANDING:

Need for Branding

 Companies and businesses attach names, logos, slogans, and specific design elements to their
products to distinguish them from their competitors'
 Branding: Making Positive Associations
Branding attempts to ensure the package they are offering or purporting to offer, bears positive
qualities, rather than negative ones.
 The brand of a company or specific product is essentially the idea or image they are trying to project,
so consumers connect or identify with the whole group or one product in particular. Branding is
meant to help make products instantly recognisable to consumers, and to ensure they help to maintain
a positive image or reputation
 Branding is of particular importance to e-Commerce, as this aspect helps the company extend beyond
the original products and/or services they provide, and to add value to their business not only from
the products/services themselves.
 The branding loses its significance and power when there are different styles, logos, fonts, etc. across
the various pages of a site, pieces of promotional material, and any other place where consumers see
your product.

Consistency in Branding
Coordinating all of the components of a brand and all instances where the product appears is a difficult job,
but settling on specific styles, and focussing on core aspects of your business or company can also help focus
the branding. If you achieve this consistency, and the branding is associated with positive attributes, such as
honesty, quality, longevity, strength, and dependability, this builds a good reputation.

42
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

Branding and Brand:

Branding has the capacity to elevate a business beyond the products and services it is offering; this is why so
much money is spent on advertising, endorsements, and the design of the non-usable parts of products and
services.
A brand is the representation of the product: something that identifies it in a recognizable way. This could be
a name, a logo, colors, writing style, or other media forms such as sound marks.
A brand is the product‘s reputation, which creates certain customer expectations about the product.
While ―branding‖ products with an identifying mark (definition #1) has been around since people first began
trading and selling goods, the use of brands to differentiate products — to truly attempt to influence
consumers‘ perceptions and choices within a market
Features of brand:
Brands adapted to the new age and followed consumers online, building digital experiences and blurring the
line between ―representation‖ and ―reputation.‖
People began to gain more access to information and to the brands themselves. The range of available
choices grew.
The strengthening of consumer voices through social-media platforms ensured that end users of products had
just as much control in shaping brands as companies did.

Defining Brand in the Age of Digital Experience

Definition: Brand is a subjective perception of value based on the sum of a person‘s experiences with a
product or company that ultimately influences that person‘s sentiment and decisions in the marketplace.
Brand is a tool for influencing choice. Brand is not made of visuals or words alone — it‘s not a logo or a
slogan. Nor is it a figurehead
Components of Brand: Visuals, Tone, and Actions
Brand can be expressed) through three areas: visuals, tone, and behavior.
Visuals:
Visuals comprise the graphic elements used to communicate the brand, including the logo, typeface, images,
and other elements of a common style guide.
Tone:
Tone is the style of communication the brand uses, from the text on a website to the messaging developed
and used in targeted advertisements and to the manner in which staff speak to customers.
Behavior:
Behavior represents how the company acts in certain situations. Does the company reflect the morals and
values of their customers? Do they actively express those values through their actions?

43
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

Example:
Southwest’s new exterior design put the heart logo on the belly of the plane, to visually reinforce “love
of People” as a core brand message.
Components of Brand in the Real World: Southwest Airlines
Consider Southwest Airlines. This airline is recognized for its consistent and differentiated brand, which
claims to put customers at the center of its business model. Southwest showcases this core brand message
and its ―love of People‖ through the brand visuals, tone and behavior.
For example, last year, Southwest launched a new look for the exterior of its planes, calling it a ―bold new
look that puts our heart front and center for everyone to see.‖ It extended its brand visuals to even the plane
itself, putting the heart logo that represents its love for its customers on the belly of the plane.
The tone of the campaign is authentic and suggests honesty in Southwest‘s treatment of its customers and
communication of fees. The campaign tone is straightforward and a little playful, matching its overall brand
message.
Finally, Southwest is known for coaching employees to treat customers in a way that reflects its core brand
message. ―People are our most powerful fuel,‖ says a slogan. Brand behavior matches this promise.
The Relationship Between Brand and Digital User Experience
In digital systems, customers interact with the representation of the brand in the form of websites and other
interactive services, making behavior a crucial attribute of brand. The granularity of behavior as a brand
attribute can and does vary and can be expressed holistically at the level of entire processes and interactions
on a site, but also at a finer level, in the specific qualities of those interactions (e.g., transitions, animations).
UX Is a Brand Differentiator
Brands that choose to address an unmet user need at the core of their business are regularly disrupting
industries by focusing on UX and, specifically, on unmet user needs as brand differentiators—and
succeeding in oversaturated markets by doing so.
Branding can be critically important when consumers decide whether to interact with organizations — make
a purchase, use a service, apply for employment, or even sign up for a newsletter. While the perception of a
brand cannot be strictly controlled, it can certainly be influenced.

The Impact of Interaction Design on Brand Perception

Almost every aspect of a digital interface can influence the portrayal of an organization‘s brand identity or
‗personality,‘ including:
Visual design: how the UI looks
Content design: how the UI sounds
Interaction design: how the UI feels
Finding the Links Between Interaction and Brand
The interactivity attributes
44
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
Responsiveness: How quickly an element responds to a user action
Direct or indirect manipulation: Whether a user can manipulate an element directly by interacting with the
element itself (for example, by clicking on it) or indirectly (for example, by using a tool like slider)
Precision: How precise a user can be when interacting with the element (for example, being able to select
specific parts of an element, or just the whole)
Pliability: How easy or difficult it is for a user to effect a change on an element (for example, clicking twice
to expand an element, or simply hovering over the element to expand it)
Continuous or discrete behavior: How continuous or discrete (with stops or separate steps) the transitions
between states are
Clear labels or no labels: How well the system communicates available actions and the consequences of
those actions (Tolstrup and Heyer call this attribute ―Feedback‖)
Expected or unexpected behavior: Whether an element‘s behavior conforms with a user‘s expectations
Consistent or inconsistent behavior: Whether an element‘s behavior conforms with established patterns
(either internal or external to the system)

Relationships between interactivity attributes and the brand and emotional attributes.

Brand attributes:

 Sincerity
 Excitement
 Competence
 Sophistication
 Ruggedness

Emotional attributes:

 Surprise
 Anger
 Anxiety
 Disgust
 Sadness
 Joy

Applying These Findings to Your Designs

 Take an inventory of your interaction-design attributes
45
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
 Consider how these interaction-design attributes might support or detract from your stated brand
values.
 Pay special attention to inconsistent or unexpected interactive elements.
 Conduct a brand/emotion evaluation of your interaction

What is a Style Guide?

Definition:
Front-end style guides are a modular collection of all the elements in your product’s
user interface, together with code snippets for developers to copy and paste as needed to
implement those elements. They include common UI components like buttons, form-input
elements, navigation menus, modal overlays, and icons.

Features of Front-End Style Guide

 A front-end style guide is both a deliverable created by the UX team and a tool used
by the entire team for maintaining consistent, nimble product design in a modular
format.
 Front-end style guides are distinct from design pattern libraries, which are a long-
standing tool used by UX practitioners to define broad design ideas, rather than
specific implementation details.
 The most important feature that separates front-end style guides from other types of
style guides is that front-end style guides are rarely static, but are living collections of
UI- elements‘ descriptions and corresponding code snippets.
 Front-end style guides take the form of a web page or other interactive digital asset,
rather than a PDF.
 We can typically interact with all the components in a front-end style guide, and many
development teams choose to implement them so that any change made to components
in a style guide will automatically update the product‘s design as well.

46
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
Example:

Salesforce’s Lightning Design System shows a UI element, Button Group Base, along with an example of how to
implement it, guidelines for how it should function, and when an alternative variant (such as Button Group
Disabled) should be used. The example is a live element that is interactive and exhibits the same behaviors as in
the final product.

Benefits of style guides:

The purpose of a style guide is to collect all product-interface elements in a modular library.
It benefits the UX team in two ways:
(1) prototyping ideas and implementing new designs becomes more efficient, and
(2) A consistent visual design can be easily enforced throughout the product.

Front-End Style Guides Include Responsive Design Patterns

In responsive designs, the front-end style guide should not only define the interface
components, but also describe how their styling and usage will differ across different screen
sizes. Here are some pieces of information that are useful:
 Layout grids indicating how various components should be used in various screen-size
contexts
 Spacing around common elements when used on different screen sizes
 Guidelines for where in the interface specific components should be placed

47
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

Google’s Material Design style guide includes representations of how to use the responsive grid system, and where
various parts of the interface should be consistently placed.

8 Main Requirements for a Front-End Style Guide

When creating a style guide, make sure to include the following 8 key features:
1. Table of contents that splits components into easily-findable categories
2. Responsive layout or grid systems used to place common UI elements
3. Color palette of the product (in appropriate format, e.g. HEX for the Web, UIColor for
an iOS app)
4. Typeface styles (e.g. H1 Title, Body text, Photo caption text), which should include
typeface name and foundry, sizes, weights, leading/line height, tracking/kerning, and
the appropriate contexts of use for that text style

Then, for each of the specific UI elements in your product include the following information:
5. Description of the appropriate context of use: When does it make sense to use one
particular component versus a similar one?
6. Code snippets, often hidden in an accordion feature
7. Specs for implementation, including positioning and spacing information
8. Dos and don‘ts for that element.

48
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM
25 Common UI Components Included in Front-End Style Guides
 Buttons
 Button groups
 Breadcrumbs
 Cards
 Tables
 Dialogs
 Grid lists of content, media, or photos
 Vertical lists
 Navigational menus (and subnavigation)
 Date and time pickers
 Progress and loading indicators
 Checkboxes
 Radio buttons
 Drop-down menus
 Sliders
 On-off switches
 Numeric-input steppers/incrementers
 Form fields (include variations with maximum character-count indicators, and
indicators for when the field is required)
 Tabs
 Toolbars
 Tooltips
 Alert modals
 Icons
 Animations
 Tokens, also known as chips (e.g. email-address field)

Start with this list and pick from it only the components that are present in the product . If the
design have additional unique elements, include them in the style guide

49
 CCS370-UI AND UX DESIGN PIT-CSE-III Year –V
COMPUTATION SEM

Kayak’s iOS app features numeric-input steppers for the number of rooms and guests.
If you feature this input component in your product, it should be included in the style
guide.

50