USER

INTERFACE
DESIGN

Prof. Saptarshi Kolay

Architecture And Planning
IIT Roorkee
 INDEX
S. No Topic Page No.
Week 1
1 Introduction 01
2 User Interface Designer 09
3 Design methods-I 18
4 Design Methods -II 42
5 Human Factor in Interaction Design 59
Week 2
6 User Research- I 80
7 User Research - II 100
8 Low Fidelity Design - I 129
9 Low Fidelity Design- II 152
10 High Fidelity Design 169
Week 3
11 Visual Cognition 194
12 Contemporary Visual Language in Design - I 226
13 Contemporary Visual Language in Design - II 245
14 Usage of Typography in User Interface Design - I 270
15 Usage of Typography in User Interface Design - II 295
Week 4
16 Design Semiotics and Visual Perception 323
17 Visual Communication Design 350
18 User Testing - I 368
19 User Testing - II 386
20 Contemporary Interface Design Technology 403
 User Interface Design
Prof. Saptarshi Kolay
Department of Architecture & Planning Engineering
Indian Institute of Technology, Roorkee

Lecture - 01
Introduction

Welcome to the online NPTEL course User Interface Design. So this is the first lecture and in
this lecture we will just talk about what we are going to learn in the next lectures and what this
course is about and who can get benefited with the course. So, if we talk about user interface
design, first it is important to understand what is “user interface”. So here there are two
components, two words are there, one is “user” and the next is the “interface”.

So “user” we can all understand what is user. It is the viewer or whoever is using it, what they
are using or the people, who is the target audience, or whoever is viewing interface or viewing
some interface. So, the component “interface” is something difficult to understand. So, what is
the interface, between what? So, Interface is something in between of two different things. So,
one, this interface is the interface between the user and the computer.

So, it is the human-computer interface. The interface between computer and the human is the
user interface. And here the computer can be tablet, it can also be the computing device for
example laptop, mobile phone, and any other things. Or it can be the just the graphic user
interface of any product. For example, many of the smart products have the graphic user
interface.

For example, when we change the temperature of AC using the remote, so they also display
some information. So that is also the information display. So that is also the interface between
man and machine. So instead of just human-computer interface it can be man-machine interface.
So in between man and machine what is the interface going on.

And in many other cases for example if there is a digital display in front of refrigerator, in the
TV, how we operate the navigate between different channels of TV. So, all these interfaces are
coming within the graphic user interface, that is the GUI of this user interface design. So, all
these things will be part of the course which is user interface design, and they follow a same
process of design or similar process of design.

1
The basic background or the methodology is same. So, one aspect of this design which is user
interface design is the “user”. How user think and how they perceive particular things, which can
be through icons, which can be through words. So how these words, icons, what we see in front
of the digital display or the GUI or the graphic user interface, what are the meaning of this and
how people react to it. And the other part is how we design.

Based on the understanding of people’s perception, people’s interpretation how we design. So,
we also need to know the design elements, the principles of design, the contemporary trends of
design, what is the web platform, on which platform we are designing. What is the brand for
which we are designing and what is the final meaning we want to give, we want to communicate
with the user. So that also is a important part of the interface designers.

So, we can think about a three-way node. One is the “user interface”, so that is the designed
thing. Another is the “user”, and another is the “designer”. So designer need to understand what
are the user’s thinking and what the interface should look like. So that’s how designers can
design and draw the connection between this user and the designed product and how the
interface is linked. So, then this design will be successful.

So, and also there are multiple terminologies for the similar concept. So instead of user interface
design, you might hear many other terminologies which kind of signify the same or the similar
subject. Might not be exactly the same or the similar subject. For example, user interaction
design. So user interaction design is also the term in many design schools. The design company
we use this term user interaction design.

So interaction is again the way user interact with the between the man machine interaction. The
way the interaction is going on. So that is how the similar subject can be called user interaction
design. And there the interaction part will be the way interaction is happening that will be
emphasized. And another terminology can be user experience design. So user experience design
is a broader umbrella, not just user interface design or the experience of user around any product.

So here we are talking about the digital interfaces mainly, the web interfaces or the mobile
interfaces or the mobile applications or the computer websites. And the experience can be based
on a spatial experience. It can also be the experience of a 3D space or architecturally how the
experience is. Or experience of a product. It can be experience of a particular hardware product
which does not have a graphical user interface.

2
So that every experience or the experience of a particular journey. So user experience is a much
broader terminology. So user experience designers talk about the experience of a particular
system or product through the user’s mind. So the user experience is not just confined within a
interface design. So that is a broader subject. Now another terminology can be human computer
interaction design. So human-computer interaction design defines a very, it is a more defined
one.

So it is just human-computer and the interaction between human and computer. That is the
subject we call human computer interaction design. So many other, so these are the main
terminologies which come from the academia and also there can be few terminologies which
come from the company. So for example GUI, so graphic user interface. So it is the graphical
user interface or the front-end design can also be called GUI.

And then there are job profiles like for example UI UX designer or the user interface designers
or the user experience designer which is a little broader terminology. So they conduct generally
the user testing and the user research how people behave. So we will talk about this, how user
research and these things are done within the course. Also there is a terminology called visual
communication designer.

So visual communication design is not exactly same. It is bit different, but we will discuss about
the communication part of interface design. So within the interface when we are designing the
GUI or the graphic user interface the visual elements or the graphical elements how they
communicate visually with the users so the digital website or the application how they are
communicating graphically with the users and that is the visual communication design.

So visually what is the communication going on. But visual communication design is again a
broader terminology. So it kind of overlaps with the user interface design. So it does not deal
with the user experience. It only deals with the visual part or the color, texture, the type of tabs
on the navigation is going on, that visual part of it or the front-end part. But within visual
communication there can be many other domains which we will not discuss.

For example animation or the graphic design or the print media, the traditional way of print
media, of lithograph, scenography, or linography. So those are also part of the visual
communication design or creating feature film, set design. Those can be a visual communication
design. So how the set is visually communicating with the uh people, the scenography or how
animation, it can be painted animation or just a one single frame or painting or the scroll painting
everything how they are communicating with the people.

3
So that is part of visual communication design or the bigger umbrella of visual communication
design. We will just talk about the visual communication design on digital platform. So how in
digital platform when we are designing the interface between human and computer what is the
visual communication element here. So it overlaps with the subject. So part of it we will discuss
and the other terminologies, the other part of the user experience design we will discuss focusing
on the digital interface. So what is the interface? (Refer Slide Time: 10:40)

So this is interaction between human-computer interface. So this interface is the interaction

between human-computer. So that is why this is also called interaction design. So it can be called
human-computer interaction design. So there are two component, one is the design and another is
viewer or the user and this is the interaction going on between these two interface, a human-
computer interface. And there is the designer who should understand the design element.

Who should understand the users and also create the interface between these two. So part of the
course, we will be talking about the people’s perception or the how people perceive and the
process of user testing, dealing with the user research and how to take user’s feedback and how
they create meaning for example semiotics and semantics. That will be discussed. So that will be
part of the user’s centric approach of the course.

Another is the part of the design element. So we will be talking about the design elements. We
will be talking about the typography. We will talk about the contemporary design trends, how it
changes and the paradigm of design, different platforms of design that will be part of here. And
then the interaction or the interface or the methodology of designing this.

4
So the many of the modules we will be talking about the methodology of how to connect the user
with a computer interface or the machine interface. So what is the process between them and
what is the process of designing it and how the different paradigms are shifting and how
different.
(Refer Slide Time: 12:30)

Also we will be talking about in the later stage of the course what are the emerging platforms of
different computing devices. So based on the process of designing and the process of
interpretation this course can be divided into two. So in the process of designing the elements,
principles, and typography and how it changes the contemporary architecture is there. And then
part of it will be design semiotics, visual perception and how to conduct the user interface, user
research and user survey.

Then we will also talk about the visual perception, semiotics and principles. How it is combined
and culminates into the contemporary visual language. So contemporary visual language is
actually between these two. So how contemporary design language changes based on the design
platforms as well as the viewer’s perception. So contextual and subjective things, so this
contextually correlates the users with the design element.

So how the design element changes based on the perception of people over the time, over the
place and over different spaces of the world and that we will be discussing and also the

5
typography typefaces. How the different typefaces have a different connotation, different
meaning and different style into it. So all these parts will be covered within this course.
(Refer Slide Time: 13:46)

Now while connecting this, which is the interface. So when this interface is designing, is being
designed based on the connecting the design elements and the viewer. So that interface might
have different multiple ways of connecting. So we will be discussing what is the method of
connecting this. What is the optimum or the best method suitable to connect this and while
discussing that, we will discuss the methodology of creating a design.

So there can be multiple different options. So we will talk about a multivariate design option
creation. So creating different design options and then selecting the best. So that is the process of
design methodology which will be discussed in few modules and it has a large component in the
course, what is the methodology part of creating user interface and within this methodology there
will be discussed the user research component which is coming from the user experience design
part.

So user experience design part will be discussed based on only graphical user interface which is
a human-computer interface design. Not the other spatial architectural part or the product design
part of it would not be discussed. We are focusing on the graphical user interface and then the
next part will be the visual communication, how to delineate the next layer or putting the color
and all this detailing it or the visual communication design part.

6
So part of the visual communication design will also be discussed. So if you look at the UX part
and then the Visual Design or VD part, so this will be something interface design will be in
between this. So interface design overlaps with the user experience or the research and feedback
and testing part and also the visual communication design part. So it both will be covered
focusing on the interface design. Now design methodology will be discussed, that I have told.
(Refer Slide Time: 15:57)

And then types of digital media technology that will be discussed in the later stages and the
advancement of digital media technology, the brief glimpse will be given in the, what are the
different trends coming into them, design methodology. Then there will be a software
demonstration on while creating the user interface different softwares. Just a brief introduction
will be given and it will be just introduced to you. But complete demonstration will not be given.

And while creating the basic layout how a different software like balsamiq you can create
information architecture or the low fidelity or the initial stages and later you can in visual
communication design part you can use the software, Photoshop and InDesign. Photoshop or
InDesign are very common software. So it would not be discussed because there are lot of videos
in YouTube on digital platform. You can go through that and most of you already know that.

And there is another software which is used for eye tracking device, for user testing, to test
whether the final design works or not. We can track users eye and that can tell whether this user
interface is functional or not. So eye tracking will be just it will be showed to you how eye

7
tracking is done and the product will be shown to you in the later phases of demonstration. So
these are some reference books which we can follow in different parts.
(Refer Slide Time: 17:38)

So there are books on interaction, user experience design, interaction design, basic design,
Stephen and Pentak and then other focusing on the typefaces these are the books and Design of
Everyday Things by Donald Norman, again the Experience of people. But this is mostly focusing
on the product design and other design by other books by Donald Norman, Emotional Design.

And other books you can go through it and so this is the list of the books, reference books apart
from the study material and slides which will be given to you and the lecture, video lectures.
These are the study materials which you can follow for better preparation.

8
 User Interface Design
Prof. Saptarshi Kolay
Department of Architecture & Planning Engineering
Indian Institute of Technology, Roorkee

Lecture - 02
User Interface Designer

Hello students, welcome to the online NPTEL course, User Interface Design. So today in the
second lecture we will discuss who are the designers and what are the roles of designers in the
domain of user interface design. So if we look at the user interface designer, this term and this
term is used in a different way and there are many other terminologies which might mean the
similar profile.

So when we look at the user interface design profiles and what are their jobs and how do they
blend with the other different disciplines and how do they act, what are their roles and what do
they deliver as a designer.
(Refer Slide Time: 01:24)

So this designers, the user interface designers and the other designers other terminologies which
apply for the similar profile is mostly T-shaped, they have a T-shaped thought process and the
expertise is T-shaped. So when this terminology T-shaped is applied, so that means they have a
horizontal breadth of knowledge as well as a vertical depth of knowledge. So this signifies their
expertise. So they can blend with different profiles horizontally.

9
So they should have a range of expertise which might not have required a very deep in-depth
knowledge on that but they should be able to communicate with the different other profiles for
example the web developers, the management people, the client, they should have the knowledge
to communicate with them and then there can be also they require knowledge on various
different domain.

So that might be psychology to understand user’s need and also web design if they need to
communicate because they have to communicate with the web designers. As well as they need to
communicate with the management people to understand the market requirement. So this
horizontal breadth of knowledge is required. As well as they should have vertical depth of
knowledge on their own domain which is their own design profile.

So this T-shaped knowledge is very T-shaped knowledge is very much required for the designers
for the user interface design platform.
(Refer Slide Time: 02:50)

Now we have multiple different terminologies which might lead to a similar kind of profile. So
when we try to understand what is the role of user interface designers, so we need to understand
what is user interface. So the terminology depicts the interface between the user and a product.
And this product can be a tangible product or intangible service. So it can be a system design and
or a tangible product, tangible product like refrigerator, computer.

And it can also be a software service like for example web application software or it can be a
system; so how a total system can run. So web application might not be any particular product
but a holistic system even that can be designed by the designers and this interface can also

10
communicate, can also depict the user how the user is behaving within the interface of the
system and the user. So it is a broad term if we extrapolate that.

But generally, when we use the term user interface design it typically means that user and
computer interface. But it can even be a user and system interface and user and product interface.
(Refer Slide Time: 04:22)

So then there is another term called human computer interface design or human computer
interface and the designer for that will be human computer interface designer. So this is the
interface between human and computer. So this is pinpointing that the interface has to be
between uh user or the human and the computer. It is not a interface between human and product
or human and system.

So it is pinpointing that this human computer interface designers profile will be only the job
profile for the human and computer interface. So this will be a digital media. This is specifically
for the digital media.
(Refer Slide Time: 05:04)

11
And then there are terminologies for different terminologies like user interaction design. So this
interaction is between the user and the interface and user interaction design again it mostly
depicts the interaction between user and the computer or the digital media but you can
extrapolate the concept of this interface and it can even be a intangible system or a product. But
generally it means that user interaction between human and computer but also it can be the
human and the system or the product.
(Refer Slide Time: 05:44)

And another terminology for this is user experience design but there is a difference between user
experience and user interface design. So user interface designer will design the interface between
the user and the computer or the product but user experience designer profile are different, they

12
will just depict the experience, what is the experience of the user when they are using this
interface.

So it will be more of a research of how people behave when they have given that product or the
system or the computer to interact with. So this user experience designers will create design
experience or they will depict what is the experience, whether the experience is good or
experience is bad. So this is more of a research profile. So user experience designer’s job
generally comes first so that they do the survey of the user’s experience with the existing
product.

Based on that the user interface designers will take over the design and then they will design the
interface between the user and the digital or tangible media. And then the other profiles like
visual communication designers they will create the interface, the high fidelity interface with the
colors and the graphic content and then the developers will develop that.

So the user experience designers are mostly confined with the first part which is a very important
part which is conducting the user survey. Then also this user experience designer they come in
between in the iterative model. We will discuss the models of the methodology later in our
discussion. So they also conduct the survey while the product is designed, the low fidelity
product is designed in between stages and then they again go back to the user and try to find out
whether the user’s experience for the designed project or the product is up to the mark or not.

So they again they give the feedback to the user interaction designers on the basis of the
experience they can achieve while interacting with the user. And then again it goes to the
interaction designers and then they change the design accordingly.
(Refer Slide Time: 08:24)

13
So if we look at the connection between the user experience designers, user interface designers,
and visual communication designers. So they together combine and create the design component
of the system. So we have not discussed visual communication designers in detail. So visual
communication designers mostly design the graphical content of the interface. So first the
interface interaction designers or the user interface designers design the layout of the web page
or the web application, the information architecture.

We will discuss what information architecture is. So mostly it is the structure of the website and
the web application or the digital media. And then visual communication designers come into
picture and then they create the detailing with the color, texture and how the UI transition will
happen and on the high fidelity or the next level of designs with the colors and proper
typography, the shape and size of the tabs and the buttons and all this color palette and other
detailing is done by the visual communication designers in case of web application.

Visual communication design profiles can also be in animation and graphic design. This visual
communication designers are also will be expert of creating graphics, graphical narrative novels
and the animation or other domain where there is high value of visual creativity. So they will be
expert in creating the visually communicating with the user and the elements with the elements
of design.
(Refer Slide Time: 10:17)

14
So this is how they are connected. So first user experience designers will do the survey of the
users and how their required experience has to be. And then they will feed the data to the user
interface designers and user interface designers will create the structure of the web application or
the website and then it will go to the visual communication designers. They will add the high
fidelity design with the colors, textures, and the detailing.

And they together will create the product which is the combined creation by all these designers.
And after visual communication designers or from this stage it can again go back to the user
experience designer when the structure of the website can be validated by the user experience
designers. Whether the structure can achieve the required experience which is targeted for. Then
after, so this is in the mid stage of the design.

And in the high stage of the design when the visual communication elements are also added from
there also it can come to the user experience designers. So with the color and tabs and all the
detailing whether that design which is more towards the final product can also achieve the you
know required user experience or not.

So this is a nonlinear process or iterative model of design where user experience designers, user
interface designer, and visual communication designer they work together and it goes back and
forth and then finally the product comes with their joint venture. So this is we are discussing
within the design team.
(Refer Slide Time: 12:07)

15
So there are design team also connect with the other teams. So here in this stage their in-depth
knowledge of the T-shaped knowledge, this part is talking about and they also have a vertical
domain of knowledge which is the breadth the horizontal sorry the horizontal domain of
knowledge which is the width of the or the breadth of the knowledge which enables them to
connect with the other teams which is the web developer team.

Because whenever the design is envisioned by the designers, all three designers and that has to
be developed by the web developer. So whatever they are envisioning so that should be feasible
to develop. And then so that web developer comes into picture. But the project starts with the
management people when they find the requirement of the product and the return on investment.
So whether this product if the product launches the market.

So whether it will be viable for the company to invest that money and launch the product and
whether there are enough number of potential customer for this product or not. So that comes
from the management people. And they also intervene within the process and then they see
whether there is a close communication between the user experience designer people and the
management. So they sometimes do the similar task.

For example understanding the user requirement, management people also do that and the user
experience designers also do that. So they will be in sync with the idea that the product should
cater to this kind of people with the persona and scenario of the segment of the people and what
they are achieving for, they are looking for, their need and desire of the particular user. So their
client and user also comes into picture.

16
And in several times the client and user will be called to see the product in different stages so
that the product caters to the need of the user or client. So most of the cases client might be the
real user or client might not be the user. For example if there is a big company which is
launching a product within their a product range, then the client will be different and the real user
will be different. So the client will envision the product and the real user will be the target
audience.
(Refer Slide Time: 14:41)

So this all the team comes together and then the final product or the system or the intangible
system or the tangible product or the digital product comes into the market. So this is the system
of the generic system of how designers work within the design team and what are the divisions
between the design team and what are the different terminologies used for the design profiles and
how these designers blend with the other teams within the company or outside the company with
the users meeting and the client.

So this is the brief discussion on that and from the next class onwards we will go deep into the
design methodology and the research methodology for the design and then we will also go on
with the examples and the detailing of how design will be done by the designers and we will
focus on the user interface design mostly and also we will talk about the experience design and
communication design because these three design profile or the designers work together to create
the system. Thank you.

17
 User Interface Design
Prof. Saptarshi Kolay
Department of Architecture & Planning Engineering
Indian Institute of Technology, Roorkee

Lecture - 03
Design Methods - I

Hello students, so welcome to the online NPTEL course, User Interface Design. Today we will
talk about the generic design methodology for user interface design and gradually from the next
class onwards we will detail out the each and every design stage of user interface design. So if
we see the all other design domains of broader perspective rather than just concentrating on user
interface design process if we consider the visual communication design, other creative domain
as well as industrial design, furniture design and other design.

So the holistic umbrella if we consider that, so that research and design technique can be divided
into 6 major categories into that domain.
(Refer Slide Time: 01:16)

So if we see, so this diagram has been taken from the book Architectural Research Method by
Linda Groat and David Wang, though it is focused on architectural research method but the
different typologies can also be true for any creative domain for example other industrial design
UI UX and visual communication design domain. So this is the broad 6 category and there is a
fine difference between design and research.

18
Design, in a broad way design is more applied and research when we go into more theory based.
So the same techniques can also be research related or it can be design related. So when it comes
to theory that becomes research and when it comes to be more action or applied then it goes
towards more into the design method. But we can see that all 6 methods are there. So let us start
from here. The first is historical research.

So this is very qualitative research when we dig down the what happened in the history. For
example if we do visual communication design research, so we are talking about all this research
method and design method to give you a better understanding of what all other approvable
process can be. Sometimes in UI UX also these process can also be applied if there is a certain
particular different context.

So in historical research what happens is what happened if I give you an example, for example if
you want to design something based on a past visual style which is not contemporary. For
example if you want to design some web portal in Gothic design style or some for example art
nouveau style. So you need to find out what are the art nouveau style which was there and you
have to base your research on literature review because we do not see many examples of art
nouveau around us.

It can be any other design style which is not visible today. So this research technique is mostly
qualitative and you have to find out what happened during the past and based on that you take
design decision. Qualitative is another research method. So I am terming this historical research
as qualitative because the nature of the research. But qualitative is another kind of research
technique according to Linda Groat and David Wang.

Where we try to understand phenomena of user behavior or through phenomenology and

ethnography. So those kind of research are qualitative. Most of the user experience design
research is qualitative research. When we try to find out the user behavior, their cognitive
psychology, what do they think and how they can behave if we present this kind of information
in website. So what will be their probable behavior? What will be the probable action?

So these kind of research comes under the qualitative research. The next is the correlation
research and when this segments are creating the circle, so these consecutive research techniques
has lot of similarities. And in terms of technique, in terms of methodology and in terms of
deliverable they have some similarity. That is why they are placed in this order. For example in
historical research we use the qualitative method and it is more descriptive.

19
And when I discuss this correlation research technique, so this is also similar as qualitative
research where we try to find out what can be the behavioral perspective in two different
scenario. So it is same as qualitative but we are correlating two different variation, two different
scenarios of qualitative research. So if this is the case, case 1, this might be the behavioral
outcome and if there is a case 2 what will be the behavioral outcome?

And then we compare between the case 1 and case 2 and then we judge what kind of whether
case 1 will be better or case 2 will be better. Sometimes your UI UX design can also be
correlational when we create multivariate scenario. We will discuss that later. So multivariate
scenario is when we create different design for one particular solution. So we give users option A
for the same, which solve the same particular problem.

Option B which is the solution of same particular problem, but two different solution. And which
solution, which design or which web portal works better, we find out that and we relate these,
why this is working better and then gradually we iterate or we do the minor iteration or major
iteration based on the performance of two design and that can be termed as a correlational
research in terms of UI UX design.

Then experimental research, experimental research might not happen directly in the web based
design. It might happen in the case of, if I give you an example of suppose some scenario is
created in augmented reality which is not there. So that kind of in hypothetical situation some
experiment, if we set up an experiment for example how people might behave in a disastrous
situation for example evacuation of a flight.

So that situation can be created in virtual reality or augmented reality headset and then how
people are behaving within that situation. So that is an experimental setup. So this is not a real
setup. So qualitative and correlational are real setup. Historical is a real setup which happened in
the past. That is why we go into literature review. Qualitative and correlational are real setup.
Within the real setup how people are behaving.

And when we are giving them web application, so we are judging their in the paper prototype or
whatever we are giving them, the product, they are interacting with the product. But
experimental it is like virtual setup when we conduct a experiment within a typical virtual setup
and we collect the data. That is a experimental research. And simulation research is more, an
experimental research sometimes the data can be collected by user.

20
So there is a user behavior might be intertwined with the experimental research. And simulation
research generally does not happen in UI UX design because it might be totally devoid of human
behavior. So simulation is totally data centric. It is most of the cases in physics and more science
related research will be there. In some cases it might be there, where we are simulating some
through a software and software gives the data and all the comparisons are happening in the
software.

So mostly the human datas are not there. Maybe in few cases the eye tracking data and this can
be as a simulation but there also human perception comes. So simulation research is not very
related in terms of UI UX design. And then the logical argumentation. This is a very theoretical
research where the designers give a theory totally devoid of the other, it is more of a top down
approach where designers give a theory based on his perception.

So it is not, users are not coming in this research method. So this is more of giving a new theory.
For example if this is a style and design style going on what can be the futuristic style and there
may be users who might not give much opinion on that what will be in the future style or
something. And it can be some other things where logical argumentation is totally based on logic
and argumentation and it is also very much qualitative in nature.

So this is the spectrum and some research can also be a combination of few research techniques.
So there is another one which is case study and combination strategy which can be combination
of different various segments of this 6 major segments. Now coming down to the main UI UX
design methodology. So earlier there was a waterfall model which was previous concept where
each and every design step is followed by one step and there is no going back.
(Refer Slide Time: 10:15)

21
So there is a linear process. So it is not a complicated process when there is no 2 way processes
are not happening. So a stage 1 happen and then it will be stage 2. So when stage 2 is happening,
so they will not go back to stage 1 to correct something and when the stage 2 is done it will be
stage 3 and so on so forth. So for example if I give an example in UI UX design, so first when
we find out the user need. So this is the requirement for the website. So that will be frozen.

The requirement will be totally frozen and the next stage will be based on this requirement what
can be designed and in that stage the deliverable will be the design idea. And the next stage the
design idea will be frozen, design idea. And the next stage based on the design idea the solution,
design solution and the low fidelity solution or the first level of solution will be ideated and that
will be frozen from the designer’s part.

And then it will directly go to the computer science of the developer and they will develop the
software, the final software or the final product and it will be frozen and it will be ready for the
market. So that was the process earlier. But there were less probability of this final product to be
successful because there was no iterations happening based on the testing and how this is
performing.
(Refer Slide Time: 11:51)

22
So this was the model requirement, then design, the software architecture. Then implementation,
verification. If this works and then they will maintain it and it will just go on.
(Refer Slide Time: 12:01)

So this first known as this is by Herbert Benington first told about this. He is a software engineer.
And it was proved that this was not working by Winston Royce said that this process does not
work properly in the situation. There can be a better process to ensure when the product launches
the market it works better.
(Refer Slide Time: 12:26)

23
So the ideal design process is not linear. So it is very complicated because there are many
stakeholders. Designers are there. Then programmers or developers are there. The client is there
and if it is a not a B to C communication or the business to client then there will be many layers
of client. So if it is B to B with whom you are talking to, will not be the final client. B to B is
business to business. And then you have to find out the final client who will be the real user.

So user will be somebody else. So the designer is there. This engineers are there, the software
engineers; the business provider and the client or the users are there. So there are lot of different
stakeholders going on. So there has to be a provision to collect everybody’s opinion and
everybody’s idea and design should be, the final design or the final product should be, we should
ensure that this product does not fail.

Because right now in this UI UX design or the product design when a product is launched, so lot
of money has already been gone for this to create that product and to iterate that and when it
launches the market the final version or the alpha or beta version, the final version, so lot of
money has been already invested by the business. So if there is any fault, so business has lot of
risk involved in the product. So to ensure that whether the product does not fail and the risk of
failure comes down we have to ensure that this product performs properly with the market. So
that is why voice of customer or the user’s opinion, engineer’s opinion, and everybody’s opinion
to design the product is very much important.
(Refer Slide Time: 14:19)

24
So that is why this new model, iterative model has been designed. So this iterative model talks
about, this involves user’s feedback and throughout the iteration it can again go back and forth.
So there is a loop created. So within that loop it revolves several time until and unless it satisfies
the customers. So there will be set of customers, few customers will be selected for the user
testing and the product will be tested in several layers.

When this is in the initial stage, the idea will be tested. The next stage, the low fidelity or the
mock up prototype will be tested and it will be ensured that this product when finally designed
will work and is satisfying the user need. Whether it is satisfying or not, how the users are
performing, are reacting with the product, product’s interface that will be notified and based on
that minor iterations or the major iterations will be done.

So after the concept, concept sometimes also goes for the user testing. So from concept initial
design development happens and it goes for user testing and then next layers of design
development with iterations or some tweaking happens and then it goes on until and unless it
satisfies the user’s need. It totally follows the user need and the best possible solution comes as
the final design.
(Refer Slide Time: 15:53)

25
So this is like a loop. So it starts, then requirement, design, implementation, test, review and if
the review is satisfied it is complete. If it is not satisfied then the requirement again can be
reformulated. Then design and then test, it goes on like that. So iterative model facilitates design
improvement through several loops of user feedback and iterations before completion. So this
loop you might think that if there is a one-one process and it goes back, the process is shorter.

But when it comes within the loop, the process might be longer. It might take longer time
because finding out the users and testing it takes longer time and the money involved will be
more. But it ensures, it reduces the risk factor and it is proven that the product which has been
designed in this process works much better when it is launched finally. So finally the benefit or
the breakeven actually happens quite before.

The breakeven is when the amount of money invested to create the product and that equal
amount it is gained by the investor or the client. So that is the point of breakeven. So breakeven
happens much before and the chances of failure is much much less. So through the ethnography
and heuristic evaluation this process will be done. So ethnography the broad term is like ethno
means people and graphy to survey people in their real situation.

We will discuss the ethnography in terms of user experience design focused on this web
application interface design when we discuss the detailed methodology. And heuristic evaluation
is when we, ethnography is the first stage when we study the user to formulate the need. And
heuristic evaluation is when we do the user testing, that process is heuristic evaluation. So we
will also discuss these two methods when we discuss the user testing and user feedback analysis
and user need generation.

26
(Refer Slide Time: 18:08)

So few of the processes which ensures this iterative model is card sorting. Users will be asked to
sort the card based on it might be different variations of prototype or their requirement. They can
talk about their requirement, their need. So which will be validated by designers whether what
they are thinking the users need is matching or not. Sometimes through this process of user
survey different latent needs comes up which designers did not foresee.

And sometimes user also talks about their desire which might not be the primary need but
different desires. For example if you think about a refrigerator, refrigerator is for a cooling
purpose and then some refrigerator has the sixth sense, ice comes out from the door. So these are
different desires which is not the basic requirement but some other added advantage. So if you
take the example of mobile phone, mobile phone initially started with a device to connect, to
contact with people who are remotely placed.

Now mobile phone includes everything. Mobile phone is a amalgamation of wrist watch. It is
also, they have provisions to see videos, chat with people and watch movie and what not. So it
started to amalgamate different desires which was not the basic need for the mobile phone but
later it changed, the equipment changed. So right now if we think about a mobile phone we think
about a smart phone and that includes a lot of things which was earlier not part of the initial
concept of the mobile phone.

So also we think about affinity diagram. This process will be discussed in detail when we discuss
the major segments, each and every segment in detailed fashion. So affinity diagram is when we
discuss this need and desires. So many of the needs will be superimposed with each other. So

27
they will be similar. Many of the needs will not be similar. So we create affinity diagram, so
what are the similar needs, similar requirements.

And also during the testing we do why these things are getting this prototype is not performing,
why the other prototype is performing better. So based on that we create this affinity diagram.
These are different techniques to ensure voice of customer how we analyze, how the user gives
the feedback. So these techniques are part of iterative model which was not there in the waterfall
model.

When we talk about the iterative model, so there was also one of the pioneering designers gave
this concept of taking voice of customer in the industrial design first.
(Refer Slide Time: 21:08)

So he is George Nelson, he is a product designer. But this concept came from him in the quite
early situation because product design was, the domain product design came before web design
and web designer interface design came is much newer as a domain. So George Nelson was a
famous industrial designer. He is the founder of American modernism. He gave a concept of
modular office furniture when he was thinking about a free plan.

And the office furniture has to be customized based on each and everybody’s need. But it should
also be mass produced. So he gave a very interesting idea of mass production and customization
where user can change and select based on their particular need, based on their requirement but
the basic system will be quite similar. So designers are offering larger plethora of different
design options, design solutions and users are selecting them.

28
So here if you think about the concept, designers are not giving a concrete solution to the users.
They are not feeding them a particular solution. They are giving them multiple solutions and
users have the provision to select or deselect different solution to create their final product what
they need. So the voice of the customer or the voice of user and their opinion is amalgamated
within the final design.

So finally how the design will look like that depends on the designers as well as the user. So this
is also called the codesign process. So the different stakeholders are creating the product, they
are co-creating the product. So if you look at his first office furniture design, so this is, this won
the Alcoa award and this Action office series 1. He have designed different other series, series 2,
series 3 based on the requirement of the office and the need of the office.

So you can see these are the different cubicles. They occupy the same space. Their basic look is
the same. So they go in the holistic situation. They do not look out of the place. Everything has a
visual simile. But still based on the requirement of different people, it is changed. So you can see
the sitting arrangement is different and the setups are different in this cubicle. The setups are
different in this cubicle. They have minor differences in this cubicle.

And when there is a module, so two modules can be amalgamated to create a bigger cubicle who
has a higher rank or has more work to do and so on so forth. In totality this will be under, this is
something like the process where user’s feedback is created. So this is not exactly a process
where this is going as a loop of iterative design. But this is designers are giving users multiple
options to select and users will select.
(Refer Slide Time: 24:11)

29
So there are some other examples by him. So George Nelson is the, he have written a book by
Tomorrow’s house. In architecture also the similar process has been taken. So there is a studio
apartment and users can select how the apartment’s partition wall will be. And based on that he
have designed a partition wall. This is the first partition wall design and we can see the modular
kitchen, modular wall cabinet in today’s houses.
(Refer Slide Time: 24:41)

But this is his first time when he gave this concepts. So this was the problem how everything is
scattered and this was the solution, how it can be done as a partition wall. And if you look at the
partition wall, this is again a modular design. So this length is one module, this length is the
other module. So you can select different sequences and whether you will go for this or this
variation within this another module.

30
And how many divisions you want, this is totally dependent on the user. So the final wall cabinet
how will it look like the designers are not giving the solutions. The users are taking it. So here in
this case, the provision of success rate will be much more because users are creating their
solution based on what do they need. In many cases of user experience design in product design,
visual communication design and even in few cases, might be in application, it can be open to
the user how do they want to personalize their setup.

In case of some web application or software designers might give some provision of
customization to the user. So that will work better and the users will feel personally attached
with the design if they have customized based on their need. Because everybody’s need is
different. So targeting a larger segment of customer will be much more easier and everybody has
the provision to change according to their need.
(Refer Slide Time: 26:35)

So this process during that time, George Nelson connoted this as a meta design. So this is also a
co design process, in today’s term these terminologies are similar. Or participatory approach
incorporating all the stakeholders or translating voice of customer into design. You can say this
is an iterative approach of design where they are iterating but this is mostly a co design animated
design process.
(Refer Slide Time: 27:00)

31
There is another design, approach of design. One is inductive design approach, another is
deductive design approach. Inductive and deductive is also research approach taken in, this
approach is taken in different other domains. This is not a particular process within the design
field. It is generic to any other field. It can be in other economics and various other domains. So
inductive methodology, the observation or the user’s survey comes first in case of user
experience design or user interface design.

And in other cases the observation, the phenomena what is happening in the natural setup comes
first. And then we see the pattern, what is the pattern the simile between this observation of
different cases of observation what is the similarity the patterns, similar patterns are happening
there. From this pattern, whether this patterns are happening in different cases. So the designers
and researchers give their hypothesis. So why this patterns are happening?

Why people are behaving in this particular manner when we give this kind of product or this
setup of design. Then the hypothesis formulates and then the theory comes. So if you think about
the Gutenberg’s principle we will talk about the Gutenberg’s principle. Gutenberg is the inventor
of the printing press. So he invented a theory, Gutenberg’s theory based on the reading pattern.

So he observed the reading pattern of people and who are reading from left to right and from top
to bottom and how do they read and where do they focus on the reading material and he started
observing the people’s reading pattern and then he first observed and then he tried to find out the
pattern, what is the hidden pattern between people’s observation, what news they are reading.
And then he gave a hypothesis and finally he gave the Gutenberg’s theory and how people look
at in different things and where the focal point lies.

32
So we will discuss about this theory in later classes. The other opposite theory is the deductive
theory, deductive research technique. So in deductive research technique what happens is first
the theory comes and so designers create a hypothesis of the theory based on his observation and
his knowledge and the hypothesis will be fixed, the theory will be fixed.

And from there a hypothesis will come and then we will see if this is the hypothesis and
particular situation if I fit that what will be the observation and then the confirmation okay
whether the theory works in this case or not. So that is a process of deductive research. (refer
time: 29:56)
(Refer Slide Time: 29:56)

So the deductive methodology starts with the theory and then percolates to the confirmation of
the observation.
(Refer Slide Time: 30:02)

33
So in deductive theory we think about when the theory is already there then it will be a deductive
technique. So for example if you think about a skeuomorphism of ios platform so there is already
set pattern of design language by ios platform, the apple and also there is some style guideline
for android platform. So if we want to design in ios platform, irrespective of whatever we do
there are some guidelines which has to be followed and the look and feel of the design will be
like this.

It would not change based on a particular preference. So if I do not like this beveled edge, I like
sharp edge ios will not change it. So I might go for a material design of google. I might like this
flat style of design but still if I am using a ios brand, ios design style will be something like this
and they will have this textures and colors and of real material. They will mimic that.

That is the meaning of the skeuomorphism. Skeuomorph means when the material and textures
of the real material is getting mimicked in the virtual intangible interface. So you can see this
drop shadow and the buttons look like button. This is the visual set by the particular company
apple.
(Refer Slide Time: 31:25)

34
Now inductive research will be when this company goes beyond their set design style and does
something for the user’s particular requirement. For example if you look this interesting
example, KFC is Kentucky Fried Chicken. So they started with chicken but they wanted to
percolate into the target the Indian target audience where mostly many of the users are
vegetarian. So they wanted to cater to some cluster of users which initially their brand does not
go with.

So they changed their brand identity rather than red they went for green to show that this goes
with the users requirement and there also the taglines are different. They are focusing on the Veg
and the KFC tagline is the size is diminished and there is a range of product for Indian target
audience. And when we also look at the responsive web design, responsive web design also
targets different digital platform.

So it can be for desktop or laptop, small mobile phone or large tablet. These are the hand holding
devices. These are the stationary devices and based on that the same design, same information
how this can be changed based on the behavioral requirement of this. So this responsive web
design is a need created by the user’s behavioral pattern. So when we hold the mobile phone, our
behavioral pattern changes.

So many of the websites like Facebook and many of the applications like whatsapp and other
things they change when we open them in different devices. The proportion of the button and the
way the information, the size of the text, everything changes based on the user’s requirement. So

35
this requirement of responsive web design is generated by the process of understanding people’s
behavior. So this is inductive process of thinking.
(Refer Slide Time: 33:42)

So the participatory approach, co-design these are the techniques where inductive design
approach inculcates.
(Refer Slide Time: 33:45)

This is similar to the iterative model but this also happens in the inductive research. So heuristic
evaluation which is documenting and analyzing the spontaneous interaction between users and
the designers. It can be in product, it can be new media, it can be in web design. So this is a
characteristics of the inductive design research where the research or the design starts from

36
observing people or observing the phenomena and in product design new media is mostly within
the visual communication and web application UI UX. Everywhere this process can happen.
(Refer Slide Time: 34:28)

Then another interesting theory is the mental model. We need to understand user’s mental model
to give them the right solution. So Donald Norman, one of the famous design theoretician writes
in his book, Design of Everyday Thing, gives this user’s conceptual, the conceptual design
models proposal. So through this diagram he says the conceptual design model will be successful
when the designer’s conceptual model will blend with the system image.

The system image is the mental model. This is the same. The system image is when we think
about a product or a design what finally, what we see around us. And user also has a mental
model. System image is finally what we see. So if we see a mobile, the final mobile, so that is
considered as the system image. Mental model is, based on the system image what user creates
within their head. So mental model is this one which is there in user’s mind.

System image is what exactly the real life situation of the systems within the system what we
see. And designers what designers perceive. Designers perceive when they conceptualize the
design. Now here this everything is connected. Designers should understand what people are
thinking when they are thinking about a particular image, particular product. If we take an
example of a chair, what users are thinking when they hear this word chair.

They might think a four-legged some seating devices and designer should understand that
whether that users are thinking about that. Now after understanding that designer should also
look at what existing chairs are around our world. Now designer might defy that mental model of

37
users. So they might say okay it might not be the four-legged seating device. It might be
something like a hammock. That will become the designers chair.

And it might not confront to the system image or it might be. So a designer might create a very
conventional chair. So it totally depends on how whether people your client requires that or
client wants something else. Here this user testing and survey understanding the client is very
important. And here the case studies what are the existing things the survey of that, the review of
the work already has been done. That becomes very important.

So this is and they also influence each other. So when the designers create something different
which is not in the system, for example this hammock like chair, so that adds something new into
the system. So the system image changes. If the system image is now this they change, some
deviation happens in that and the hammock also comes within the system.

So when first apple started to create this Macintosh, started to create this sleek design of
desktops that was not within the system; so they created that and then people liked it. People
accepted that and then it went inside the system image and the total system image changed. Now
after this invention when that comes and people see those their mental model also changes
because their perception changes.

And few people might like this new system which has been changed. That might come into their
mental model and few people might also stick to the old style, style of design. They might think
that no the old design was better and that will influence their mental model. And designers will
always has to understand what their client is thinking about, what is there, predominantly within
their mind or the mental model of this user. So let us take an example and it also changes over
the time.
(Refer Slide Time: 38:55)

38
So let us see the previous first cars like this and this is the modernist car, Volkswagen Beetles
which is still there because of some people liked it and this is some of the other cars which is
there in the old earlier stages and just after the industrial revolution. So this might be the system
image of the car when we were like in 1920s the modernist era. And based on this system image
that times users’ mental model will be something different.

Now we are in this era where we see Maruti, Tata and other Hondas car which looks something
like that. So the system image has this plus this. This was already there, now this and the mental
model will definitely change. Now when designers think about futuristic car they have to, so
these are some examples of Toyotas futuristic car and some other company’s futuristic car. So
designers conceptual model might defy all this existing styles which was there in the previous
era which is already there around us.

And futuristic car will not look like this. So they will design something else to make that car look
like futuristic and this will not be there in the user’s mental model. So something when designers
are asked to create a futuristic car, the mental model of the users has to be defined and a designer
should not go about what users think. Then it will not look like a futuristic car.

And when they want to design something like today’s car then they will exactly they should
generally in general concept they will try to follow what users are thinking, what they are
visualizing as a car. And if in certain cases they might, the designers might want to create some
car which looks like the traditional old style of car. Few of the car even does that like Rolls-
Royce Phantom and few cars are still there. They has the aura of this traditional industrial during
the modernist industry revolution that styles are still there. So that also is not exactly the user
mental model.

39
So if you think about Rolls-Royce Ghost or Phantom they have a particular design features
which is old-fashioned but still it looks is also relevant in today’s time. So a designer has to
understand the mental model and the system image and then the play they should play with the
how much proportion they will take from there and within the conceptual model of the final
design.
(Refer Slide Time: 41:44)

And Donald Norman also gives a design method how in terms of the solution a design should go.
So this is called a double diamond method initially proposed by British Design Council in 2005.
Donald Norman writes this in this book. It is Design of Everyday Thing. So this diagram is taken
from there. So these are the 4 steps of this double diamond method and the initial 2 stages are for
identifying the problem. And the next 2 stages are finding the right solution.

So it starts, this diamonds is created based on this axis. This is plotted as alternative. How many
alternative options do we have and this axis we have the time, starting of the design and the end
of the design. So half of this, what he says half of this timeframe will be the finding the right
problem. If you find the right problem, half of the solution will be finding the right solution will
be based on that and the half of your task is done.

And then the next phase will be the finding the right solution. So when we observe something
based on user research we start to create multiple options and causes of what exactly the problem
users have. So we observe a phenomena or through the ethnographic survey. So this is

40
happening, this is the observation and what can be the probable cause of this observation. What
is the exact problem.

There can be multiple numbers of problem A, B, C, D you can list down and then designers can
narrow down to the one single problem they want to target or the amalgamation of very few
problems, the key problem what users need. So users need generation will be here. So here
designers will fix with the users need. So what exactly they require, what they want and how do
they want so that will be the solution. How can that requirement be achieved.

There can be multiple options of how this can be achieved. So these can be different solutions
and this is the multiple variations of solution to target this particular problem. So problem is
identified here. These multiple solutions are targeting this particular problem. So this is
observation. From there a particular problem is identified. And these are multiple solutions to
target this particular problem, one single problem.

And based on that multiple solutions there will be user testing. So users which solutions will
work best in this particular context, the particular set of user and there will be one single
particular problem and it can be your iteration. It might not be like this and final the solution will
be amalgamation and the combination of 2, 3 options which were created over here, multiple
options of solutions.

And the final options can also it can be selected from 1 or it can be combination of different and
it can be also combination and iteration deletion addition and the final solution will be as the
final product. So this is the double diamond method of identifying the problem and giving the
right solution to the people. And which actually talks about the user research and how users
behavior will be considered within the design. So in the next class we will start discussing about
the details of each and every stages of design and we will continue that.

41
 User Interface Design
Prof. Saptarshi Kolay
Department of Architecture & Planning Engineering
Indian Institute of Technology, Roorkee

Lecture - 04
Design Methods - II

Hello students, welcome to the online NPTEL course, User Interface Design. In the previous
class we started discussing about the generic design methodology. We will continue that in
today’s class as well. So in generic design methodology we have discussed about the Donald
Norman’s theory of how the design process looks like a double diamond.
(Refer Slide Time: 00:49)

If you look at this figure and when plotted in this axis as different alternatives and in the other
axis over the time. So over the time based on the different alternatives of problem solving as well
as the solution finding it looks like a double diamond in case of the option so we start with the
problem and what is the real cause of the problem, then multiple options bifurcates from here
and then finding the right cause of the problem.

And coming to the need statement creates one diamond and then from the need statement or
when we are defined, we have defined the problem, then finding multiple options to cater to that
solution. Again it diverge and then again it converge into one best or optimum solution for this
particular case. So this convergence, divergence and again convergence and divergence for

42
finding the right problem and next finding the right solution is the double diamond method
which is initially proposed by British Design Council in 2005.

So this 4 stages are discover, this is discover, this is define, and then develop and then deliver. So
these 4 stages were there. And there are different other models which also confronts with this
double diamond method. The same process but a little deviation from the same process and many
other designers and marketing people have developed the other models which are also quite
similar to this process.
(Refer Slide Time: 02:35)

The other model is the design thinking framework. This is commonly used in many design firms
and this has 5 stages of design thinking. Design thinking is the term where this is the process
focused on the design and how designers think and how they design and how do they deliver. So
this also has the 5 stages and this is also quite similar to the double diamond method. So first is
empathize with the user when actually designers are finding what is happening with the users,
what is there, the need.

What is the exactly the natural phenomenas are happening. So this phenomenology and
ethnography where designer start with. So this is the starting point, the stage 1. Then they start
designing so when they empathize then they start finding different problems, what users are
facing. So this is kind of this stage empathize and then they try to define, define the problem

43
which was also there in the double diamond method this define stage or defining the problem and
then achieving the need statement.

So defining the exact problem looking at from the user’s perspective understanding the user’s
need through ethnographic survey and user survey. So this is the process number stage number 2
which is defined. So this is what comes within the finding the problem or where you are defining
the need statement. So here we achieve at the need statement of the design. So where exactly
what we are designing so that kind of freezes over here.

And I should not use the term freezes because we have already discussed that this is the iterative
process. So when we go for the user testing for the low fidelity prototype which is not exactly
designed or not exactly frozen so that time the concept again starts getting validated by the users.
So that time if there were some big problem then the need statement can even be changed. So we
can even go back to this stage from any other stages if the product is not satisfied.

So this is not frozen. So things are flexible in this process and this is a iterative process so many
of the times from each and every stage you can go back if that stage does not fulfill the
requirement of the user. So this is the stage 1 and stage 2 is finding the right problem, problem
identification. And then this is the process where we go back to the next phase of the diamond.

I am comparing this to model because Donald Norman’s double diamond method is first we
discussed and most of the other cases in this generic design methodology so that fits into the
similar process. So next the third stage is ideate. When after this finding the need statement we
start, designer start ideating the different solutions. So again in terms of alternative it expands. So
it is again divergence and designers create different options to cater to a particular need.

So they look for different kind of options and then the multivariate options they create. So this
multivariate options are mostly the low fidelity design. So multivariate means for one particular
option there are different solutions. So for particular need this can be solved they try to think
how a particular need can be solved in different various approach. So here that is how they are
diverging.

44
So this is the ideate phase when they diverge and they come up with different ideas. So there are
some tools to ideate which we will discuss later like brainstorming. When designers, a group of
designers sit together in a particular place and then they start giving different ideas. And all these
ideas are jotted down in a particular way and then this creates multiple different options.

Then each and every idea they start developing from feasible ideas they start developing the
initial prototype and then they start doing the testing. So the fourth option is prototype. When the
ideas come so different ideas then they diverge from each other and more designers expand
during this process of brainstorming or idea generation, there can be different other tools of idea
generation, not just brainstorming.

So they diverge better the option of coming up with the right solution, greater the probability of
coming up with the best solution. So from here few of the ideas get deleted because of the
feasibility problem or the technical issues or the problem of even it can be problem of the
rejection from the users. Then they start narrowing down and they select few options which can
be manufactured or which can be implemented, implementable ideas get selected.

So again they start converging into a particular point and few of the ideas get deleted. So this is
the prototype stays. So few of the ideas get prototyped because which are feasible to prototype
which is feasible to manufacture in terms of product design or which are feasible to implement,
to program or code in terms of web design or user interface design. So those get selected. So this
is process of within the divergence.

And then those prototypes which are low fidelity or the initial prototype or the mockups then
they get tested with the users. So users to test those ideas and few of the ideas even get rejected
because which does not fulfill the user’s need. So again they diverge within this stage with the
testing which kind of gets validated with the user. So this prototyping, the feasibility of
prototyping which is the technical issues and the user selection.

45
Based on these two process they start diverging and they narrow down to the best optimum
solution which they are right there and then the market launch. And each and every stages it can
be even repeated and it can go within the loop.
(Refer Slide Time: 10:02)

So the first stage which is empathize which we have already kind of discussed. So this is user’s
they try to understand user need based on the user demographic segmentation. So user might
have different particular need. So we will discuss just what is segmentation and creating persona
in next or the later classes. So demographics is when users are divided into different segments.

So based on their age, sex and their location their preference and their social cultural behavior.
So based on different kind of demographics segmentation can happen. So when we identify the
particular user group and then we can identify their need. For example requirement of a user who
uses who has their own car and the users who are more comfortable using the public transport
are different and even the users who have a particular habit of using a particular device, their
behavior will change.

So there can be different other ways to segment a particular user group and based on this
identifying this user after that we start doing the ethnographic survey and observe their
phenomena. So identifying the particular user, who is the real user that becomes a very important
task for the designers.

46
(Refer Slide Time: 11:42)

Then the next stage designers start to define. So defining the problem what users have and this is
again each and every next stage is dependent and the function of the previous stage. So if we
identify the right user then we can through their demographic classification then we can define
their problem. Otherwise the problem identification and everything will be wrong if we do not
identify the users and we do not have the proper user survey which is within the empathize stage.

So defining the right problem and which is kind of a analysis of user survey. So when we do the
user survey this is the stage of empathize and the analysis of the user survey which we have
documented while visiting the users and how do they interact those documentation through video
recording or whatever or just observing that documentation happens and when designers start to
ask why do they behave like that, why are they interacting with the web page like in that manner.

So that analysis helps the define stage. So we find out what exactly is the cause, might be the
cause of that behavior and what might be the real problem. So the problem identification happens
during here and it kind of becomes almost freezes over here. So we achieve here to the need
statement by defining the right problem which has to be solved which is the need statement of
the design. So need is fixed and then the design process starts.
(Refer Slide Time: 13:32)

47
Then ideate, different ideas are generated in this stage. So thinking about new design solutions to
address the identified problem. Different other possibility and different ways of tackling a
particular problems are explored in this stage.
(Refer Slide Time: 13:46)

Then prototyping. Initial or quick prototyping of multiple design ideas which can be prototyped.
Definitely the number of solution over here might be more than the number of solution which
will be prototyped. And then this initial prototypes which are very quick prototype and these
should not be the proper exact working prototype. It should be very quick and within the initial
stages to understand whether this design idea will work or not.

48
If designers ask for a detailed prototype then the money involved, the cost of making this
prototype will be very very high. Because in case of product design making a particular dye or
the mould is very costly. Similarly, in the web design programming everything or making a
proper working website will again going to cost the company because the programmer will be
paid and they will program the website or web application or other UI components.

So few of the options will be prototyped and it can be just the programmer will not even be
involved into that. It can be just a sketchy design concept. It can even be on the paper and some
sketch on the paper to ideate these are the initial design ideas in terms of UX design and that can
be shown to the users to get an idea whether this design will work or not. So even the visual
design components does not come within that.

So no colors, just the wire frame or the sketches which designers go with this sketches on the
paper which is called paper prototype to the user and definitely no programming and it might be
interactive in next or later stages or might be some color combination might be added over there
but within in the next stage but initially it is just a sketch on the paper.
(Refer Slide Time: 16:05)

Then this ideas will be tested and then the testing is to validate the design idea by the user testing
process. So user select and gradually when we move towards the narrowing down of this to the
funnel we from this low fidelity or quick mockup too we generally go towards the high end or

49
the high fidelity prototype where the color comes into picture. Proper shape and proper button
comes into the visual design.

Visual design components get added and sometimes the interactive prototype even comes and
sometimes this is also the programmed prototype also gets tested where we do the A B testing or
multivariate testing, 2 different program can also be launched before coming up, the beta version
can also be launched before coming up to the final version. So that depends on in which stage the
design process are in. So it starts with a sketch on the paper.

Now there is another model called Six Sigma process of design. The Six Sigma process of, this
process did not evolve exactly from the design domain. It evolved from the manufacturing
domain. But later it got adopted into the business world and as well as the design.
(Refer Slide Time: 17:40)

So this process Six Sigma is evolved from the domain of manufacturing process as a tool to
improve the production quality. So this is proposed by an engineer Bill Smith working in
Motorola company in 1986. Another designer, another inventor Jack Welch of General Electrics
adopted this method in 1995 in his company for the better manufacturing process. The term Six
Sigma originated from the terminology associated with the statistical modeling of manufacturing
the process.

50
So this Six Sigma it evolved from a statistical model. So they wanted to achieve this Six Sigma
value for a constant process of manufacturing so that the deviation of the end product does not
vary much. So all the time they wanted to ensure that the final outcome is homogeneous.
(Refer Slide Time: 18:36)

So William Edward Deming an engineer, statistician, and management consultant who

developed a process of statistical product quality administration which is also along the way of
Six Sigma process and he developed this plan which is called Plan, Do, Study, and Act and
which is in short which is called PDSA. So first plan, then do, and then the study, study how it is
performing and then take action accordingly.

So if you look at the process of manufacturing, first the manufacturing process has to be planned.
So which is like first the process planning and which is kind of like similar to ideate and then the
do which is kind of similar to design and then the study which is like testing whether study is
like testing and if the test is fine then there should not be any action taken. Or if the test has
some, test tells that there has to be some modification required then the act, so based on the
testing.

So this is also like something like a iterative model of design. So this is not a design model. This
is a manufacturing model. But iterative model of design is quite similar to that. So first the
design idea comes. And then it gets tested and until and unless this testing is satisfactory then the

51
final thing is not delivered. So this loop goes on based on the testing whether the model is fine or
the action which has been taken is fine and then the study comes and then the action is taken.

So do in terms of design will be designing or developing the idea and then the study will be
studying with the validation part which is prototyping and testing. So that is the process of
studying whether study the idea whether the idea works or not. That is the study part in terms of
design and then the designers take necessary action to whether this design idea will if the design
idea fulfills the requirement then it is fine or iteration modification or totally changing the total
deletion and total alteration can happen.

So either it can be a modification or total alteration of a design. So that is part of the act within
the stage of act. So that is the his model of statistically how the manufacturing of the product can
be controlled. So over the time this also had another name for the similar process which is PDCA
instead of PDSA, PDCA which is quite similar; plan, do, check, and adjust. So instead of study
what exactly we are doing is we are testing or checking whether this works or not.

So plan and do remains the same. So planning is the process where designer start empathizing
with the target audience or plan for where the how the product will cater to the user domain. So
all this process is planning and then do in terms of which is designing, creating multiple options,
multiple ideas. Then checking is again testing or earlier it used to call it study. Or here it is
checking or testing. So user testing after prototyping, different prototypes can be tested.

And then adjust whether modification or alteration or total alteration or little modification that is
the part of adjust. So adjusting the idea according to the need statement or what the users need.
So that is the model of William Edwards Deming. So this is not the Six Sigma model. This is
PDSA or PDCA model.
(Refer Slide Time: 22:48)

52
So based on this Six Sigma model which we have discussed just before that and PDSA or PDCA
model there can be two process of design which is again similar to the double diamond method
or the design thinking framework because that is what the model is in design. So many different
company call it they name it in a different way and based on the, the same process but it can be 4
stage, 5 stage but almost they are doing the same work within that timeframe.

So there can be two process which is based on the Six Sigma concept of designing. So one is
DMAIC so which is mostly targeted to the business process. And another is DMADV which is
for the more relevant for the designers which is the process of designing. So DMAIC the first
process is used for the project aimed to improving an existing business process. So they try to
improve that process of manufacturing process or the business model.

Then the DMAIC process is implemented. But mostly this 5 stage process are quite similar. And
then DMADV model is used for the project aimed to creating a new product or process of
designing.
(Refer Slide Time: 24:23)

53
So first DMAIC model which is used for projects aimed at improving an existing business
processes first define, which is again quite similar to the double diamond methods. Then
measure, then analyze, then improve and then control. So improve and control by this name you
can identify this is going towards the user testing process. So first ideate and testing. So this loop
is there within this.

So if we elaborate this processes we can see this is again quite similar to the model which we
were discussing. So all these generic design models are quite similar to each other but they have
proposed by different designers or engineers or management consultant and then they have slight
different name.
(Refer Slide Time: 25:16)

54
So define is identifying the user need and voice of customer what customer wants which is based
on the user demographics and the identifying the real user and how we want to position the
product. So product positioning which we will discuss in due course of time. So product does not
mean just the tangible product in terms of industrial design. It can also be the website, website is
also a product of intangible media.

So how we position the final product according to our user group, target audience that is the
product positioning. So how we want to see the product. It is basically the need how users will
interact with the product and what will be the performance of the product in this case this is
website. How will the product will interact with the users. So that is how the product is
positioned. And in which segment of the user group will be targeted to be the product.

So this is the defining stage, so identifying the process. And then measuring the key aspects of
the current process, relevant data and study. So what is the exist because this is aimed to improve
the existing business process. So studying the business process, the case studies comes within the
picture. So alternative other cases where this kind of similar process has been taken or existing
process which company is taking and studying that and key aspects of the current process.

And measuring where are the loopholes and where it can be improved which is in the next
process. So they study first and measure what is the exact thing is happening and then they start

55
analyzing the scope of iterations and then they start documenting whether this is the iteration
whether it will improve or it will decrease the value or some other probable options of iterations
whether that is leading to the improvement of the process or not. So that is the stage.

So these are kind of similar to generating multiple ideas. So process, the scope of iterations when
they are thinking. So they are actually divergence of different ideas and different scopes. And
then they start thinking whether this is leading to improvement or not. So this is in the solution
process. And the problem identification is define and measure. So then improve optimization of
current process based on analyzed data and this is kind of narrowing down to a solution.

And then control, control of overall process and deviation from the target outcome. This control
process can be different based on the type of business. But in case of design this controlling tools
are prototyping and testing. So only by that process and the feasibility of implementation. By
that process it can be controlled, the idea can be finalized and it will lead to the target outcome.
(Refer Slide Time: 28:42)

The next model which is quite similar and which is just the domain is different. So which is used
for a project aimed to creating a new product or process of design. So this is more related to the
design process and based on the design domain only because of the domain few of the
terminologies or the names are slightly different. First is define then measure, analyze, design,
and verify.

56
So first defining the user need voice of customer again based on demographics and product
positioning and need statement which is same. And then measuring is product and process
strength, weakness, opportunities and threat or the SWOT analysis. So that you must have
studied this process of analysis which is called strength, weakness, opportunity and threat. So
these are negative points and these are positive points.

And strength and weaknesses are within the product which is the internal qualities and this is
external quality. So opportunity and threat can come within the process. So when we are
implementing the process or designing website so what are the opportunities, the technological
advancement are the opportunities. So whether the idea can be implemented through the
technological advancement or the efficiency of the employee.

Whether they can quote that, whether they can program that, so that is opportunity threat. In
overall process what are the different threats. It can be monetary threats. So these are the process
related or the external broader problems and a positive and negative sides which is opportunity
and threat. And internal is the strength, strength of the product. If we create the product what is
the strength and how it can cater to different target audience.

Whether it can enhance the set of target audience if our existing product only caters to few
people, the new product can it cater to more people? Or maybe in the existing product people are
already, the existing product idea what are available in the market. People are not happy with
that. So if we change or create something new whether more customers can come within that. So
that is strength of the product.

And the weakness is what might be the probable weakness? There can be many technical issues
or for certain reason the product might not create put all the options within that particular website
which might create confusion or which might create more clutter or it might enhance the budget
of the product. So if we cut down that so what can be the probable weakness of the product and
how the product might fail.

57
So it is not the process level failure, it is the product level failure. That is the weakness. So this
SWOT analysis is part of one of the process of measuring the concept. So there can be other
options, other processes. Different other, designers can go for different other ways to measure
this and SWOT analysis is one of the mostly widely applied process. Then analyze.

Analyzing the design alternative or first creating the ideas and analyzing the potential
alternatives and giving their different ideas and also the case studies and market competitor
based on this analysis also happens. So this analysis actually happens first and then the second
process. So first we do multiple different options, cases where other similar products are there.

So we do study that and then we analyze how they are performing well or how they are failing,
why they are failing because of this and based on the market competitor. So few market
competitors will be studied and that is part of a case study and what is their strength and
weakness. And against what analysis can help to understand the study and then based on that the
next stage is the ideas and creating alternative, different ideas where we are again diverging in
the next stage of the diamond which is the finding the right solution.

So now designing or ideate is the process where we are starting prototyping or we are freezing
the design and next level of ideation and we can put the ideas over here and then the verify is
user testing or validating the design ideas or through a pilot run or user testing. So there we are
again converging to a particular idea based on the user testing and negating other and deleting
the other ideas which will not satisfy the user need.

So this is again the similar model based on the Six Sigma process and in the next class we will
start discussing about the detailed process of the design.

58
 User Interface Design
Prof. Saptarshi Kolay
Department of Architecture & Planning Engineering
Indian Institute of Technology, Roorkee

Lecture - 05
Human Factor in Interaction Design

Welcome students to the online NPTEL course, User Interface Design. In the previous two
classes we discussed about the generic design methodology in user interaction domain. So
through the discussion we have seen that iterative model is more preferred over waterfall model.
Waterfall model is the linear model and iterative model where it goes back to user and user give
the feedback and this kind of falls within a loop.

And unless and until the final product or the website or whatever interface is designed which
satisfy the user that does not launch the market. So that is to ensure whether this product should
not fail because lot of money is involved within the market launch of the interface. If we look at
the web application of different mobile phone or the features of the mobile phone or any other
devices which has a interface part attached with that, so that is fixed when the product is
launched.
(Refer Slide Time: 01:36)

It gets updated, the software or other things but still lot of money will be already gone when it
launches the market. So to ensure the failure, to ensure that product will not fail after launching

59
the market, so it is important to adopt the iterative model of design. And we have discussed
many iterative model of design and through Donald Norman’s double diamond method, Six
Sigma design processes and design thinking framework.

So all of these framework has a very important component which is the user’s opinion into the
design. So more and more we are going towards the new process of bottom up approach of
design where we start with understanding the user. So user’s voice, so the voice of customer
becomes very very important. So the component here we will start discussing today will the
importance of human factor into the interface design.

So when we start discussing the design process, we start with user and finding their needs. So
that we also have seen in the previous design process when we started discussing. So human
factor in the interaction design why humans are so important, why understanding them so
important. So if you do not understand the particular target audience or our real customer’s need
the design and everything will be not successful when we start the next process.

So the first process will be understanding the human’s behavior. So few of the things which we
will discuss later when we start testing and during the study but few of the human traits how
they, user interact with the interface, so here I am talking about the only the interface how people
interact with the interface only in this context. So what are their probable psyche of the users?

So that we will start discussing and then we will move on towards the next tools and techniques
of user’s study in the next class onwards. So first few of the myths or how or it can be the how
people behave when they launch when they interact with the interface. So what is the human
factor component which is the most common factors of human behavior when they interact with
the interface.

So the first truth is lesser cognitive load on users’ mind or users’ processing within their psyche.
Will provide a better performance in the design. More we overload users’ mind that more the
decision making processes more question marks comes within the users head. The users will be

60
frustrated and users will not fulfill the web application. Most of the web applications or the
websites provide information and it might relate to some task.

For example if there is e-commerce website so they are trying to order something from the online
portal. Or if it is a train booking or hotel booking website so they are trying to book something or
if it is not performing any other options. For example chat, so they will try to chat with people
and then other different website perform different other job. So there is a task related to the user.
So users have to perform a task.

So based on the information which is given within the website these informations in the websites
are telling the user to perform the task and what kind of task they can perform using this website.
They are users are trying to grasp while looking at the button and then users also have some
process within their mind which is their mental model. So they have already thought about some
kind of probable steps of the task.

So if that matches with the website or web application that will help them to do the task faster.
The faster they perform the task the more successful the website it is. So if they cannot even
perform the task or it takes lot of time to perform the task they will not visit the website if there
are multiple different other options the market competitors are already available, they will go to
them.

So the website will lose its potential customer and the advertisement which is there in the
website will also not fetch them money and potentially it will not be successful. And when users
will perform the task faster when there is a lesser processing or the lesser cognitive load is there.
So they quickly understand what is the task and how they can perform the task. So if something
is hard to use, this is how common users will say.

This is taken from one of the famous book in UI UX design which is Don’t Make Me Think, by
Steve Krug. You should go read that book in your spare time. So the common behavior of a user
is like if there is some task is something some product or it can even be the interface is difficult
to use they will not, users will not just use it.

61
(Refer Slide Time: 07:12)

So this is the product launching caption of first Kodak Camera. This is the first Kodak Camera
for personal use. Before that there was a bigger camera. So this is for people’s personal use.
After industry revolution this boom in the product design. This is one of the outcome for that and
so you can see the international style, the minimal style is there that is different. But the main
thing is how they wanted to portray this product.

So they are writing that, “You press the button, and we do the rest”. So they are trying to
emphasize that the new Kodak Camera the main feature of this is, you just press the button and
rest everything is like a black box. What is happening within the camera you do not need to
know and you get the best result and the best picture comes out. So there is no different process.
There is just one process. You click the button and this is the function is done.

So they are focusing on the ease of use and that attracts the users the most. So if the product is
easy to use, users will be happy. But on the other hand users want more and more features. So
there is a optimum balance you have to perform. So even in the website users wants those
website to fulfill lot of task they want and each and every task should be very quick and lesser
the number of steps for each and every task is convenient for them.

62
So they want multiple options at the one side and users want and then they want this options or
the task to be quickly fulfilled. So there is a balance has to be drawn from the designer’s side. So
the main thing is here when in this point which I am trying to mention is the lesser cognitive load
quicker the process of one particular task better it is. Next, to achieve this most obvious answer
over doubts has to be design.

So there can be multiple, when we create multiple ideas, when we think about multiple solutions
there can be different ways to represent, fulfill the task, different terminologies can be there.
Different type of informations can be there. But when we are segregating we are converging
toward one idea. Then we should look towards selecting those options which is more obvious
than those option which can create a doubt within users mind.

So if they are not sure about how this, if they click on the button what will be the expected
outcome if they are not sure and which the expected outcome does not match with them we will
not be able to perform the task very easily.
(Refer Slide Time: 10:15)

So design should match with the expectation of the users. So always user have a mental model.
So whenever users are exposed to a different product they will create a perception about the
other product which they are using. This can be based on because they have already used similar

63
product or if they are not using the similar products, still based on their previous expectation they
will have a perception of the product in mind.

So which we have discussed in the model of designer’s conceptual model, customer’s mental
model and the system image this triadic relation we have discussed. So based on that they have
always are expectation of how the information will be processed and how it will function. So the
perception is biased by their previous experience. Their experience changes and each and every
that is why different user group will have different biases and their expectation might differ.

So that is why identifying the particular user group is the first task for the designers and then
analyzing what will be their behavior will come in the next process. So this is just a simple
example from the same book, Don’t Make Me Think. So if we just design and based on just
typology of design and the UI component how we write what will be the text on the document
and the visual communication component.

How we are designing the button, based on that it can be obvious or doubtful. So it can either in
this side this is obvious and this side is doubtful or requires more thought. So if we just create
companies HR part of this website so there is a job options. So if we just write job that will be
more obvious and then if we write more redundant words like employment opportunity or we
write the word so that starts creating a little bit confusion.

So user will in the first option they will just see the jobs, they will click and they will see
different job profiles. And then if we write 2, 3 more words then they will start processing and
they will start taking more time and then they will arrive to the decision. And if we write some
obscure words something which is not so obvious and not so directly connected with the
particular terminology then it will be more difficult for the user to interpret.

And then they will be confused and then there will be lot of question marks rather than obvious
decision. So that was the UI component how we what we write in the button. So that comes
within the user interface design and then next when we are designing the button, what kind of

64
color, whether there will be drop shadow or beveled edge. Then comes the visual communication
design component.

So for example if they want a result and the button is like beveled which looks like a button and
they can click it. So that is more obvious. So if you delete the, if it is like a flat we are not
comparing the material design or the flat design versus iOS design. So here there can be a drop
shadow in terms of material design. So if there is a google’s material design which we will
discuss what is the visual style. So visual style also differs.

They can be a drop shadow so that it looks like it can be clicked. So it is not just whether there
will be beveled edge or not. It can even be flat. But if there is a drop shadow or something, some
visual cue that this button can be clicked then also it will be an obvious decision. So it is not a
comparison between iOS and material design, no. So if the button does not give any visual
sensation that it is already clicked or whether it can be clicked because sometimes when there are
multiple buttons you can also see the buttons are designed like this.

So this button if you look at this button is clicked. So because this is joined like that so we
cannot click this button again so we will land on to the same page. And these buttons can be
clicked. So there are different other ways to treat this in terms of visual communication design.
We can treat it in a different way. So if we treat it properly, so if there is a difference between
these two buttons so that becomes obvious solution.

If there is no difference so if we design like this and if we do not know which button is clicked
so everything looks same then it falls under this so whether we click it so they will again click
the button and they will be more confused. And if this button does not even look like a button,
for example it looks like a dropdown or something then they will not even understand.

So if the only solution if they by chance mouse over the button, the mouse only comes on that
then it can be like a hand and then they can understand whether okay we can click it. So
otherwise they will be missing this button. So this also creates lot of confusion. So based on
visual communication or UI UX design component how we were designing. So you always need

65
to think about the, you have to provide them the obviously solution and obviously function so
that their mental model their expectation and the function matches.
(Refer Slide Time: 15:52)

Next is when many of the times we have to provide lot of informations because I was just telling
that their expectation from a particular website the function of a particular website or the product
the expectation will be more. So they will expect the product to function, perform different task.
For example if you see the first initial mobiles were just to make calls. Now the mobile phone
includes watches.

It includes many things which was not envisioned earlier as a performance task of the mobile
phones. Because the user wanted or expected many task to be performed by a small device that is
why this features got added. So they will want lot of tasks to be performed through a single
website but they will want a very clear and small step for each and every task. So the information
what you need to provide will be more and more if you want to cater to different task.

But when we are showing the information the clarity of the information displayed has to be
there. That is the main focus and we will discuss how to achieve clarity and how to do all these
things in terms of visual design and UI UX design when we discuss that particular subject. But
what user want from their perspective is they seek a pattern of information. So when there is a

66
different information is there if there is no link within this information they will be lost within
the information.

If there is a one type of informations are placed in one side, another type of information is
another category and other type of informations are placed in one part of this webpage then they
will understand okay this is the type of information here. This is another type if information and
this another type of information. By looking at different option they can negate what they do not
want and what information they want. So just scattering the information will not work.

So there has to be a pattern within the information. So in better design you can see a particular
type of information will be clubbed in a particular side, another type of information. So there will
be different parts which will give you similar kind of information so that the user can interpret
the information in a better way. So there are many other ways to club so we will discuss just as
principles and other visual cognitive principles to achieve this and how visual design can help,
UI UX design can help in this, we will discuss that.

But the thing is the user want a pattern of information. Otherwise they will be burdened with the
plethora of lot of informations. They will not able to perform the task.
(Refer Slide Time: 18:47)

67
And within this information also they want clarity of navigation. So how do they want to
navigate their eye and how do they want to perform the next task. That is also important or also
this is clubbed with a clutter of information. More the clutter, difficult for them to navigate
within this. So elimination of all redundant informations and steps are very important. So within
that if the one word can solve and one button can solve one stage can solve the task, we should
definitely look for that.

So deletion of data has to be there. So more the data more the eye will be, they will not read the
data. So what is a design for is to look at all the data but they will not. They will just look at few
datas. What they are not looking at they act as a redundant information and that function will not
be fulfilled if they are not even looking at it. So there are processes of understanding where they
are looking at, where users are looking at their theories, also they are testing like eye tracking
process.

So users eye can be tracked. Whether they are looking at a particular site or not. So there are eye
tracker equipments for that. We will show few examples of eye tracker analysis in later classes.
So redundance of information more clutter of information creates difficulty and the stages also if
there are difficult stages they create difficulty. Especially for the first time users. First time users
will not know what is, how it will be performed.

Subsequent visits can give you a better performance but if these two matches, if the first time and
users perform like a subsequent visitors then that is the best solution. So they will know, their
expectation exactly matches with the what they are looking for.
(Refer Slide Time: 20:50)

68
So this is from the same book, Don’t Make Me Think. So this can be compared, so this process
of navigation in UI UX can be compared with the navigation within a space in architecture. So
within that we have around us we have lot of buildings, informations, navigational signages.
Through that we can navigate within a space. So similarly the interface between these human and
computer help the user to navigate within the website.

So they act as a signage and directional signage to where they will go to perform the particular
task. So this has been compared like a store. So they enter a store and then they look for a
particular department and then when a user visit a store so they have some particular product in
their mind. Then they look at the particular department. Then they look for the right aisle
whether they are on the right aisle. They look for a particular product.

If they find it, then yes they go for the cash register, pay and then exit, it is successfully done. Or
if not then they, if they do not find it in the aisle then they go back and then they start again from
still you think you are in the right department then they go to the right department’s aisle or if
they do not think then they again go back to the previous the broad holistic to the store level and
then they start processing it again.

So this is you can compare this process of earlier shopping the traditional method of shopping
right now is there in the e-commerce website. So we go we see what are the different brands are

69
there then different typology of products and then we start going to the next to next level of
interfaces. So if we do not find that we will again go back. So if the design is proper this will be
a straight line and it will be the quickest process.

Interaction design is design logically and the steps are very easy to perform and it puts lesser
cognitive load on the user. It will be like this and otherwise there will be lot of confusion.
(Refer Slide Time: 23:21)

Now within the store there is a helper to help people. But within this interface design there would
not be anybody to help the users. So that is why within this store this is again the example of a
store. They have a probability to ask people. And then they can always crosscheck. But within
this e-commerce website and most of the webpages there will not be anybody to assist them.

So there will be if the design is very complicated and the clarity is not there, the obvious options
are not there and it is not performing the way they are expecting, it is not matching their mental
model then they will be puzzled within the website. So chances of getting puzzled within a
website is much higher and they will not be able to solve their problem because there is nobody
to help them. So this is how it has been designed.

So that is why there is also a search button where this particular terminology or what you are
looking for is there. But search, more they use this search button, so this is not a good website.

70
So if the website performs without the search button it will be a better design. So if all the time
they have to type something on the search button to identify where exactly they are, so that the
website is not performing well.

So I am not talking about the search button of e-commerce website because in e-commerce
website we search the product. So that is a essential part of the search button or the flight search.
So these are the websites, different kind of websites when the search button has to be there and
which the performance of the search button is different and we will also discuss the position of
the search button in that case. So they want the people to search.

Otherwise in terms of other websites for example institute’s profile page, the website of a
particular institute or website of any company, so there people should not go for the search
button to identify whether there is a job profile or search particular domain of this, a particular
hierarchy within this information page. So the webpage should be self-sufficient to help users to
navigate within the page.
(Refer Slide Time: 25:55)

So to identify when we are discussing about the users behavior, their commentaries the important
part is identifying the real user. So this is called the target audience. In the next class we will
start discussing about after identification how we exactly pinpoint who are the user how we find

71
out what is their behavior and how will they perform. But in today’s class we will end with the
discussion of who is the customer. So they are called target audience.

A particular group of user who will be using the product in terms of it can also be interface or
tangible product. So that group of users are called the target audience. So for whom we are
designing the website or designing any interface. So if we give an example it can be very defined
target audience or it can be even for all. So that depends on the company or what kind of website
it is. For example if it is irctc its target audience is huge.

Most of the Indians who travels through train in one particular certain time most of us have
travelled through train and this is the only website, one of the most commonly used website.
There are competitors but irctc target audience is much more if you compare with that of a
Dominos website users. So Dominos target audience will be only the customer who is ordering
pizza via online web application. So that defines the particular user’s behavior.

So Dominos has much more defined set of users. So they have a particular behavior and instead
of irctc they have a vast range of people to cater. So their behavior will change. So they will have
different kind of expectations and there will be more uncertainty into the behavior. But Dominos
has a very particular target audience who will be ordering pizza online. So their set is very
defined.
(Refer Slide Time: 28:09)

72
So that will differ based on the type of company and what we are designing for. Now there can
be a potential target audience. They are not the exact target audience but if we change our
product they can be within our target audience. If I give an example of a car so when this nano
car was developed, so existing target audience of the car user were not exactly the target
audience of the Tata nano car.

Because they were looking for a very low cost car and they wanted to target the two-wheeler
users. But not exactly two-wheeler users because their expectation will also be different. The
performance of two-wheelers are different, if some people might be fascinated about the two-
wheeler driving so this is different. So there was something in between the target audience
between the two-wheeler users and the four-wheeler users. So there it will overlap.

So nano might be somewhere here. So the target audience might not be the again somebody will
be a potential target audience who have never used that particular product. Even for iPad when
apple first launched the iPad it was not even there in the market. So identifying a particular target
audience based on existing product is difficult in that case.

And even in the case of when the product is adding some new features to cater to different type
of users which they are not right now catering to. So identifying them so who can be a potential
target audience might be a different task.

73
(Refer Slide Time: 29:55)

So that is also based on the product positioning, how we are positioning the product. So how the
same kind of product or same kind of websites can be positioned in a different way so that their
target audience also might shift. For example if we take Zomato and Swiggy, right now they
perform in the similar task. But the way Zomato project the company and where Swiggy project
the company they are different.

Because Zomato, the first key features of Zomato is giving the review of the different
restaurants, I am talking about the menu, what are the different chains and customer review, that
is the first and foremost task of Zomato and Zomato is designed like that. And then there is
another part which is added which is you can order food online if it is the possibility is there. But
within Zomato everybody knows that within that there will be lot of restaurant which will not
give you the online order.

So Zomato does not only cater to those who gives online order. So Zomato position themselves
in a different way. So based on that the potential target audience will also change and the
customers expectation from the company will also differ. Because when they are launching in
the Zomato website if they are already acquainted about the Zomato company and their brand
image they will expect some different kind of task to be performed within this website.

74
And then the Swiggy on the other hand their main thing is ordering food online and they will
deliver it. So Swiggy also that is their strong point, to deliver, faster delivery and that is how the
company evolved, to locate the, so their logo is also like this and which gives a kind of a identity
of a location and wherever you are so they will deliver the food. But now Zomato also performs
the same task, Swiggy also performs.

But Swiggy is more defined into only this kind of task which they will just deliver. So that is
how the expectation, there can be similar people when they interact with two different product
their performance, their expectation and their behavior will differ. So that is how the positioning
also changes the target audience behavior and how this product has a image on the people.
(Refer Slide Time: 32:43)

And now let us discuss another model which is given by Noriaki Kano in 1980s which is called
Kano model and which is the interface between the product and the customer and how the
performance of the product and the satisfaction level of the customer varies. Now this model is
there is x and y axis. So in this y axis this is portrayed that not implemented features to fully
implemented features. So more and more features towards product is in this side.

So more and more products are having the same features are on this side. So it can be the early
mobile phones, it can be the new mobile phones. There are lot of features implemented within
that. So this comes in this axis. Now customer’s satisfaction and dissatisfaction is plotted in this

75
direction. So it is 0. So customer has a neutral opinion and then dissatisfied and satisfied. So this
is the performance for a bare minimum performance.

If the product performs okay and neutral so this will go through this line which is at few of the
features, 50% features are implemented and customers are more or less it is not satisfied or not
unsatisfied. Now this is if the product has more features the features over here and this has the
satisfaction rate is over there. So this is called delighters which will be above this line and where
there are less process, less numbers of features implemented and less numbers also is performing
well, so customers are satisfied.

So this line is a delighters line when customers are delighted. Similarly, this line is a basic need
or the when the customers will not be delighted at all. So this line is the bare minimal
performance. Otherwise the product will not even be sold. So features are less and then gradually
when this is going for the more and more features are implemented still customers are not so
satisfied.

So more features will definitely lead towards more satisfaction but still it will be on the same
level because features are not performing better. So performance is not pushing towards the
satisfaction. So features are there but it is pushing toward the satisfaction level but still this is not
crossing to the basic need and over the period of time this delighters fall back and then they
become the basic need.

So more and more typology of more and more features are getting if the features are getting
implemented more then these curves comes down and delighters becomes basic need. So over
the period of time if we see the, take the example of a mobile. So right now we give the earlier
versions of Nokia mobiles. So people will not be satisfied at all. And now we need more options
but each and every options has to perform properly and then will be satisfied.

That is why the delighters are falling back within the need. So the basic needs what that time was
and so there is a need of customer and this is the desire which customers wants but which is not
the basic need. So over the time when the desires are added in the most of the competitive

76
product so this desires again comes to as a need. So right now the need of a mobile phone which
is the basic need of a mobile phone, it will have whatsapp and Facebook and other options which
becomes a basic need and the camera is a basic need right now.

But earlier, in the earlier times it was not. It was a added desire which customer wanted as a
wish. Now that is how the product also has a particular life cycle. So if the product is not
changing and the new features are not getting added and based on the customer’s user’s
requirement the product is not adapting itself with the user’s requirement then the product will
have a life cycle and it will end.

So that is why regular testing and customer feedback, user’s feedback, opinion on the existing
product and benchmarking with the other product what other products are launching within the
market. It can be product can, I am using the term product but in terms of this class it is interface.
So whatever the interfaces web application we are launching that web application has to have a
benchmark with the other existing web application which are performing the same task.

And also it has to update based on the requirement of the customer. So customer requirement
also changes over the time. So that has to be catered to.
(Refer Slide Time: 38:34)

77
So the sale overtime or the more the number of people using the website and this is the time. So
this is the time line. So first it is introduced, few of the people will be used and then there is the
growth rate when the marketing started and there will be more through word of mouth or the few
people will be using they might tell the next set of people, so there is a growth phase. And after
that when there is a no change of the product we are talking about one single product when there
is no change. So it will fall down.

That is why the new generations of mobile phone and new other products and website also
changes its look and different features get introduced within the website. For example Facebook
introduced their timeline and it always they try adding new features within different websites. So
here when it starts to fall down, so designers and management people should envision that.
Should be aware about that when this customer’s expectation and the product’s performance is
not matching.

So the product has to be extended. Or product should change their features and then another
curve will start and then when again it is falling back then it should again shift, add some
features or change iterate or modify the features for a steady growth.
(Refer Slide Time: 40:04)

So based on product life cycle because of this kind of users acceptance of the technology or the
new product or new website this kind of fallback also happens. So first the innovator only it is

78
confined within the innovators or the designers. They only use that and based on the propensity
of the adoption, the early adopted uses the new features of new websites, new web application.
So they are the early majority then the next phase is the late majority who has a little less
adaptability or little less to adopt.

And then the people who are resistant on the new technology or the new website. They start also
adopting the new website when everybody is using. So they start using when this becomes a
norms to use, then they start using that. And then the laggards who adopt the new website or new
features very late. So this is how the percentage of users changes over the time. So it creates a
bell curve so designers and management people can understand where is the product right now
situated.

It can be a very small bell curve based on the features of the product and novelty of the product.
Or it can be a bigger bell curve based on if the product is very novel then it will be a bigger bell
curve. So the next class onwards we will start discussing how to profile the customer and what
are the different tools and techniques to understand what is the need of the users. So right now in
this class we discussed about why users are very important for the business.

And if it is a product, tangible product or even if it is a interface, users play a pivotal role to
determine whether this website or interface will function or not. So from next class onwards we
will start discussing the tools and techniques to understand the user need.

79
 User Interface Design
Prof. Saptarshi Kolay
Department of Architecture & Planning Engineering
Indian Institute of Technology, Roorkee

Lecture - 06
User Research - I

Hello students. Welcome to the online NPTEL course, User Interface Design. In the previous
class we started this, we discussed about the generic design methodology of user centric
approach of interface design. So today we will start with the detailed step-by-step process of the
design. So first we, as we have already discussed, this is a bottom-up approach of design and
waterfall model or the iterative approach of design.

And so we start with the user research and today we will discuss about the user research process
and then we will continue towards the next stages of design.
(Refer Slide Time: 01:02)

So as we have discussed earlier, so here this process of design is a qualitative process. Mostly,
they can be correlation, they can be experimental in few cases if we are correlating 3 different
phenomena or ethnographic survey or similar user group then it can go into correlational
research and then if you are doing some experiments in artificial setup then it can be
experimental. And then simulation, if you are running some simulation.

80
For example eye trackers and other testing devices if you are applying then it can. But mostly the
research process is qualitative research. That we have already discussed in generic design
methodology.
(Refer Slide Time: 01:49)

So let us talk about the qualitative research and what is the process. What are the tools and
techniques and tactics of qualitative research and similarly if you want to correlate few similar
phenomena to qualitative research and then correlation will be the process of correlation. And
experimental and simulation we will be discussing how this research can be experimental in the
later stage when we will discuss few different tools and techniques of eye tracking which can be
one of the process of making an experimental research in user centric approach of interaction
design.
So in qualitative research, qualitative research is a multimode, it has multi-method and focus
involving, the characteristics is interpretation in naturalistic approach of where the subject
matters. So in the natural setup the subject matter will be explored and what they are doing what
the subjects are doing in the natural setup that is the one of the characteristics of the qualitative
research.
Now next is this means the qualitative researchers study things in the natural settings attempting
to make sense or interpret phenomena in terms of the meanings people bring to them. So there
are 2 process. One is the natural setup and the human behavior, human or the user behavior.

81
So this relation of natural setup, within the natural setup how people behave. So that is the main
feature of the qualitative research. Within the natural setting if the subject has been given a task,
how do they perform within a setup that is the approach of qualitative research. So in the
qualitative research there is no, generally people are studied in the real environment. So there is
no artificial environment created or artificial simulation is not being run. So if you run a
simulation on artificial environment, then it might go to the experimental research or simulation
research.
Now qualitative research involves the studied, use of collection of variety of empirical material
and it can also be different, amalgamation of different methods. So different approach to study
the same behavior in the natural setup can be compared and then the designers interpret the user
experience designers interpret why this phenomena or this kind of behavior is happening.
(Refer Slide Time: 04:32)

Now what are the characteristics of the qualitative research? Emphasis on natural setting, that I
was telling in the previous slide. So researchers use research tactics that engage people within the
context being studied. So this is the natural setup and this is the people or the user and this
correlation will be studied, how they behave within the natural setup. While the context itself is
studied in the natural state and why the natural setup is so important because people’s behavior is
not an isolated thing.

82
So it is being guided by the natural setup and the context, in which context they are behaving this
way, that is also very important. If the context or the natural setup changes, their behavior might
change. You can give the same task to perform the users and in the natural setup 1, users might
behave, the behavior might be different in natural setup 2 same user group same task can give
you different behavior.

So that is why the relation between the natural setup and the user is very important and
researchers or designers has to look at why this behavior is happening in correspondence with
the particular given setup. This means the qualitative researchers study things in their natural
settings attempting to make sense of or interpret phenomena in terms of the meaning of people
bringing to them.
(Refer Slide Time: 06:09)

Now this is one of the example has been done by one of the student of M. Arch student of IIT
Roorkee, Irfan Khan. So he have studied the web finding behavior of Mehrauli Archaeological
Park which is a heritage precinct and within the precinct different monuments are there and
scattered in a landscaped area and he have applied different techniques. So multiple strategy or
multiple technique to interpret the human behavior is also very important.

First technique is the questionnaire. So he have prepared this questionnaire and people answered,
users answered this questionnaire. So how do they feel and whether they can navigate within the

83
landscaped precinct, heritage precinct and whether they are getting lost or whether it is well-
designed or the signages are helping them or not.

Next after this task, he have conducted a second task which is he wanted to create, ask users to
create the mind map or the what do they interpret about the, how the map of the surrounding is
getting perceived by the user. So they have drawn, users have drawn these maps in different
format. So these two are the mind maps and the next task was how, so he have asked them to
perform a task from location A to location B how do they go.

So different users have given different directions. So based on these 3 task questionnaire drawing
the mental map and drawing the route or the navigation sequence of the navigation he tried to
interpret whether this area performs properly or not, whether there is any problem in the
navigation or not.
(Refer Slide Time: 08:06)

So after that he came up with one web based application and another mobile application for
giving the information about the heritage precinct and for better navigation of that. So through
this ethnographic survey different tools and techniques of survey which he have conducted
within the natural setup he have come up with the design. So it starts with the user’s behavior in
the natural setup and then how whether they are finding problems and based on that design
solution.

84
(Refer Slide Time: 08:34)

Now another characteristics of this ethnographics of this qualitative research is focus on

interpretation and meaning. So why they are doing, so one is natural setup another is user group
and then what is the salient meaning going behind. So that might not be uttered by the users.
Users sometimes will not tell you why they are performing but that is the researchers and
designers job to interpret what is the intangible meaning going behind.

The researcher should not only ground their work in the empirical realities of the observation and
the interviews, but should also make clear that they play an important role in interpreting and
making sense of what the data is. So what might not be the visible parameters of the, visible
observation but what is the meaning going behind. Why people are performing that layer of
interpretation should also be derived by the users or researchers.

An in-depth engagement with the participants fosters communication and understanding. So the
task what the fact and researchers are doing. So what are the special and intangible meaning that
should also should be interpreted by the researchers.
(Refer Slide Time: 09:55)

85
The another characteristics of the qualitative research is focus on how respondents make sense of
their own circumstances. An essential aspect is to explore each participants interpretation of the
workplace in his or her own terms. For example an in-depth interview or analysis from a
contextual perspective provides insight of real problem. So if you understand, your first stage is
natural setup and the user. So that if the designers and researcher has to correlate that.

Next what is the meaning going behind? So everything might not be tangible, intangible meaning
and next is the finding the real problem that can be identified in the next stage. So for example
this is a red dot award winning design. So they have, designers have designed a button,
redesigned a button for elderly. So it performs the same task. So it is a button of shirt and it
looks, look wise also it is not very drastically different.

So from button it does not go to hook or Velcro. So it is still a button. But minor change is
creating this button so unique and so user friendly. So this button is ergonomically designed and
little tweak in the button so that the grip is better. So it might not be even be a problem for the
other demographic segment of the user group but for elderly grip is a real problem. So their grip
becomes feeble and then that exactly is the problem.

So through the natural set up by seeing how they perform the particular task and what exactly the
problem is, based on that a very minor tweak in the product is creating this design so unique.

86
That is why it got the red dot award. So this is how the final button looks like. So it is not very
drastically different from what the existing solution is but it changes the user experience a lot.
(Refer Slide Time: 12:06)

Now the next characteristics is the usage of multiple tactics. So it might not be just one way of
looking at things. There can be a same task or a different task to understand what is the
phenomena going on, why people are doing it. So multiple strategy to look at the same problem
should be applied by the user. Sometimes user just observe the people to how they are behaving.
So they do not even give them any task. Sometimes the tasks are very well-defined.

So sometimes designers tell them to perform this task. And sometimes designer just observe how
users are behaving. So it can be very well delineated to just scattered and just an observation, just
a photographic documentation or video graphic documentation or it can also be just a discussion
and discussion within the natural setup why you have performed that and why you have done or
it can be a detailed questionnaire.

So there are many tactics depending on what kind of user groups are, depending on the users. So
some users might be very comfortable of doing a particular task. Some users might not be and
what exactly you are trying to design. So based on the design need also it will differ. So it is very
difficult to tell which tactics will work better and which tactics will not work. So it has to be a
designers decision to understand whether this task has to be very well defined or it will be just an

87
observation. Or it can be a combination, always combination works better because from different
typology of task different insights come out.
So it is a bricolage, a piece, different pieces together, close-knit set practices that provide
solution to a problem in a concrete situation. So this has been told by user researchers.
Sometimes constructed or created from a diverse range of things. The idea of bricolage is
implicitly suggested that qualitative researcher will employ a range of tactics.

Range of tactics, not just one that are both particular to the context being studied and of course
appropriate to the research questions being asked. So one thing has to be kept in mind which is
contextually you can create different, you can employ different tactics but all this tactics has to
be contextually relevant. If you create just to increase the number of tactics few tactics which is
not even contextually relevant and not even corresponding to the particular user group it might
not help you to get any insight. So every tactics has to be contextually relevant. Why you are
doing this, taking this tactics to interpret the behavior that has to be kept in mind and then
multiple tactics will definitely help you.
(Refer Slide Time: 15:15)

So an example of multi-tactic qualitative research may be seen in Karen Keddy’s study of

experience of hospital surgical unit from the perspective of nursing staff. This is an example of
how multiple different strategies can help. Rather than focusing on how nursing staff’s
productivity might be increased through design interventions, Keddy sought to provide a more

88
holistic understanding of physical nature of nursing work and the physical environment from the
nurse’s perspective.
(Refer Slide Time: 15:52)

He wanted to understand the behavior along with the social the context of the special context. So
wide variety of tactics has been employed. So these are few tactics Keddy has employed. Keddy
took the help of these different tactics. So one is structured in-depth interviews which is
questionnaire and interviewing the nurses based on a very structured questionnaire based
interview. One is location mapping. Mapping the location and it can be through trail mapping.

So you just observe where people are going, what task they are performing in different location.
If this is the map of a hospital then where nurses are situated and what task they are performing
and how this space is behaving in different area and how they are interacting within the different
spaces. So that can be location mapping. Then photo documentation, just clicking photographs,
observing how they are interacting with a particular space.

And it can be photo documentation, it can be also video documentation. Then architectural
inventories. What are the architectural features are there and what are the products and what are
the features and how these features are interacting with the user group. Place-centered behavioral
mapping. So each and every different place, in different place how people’s behaviors are
changing. Then focused observation.

89
Particular place has been selected where the focus is required which is critical for the design. The
decision has to come from the designers and a focused that area and how people are interacting
with the particular space. That is a focused observation of a particular area is one. And this is an
interesting tactic what he have included, an image-based visual exercise called an experimental
collage.

This is quite unique for this particular task where he try to interpret how nurse’s behave in the
hospital. So this is unique in terms of this particular task. It can be some other kind of task which
is unique to interpret that particular task and it has to be decision from the designers or the user
researcher. And what unique tactic will lead you to the interpretation of a particular behavior of
the phenomena which is happening in the natural settings. So this is how it looks like.
(Refer Slide Time: 18:39)

So he have asked the nurses to create a collage based on their psychology within the hospital. So
that gives a meaning making. So the first tangible things what he is observing that he can just
observe how they are behaving. But this intangible part why people are behaving like that. What
is the psyche of the nurses and that to understand that because meaning is one of the intangible
part which has to be understood by the researcher that is the tracks of the qualitative research and
designer has to interpret that otherwise the design should not have the empathy to lead you to the
next level of design.

90
So asking them to make this collage helps him to interpret the psychology and he interprets the
meaning of the intangible meaning why people are behaving, the nurses are behaving like that in
this particular way. So these are few collages created by the nurses.

So this set of data collection of tactics focuses not so much on the quantitative data but it is the
qualitative and the second layer of data which helps him to interpret what to give a better insight
on this particular task.
(Refer Slide Time: 20:00)

So next we will discuss about the strategies of qualitative approaches. One strategy is
ethnography, another strategy is the phenomenology, another is grounded theory which we are
not discussing. If you are interested you can read more about the grounded theory, ethnography
and phenomenology. The first strategy is ethnography. Ethnography, phenomenology these are
quite similar. There are slight differences. But they all fall under the qualitative research
technique.
Ethnographic research emphasizes in in-depth engagement with the site specific settings most
especially through the active and thorough observation. So ethno means people, graphy means
study. So people study within a particular national setup is what ethnography is. Instead of taking
people’s answer for granted you observe and try to interpret why people are doing and what they
are doing.

91
So many of the cases people will answer something but what they are performing from that there
can be the answer might not be the true answer all the time because they have a psychological
background. They might try to defend something what they are performing. So that has to be
understood by the researchers. So what they are saying might not be the right thing. So that is
why observing the people’s behavior in a natural setup and interpreting the meaning why they
are doing that. That is a very important part of the user study.

The characteristics, context-rich detail. So all the time what is the context of this behavior. What
is the context of answering this question has to be documented. Just the answer, just the behavior
will not make sense. For example while Ked was studying the nurses behavior he was studying
according to the particular space in particular space why they are behaving. And also he wanted
to infer what is the psyche and then from there why they are behaving in that way based on their
psychological mind setup.
Now that is why this context is very important. Then reliance on unstructured data. All the time
this data might not be structured. Sometimes researcher has to let users talk and which might not
be within the questionnaire. So it might deviate from the questionnaire and sometimes users
might need to add some point. Researcher has to listen to that.

So it should not be always whatever the questions are just it will be multiple choice. It should not
be, so there has to be a elaborative answer based questions and where user can express their free
view. And sometimes it might not be even within the questionnaire which users want to say and
always designers and researcher has to ask why they are doing it. So one question, question
should not be yes or no question.

So if they are performing something, so designer should ask them why? Why you have done
this? So based on this why questions if you ask why then lot of answers users will tell and which
will be very important for the next stage design. Focus on single case or small number of cases.
It is not a statistical research, qualitative research is different from quantitative research. In
quantitative research large number of data set is very important.

92
If somebody is researching on the rainfall data or something related to people’s economy or
economy of a particular people and how many people are employed are unemployed then a large
number of data set is required to get the number. Because here in qualitative research we are not
dealing with the number, we are dealing with people’s behavior. So in that 15 number of users
study is a good number.

So you can study different research paper in qualitative research how many number of how many
set of users they are taking. What is the best data set? But here the data set is not very high. The
most important part is the in-depth research in each and every subject. So subject number can be
maximum 15 or plus minus 5. So not less than 10 for a better understanding from each and every
segment of the user.

And if the user segment differs then again it should be 15 for each and every segment. So 15 is a
general thumb rule and common decided number. So if you study 15 people in in-depth manner
and interpret their behavior that will be good enough. Because everybody’s behavior will not
differ if they are in a particular demographic setup, they in a particular similar type of user
group. Their behavior with a particular user interface will not differ.

So it will differ if the segment group changes. So if you study a teenage just behavior to book a
flight and elderly people’s 60 years old behavior while booking a flight, that will differ. But 15
teenager’s behavior towards while they are booking a flight will not have much difference if they
are from a same place. So it might even differ if they are from different country or different
language is an issue.

But if demographically they are falling under the same segment their behavior will not differ. So
within rather than going broad into large number of data set in-depth study for only 15 user cases
can be good enough if the study is detailed. Data analysis that emphasizes the interpretation of
the meaning and function of the human action is the important part.
(Refer Slide Time: 26:31)

93
Now ethnographic research emphasizes in in-depth engagement with site specific setting most
especially through active and thorough observation. So this is an important part, thorough and
active observation, not the number of user group and site specific correlation with the user or the
contextual correlation. So site does not mean only the special site.

It will be the correlation with the interaction between the product in terms of user interface how
they are interacting with the digital interface or if there is a product with a digital interface how
they are handling the product with the digital interface that has to be studied and correlating the
context with the environment. The researcher is likely to employ participants observation. The
term is frequently used to refer to a situation in which the researchers play a naturally occurring
established role in the situation under the study.

For instance the researcher’s identity might be known by few or many or revealed in more or less
in the detail. So a researcher might tell them I am the researcher and I would like to ask you few
questions for a detailed guided technique and sometimes he might not. He might just observe the
people and document silently from a distance to get a unbiased feeling of how people behave.

Sometimes if you introduce yourself to the users then their behavior might be biased because
they will feel that they are getting observed and sometimes it is required, sometime it is not. And
few cases there are this usability testing lab where there is one-sided mirror. So the user’s

94
perform the task interact with the digital interface in a one room and then designers and
researchers sit in the other room where there is a one-sided mirror.

So designers can see how people are performing interacting with the interface but the subjects or
the users will not get to know whether people are observing them. So it is like if this is the room
and if this is the one-sided mirror and this is the other room where designer sit and this is where
the users go and then through this one-sided mirror designer can see the users but user cannot
see. They will perceive there is just a mirror but this is a glass for the user.

So this also changes based on the darkness. If this is dark and this is illuminated, they will see
the reflection. So in this process the designers can observe the users and users behavior will be
unbiased. So this is one of the ethnographic surveys example which has been done by me with
one of my colleague.
(Refer Slide Time: 29:44)

So we wanted to study what is what people in this Indian demographics based on their age,
profession, location of user set, economic status, and gender what people want to see in the, what
type of TV serials or movies people like. So it has been ranked and then data has been displayed
like that. So based on age, gender, profession cricket, politics, religion, domestic relation and
Bollywood. So these are few topics has been correlated and then it has been mapped.

95
Based on that the Bollywood has been selected as app development process, the feature of app
development because many of the people were quite correlating themselves with the Bollywood.
And then a game has been designed for Samsung smart TV application. The task was to design a
TV application which can be game, which can be informative entertainment anything.

But based on this survey that what people watch and how they interact with the TV when they
are sitting in front of the TV what do they need to watch and then there was some other
situations in what time of the day they are watching. So based on that this has been selected and
this has been designed. So this is published in this paper.
(Refer Slide Time: 31:14)

So another process of strategy of qualitative approach is phenomenology. This is slightly

different from ethnography. As described by John Creswell is that the researchers aim to clarify
the essential and underlying meaning of the experience where experience contains both the
outward appearance and inward consciousness based on the memory, image and meaning. In
ethnography the emphasis is what people are doing in terms of natural setup.

That was the main emphasis of ethnography what we are observing people to do and it can be
silent observation from far in the natural setup or they can come to the lab and interact with the
interface because we are discussing about the user interface. They can interact with the user

96
interface where designer slightly watch from the other side of the room where there is a one way
mirror.

Or it can be very structured where designers come in front of the users and they ask them to
perform some structured task. It can be flight booking, it can be interacting with an app. It can be
any other thing. Or a structured questionnaire when they ask very structured question and also
listen to the users if they want to add something. But in phenomenology what happens is the
mostly the emphasis is in the meaning making, the interpretation of a phenomena.

So phenomena is observed and then the meaning why this is happening. So that becomes a
phenomenological research. Example when we were talking about the nurses example when the
nurses are behaving in a particular space how they are behaving that will be more closer to the
ethnographic research and while the researcher is trying to interpret the psychology of the nurse
through this collage and other techniques that might be towards more a phenomenological
research when he is trying to observe the phenomena and trying to interpret the meaning of the
phenomena.

So phenomenological research is not it has a lot of emphasis on the meaning of part of it. So it is
the next layer is much more important. Not just the observation and the truth what is happening.
So this is an example of app development which we have done.

So the task was to design educational app for the school children and many of the task has been
given to them, many of the observations were like they wanted to draw. So they like drawing
something. So this haptic sensation was quite important. And many of the subjects like language,
science, or history and geography, social sciences, so these has been correlated where people are
weak.

So many different tactics were there and what they like, like sketching, drawing and how do they
like their education system. What typology of education will be more interesting. So based on all
these different surveys a app has been designed. So this is the final app where the subject is

97
selected as the geography was selected because of the observation of that particular school which
has been studied. And then different ways of learning geography was designed.

So one is like a puzzle game because gamification has been done because they wanted, children
were more inclined towards gamified version and games rather than formal classroom study. So
these meanings has been deciphered through different types of tasks. So task like they were even
asked to draw something and then different typology of task were there. So it was not a direct
yes, no answer through that this decision has been taken.

In the previous example where the Bollywood has been selected, so that was a very structured
yes, no answer and observing the people. But here because we were dealing with children, so
they did not give a very direct answer. So psychology and interpretation of their action was more
important so this becomes more of a phenomenological research but both ethnography and
phenomenology is quite similar. So lot of tactics superimpose with each other.

So it is not a very different approach. So how you look at the things just based on that this
differs. So if you look at the final design as well so they have this provision of coloring tools. So
one process of sorting this puzzle and putting this puzzles within that and another was the
coloring tool so they draw this areas of rice growing area and other things and then they just
paint this through different color. So this color buckets are like legends, Rice has a particular
color, wheat has particular color, cotton has particular color. So they just fill this and which gives
the experience of game.

And there were lot of other interfaces like videos. So there were video lectures where interactive
sessions are there. And then the rainfall and other things were shown as a video. So those adds
the gamified learning experience. So this decision has been taken based on the child psychology
and what type of education they want to, what typology of learning experience will they prefer.

In the next class we will discuss of based on this data collection, strategies what are the other
tools and techniques and how to represent these collected data and reduce the data and perceive

98
the data and try to interpret the meaning in a different way and towards more the final design
decisions. That will be discussed in the next class.

99
 User Interface Design
Prof. Saptarshi Kolay
Department of Architecture & Planning Engineering
Indian Institute of Technology, Roorkee

Lecture - 07
User Research - II

Welcome students to the online NPTEL course, User Interface Design. In the previous class we
started discussing about the process of user research and in today’s class we will continue to the
process of user research through qualitative approach and the tools and techniques and from
there the collected data through the user research through the process of ethnographic survey and
phenomenological documentation.

So the collected data how to process the data and how we lead towards the next level of design.
So design decisions and finding the need statement what has to be done and interpreting where
the problem lies and how the interface design or it can be web application, mobile application
how it can help the user. So that process the decision making will be the next stage.

So within that this discussion is how to process the data to prepare for the design decisions or the
brainstorming or the design ideations. So here we will discuss the remaining part of the data
collection and data synthesis.
(Refer Slide Time: 01:41)

100
So we were talking about the design research in qualitative domain.
(Refer Slide Time: 01:45)

And in the qualitative research we have discussed the characteristics of the qualitative research
and the strategies of the qualitative research. Within the strategies we have discussed
ethnography and phenomenology, that is the process of collecting data where users are
interpreters within the natural setup, that is the ethnographic approach and user in natural setups
and what is the meaning going behind this setup. So that is how the phenomenological approach
is there.
(Refer Slide Time: 02:17)

101
Now the process and tactics of the collected data, how do we process the data? So the data has
been collected by this approach of ethnographic research as well as the phenomenological
research and based on that how do we process this huge amount of data. So data can be
unstructured research documentation where they can be photographing and videographic
documentation or noting down how people are behaving.

Or can be very structured observation questionnaire through that. We have lot of data. Now we
have to process the data to start the designing decision making or the ideation. So in the process,
in the book, Qualitative Data Analysis, Miles and Huberman have described the interactive
relationship between the data collection, data reduction, data display and the conclusion drawing.
So this 4 stages are the process of data synthesis.

So Miles and Huberman’s in the qualitative research process the researchers moves among this 4
stages or 4 nodes during the information gathering, data collection and then shuttles among the
reduction, display and then conclusion drawing or verifying for the remaining of the study. So
first is the data collection and data gathering. Then the reduction or display and then the
conclusion process.

So reduction and display here are two stages, reduction and then display and the fourth stage is
the conclusion. But again from the conclusion there might be some, they can go back to the data
reduction even if the conclusion is not concrete enough. So there might be a few datas might be
eliminated again and this is a nonlinear process but these are the 4 nodes, one is data collection
and then data reduction, then data display and then conclusion and which can also go back and
forth.
(Refer Slide Time: 04:25)

102
So the process of data collection which we have, the main process of data collection was through
the tactics, through the previous strategies we have discussed ethnography and phenomenology.
Those are the process of data collection and then 4 basic types of information that are identified
as interviews, observation, documentations, audio visual information. Audio visual information
is photography and videographic documentation.

Documentation in other ways like questionnaires and other things and other way of documenting
the artifacts, documenting what the context is so all these parts come in the documentation.
Observation is just while observing in a very structured task or unstructured task and interviews
or questionnaires and it can also be a focus group discussion selecting few people and then they
discuss within that or just want one interaction interviews.

As discussed before, Keddy’s study of nurses experimental understanding of a surgery unit

employed multiple tactics including in-depth interviews, behavioral mapping and observation. So
these are the few ways of data collection and data collection has been discussed before when we
were discussing ethnography and phenomenology. So that part is again repeated over here.

And data collection when we were doing the data collection, it is always better to map those data
in a particular excel file or in any format to structure it up for the next process of data reduction
and data display. So this is also a process of data display but not exactly. But data display can

103
have few more refinement but while collecting the data it can be jotted down in a particular
systematic manner.

So here it can be just an example, so it can be structured in different columns like tactics. One
tactics is interactive tactics and non-interactive tactics. So within that he have observations,
documentation of artifacts in the cases of nurse and archival of documentation within that
interactive methods non-interactive methods. Interactive means when designers interact with the
users and then they let the users know their presence that they are observing them.

And it can be questionnaire, focus group discussion with the presence of the users and the
researchers and it can also be like when researchers or designers are asking the users to perform
a particular task in that context. So that is a interactive method of tactics. And then non-
interactive method of tactics will be well when designers does not let users know their presence.
So it can be silent observation following them or just trailing, tracking the users.

So it can be a trail mapping or just documenting what users are performing in the unbiased
undisturbed way. It can also be within the one way mirror. One side of the task is performed and
another side designers are silently observing how people interact with the interface given to
them. So these are some non-interactive ways of data collection.
(Refer Slide Time: 07:55)

104
Now the next process is the data reduction. It can go back and forth but this comes after data
collection. The idea that transcript of in-depth interviews or visual documentation of artefacts
must be reduced to data which may be seen which might be a worst amount of data which has to
be reduced and to be ready for the next level of data display. So this reduction of data is required
because many of the data will be redundant.

For example few of the task which designers ask user to perform might not be relevant for the
particular cases. So those datas are redundant data and those datas that does not provide any
insight. Few of the cases, many of the times users might tell some very important point and
sometimes they might talk about some irrelevant issues which might not be directly related to the
decision making or ideation of the design.

So that decision has to be taken by the designers and the researchers. So redundant data has to be
reduced and the datas which provide some insight in the particular context of designing the
problem solving of a particular scope of work that datas has to be there. Otherwise there will be
lot of data in qualitative research. So however for the research to eventually yield conclusion or
the theory at least some categorization or examined phenomena must be identified or screened
out of the rest of the environment being studied.

So there has to be a conclusion and some pattern has to be identified within the data. So it should
be categorized and after the reduction and reduction and coding. So the data also has to be
categorized. So similar kind of data where people are saying, doing a particular task and the
activities are similar so that typology can be one categorization. And categorization can happen
in a different manner. So it can be categorization based on the typology of data.

It can be categorization of the task performed. Whether how many people have performed the
task successfully. How many could not perform the task which has been given to them. So based
on that, based on many factors the data can be categorized. But categorization of data has to be
done to yield a conclusion. Otherwise scattered data does not help designers to provide any
conclusive insight.

105
To move from messy data to theoretical interpretation O’Leary six step has shown in a figure. So
O’Leary have told that six different steps to reduce the data and the first three is drilling in
whereas the later three is abstracting out. So first it converge and then diverge in the data. So first
raw data has larger amount of data. Then organized data. So when we clusterize data based on
the similar pattern and many of the redundant data sometimes overlap.

And they can be clubbed into one and few of the data which are redundant can be omitted. Then
it will be reduced to concised data when we have organized few data might be deleted and
clubbing of different sectors is this and then reducing it. Then interconnected datas can be again
expanded and then we can see the thematic data which forms a different theme and theoretically
meaningful understanding will be the next stage. So this is going as a abstraction.

So while we are interpreting this data so we start with a particular case and within that what we
have observed that is the raw data and within that we categorize this raw data and then reduce the
data. The next stage is generalization. So first we start observing in a particular user group, only
maybe 10 or 15 people’s behavior, how they have behaved and why they have done. Now from
there when we start interpreting we do not interpret for this only 15 people.

We interpret for the set which is getting represented by this 15 people. So we are abstracting out.
So this is more generalized data. So we started with only 10 people and how they interact in a
particular situation of a particular context. When we are interpreting the data so we are
extrapolating the data for all which will come within the same segment.

For example if we are designing some mobile application for particular segment of maybe of a
particular region of India, for a particular user group of 10 – 12 for the education purpose. We do
the study with 10, 15 students. But when we interpret the data we interpret for that particular
segment of the user group which is much more, the number is much more. So interconnected
data is a one layer of abstraction.

Then thematically we interpret the data and then theoretically meaningful understanding. When
the understanding comes, this understanding is for all not for the 10 people. So it is the segment

106
of the full user group, how they will perform. Sometimes we might even extrapolate the data
which task has not been performed but how they will perform the task that can be also
understood.

Because when we are designing something new that they have not interacted with a particular
design. For example we can give them for data collection a particular website. For example if I
take an example of how people book railway tickets, rail tickets. So we can give them irctc’s
website and how they are interacting with irctc website. But when we are extrapolating and
taking the meaningful insight, so we have to understand how they will interpret with some design
which we are going to give them later.

So option 1, option 2, option 3. In these cases how will they behave. Those designs does not even
exist right now but that extrapolation should happen in terms of the design and that extrapolation
should happen in terms of the number of users. So here maybe we have studied with 15 people
but all the rest of the user how will they interact with all these designs, that has to be
conceptualized. And then we can design.

So when the next design if the task is to we design the website or we design the irctc website. So
we cannot do the same website. So the new website when we are designing new design we need
to have, the designer need to have the perception how this new design will perform. So to
interpret that perception we need to go broad again to understand if we give them a new typology
of design what will be the provision of, what can be the probable interaction between this new
design with the user.

There is definitely ways of testing how it will perform. So that is the next stage, user testing. So
that has to be done. But designers cannot create random design for the user testing. Then it will
not lead to any insight. So designer should have a preconceived idea. After this ethnographic
study they should have an idea how the design will behave. That is why they can create multiple
design options.

107
But those option should be meaningful and they should be convinced enough that the designs are
better than the existing one. So that understanding will come while abstracting getting the
meaningful idea of abstracting out the final datas. So it should go in a generalized way. So
designer should know what kind of design will work better and what kind of design will not
work for the users.

That level of abstraction should come from this data reduction and then abstracting out or the
coding.
(Refer Slide Time: 17:07)

The next process is the data display and always this goes back and forth. Data display can
happen after data reduction and after abstraction again the data display can happen. So in the
data display there are different tactics of data display. We will discuss that. So it can be bubbles
and then correlation of different categorization. So after the raw data which has been categorized
the data can be correlated and shown as bubbles.

And then the correlation between the bubbles can be shown as a process of data display. There
can be different columns and data clustered columns can also be displayed. So there can be
different visualization technique of data display. So qualitative research strategy include complex
textual and visual displays that aims to convey the multifaceted nature of the analysis and
conclusions.

108
There are different multiple tactics and how this tactics are giving different datas and
categorization should happen based on that and then data display is very important from where
the designers and researcher should find out the correlation between these datas. So the pattern
should be identified based on the displayed data. So it is very important for the designers and
researchers to identify the simile between these patterns how people are behaving in this way.

If they do not identify the pattern they will not come to a meaningful ideation or the
generalization. So if they see the pattern between how people are behaving in that way then they
will take a decision so this kind of design works better and this kind of design does not work
better. So that kind of understanding if it does not come then ideation or first stage of design will
not be meaningful.

So for example in Donna Wheatley’s investigation, one of the researchers in special qualities of
workplace from the perspective of different stakeholder group. So she was trying to interpret the
special quality of a office workspace and what are the different important parameters of the
workspace. So this was a data display process she have taken. So this is from her cases. So case 1
and case 2. So from there she is taking an insight.

So we will discuss the process of data display after reading what is the insight she is getting. The
network diagram of case 1 reveals that the experience of the social dimensions of virtually
nonexistence in case of workplace compared to the aesthetic and physical appearance. Aesthetic
and physical appearance is more important than the social dimension in case of the workplace.
That is one insight she is drawing from case 1 data display.

Now in the contrast of the user experience in case 2, is represented by this process which
encourages the interaction within the balance constellation of aesthetics and physical attribute.
So here in the case 2, it is talking about the interaction is also important which is the social
dimension as well as the aesthetic and physical attributes are important. This might be a
correlational research between two study of different kind of work environment and different
kind of user group.

109
So one user group is saying in case 1 social dimension it is negligible and others like bright and
airy environment, minimalist style, impressive, open to access, these are the larger bubbles and
many people have talked about that. So this has been represented in larger circles based on the
importance. Maybe they have ranked it higher. Many people have said that and maybe few of the
users have only said social. And that is case 1.

So in the case 2 what she is saying is encouraging the interaction that is the social part of it is
becoming a very important part and then textured and natural color warm and inviting
environment. So these are also different other bubbles. So this is quite equally important in these
cases, in case 2. But in case 1 this is not. So based on the demographic segmentation and
different behavior and different kind of work it might differ.

So in the workplace 1 so this is how she is trying to draw the insight. In case 1 if you want to
create some design case 1 people do not want the social interaction much while they are looking
for the aesthetic dimension more. In case 2 their social interaction is quite as important as the
aesthetic physical attributes. So that helps for the next decision making while designing this
office space what should be the important parameter in case 1.

In case 1 social interaction is not required. So space will be designed in that style. It should be
aesthetic and physical. Comfort should be emphasized much more. So this gives the design
decision making. It helps designers to start the design decision making and to understand what
kind of design will work better. In case 2, the same design will not work better based on the
user’s perception because the users group was different and typology of work was different.

In case 2 they want more interactive work environment. So the design decision should be based
on the data synthesis, data display, and the insights. So this kind of data display helps to interpret
the design decisions before they start the design ideation.
(Refer Slide Time: 23:16)

110
Now drawing conclusion and verifying. So this also is a derivative of data display. When we
display the data in a proper meaningful way and data display can be the strategy of data display
should differ based on different projects. So it should be a function of the what we are trying to
do. So it should be dependent on that. So a similar kind of data display might not work in
different projects.

So it should be dependent on the project what we are trying to infer from the data. Based on that
data display has to be done. So after that we have discussed the example of the conclusion in the
previous example after the data display. But in the conclusion and the verifying why we have
studied this and what this large number of data means. So once the data has been coded or
reduced and displayed the researcher gradually moves towards the clarifying pattern.

Researcher starts seeing the coherent pattern and try to interpret what users need and that pattern
identification leads to the next stage of design decision making. Providing explanation why this
has been done and evaluating these findings are the next stage of, is the process of conclusion
driving the conclusion. So this is, we keep the world consistent and predictable by organizing it
and interpreting it.

This is one of the quotation from our researcher and the first three of these are essentially drilling
in and then abstracting out. So which has been discussed earlier in this process of O’Leary’s six

111
step of design. So this first three stages are data display and data reduction and the next three
stages are actually conclusion. So when we are abstracting out, we are trying to see the pattern
and we are generalizing for the larger target audience.

And we are expecting how different design if we put the different design within the same system
of natural setup and with the same psyche of people how will they interact with the different
design. So if we try to see the pattern of these while we are abstracting out then we can make the
design decisions in a much better way. So the critical question is whether the meaning you find
is qualitative data are valid, repeatable and right that has been told by a researcher.

So here how we display that, this is one of the example. Data quality looking at the pattern and
testing and explanation and the testing with the feedback. So here we can again go to the users so
more we contact with the users better it is for the user centric approach of design. While we see
the pattern, after that we can again go back to the users to validate whether for the testing of the
explanation whether this pattern what we are seeing can that be explained by the users again.

So what we are seeing the pattern, what designers are reading the pattern as a pattern as a
meaningful coherence between the displayed data that can be again validated by the users if
required and it can be tested and user can give the feedback yes we have done this. They can say
that yes, we have done this because of this. Or verified again what we have seen the pattern.
Because based on the pattern the next design decision making will happen.

So if the project is short then after seeing the pattern, designers can directly go to the design
decision making and few of the design decisions can be shown to the users. That can also be one
process. And in other process if the project is elaborated and the project involves a lot of money,
investment and the final product is very expensive then the validation should happen in each and
every stages. So after seeing the pattern it can even be validated by the user for testing and the
verification of the pattern.
(Refer Slide Time: 27:50)

112
Now few of the process of data collection, data reduction, and coding the data and processing the
data in user interface design. So these are few of the tools which has been used very frequently in
different companies of user experienced design companies and IT and UI UX companies. But
these are not the only tool. There can be different tools. You can ask them to create a collage.

Designers and researchers should be creative enough to invent their own process of data
collection, data reduction, and data coding and abstracting out. So few of the process I am
discussing here. One is card sorting. So card sorting is a process of giving the users different card
and ask them to sort that. So these cards will be designed based on the probable behavior what
they might like and based on the scope of the domain.

So this is one example where the students of M. Arch students of IIT, Roorkee they wanted to
interpret the behavior within a cafe. So what can be probable activity the users want to do within
a cafe apart from just eating. So there can be dancing, there can be a meeting, there can be cards
for discussion, there can be playing cards, there can be just two people can have coffee or there
can be 4 people, there can be 6 people’s group.

And different things were activities and different setup of the furniture setups this has been given
to the users who are there in the coffee shop and then they have selected, picked those card based
on their intention and their what do they want to do within the cafe. So this is a one example of

113
card sorting and card sorting can be done in other projects like if somebody wants to order,
somebody wants to order something through online so what can be the probable products which
they want to order.

What can be the probable mood, what can be the probable time, do they order different things,
what is the price range. Based on many things the card sorting can be done. So this helps user to
understand the mental model of the users by designers. So designers should understand the
mental model of what is going inside the psyche of the user. So this is one of the tactics to
interpret that. To understand the mental model of the user.

So this helps, after understanding this, this helps to create the task flow. What task should be
performed by this web application if you are designing a web application. So web application
should perform what task? So based on their preference what kind of activity they want to do
within a cafe? If there is a cafe app you want to design so that should help in the decision making
of the application which will help if there is a cafe app.

So what kind of task it should perform, the app should perform to enhance the user experience
within the cafe. And to create the information architecture. So how this information within the
task has to be designed. So we will discuss the information and architecture and task flow in due
course. Now there can be two ways, one is user can add and create the card. This cards has been
created by the designers.

But in case if it is you want to do it more unstructured way then the users can even draw the
activities what do they want to do, what kind of task they want the design to perform so that they
can just draw and within the card and then add the card and sometimes it can be a set given by
the designers when designers are very particular about these are the kind of activity we want to
cater to, rest should not be included. So this is the decision making totally dependent on the
designers.
(Refer Slide Time: 32:30)

114
Next, the data display after card sorting. There is one process called creating affinity diagram or
affinity map or affinity diagram where we see the categorization happens within the data. So this
is a tool to create group of similar information from a large amount of data and which helps to
interpret user’s task flow and information architecture which will lead to the next stage which is
task flow and then information architecture.

So it is nothing but sorted cards can be now clubbed into different groups. So what are the task
they want this application to perform they can select or this product should perform they can
select and when they have selected the cards designers can club them based on the need or scope
of the work. So different columns will be created and then codifying and clubbing and
categorization of information is what the affinity diagram is.

So these are the cards which has a affinity. So when the cards are selected within a particular
group and then there will be a group name. So this will be given by the designers. So these are
the other cards which has a similar kind of aspects; so based on the parameter of selection
criteria. So it can be selected based on the type of activities. So one type can be while sitting and
doing something, one type can be while roaming around.

So the typology of the parameter can be decided by the user based on the requirement of the
design. And then these cards will be again named what these typology or this category is under

115
which heading. So this is what affinity diagram is, which helps designers to create the task, what
are the task this application should perform. Now after interpreting these and when we were
seeing, while doing the ethnographic survey and phenomenology we will try to understand what
is the type of user we are catering to.

Based on that we create a persona so which will be our representative of the all the users which
the application or website or any product will cater to. Because when we design a product or user
interface this will not be restricted to the users whom we have studied. So we may study only 10
people but the final product can be launched and it might cater to much larger target audience.

So this much larger target audience should have while we are testing the data, while we are doing
the ethnographic survey we should have representatives. It can be 15, it can be plus minus that
number you have to decide. So those people are the representative people from this larger target
audience. So interview the people, we do the ethnographic survey and we do the
phenomenological research based on that.

And while talking to them we also create a mental model of this who the users are. After
interviewing that then we create our representative persona or one persona for all the
representative, one of all the typology of the group. We can cater to 4, 5 persona and based on
the users to whom this application will be available.
(Refer Slide Time: 36:24)

116
For example if we are designing a hotel booking application. So hotel can be booked by a
corporate. So I am just giving example. So one type of persona will be corporate sector. Hotel
can be booked by the people who are just travelling. So the traveller will be another typology of
the persona. Hotel can be booked by some other like the people who are inviting, people not for
myself but for someone like a guest. So there can be different kind of persona.

There can be many more based on the web application. So these are the persona. So it should not
be just one persona for this hotel booking site. It can be the different typology of the user group.
So one can be corporate, one can be the people who are booking for the other person who is
guest and another can be the traveller himself. So there can be many more. So these each and
every typology is one persona.

Within that we have already interviewed 15 people in the corporate sector, 15 people the
traveler, 15 people who are booking for somebody else. So those are the real people whom we
have interviewed. But persona is just one for each and every segment. So for corporate one
persona, for travelers one persona, and then who is booking for guest is another persona. So what
is persona?

Persona is the identifying the target audience, users or the potential users for the final product. So
this is the role of the persona. What it does is it identifies the target audience. It delineates the

117
identified target audience behavior in a much better way and it caters to users and the potential
users if we design the app some other potential users might even start using the app which we are
not using in the real situation in the competitive other apps which they are not catered to, we
might even cater to many more or we might delete few of the user group, that also is possible.

Now developing a fictitious or what is persona, the definition is it is a fictitious character based
on the demographic segmentation of the users. There can be multiple persona based on the
different stakeholders or user group in the design. So multiple persona, this concept we have just
given an example.

There can be different stakeholder, different typology of the users. Based on that there can be
multiple persona. But one persona for one particular segment. So what is the demographic
segmentation. Segmentation is the process of dividing why this segment is, the parameters based
on what these, the persona is different from the others. So this segmentation can be based on
demographics, age, sex, the language they speak or location based segmentation.

It can be the task based segmentation. But the same person can once be a corporate person who
is booking the hotel for himself. The same person during the holidays, he can behave as a
traveller or sometimes he can also book for someone else. The same person can when they are
behaving in a different way, they are going in a different segment and they are behaving as a
different user group and they will fall under different persona.

That is why creating a fictitious character whom we have not seen, not interviewed, some other
person and who has the quality of behavior of the generalized behavior what people have done
that is very important. Persona helps to connect with various design groups working in the final
product. It connects within one design group different designers are there. So they will be agreed
on the same persona.

Even the designer groups with the engineers and designer groups with the management people,
they also should agree with the persona what is their target audience. It also connects the
marketing people and the web developer. So web developer should also understand what are they

118
catering for and the marketing people what should they market and how the advertising should
go, how they should market their final website and they should also understand who they are
catering to. It helps the designers to come with an agreement with the client.

And not only the marketing people developers and the designers it also talks within the team of
design and this design company where marketing people are there, web developer is there and
designers are there with the client. Client should also understand that this is the real people who
will be using the final product. Because you will be the person who will be paying for the final
design.
(Refer Slide Time: 41:30)

Now persona should look like something like this. In persona you should put a real picture of a
person who can be a representative of the same segment. So if that is a teenager you should put a
photograph of a teenager but real photograph not a cartoon photograph. So that will not give the
understanding in the client. Because many people will not interpret the expression and the
typology of the people of this through a abstract photograph.

So that person should have a fictitious name, age, location, sex and then what kind of detail
description of a persona. So you have to also write, so persona is not complete if you are not
writing the detail daily life of that person. So that also be described. And what that real user is,

119
how do they behave, what is their favorite activity, related to the product and not in a totally
different context which does not have any correlation.

But around this product what might be their likings, what might be their behavior. So everything
has to be detailed out. More you detail out in the persona, later the design decision can come
from there. So if you write that what is the behavior of the hobbies of a particular person, later
the design decision making or the visual style can come from the hobbies of the person, what do
they like and what is their language preference, what kind of activity they do.

Based on that the style of design, many of the design decision making even the logos and within
the UI UX design also what should be the word which you should use for a drop down menu,
what type of word they will connect with. So what should be the nomenclature. Many other
things can come from this detailed persona. So persona has to be very detailed. More detail, the
better in the next stage the design decision can come. Now the next stage is called scenario.
(Refer Slide Time: 43:40)

Scenario is based on one persona how this particular fictitious character which is the persona is
behaving with a product. So within a product, product can be in this case web application. So if
this person is interacting with a particular product for example if you take the example of irctc
product. So if this person is interacting with a irctc product how will they behave.

120
Now if we are designing some new idea which is redesign of irctc website maybe, so how will
they behave within if we have given this new product. So those are scenarios. And this has to be
built in terms of, scenario can be a written description, it can be like a story, narrative of a
written description. Task 1 first stage this will be he will interact with the webpage like this.
Next he will do this, next he will do this. So it will be a sequential narrative.

It can be also represented by a storyboard. So identifying the, what is scenario, identifying the
context in which each person comes in contact with the product, in this case it is the web
application or web design. Developing a fictitious narrative of user interacting with the product.
So that narrative stands as a scenario. So we have observed different people interacting with the
product in a different way.

But it is a generalized format of one scenario how the general common people who have
observed, who has been observed within that particular persona how will they behave. The
scenario will be, there will be at least one scenario for one persona. So you cannot create one
scenario for multiple persona. Because different persona for example the example we have taken
before, the corporate or the people who are booking for guest and then traveler, they will not
behave in a same way if they are booking a hotel.

They will behave in a different way. If you are creating one scenario for all this 3 persona then
your insights are not very good. You have to revisit and do the testing again so that you can
create substantially different scenario you can ideate that scenario. Otherwise the observations
are not complete. Even there can be multiple scenarios for the one persona.

For example when a corporate person is booking in a hurry like today’s hotel booking that might
be different when he is booking for 7 days prior his booking criteria might be different. When he
is performing another task, he have already booked. He wants to change the booking. Then his
behavior will be different. So there can be different scenarios for one persona. But there should
not be one scenario for which will cater to multiple persona.

121
Scenarios too help to connect with the various design groups working for the final product. It
also connects the marketing group with the web developer. And it also helps the designer to
come in agreement with the client. It does the same thing where he is not the real user. So how
users, not just the users, how users will behave in the context.
(Refer Slide Time: 47:05)

So this is one way of writing the scenario. It can be just a story. So first this is the task which can
be just a picture, a pictorial representation as a narrative. They can be write-ups also what they
are doing and the next situation is this how they are interacting with each other, how they are
behaving with a web application and then what are the things they do, perform in the mobile
application. This can be just stories and the narratives and the written description. This is called
storyboard. This is one tool to represent scenario.
(Refer Slide Time: 47:42)

122
Then persona and scenario translated to a marketing product. So this also translate into a
marketing product and persona and scenario together helps to understand the user by the
designers, marketing people, web developer as well as the client. So this is one of the project
where persona and scenario has been displayed very well. This is by a famous furniture designer,
George Nelson who is called the father or American modernism.

So he have designed this concept in the modernist era which is between 1920s to 1950s. So this
is one of the international style of design where function, so he have given a concept of taking
user’s behavior and user’s decision within the design, the meta design; he called it meta design in
this book Tomorrow’s House. So Tomorrow’s House has free floor and free plan. So sometimes
the partition wall is required.

So this house is divided in different spaces with partition wall and lot of different materials
which has to be stored within. This is the solution. So this is the, this photograph, so this is
actually a poster which marketing guys are using has the persona and the scenario. So this is the
American housewife who faces the problem of this. So this is the problem. So scenario 1 is the
problem and this is the solution.

So solution is the storage wall and the problem is lot of scattered stuffs and the person is the lady
in the house, the housewife or the wife who takes care of the house. This is the persona, this is

123
the situation 1. And after the product comes what will be the situation? And this is the final
design of this. Storage wall, one of the version of the storage wall then the other version is there
can be more part within the storage wall.

And this is what in the first George Nelson is the first one who had the concept of modularity in
design. So based on users they can select each and every module. You can see one module 2.
This is narrow module. This is wider module. And within the module also there are version 1a,
1b, 1c, 1d and then this is 2a, 2b. Based on the requirement of the user, user has the voice to
select the design.

So here the users, experienced users, decision making is there within the final design itself. So
final design does not look like one particular design solution given by the user. So voice of
customer is incorporated within the design and they can select, we can select what kind of
storage wall they want. They can even go for a more covered storage wall. Instead of the vacant
shelves they can have more covered shelves within that. So lot of decision making is left towards
the users as well.
(Refer Slide Time: 50:59)

So the next process after persona and scenario is task flow where this is a derivative of a
scenario. Within the scenario we can decide what is the task. Scenario is how this people, the
users are interacting with the product and based on that what product or the interface should

124
perform that is the task. What is the task for the product and that is the task flow. If this is the
sequential task, user have to perform to achieve the desired result.

If we take an example of a flight booking, so what should be the task? So this is one of the task
flow of 1. So selection of arrival and departure destination. Then next is selecting the date of
journey. Then next can be the selection of flight based on his preference, cost or whether it is
hopping flight or the time of flight. So there can be many decision making criteria over here.
Then next is fill the travelers details, how many travelers going?

What is their age, name and every other details and then pay and then book. This is one of the
task this flight booking app will do. There can be multiple task which flight booking app can do.
One is checking what is the mileage, checking the offer, cancelling the flight, changing the date
of the flight. So these are multiple other task. So this is one task the application should do. So it
can be like a tree chart. So multiple task; task 1, task 2, task 3.

Within the task where multiple sequential activities within the task. So the final mobile
application or web application is a combination of different task that user want this mobile
application to perform. Now based on this task flow, based on our ethnographic survey, so if this
is the task they are performing if you take the example of irctc in which stage, which task they
are creating problem.
(Refer Slide Time: 53:13)

125
So users satisfaction level can be mapped based on our survey. So we have documented and seen
the user’s behavior while performing that particular task which has been given during the
ethnographic survey and phenomenological research and based on each and every segment and
activity of the task whether they are performing the task properly, whether they are satisfied with
the task or not that can be mapped and that is called user satisfaction level can be mapped.

So after mapping we will understand that in which stage of this task this design is lacking. So if
in the first stage, so this can be one of the option of representing user satisfaction level. So this is
task versus user satisfaction. This help to interpret again the system and to understand where the
system or the product lacks in terms of the experience. So if you think from a user experience
perspective where is the lacuna of existing products.

If you are thinking about flight booking application, existing flight booking application of a
particular site for example MakeMy Trip whether in the first task in the task number 1, the stage
1, selecting of arrival and departure date, whether people are happy or not. If they are happy, so
it will be like this. The selection of journey becomes journey date might be little difficult if in a
fictitious I am just taking an example.

There might be difficulty to scroll down within the calendar. Calendar is not so well designed. So
in that they are not so happy if you interpret from there. So they have some difficulty within that.

126
Then selection of flight. Maybe they are neutral because the flight was not, the selection criterias
that was not might not be well designed. There can be many other criteria. So you just need to
map whether they are. So I am just mapping based on my just random thing.

That can be also happy. So based on case 1 they are happy. Case 1 they are happy. Case 2 they
are neutral. So these maps helps designers to understand this is a important part where this
design is not performing well. So we have to make them happy and what should be the other
option and we should deviate from this option so that they will become happy and where this
performance is going well. So that similar kind of design can be adopted in the new design.

So what is there, it can be case study of other web application. When we are studying the other
web application they are performing well. The similar concept can be applied. If they are not
performing well, then we should go for a different option of design because this is not working.
So one of the way whether people are happy or not can be in the questionnaire. You ask them to
mark the happiness index in 1 – 5 rating which is a Likert Scale or it can be Likert like scale.

So it can be 0 to +3 and -3. So this becomes a Likert like scale. So Likert Scale is when you are
marking them 1, asking them to mark from 1 to 5. So Likert Scale is proposed by a psychologist
Rensis Likert. So what this scale does is this scale can transfer a qualitative behavior in a
quantifiable numbers. So when you are asking 10 people so they are giving each and every
activity a particular number based on if they are unhappy they will give it 1, if they are very
happy they will give it 5.

So based on all this number finally it can be a data, as a number can be represented. So these
numbers multiplied by how many user you have studied. So that number can be a relative
correlation between what is the happiness index of this particular task. And based on those
numbers this affinity diagram can be displayed. So in one example we are seeing how many
people are the office goers are happy with the looking for a physical aesthetic appeal of this
place or they are going for a social interaction.

127
There was many different bubbles were represented. So the radius of the bubbles can be
represented by this number. So this is one way, Likert Scale is one way to transfer the qualitative
qualities into a quantifiable numbers which will help the designers and the web developers and
the marketing people to understand and also the client to understand where the lacuna of the
studied designs are and where is the scope of this design is.

In the next class we will talk about the next stages of designing when we talk about the low
fidelity, the initial stage of design and ideation.

128
 User Interface Design
Prof. Saptarshi Kolay
Department of Architecture & Planning Engineering
Indian Institute of Technology, Roorkee

Lecture - 08
Low Fidelity Design

Welcome students to the online NPTEL course, User Interface Design. In the previous class we
started discussing about how to create the persona, scenario and do the ethnographic survey. So
based on that survey and the requirement and the user task flow how designer start designing the
first prototype. So this prototype is called low fidelity prototype in terms of interface design.
(Refer Slide Time: 00:58)

So this was the process which we have discussed as first as user research stage. From this user
research the tools and techniques where creating persona, scenario and do the ethnographic
survey and then understanding the use’s geography, the persona. And what is the probable
scenario, how people will interact with the particular product. Product can also be the web based
product or tangible product, intangible product.

And the deliverable is the need. What has to be designed. So the need statement will be
formulated based on this. Then the design stage. So in the design stage we are right now, we will
discuss this design stage. So paper prototype which is the low fidelity prototype wire-frame in

129
terms of UI and visual graphics, UI transition design. So these are the design stage. So this is the
first stage which is the low fidelity design which is information architecture.

We will discuss this. And the next stage is the visual graphics which is the high fidelity design
which goes next for the programming where the graphic contents and everything is done. So this
is the high fidelity design. So today we will talk about the low fidelity design, the first stage. And
next is the user testing. And user testing can be done in the low fidelity design as well as well as
the high fidelity design. So together within the design stage user testing will be done.

So there again the ethnography is there. F.G.D or the focus group discussion, questionnaire or
different other tools and techniques are there in this domain. So deliverable is the user feedback
on design. The final development stage is where it goes to the developer. This is not the domain
of mostly not comes within the domain of the designers. So this is the tools and techniques and
deliverables of different stage.
(Refer Slide Time: 02:47)

So this has been already discussed. Just to revive again. So persona is identifying the target
audience. So that is the tool and users potential users will be find out and developing this is
exactly like a fictitious character which represents the demographic and other segmentation of
users which designers, developers, and different designers who is working on this team, they will
agree upon that this is the target audience we are targeting. So that is why this has been created.

130
(Refer Slide Time: 03:23)

And then the scenario is how this persona will interact with the setup. So identifying the context
in which each persona comes in contact of the product and how do they behave. In case of web
application and web design it also is validated. Developing a fictitious narrative of user
interaction with the product. First is the fictitious character, then the narrative of how this
character will behave if we give them this product. So that narrative is the scenario.
(Refer Slide Time: 03:56)

Now ethnographic survey is the tool. Based on this field research we create all these things. And
then we create the task flow how based on this scenario what will be the task user want to
perform within that. Based on this task flow we create the information architecture.

131
(Refer Slide Time: 04:16)

This is where the low fidelity design of the design stage comes into picture. Right now, till this
part we have talked about, we have understood the need of the users. So first through
ethnography we go, we study, we observe. Then we try to find out who exactly we are targeting,
who is our target audience. There might be few Latin target audience who might be included if
we create our product like this.

If we change the product a little bit then we can cater to other target audiences for them if there is
some added features are added into the product. Some other people who are not right now user of
the product will also be interested. That can also be there. To do that persona is required. So for
whom we are targeting and then we start placing the product. Product placement can be done
according to that.

Then based on that we try to find out what is the scenario, different scenario how they will
interact with the product. So that is the scenario and then the task if the product is there what are
the different task they want to perform. Those task are there and based on those task we have
also talked about their moods within the task and based on the difficulty level or the ease of use
what can be their mood and all these are research and to find out what exactly we are designing
and what is the need.

132
Not what exactly we are designing, what need that final design should fulfill. Now within the
design phase which designers start thinking about how we can tackle this need. So the first stage
will be the information architecture. The information architecture also is like arranging all the
information or the hierarchy which comes from the users task. So if users are following these
different task so what will be the hierarchy of information in terms of web design.

What informations in UI UX design, what information will come first. Within that what are the
different direction they will go and next what will be the next layer of information, next layer of
information and so on so forth. So they serve to show how the content will be organized into the
display and which information will be displayed for the particular task flow. So which looks like
something like this. This is like a structure of the website.

So websites or the web application or any other interface design structure, the skeleton will be
displayed like that. First we launch into the home and it might also be through logging or it
might be like a visitor and within that there can be different main tabs or buttons where if you
click, this is the tabs within the home button and within that if you click on this tab 1, this will be
the information and this will be the different task.

If we click on tab 2 this will be the different task. And somewhere this task can be even related.
From one side you can go to the other side and different things will be there. If we do the login
then few task will be visible. If you do not do the login few other task might be. Therefore it
creates a complete, complex structure which is the skeleton or the backbone of this website or
web application; that designers try to conceptualize.

So here there is no feedback is not coming from the users. So designers are creating it first. Then
it will go to the users. So in this process information architecture, this happens within the closed
room when designers sit together and then they ideate. Based on the users profile or the persona,
scenario and the user’s probable task flow this will be the structure of the information
architecture.

133
They can also design multiple structure of the probable structure of the information architecture
based on their requirement and then it will be a multivariate design. Different options for one,
catering to the one website and then they might test it for that. So this structure is called the
information architecture. How this is coming from the task flow in the information architecture.
(Refer Slide Time: 08:58)

So task flow is what user would like to do. So that first designers think that if this is a task given
to the users what are the different sequence they will try to follow and based on this sequence
this structure will be decided. So this structure is very pragmatic, creating the structure is a very
pragmatic process. So designers has to think from the perspective of the users what they would
like to do when they have given this task.

Because when designers think that designer should not think from their perspective because the
real users are somebody else. That is why the persona and scenario has been created. Because for
whom we are designing, their perception and psychology might be totally different from the
designers. And to take an example, if you take a e-commerce website, so first people will, the
task flow will be what they want to purchase.

They will select that. Within that there will be minor other selection options. So whether they
want to select this. So first we will be launching in the e-commerce site. Then going through the
product. Selecting a particular product and then the specifications of the particular product. If

134
they want to select that, they will go for the add to cart or the payment option. Or if they do not
like this, they will go back again search this product and then again select their specifications.

And if they like it, they will go for the purchase and if they do not like it and they will again go
back or they might leave the website. So this is the task flow. Based on that, so this option, so
designers will create the information architecture. So it might be home and then let us give them
different options of product, different options. And then they will see that and then the next page
will be based on this product specification.

They will design the what will be the options of the product specification. So this confronts, so
information architecture is a translation of what users will behave in the task flow and then they
translate that into the first skeletal structure of the website. So that translation is happen. So this
is the first stage task flow and this is the information architecture, from the task flow how they
are visualizing the website.

And here based on this task where there can be few iterations in the information architecture,
they want to display their product like in one particular page or they will be in different
particular page. Those decisions comes within the information architecture. They are not in the
task flow. Task flow is how people will see the product. Task flow is the people want to see the
product for the selection.

And the information architecture they can select whether this different category of product will
be displayed in different segments or they will be displayed together or they have to click the
button and then a new tab will be opened or it might be just a popup. Those decisions are there in
the information architecture but not this is a translation of task flow into the information
architecture.

So this is the observation and this is the designers decision based on this observation. So let us
think about or see what is the information architecture from a case study. The case study is I
have taken of a flight booking site, Cleartrip. So Cleartrip if we launch first. So this is the
homepage you see.

135
(Refer Slide Time: 12:54)

So if we try to find out the information architecture of Cleartrip first, this is the home button.
Within the home button, we see these are the main key task which has been arranged like that. So
task are in the Cleartrip this flight or the travel related site. One is the flight booking. This is the
major site. So when you open, it automatically opens the flight booking. So that is also a decision
in the information architecture which will come first.

And then the next other options are hotel booking, local events, train booking other flight deals
and installing mobile application and manage trip and see the previous what you have already
booked. So this is the first task. So within the task let us see what how they have created it.
(Refer Slide Time: 13:40)

136
Within this home and the flight booking they have this first option is, first there is another option
which I have not kept which is like from where you want to go, so which is there. So here within
round 1, whether it is round trip or it will be one way or multicity. So that selection has to be
done, from where to where you want to go and the dates and everything has to be filled up. After
that they will give the option.

And you can select the option based on they give based on this price or you can select during
departure time, return time, during different airlines. There can be preference of airlines, time
duration, lay over or multiple carrier different options are there and you can also see the other
flight fares and you can also go for this different carriers and see their particular prices. So this is
how the information architecture has been designed based on a task of this flight booking and the
next phase is seeing the different options of the flight.
(Refer Slide Time: 14:51)

137
In the next layer, or the next hierarchy of this tree is, home was the first hierarchy, then flight,
the details of the flight was the next hierarchy and the selection. And within the selection the
detail of the, this was the detail of the travel, travel detail. And this is the detail of the flight,
flight details. So you see the flight details, the baggage details and everything. So we are going
deep into the hierarchy of one task. So the next layers are going, this is the UI for the next layer.

So if you fulfill this first task, then you will see the next option, next page and next page. So this
is going down in the hierarchy and this page will appear when you fulfill the previous task. So all
this decisions has to be delineated within the information architecture. So that decision making
of these layers, how it will be created so that decision is part of the deliverable of information
architecture.
(Refer Slide Time: 16:00)

138
So within that we see this details of the flight. And then it will be the your contact details and
then the travelers details. So you have to fill the details of the traveler, age and other things and
then the next thing will be the payment. So that is the one task from one line when the hierarchy
is coming.
(Refer Slide Time: 16:15)

The next is the hotel. So that is this flight was one line in different hierarchy. Next is hotel and
there will be also different hierarchy. And then so on so forth, local and other thing. So within
the hotel also they have similar interface where which place the check-in check-out, how many
travelers and similar drop down will open up and then they will show the list of the hotels.
(Refer Slide Time: 16:39)

139
And then they will show the list of the hotels and the way they are showing it is different again.
In the information architecture they have different ways of selecting and deselecting the hotels.
So special offers, ratings of user ratings, the star ratings or the user ratings and amenities and
other brands of the hotel chains and other things. So this is the way they have segregated the next
layer of hierarchy.
(Refer Slide Time: 17:07)

And then there are the what are the activities and features are going on in a particular city. So
this is another task. So there are different task and each and every task has different hierarchy. So
every hierarchy will be there within the information architecture under this skeleton or the

140
backbone of this design of this website or web application is part of the deliverable of
information architecture.
(Refer Slide Time: 17:34)

Now based on information architecture the low fidelity design is the next stage which is based on
the information architecture created. Information architecture is just the hierarchy, what are the
task. Within that what will be the option? Whether they can select the flight? Whether they will
be selecting the flight based on the price, based on the flight carrier or multicity, other options.
So that is part of information architecture.

Then low fidelity design is how the portal will look like. Where the button will be? What will be
the position of the button? How it will be divided? What will be the different segments? Where
this options will come? Those decision making will come in the low fidelity design. So from
information architecture, it is difficult to do the testing. So at least designers has to come to this
stage which is low fidelity design to go back to the user.

From first they have done the user survey, ethnographic survey. After that all this processes are
designers decisions and till this point designer has to work till this point which is low fidelity
design and paper prototype. And paper prototype can be displayed in the users if you display the
information architecture, you might not get the real feedback because users will not be able to
visualize the information architecture and their feedback will be different.

141
So at least you have to show them something like this which will look like what they will see. So
they have to visualize which is kind of similar to what they are used to see in the website or
mobile application on any interface design. So creating wire-frame is very important and from
here it goes for the first round of user testing. So what is wire-frame or the low fidelity
prototype? Low fidelity prototype is interface design is called wire-frame.

When we make this frames like a wire. We do not incorporate any visual design or the color or
how the textures and everything or the decisions or whether it will be curved edge or the sharp
edge. So those decisions has been taken. And this looks like created by a wire. That is in case of
interface design it is called wire-frame. Low fidelity prototype in terms of product design would
not be called wire-frame.

That will be some might be a thermocol or PU foam model which can be tested with the users.
After starting the design, a quick low fidelity paper mock up in interface design will be
developed by the designer to test the design idea with the users. It can be a paper mock up,
something like this or it can also be software generated.
(Refer Slide Time: 20:31)

Low fidelity prototype can also be generated with the software. There are few softwares like
balsamiq and other softwares which generates the low fidelity prototype which enables the

142
designers to generate wire-frame quickly in the software. So it can look like something like this.
It might be very quick which is just like information architecture and just broader segment how
this will be segmented and little polished work the information architecture and which were the
sketchy outline.

Or it can be designed using a software where there are already existing template of different
mobile phones or laptops and you can just take the screen of this mobile phone and other devices
and then there are also templates of dropdown, scroll bars, breadcrumps and other things which
you can just incorporate within that and create a quick prototype.
(Refer Slide Time: 21:43)

So what are the things in the low fidelity prototype. So this is a sketchy prototype designers do to
show how the content will be laid out on each hierarchical display. Hierarchical display is the
information architecture and this low fidelity prototype talks about how the content will be laid
within the information architecture. Information architecture does not talk about how it will be
laid.

Information architecture talks about what will be there in this particular page and low fidelity
design talks about how it will be positioned, where it will be positioned. A low fidelity prototype
does not include any visual design details and serve as a initial ideation to allow designers

143
structure the content and UI navigation. Designers to structure where the positioning of the
content and what navigation will be there, whether it will be a dropdown, popup.

And where the popup will be, dropdown and popup is a decision taken within a information
architecture. Where will be the placement and how the popup will come. So this decisions are
there in the low fidelity prototype. Low fidelity prototypes can start as a hand sketch. It can be a
very quick sketch, paper prototype or later it can also be refined in the. So low fidelity prototype
can start as a hand-drawn sketch or just a paper prototype.

And then later it can be also computer drawn the wireframe which I was talking about and then
the computer drawn things are more faithful for presentation because the proportions of the
screens and of the mobile and everything is more real and the proportions are similar and user
get a feel of that particular thing. And it is also a decision whether you want to show it on the
screen to do the testing.

Or you want to cut the paper again after designing in the software you can take a printout and cut
it and create as a mobile phone or the laptop and those situations are it is totally up to the
designers. While testing whether users will be more comfortable holding the paper prototype or
seeing on the screen. So based on those decision it can be hand sketch or it can be software
generated as well.

This low fidelity prototypes are used for the user testing which is the next stage designers
perform. This is a hand sketch prototype and this is how the user testing is being done. So users
will be seeing it and the next page can be like a next layer. They will flip it and they will see the
next layer and then they will flip and they will designers will ask if you are seeing this
information where will you click if this is the task.
(Refer Slide Time: 24:40)

144
Assume this you are trying to navigate from one place to another or you are trying to book a
flight or whatever the task is. If that is the task and this is the display which button will you click
and they will tell this is the button for the next task and then the designer will show if you click
the button this will be the next page and if that matches with their mental model what they are
expecting then the task will be performed properly.

And if it does not then he will understand there is some problem with the low fidelity design and
it can be checked quickly. And there can be multiple decisions by the designers so they can show
the first option is this, second option and users can also, the behavior of the users might differ in
these two options and which designers want based on that they might select the options.
(Refer Slide Time: 25:32)

145
These are some of the ways where you can create low fidelity prototype in software. This is a
software called Balsamiq which is quite good and helpful to create the low fidelity prototype.
(Refer Slide Time: 25:46)

So next stage is usability design, usability testing which we will discuss in the next class but
while designing the low fidelity prototype we need to understand few things that while we are
creating the, structuring the web pages which is part of the low fidelity prototype. So this is a
book by Steve Krug, Don’t Make Me Think. It is a very interesting book for the UI UX
designers. It is available online, you can download and read it.

146
And what he is saying is while we design the low fidelity prototype we have to segregate the
information and there should not be any clutter.
(Refer Slide Time: 26:28)

And if we give lot of information in one page, then we expect them to what designers expect
them to see is every information but what people see is very few information. So clutter is
always bad. So that decision should come in the low fidelity design. So if there are lot of
informations which information architecture is telling to give lot of information, low fidelity
prototype should create different pages.

Or some solution to show only few informations, key informations which user want to see. It can
be in the next hierarchy some other information can be shown or if you mouse over some
information related to that can be shown or click on that dropdown will be there. Some other
ways to diminish the information at a glance. So it can be sequentially the information has to
come and within the page setup a clear division of structured division has to be there.

Within this structure this type of information is there. Within this structure just that other type of
information is there. Within this structure this type of information is there. So if there is a clear
clarity within the structure that works much better in terms of usability testing. So those decision
should come from information architecture.
(Refer Slide Time: 27:51)

147
And then what designers build if there is a lot of clutter the user will only see the highlighted
point which is the buttons are more bigger, the text is bold, text is bigger and the main which is
near the focal point, those will be only seen.
(Refer Slide Time: 28:10)

Now while creating this information, after this information architecture and low fidelity design it
can be multiple different design. So multiple different options for one solution. This option can
be changed within the information architecture. There can be information architecture option 1,
information architecture option 2 or one information architecture low fidelity design option 1,
low fidelity design option 2.

148
So it can bifurcate from any stage but multiple designers when we create different low fidelity
design to show the users and do the testing. So this options will be shown to the user and how do
they perform based on their performance evaluation the multiple variates performance evaluation
we will select the best option or the better option and then tweak it in a further way.
(Refer Slide Time: 29:14)

So this also comes within the Donald Norman’s double diamond method which has been
discussed earlier. So this first stage of the double diamond is the problem identification. In this
stage the problem is identified and then we are bifurcating from the one problem. So information
architecture comes in one stage, from one information architecture there might be one low
fidelity design. There might be multiple low fidelity design from one information architecture.

In this stage there will be lot of options, in this low fidelity design stage. And here users will try
to select and narrow down one, one option. And it might be the amalgamation of two option. It
might be the already the best option which is designed, might be validated by the user and that
can directly go or it can be iteration and totally all the options sometimes might be scrapped and
you have to go for new direction of design, that can also happen.
(Refer Slide Time: 30:13)

149
So in this situation, another option is alpha beta or AB testing. Multivariate design is when we
create multiple options. AB or alpha beta is when we create only 2 options. These are actually
not very different. So if we create 2 options, this is AB testing or alpha beta testing which is also
called split testing or alpha beta prototype and then multivariate design is when you create
multiple prototype. Alpha beta prototype in some cases are also different stages.

So alpha stage design and beta stage design is a beta testing. So that is different thing which we
will discuss later but in this multivariate design sometimes this is called split testing when we
create 2 options. So what is the different between these two is almost the same thing. But the
chances of multivariate when you create multivariate testing or multivariate design and then do
the testing is the chances of success rate will be much higher.

So here it is like 12% and 36% performance winner and here the percentage of other people and
this is the winner and when we create multiple options we have the probability to see some other
options which we have not created in the two options. So more we create options for more
different perspective, better we will see how the salient needs or the desires of requirements are
there. We might find out something interesting during the testing.

And when we create two different options both the options might not work and we might scrap
both the options and major change might be required. And when we create multiple options we

150
have the probability to select option 1 with option 3 which will perform better than option 2 and
option 2 here might be the winner. But through the user testing when we see that option 1 has
some better points in this direction and option 3 has some other better points from other
direction.

So we can create some other option which is the fifth option which is the combination of 1 and 3.
So that gives when we create multiple options that in a way gives better way of different
dimensions. That is why in double diamond method Donald Norman is saying create multiple
solution for one particular design need. So today we are ending in the low fidelity design. The
next class onwards we will start talking about the high fidelity design and the visual
communication design part will come into picture.

And after that we will again come back to the UI UX part and talk about the testing and after this
visual communication design part we will start talking about how this low fidelity design will be
tested. So we will finish the UI part and then we go into the visual communication design part
and together we will discuss how UI UX and also the visual communication part will be tested
and the testing part will be discussed in the third stage.

151
 User Interface Design
Prof. Saptarshi Kolay
Department of Architecture & Planning Engineering
Indian Institute of Technology, Roorkee

Lecture - 09
Low Fidelity Design - II

Welcome students to the online NPTEL course, User Interface Design. So in the previous class
we discussed about low fidelity prototype design and creation of multivariate design options. So
today, low fidelity prototype can be designed just by hand so which can be just a paper
prototype. We can quickly sketch using hand and we can cut it and create our mobile application
which looks like mobile and other things which can be just made out of paper.

There are softwares which helps us to create low fidelity prototype without any color options,
just the UI elements and positioning those UI elements.
(Refer Slide Time: 01:09)

So that give provision for tweaking within the design. So today we will discuss about one of the
software which helps to create low fidelity prototype. So that will not be sketch on the paper. So
this is a software, very quick software, a very quick process to use the software and very user-
friendly. One of the software we will discuss how to create low fidelity prototype using a
software. So this is a process of user interface design and holistic process.

152
And here we are discussing the low fidelity wire-frame prototyping. After that we go for testing
and then we start with the high fidelity prototype which is we add the visual design part which is
color, text, particular font, style and other visual style textures and other elements of visual
communication design part. So low fidelity prototype has been discussed.
(Refer Slide Time: 02:07)

It comes from the information architecture. So when the information architecture is

conceptualized, what will be the hierarchy of the design, so how it will be arranged.
(Refer Slide Time: 02:17)

153
Based on that sketchy design which is a derivative of this information architecture of the
hierarchy of the flow and also which talks about the which is getting ready for the user testing
and it can be hand drawn paper type or it can be computer generated wire-frames.
(Refer Slide Time: 02:34)

So hand drawn prototype will look like this.

(Refer Slide Time: 02:37)

And then computer generated prototype will look like this. So this prototype has been designed
through Balsamiq. So today we will discuss about the software Balsamiq.
(Refer Slide Time: 02:44)

154
So this is some of the prototypes which has been discussed using the software which is
Balsamiq. So it can be webpage layout. It can be a mobile application. It gives a provision to add
different pi charts, bar charts. It also has a provision to add maps, sticky notes and other
elements. So lot of elements are there. Even the different buttons, scrollbars, everything is there,
different style of design.

It can be iOS style of design which is on iphone and iPad and apple platform. It can also be
android style of design. It can also be just webpage and also not just the low fidelity prototype.
Using this software, Balsamiq you can also create information architecture or the hierarchical
chart using that software.
(Refer Slide Time: 03:45)

155
So if we launch the software, this will be the main page of the software and we see lot of buttons
which is the main tabs and then within that the next options are there. So this is the main
selection process what you want to select, the hierarchy 1. And the next is hierarchy 2. So within
if we select the common option, so this will be the options which we will have and this is just a
drag and drop.

So you drag and drop it in your worksheet and you change the value, add some name of the tab
and it will be done. So that is a very simple process of design. So now we will launch the
software and I will give a very brief demo of the software and it is a very user friendly software
if you start and it is a free software if you download it and it has a trial version. It has for 7 days
and then you have to pay for it later. So you can see the trial version and start using the software
for your user interface design process.
(Refer Slide Time: 04:50)

156
So this is the first page if you open the software. So this is how the interface here. So here as we
were discussing the main tabs are over here. So within that if you click these buttons which is big
then common container so you will get different icons, different templates which is already there.
So you can drag and drop the template and create your wire-frame. So this software also
provides you the option to create information architecture.

Let’s see that first how to create an information architecture which is a diagram of hierarchical
options of how different pages will open. So that is the first stage we do in the UI design and
then we create the wire-frame. So first let’s see what will be, how we can create a information
architecture. So you have to click here which is the button is big and within that the main options
are there and also there is a site map.

So site map is nothing but the information architecture, how the site layout is. Now if you look
at the site map, this is how it will look like which is a diagram of information architecture and
this is how you can create the diagram. So here the main button is home. So from home button
there are different options. So whenever we open websites, so we launch a document button. You
can rename the home button or you can rename it the name of the in anything.

The name of the brand or brand home, homepage. So that will be renamed. So whatever you
write that will be named in the first hierarchy. And within that home button there can be right

157
now it is, by default it is written product. So we can write stage 1. Within that stage 1, this is this
button within the first from this branching out what will be there. So within that we can have the
product 1, product 2. Let’s add another product 3. Now you cannot just write it.

So if you look at, there is 1 dash. So that goes within the first hierarchy. If there are 2 dash, that
goes in the second hierarchy which is here. Now you have to create another hierarchy which is
another part of the same hierarchy then you have to add these two dash over here. Then it will be
created as another part which is here. Now after that there is another about us or company. There
is support, there is blog. Let’s create another one. It is in next hierarchy dash contact, contact us.

Then it will be created in the next hierarchy. And now within that company you can also create
next level hierarchy. So right now, there is no options from this about us or the company. So now
this options will be created. So within that we can create the company profile. Company profile
is in the next hierarchy. Also we can create the testimonial. Now let’s see how we have achieved
this.

Maybe in the contact us we can create few other options which is email, navigational map. So let
us see how does it look like now.
(Refer Slide Time: 08:40)

158
Okay, now it has created all this. So within the brand home page stage 1, product 1, product 2,
product 3 is I have added product 3. You can see this product 3 is added. About us, the company
again profile and testimonial this has been added. Then support and blog. And within contact us,
email, and map is added.
(Refer Slide Time: 08:59)

Now we can again create another layer within this product 1. You can create different layer
which is next hierarchy you have to create 3 which is let us talk about the description, product
description. Next can be price or the way you design the information architecture it will be based
on that. So if you will select, so yeah within the product 1, now product description, product
price is there. So using this software you can create the information architecture.

And what will be the different layers based on different layers and based on hierarchy you can
create the information architecture. Now we will see how to create the main wire-frame. So this
is one part which is the information architecture. Based on that you will select the wire-frame.
And you can already see different tabs and different already designed templates are already
there. So using that we will create the wire-frame.
(Refer Slide Time: 10:07)

159
Now we will select the main style of design. So we have to click in the container. Within the
container there are many options. So there are website, so which is browser. There are just tab,
just the digital interface. It might not even be a website. You can even start designing with a UI
frontend of any product. So it can be a different gadget you are designing. So that gadget can
have a digital display.

So that can be digital display of this. So you can select or you can drag or you can change the
width of this. You can put the value of that digital display. And you can select a digital display
window and within that you can create different design.
(Refer Slide Time: 10:58)

160
Or you can just create a browser, you can rename the browser here and you can select the
browser. Now in this webpage you can also have a static webpage or you can have a scroll
option so which is you can scroll down. So there is a break option of this webpage. So it gives
you the option to scroll down and which is like a endless scroll. So that also the option is also
there.
(Refer Slide Time: 11:33)

Now you have different sets of iPad. So this is the format of the iPad. You can change the iPad’s
width based on different model of the iPad and now you also have the iphone.
(Refer Slide Time: 11:45)

161
You can also change the iphone’s width based on the model of the iphone but you are not
designing based on the model but based on design. So it is not required to change and even you
can change the iphone’s orientation and you can directly click on the iphone like if you want to
design for the iphone 4, you click over here.
(Refer Slide Time: 12:04)

So this is iphone 4. So this is iphone 5 and SE which has the same display window, how will it
look, you want to see how will it look like in iphone 5 and SE or you can go for iphone 6, 7, and
8 which has the same width and height and you can change the position. You can see the position
is getting changed. So that will not matter. If you want to change the width so this will be the
button to change the width over here. Or you can have a iphone X which is like this.
(Refer Slide Time: 12:43)

162
Now you can also have a different orientation whether it will be on the landscape mode you are
designing or you want to design in a portrait mode. Or instead of iphone you also have the
android phones over here.
(Refer Slide Time: 12:57)

The other smart phones over here and you can also select the orientation of the smart phone or
you can change the width of the smart phone over here from width and height. Now let us design
something on iphone 6S.
(Refer Slide Time: 13:13)

163
Now this is the base model. From container we go to the common. Within this common tab we
will see all this buttons which are common to us which are most commonly used for example
this circle button, this different buttons and you can rename this button whatever you want to
type. So these buttons will be there. And other basic shapes, rectangle, circles are there. Text
areas are there. Text input and scrollbars are over there.

Now different elements you can create. Now within that button you get larger variety of different
buttons and again you can rename the button using that and you can position the button. You can
change the button’s position from here x and y coordinate or you can just drag if you are not sure
about the position or you can change the size of the button from 70 let us do it like 100. So you
will automatically see how it is changing.

So always it is good to use this numbers because then it will be easier for you to translate these
buttons into high fidelity design. So you will know what is the shape and weight of this. So you
also have things like dates and calendars. Other buttons, help buttons, search buttons and
different elements are there, almost everything what you want to have. Other than that if you
want to create something from there so you can select this regular shapes which is there in the
common.

164
So you have the image, you have this circular rectangles and circles. Through that you can create
this images. There are markups. You can have different other elements which is not part of the
UI but for your own understanding you can add this to that. Now within media you will have this
folders which is like this. Different videos, how the different videos comes if you are designing
something which plays like for example YouTube or other things.

And the progress bar within the media, what is the download progress or play progress which is
there. And images and street maps which is if you are designing something with maps the profile
pictures or webcam within that how things will be there, the volumes. So all this media related
elements are there within the media. And if you look at the symbols again different signs and
symbols and icons are there which you can download later and put it there.

Different text related things which is grid data and common text box, menu, lists are over there.
So you can again rename everything and type according to your design element. Similarly, if you
want to design with some web based platform, so again you go to the common. You start using
the browser. And within that you can again start using all this elements which is there in the
thing. So again there are few icons which is only common to iOS platform which is there.

And so you explore more through this Balsamiq which is a very easy software to explore. You
can explore more and create a very quick wire-frame mockup using this software. So within this
layout you also have a different options of layout. So there is a interesting thing called tab.
(Refer Slide Time: 17:21)

165
So there are 2 different ways of tab. This is a vertical tab. Within this vertical tab you can have
different tabs which opens vertically. So first tab you can also rename that. This can be contact.
Then next can be about us. First should not be contact. Contact can be later. So it might be home.
Last can be contact. Third can be product description. You can add another tab right now. There
are 4 tabs. You can add another tab which is price list, previous purchase.

Now we have 5, 6 tabs, vertical tabs let us see. So this is the vertical tabs. And now you can
change this, the display size based on this. Or you can change it from here, the size, width and
height. So this is how you create the vertical tab option.
(Refer Slide Time: 18:41)

166
So there is also horizontal tab. You can change the horizontal tab area based on you can just drag
or you can change the area from here. And similarly within this also you can add this
horizontally. So which is tab 1 and next is tab 2 and you have to put comma after that. Then tab
3, tab 4. Let us create another tab, tab 5. Another tab 6. So you can see there will be 6 tabs with
the name what you want.

Based on that the tabs will be created. So there are many other options you can start using which
is a dropdown selection.
(Refer Slide Time: 19:36)

So here you can see this item 1 is the description of item 1 is open over here. So you can instead
of this you can create item 1, you can change the name or you can put a picture of they are
different icons of main important companies are there like Amazon and other. Then within that
you can create the photograph. Put the photograph within that. Image in icon 1 and create the
text description and other elements over here.

And then within item 2 you can write even start writing the other things within this. So within
item 2 you can rename sub item if you want to create, so you can add that item 3 and item 4 you
want to add more items. So you can start adding. It is added, item 5. So this is how you can
customize everything what you have designed through your information architecture. There are
many other options.

167
Almost every options you want to create through which you can translate the information
architecture into low fidelity prototype. All this options are there in this software. So you can use
this software as a tool to create wire-frame or the low fidelity prototype. There are other
softwares which also provides you the options. So you can explore those softwares which helps
you to translate the information architecture into wire-frame. Those other softwares also can be
explored. Thank you.

168
 User Interface Design
Prof. Saptarshi Kolay
Department of Architecture & Planning Engineering
Indian Institute of Technology, Roorkee

Lecture - 10
High Fidelity Design

Hello students. Welcome to the online NPTEL course, User Interface Design. In the previous
class we have discussed the process of creating low fidelity prototype. We have also discussed
with the tools with which we can create low fidelity prototype. It can be paper prototype, just
quick sketches or it can be through the software like Balsamiq.
(Refer Slide Time: 00:50)

So these are the process of user interface design, the broader process and we have discussed how
to create paper prototype which is wire-frame and information architecture and now we will
discuss the next stage which is the high fidelity prototype design. So within these 2 stages while
we are creating information architecture and low fidelity prototype the testing has to go on.

So after creating low fidelity prototype we have to conduct user testing after creating this low
fidelity prototype so that to validate our design ideas and there we can create the multivariate
design options and then after creating the high fidelity prototype then again we have to go for the
user testing for validation. So again we are creating multivariate options in high fidelity
prototype so that our design, final design idea should be validated before launching.

169
Now after that we will discuss the validation process, the ethnographic survey and user feedback.
So after discussing low fidelity prototype as well as high fidelity prototype we will together
discuss what is the process of user testing.
(Refer Slide Time: 01:59)

Now this is what a low fidelity prototype might look like when we create this through Balsamiq.
(Refer Slide Time: 02:06)

And this is what the low fidelity prototype will look like if we just sketch. After that we have to
go for user testing. Again after creating high fidelity prototype the same process of user testing
will go on but that will be more refined version of design. So we will already know the UI will

170
be more or less fixed and the information architecture and the page is layout will be fixed and
only the color and the visual communication design part will be added in the high fidelity
prototype.

So actually high fidelity prototype is the UI component or whatever we have created in the low
fidelity prototype the position of the button, how the button will look like and how the layers and
hierarchy of the design will be. All these variations are within the UI component or the user
interface design component. So after fixing the user interface, I will not use the term exactly
fixing because it is a iterative model so always it can go back and forth. But more or less this will
be finalized.
(Refer Slide Time: 03:15)

After that there is a visual design or the visual communication design part and we add the color,
the style of design and the design language what kind of visual vocabulary it will have. That will
be added on top of this low fidelity design which is wire-frame or sketchy prototypes or paper
prototypes and then we create the high fidelity prototype.
(Refer Slide Time: 03:40)

171
So if we look at, low fidelity prototype will look like something like this which is sketchy but
position of this the logos, icons, tabs, scrollbars everything will be more or less fixed and then
adding the color, style of design, and that creates the high fidelity prototype. So this is low
fidelity prototype and this is high fidelity prototype. So everything you can see, the position of
this button everything is same.

Because that has been tested with the users and that has been validated. After finalizing this low
fidelity prototype then it will be translated into the high fidelity prototype. So design of logos,
icons can be different. The selection of typefaces will be there in this process of high fidelity
prototype. Selection of color, selection of button style, whether the button will be sharp, will
have a sharp edge or will be chamfered. So these decisions come within the high fidelity
prototype design.
(Refer Slide Time: 04:42)

172
So there can be thematic variation. Now within the high fidelity prototype also we will create
multivariate options so that we again go back to the user and user will select what kind of visual
style will go with the mood and there can be many other parameters to select a particular visual
style. And after creating the same UI the UI is fixed, the user interface is fixed and then it might
the visual language can differ. There can be visual differences.

So if you see these 3 options, so everywhere the UI is same. So if you look at the wire-frame,
this is same but this has different thematic design style. So there can be thematic variation. So
these style option a, option b, and option c does not match. They have a very different color
combination, different style and they give a different feelings. So there can be thematic variation.
Now within the same color range, so color is fixed. So these are the color palette.
(Refer Slide Time: 05:47)

173
Fixing the color palette, even the style of design, there can be multiple options. So this is also
multivariate design options where there are look 1, look 2, look 3 and look 4. So they are
thematically same. Even the color palette is same. The font is same. But they are different
options. So the previous option is much broader. They have much broader differences and this
has minute differences.

So if you recall the process of double diamond method right now we are diverging. We already
have a design solution. Already more or less finalized the design solution, what we are
designing, what is the UI, what is the information architecture and what is the task flow,
everything is decided and the low fidelity prototype is decided. But still we are diverging. So
right now, we are in the second diamond of the double diamond method where we are finding the
correct solution.

So what is the problem that has been identified over here, the need statement is generated. Right
now we are diverging again to identify what is the right answer. So we have diverged when there
is a process of UI fixing. So we have created multivariate options. Then again we converged
because we have done the testing with the users. So there is a convergence process is there and
we are again diverging with the design.

174
So because this has 2 layers of design, one is UI component, another is visual design component,
within UI so there will be convergence, divergence and within also there is a convergence
divergence. So this is not exactly like one diamond diverging and then again converging. So
because this is 2 process, so one is UI component. So then again we create multivariate options
and do the testing.

Multivariate option is a divergence and testing is validating, selection through user testing is
convergence. Again we are creating multivariate options so we are converging again within the
visual communication design component and then after testing we are diverging again within the
visual communication design part while creating multivariate options and we will converge again
while doing the user testing and the selection of different options.
(Refer Slide Time: 08:20)

So if we look at this hierarchy, so this hierarchy is in the first hierarchy, so this is the first level
of divergence where they are thematically different. The next option which is this, this is the
second layer of divergence when we have selected a particular thing and then we are diverging
again, within a same color palette we are again diverging. So within the different theme also we
can create multiple options and this is up to us.

So we can select a particular theme and then diverge to create different design alternative within
a particular thing or we can play with the different theme. So we can select different things and

175
create different options. So the example is this and the example is this where thematically they
are different. Now after fixing the theme again we can create a different options if we change the
colors and other options.

Now this is the process within visual communication design part where we are discussing after
low fidelity. So this is the high fidelity design process. Now I am not talking about the user
testing. After this high fidelity design process then again the user testing is there and then there
can be minor iterations or there can be complete change with the design.
(Refer Slide Time: 09:49)

So first is creation of mood board. So I will discuss what mood board is and which is a broader
visual theme. And then second is selection of visual language. We are narrowing down to a
particular visual theme and then third is design of visual elements. So difference UI elements like
how the search button will look like, what will be the icon style, whether there will be drop
shadows or not. Whether there will be beveled edge in the button or not.

How the scroll bar will look like. All these elements we will design based on a particular selected
visual language and then designing. Now within this process while selecting a mood board we
can depending on the project timeframe of the project and depending on the budget of the project
we can do user testing in each and every stage or we can do after few stages. So after creating a

176
mood board again user testing can be done or it can be done after selection of visual style user
testing can be done.

And after creating visual design element then user testing can be done and after final design then
the user testing can be done. Now how frequently you want to do the user testing or you want to
communicate with the users that depends on the budget of the project and the timeframe. But
within this process at least one so which is after designing the complete thing it has to be done or
it is better always to at least do it within after selection of visual language if that can be
validated.

There are particular visual language then you start designing and after designing then you
validate. So two user testing is good but one is also fine. And of course after each and every
stage it has been done so it will be much more easy and it will validate it more.
(Refer Slide Time: 11:54)

Now the mood board is, it is a collage of different image, text and other visual elements that help
designers to visualize the design style. It is much more broad. There can be 2 different style of
image together. There can be different kind of text. There can be Sans Serif, Serif or different
variety of text can be there and other visual elements, pictures, realistic photographs, animated
like info graphics everything which can capture the mood of this web application or website.

177
Everything can be there. If we select a particular color tone for example blue, every shades of
blue even teal other colors, turquoise and every different colors can be there and which not
exactly pinpointing what exact color shade or the pattern shade of this particular color. Other
different variations of the same range of color can be there. Different text which can capture the
mood, it can be totally different typefaces but everything which captures that mood can be there.

And metaphorical elements for example realistic photographs which has a similar kind of mood
can also be within that mood board. From there we can pick from a realistic image we can start
picking up the color which can capture the style and mood of the design. So this is much more
broad. So it is a collage of which gives the inspiration to the designers and we can deselect many
thing. We can discard many thing from the mood board.

It is not mandatory to select every element which we are putting in the mood board so we
deselect. And so mood board is actually we are diverging. So everything what can represent the
stylistic features can be there within the mood board but lot of element from the mood board
itself gets rejected when we fine tune it. So in the next process it is more fine tuned version
which is the selection of a particular visual style.

So within the mood board there can be, mood board can be eclectic. Eclectic means when
different styles are mixed together, different source of design inspirations are together but when
we are selecting a visual language it should not be eclectic. It should speak a particular design
language. It should have a one visual vocabulary. So this is unified design language one
particular design language. Every element should go with the theme.

So there is a particular one theme from the mood board. It can be based on one which is brand
identity. If the brand identity is already there and within the mood board we might have different
colors of similar tone but what exactly which color tone represents the brand identity that can be
selected if there is a established brand identity. And next can be target audience. Based on the
target audience if the brand identity is not that important in that particular web design.

178
So the target audience their perception what kind of color they like that can be highlighted within
the design. So based on what kind of color and it can come from the persona. When we build the
persona we understand the user group and what is their liking, what kind of visual design they
will like, what is their behavior. So based on their behavior, based on their social cultural
background we can select few colors which will represent and which can connect with them.

And all these points will be dependent on what kind of website or what kind of web app it is. If it
is trying to portray the brand identity then brand identity becomes more important. If it is trying
to connect with the users for the better function of this application, then user will be more
important. Users behavior and liking will be more important as the selection of visual style. Then
it can be a metaphorical.

So if it is something to do with rejuvenating people or if something to do with education then a

particular metaphor can be more important and that might give the visual style. So that metaphor
can create the visual palette. Or if it is like a cafe or restaurant so something which emphasize
gluttony or something which emphasize the craving for food so that particular colors might be
more important.

For example if I select a color tone of warmer colors yellow, orange which are more common in
the food will be much more appetizing to look at. So rather than using colors like blue and
turquoise and teal. And if we think about travel website then it might be the natural colors, green
turquoise, teal, blue might be more interesting to go for in terms of travel website. So these
metaphorically represents a particular work, a particular function.

So while we are designing a restaurant’s website and while we are designing a travel website so
this might be metaphorically different. So it can be many other ways to create ways to use
metaphor as a selection element for visual style. Now another can be the contemporary visual
style. Right now we will discuss the contemporary visual style after few classes. And we will see
how visual style changes overtime.

179
So some style might be very old-fashioned, some style might be in and we are in the
contemporary era. And if you want to connect with the old school of thought, old style of visual
style or if you want to connect with the contemporary today’s visual style so that might change
the visual palette and that might affect the selection of typography, selection of color, design of
the buttons, logos and everything.

So what era you want to portray that will be dependent on the contemporary and other visual
style. So these are the main parameter. There can be many other parameter based on what you
want to select a particular visual style from the mood board. Now the next process will be
designing of visual element. Now after we select a particular visual style, we know what kind of
visual language it will speak, what type of theme it is.

Exactly pinpointing that we will start designing all the visual elements. Within the visual
elements what will that be. So it will be a visual palette with all the visual element which has the
interface design elements which will be the selection of a particular typography which will be
there within the website or mobile application. So the typeface will not differ if we change the
page we go to the next page, typeface should be similar.

Or same or exact typeface height everything will be finalized in this stage. Now it will have a
icon, proper icon, buttons, headers, and pop-up windows etc., every elements, scrollbars, search
button everything has to be designed first and we create a palette. Now next process will be we
start designing, putting all these design element which we have created. You can create this in
InDesign or Photoshop or Illustrator. Create those within a layer.

Now start taking those from within the layer where you have all this buttons. You start taking it
from there in Illustrator or InDesign or Photoshop. You start using those the visual palette you
have created and now you start putting those in the wire-frame which has been created in the
previous low fidelity design process.
(Refer Slide Time: 20:19)

180
Now this is how the different stage might look like and from each and every stage you can create
multivariate design options. So if we create multivariate design options just from the mood
board. So this is the option which I was showing in the first where there is a thematic variation.
So this is website designed for delivery. So there can be delivery of food, there can be delivery of
books. So they have first option is a realistic photo of the delivery.

Next option it does not even show and the third option is a very abstract version. So all this
options are there in the mood board, the collage which has been created. So from there it
bifurcates and creates multiple different options. Now from the next style when we have selected
a particular style and particular theme, particular color palette and particular typefaces from there
also there can be multiple options we can create.

So it will look like this. And after finalizing the visual style, maybe the color palette and the
theme then also we can go for different options like this. So we can play with different drop
shadows and different style of icons. From here we can also deviate. So from where we are
deviating that can be from each and every stage we can create multiple options. So if you are not
sure about the color and the identity then we can deviate from the mood board.

And if you are deviating from the mood board and creating multivariate options so we should
test it with the users. So what type of design works. If you are very sure about the brand identity

181
typefaces and color palette then we deviate from the next stage and go for the testing. So what
type of color palette will look better and create multivariate options from here. And if you are
again very sure about the selection of color and typefaces then we can deviate from the next
stage which is finalizing the color.

Then we are creating multiple options. So that options, selection of color option we are not
giving to the users. So they have a particular color. Or if you are deviating from the theme, from
the mood board, then we are giving more options of selecting a theme to the users. So how much
involvement you want from the users and how much voice of customer, the feedback from the
users you want within your application that also differs.

So if you want more feedback from them, the higher percentage and more importance of the
feedback from the users then you deviate from the mood board and ask the users what kind of
theme you like. But if you want to have more control as a designer then you control all the
design themes and colors, then you go for a testing only for the different color tones and buttons
and then go for the user testing.

And that will be more of a functional testing whether the button looks like button or not. So you
are not giving visual design options to the designer. You are not opening the options of selecting
a visual design style by the user. But that is also fine. It depends on what kind of design it is. So
all the time it is not mandatory to give the visual design options to be open for the selection by
the users.

So it depends whether we are giving more importance to the target audience or more importance
to the brand identity or metaphor or contemporary design language. If you are giving more
importance to the brand identity metaphor or contemporary design language then the visual
design option selection process should not be open by the user testing. It is not required.

And if you are giving target audience their social cultural behavior, their psychology higher
importance then you should give the option of selection of a color theme or selection of the

182
identity of the design by the users. Then you have to do the user testing in the previous stage
while you are selecting the color tone, typefaces and those design elements.
(Refer Slide Time: 24:56)

Now creation of mood board. Mood board might look like something like this. It can be much
more broad. So here we can see designers are selecting a color which is blue and red. But there
are different tones of blue, different shades of blue. There are realistic pictures. There are some
graphic images. There can be more. So this is also realistic picture and with a drapery here and
this is a realistic picture and so this is a mixture of realistic picture and the graphics.

And we are seeing lot of stripes and flat color. So that is fixed within the mind of a designer.
There can be if it is more open, then there can be different gradient tones and other apart from
stripes there can be checks, there can be other prints. There can be floral patterns. It can be much
more broader or it can be even narrower. So here we are seeing different color variations but the
color variations are there in realistic image as well as in the graphic image.
(Refer Slide Time: 25:57)

183
The next process is selection of visual language. So here it is not a mood board. This is here the
visual language is fixed. So this is the next step from the mood board. Here everything it does
not have a different stylistic feature. So it is not realistic photo. It is not amalgamated or mixed
with the graphic images. So everything is computer generated image over here and it is further
narrowed down.

Because here within the computer generated image, so you are seeing a particular color tone
emphasis of orange and then orange with grey tone is there. It is not exactly one typefaces. But
all these typefaces are speaking one particular language. So they are elongated. They had a bit of
a retro look. Not very minimalist modern style. So it minimalist or contemporary or today’s
style. So it has a bit retro style and then even the icons has a particular style.

So it has a border from outside. So every icon has a border from outside and a flat color. So all
these icons speech bubbles and typefaces has a particular one visual language. So they are not
scattered as mood board. So the mood board option was given before. So mood board can be
much more scattered. So if you see some mood boards through net you will understand what
mood board is and what is the different between mood board and selecting one particular visual
language.
(Refer Slide Time: 27:34)

184
Now next process will be from here when you are finalized your design language, you start
designing all the UI element. So here you can see the first option if you look at carefully the first
option is for the laptop version. So the next option is for the iPad version and the next option is
for the mobile version. So this is responsive. So you can say this is a responsive web design
options and within that he is designing all the tabs.

And when it will be clicked, how will it look like when there is a mouse hover. You are just
hovering the mouse, how will it look like and when you are clicking, tapping how will it look
like and all these buttons in different paradigm, different interface how will it look like
everything will be designed in this stage and then you create a palette of design palette and then
you start putting all these buttons, search buttons all other UI elements into the design.
(Refer Slide Time: 28:36)

185
It also will have a, you have to select a particular theme color. So a theme based color might be
this lighter tone or a lighter shade and different shades, variation of different shades, one
variation of different tint which is closer to that and other variations from different value. It can
be lighter, it can be darker. You have seen the search button is darker. And these are lighter of
the same color and there can be one color variation which is slightly different to break the
monotony.

But it should not be, but together it has a same visual color palette. So based on this we are
creating a color palette as well as the palette for UI elements. And next process will be putting
everything and creating the high fidelity design. Now visual language style indicators what we
are discussing earlier that what will be the parameters to identify what should be the visual
design.

So when after creating the mood board the next process when we are finalizing the visual
language then what should be kept in mind. So we have talked about this.
(Refer Slide Time: 29:58)

186
So one is already established band identity. Next is contemporary visual style. Next is the target
audience and next is the metaphor. So everything might not be very important for a particular
project. So what kind of project is, what is more important, whether already established brand
value is more important or not. So when the brand is already there and now we are creating a
web application or mobile application or website of that particular brand then brand will be very
important.

Or now if there is a new website some startup launching then because they do not have that
brand value already created within the mental model of the user group then brand will not be
important because they are going for a new design as a startup. So then contemporary visual
style might be important. Then target audience might be important if they want to connect with
the particular part of particular user segment.

They might be important or a metaphor can be important. Metaphorically whether it is a travel

website or educational website. A very formal or informal, so what kind of design they want to
have, portray and that might be important. So if there is a already established brand then brand
identity, the logo of the brand has to be highlighted through the design.
(Refer Slide Time: 31:25)

187
So for example McDonald, McDonald is not a web application. McDonald is not a mobile
application. It is a chain of a food. So they have a particular color of the logo. So it has a aim for
McDonalds which is yellow and then on the red background. So McDonald’s color is red and
yellow. That has to be emphasized when we are creating a website for McDonald. So McDonald
already because it already has a established identity of the logo so that will be emphasized within
the website.

So if we look at this, and the designer can promote the food items which McDonald already
have. So on a black darker background. So all this designs are actually acting as a background
and the main product of the McDonald’s are getting highlighted. And again we are seeing this
colors of McDonald’s in the product, in the logo and also the theme of this background which
together if you look at this design, the yellow, red color is dominating and because of the neutral
color palette of the background.

Now if you look at the Starbucks logo, in McDonald they have not added different colored
button. Everything is white and only the logos are there and the product itself has McDonald’s
logo and brand identity that has been highlighted. Only here if you look at the learn more is the
same red tone which is there in the logo. So that is only there when we are clicking on the next,
that might be the important button they want people to click.

188
And other important button will be here which has a high contrast but still not a high contrast
black and white as the value contrast but still it is more subdued. But here if you look at the
Starbucks, Starbucks again is a which is not established as a website but that is a coffee brand.
So when we think about Starbucks a coffee comes into our mind. So website should follow that
particular color. So here we can see the Starbucks mermaid has that color green and white.

So here we see this green patch is added to highlight the Starbucks logo, Starbucks color of the
logo and here we are seeing lot of green colors on white background which also replicates the
identity of the logo. And a very neutral palette is added which is grey and black fonts and the
image from the Starbucks which also has a green tone within. And the coffee color which is
brown. That also is, Starbuck is not just the logo. Also coffee comes into mind.

So coffee’s color which is brown is highlighted in the main photo. So it has a tone of brown and
yellow which also mimics the color of the coffee.
(Refer Slide Time: 34:31)

Now next is contemporary visual style. Particular brand might be very established. They might
have a particular visual style but still sometimes it is required to change the website as well as
the icon and different UI elements. So if you look at Google’s different tools like different
applications like Gmail and other options of a Google search button and Google drive, all this
options got changed recently and they have gone for a change of the Google’s logo as well.

189
They have not changed the color because if the color is changed then Google’s identity will be
totally changed but still the logo has been changed. So it is based on the contemporary visual
language. So this is the earlier logo of Google. Now this is the new logo of Google. So Google
also talked about the material design which Google started of visual design style which will be
discussed when we discuss the contemporary design style.

So material design for Google and which also android applications use the similar kind of style
and apple has a different style which is skeuomorphism which will be discussed. They have a
different visual style. So moment Google is talking about the material design style which is
minimalist, very modern and crisp their logo was not matching with the material design style. So
they had to create their different logo. So this is one process.

This is a photograph of Google design team discussing their new logo. So they have also created
multivariate options of design. So you can see this how they are discussing different design
options. So you can see the different Google logo design for the new logo design of Google. So
they were discussing this. They have created multiple different options for this multivariate
design style. And then they have selected through their own process of selection.

So it might not be user testing. It might be discussion, focus group discussion among the experts.
It might be other process. So that we are not going deep into that. But through creating
multivariate options, they have selected a particular logo which we are seeing today and when
the Google full logo is there and also Google’s icon is there which is just G and then within that
different colors are created. So this is much more minimal.

This has a pure geometric patterns than the previous one. So this has a more curvilinear, more
design elements there and this is Sans Serif and this is Serif. So they have changed the visual
style based on the contemporary visual language where minimalism is more emphasized through
the visual design style of material design.
(Refer Slide Time: 37:29)

190
Now visual design style indicated can also be the target audience. So what kind of target
audience they are and based on that the color of the website can be highlighted. So this option is
a brand, this is Blush which is a brand for makeup. So the target audience is female target
audience are their target audience. So the type of color which is feminine and can be attached
with the mood of the female, that is highlighted over here.

So you can see the millennial pink which is tone of skin tone and then the pink is getting
highlighted over here with some glitter of gold which gives a vive of makeup. So that has been
created as a theme color. But if you look at the brand logo, so this is just on grey. So grey is not
highlighted rather than the other color which is pink and gold has been highlighted over here.
Even in the product, so the pink color is highlighted within the product.

And surely the color of this makeup also comes in different other colors but this colors goes with
the theme. That is why they have photographed those particular makeups which has the same
color tone which goes with the theme. Now we can also look at the other options which is Nike.
Nike’s logo is just a tick which just have a figure-ground relationship which is it can be white on
black and can have a different color.

So the color is not important but the style of design should give us sporty look because that Nike
design shoes which are very sporty, which is not formal. These are sports shoes. So the style of

191
design if we look at, so it has a very minimalist crisp style, the drop shadows and the angular
logos, geometric patterns and the color which is coming and the typefaces are very sleek and
contemporary which goes with the sporty look of the design and it also has a very black, white,
grey color tone which gives a very neutral color palette and the design of the shoes are getting
highlighted over here.
(Refer Slide Time: 40:00)

Now it can also be metaphorical. For example if this is the website which talks about green and
sustainability. Those are the theme. So a very lush green light bottle green, it is not exactly a
bottle green but lighter version of bottle green which gives a very rejuvenating feeling. That is
the theme color highlighted over here. Other background colors are white and very dark grey, not
exactly black, which highlights the green, which is also there in their logo.

But also this photographs and others which goes with the theme of green magic which is the
metaphorically they want to represent. Now here also we see website of a travel website where
the photograph of the nature is getting highlighted over here and the theme color is blue which
also a natural color and different shades of blue and grey, natural photographs are there. It is not
graphic image is not highlighted. The natural photographs are more highlighted over this design.

So this logo if the travel logo if we look at so logo has if you look at here, logo has yellow and
blue, both the colors are there. But they have selected blue over yellow to give a more natural

192
feelings. But yellow because of this logo they have used the yellow color in different part so that
this acts as a accentuation color but the theme color is blue. So that gets highlighted over here.

So these are the process, these are the broader overview of why we have to think about the visual
communication design and what is the broader process of visual communication design. Now
onwards we will start discussing few topics like design principles, what you have to follow
within the design process. So how the balance proportion and everything will be have to be
achieved. Next what are the contemporary design styles that is very important to know.

And what are the different typefaces which goes with the contemporary design style that will be
discussed. Now later on after we complete the high fidelity design process we will start
discussing what is the process of user testing when we have already created the multivariate
options.

193
 User Interface Design
Prof. Saptarshi Kolay
Department of Architecture & Planning Engineering
Indian Institute of Technology, Roorkee

Lecture - 11
Visual Cognition

Welcome students to the online NPTEL course, User Interface Design. In the previous class we
started talking about the how we can translate the low fidelity design to high fidelity design
through the implementation of visual communication part into it. So before that we talked about
how to create the information architecture. From there how we can create the wire-frame and
now we have to apply the graphics into it. So that is the visual communication part of the design.

So visual communication, when we have to do the visual communication part and we apply we
move on from the low fidelity which is the wire-frame from the high fidelity visual design which
is the GUI of the webpage or web application. So there we have to follow some visual cognition
principles.
(Refer Slide Time: 01:17)

So how this visual cognition principles work. So first designers artist create a plan of
arrangement of visual elements which form a visual composition. Now next phase is the visual
arrangement or the visual composition is perceived by the viewer or the users and then they

194
create their mental perception which is called mental model and then they tally their mental
model with their previous perception.

And then they perceive the visual pattern and from there, so the process of this perception is
based on some visual cognition principles. So today, we will discuss about these principles and
how majority of the users can perceive this visual composition. So there are some laws and also
there can be some anomaly. For example it can be spatio-temporal deviation for few user groups
and that can depend on the persona and scenario of the different user groups.
(Refer Slide Time: 02:24)

So this is how the process works. So there are elements of design and from there with application
of the principles of design, designers can create the composition which can be a web application,
which can be painting and that gets perceived, when users look at it they perceive and then there
is a visual cognition process happens here. So designers when they are creating this design, they
have to foresee what can be the process of cognition in terms of better design.

So if they can foresee this process after seeing their design what kind of cognition can happen for
a particular given persona and given scenario and where there will be a particular task flow in the
web application or in terms of any other communicative design. So designers here have to
foresee what type of cognition should happen.
(Refer Slide Time: 03:24)

195
So that is why this principles of this visual cognitions are very important for designers to
understand. So designer Donald Norman tells that there are 3 levels of perception. So users
perceive the design in 3 different level. So these 3 different levels are visceral, behavioral, and
reflective. So visceral and behavioral levels are the subconscious level which is most of the cases
common for different user group and which might not vary for different persona.

When you are creating a different persona so these two levels visceral and behavioral level might
not vary for different persona and might not vary for different users. But there is a reflective
level which is much more and the next level where there is a cognition process is more. So there
is a more cognitive load over here and then this reflective level of perception happens in the next
level. So the visceral level of design is a visual part of design where all this, most of the people
and throughout across the persona, people will perceive the design in a particular way.

For example if we look at the color red, for most of the people it will generate a sensation of
danger and all other principles like gestures principles and visual cognition principles which are
throughout across the persona which will be similar fall under this visceral level. Here the
cognitive load is very less and we just after perceiving looking at the design people will perceive
that in their mind.
(Refer Slide Time: 05:07)

196
And the next level of design which is behavioral level and this is more of a functional attribute.
So this attribute tells people how to use this design and how to interact with the design so the
semantic part of the design is involved here.
(Refer Slide Time: 05:24)

And the next level of design is the reflective level of design and which is contextual attribute
which might vary based on the spatio-temporal attribute. So for example design style for a
particular person might, the liking for a particular design style might vary for a person who are
devoid of a spatial attribute. For example Indian persons visual liking might vary from a
Scandinavian user. And it might also change overtime.

197
So what was the design style of 1920s which is beginning of modernism might vary from 1980s
onwards which is mostly postmodern. So because of this level of design, reflective level, the
design style changes and the perception of a design style for different persona will differ.
(Refer Slide Time: 06:20)

So first we discuss about the visceral level of design. So within this visceral level of design there
are some design principle. So the basic design principles which is the 5 design principles, unity,
emphasis, proportion, balance, rhythm is the design principles which will form within the, which
will come within the visceral level of design. So I am not discussing this because this is very
basic and most of you will already know.

So you can read this book by Lauer and Pentak, Design Basics. So all this 5 principles of design
and how you can achieve this with the help of 5 design elements of design which is line, shape,
color, texture and texture pattern. So there are 5 design elements, with which you can achieve
this design. With the permutation combination of this 5 design elements this design principles
can be achieved.
(Refer Slide Time: 07:23)

198
Now next we move on to the another design principle which will fall under the visceral level of
design which is Gestalt’s principles. The Gestalt’s which is a German language which literally
translation means shape and in this Gestalt’s principle which is perceived as a unified whole and
this is derived by few German psychologist around 1920s.

So there are 5 principles which falls under Gestalt’s principles and which talks about how people
will perceive certain composition as one. So this 5 principles are similarity, continuation,
closure, proximity and figure ground relationship.
(Refer Slide Time: 07:58)

199
So first let us talk about the similarity. So this occurs when different objects look similar. They
are perceived as one. So for example if you look at this e-commerce website when there are
different products shown in the product search page, there are different product shown which
looks similar and without looking at the details what people have searched over here if you just
look at the web page then it will perceived as one and similar objects and it can be clubbed
together.
(Refer Slide Time: 08:30)

So if you just look at the web page over here and you psychologically divide the webpage into
different fragments. So this can be the header and this can be right hand side information bar and
all this part will be clubbed as one and then there is a scroll bar. This clubbing is happening
because of the space and also because of the design but because of the product as well. But
within that if there a different product comes maybe we will not psychologically perceive this
area as one.
(Refer Slide Time: 09:06)

200
Now the next thing is continuation. Continuation occurs when the eye is compelled to move
through one object and continue to the another object. Because of this the proximity and
similarity of this rectangles, we perceive this as one and our eye is moving through this lines and
then we read this as one logo. So here many Gestalt’s principle can be applied together. So this
example which is designed by a famous logo designer Paul Rand.

This is not just an example of continuation. This is also an example of proximity and this is also
an example of figure-ground relationship and other Gestalt’s principles together. But here we can
see this lines are getting psychologically we create this lines and our eye moves and together we
perceive this as a unified whole.
(Refer Slide Time: 10:02)

201
Now the next principle is closure. Closure occurs when an object is incomplete but our eye
moves from one line to the another object and create and encloses this particular shape. For
example this is WWF’s logo, panda chi chi. And here when we look at this shape, this is just a
composition of black and white, but psychologically we join this line and create this
composition, complete the composition and we perceive this as a panda.

Otherwise if there is a line which exist and psychologically this line exist, so this is called a
psychic line which is not a real line or gestures line. So there are 3 different types of line design.
One can be a actual line which is a gesture line and then one is a actual line. Then another can be
a gesture line. For example if I create this kind of pattern. So there is a gesture line around this.
So this actually is not a is a very scribbled shape.

But here this will be called as a gesture line. But if there is no line over here but we just create
these two line and psychologically connect this, this is called a psychic line.
(Refer Slide Time: 11:21)

202
Now next principle is proximity. This proximity occurs when elements are placed close to each
other and psychologically we connect this. This is happening because of the close proximity.
Now if you look at the Google search bar and if you click at the image and this kind of web
portal we will see and this is the top part of it. Now if you look at so this, all these elements are
psychologically can be clubbed together.

So these are different attributes of information architecture where their functions are similar. So
if you click on all, so all image, video, and everything will be there and then image, video search,
new search, map search and other options are there. But this is a different state. This is just
divided by the differentiation of proximity. Now this is another state which the functions will be
different.

Then UI transitions and the users expectation when they click on this tab will be different just
because of the difference of the proximity. But if you look at the font size, font color everything
is similar and there is no other different design element which divides this tabs.
(Refer Slide Time: 12:44)

203
Now another Gestalt’s principle is figure-ground relationship. So eye differentiate the object
from the surrounding and perceive one object as a figure and the other part of the composition as
ground. So first let us have a look at these two design. So this is a Formula 1’s logo. So here
there is a dilemma in the figure-ground relationship. So when we first read the letter F, so that
acts as a figure and then this whole white acts as a background.

Now when we look at this design element which does not convey any meaning to the designer
then this 1 acts as a figure and this F and this element which is just a design element but does not
communicate any information psychologically. That acts as a background. So they create a
dilemma of figure-ground relationship and this changes. When first we look at F which will be
perceived as a figure.

Then we skip this white part and go to the red part which does not give an information and then
we perceive this 1. And similarly here in the FedEx, first we look at and read the information
which is there and this is the typographic logo and always the typographic logo strikes us first.
So if there is a object which is in the logo which is something is written. So we read that first and
if there is a image hidden within the text which will be our next level of cognition.

But within a page if the image is a very photorealistic image, for example if the image is more
figurative than abstract then image will be read first and then the text will be of the next

204
hierarchy. But here because of this abstract arrow this is on the next hierarchy of the textual logo.
So first we will read the text of this FedEx and then we see there is a gap between E and x which
is talking about arrow.

So this gives the expression, metaphorical expression of FedEx is something to do with the
movement and this is. Then this arrow conveys that this is a movers and packers company. Now
here this is a famous painting by Escher. So here we can see a dilemma of figure-ground
relationship. From here we start looking at the image and then the white part which acts as a
background becomes a figure over here and the black part becomes the backdrop and here the
white part becomes the backdrop and the black color becomes the figure.
(Refer Slide Time: 15:46)

The next part is, the next level of design is the behavioral level of design. So most of it is
functional attribute and whatever we have discussed earlier from information architecture to
create the information architecture from there to create the wire-frame or the paper prototype, all
these parts will be there within the behavioral design.

So mostly the UX part is taking care of the behavioral design and how we organize the
information and how we create the information architecture, the hierarchy of the information that
is the main component of the behavioral design, the functional part of the web application and
how the different task will guide the different task of users through this information architecture

205
that is the behavioral part. And so this part which we have already covered which is the major
part of the behavioral design.
(Refer Slide Time: 16:41)

But there are some visual communication attributes which can enhance the behavioral design
with the visual emphasis and all the principles which we are discussing in this lecture. So one of
this behavioral design which can be a visual communication design component is the
breadcrumps. Breadcrumps is terminology comes from a fable of Hansel and Gretel where they
made their trail with the bread.

And initially they made with the stone and when they made with the bread and they got lost. So
this part of this UI UX design is called breadcrumps which we can transfer this wire-frame into
visual communication with the shape and position of this tabs. So this tells us that this is
Snapdeal’s mock design which I have designed. So this tells us that this is glowing. So we are
right now in men’s footwear.

Before that this is within the fashion and within the category we have to select which category is
this and next level is the fashion and from there we came to the men’s footwear. Right now we
are at the men’s footwear. So if you want to go back to the category so we have to click on this
button. So this gives us a trail from where we have travelled. And this gives the information of
the information architecture at which level of hierarchy we are in.

206
So if there are 3 breadcrumps we have gone 3 level deeper within the information architecture.
So that information will be shown from here which is a visual communication design part. So
another example of breadcrump which might not look like a typical breadcrump of iOS platform
which might be as simple as and minimalist as this. So this is the breadcrump of Amazon. So it
can be seen that this part is glowing.

So we are right now in art and design which falls under the school book secondary segment and
which is part of the larger umbrella of books.
(Refer Slide Time: 18:49)

Now there can be another way to inform people, inform the user through this metaphorical
design and other ways of visual communication design. So this is an part of Pizza Hut’s UI
portal. So this is what it talks about whether your pizza is ready or not and how long will it take
to deliver the order. So that information you can take from here. But this metaphorically gives a
sensation and visual sensation of a pizza and also it talks about the timeline.

So that is why it is designed like that. So this does not come from the UI UX part or the
information architecture. This is a visual communication component of the design. So right now
it is clear that this is in the process of placing the order and these are the next steps after which
the pizza will be delivered. So this is MakeMy Trip’s similar kind of timeframe which is

207
definitely not breadcrump but this is a timeframe just to give the information UI in which stage
of the task flow.

So within the task flow there can be, this is also giving the information of in which level of
information architecture you are in. So this tells you that you are in the second phase of
information architecture. The first phase reviewing the flight is done. Now the traveler’s
information has to be filled in and the next process will be the payment. Now let us come to the
next level of design which is reflective level of design. In reflective level, so this has a spatio-
temporal attribute and this will differ from different persona.
(Refer Slide Time: 20:44)

So this is the model which is given by Donald Norman in his book, Design of Everyday Thing.
So he is talking about there are 3 different component to create this reflective level of design. So
one is designers conceptual model. Another is user’s conceptual model which is generally
connoted as mental model of user. And another is the system image.

The system image is what it is created by different products or in this case the product can be
web application and UI UX application and designers conceptual model is what designer create.
And user’s conceptual model is already what user have in their mental model. So this is a
dynamic model.
(Refer Slide Time: 21:31)

208
So whenever designers create something they have to respond to what user’s already might have
within their mind. So they have to perceive what is the mental model of the user and whenever
they create this design this comes within the system model or the system image and that people
see, when the design is ready that people perceive that and then this system image again change
the visual user’s mental model.

For example if there is a new product which is designed by designers conceptual model and
when this product launches and this is available within the market, people see the product and
then they create this product again has some influence to change the visual perception or the
mental model of the user.
(Refer Slide Time: 22:26)

209
So for example if you look at this product of a car, so just after 1920s in post industrial
revolution, this was the first model of Rolls Royce and that time this might be the perception of
the mental model of a car. Now if we move on to the next level which is the first phase of
modernism, this is the Ford Mustang car which is parallel to the Bauhaus Movement and the
Israel Movement. So here we see a purity of the geometry.

Here in the first model we see lot of different elements are added and there was no visual need to
create all these elements as a unified whole. For example there are different lines, curvilinear
lines, the headlight is different and they are added together to create this design but in the Ford
Mustang another parallel car was this Volkswagen Beetles which is totally circular.

This Ford Mustang has rectilinearity and then they come mostly in the primary color which is
red, yellow and blue and along with black and white color and this has a similarity in the design
which is in this case this is rectilinearity, in case of Volkswagen Beetles it is circular. The next
layer, when the next time moved on and this is called streamlining and then aerodynamics was
considered for the faster movement of the car.

And now we belong to this era so today if we talk about car, users mental model will be
something like this. So if designer want to design a car for today’s context they have to go with
the mental model of today’s car which is in this case will be something similar to this and people

210
will expect a car will look like this if it will be sold for today’s time. And maybe in the futuristic
concept car, so many of the companies are designing the futuristic concept car.

They do not look like today’s car because they are designing for the futuristic car. So they have
to have some, they have to extrapolate the design style and perceive something which will might
come in the future and which will not definitely look like today’s car. So they have to change the
mental model and which will not, there is a intentional shift from the mental model of users of
today so that it looks like a futuristic car. This is one futuristic car designed by Tesla.

So this intentionally does not look like this. And now if you want to design something for a set
design or some cinematography and which depicts a era of the previous time and then the car and
all the elements and the set should not look like today’s time. You have to go back in the time
and take that tribute of the visual style of that particular era and create that.
(Refer Slide Time: 25:27)

And similarly in the UI UX, so there was a time when first the pixilated image was there and one
of the famous game was Super Mario. That was the style of that time’s design and the visual
style and next when the iOS launches the skeuomorphism style, so this was the initial iOS
design. Then the next part of iOS design when the apple has, the next version of iOS which looks
like this.

211
The improvised version of skeuomorphism and now it is the Google’s material design which is
much different and more minimalist than this. So this is more texture heavy and this is more
color heavy in the design.
(Refer Slide Time: 26:07)

And similarly, it can also be especially different. For example if some product works in some
particular area it might not work for the other area. So there is a different visual style for
different continent and different country. So there is a Japanese visual style is substantially
different from the Scandinavian design style.

Japan might have much more vibrant color in their visual palette which will work for the
Japanese target audience but might not work for Scandinavian target audience. For them the
color will be more subdued and less vibrant color will work better for them. So this is one of the
two of this brands of Finland. One is Ikea and another is Marimekko which this company makes
the print and they have branded the Helsinki and all the Finland’s has a visual identity which is
combined with the Marimekko’s print.

So we can see the Marimekko print within the Finnair as well. And Helsinki has a visual identity
which has 2 different color which is navy blue and this green. So within the city also they portray
this color palette. So that has a visual identity of the city as well as the which is the capital of the

212
Finland and that also creates the identity of the country. And even if we look at Switzerland, the
Swiss design company has a Swiss style. Swiss visual palette also have a particular style.

And many of the Swiss company they follow this color palette. This Swiss style was in the pre-
modern era. This Swiss visual style evolved and this country is sticking to this style and even if
for today’s different logo they did not change the color for the brand which portray the, which
comes from this country.
(Refer Slide Time: 28:14)

Now there can also be a eclectic mixture of all this spatiotemporal attributes and you might not
need to stick to a particular time when your expression might talk about different timeframe and
you want to talk about different spatial attributes. So this is an example I am giving from
animation which is done by Nina Paley. And her interpretation of traditional story of Ramayana
in today’s time, she wanted to portray that.

And what would have happened if the similar story of Ramayana is there in today’s time. And
she was talking of the feminism and how Sita will react if Rama have done the same activity
which she have done that time. So it is a different interpretation of today’s interpretation. So she
have added different visual style. One from Disney style which is there in, which is an American
style. So there is also a parallel story, couple of America.

213
And there is a parallel story of Ramayana and these two parallel stories are together. So this is
available in net. You can watch this animation. And another visual styles are taken from India
which is miniature painting by Mughal miniature painting but this is not an exact depiction of
Mughal miniature painting. And other depiction is here which is animated version of Indian, this
is an Indian animated version. This is not a Disney style.

And another versions are taken from different traditional Indian style which is one style is this
definitely Mughal miniature painting. The other style is taken from this chaya natak of Southern
part of India. So she is also mixing the different parts of Indian traditional art. And also there is a
pop style of Indian calendar art which is a very kish style and which also talks about the eclectic
nature of different style. So there is a spatiotemporal connection of in the story as well and in the
visual style as well.
(Refer Slide Time: 30:31)

So another principles which we have to discuss how people read the visual information and
visual and textual information when it is presented in front of them. So this is called Gutenberg’s
principle. So Gutenberg first just after industry revolution he invented the printing press and
when he started printing different printed documents, first he printed, the Bible was printed first
and there were many pamphlets and other posters.

214
Newspaper started getting printed after industry revolution. So he have developed a principle
how people read, how people perceive when there is a textual information. So this principle is
based on the people who read from left side to right side. So this will not be applicable for the
people who is conditioned to read Urdu or Arabic which is read from right side to left on the
opposite side.

So generally we read, the other people who read from left to right read from left to right and then
from top to bottom. So there are two vectors. One vector is left to right. Another vector is top to
bottom. So the resultant vector will be from this quadrant to this quadrant. So we are dividing the
quadrants like 1, 2, 3, and 4 like this which is not the traditional way. From the first quadrant to
the fourth quadrant will be the resultant visual vector.

So the primary optical area will be the first quadrant and the next emphasis will be on the fourth
quadrant and second and third quadrant will be less highlighted than the first and fourth
quadrant. So the most important information should be given in the first quadrant and the next
important information will be in the fourth quadrant, the next will be second and then the least
will be the third. Because first vector is from left to right.

So second will be more important than third quadrant. Now, if you look at the painting, so
painter should use this principle in their benefit. So when there is a textual document, so it
should be designed like this. For example newspaper, the most important news should be in the
first. Then fourth should be used for other type of information which has some value and then
second and third. If this is followed then it might differ in the visual composition.
(Refer Slide Time: 33:18)

215
So this is a composition by Kandinsky which is part of Bauhaus Movement which is
contemporary to their style movement and this composition does not convey any meaning. So
this is only taking about, is an experiment of user’s eye movement. So what he is doing is, the
intention of this composition of the painter is to increase the attraction value and the attention
value.

So attraction value is the value for which people the user get attracted to the composition and
attention value is the value for which user spend more time in the composition. So if you look at
the first composition, this first quadrant is heavy and this definitely has a strong focal point. Now
if we look at the, if we go by the Gutenberg’s principle this quadrant should have been really
heavy. But he is not doing it.

He is making the second quadrant heavy and then there are lot of circle and which if we look at,
so this yellow and blue has a higher contrast. So this quadrant becomes the next heavy quadrant
and he is leaving the fourth quadrant in the less visually heavy composition. If he makes this
quadrant more visually heavy then people might go to the next composition and will not stay in
his painting.

Now another principle he is applying, he is creating lot of line which goes against the visual
vector. So these lines if there is a emphasis of this line then it will cut down this visual vector

216
and eye will travel in this direction which will not let the user go to the fourth quadrant. So this is
one composition and another composition what he is doing is again following the same principle
and he is making second and third quadrant heavy so that they do not go to the fourth quadrant
and move towards the next composition.

So there is another composition pattern which works from here is the reverse C composition. So
if there is a C composition people will start looking at it and will go to the next composition. If
there is a reverse C composition, eye will rotate here. So in many painting you will see this
reverse C composition where it will start from quadrant 1, quadrant 2 and leave you to the
quadrant 3 so that you go to the quadrant 1 again. But if you leave it to the quadrant 4 then it
might move to the next composition.
(Refer Slide Time: 35:45)

Now let us look at in the web application, in web application it should be absolutely opposite. So
the intention of web application is the task has to be done faster. So if there is a, there are many
products which are competitive products. For example Snapdeal has many competitive product,
competitive product in the sense I am talking about the final product which is the web
application.

For example Amazon and other e-commerce website so which are the competitor of Snapdeal.
So for example in order to become successful, Snapdeal has to give a very smooth transition of

217
the task flow. So the intention has to be within the least amount of time people have to fulfill
their task so that their frustration level and the user experience will be better and the frustration
level will be less.

And if they are stuck in some process, they might leave the web application and go to the parallel
web application which is the competitor. So for example there is a color which is Snapdeal’s
color which is there repeated in the fourth quadrant which is the final function of this task flow.
So within this page which is again within the breadcrump you can see within home the TV,
television and the user have launched into the final product which he wants to purchase.

So first action will be here which starts from the first quadrant which after giving this
information he comes to the first quadrant and look at the TV and inspect the product and then he
looks at the details of this and the price and then there is two option, add to cart and buy now. So
a Snapdeal definitely want to promote buy now than add to cart so buy now is highlighted and
has a much attractive color which has a connection of the Snapdeal’s color.

And add to cart will be not commercially viable for them. That is why the color of add to cart is
different and more subdued. These are the things which can be achieved through the visual
communication and it is not part of the UI, the information architecture. And the buy now is
almost in the fourth quadrant and it has lot of white space which is negative space and giving this
and highlighting this color.

So if you look at this tab which is buy now which is surrounded by white space and a neutral
color and add to cart is actually fading within this white space and sometimes can be perceived
as a background and this by now can be perceived as figure. So they are promoting this user to
click on the buy now button.
(Refer Slide Time: 38:34)

218
And if you look at this newspaper which is a very good example to follow Gutenberg’s diagram.
So here the most important news will be definitely in the first quadrant just after the logo and the
name of this newspaper. But in the fourth quadrant, in the newspaper, this fetches the highest
money because everybody will look at the fourth quadrant before turning the page. That is why
in every newspaper if you look at, the fourth quadrant is used as the advertisement.

Because that fetches the highest amount of money. And advertisement people also check how
many people have read this advertisement and taking action based on reading this advertisement.
So and the fourth quadrant will be dedicated for the advertisement and then in the second and
third quadrant you will see, second quadrant will have much more important news than the third
quadrant.
(Refer Slide Time: 39:33)

219
Another example is MakeMy Trip. Also there is a similar action which is there and mostly here
they have followed the top to bottom sequence of Gutenberg’s diagram and also this is search
flight button is here but in this quadrant they have used again for promoting the download
MakeMy Trip app to promote their webpage. Now to validate this, right now we have eye
trackers.

And many of the designers have validated whether the Gutenberg’s principle which was evolved
around the industrial revolution, whether it is valid in today’s time or not. So eye tracker is one
of the possible solution which we can see whether our design is working the way we want or not.
(Refer Slide Time: 40:26)

220
So there are two types of eye trackers available mostly. There is also another type. So the first
type of eye tracker is a desktop mounted eye tracker. This is the eye tracker which tracks on the
information GUI of desktop display. Another kind of eye tracker is the mobile eye tracker which
tracks the information in the 3-dimensional spatial information. And there can be another type of
eye tracker which can be combined with the virtual reality or augmented reality devices.

For example HTC Vive and HoloLens. So this is an eye tracking testing by Sunsilk’s poster
design.
(Refer Slide Time: 41:11)

So in the first version of Sunsilk’s poster the model was looking at the user and then Sunsilk
product was there. So they have done a eye tracking testing and this is a heat map generated by
the eye tracker. So eye tracker gives the heat map and it tells the warmer the color is the user
have spent more time and more eye fixation is there in that region. So they have looked at the
face of the model and they have just made the information in the first quadrant.

And they have actually missed the product. So after in the next iteration, the model looks at the
product so that gives the cue to look at the product and so this model’s eye is actually directing
the user’s attention towards the product. In the next version, just by changing the eye direction it
works much better and many people look at the poster and grasp the information which designers
wants to give.

221
(Refer Slide Time: 42:14)

So there is a design pattern which Jakob Nielsen one of the famous designers have evolved after
doing several eye tracking testing on the web content. So he have checked this Gutenberg’s
principle how this principle is right now in today’s time work in the web application and mostly
he have tested it with the text heavy documents and which is the infinite scrolling and this text
heavy document is not static web page.

So you can scroll down and read the text which does not fit into the display system. So he have
evolved that this F type pattern the way people look at. So that creates a F type heat map pattern.
So they start reading from here and then they go here and then they start coming from top to
bottom and again after sometime they again scan the text. So they might skip few of the
information and few of the information here and they keep on going like this.

So this F pattern is not just like this. So depending on the infinite scrolling it can have many
spokes of the F. So people sometimes miss out few information and then they start reading this
from left to right. So this is the pattern evolved from and these are the eye tracking heat map
generated from this testing.
(Refer Slide Time: 43:54)

222
So from that we can design two different style can be there in terms of visual communication
design. One is infinite scroll. So there are some pros and cons of the infinite scrolling. So the
infinite scrolling is what he have tested and the F pattern evolved in the infinite scrolling. So
infinite scrolling is when the content loads continuously. And you can infinitely scroll based on
the amount of customer generated or the user generated data.

So these are mostly suitable for a dynamic webpage when the user has the capability to load or
change their webpage. For example Facebook. So Facebook’s timeline can be infinitely, you can
infinitely scroll down and this infinite scrolling is more engaging and people might, user might
skip some information and then they can look at some information which is more relevant, which
they feel more relevant and they can infinitely scroll.

And this has much more, it can engage people for longer time because they lose track from
where they are and this is a one line information architecture so there is no break in the
information architecture and they keep on reading that. So this provides a lesser option to have a
footer. So footer should be omitted so that they keep on reading the information and then this UI
page will be more engaging and more attractive and engaging for them.

But this has some cons. For example the scrollbar sometimes become, the size of the scrollbar
become insignificant. The size will start differing because when you go down into the

223
information the scrollbar will be smaller and it will be difficult for you to go into the top because
there is no breadcrump and other break in the page. So for example this is Facebook’s timeline.
You can go down and keep on reading what happened in the timeline in the previous
information.
(Refer Slide Time: 46:02)

And another kind of navigation can be the pagination where you break the infinite scrolls into
different page. So graphically it can be represented like that. So in infinite scrolling the
information will keep on coming like that and in pagination there will be just one single page and
if you click on to the next page you can navigate to the next information set. So this has a
different information architecture.

So when you go to the next page, you shift in the information architecture. This is not linear, but
this gives a provision to go back to the previous information and this also give the provision to
bookmark a particular page and you can track the information in a much better way. For example
it can be Google search engine. So Google search engine could have been also like infinite
scrolling. All the search can come one after another. But Google have created this pagination.

So the user will know in which page they are. So in the next class we will talk about the style of
design and how they change based on different timeframe. So we will discuss the contemporary

224
design and visual design movement and we will also talk about the typography and how to
incorporate the different visual style and typography in the visual communication design.

225
 User Interface Design
Prof. Saptarshi Kolay
Department of Architecture & Planning Engineering
Indian Institute of Technology, Roorkee

Lecture - 12
Contemporary Visual Language in Design - I

Welcome students to the online NPTEL course, User Interface Design. In the previous class we
started discussing about how with the incorporation of visual communication design, a low
fidelity design can transfer into a high fidelity design. We can call it a graphic user interface,
how we designed after the information architecture we designed the wire-frame and through the
paper prototype or some tools the web tools like Balsamiq and other software.

So after designing this wire-frame we have to apply the colors and other details which falls under
the visual communication design. So we will talk about this. We have started discussing about
the visual communication design and what is the importance of the visual communication part in
the graphic user interface or the user interface design.

So previously when we started discussing the information architecture and how information
architecture can be translated into the perfect wire-frame, a suitable functional wire-frame.
(Refer Slide Time: 01:27)

226
So we have discussed till this. So from here what kind of look and feel it will take. It can be of
any visual design style. So how do we decide which style will be suitable for this particular web
application or the mobile application. There are immense number of different color palette,
different visual style, different visual language but which particular visual style, what kind of
typography, what kind of color palette, what kind of textures will be suitable for this particular
web application or any user interface that has to be designers decision.
(Refer Slide Time: 02:11)

So we have different kind of color palettes available in front of us, different visual styles. It can
be more in contemporary style, it can also mimic the old look. It can have a grunge look. It can
have different kind of look. But how do we decide that. So to do that, one important part is to
know what are the current design trends. What are the design movements which happen in past
and what are the current trend that we need to know.

And also another important parameter is the brand identity. For which brand we are designing
for. So in this class and the next class we will discuss about what are the design trend and next
we will also discuss about the how the brand identity can be translated into the visual style of this
web application or the mobile application what you design for. So knowing the current design
trend is very important for us especially for designing this visual communication design part
which comes after the user experience design.

227
So the visual communication designers really need to know the visual trends and what kind of
style and what are the associated color palette, associated visual palette and colors, typography,
what the association with the particular style. So all this visual style should communicate the one
particular language. It cannot be a eclectic mixture of different visual style. It can be if you want
to create an eclectic design style, you can also create a collage or eclectic style mixture of
different visual style.

But generally when you want to communicate with the user, one particular visual style and
sticking to that particular style will be very important for you. So discussing about the
contemporary visual design movement we will go about because contemporary design
movement this digital era started coming into picture very late. We will also discuss about what
are the other paradigms of design.

For example we will give a little bit example of art movement and also architecture movement so
that you understand the line quality, what are the colors, textures and all the design elements and
the principles of designs which has been followed.
(Refer Slide Time: 04:43)

So you know that before modern there was this modern timeline starts around 1920s before that
this industrial revolution. So post industrial revolution is the contemporary era and contemporary
era is divided into 2 parts. One is modern, the first part is modern and the next part is post

228
modern. So before modern there was this Baroque and Rococo style. This is pre-industrial
revolution. And Baroque and Rococo style is highly ornate.

So this is the Baroque style painting by Johannes Vermeer, girl with the pearl earring and here
you can see this contrast of light and dark which is called Chiaroscuro. So this contrast gives a
very dramatic effect and that is the style of Baroque and Rococo and also if you look at this in
architecture, this high ornamentation, lot of biomorphic design and use of metallic colors are
there.

So this is St. Peters Basilica, Rome and this is designed by, this particular part of St. Peters
Basilica is designed by Bernini. So high ornamentation, contrasting color, dramatic effect, and
Chiaroscuro was the style of that.
(Refer Slide Time: 05:47)

After that and also in terms of graphic design, lithography linography, wood-cut print was there
which is also there in the past and it started from the middle age of this visual style and so this is
wood-cut print and this is design of the wood-cut print, serigraphy and other different
lithography was there in the visual style. So this is part of the pre-industry revolution.
(Refer Slide Time: 06:16)

229
Now, in 19th century industrial revolution few things happened. So genesis of modernism and
migration from agriculture to industry and lot of different tools and techniques started coming
into picture and new invention of art and also in science changed the paradigm of visual style
and throughout different creative medium for example architecture, furniture design, fashion, and
visual design as well.

So increase of production of new materials like steel glass and as well as new techniques of
paintings and new techniques of graphic design was also there. So this is the timeframe of
modernism.
(Refer Slide Time: 07:01)

230
So this is the industrial revolution and this part is the modernist part and then the postmodern
time continues. So right now we are in the later part of the postmodernism. We will discuss
postmodernism just after completion of the modernism. So the first part, modernism has Art
Nouveau, art and craft movement. Art and craft movement is also kind of pre-modern
movement. Then after Art Nouveau you have impressionism, Art Deco, De Stijl movement,
futurism, cubism, and surrealism.

From 1980s onwards we came into postmodern era and in modern era generally we see less
ornamentation, the minimal style and there are like an architect Mies van der who said that less is
more. That is the motto of modernism. So it talks about minimalism. And in postmodern era we
see pop movement and other movement like Memphis Milano. So those movement talks about
lot of ornamentation in design and different drastic color combination and very attractive color
combination which has higher attraction value.

So postmodernism is again not kind of opposite to modernism and then architect Robert Venturi
talks about less is more. So more element is about postmodernism. So this is the detailed timeline
of modernist era.
(Refer Slide Time: 08:29)

So this is the industrial revolution. So this part is just before modernism, preindustrial revolution.
So Baroque and Rococo is much before this timeframe. This is on the verge of Baroque Rococo

231
and industrial revolution. So one movement was for the machine movement. So the invention of
machines and other tools, contemporary tools and techniques generated visual language which
appreciates the machine made aesthetics. So that went towards the for the machine movement.

And then another group of architect and designers opposed this machine made aesthetics which
is and there are two design movement. One is art and craft movement and another is Art
Nouveau. So this two is opposite. One is for the machine movement and another is against the
machine movement. Within against the machine movement we have 2 different movement. Art
and craft movement and art nouveau. After that we are coming to modernism.

So most of this few movements are architectural movement but if you are interested you should
read about the architectural movement as well and which will give you more better
understanding about the visual style of this particular this modernist movement. But we are
discussing mostly on the, we will focus on the art movement which is more closely related to
design style and visual communication design.

So impressionism and expressionism, Art Deco and cubism, surrealism, fauvism, and
suprematism these are the movement which are focused on the art movement and after that we
go into postmodernism which is around 1980s.
(Refer Slide Time: 10:20)

232
So if we fit in all the visual style into the timeline, this is how it will look like in terms of visual
design. So this is art nouveau which is just before industrial revolution, just before modern, after
industrial revolution just before modern which is 1920s and industrial revolution was somewhere
here. So postindustrial revolution and before modern this art nouveau was there and also art and
craft movement is there.

And for the machine movement generates lot of machine made aesthetics which is mostly related
to product design, very geometric and user friendly products and which does not have any added
ornamentation into it. Now this is the example from De Stijl movement, De Stijl painter, Piet
Mondrian’s painting Broadway Boogie-Woogie and the next is Art Deco where we also see lot
of ornamentation again.

So this has less ornamentation and then this goes into more ornamentation which is Art Deco and
this is kind of related with art nouveau as well. Now corresponding to this De Stijl movement
there are few product design and automobile design which was contemporary to that. So this is
the Ford Mustang car which is designed during that timeframe. So if you look at this car design
this has lot of rectilinear lines into the car design.

And there is no mixture of curvilinearity with the rectilinearity and if you look at this car comes
in primary color. So this is red and it also comes in yellow and blue and also black and white. So
that was the visual style of De Stijl movement and Bauhaus movement. Bauhaus is again a
contemporary art movement which is parallel to De Stijl movement.

And if you look at this painting Broadway Boogie-Woogie you can see only the primary colors
which is yellow, blue and red and with association with the white, black, and grey and
sometimes you will see these colors in other paintings so which is achromatic color. So only
primary colors and achromatic color and if the painting is emphasizing on the rectilinearity it
will be only square and rectangles.

And then if it is curvilinear then they will go for the circle and also other basic shapes like
triangles and these kind of shapes are used. Now another design of car which is parallel to this

233
movement was Volkswagen Beetles. So if you look at Volkswagen Beetles it is all circular in
design style. Even the headlight and all this design elements, everything will be circular. So there
is no mixture of rectilinearity and curvilinearity.

And Volkswagen Beetles also comes in, the yellow color is very popular which is again the
primary color. So this is the painting Starry Night by Van Gogh. So it is impressionist painting
and then it has a particular technique of application of color and then this is a painting by Pablo
Picasso which falls under the cubist movement and there is also other movements like fauvism
and surrealism which we will discuss.

This is one product design movement which is called streamlining. So we can see this curvilinear
lines which blends with each other and this focuses on the ergonomics of the product and also in
terms of automobile design it focuses on the wind flow pattern or the aerodynamics and these
kind of streamlining design was the movement in product design. Also it was there in the some
architectural movement and painting like surrealism also has this curvilinear fugue lines which
evolved during modernist movement.

So we discussed about the first movement which is Art Nouveau which is postindustrial
revolution but pre-modern.
(Refer Slide Time: 14:33)

234
So lot of biomorphic design ornamental craftsmanship was emphasized. So you can see lot of
biomorphic lines there within the painting and these are called whiplash line. So we see this lines
which are like whiplashes and that was the style of this particular art movement and also we see
lot of ornamentation. So this is Gustav Klimt’s painting and he uses gold leaf on the painting. So
it gives a metallic shine which is also borrowed from Baroque and Rococo style which we are
discussing just which happened before industrial revolution.

And Baroque and Rococo style also has lot of biomorphic lines which we have seen from
architecture. So architecture design and graphic design all these things, the movements went
hand in hand and then they borrowed from each other and translated these lines, textures, colors
into their own paradigm.
(Refer Slide Time: 15:40)

So this is art and craft movement which is slightly different. We can see a tessellation repetition
of mirror image and repetition of pattern but still it depends on the craftsmanship. So lot of
biomorphic lines are there. But we do not see this kind of whiplash lines and abstraction. So
these kind of Art Nouveau is more abstract and more stylized and art and craft movement, this is
also stylized and it is not exactly the way we see the natural elements.

So there are abstraction and distortion but the style of distortion is different. So this is William
Morris’ tessellation and these are part of the fabric he have designed.

235
(Refer Slide Time: 16:22)

Now next is Art Deco which is within the modernist movement. So in the international
exposition of modern industrial and decorative arts in 1925, architect Le Corbusier connotes this
term Art Deco. And Art Deco is a eclectic style of art which takes some element from Art
Nouveau this ornamental elements and also it imbibes the potentiality of machine made
aesthetics.

So in Art Deco we will see influence on machine made aesthetics and provision of mass
production. So it can be repeated. So designs are repeated and more geometric but they are
ornamental.
(Refer Slide Time: 17:15)

236
So these are some paintings of Art Deco. We can see this lines which goes through and through
in the painting. So it is not as biomorphic and as curvilinear as Art Nouveau and art and craft
movement. So these are the straight lines which are following throughout this frame of work and
the lines are passing through and this is a combination of lot of geometric shapes and if we look
at, so they use lot of metallic shine within the design and that we see in many different posters.

So these are Cassandre’s painting. So here we see this paintings look like there is a metallic shine
within the painting.
(Refer Slide Time: 18:03)

237
So if you look at another painter Tamara de Lempicka’s painting, here also we see lot of metallic
shine within the drapery, within the skin, she have applied the color within skin tone, the way she
have treated the hair and drapery. Each and everything looks like a metal made design. So that is
the style of Art Deco.
(Refer Slide Time: 18:24)

And within Art Deco there are other pattern. This sunburst pattern become very important in Art
Deco design. So we see this in architecture, sculpture and poster design. And this Art Deco has a
particular font. So these fonts are geometric but lot of ornamentation is there. So we can see this
is a half circle but lot of lines are added to this half circle to make this design more ornamental.
So as in this typeface design this is exaggerated but it looks geometric but lot of stylization is
there and so as in the other fonts which is used in the Art Deco posters.
(Refer Slide Time: 19:08)

238
So there is a movie here. So this movie is called Great Gatsby. So this movie’s total set design,
typeface and everything, costume design is based on the Art Deco style. Even the first posters
and every element of this movie is Art Deco. So if you want to understand Art Deco you can
watch this movie. And Art Deco also has a lot of tessellations and patterns. So most of the
patterns emphasizes the black background on the gold and other metallic colors on black
background.

So these are few of the Art Deco tessellations. This is the door designed in the Art Deco style. So
one of the important typeface Broadway is designed by Morris Fuller Benton is a Art Deco
typeface. There are other Art Deco typefaces which these all typefaces will fall under Art Deco
typefaces.
(Refer Slide Time: 20:08)

239
Now next movement is De Stijl Bauhaus movement. Unlike Art Deco and Art Nouveau De Stijl
movement and Bauhaus movement which are parallel. Bauhaus is more important in the
architectural movement and their style is more into art and painting movement, fine arts
movement. So those are quite similar and they are quite different from Art Nouveau and Art
Deco movement. So they focuses on the basic pure elements and principles of design in terms of
visual aesthetics.

So you know this element of design is like line, shape, color, texture. So in this, all the pure
forms will be, pure shapes will be square, rectangle, circle, triangle and pure color will be the
primary colors which is red, yellow and blue. And also the black and white and grey is there
which is achromatic shapes. So when we see this Bauhaus painting, so these are Bauhaus
paintings by Wassily Kandinsky.

So this painting does not communicate any meaning or any theme to the user. It only talks about
the eye movement and different juxtaposition of different shapes. And when we look at the
shapes and this has more emphasis on this primary colors and basic shapes and we discussed
about the eye movement and different quadrants and how people perceive. So we have seen this
example. So this only talks about the eye movement of the people. And then these are some
examples of De Stijl posters which is De Stijl and Bauhaus poster.
(Refer Slide Time: 21:56)

240
Here also we can see only the primary colors and primary shapes. These posters are designed by
Herbert Bayer. He also designed few furnitures and this is the Bauhaus font and Bauhaus poster.
So here in the Bauhaus font we can see again this is a combination of pure geometric font, pure
geometric shapes. But this has much lesser ornamentation and more minimalist style than the Art
Deco font.

Art Deco font was also derived from basic geometry but lot of added ornamentation was there in
the Art Deco font. So in the Bauhaus, they are cutting down all the added ornamentation and
only the pure geometry and pure basic minimalist elements are retained.
(Refer Slide Time: 22:53)

241
So these are some paintings by Piet Mondrian. We have seen this painting. This is Broadway
Boogie-Woogie. And if we look at the other paintings this only has black white with the primary
colors.
(Refer Slide Time: 23:00)

So some of the Bauhaus and their style poster, this is by Vilmos Huszar. He is a graphic design
and again we can see the elements are broken down into pure geometry and then pure basic
forms. The face is broken into the basic geometric forms and only the primary colors are added
and green also has a very strong appearance and then sometimes we see green is also added with
the primary color.

Now the next movement is futurism and constructivism. This happened in mostly in Russia. So
here people are talking about, the painters are talking about the fourth dimension which is time.
So this 2D painting captures the fourth dimension time as well.
(Refer Slide Time: 24:00)

242
So if we look at this Natalia Goncharova’s painting of cyclist. This is not a capture of one
particular moment. The cycle is moving and we can see the dynamism and lot of lines are getting
created because of this movement of the human, the man with the cycle and she have painted a
lot of lines for his leg so that it captures the movement of his leg as well as the cycle. So we can
see distortion into different cubes and that is how this futurist and constructivist painters captured
this time dimension into the picture.

So another movement which is cubist movement derived from this and here also in the cubist
movement we see a similar approach of capturing the time dimension into the painting and
breaking the element into abstract geometric form which is mostly cuboidal forms and that is
why this movement is called cubist movement.
(Refer Slide Time: 25:11)

243
This is Guernica, Pablo Picasso and this is another painting by Pablo Picasso. This is called Las
Meninas. So the Las Meninas is first painted in the pre-industrial revolution era, Baroque and
Rococo style by Velazquez. So this is the same painting reinterpreted by Pablo Picasso and you
can see the similar elements but there is a, the painter himself and other elements are there in this
painting and the reinterpretation of the same painting into the cubist style.

And here the elements are broken into pure geometric more simplified form and lot of cuboidal
lines are added and that is why this falls under the cubist movement. We will continue with the
other movements of modernism and mostly we will follow the postmodernist movement and
what happened in the digital era and what are the visual styles of digital era followed by this
postmodern movement in the next class.

244
 User Interface Design
Prof. Saptarshi Kolay
Department of Architecture & Planning Engineering
Indian Institute of Technology, Roorkee

Lecture - 13
Contemporary Visual Language in Design - II

Welcome students to the online NPTEL course, User Interface Design. In the previous class we
started discussing about the art and design movement so that you can understand, you can select
the visual style based on the contemporary design and art movement and based on also the
requirement of your design and what kind of visual language you want to portray in your design
after finalizing the wire-frame.
(Refer Slide Time: 00:55)

So today we will continue with that and we started discussing the modernist movement. We will
just recapitulate that and then move on to the postmodern design movement. So modernist
movement, these are the main modernist painting and design movement in modernism which
happened after postindustrial revolution.
(Refer Slide Time: 01:13)

245
So we will compare few modernist movement side by side. So this is the Art Nouveau movement
where we see lot of ornamentation and biomorphic lines and this is Art Deco movement. Art
Nouveau is just pre-modern postindustrial revolution and pre-modern movement and Art Deco is
a modern movement and Art Deco we see lot of emphasis in the machine made aesthetics. But
still it is very ornate.
(Refer Slide Time: 01:40)

Now next is De Stijl and Bauhaus movement. De Stijl and Bauhaus movement together talks
about the purity of design and minimalism and also he talks about one particular design style
which is either rectilinear or curvilinear and mixture of only mostly the basic geometric shapes

246
and primary colors like red, yellow, blue and with juxtaposition of achromatic color like white,
black and grey.
(Refer Slide Time: 02:09)

Now the expressionism is another movement where this is Edward Munch’s painting screen
where painters started expressing their feelings and metaphorically with different lines, colors,
and textures they started expressing the meaning of the painting which is opposite to the Bauhaus
and De Stijl movement because Bauhaus and De Stijl movement mostly talks about just the
combination of different shapes. It does not convey any meaning.

So this painting by Edward Munch talks about the phobia of screen and we can see lot of
abstraction and deformation from the actual human face. It looks like a skull and the lines of this
on the sky and the river and the bridge are quite shaky and then this kind of line quality and the
tonality of the color the red vibrant red and other warm colors gives feelings of the screen
metaphorically.
(Refer Slide Time: 03:16)

247
And then the next movement is the impressionism where we see Monet’s painting and Van
Gogh’s painting and this is the style here is called Impasto. So you can see a tactile texture is
being created within the canvas. So you can touch and feel the texture because of the application
of very thick color. And this impressionism talks about different color tones when we see from
far we can perceive the painting but when we see from near, so this is a patch work of different
colors. So this is the style of impressionism and this is Van Gogh’s painting Starry Night.
(Refer Slide Time: 03:57)

So we can see juxtaposition of lot of different colors and when we perceive from far we can
comprehend the meaning of the painting but this is a, when we look closely, so this is part of the
Starry Night which is somewhere here and we can see this patches of colors from near it will just

248
appear like a blue and orange and yellow color patch but together it communicates the meaning.
So it does not look realistic. This is a high abstraction.

So this is Van Gogh self portrait and here also we can see this contrasting color which is opposite
in the color this orange and blue is juxtaposed. So together we can see a very shimmery effect of
the portrait and together we can perceive the face of the painter.
(Refer Slide Time: 04:49)

So another other painters like Paul Gauguin and Georges Seurat is there in impressionism and
this is also called pointillism when instead of applying the Impasto technique of color they are
different points of color and we can see, if we zoom in we can see different dots of different
colors and together it conveys landscape portrait, conveys the scene of a river front scene and
when we see from far and perceive it holistically.

So next movement is, another movement is fauvism. Here also we see lot of addition of different
color patches but this colors are very vibrant.
(Refer Slide Time: 05:36)

249
And they are quite vivid for the eyes and they have more attraction value and they are not toned
down colors. So the fauvist, the name fauvism comes from a wild beast. So it looks very wild in
terms of the tonality of the color and with a vivid brush stroke and which is visible from the far
and which is not, the brush strokes are not merged with each other.
(Refer Slide Time: 06:09)

Some other examples of fauvist painters and then the next movement is surrealism.
(Refer Slide Time: 06:14)

250
Rene Magritte’s Son of Man and Salvador Dali’s painting are persistence of time and space and
this is here we see very realistic rendering of the painting. So everything looks very realistic, but
the composition itself is nonrealistic. So all this elements and everything is not realistic. The
setup is not realistic but the way it is painted and the color mixture and the tonality and the line
quality everything is very realistic in nature.
(Refer Slide Time: 06:51)

He have also designed, Salvador Dali have also designed some furnitures. So this is Mae West,
the actress Mae West’s room which is in the Salvador Dali museum which is based on a
Salvador Dali’s painting, very surrealist painting of Mae West. So this is a composition when we
can see this is actually like a combination of different furniture like a room but this also depicts

251
Mae West, the actress face and also the furniture design depicts metaphorically the combination
of human body elements.

This is Boca sofa which mimics the lip of human and then this furniture mimics the arms and
legs of human body but this is actually a chair. So this kind of dilemma of what it depicts is there
in the surrealism in furniture design. So another movement cubism which we have discussed
earlier which breaks down the composition in different cuboidal forms and highly abstract and
also sometimes depict the time.
(Refer Slide Time: 08:04)

So few other examples of cubist movement and Russian futurism where time dimension is quite
important in the painting.
(Refer Slide Time: 08:09)

252
Another movement is suprematism. Suprematism also somewhat similar to Bauhaus and De Stijl
movement. They are the composition of pure geometric form but unlike Bauhaus and De Stijl
movement they are the combination of this elements are in different angles. So they are not
positioned in 90 degree angles with each other and they have more dynamism in the composition
and sometimes this is very abstract simplification is there.

And one of the famous painter is Malevich and he sometimes painted only black patch on black,
white patch on white and wave only with the achromatic color and sometimes he also has
paintings with different colors and which might not be all times it might not be primary colors.
They can be application of different other colors as well. And Lazar Khidekel is one of the
architect who transfers this suprematism the combination of different box into a 3-dimensional
depiction.

So this is the concept of this 3-dimensional space or 3-dimensional object which can be a
architecture, which can be of small product or any scale but this has lot of different cuboidal
elements juxtaposed with each other. So this is much more complex than Bauhaus and De Stijl
movement but superficially if we look at it looks quite similar but it is idealistically it is a
different movement. Now we come to the postmodern timeline.
(Refer Slide Time: 10:08)

253
So after modernism around 1980s this postmodern style started evolving. So in architecture these
are the styles in postmodern movement and this is the art movement and rest all are the
architecture movement. So parallely with these architecture movement some of the furniture
design and product design started evolving. So if you are interested you can read about these
architectural movements and that will give you a better understanding of this design style.

But we will focus on this pop art and few examples of Memphis Milano which is also product
design. So we will focus on the pop art movement which is the predominantly postmodern art
movement.
(Refer Slide Time: 10:56)

254
So these are few examples of this architecture styles and this is pop art by Andy Warhol and this
is Memphis Milano’s designs, Proust chair which is quite similar. So you can see lot of vibrant
color. The elements are exaggerated. So this is not modern minimalist design. Neither this
painting is minimalist. So lot of different colors, lot of attractive color palette is selected which is
striking for the eye and has much high level of attraction value.
(Refer Slide Time: 11:31)

So the design features is 1950s in Europe, Britain. So in architecture it is mostly 1980s but in
painting, so it goes back and forth and Britain and America based on the popular culture. So it
talks about the people, what people like. So it is more generated from the users and users
perception and users liking. So it is people centric fine arts and then it flourished and these are
the domains. Advertisement, typography, branding, graphic design, comic strips,
cinematography, and print media.
(Refer Slide Time: 12:04)

255
So this is the pop movement in America. This is the pop movement in Europe. Pop movement in
Europe has more gradient shade and lot of eclectic composition like collage. So this is Richard
Hamilton’s painting, just what it takes that makes today’s home so different so appealing. That is
the title of the painting and this collage which is juxtaposed with the everyday commodity and
again it is talking about the people’s lifestyle of that particular time which is 1950s.

And Eduardo Paolozzi’s painting of I was a rich man’s plaything. It is talking about a girl and
how modern society perceive a girl and then here also we can see the typefaces are here it is also
written pop and typeface is quite it is a derivative of the comic strip. We can see similar kind of
typefaces in the comic strip and lot of elements are added from the comic strip as well within this
painting. So it has lot of similarity with the comic strip.

And in the America if you look, so this is few of the examples where from digitally generated, it
looks like a digital design and this is a printed copy from the comic strip. This is designed by
Roy Lichtenstein. This kind of style we can see in the comic strip and it gives more digital look
in the design. So there is a flat one particular color tone is applied here and then on top of that
this another black lines are printed.

And when the black lines are printed there are some dots of the black lines in few other examples
if you look at it comic strips you can see a homogeneous dot are painted to give a darker shades.

256
So you can see this if you zoom in, so this might be lot of blue dots which creates this patch. So
it looks, it does not look hand painted. So we are going towards the more machine generated
print technology and this is Howard Miller’s posters again this has a lot similarity with the comic
strip art style and even the fonts used over here in every painting has a similarity with the comic
strip.
(Refer Slide Time: 14:37)

So this is Campbells’ Soup Cans painted by Andy Warhol. This talks about the everyday
repetition of same work. So this repetitive painting of different soup cans. Only the flavor of the
soup can changes in the different days. So this talks about the repetition of everyday human life
and the boredom of the life with the painting and this is a print of Marilyn Monroe, the famous
actress Marilyn Monroe’s face.

And this is again the repetition is one style of his design and lot of vibrant colors are used and the
color changes in every print and together it gives a collage of the same painting in different
colors.
(Refer Slide Time: 15:22)

257
So another painter Sigmar Polke in much later time uses this dots and printed technology into the
painting and this is also a juxtaposition of different color patches and the polka dots which uses
in the painting.
(Refer Slide Time: 15:42)

Another examples of painter Yayoi Kusama. So she uses this polka dots again to create the
installation as well as the graphic design and she also have collection in the Louis Vuitton bag
and accessories collection and this also she uses this polka dots. Polka dots become very famous
in pop art movement and lot of polka dot has been used in fashion and graphic design and
creation of background pattern in pop art movement.

258
And also we can see in her painting this polka dots are there and lot of patterns are created and
these are flat patterns to distinguish different elements in the painting. So if you want to create a
website which talks about the pop art, pop postmodernist movement, so these are the main
design elements you should look at. So this polka dots and this vibrant colors repetition and a
particular kind of typography will help you to design this pop art movement. So a pattern is also
quite important in this pop art movement.
(Refer Slide Time: 17:08)

So this is Marimekko one of the Finland based company, design company and they design the
textile. They have tagged with the Finnair airline and they design the accessories and
merchandise and also they have the prints on Marimekko on the cargo of this flight and so these
kind of patterns and tessellations are there in the Marimekko’s design.
(Refer Slide Time: 17:38)

259
And in typography, we will discuss typography in the next 2 classes but the mostly in this pop art
style the typography of this neon lights and more dramatic combination in the typefaces was
there. And Clarendon is one of the very famous typefaces. This is called Slab Serif. We will
discuss this when we discuss typefaces is there. And Robert Indiana have designed installation
which is called love.

And he have also used a very drastic color combination which is vibrant red and blue and with
the Slab Serif fonts which is iconic pop installation. And if you look at New York’s Time
Square, so all this colors and this neon lights and the advertisement gives a very pop feeling of
the space. And also few of the signages which has if you look at the pop signages you can
understand what is the style of pop art movement in a better way.

So now let us move into the digital media which came in the much recent era. What happened in
the digital media and what is the visual style. How it evolved in the digital media.
(Refer Slide Time: 18:55)

260
So in the initial stages, the digital graphics has a low resolution pixilated graphics. So if we look
at the first typefaces which was there in the initial GUI or the graphic user interface was pixilated
graphics and also the first gains of this prints which is the first initial part of Prince of Persia and
the Super Mario. We see these kind of video games and computer games.

And windows logo was also a pixilated logo which right now is much more refined and has a
gradient tone. And here we see pixilated style become a visual design style of game, websites or
the web application. And then based on that some recent movie and recent game was also
designed based on that particular style which we had in the early 90s, 1990s.
(Refer Slide Time: 19:55)

261
So this is low resolution pixilated graphics is translated into the few of the contemporary design.
This is not because this style in Minecraft game if you look at is a 3D game where you can create
different objects and elements but this Minecraft game gives the feelings of low resolution 3D
design. But this is not because of that they cannot use the contemporary technology. It is just that
they have selected that particular visual style to depict the design idea.

Then there is another movie by Disney, Wreck it Ralph. This is an animated Disney movie. If
you look at the movie, this 3D animation mimics the style of the old pixilated style design. So it
is not again, it is not just their incapability of using the new graphic tools. It is just the style. So
they have a particular design style when it is a, pixilated style has its own beauty. Every design
style has its own beauty.

So you have to, as a designer you have to select which particular style I want to put in my mood
board. So that is very important. So any style can work for your design but you have to think
what kind of communication you want to give with the users. So which particular style will work
better? So it depends on your design idea. It depends on what customer want and what you want
to portray from your design. So the next another style which developed from the iPhone and iOS
device is skeuomorphism.
(Refer Slide Time: 21:43)

262
Skeuomorphism is connoted in the initial iPhone design style when Steve Jobs started talking
about a particular design style where it will be different from this pixilated design style and it
will mimic, the GUI will mimic the exact texture, color of a particular material. So skeuomorph,
it comes from a Greek word Skeuos which is a container and morph is shape. Whatever is the
container of this design or the graphic user interface, it will take the shape and texture and color
of that particular container.

So this in digital media is much known as the visual language in iOS platform. So graphic
resembles the another material which is applied as a visual texture of the material. So use of
texture, beveled round corners, drop shadows, usage of gradient shades are the some of the main
features of the skeuomorphism.
(Refer Slide Time: 22:43)

So if you look at the earlier iOS devices, so this is a MacBooks, iPads, iBook app. So when we
open the iBook, this is in the previous iOS devices. Right now it does not look like this. It looks
like a book shelf and all this front page of the books will be stored like, it is stored in the
bookshelf and it gives the visual texture of the wooden cabinet. Now also in the earlier iOS if
you look at the button, it has a light, each and every button has a lighter shine on the top.

And this has a beveled edge and there is a drop shadow on the bottom. So it looks like a button
which is placed and this is 3D and it has a gloss. So it looks like a glossy button placed on your

263
screen. Each and every button looks like that and if you look at, so this looks like a reflective
table which also gives a shine of the button on the reverse side. So this is how the iOS
skeuomorphism look like and each and every button if it looks like this.

This looks like a 3D line. So there is a shadow going on from both the sides and this has a
depression and all this is designed in detail to mimic the exact 3D look and feel of this particular
design.
(Refer Slide Time: 24:16)

Now later when this skeuomorphism is a style which was in the previous iOS but later we are
moving from the skeuomorphism and right now skeuomorphism is not in the visual style. So iOS
also changed their skeuomorphic style and they have shifted from the skeuomorphism which
they have earlier envisioned and right now their buttons and everything does not follow this
skeuomorphism as strongly as it used to follow earlier.

Now this is much more contemporary iOS devices look, maybe in the iPhone of the new
generation iPhones. So they have deleted all this shines and it looks more flat. It does not look
like a 3D button and the drop shadow is still there but it is much lighter and many of the cases
when you swipe from bottom it might look like glass screen on top. But it does not give you all
this detailed mimicry of the exact texture which used to happen earlier.

264
This is right now another iPhones device and if you look at the buttons and this breadcrumps
and the buttons and all this tabs it does not give you the textures and shapes of a beveled
skeuomorphic style which was there in the earlier style. So this is much flat and one single tone
is there. The bevel is there but still it is diminished as the skeuomorphic style which was there
earlier.
(Refer Slide Time: 25:53)

You can go to this link to see the developers guide of apple’s skeuomorphic design if you want
to read further.
(Refer Slide Time: 26:02)

265
So there is another design style which is called material design. It is visual language evolved by
Google. So this is quite different from the skeuomorphism and material design is much newer
style and skeuomorphism came before material design. So you will see lot of design. Right now
is in the style of material design rather than skeuomorphism and after material design flourished,
apple started changing their skeuomorphic visual language.

And that is why the apple’s new visual style does not follow skeuomorphism as it used to follow.
So this is minimalist in nature, pure geometry, bold and flat color without gradient and flat icons.
In skeuomorphism we have seen beveled icons, drop shadows and here there are drop shadows
but in very different way and bold flat colors are there and there the colors were selected based
on the material. So texture was more important than colors.

And here different flat vibrant colors are more important in material design. Focusing on the UI
transition. So lot of different UI transitions are there. So UI transitions are when you click or
interact with a particular button, what it does. So sometimes it will flip, sometimes it will give a
dropdown. Sometimes it will swipe. So all this transition to go to the next action is called UI
transition, so user interface transition.

When you interact with something, some action will be taken. But before this action how it will
be animated. So that is called the UI transition. So they have focused on UI transition a lot to
give a little bit of gamified experience in the web application.
(Refer Slide Time: 27:49)

266
So this visual language is evolved by Google and this things are there. Now you must have also
seen Google have changed their logo. So when Google talked about this material design and
earlier Google’s logo was not following with the Google’s material design style so Google had to
change their logo to go with the material designs style. So this was the earlier logo of Google and
this is the logo of Google which goes with the material design.

Now you can see in this logo, this is actually a Serif font. We will discuss what is Serif. But
these are the ends which are, protruding ends are called Serifs and there are no protruding ends
so this is Sans Serif font and here we can see a lot of change of tangents and lot of change of
thickness of the particular font and typefaces and this is more ornamental font and here we can
see a pure geometric font and one particular the color is used and there is no change and no tilt
and this is a very simplistic minimal logo which goes with the material design.
(Refer Slide Time: 29:00)

267
Now this is the material design’s few of the examples. So material as a metaphor they are using
so each and every tab and everything looks like a metaphor of a particular material. They are like
different plastic materials on top of each other and they have a particular shape and they can go
near another material. They can elevate from another material and the drop shadow and their
relative position will give the feelings of this material.

So we can see this animation how this circle is going, blinking and going and transforming into
the another shape, becoming a square. So one on top of another. So here this is in 3D
visualization of the material. So if you look at, so this drop shadows will give you the relative
distance and yeah visually represented by adding a drop shadow. This is one to represent that one
material is on top of another material. Content can display on material without changing its form.

They never bends or folds. So one material cannot bend or fold on top of each other. They can
transform and become, take the shape of another material.
(Refer Slide Time: 30:24)

268
So this is the guideline of all the material design’s detailed guideline. So you should look at
material design and skeuomorphisms guideline if you want to know more about this visual style
and these are major visual style which is going on in the visual communication part of the UI
design. So you must look at this two different styles and read detail about it. Thank you.

269
 User Interface Design
Prof. Saptarshi Kolay
Department of Architecture & Planning Engineering
Indian Institute of Technology, Roorkee

Lecture - 14
Usage of Typography in User Interface Design - I

Welcome students to the online NPTEL course, User Interface Design. Today, we were
discussing the visual communication design part and which is the high fidelity and how to
translate the low fidelity design to high fidelity design with the colors and all other visual
communication design elements.

So today we will talk about the typography which is one of the intrinsic part of visual
communication design. Colors, shapes, lines along with the other visual communication design
part, typography plays a very vital role in the GUI or the graphic user interface of the interface
design.
(Refer Slide Time: 01:02)

So in typography we will take 2 lectures to discuss to discuss that typography and what is the use
of typography into user interface design. So first we will talk about the evolution of typography
that will help you to understand which typefaces to select when we want to capture a particular
visual style. So the typeface, if the visual style you want to portray visual style which is not so

270
contemporary which has a old style so that you have to also select the typeface which match with
the style of the visual.

So that is why evolution of typography knowing this part is important then morphology of
typography what are the different parts of typeface, what is the x-height, the ascenders,
descenders and how we can classify a typeface that is the morphology part of typefaces. Then
based on this morphology, how we classify the typefaces.

So Sans Serif and within Sans Serif what are the different categories and within Serifs what are
the different categories that we will discuss in the lecture 1 and in the next lecture we will
discuss how to incorporate these different typefaces into the design. So what is the pictorial
quality of the typefaces and how the legibility and pictorial quality differs. When you increase
the pictorial quality how the legibility will get affected.

And when you want to increase the legibility how the pictorial quality gets affected. Then the
selection and the design of typefaces when you want to design a particular typeface which might
not be your main forte but when you select a typeface and you want to digitally iterate the
typeface a little bit to suit with your visual style then this part you need to know. Then the impact
of color selection within the typeface also, how the legibility affect when you select a particular
color.

And when you put a typeface, assign a particular color to a typeface and to a particular
background and how this figure-ground relationship works in the legibility with the typefaces.
And then achieving hierarchy. So when you create a front-end design different information will
have a different hierarchy. Some information will have a higher hierarchy. Some information
will have the next level hierarchy. So there will be different levels of hierarchy.

How you can achieve with the different kind of typefaces. It might not be just the size of
typefaces. It can be also a different category, different classification of typeface can also give
you the hierarchy. Color contrast and other things can also give you, help you to achieve this
hierarchy.

271
(Refer Slide Time: 03:53)

So we will start with the evolution of typefaces. So we will go to the history and how the
typefaces evolved. So initially the typography and the typefaces started evolving when people
started chiseling on the copperplate plate which happens in Mesopotamia or they started carving
marble stone in case of Roman and Greek civilization or with the calligraphic pin which they
started inscribing on the papiers or the paper which is there in you can say in Chinese origin.

So here we can see the material on which they are typing and the tools and techniques creates an
impact of the particular typefaces. Now we will talk about the Roman or the English typefaces
mostly. You only concentrated on the English typefaces. So they also evolved from the tools and
techniques, the way people started using it.
(Refer Slide Time: 05:01)

272
And after that when there was this Renaissance time Johannes Gutenberg invented the printing
press which is around early 15th century and in this case it was the style of his first printed books
which is the Gutenberg’s Bible. It had the influence of the calligraphic tradition because before
that people used to copy the Bible with calligraphic ink and pen and so that was the precursor of
this typographic style.

And based on that the first typefaces were designed which kind of mimics the handwritten
calligraphic typefaces. So China also had that but translating Chinese typefaces into printing
press was really different because they have thousands of different characters. When the
characters combine they become different characters and they look different. So it was not so
useful that Chinese context but English typefaces Gutenberg did that.
(Refer Slide Time: 06:05)

273
So this is the Gutenberg’s Bible. This is how it looks like. So it has a lot of influence from the
calligraphic style of writing. So this calligraphic style of writing has a Gothic style of typefaces.
So this is called the Gothic style. So black letter is one of the Gothic influenced font. Black letter
is a digital font but this mimics the Gothic style of design. If you know the Gothic architecture
and Gothic design so it has lot of ornamentation.

So as in the Black letter, if you check the Black letter so you will see lot of, this is not Black
letter but if you look at the black letters typefaces there are lot of ornamentation in the Black
letter typefaces. So here also in the early first printed typefaces there are lot of ornamentation
which we can see in the initial stages.
(Refer Slide Time: 07:06)

274
Now in the fifteenth century Italy, humanist writers and scholars rejected the Gothic scripts in
favor of the lettera antica, a classical mode of handwritten and wider more open forms. So from
this Gothical style we are moving towards different style of typeface design which is more
minimalist. Because if you look at this timeframe this is the fifteenth century and gradually we
are moving towards the industrial revolution and after that modernism will start.

So gradually from this Gothic style if you look at the modernist, if you look at the design
movement and the architectural movement, gradually in design and architecture and in other
aspects of visual design the ornamentation started to decrease. So it is going towards the
minimalist way of design. So Nicolas Jenson a French man who had learnt to print in Germany
established a printing firm in Venice around 1469.

His typeface merged with the Gothic traditions he had known in France and Germany with the
Italian taste for rounder, lighter form which is essentially minimalist and so from Gothic more
Italian style which is going to be more minimalist style is coming into the picture. So they are
considered among the first and finest Roman typefaces.
(Refer Slide Time: 08:44)

275
So in many fonts, we use today including Garamond, Bembo, Palantino and Jenson are named
after the printers who worked in the fifteenth and sixteenth centuries. These typefaces are
generally known as humanist. So this humanist typefaces which is gradually translating from the
Gothic style of typefaces are much more minimal in nature but still in this humanist typefaces
when we look at the modernist typefaces humanist typeface still have this calligraphic style.

We will discuss with some examples. So in humanist typefaces this letters does not have a very
digitally generated look. So their thickness and then the stroke thickness varies. And that is why
it gives a human touch into the typefaces. It does not look like a digital typeface. So
contemporary revival of historical fonts are designed to conform with modern technologies and
current demand of the sharpness and the uniformity.

So as we know that in the modern style modern design with the invention of new technology
there was also postindustrial revolution. After postindustrial revolution lot of technology
advancement started and the technology started and this visual style in architecture as well as in
design started to imbibe the digitally generated technology into the, that machine made aesthetics
into the design.

So we know that pre-modern era there was this for the machine movement and also there was the
counterpart against the machine movement. But later in this architecture and design movement

276
lot of machine made aesthetics started to come into the picture. For example if we look at Art
Deco and other internationalism and Bauhaus De Stijl movement, it had lot of machine made
aesthetics and the geometry was much more predominant in the style and the uniformity and
sharpness was much more in the design.
(Refer Slide Time: 10:53)

So in the evolution we can see also there is another one which is the Italic letters. This started
coming into picture because when we start writing a Roman style of letter which is upright and
straight versus Italic style which is cursive which is bent, this takes lesser space. So this become
more economic and you can print much more information into a same amount of page. So this
becomes a cheaper version of printing.

In fifteenth century Italy it started coming into picture, so they started bending the typefaces. So
one typeface block will be like this and the other will come within the space of the other
typefaces and it will, this cursive style of writing takes less space. So right now we know that
one typeface also has a upright Roman typefaces and also the same typeface can also have a
Italic version. So this is not just tilt.

There can also be some other design elements which goes with the tilt and which joins. So
generally when we write in Roman style, so this typefaces does not join. But when we right in
Italics, so this might some element of the previous letter can join with the next letter.

277
(Refer Slide Time: 12:23)

So in the sixteenth century printers started integrating the Roman as well as the Italic form into
the one type family. So the type family is a bigger umbrella where a particular typeface for
example Helvetica or Arial or Calibri can have different version. One is the straight Roman
version another can be the Italic version. There can be bold, there can be ultra thin, there can be
light other. All these versions of a particular typeface creates the type family.

So in sixteenth century onwards a particular typeface started having these two different version.
Now we have much more different version in the digital era. So today Italic style is of the most
font. Is not just simply a slanted version of the Roman. It incorporates the curve, angle and other
design elements into the typeface.
(Refer Slide Time: 13:20)

278
Now talking about the morphology of the typeface, when we look at a particular letter, there are
different elements of the letter. So if we see this capital and small letter together, the small letters
height which is the bottom of the small letter to the top part is called the x height. So if we write
x in this particular typeface, the height of x, small x will be the x height. And the cap height is
the height of the capital letter without the descender.

Now this part, few of the letters have a descender like y, f, p. these parts are called descender.
Now if we write x in small letter, some of the small letter also has a ascender. For example h, l, t
these parts are called ascenders. Now some of the letters has a curvilinear form like s which is
called spine and some of the capital letters or other letters has a droopy edge which is called
terminal.

And then the cross bar and this is the counterpart which is important to understand the figure-
ground relationship. So this background, the ground is totally confined by a figure. So these are
the different elements of, morphological element of a typeface.
(Refer Slide Time: 14:52)

279
Now there are other things when we discuss this typefaces. So this is how x height, cap height,
ascender, descender goes.
(Refer Slide Time: 15:03)

Now there are other things too when we talk about the type family. So typeface can be thinner,
typeface can be thicker. And particular typeface can also be narrow, ultrathin, slant. So we can
play with the width of the typefaces and that also helps to create the hierarchy. So when we
increase the width of a typeface this goes in a upper level of the hierarchy. So when the typeface,
with the same x height is wider it captures human attention more.

280
So this has a higher potentiality to become a focal point in the frontend design. So that augments
in the hierarchy level. But if we increase the width in the body of the text that creates issue with
the legibility. So if the body of the text where there are lot of text written and the typeface is very
wide people will feel difficulty while reading. So if we consider this part of this text and instead
of this width if we change the width into this without changing the cap x height, so there will be
lot of difficulty while reading.

But here in this heading or wherever you want to emphasize and create the focal point or we
want to give more importance in the hierarchy level then we can increase the width.
(Refer Slide Time: 16:37)

Now another very important part is in typography is called kerning. Kerning is the horizontal
space between the pair of 2 adjacent letter which is used to create a homogeneous visual and
increased readability of the text. Now if we look at the body of the text for example just consider
this body of the text and if this body of the text does not look homogeneous or the blackness or
the white and black proportion is not equally distributed then it creates difficulty in reading.

So if there is a lot of white patch in between the text, for example this part is I have created a
justified mode of letter. You can see this one particular line which is confining the text. That is
why there are lot of white gaps and uneven white gaps here. But if this white gaps are equally

281
distributed, that creates more legibility. And if there are lot of this uneven white and black
patches that hampers the legibility.

Now if we consider this different typefaces into a very basic minimal geometric form for
example if we consider a triangle instead of A and if we consider inverted triangle instead of V.
instead of O if we consider this. Instead of T or D or H we consider square then these are the
basic forms which are the basic abstract forms of geometric forms of typeface. Now within this,
this acts as a background and this acts as a figure.

So in this figure-ground relationship the amount of white in between all these letters should be
equally distributed. Then we can read a particular word. Within a word this amount of white
space and the black space should be equally distributed. Then it will be more legible. Now if we
look at the case no. 1 and case no. 2, here the gap between all the different typefaces are equal.

But if we look at this situation carefully, then this part, this version 1 does not look
homogeneous. So if you look at option 1 and option 2 carefully, option 2 looks more
homogeneous and option 1 does not look homogeneous. In option 2 what is happening there is a
different distance between two typefaces, but in option 1 there is equal distance. But what is
happening in option 1 because in this part, this added part of the triangle is also adding towards
the whiteness of the space.

But here that is why it has to be justified and it has to be minimized in case of this triangle. And
in case of circle, this part, this part, as well as this part is adding into the background which is the
white part. That is why we see the circle and the triangle has the minimum, should have the
minimum space. And if we draw a square beside another square that should have the maximum
space because they do not have any added space in between them.

So that is why this justification and creating equal and homogeneous figure-ground relationship
is called kerning and we have to adjust when the typography designers who design the typefaces
adjust this space so that while we type this all this letter has a homogeneous gap in between
them.

282
(Refer Slide Time: 20:43)

So this is David Kindersley’s experiment with the kerning. So he have used different basic
shapes and he experimented with the kerning and he started giving a unified space and he
proposed a unified space what it should be.
(Refer Slide Time: 20:58)

And then there are differences between Serif and Sans Serif. We will discuss what is Serif and
what is Sans Serif. But if you look at the difference between these two, in this case, this part is
added into this letter which is called Serif and which is the end of this letter and this letter Z does
not have this Serif end. This is the Sans Serif. So now if you look at, this O and Z here has more
gap than this.

283
Why this is happening because when you add this Serif in, this part of negative space is getting
confined. Now in this case, this part of negative space is getting merged with the other negative
space. So this will appear bigger than this. Because this has a confined negative space and this
will not appear bigger. Because this appears like one negative space and this is another negative
space which is part of this figure.

Now this negative space does not appear to be part of this figure because this does not have a
Serif end which does not confine the figure. So that is why you should provide lesser space in
this and more space in this case. So you have to adjust and when you design a logo or you are
creating, you are using different typefaces with different x size, sometimes you need to do that to
design the frontend.

Some font can be, you can use a bigger font which juxtapose with a smaller font. Then this kind
of sense of kerning will help you to create this logo or the heading of this or even in the others
part when you are using experiment with the typography this kerning is very important to create
the design.
(Refer Slide Time: 22:47)

Now there are different spacing methods which typography designers use in terms of Serif as
well as the Sans Serif design. So Robert Slimbach’s method, Walter Tracy’s method and Miguel

284
Sousa’s method of kerning is 3 of the most important methods. If you want to learn more about
this, you can check in the website and google it. So now we will come to the classification of
typefaces.
(Refer Slide Time: 23:18)

So the main broad classification of typefaces are Serif and Sans Serif. Serif typefaces looks older
because when the English letter started appearing, so we started from the Roman and the Greek
letters when the Latin letters when they started chiseling with the hammer and the chisel on the
stone. So they started creating the Serif ends because when they start cutting a stone, the end to
create a proper end they had to create some kind of ornamentation.

Otherwise the stone used to break and creating this kind of end was very difficult with the tools
they are using. That is why because of the tools they created this Serif ends and when they
started chiseling, so they started putting the hammer on the right hand side and the chisel has a
particular slant. That is why this side of this Serif font is smaller and then they put the chisel in
this side and that is why the right hand side of the letters are generally thicker.

And that is why also in the O you will see uneven distribution of the thickness. That is because
of the tools and techniques they started using. So that is why because Serif started evolved first,
Serif is more ornamental and Serif has a association with the older style font, older style

285
typefaces. So always Serif looks older than a Sans Serif. So if you want to create a older look
you should go for a serif typeface.

And if you want to create a new and crisp modern look then you should go with the Sans Serif
typefaces. So Sans Serif, sans means without. So without Serif. So here in this typefaces, this is
called Futura. Futura does not have a Serif end. Now within that there are lot of differences.
Within Sans Serif there are lot of differences and Serif also there are lot of differences.

So as we started discussing that from the Gothic style when the printing press started evolving
and from the renaissance we are going towards the industrial revolution and the post industrial
revolution there is a modern era. So humanist Serif typefaces started evolving. And so they
deleted lot of ornamentation which was there in the Gothic styles. For example black letter.
(Refer Slide Time: 25:58)

And then in 19th century which is just before modern, modernism started around 1920s, not
exactly but on and before 1920s. So that is the time when humanist typefaces started evolving.
So humanist or the old style, this is still old style because after that 1920s lot of different
typefaces started coming. So these old style letters form a close connection with the calligraphy.
So it is also related with the calligraphy and the movement of the hand.

286
It does not give appear digital. The Roman typefaces of the 15th and 16th century is kind of
converted into this. So Sabon is one of this style which is designed in 1966 based on a 16th
century typeface which is of Claude Garamond. This is a typeface of this humanist old style. So
if you look carefully this width of this letter A and the width here varies. And also if you look at,
so there are lot of ornamentation which is not equal, does not appear digital.

So it has a connection with the calligraphic style. And if you also look at the small letter, their
width varies a lot. And here also the width are not equal. So that gives the connotation of a
calligraphy and hand painted typefaces.
(Refer Slide Time: 27:40)

Now the next is around 19th century when printers started using typefaces which is analogous to
that of the history which perform the same function but the origin is different. They started
creating a different origin which is we know that modernism started deleting all the classical
style into the design. So they did not want to incorporate the classical style of design into the
modernist style. So this is transitional but this process happened gradually.

So this is called the transitional typefaces when this is more abstract. More abstract means more
geometric and less biomorphic. Biomorphic creates this curvilinear line which is like whiplash
lines or which mimics the biomorphic or the animal the floral and fauna, the line which comes

287
from flora and fauna which we see in the Art Nouveau and art and craft movement which is
against the machine movement which happened just before the modernist movement.

So that is the time when there was a dilemma between whether to go with the machine made
aesthetics or opposite. So this is something in between which is more abstract and less
biomorphic than the humanist typefaces which we have seen just before but more curvilinear
than the modern. So when we see the modern we will understand the style of it and this is
something in between. So John Baskerville’s font, Baskerville it is an 18th century design which
is also the, still it is not modern.

So we will go to the modern era after this. So it is just pre-modern and this is one of the design of
pre-modern transition Sans Serif typeface.
(Refer Slide Time: 29:38)

Now we come to the modern time which is the designers of the 20th century and 21st century
have continued to create this new typefaces based on history characteristics. Still they have this
Serif style and later we will go to the Sans Serif style when we start going towards more crisp
modernism. So this is late 18th century and early 19th century and it is a radically abstract thin
and abstract Serif.

288
We can see a straight line coming into this style and another straight line coming into this style
and there is lot of drastic difference. So this is the thin is really thin and the thick is really thick.
So this gives like a very geometric and abstract form and this looks like a there are lot of
difference and contrast and boldness into the design.

And if you look at the Serif ends it is absolutely straight line and also in the small letters, there
are lot of geometry coming into the picture. So this is the typefaces Bodoni which is a modern
typeface.
(Refer Slide Time: 30:45)

Now we come to the more minimalist style. So here they are cutting down all the added
ornamentation from the typefaces. That is why the Sans Serif typefaces started evolving. So there
is no Serif end. But still when we talk about the Sans Serif it again is coming from the humanist
Sans Serif to more modern and abstract grotesque Sans Serif. So here we can see some
curvilinear end in few letters but from some part it is not there.

So in the late 19th century this humanist Sans Serif style started evolving mostly commonly in
the 20th century. So parallely in the architecture Ludwig Mies van der Rohe whose most of the
architectural style and the design he have also designed few furnitures which falls under the
internationalism which is high modern era. He told that less is more. So in the high modernist
time the design style was minimalist.

289
So if there are less element in the design, that is more and that is more beautiful. That is the
visual style of this modernism. So Gill Sans is one of the typefaces which is design by Eric Gill
in 1928. So remember this we were discussing this 1920 onwards is kind of we started
modernism. So this is one decade, almost one decade after modernism when this Sans Serif fonts
are really very important in this era.
(Refer Slide Time: 32:27)

Then the transitional Sans Serif or the Grotesque or the Neo Grotesque Sans Serif these are also
referred as the anonymously the Sans Serifs and this typography style is the Swiss style and
which is quite contemporary with the Bauhaus and De Stijl movement and with the Kandinsky’s
painting and Mondrian’s are the contemporary painters in De Stijl movement and Bauhaus. So
this is quite contemporary for that.

And also one of the designers Maximum Miedinger in 1957 which is also the middle or the late
part of this modernism, he have design Helvetica which is one of the famous typefaces and this is
Helvetica and this looks more modern than the humanist Sans Serif. In humanist Sans Serif there
are some optical corrections so that you can see difference in the small letters a. The width
difference is there. But if you look at the small letter a, the width difference is highly decreased.

290
Now still this width difference is there because if this width of this part and this part comes like
equal and then there will be a black patch over there. So when there is a join of two arm of a
letter and if we do not decrease the width then there will be a black patch created. So to create
this optical illusion, you have to decrease the width. So just because of that the width is
decreased. But otherwise this has a much more homogeneous width all over the typefaces.
(Refer Slide Time: 34:13)

Now the more geometric from the Grotesque we go to the more geometric Sans Serif which is
absolutely geometric and which is called one of the typefaces is Futura which is designed by
Paul Renner. Though it is in 1927 but it looks more geometric than the previous example. So we
cannot fit everything into the proper timeline and how it goes because many of the typefaces
comes later.

And few of the typefaces which looks modern can come can be designed before because together
from 1920 to 1980s this is the modernist time where the visual style was more towards the
minimalism. So here if you look at the A has a very sharp edge which we do not see in the
previous styles. So it is absolutely geometric. It is chiseled out from a triangle. Also the small
letter a is absolutely geometric which is there, just a combination of rectangle and circle.

But the same principle is again added here. So it just tapers a little bit so that to avoid the black
patch over here. Otherwise, if you again join it like that so there will be a bold black patch and

291
then if you use this small letter so then there are lot of black patch on these areas. So just to avoid
that this kind of design is created. Otherwise this is totally if we look at, if you type something in
this Futura typeface so you will see all the letters are derivative of pure geometric form.
(Refer Slide Time: 35:58)

Now from the late part of 19th century, the later part and the 20th century earlier part we come
into the postmodernism which is after modern and that time which is after the World War.
Modernism is around the time of World War and the postmodernism was just after the World
War when the social cultural context was very different. And that time again from minimalism,
there were lot of ornamentation started coming into picture.

So if we look at the history and art history or the design history or architectural history, so it goes
simultaneously and this occurs one after other. So once if the movement talks about minimalism,
the next movement might add more ornamentation and the next movement again delete
ornamentation. So this goes on in a loop. So in post modernism, one of the postmodern architect
Robert Venturi describes it as a less is bore.

So that was the theme and the motto of the postmodernism. So less element, if there is less
element this is a boring design. So postmodernist architect designers and the typographer they
started incorporating lot of element into the, again the elements started coming back into picture.
So if you look at the, we have discussed the visual style and the design style also there are lot of

292
ornamentation coming into picture which is in pop movement and other postmodernist
movement.

So Egyptian or Slab Serif is one of the style of postmodern fonts which we see in the display
typography or the neon signboards this kind of typefaces are there because it grabs people’s
attention and because of the Serif ends. So they have a very thick Serif and they have enhanced
the ornamentation part in such a level that it looks like a slab. So it has almost a similar width of
a main body of the text and the Serif in the small letters are extended to create a very ornate
expression. So Clarendon is one of these typefaces.
(Refer Slide Time: 38:15)

So these are few typefaces which are good typefaces from different style. Clarendon, Gill Sans,
Helvetica, Futura, Bodoni, Baskerville, Sabon. These are some of the very good typefaces, well-
designed typefaces which you can use according to your theme.
(Refer Slide Time: 38:36)

293
So this classification also we can see right now we are in digital age. So one particular typeface
if you see, for example we are discussing about Universe. This can have a lot of different
variation to create the hierarchy of the typefaces. So it can go ultra light to very thin, very thick,
extended, black and different styles with upright Roman to Italics and lot of different variations
are available right now within a particular typefaces.

So in the next class we will discuss how to use all these typefaces and based on the knowledge of
this lecture, we will apply this and we will see how we use typefaces in the digital GUI or the
user interface.

294
 User Interface Design
Prof. Saptarshi Kolay
Department of Architecture & Planning Engineering
Indian Institute of Technology, Roorkee

Lecture - 15
Usage of Typography in User Interface Design - II

Welcome students to the online NPTEL course, User Interface Design. We started discussing
about typography in the previous class. Today, we will discuss about the usage of typography in
the design. So in the previous class we talked about the evolution of typography. We talked
about the history how the different kind of typefaces evolved throughout the timeframe and then
the morphology what are the different elements within the typography.

We talked about the particular element within particular typefaces and how 2 letters can be
juxtaposed. We have discussed kerning. And then classification of typefaces based on their
morphology and also we have connected the classification with the time frame as well which is
the part of the evolution of the typography.
(Refer Slide Time: 01:11)

So this part we have covered in the previous class and today we will discuss about the design and
how we can use this typefaces and in what basis we have to select the particular typefaces into
our design. So mostly we will not if we are talking about the GUI the graphic user interface or
the designing the frontend of user interface design, so you will be selecting the typefaces and

295
sometimes you need to select juxtaposed 2 different typefaces and you have to create the
hierarchy of the design.

So you need to understand what kind of typefaces you have to select from a vast available digital
typefaces which is there in the, which is available on the internet. So based on the pictorial
quality and the legibility of the typefaces things can differ and how much pictorial quality and
how much ornamentation you want to have in the typefaces versus what is the whether you want
to go for a minimal style of typefaces where to balance it out and based on your design and are
also based on the purpose of the design.

Then selection of digital typefaces based on these and what style of typefaces when there are
ornamentation in the typefaces. So that also talks about some metaphorical connection of a
particular style, particular connotation can also be there with the particular design style. So how
to select that. Then the impact of color on legibility and impact of other elements on hierarchy.

So how to achieve the hierarchy which can also be the derivative of color, pictorial quality, and
other elements for example Italics, bold or width of the typefaces and changing the other
ornamentation positioning and creating, deciding upon the x heights. So we will discuss about
the selection of typefaces for design.
(Refer Slide Time: 03:14)

296
There we will talk about the pictorial quality and the legibility. So pictorial quality increases
when we add ornamentation in the typefaces. So more the ornate, more it looks pictorial and we
delete the ornamentation, it becomes more legible. For example if it is geometric Sans Serif it
will be more legible for example if it is Futura is more legible than Clarendon which is a Slab
Serif or Egyptian which has lot of ornamentation.

And if we select Black letter which is the Gothic style of font then it will be even more pictorial
than Clarendon and which is difficult to read. So if you type a text in Clarendon, Black letter and
Futura, Futura will come somewhere here. Clarendon will come here and Black letter will come
somewhere here. So Black letter will have more pictorial quality. So if you see Black letters type
B which has something like this.

And lot of different elements are there in the particular typefaces versus this Futura’s B will be
very simple semicircles and Clarendon will have some thick Slab Serif end.
(Refer Slide Time: 04:45)

Now based on this we can categorize this typefaces into 3 broader categories. One is very
graphical typography where the graphical quality is much more. Then a display typography.
Display typography is the typography where we with these kind of typefaces we design the logo.
So this logo or the display board of a particular shop front or the name of a particular building or
the header of a particular graphic design this display typography has some ornamentation.

297
These ornamentations are required to grab user’s attention. So there are 2 different things in
design. One is attraction value, one is attention value. So these display typography has much
more attraction value than the typefaces which is more legible. So for more legible typefaces for
example Futura, Helvetica they do not have any ornamentation but they do not have attraction
value.

So if you create some pattern into the typefaces, they will grab people’s attention much quickly
than a very simple minimalist typefaces. And also they have more memorability and that is why
it will stay in the user’s mind and it will create a higher impact in the mental model of the
people. So they will remember the typefaces because they have a particular design, particular
ornamentation in the typefaces. So they have the power to be a display typefaces.

But typography for the text does not have this. So they are just for quick and easy reading. So
they have the most amount of legibility in the typography. So this is the graphical typography.
(Refer Slide Time: 06:42)

This is really high on pictorial quality and legibility is really less. So you have to decipher it with
longer time. You have to look at it for longer time to interpret it. For example if it is a graffiti
work or very ornate abstract pattern, this becomes a graphical typography.
(Refer Slide Time: 07:03)

298
And again another thing is when you cannot read a particular language then it becomes just a
graphical typography for you. So it has a higher pictorial quality and less legibility. So in the
frame it will come somewhere here towards the pictorial quality and it will have less legibility.
Here we have 2 example from a Kalamkari print which is from Andhra Pradesh and which is a
vegetable print and here there is Telugu script written within the painting.

And this is the photograph of the front door of Taj Mahal and this is the Urdu script written here
on top of the palace’s entrance, the Taj Mahal’s entrance, the tomb’s entrance. So here if you
look at the Urdu script and the Telugu script, Telugu script the curvilinearity and all this line
quality kind of blends with the Kalamkari style’s printing. Because the people who write this
kind of letters conditioned in that way.

So when they paint they also create the similar kind of line and quality. So this kind of goes well
with the style of design. Now if you replace this here, it will not go because the Urdu script and
the Kashidas and the lines which we see over here goes with the style of the design of other
ornamentation with this Saracenic style of the monument. So here for people who cannot read
this language this becomes just a pattern of the graphical.

This appears as a graphical typefaces and that goes with the style of the design because we are
conditioned in that way and we can also associate a particular style of design with the language

299
and the style of language and the scripture of that particular language. For example the Urdu
style will go with Saracenic architecture and whereas the Telugu script will go with this
Kalamkari print.

And if we have a for example if we have a Chinese restaurant’s shop front design so we should
go with the Chinese calligraphic style of design. We should not take design inspiration from
other languages style for example Urdu or Telugu. So we will see how we can explore the
graphical quality of typefaces when we create some design and create some new typefaces
design. We will discuss this lecture in the next few part.

So unknown language acts as a pattern, not as a text and which becomes, which also falls under
the graphical typography.
(Refer Slide Time: 09:56)

Now this is the display typography. In this typography it is something balanced between, it has
some balance between the pictorial quality as well as the legibility. It takes more time to
decipher than the body of the text, the most legible typefaces, the minimalist whether
ornamentations are minimal but it takes lesser time to decipher to read than a very high graphical
typefaces.

300
For example this Coco Cola logo, Linkin Park’s logo, Pink Floyd’s logo and the Bauhaus poster,
this has a particular style of typefaces. There are ornamentation in the typefaces and that is why
it can stay, it has a particular visual quality and it creates a mental model if the typeface does not
have any ornamentation it will not stay in people’s mind and it will not create a mental model
and it cannot create a brand identity if it does not have any pictorial quality.

But it is better legible than a graphical typefaces. So you have to read it but you have to take a
little amount of time to read it so that people register the logo. So for example Coco Cola it talks
about drinks and soft drinks. So there is lot of fluidity in the Coco Cola. It becomes a very iconic
logo and Linkin Park’s logo it talks about dead metal rock band. So Linkin Park’s logo if you
look at, so it is a bold Futura typefaces with minor iteration.

So if you see the Futura typefaces it is quite similar to that but there is a little iteration from
Futura and these parts are added in the Futura to create more deconstructive or rugged grunge
look into that and Pink Floyd is another band which talks about the transcendental fluidity. So
what you see in the logo also that transcendental fluidity is achieved into the design. And another
example is the Bauhaus posters.

So if you look at Bauhaus posters by Bauhaus and their style design, so Bauhaus talks about the
basic pure geometry which is square, rectangle and circle. So Bauhaus font also is a derivative of
circle square and geometry but it is not like Futura. But Futura font is, it is a very less ornate but
here you can see lot of ornamentation with this gaps and thickness. There are much more
ornamentation than Futura.

So while Linkin Park logo has to change the Futura font one change is when you increase the
boldness it becomes more pictorial. So it is not just normal Futura, it is extreme bold Futura and
lot of things are added into the Futura to create it from a legible minimal typeface to a display
typography. So you can change the typography to translate from a legible typefaces to a display
typefaces with the addition of different design elements.

301
Now in the display typography there are brand identity and log you can create with this kind of
typography. So these kind of typefaces there is a emotion and metaphorical connotation attached
with the typefaces. So this does not just read the word, so this also talks about the emotion of the
particular brand or the letter.
(Refer Slide Time: 13:44)

So for example, few of the examples of Herb Lubalin who is a famous logo designer, examples
from the typography logos. So if you look at this logo it is mother and child which is the font
size is changed, there is a drastic change in the font size. So that depicts the mother and the child
is within the womb of the mother to create the concept.

And the marriage where the R is reversed to talk about the concept of the marriage or the family
which creates different shapes of sizes of i and l is changed into something which looks like an i
to create this metaphorical connotation of a family.
(Refer Slide Time: 14:30)

302
Now selection of typefaces for design in visual design how we select the typefaces. So for
regular text it should have a less cognitive load. So the minimalist typefaces or the typeface
which has less pictorial quality will go with it and used for running text and books when we look
at this typefaces the usage will be for that and so it will belong somewhere here in the line. So
the typefaces of the body of the text will be, should be positioned over here.

So few of the examples of this typefaces are, also this has to be the most legible category of the
typefaces. Few of the examples which we have already discussed in the previous class are this.
But still Clarendon also you cannot use Clarendon in the very highly loaded text because it has
lot of elements, lot of pictorial quality here. So mostly it will be lesser the elements better it is.

And even in the Sans Serif and Serif, Sans Serif works better in terms of digital typefaces
because these Serif ends sometimes becomes pixilated in the digital display. So Sans Serif goes
better in the legibility. But when you print then Serif becomes better because these Serif ends
visually creates a end in the i so it gives our eye clue that this letter ends over here. So if you just
write T and T with the end so this will create some prominent end of the T.

If you decrease the letter imprinted media, this will be more legible than our Sans Serif because
of this ends which appears like a black dot and it creates more legibility. So in terms of display
typefaces digital typefaces this becomes more legible because Serif ends sometimes becomes

303
pixilated and it hampers the clarity and for printed media this becomes more legible in a very
generic terms.
(Refer Slide Time: 16:55)

Now designing typefaces when you want to create and depict something a particular style into
design. For example if we take example of a Chinese food restaurant and if you are designing a
web page of the Chinese food restaurant and if you want to create the display typefaces which
goes high on the hierarchy but we are not talking about the legible text of the typefaces, we are
talking about the display typefaces which is somewhere in between the legibility and the pictorial
quality.

So there you might need to capture the essence of a Chinese style. So for example there you can
take a mood board or your visual palette or from where you will take the inspiration, that is
called mood board. In this mood board, Chinese or some oriental letters. Oriental typography
with a calligraphic style can be in your mood board and from there you can create English
typefaces because if you want to target the audience who cannot read Chinese and targeting
international audience, then it has to be English.

And then you can create this English typefaces which has the characteristics of a Chinese
oriental scripture. So for example this calligraphic ends and these styles are taken from all this
elements. So you have to decipher and divide this elements of this calligraphic the main mood

304
board and take different elements to create a English letter. So these are the small elements of
this letter which has a calligraphic style.

So from these elements if you want to create an English letter, so with this element you can
create a letter which is English but has a style from the mood board. So first is the mood board.
Then English typeface is created from the visual identity of the Chinese typefaces. Then the
usage of this in the shop front.
(Refer Slide Time: 19:07)

So this is the process in the Chinese typefaces then the English typeface is created and which is
used in the shop front. First is creating the mood board where the Chinese typefaces of the basic
of your inspiration, the origin of your inspiration will come and then you would do the visual
analysis.

So you have to analyze what are the elements of design there in your mood board and take all
these element, identify the main major elements, not all the elements which is the major element
which is giving the style of the design, identify that and from there you do a visual adaptation,
transfer this identified element into English font and the genesis of a new typefaces from a visual
identity of mood board and the typefaces can be English or if you want to create a Devanagari
typeface it can be Devanagari or other language.
(Refer Slide Time: 20:04)

305
So another example, Arabic typefaces. Arabic typefaces main elements are not the calligraphic
style which is the Kashidas which is the joining lines of one letter to the other and these dots and
other elements. So these are the elements which has been translated into the English one. So A is
translated into this to create the visual appearance of a Kashida and all this squarish dots are
added over here in terms of t.

The Japanese style of t could have been like this and the Arabic one looks like this which can
have a Kashida and the square dots. So it becomes more Arabic and this becomes more oriental
in style. So you have to decipher what is the main style of the design and then you can change it.
And all these things it comes in between something in between pictorial and legible. So you have
to give a little bit more time than body of the text and also this is intentional because you can
memorize this as a particular typefaces and it has a particular style. So that it registers in your
mind.
(Refer Slide Time: 21:24)

306
Now few other examples, so this is from Devanagari. This is translated into English. So in
Devanagari typefaces this top line is there and this letters hang from this top line. So to mimic
that into design English typefaces so they have created this and these are the matras and other
elements which you find in the Devanagari scripture which is added as a ascenders and
descender. So it creates a visual look simile with the Devanagari font.

This is a typography project where to accustomed the English speaker with the Devanagari
typefaces which is just superimposed and to create the simile between these two typefaces. But
this is one of the example which has a similar process of designing.
(Refer Slide Time: 22:24)

307
Now few of the product design and the graphic design and poster design where it can be created
the similar process is there. So create a mood board, synthesis, and then design visual adaptation.
So application of graphic designs, it can be, this clearly gives a very Saracenic look. This also
has a Saracenic and Urdu style and this has a connotation wit Devanagari scripture.
(Refer Slide Time: 22:54)

Now achieving hierarchy with the typography is what you need to understand when you are
designing the frontend of the website or web application or mobile application or designing the
graphic user interface. All the informations will not have the same level of hierarchy. So you
have to differentiate the hierarchy for a better communication with the user. So this creation of
hierarchy is very important for the information.

So what information should go first in user’s mind should have the highest level of hierarchy and
the next level of information should have next level of hierarchy and so on so forth. So that you
have to create with the typography with all other visual design element which we have discussed
earlier. But typography plays a major role into this hierarchy as well. So typographic hierarchy
expresses the organizational system of content emphasizing some data and diminishing others.

So you have to emphasize some data which is more important and which should be of a quick
communication that has to be emphasized and you have to diminish the emphasize of other data
which is of lesser importance. And this hierarchy helps the reader to scan the text when they just

308
want to scan it and take a quick decision and then enter to the next level of information. So each
level of hierarchy should be signaled by one or more cues.

Each and every level of hierarchy should have some differences. Otherwise if it is all same then
it will not communicate with the users properly. So this visual cues can be applications of the
line spacing, color, size, style, placement and all these things. Placement also plays a very
important role because we have discussed about the rule of third. We have discussed about the
Gutenberg’s diagram and the F pattern of Jacob Nelson’s F pattern.

So where do you place the important information that also changes the hierarchy along with the
other things with size, shape, different fonts and the colors and spacing. Spacing is also
important when you write something here with a lot of white space. It eventually gets more
importance. And if you have a same x-height and all the elements are same and if you write more
information here with a similar amount of white space around it, this has lesser level of hierarchy
than this.

All the elements and x-height typefaces and everything can be same but still this has more
emphasis than this system. So the amount of white space or this figure-ground relationship, the
balance between this also helps in hierarchy.
(Refer Slide Time: 25:53)

309
Now what are the elements to create the hierarchy? One is Italic. If everything is in Roman, one
particular thing is Italics. It will create more emphasis because Italics is more ornamental than
Roman because it has a higher degree of inertia. Inertia is another principle of design. So the
upright straight line has lesser inertia. The leaning line, the horizontal line has the least amount
of inertia. This upright straight line which is 90 degree has next level of inertia.

And the slant lines has more inertia and it grabs more high attention. The bold face has more
emphasis. If you change the color, everything is in achromatic. One color is getting highlighted,
then it is definitely, it will augment in the hierarchy. Small caps, so within small letter if the
small capital letters are more the easy to read and has much value in the hierarchy. So if you type
the same height, the small letters are there and then the capital letters are there.

This will have more visual attention than this. So variation in font; if there are lot of variation in
font, then it can create a hierarchy. So everything is in one font and in particular in one part you
are changing the font so that will generally grab eye attention. Serif and Sans Serif this Sans
Serif generally has a less attention and Serif creates more attention because Serif is generally
more ornamental.
(Refer Slide Time: 27:42)

Now legibility comparison in print media and digital media which we were talking about. Serif is
designed for print media. We were talking about these ends is easy to perceive when we read on

310
the print media and Sans Serifs are more suitable for digital media because Serif ends sometimes
becomes pixilated.
(Refer Slide Time: 28:07)

Now impact of color selection in the legibility. So legibility of text also depends on the color
contrast. Which color you are using on top of what in contrast with which background. Some
color has more legibility while associated with a particular background of color. So it is not just
color of the text it is the relationship between the color of the text as well as with respect to the
background.
(Refer Slide Time: 28:40)

311
So there is a legibility chart which is available and there is a book by Paul Arthur and Romedi
Passini. The book is called Wayfinding Design and there are lot of other elements of Wayfinding
Design is discussed but he have also discussed about the signages in Wayfinding design on
navigation. In that part he discussed in detail about the typefaces, which typeface should be used
on which background for better legibility in the signage design.

But that same theory can be applied here in the GUI or the graphic user interface design when
you are designing the frontend with a visual communication element and applying the color and
selecting the text. This theory will be very much valid. He have written this book in 1992 and
have created a visibility chart based on the contrast index of the text and the background color.
So this contrast index is the value different of two colors.

So this is the scientific formula which based on that he have created this chart. So K1 K 2/K1
where K1 is the highest color value. Here the highest color value is white. White has a 85 and
then red has 13. So here 85 is white minus 13 divided by 85 is this into 100 is what H is. So that
is the indicator H. So H is the contrast value and for optimal contrast value it should be at least
more than 70.

So if the H becomes more than 70 and here you can see if this difference is more, it will
definitely become more because it is on the top size. So if the difference is huge, so you have to
select the color whose value difference is more in a general way. So this is the hue and their
relative value which is K1 and K2. So from here you can select and see whether this is more than
70. And so this is a contrast value and their relationship in the chart.

And sometimes the few colors does not go with each other. For example if there is a colorblind
people, they cannot read green on top of red. So irrespective of their value difference you should
not use this. So few colors are not suitable for each other. And also the color will come from the
brand identity and the holistic style of your design. So many other factors are also there and
when you select this just check with the value difference.

312
And you can see the value difference also there in the Photoshop or illustrator or whatever
software you are using and you can also interpret yourself whether this contrast is going well or
not.
(Refer Slide Time: 31:41)

Now in the typography in the poster design, this is James Montgomery’s one of the famous
poster design during the World War and you can see this color, this blue and red color goes with
the U.S. colors, U.S. flag. So it connotes the U.S. national army and then also the dress colors
and everything goes with this. And the red color has because this is warm color and it is written
in the, and the U.S. army enlist now this main information is written in the warm color.

This is a Art Deco poster. This is designed by Cassandre. And you can see the hierarchy over
here. And this contrast black and white gives a very, this emphasize the hierarchy and this is the
name of the voyage which talks about the, this is the poster for the crews. And then the next level
of informations are on the next level of hierarchy. Also the x-height is more over here. And here
you can see underlined tern, this is another way of emphasizing a font.

So if there is a underline with a very contrasting color, blue is getting underlined with a red, so
that is within this sentence also this word is getting highlighted. So I want U in the U.S. army
enlist now. So this poster is also emphasizing this word U and if you look at the poster the way
the man is pointing at, so this is also emphasizing this word in the graphics.

313
(Refer Slide Time: 33:35)

Now few other examples where there is a connection with the style of design. So this is the name
of the movie. This is a movie by Satyajit Ray, Shatranj ke khilari. And if you look at the way it is
designed, it has a connotation with the chess, this style of the chess and that is definitely having a
higher hierarchy because it is designed and it has more pictorial quality than the other
information. So it might not be, hierarchy might not start from here.

It can be anywhere in the position. It depends on where you want to put your most important
information because this king is lying there and it has a connection with this. So this part of the
poster has the main focal part and your eye travels from this generally eye grabs more attention
in the photograph. So photograph has the highest level of highest power to attract eye and from
there your eye will go to the poster which has a visual connection with the photograph because it
has more pictorial quality and from there your eye will move up.

So it is not from top to bottom eye movement. Rather it is from the bottom to top eye movement
and then from here you can again come to this information which is written in very small letter.
So after reading this next you read about who is the director and then other information. So
Satyajit Ray’s name is on top of it. But it still does not have the highest level of hierarchy. Rather
this part has the highest level of hierarchy.

314
Similarly this is another poster design by Satyajit Ray and then this part becomes the highest
level in terms of typefaces but there is a graphical part and then there are elements on top and on
the bottom. So it kind of visually balances the poster. Then here this is again the Satyajit Ray’s
poster. So on mostly warm background which is red and yellow, the blue has the highest level of
attraction value because it is almost a contrasting color.

And it juxtaposed with contrasting color which is yellow, the complimentary color of blue is
orange. But this is juxtaposed by yellow and red which is part of which compliment, you can say
it is kind of a split complementary part of this orange. And only this part is blue and there is a
little bit blue tint over here. So this has a highest level of hierarchy. Then few photographs are
there. And even the photographs does not contain the blue color so to give emphasis on the text.

And then some other texts are there which has the next level of hierarchy. So I have used Bengali
script so that you can concentrate just on the visual without reading the text. If you cannot read
Bengali just to look at the graphic poster and understand which can have a highest amount of
which can be on the higher level of hierarchy and which can be on the lower level of hierarchy.
Now in the newspaper also we use this hierarchy.
(Refer Slide Time: 37:21)

So this is somewhat similar to the Gothic font which has a very high pictorial quality. This is,
there are New York Times main headline and this is two different day’s Newspaper. One is for

315
normal everyday’s newspaper and this is you can understand this is this just after 9/11 attack. So
in the normal day’s newspaper New York Times this newspaper will have the highest hierarchy.

Then the other newspaper’s headlines which comes here and within that there are two
subdivision of this heading. So within this FBI’s some event. There are one report and the
another report and the other report which comes in the next level of hierarchy. And if you want
to go through the story, the news and then this is written in small font which is the body of the
text. So the elements of the pictorial quality decreases.

This has the highest level of pictorial quality because this is somewhat similar to Gothic font
which has lot of elements. So T and other letters has lot of design elements into it. Then they
have used Italics to increase the emphasis. Now this font has more width than this. So this is the
first news and then the second news and also you know that we start reading from this side to
this side so this must be the important news and this must be the next level of important news.

So this is wide, written in wide, this is written in condensed and then there are other news which
is relatively smaller and you do not see though it is Italics but you do not see this amount of x-
height. And also within that there are lot of variation to create the difference in hierarchy and
then there are advertisement which has the least amount of hierarchy. So we also know which
also confirms to the Gutenberg’s principle.

Now in this particular day, this is really very important day for U.S. history and you can see U.S.
attacked and hijacked this jet and this all this information overpowers even the name of this
paper. So it does not matter which paper is it. This information is so very important for the U.S.
citizens so they have really created this hierarchy of this news overpowering the brand and the
name of the newspaper itself.

Because they must have particular style and particular font assigned for the body of the text. So
they could not change it to the particular more ornate font but still they have gone without
changing the font and without changing it to a very, so without using a very pictorial font they

316
have used a very bold and they have increased the text height and created a very bold statement.
And if they have increased pictorial quality, it would have taken more time to read the news.

That is why they have not gone for a increased pictorial quality rather then they have gone for a
bold and larger text height. And after that then the other news diminish in the hierarchy and you
can see the whole newspaper’s front page has the same one news which talks about this and all
the news falls under this.
(Refer Slide Time: 41:04)

Now if we look at some examples of websites. So this is a Cleartrip website which helps us book
flight and hotels and other travel related, do travel related tasks. So this is first the second page of
Cleartrip where the flight is getting booked. So if you look at the information, search flight is a
very important information but this does not overpower the logos and the brand’s identity. So
this contains the color of the Cleartrip’s logo and the color.

The next hierarchy is this. But still it is more important that is why it is the x-height is more and
then it has a thickness in the information and which comes within the book flight information
and other informations details which has ample amount of white space so that you do not miss
any information. So it could have been cluttered and all this information could have been
cramped. But then you miss lot of information. So when you create give lot of white space.

317
Generally the legibility increases. It might be small font but still the legibility is more. And then
these parts are bold so that you know what is your destination, what is your origin and then dates
and everything and to create there is a other clickable options. They have changed the color so
that you click on this and because of the color this is getting highlighted and then search flight is
a really very important information.

Because after you fill up all these things search flight will be the next step. So the next step is
getting highlighted and also it follows the Gutenberg’s principle. So this is on the last quadrant
and from here you go to the next page. And also they wanted to promote the deals and other gift
card. So that is why they have added colors.

And the deals is in bold and also the x-height is more so that you do not miss that and today’s
price, this is also an important information whether it is going up which is getting red or it goes
down it will become green. So that is an important information.
(Refer Slide Time: 43:29)

And they are depicting that with the color. Now if we go to the next level of next page, here the
important information is not search flight or book. Here the important information is the money.
Because people take decision based on the money of which flight they will select. So this
informations is really very important and this remains constant because that is the logo of this
website and also they wanted to promote something. So those ads are getting flashed.

318
And after money, so this kind of information system is there which you scroll down and start
seeing different flights. And also these informations they have created with the different color
contrast. So 0 stop, 1 stop, 2 stop this is an important decision and other search criterias is on this
side. And another important information is when people want to select a particular airlines. So
they might have a frequent flier.

They might be a frequent flier or have some deal with the particular airlines. So that is why also
this has quite a lot of information and this gives you the relative information for the price of the
ticket and which is also going with the money. So this together talks about the price of the ticket
along with the lowest price and relative price of different fliers, different carriers or the fliers.

So here in this page the money becomes a very important decision-making criteria and the next
level of decision-making criteria is the date. If you are not happy with the money you can change
the date. So here the calendar becomes really big. So you change the date and you decide on
which date you want to fly and also here you change the carrier and you decide which carrier you
want to fly.
(Refer Slide Time: 45:32)

And the similar information similar page is also there in the MakeMy Trip here. They are also
creating the similar hierarchy but in a different way. There are many ways to translate

319
information architecture into a visual design. So information architecture for them will be quite
similar but based on the visual design they have changed their websites and also of course the
information architecture from Cleartrip’s perspective and MakeMy Trip’s perspective might also
have some differences that is why their position of this information also differs.

So here also you can see decision-making criterias are on that side. Their logo on top but here
they have created this book and the information of the money on the bottom to follow the
Gutenberg’s principle which is coming on the fourth quadrant and it has again a higher contrast
big x-height and the book flight is also there to create and also it goes with the different color
which also matches with the MakeMy Trip’s brand identity. And here also there are based on
duration, arrival and other criteria, you can select the flight.
(Refer Slide Time: 46:47)

So the basic theory of this is, this is taken from Steve Krug’s Don’t Make me Think. This is a
page from that book. If you want to know more about the usability, you should read this book
which is available online. So what is the difference between what we assume and when the
reality is. When there are lot of clutter in the design we assume that user will read everything and
scan everything but the reality is user only read which they want to read and which has the
higher level of hierarchy and then they skip other information.

320
So if you cramp lot of information into one page you might lose your client or you might not be
able to give the important information to the users. So the hierarchy becomes really important.
(Refer Slide Time: 47:46)

And what designers build are, designers means naive designers who is not well trained designers.
What do they build if there is a lot of clutter into the design? They create lot of information. But
what users see? User only see the important informations whether they want to buy a ticket. So
they will see few information. They will just scan through the page. How do I want to check my
frequent fliers or miles when there are different task in their mind.

So user come with the website with some task in the mind and then they will just look for those
words within the page. If they do not find that word within your page then they will just leave the
page and they will go for the alternative website and they will not use the website. So when there
is a task, it is very important for the designer to interpret what are the main task and how many
users will come to the website with the particular task 1.

And how many users will come to the website with the particular task 2 and task 3 and so on so
forth. So if there is a first most important task is to buy a ticket, flight ticket. The next might be
the checking frequent flier. The next might be the hotel. So this should have the highest
information regarding, booking a flight should have the highest hierarchy and the frequent flier
might be on the next level, hotel might be on the next level. So these information has to be

321
designed according to that. And visual communication design, selection of typography is really
helpful for that.
(Refer Slide Time: 49:26)

So here many information again he is talking about all this information might not be relevant for
the users. Only provide the relevant informations and if they want to go deeper into that
information then lead them step by step and design the information architecture and information
architecture and visual design has to be intertwined and it should perform as holistically to give a
better user experience for the users. Thank you.

322
 User Interface Design
Prof. Saptarshi Kolay
Department of Architecture & Planning Engineering
Indian Institute of Technology, Roorkee

Lecture - 16
Design Semiotics and Visual Perception

Welcome students to the online NPTEL course, User Interface Design. In this class we will talk
about the visual perception and semiotics. So semiotics is the science of how people interpret
signs and this subject came from linguistics and how we interpret the language of iconography or
the sign but it is widely used in the visual communication design and user interface design and
also the product design.

So when metaphorically we represent something or when we put a particular color what is the
significance of that and how people interpret and how people psychologically perceive a
particular color, icon, or the overall composition and how people read the narrative and also
website can also have a narrative. So how from the starting page what are the information you
give to the people and what is the next layer of information.

So the information gradually unfolds. So you can think about it like a small storytelling. It
depends on the typology of the website. So website also can be a gamified interface. So there it
will be more towards the narrative style, a narrative style will be more strong but throughout a
particular process of the task flow. So for example a ticket booking. So there is a journey of the
users. So user start and launch into the first homepage.

And then start thinking about the next so where they will go and then different flights or
available trains or buses comes. And then the select and then they look at the timing or the cost
and then they pay and then they do. So there is a journey and so that is actually a narrative. So
that is a task going on and you can think that the task as a narrative. And also when you order
food and everything so there is a process going on.

So there is a sequential task which is going on and how people interpret that and how all the
informations together are helping people to remotely do the particular task which websites are

323
designed for it. So what websites or web designer wanted the task to happen, the way the task to
happen. So user should understand that and then they should follow the similar way how
designers have designed.

So initially we were discussing about the users designers conceptual model and users mental
model. So that should match in the system image of the design. So for that all these metaphors
and how people interpret design how people perceive the design the icons and colors is very
important for designers to understand.
(Refer Slide Time: 03:32)

So in this class we will talk about the theory of semiotics, a brief history of semiotics and how it
is divided. So we will discuss the Ferdinand de Saussure’s theory and Charles Sanders Peirce’s
theory and how briefly we will talk about it. And then we will go to the main three part of
semiotics which is syntax, semantics, and pragmatics. These three parts are three different parts
of semiotics. So semiotics is the bigger umbrella.

Within that syntax is there, how different things are sequentially arranged and the semantics of
the meaning part of it and the pragmatics and how people interpret and also we will discuss other
things which is there within this three parts.
(Refer Slide Time: 04:23)

324
So the main thing of the semiotics analysis involves identifying the constituents unit of semiotic
systems such as the text, socio-cultural practices, the structural relationship between them, the
opposition, correlation and logical relation. So there are based on the socio-cultural background
of people the perception of icon might differ. So what the way, so it also depends on the target
audience. So who is the target audience, based on them the design should change.

So not only the UI UX design also the visual design should change based on the particular target
audience. So based on their socio-cultural context, their liking, their lifestyle, their perception of
color is different, their choice of colors will be different, the way they read that is also different.
For example we were discussing about the Gutenberg’s diagram.

So that might not work for the people who read from the opposite side which is who read and
write from the other side which is from right to left, for people from the Middle-Eastern country.
So the Urdu and Arabic, they write from right to left. So they are conditioned in that way. So
their reading habit will be different and if your target audience are them so the design principle
should differ.

And also based on different region, different socio-cultural background, the color preference the
meaning of different icons might be totally different. So the learning of various ways designers
can employ the meaning and based on the target audience is also you should learn through the

325
semiotic interpretation. So there is two component, one is we have already discussed the design
component and the design methodology. Now we are talking about the users.

We also talked about the users based on the user research and we will talk about the user
feedback. So there we need to understand how we need to also understand how their perception
is different. So we should not only be based on the user feedback on the last moment. So
beforehand we should be able to understand what they might like and we should give the design,
we should create the design based on their perception.
(Refer Slide Time: 06:47)

So a semiotics, what is semiotics? Semiotics is the way we can pull an emotional response out of
the world and it also helps how emotion happens in the imagery. So after looking at a imagery
what kind of emotions and what kind of perceived interpretation can happen within the user. So
they are different design elements. So all these design elements and how people react to it that is
the main thing of the icons and the semiotics.

So it is the science of, semiotics is the science of signs and it is the signs of design
communication and so this is where the semiotic plays a role. So between the design and the
perception of the user, so what is going on? So that is the semiotics talks about that. So for
example if you look at these two examples.
(Refer Slide Time: 07:50)

326
So one is FedEx logo. So FedEx is the movers and packers. So they transport goods from one
place to the another place. This is if you look at the logo of the FedEx, so you can see based on
this figure-ground relationship and the solid and void, so there is a arrow created within this just
a typographic logo. So that signifies that it is something to do with the movement. So that has
been created based on this.

So in the first go we read the FedEx the typographic logo and then this orange acts as a the first
when we read this white acts as a background and this blue and orange acts as figure and then if
we look at the orange then orange becomes the background and this white again becomes the
figure and then we see this arrow which signifies the meaning of the company. And also the
basic example can be the color of red. So the color red for most of us signifies the danger.

And it might not signify danger all the time when we type it with the typographic the phonetics
of danger or the letter of danger and then with the skull and bone then it strongly communicates
the meaning danger. So if we just take red color it might be just a red signal or something it can
also signify passion. But when we combine that with the type letter and also some icons which is
the skull and bone then it together it communicates this letter danger.
(Refer Slide Time: 09:47)

327
And the historic background if we look at, so Ferdinand de Saussure was the father of modern
semiotics. He used this, he defined these terms in the beginning and later Charles de Peirce
developed the similar philosophy and based on the socio-cultural concept. So based on their
theory so there are few terminology we should discuss. One is the signifier and is the signified.
And together what is it? So we are the signifier and signified are talking about a sign.

So sign is the smallest unit of meaning used for to communicate. It is the whole that results from
the association of the signifier with the signified. So signs are the smallest unit and signifiers and
signified are together helping the users to understand the meaning of the sign. So what is
signifier? It is the material thing of the signifies, example the word on the page or the tactile
expression or an image which are signifier.

And signified is the concept that signifies wants to refer. So for example if I say pen, the
phonetic expression of pen is actually depicting the actual condition which is the signified. So
the phonetic sound of pen becomes the signifier and the actual pen becomes the signified. So
when I say pen, so that the image of this pen actual pen comes into people’s mind.

And it can if people understand English, then only they will interpret this image of a actual pen
will come into their mind. So the sound is just a signifier. The actual concept is the pen, the
actual pen. Similarly, we can just draw a pen, icon of a pen. So that becomes the signifier. This

328
icon becomes the signifier of an actual pen. So it can be a very or it can also be a photograph of a
pen. So photograph of a pen is not a pen. So it is a photograph. That signifies the actual pen.

So signifiers can be the photograph or the icon, or the phonetics or just writing the p and pen. So
all these are signifiers and what we are signifying, so that is the signified which is the actual pen
or something which comes into people’s mind. So that is the actual signified thing is there in the
mental image. So that is the mental image of the mental model of the user.

That is the signified is there and all this phonetics, the text or the photographs or the icons are
signifier which is helping the users to recall that thing which is there in their mental model. So
all this relationship between the signifier and signified is called signification. So that is the
process.
(Refer Slide Time: 12:49)

So here if we look at the sign is the element. So sign can be text icons and everything as it came
from the linguistics. So initially that is the source of genesis of this concept. Then signified and
signifiers are interacting between it. So signified is the concept which is the mental model and
signify can be sound, word or the image and it can be flower. So this is a painting of a flower and
then actually we think about the flower which we have already have in our mental model.

329
So this is a painting of something like some flower and then if we look at this the mental image
of the sunflower will come into our mind. So this is the concept of semiotics, the process of how
signifier signifies a signified. So that signification, process of signification is called semiotics. So
it is a science of signs and this signs are not iconographic signs. It can be real picture,
photorealistic picture the abstract painting or figurative painting or icon, very minimalist icon or
can be text or can be word or the phonetics.
(Refer Slide Time: 14:09)

And so within that semiotics, semiotics can be divided into 3 different segments. So one is
syntax, the second is semantics and third is pragmatics. These all 3 component together creates
the semiotics or the science of signs. So what is syntax? Syntax is the hardware aspect of the
language. It introduces us with the structure, how language should be formed and how culture
setup and eventually codifies things like grammar or rules of proper communication.

So this is the structural part of the meaning. So there has to be in a proper sequence to make a
meaning. So for example if we look at a storyboard or the animation or a narrative comics or the
visual narrative, so each and every storyboard should have a proper sequence. So we cannot
jumble up the story, then the narrative sequence will be destroyed. So if the first sequence is
drawn, first sequence should be drawn here.

330
The second sequence should be drawn here and the third sequence should be drawn there so that
we have we can understand what is the flow of the total story. So if the first sequence is here,
third sequence is here or it is jumbled up then the total meaning of the story might not be
perceived. For example and if we are designing a website, if we start reading from top the first
information which users need first should be on the top.

The next level of information which user need should be on the next level and so it has a proper
sequence, top to bottom vertically and also when we think about the total website, so all the
sequence should confront with the task flow of the user. So what is the first task people will do
that should come in the first hierarchy of information architecture. The next task should be on the
next hierarchy and the other task should be on the other hierarchy. So it should also be based on
different hierarchy of the task flow.
(Refer Slide Time: 16:27)

So the next part of the semiotics is the semantics. Semantics is the language software or the
meaning. So the way we create meaning and the way we create the signs and signifiers, icons,
index and symbols. This is the part of it. So the meaning part of it is associated with the
semantics.

So first is the sequence, in which sequence the total task flow or the way we read a particular
website or the holistically how the website’s different pages are layered in different hierarchy,

331
that is the syntax part of it. So how the way it has been designed in different hierarchy based on
the task flow is the syntax, and now the meaning part of it is the semantics.
(Refer Slide Time: 17:19)

And the next part is the pragmatics. Pragmatics is the relationship between the signs and their
effect on the users’ mind. The function and the context of the use of signs that is how the Mccoy
told. The study of the ways in which signs are used and interpreted. So one part is semantics is
what is the meaning and other part is the what is going in the peoples’ mind. So when we design,
the design elements are the semantics and the way it will be interpreted is the pragmatic part of
the semiotics.
(Refer Slide Time: 17:58)

332
So pragmatics is the study of the way in which signs are used and interpreted, the context in
which language is used and the function of the language and everyday way we use the word and
image and communication. How do they function and in what setting do they function properly.
So in semantics when we are talking about the icons, index and symbols the small elements and
in pragmatics what we are talking about is in different context or the same icons and elements
might differ.

So for example if you look at the icon of a tree, one icon of a tree and then this might signify
tree. And then if you see 2, 3 different icons of tree similarly juxtaposed by each other, then it
will signify a forest. So in the context with the setting that changes. Now the semantic part is it is
all the same icon and based on its composition it might change. Now if we see the icon of a tree
with the icon of another flowy lines which might signify river and then 2 triangles which is there
which might signify mountain, then this will be signified as a landscape.

So their meaning based on their juxtaposition is different and also based on the people’s
perception will also be different. So they might, few people might even look at it in a different
way and perceive something else out of it. They might perceive this like a village and something
else based on their previous perception because everybody’s mental model is different.
(Refer Slide Time: 19:57)

333
So within semantics, first we discuss the semantics. Then we will discuss pragmatics and syntax.
Within semantics there are 3 things. One is icon, index and symbol. What is icon? It is a physical
resemblance to the object or concept is icon. It is very realistic photographs, realistic statures,
maps, diagrams etc which is easily understood and recognized is icon. So it will be more
photorealistic or very figurative drawing.

So a detailed drawing of something which of a signified is a icon. So this is a painting, This Is

Not a Pipe. So the name of the painting is This Is Not a Pipe by; the name of the painting is This
Is Not a Pipe and here you can see this pipe is painted in a very realistic manner. So the painting
of the pipe is, so why the painting is named as This Is Not a Pipe because it is a painting of a
pipe and that is why the concept of signified and signifiers are touched upon here in this painting.

So the painting of the pipe is a signifier and what is it signifying is the actual pipe and the way it
is drawn has a very figurative approach of drawing. So the painter of this painting is Magritte
Rene.
(Refer Slide Time: 21:28)

And the next thing is the index. Index is little abstract form of representation. So there is a direct
link between the signs and the objects or concept. It is an indicator and so it can be hand gesture,
symptoms, clues. Audience can figure out the cause and effect of the relationship. So these are

334
not so direct. Index are little indirect than icon but more direct than symbol. So this can be
gestures, symptoms and clues which will give the clue of relationship.

For example if there is a composition and this composition is directing to something and then the
focal point is created over here which becomes a protagonist of the concept. So those all things
are kind of like hand gesture. So this lines are directing towards this. So that also adds as a hand
gesture. So together that creates a composition. And maybe something metaphorically
represented. So for example this is Edvard Munch’s Scream.

So in this painting all this flowy, scratchy lines and the warm color tone and the type of image of
expression is there within the face of the person painted over here. And everything is giving an
expression of scream and phobia. So the way it is painted is not so figurative. And all this skies
and flowy lines. So this comes within the expressionism of painting and it expresses the concept
of phobia which is scream.
(Refer Slide Time: 23:24)

The next is the symbol. The symbol is the learned and agreed upon code. So an arbitrary
connection between the signs and the objects or concept can be language, number, alphabets and
all other symbols. There is an abstract trademarks. So all this symbols if we do not know the
meaning of it. So that requires a background knowledge, in-depth knowledge to interpret a
symbol.

335
For example if you look at the symbol of this alphabet, Roman alphabet 1, so people who can
understand this, read English can only read it as 1 and this has nothing to do with just a number
which is 1 if you do not know. And if I write in some other language, so this is how 1 is written
in Bengali. So if you do not know how it is written in different scripture so conceptually you will
not know what it signifies.

So you need to know a particular, you need to have a lot of background knowledge to interpret
this. And it can be also different from different people. So if I just draw this symbol and people
who are more associated with the Indian context and with the Hinduism, they might interpret this
as Swastik symbol. But maybe people from Germany will interpret as a Nazi symbol. So same
kind of composition, same icon can be interpreted in a different way based on the people from
different background knowledge.
(Refer Slide Time: 25:06)

So in the syntax there are different elements of within the syntax. So which is the hardware part
of it or the how the sequentially everything goes. So one is the syntagm. Syntagm is a collection
of signs organized into a linear sequence and syntagm occurs at multiple levels, word, sentence,
story formation. It also occurs in multiple levels of website design as the syntagm is there in one
particular hierarchy of website.

336
So if you are in one level of information architecture there is a syntagm and then the next level of
hierarchy there is again a syntagm. And syntagm is when there is a particular one way. So when
it is just going linear, in a linear fashion then there is a syntagm. But in information architecture
generally it can bifurcate from different sides and so there is no particular linearity, it goes back.
So that kind of information architecture is not part of syntagm because it is not going linearly.

So there is lot of connection and from where you can bifurcate. But there are some websites
which you might have come across, so where there is just one option of scrolling down. So if you
look at the main page of Facebook, you just scroll down. So there is just a linear flow of the
hierarchy of the, the way you are going, the information has been shown. So also if you think
about the Google search engine, so there is a one linear way it is going on.

So that comes under the syntagm. So there is no bifurcation. So you see the first layer of search.
You go to the next layer. So it is a continuation. So it is just broken into the pagination. It is not a
continuous scroll like Facebook but it is like a broken in different pages like if you click 1, 2, 3,
4. But there is one linear option. So you can come back to from 7th layer of search to the first
layer. But there is a one particular linear direction.

So it is not information architecture, it is not bifurcating from different place. So also in few
website you will see, you just scroll down and there might be some animation and UI transitions,
but it just scrolls down from top to bottom. And you go to the previous page, it will just go up
and go to the next page, it will just go down. There is a one single layer of linear sequence. So
how you want to design, how the sequence of your website or the information architecture is so
that should be thought about based on the function of the website.

So if the website is following a syntagm or a linear sequence, the website’s information

architecture should look like this. So it should just go like one single direction. So Facebook is
not exactly a similar example because if you go to the home then this is one and then you go to
your next profile then it will be like that. But when you think about a news feed how it is
coming. So it is something like that. You just go deep into the website.

337
The examples of syntagm is, the syntagms perspective is when the linear sequence is broken you
change it then the meaning might change.
(Refer Slide Time: 28:51)

For example a comic strip where the first information should be at the first and the second
information should be at the second and third and it should be arranged in that way. So if you
change it, the total meaning will be totally different. And also if you look at the Paul Ryan’s
design IBM’s logo design. So it is one iteration of the IBM’s logo.

So IBM and this is signified in different icons which is metaphorically representing something
which is nothing to do with the letter IBM which is the actual signified but this is creating a
metaphor of some other element which is phonetically similar to IBM and this is how the logo is
designed. But if you change the sequence, then you cannot read it as a company’s logo of IBM.
(Refer Slide Time: 29:49)

338
So the order is crucial for meaning in case of syntagm. So if we write like this it might not have a
meaning. But if you write this then it will have a meaning and even in the sentence and the
paragraph there has to be a syntagm and in linguistics. So syntagm will be a proper sequence of
horizontal and vertical sequence.
(Refer Slide Time: 30:15)

Now the next is the paradigm. Paradigm is the class of all icon that can be substituted into the
same position or slot in a grammatical sentence. So it can be considered that paradigms are
running vertically. A set of items that form mutually exclusive choices.
(Refer Slide Time: 30:39)

339
For example, if there is a system so which is a syntagm and maybe option 3 can be replaced by
many other things. So that creates a paradigm so which can be interchangeably replaced. So that
creates maybe you can that gives a multivariate options in design, so maybe instead of that page
something else if you put the holistic meaning does not change.
(Refer Slide Time: 31:11)

For example if you look at the website of a particular search engine or a particular e-commerce
websites, so if total meaning of the e-commerce website, how it functions that will not change if
we change this icon with something else because it is just showing what are the different
products in this website. So if you even replace this, that will also not change and the meaning of
this total website will not change.

340
But definitely the process of purchase, the clickbait or the probability of clicking on that
particular product will change but total meaning of the structure of the sequence will not change
if we just change the image or the product in a e-commerce website. Similarly, in Youtube if the
videos get replaced by some other video then the total meaning of this website will not change.
Then the next is myth.
(Refer Slide Time: 32:25)

A combination of paradigms and syntagm that make up a soft-told story with an elaborate
cultural association for example cowboy myth and romantic myth. So these are coming from
linguistics. So these are the genre of different style. So this combination of syntagm and
paradigm together creates a narrative. So it might change. So for example if we think about the
folklores, so the same folklores if the syntagm is similar.

And then in different regions, the folklores has a minute change which is the change of paradigm
can also has a similar genre of the folklore which is the total holistic meaning is same but there
are minute iterations. In website giving a similar analogy might be difficult but if you can think
about when you are creating a multivariate options so if you have a concept of myth that might
help.

341
For example if you start with one particular design, change few options which might not change
the total website of this design and then which also has a similar task flow and then it can create
a different design which might act and function better based on user testing.
(Refer Slide Time: 33:50)

Next part of the semiotics is pragmatics. And pragmatics, within pragmatics there are 3 things,
the connotation, denotation and polysemy. As we have discussed the pragmatics part is how
people interpret all this sequential part which is the syntax and all this icons which is the
semantic part of semiotics.

So the structure which is the pragmatics and the semantics which is the icons and how these two
things are interpreted which is the pragmatic part where the users perspective is coming to
picture. So there can be connotation, the way the meaning is transferred it can be connotative
meaning. It can be a denotative meaning and there can be polysemy.
(Refer Slide Time: 34:38)

342
First let us discuss denotation. Denotation is representation of sign’s primary meaning which is
real, direct and clearly perceivable. It is the most basic literal primary meaning of the sign
example the word, any word which is written like that. So first meaning will be signified as that
particular thing. So if we take the example of a particular flower like rose, so that signifies only
the flower rose.

So that is the first layer of meaning, the first meaning of it if we just write that name of the
flower or just phonetically pronounce it then the flower’s image will be the first layer of the
basic meaning which is denotation. Next it might have a signification of romance. That particular
flower might have some connection in particular in few people’s mind. So that will not be
denotative meaning. That will go to the connotative meaning.

So that is the next layer of meaning. So for that you need some other background knowledge or
background perception about that particular flower. But the denotative meaning is that just the
particular flower rose. And even for few people it might be, they might think about Shakespeare,
those lines like whatever you call the flowers that name, so those many other things can come
into people’s mind. So it can go on. But the first layer of meaning is just the basic meaning.

So this is Andy Warhol’s painting of soup can. So if you look at this, he has just painted different
soup cans and within the pop painting, pop style painting by Andy Warhol. So this is different

343
soup can has different flavors are written over there. If you see the actual painting you can read
that. So it is just, it talks about the monotony of everyday life. So it is represented with the soup
can. So if you consume, it is like everyday we consume, in urban life we consume one can soup
and then just the flavor of the soup changes.

But it is kind of a repetition of everyday life. So it is signifying that. So signification of the

repetition of everyday life is not the denotative meaning. The denotative meaning is the soup
can. So many soup cans are drawn like that. So the first layer of the meaning, if you look at this
painting, the soup can will come into your mind. So this is not the soup can, this is the painting
of a soup can but when you look at this painting, soup can’s image will come into your mind.

The next if you start connecting all this soup cans, why it is drawn like that and if you read about
the painting’s theme and if you look at the different flavors are drawn then you can connect with
the monotony of the life, of everyday life in this painting. So that becomes a connotative
meaning, not the denotative meaning.
(Refer Slide Time: 37:51)

So the connotation or the connotative meaning is the second layer of the secondary meaning
which is not direct, indirect meaning and it needs some background knowledge and it depends on
the culture, secondary meaning is dependent on the culture and it depends on people’s

344
perception. So this is painting basically from Madhya Pradesh, the central part of India which is
Gond painting.

And if you look at the painting, so this is a deer and the deer’s horn is transferred into the tree.
So this is coming from a folklore of a particular sign. So if you know the folklore then you will
understand why this is painted like that and how the flora and fauna interacts with each other and
based on that the story is there. So otherwise this is just a deer with a horn, whose horn is turned
into tree. So the next layer of meaning will be only understood or interpreted by the people who
understand this style of painting.
(Refer Slide Time: 38:59)

So this is again coming from the Indian mythology of Ardhanarishvar painted by Abanindranath
Tagore and so why it is painted like that, so that needs some background knowledge of this
painting of Abanindranath Tagore or the Indian mythology. And again some example of
connotation and connotation might vary based on the setup. So that is what we were talking
about when we are talking about the pragmatics, the setup or the position of a particular icon
which comes from the semantics might vary.
(Refer Slide Time: 39:33)

345
So semantically these are all apples. So semantically that particular painting of this particular
painting or the photograph of if you look at this particular imageries they all signify apples which
is a fruit but the context, based on the overall context of this apple the pragmatics changes. So
the connotative meaning of this total painting or the packaging design changes. So the first is the
Titian’s painting, Adam and Eve, they are having this apple.

So here this is the meaning of apple and the story and everything evolves around a particular
Christian story. So that changes if you know the particular story. Now this is Rene Magritte’s
painting in 1964. So Titian’s painting was in 1570 and if you know the story then you can
interpret the Rene Magritte’s painting. So if this is the first story in connotation wise these are
different. So this is the first initial story. So this is borrowing.

This Rene Magritte’s painting is borrowing this concept of Adam and Eve and then this painting
is drawn like that. So this painting’s name is Son of Man. So what he is painting is painting an
apple in front of a face of a man. So there is no facial elements is shown. So it can signify any
different man because all the features are not shown. So instead of that apple is shown. So
everybody is son of Adam. That is what the painter wanted to convey.

So that also depends on whether you believe on that particular story or not and then if you know
the story and based on that this painting will be interpreted. And the same green apple can also

346
be painted on a package design to just show freshness and the green apple flavor of a particular
shampoo brand. So this has nothing to do with the particular story. So they are based on the
context.

So nobody will interpret that or connect this particular image with the story of this Adam and
Eve. But here with the placement and the context, they will connect it. So it is based on how,
because of this all this brand and the green apple flavor and all this water splash it just signifies
freshness and the flavor of that particular fruit. So the same apple, green apple in two different
context they are acting in a different way.
(Refer Slide Time: 42:35)

Also apple can act in a different way if you look at a particular logo if you know the brand so
you will understand. So this apple is not an apple. It is a brand apple which creates iOS platform
mobile and other computer devices. So if you just see this composition of 4 squares and also you
can similarly interpret this is the mullion of window and the blue window sachet and this is
talking about the window, the Microsoft Windows operating system.
(Refer Slide Time: 43:06)

347
So another is the polysemy. Polysemy is, there is a multiple meaning, where there is a multiple
meaning going on simultaneously. So poly means many and semy is meaning.
(Refer Slide Time: 43:19)

So if we take an example of this WWF poster. So this is, there is a small lions over here. And
that creates a silhouette of a lion and so the first one meaning is this lions moving and they are
fading away. So it is talking about the, that is an endangered species and they are gradually
moving in this direction of fading away and diminishing. And together also they are creating the
silhouette of the lion.

348
So when we look at the picture, so you cannot read this lion’s icons because they are very small.
But holistically, in Gestalt’s principle it is creating the silhouette of the lion. So that gives the
meaning of the lion and then the meaning that they are leading towards extinction. And also if
you look at the pizza order, the way it is ordered in Pizza Hut. So this is the timeline. In this
particular image, the first meaning is the timeline. So this acts as the timeline.

First is the pizza order, then making of pizza, then cooking, the order is getting cooked and then
gradually the sequence is there. So it has a particular linear sequence in the syntax and then also
it gives you a feeling of the pizza, the way pizza is divided in different pie section. So that also
gives, one meaning is the timeline and the second meaning is the pizza. That creates the holistic
meaning of the pizza ordering timeline. So this can be one example of the polysemy.

349
 User Interface Design
Prof. Saptarshi Kolay
Department of Architecture & Planning Engineering
Indian Institute of Technology, Roorkee

Lecture - 17
Visual Communication Design

Hello students. Welcome to the online NPTEL course, User Interface Design. In today’s lecture
we will discuss about the visual communication design details and how to design the frontend
design and with the visual communication design part.
(Refer Slide Time: 00:41)

So we have covered this, so if you look at the methodology, we have covered these parts. So user
research we have talked about and we are right now in design stage and within the design stage
we have talked about the information architecture, how to create the information architecture
using paper prototype wire-frame which is the UI component, user interface or the where the
user experience design part goes on. So this is the UI UX part.

Now we started discussing the visual graphics part of the visual communication design part and
so we were talking about the high fidelity design and there we discussed about the typography,
the contemporary design trends, the semiotics and today we will see few of the design details and
how to create the overall image of the frontend design and we will talk about how the grid
layouts in the visual communication design come into picture.

350
So all this design icons and content and everything how it can create a holistic visual palette
within the user interface.
(Refer Slide Time: 01:49)

So here we are focusing on the visual graphic design and high fidelity design and this is the last
part of the high fidelity design and then we will move on to the user testing process and how to
get the feedback from the users based on the UI UX component as well as the visual design
components.

So feedback on how functional the design it is which is coming from the user experience
perspective and how aesthetically whether it goes with the theme that is coming from the visual
design perspective. Both the perspective will be tested based on the user’s opinion. So that will
be discussed in the later stages.
(Refer Slide Time: 02:29)

351
So visual communication design detailing, how you do the detailing. We will just give few
examples because the method and everything has been discussed earlier and all the theories. So
let us take few examples of iOS platform which is skeuomorphism which has been discussed
earlier and then material design by Google of android. So how intricately you have to think and
what are the design details which you have to think about, everything we will just discuss with
an example.
(Refer Slide Time: 03:08)

So if you look at the iOS 6 and iOS 7, so they are minor design detailing change. So if you look
at the overlapping of these 2 buttons of skeuomorphic style of iOS in different version, so they
are actually dealing with the curvature of the corner and that has been changed. So that minute

352
precision also impacts the design detailing. So if you look at the overlapping that changes. And
even in iOS everything is formulated when you look at the iPhone, this is in the iPhone x format.

So navigation bar is fixed, its dimension is fixed. Then the layout of the margin’s dimension is
fixed and the home indicators for all these icons will be over here and the tab bar, everything the
design is fixed. So you have to follow proper guideline and when you design your website or
mobile application, all these visual design guidelines has to be fixed beforehand and all these
detailing should create the final design with a better design will be created by all this detailing.

So if you look at the iOS design guidelines, so every taskbar, navigation bar, activity view bar
everything is well delineated and people follow that. Even when you are designing a mobile
application or mobile application based on iOS platform, you should confront to the design
guideline of skeuomorphic style. So you need to have a very precise eye and look at the minute
detailing of the each and every design style.

So this style of iOS and material design what I am discussing right now is previously fixed by
the designers of those brands and when you design your own style or website, every detailing has
to be fixed before and all the icons and typography everything should fit with the holistic design
palette which you create before. So from mood board you create the design palette and you select
specific typefaces, specific icon, specific color and texture and throughout the website you have
to follow that.
(Refer Slide Time: 05:28)

353
So if you look at the tab icon, so this is active and this is inactive tabs of different dashboards,
downloads and other things and this is the navigation bar and if you look at different various
icons there are also a visual simile into that and also the activity bar. So everything has a similar
visual style which you can correlate and which does not change much and together it creates a
visual simile.
(Refer Slide Time: 05:59)

And also if you look at the different other design elements, so you can look at this icons of which
is designed for other applications, for example message, e-mail and other different applications
which has a similar curvature of different icons and tabs. So that creates a visual synchronicity
within the other design elements.

354
(Refer Slide Time: 06:26)

Now if you look at the material design by Google design team which is mostly used for android
platform. So there also within the android platform they have a particular visual style. So if you
are designing on the android platform you have to follow that particular design vocabulary. So
here there are examples of dark and light material thing. So android uses this material design
which is by Google.

So you can see these tabs has a sharp edges and based on this light background and dark
background, the visual design changes a little bit. So you can see, so they have gone for a neutral
grey typefaces so that which will be visible in both dark and light background. And you can see
the differences between the visual style of material design. And the skeuomorphic style of iOS
platform.
(Refer Slide Time: 07:25)

355
So these are the material design style template. Also they have a particular grid system which
they follow. So these things you can find out online. And also there is a grid system for the iOS
platform.
(Refer Slide Time: 07:43)

So this is the grid and within that also there will be minor grids which divides this mobile phone
into different parts. So that grid is also there. And here all the specifications of the grids are there
and you can check this online. So when you design your website, you have to fix a grid which
will divide the full page of your website layout in different segments and also you have to design
the colors and themes of the icons and details of the icons and which you will put in the design.
(Refer Slide Time: 08:20)

356
Now there is a important book which you should follow which is by Timothy Samara. The
book’s name is Making and Breaking of Grids. So grid layout is very important and that grid
should follow in different hierarchy of your design. So if you are launching on the homepage and
you are going to the next page, this homepage and the next hierarchy of the different pages when
you go deep into the information architecture and these design should not look very different.

So one identifying factor is the icons or the visual design elements, the small elements of the
icons tabs, dropdown menu and that is the microelement which you can see different elements.
So there can be search engine, there can be tabs, there can be dropdowns. But another important
part is the placement of these elements. So that will be defined by the grid of the website. So
where will you place these element, they have to have a similarity in the next page.

When you go to the next, click the next button and you go to the next stage, deep inside the
information architecture, the placement should not change and it should have a similarity with
the previous page where you have seen. So that is why breaking the full page layout in different
grid and placing all these element consistently will create the holistic combination of the website
or the mobile application and it will have a unified user experience.

So it will not shift and people will also expect the next button to be somewhere in the similar
space or the same space. So you should not shift the button and few of the design element

357
remains constant and then within the grid few elements falls within a particular grid system. So
to combine all this user interface or the information architecture with a unified system, this grid
layout which is the macro system which combines every small elements into a holistic unified
whole is the grid system.

So you need to understand the importance of the setting up a grid before you start putting all this
content or the text and other design elements into the design. So first you have to make the grid.
And here if you read the book, so there are mainly 4 grid system. One is the manuscript grid.
(Refer Slide Time: 11:10)

Manuscript grid is nothing but when you leave spaces from all over 4 side and you use this
whole body of the website or the web space in a one single go, but generally we do not use that
in the website so the use is very less. The other 3 important grids are module grid, columnar grid
and the hierarchical grid. So modular grid is when you divide the space into equal modules. And
so this is called the main body of the information will be here and this is called the gutter space.

We will discuss about the morphology of the grid system in next few slides. So here each and
every module is same. So that is a modular system of dividing the whole space and the module
might not be a square. Here the example is square. It can be even rectangle and you can divide
the display area of the interface into rectangle or square of same size and equal gutter space. So
the gutter space between them are not changing and the modules are of same.

358
Now what you can do is if the information is much you can join two module but you have to
maintain this gutter space in the next page. Or you can join 4 module or you can join vertically
up and create different content. For example here the text is like this and here the total area is
used for that and here only one grid is used. So based on the content volume or the size of the
photograph and image or other design element it can be changed.

But while you were using this grid system when you launch to the next page, people will read
this psychic line or the visual lines which will create a psychological impact of unified whole of
all this different pages. So this same system can also be used for graphic design. So when you are
designing a booklet or book layout design so InDesign or Photoshop, so you should create this
kind of grid. It can be columnar grid, it can be different kind of grid.

But that grid should be followed throughout the book so that, that book looks, all the pages of
that book looks from the same book. So another type of grid is the columnar grid. When you just
create the column or straight vertical column you can also create row. So columnar grid when it
is on the vertical line, this is columnar or it can be also row based thing. So when you just divide
the page into either horizontal or vertical segments.

So you just create those horizontal or vertical segments with a gutter space in between them. So
this is the gutter space. There is only a gutter space in the horizontal direction. So this might not
be there when this is a columnar grid. And in columnar grid, the different columns might be of
different size based on the content. Here it is equal in all the cases. But it can also differ. But
generally you should avoid changing this gutter space, the width of the gutter space that creates a
visual imbalance.

But you can do that based on the visual need but generally it is the same, the negative space. So
here in the module grid, so this is acting as a figure and this gutter space with the white space in
the periphery is acting as a background. That will always be in the background and no content
will be there. If you join this then that becomes a bigger figure and then the gutter space acts as a

359
background. So here this column structure is acting as a figure and then the gutter space with the
peripheral space, white space is acting as a background.
(Refer Slide Time: 15:25)

The other style is the hierarchical grid. When the information in the website are of different
value, of different hierarchy then you might create a hierarchical grid where each and every grid
is different. But that hierarchical grid in the homepage or when you go to the next page should
follow. So hierarchical grid, if you start designing with hierarchical grid when you launch to the
next page, it should not shift to the modular grid or columnar grid.

So if you are selecting a modular grid, you should follow the modular grid throughout your
website or application and if you are creating columnar grid you should follow that throughout
and the hierarchical grid should be followed throughout. It might change. So if you create these
lines in the next design it can come as a column if you want but all this design element, the line
and the grid should not change. The position of the lines should not change drastically.

So you might shift the grid from hierarchical to columnar and even if you want to join this
modular grid as a column but that you can do in few cases but the lines from where the gutter
spaces are going that should not shift in the next page. And also this is an example where
through a modular grid it can also create a different hierarchy. So there are endless various
possibilities there with the different grids.

360
But the main thing is the gutter spaces and the guidelines should not shift. So here the hierarchy
is achieved based on when you are joining 2 grids together and it can be in different direction. So
that hierarchy can be achieved in different other type of grid system as well. So this is the
morphology of the grid, how the grid can be divided.
(Refer Slide Time: 17:29)

So this is a column. So in columnar grid this acts as a one unit. Or in columnar grid if it is a
horizontally going so it will act as a row. So this is a row of the grid space and then you create
margin from all the sides which is the negative space. No information and no tab, no icon will be
there on the margin in any cases. And then there can be a running header which can be on the
margin and which will be constant and some header information is going on.

And then this is the flow line, horizontal and vertical flow line and this space is the gutter space
which is the negative space between two modules or two columns or rows. So these spaces these
all spaces are called gutter spaces so which divides the grid and the line between two flow lines.
So this can act as a special zone and it can be one just single module or two modules. So that
depends on the content of the user, so how big that is.
(Refer Slide Time: 18:36)

361
So this is one screenshot of the book, Making and Breaking of Grid by Timothy Samara. So here
within the book layout also, if you open the book, this is one page and this is the other page and
there is a continuous grid line going on. So the author is talking about the Kandinsky’s Bauhaus
style of design and Swiss style of design and then if you look at the book layout, page layout all
this flow lines are going horizontally as well as there are vertical lines.

So if there is a pictorial, the graphics is there or even the text body everything is following a line
which creates a unified composition of the book. And when you create the website, similar
unified composition has to be created so that it does not look chaotic while people will read the
website. So it is very important for the user experience design perspective.

So all the information should be presented to the users in a very simplistic way so that to
decrease the chaos this grid system will be very helpful. So they are some examples of column
grid, modular grid, and hierarchical grid in the website.
(Refer Slide Time: 19:58)

362
So if you look at the LinkedIn website, so this follows a columnar grid. So this is main
information column of the person’s profile and then the detail newsfeeds comes over here and
the scroll is happening in this grid. So you can see the column’s width are different based on the
main information content because this is the main information what you look at.

So that is widest, has the most width so that the more information is there and especially the
gutter space is almost similar. So this is an example of a column grid system. And generally we
see the column grid system because row grid system does not have the option to scroll like that.
So column goes on like this and you can scroll down. And the module grid system can be the
example of YouTube because the type of the website is there are different icons pops up of
different videos.

So modular grid is a better option for them. So that is why they have gone for that. So when you
click on the next page or the next search, all these modules will, the spacing of this module will
be same and the next video will come. So they are following this gutter space and all his modules
and then within that the information changes. Other example is the hierarchical grid system. So if
you look at Reebok’s website so this has a hierarchical system.

So main Reebok’s icon the other tabs which shows the home shop and other tabs are there. So
this is the first grid and the main photograph of different shoes and in which segment the shoes

363
are that is the widest grid so that it attracts the customer’s view and all these detailing are on the
smaller grid which comes as a module on the next hierarchy. So all the informations are there.
You start reading from there.

But this becomes the highest hierarchy because this becomes constant, the Reebok’s website.
Because you already know you are on the Reebok’s website and this attracts the user because
they want to showcase their product and then the next level of hierarchy is the all the detailed
elements of the product. So this is the example of a hierarchical grid.

And there can be another options where you do not follow a particular straight lines, horizontal
and vertical straight line and your grid changes in different when you launch in the different
page. But the holistic style is maintained through few elements can be similar and the typefaces,
color palette that can be similar in the different website and the grid shifts. So that creates a
dynamism in the website.

And also attracts users perspective and that you should not overdo it because that creates lot of
disturbance but in few cases when you want to gamify the user interface or the UI transitions are
very interesting, you want to make it very interesting that time you can do that and so this can be
a deconstructive grid or the grid deconstruction. So the grid shifts, the main grid shifts and it
changes.
(Refer Slide Time: 23:46)

364
But if you look at this website, this website is taken from the awards.com where you can check
that website and all this interesting websites will be put up there. So this is a award for different
interesting websites, which is good in UI UX and visual communication design. So you can visit
that website, awards.com which hosts different websites and they also talk about the winner of
the month and year.

And so this is one of the website showcased in the awards.com website. So in this website when
you can look at, so these are different pages of the website. So you can see a visual simile which
is the yellow and blue combination. So that is consistent in each and every webpage but the grid
system is changing. And few of the other parts of the website is same. So the product is always
visible on the center.

The main logo is visible in the same places if it is there and the typography and everything has
the same typography but their inclination is changing, when you come to the different pages. So
when you launch, this is the page. And when you go to the next, so it goes down. So that
inclination is tilted but it goes down in different tabs. So you can understand what is your
position, in which hierarchy you are and different design elements comes into the website.

And also if you look at the negative space that changes overtime and that shifts from one side to
the other side. But that creates a visually heavy and lot of design elements are there. So that you

365
have to, you should not overdo and it takes lot of time to users to read. Maybe that is the
intention of this website so that their eye stays within the visual design part of the website. And
if you look at the content of the page in particular, each and every page is pretty low.

So that is why the visual communication part is augmented. If the page has a lot of content and
the user has to read lot of element then exaggerating this and breaking the grid might not be a
good idea. But in this case this makes the website more interesting. And when you have a
different kind of design element, different style of design element, in few cases you have to do
that and then following a grid can give you one way of combining all this design element.

Sometimes we cannot stick to a particular similar kind of design element. For example we cannot
stick to a particular color. We might not stick to a particular design style but to combine all this
different element which apparently might be eclectic of different style, to combine them in a total
holistic unified whole grid can work as a good example. So this is two of the slides from my
design portfolio.

This design portfolio when I was designing it each and every design had a different visual style.
So their colors were different, their design style was different. So I had to go through only
through this grid layout. It was combined together and the typefaces which are used around to
describe the project was same.
(Refer Slide Time: 27:49)

366
So you can see the same grid lines are followed over here and the same modular elements are
followed and another style which I have adopted is, I used a color which I overlaid through each
and every style. So if you look at, so this has a very different style which is derived from Indian
vernacular art form and Indian traditional style and pattachitra. And this is a very digital style,
digital graphic style. So it was totally different.

So this color was overlaid on top of each and every theme so that they do not look very different
from each other though the color is very different and the typefaces were also all different. So
that there was a big negative space or the background was created to minimize this impact of this
design so that where I can write about the design element and there I used same typefaces and if
you look at, the design style is similar.

So there was a sketchy elements which is around this design which also dominates. So in that
way and also through the grid which is followed in each and every page the portfolio looks like
one part of the book. So in many cases, it can be a showcase of different design elements. The
photographs might look different. So these are many ways to combine them together so that in
totality it looks a unified design.

367
 User Interface Design
Prof. Saptarshi Kolay
Department of Architecture & Planning Engineering
Indian Institute of Technology, Roorkee

Lecture - 18
User Testing - I

Hello students. Welcome to the online NPTEL course, User Interface Design. So in the previous
class we have discussed, we have completed the low fidelity as well as the high fidelity design
where the visual communication designers will come into picture to create the high fidelity
design. So now we will discuss about how the user experience designers come into picture and
do the user testing.

So this testing is not necessarily has to be done after creating your high fidelity design. So it is
better to do the testing as quick as possible when the paper prototype or the low fidelity design is
ready and it might be there are different options, different versions of low fidelity design so
which we call multivariate design. And after that we do the user testing again the first time and
then we go for the high fidelity design.

So that nullifies that minimizes the elongation of the process or the error of design. So more we
do the testing in the early stages the better it is for going to the final design.
(Refer Slide Time: 01:49)

368
If we look at the process, so the iterative part of the design comes. So it is not a linear process
like the waterfall model. So it is the iterative model when it goes back and forth. So in the design
stage when we do the paper prototype and wire-frame and the information architecture it can
come for the user testing where the ethnography, focus group discussion, questionnaire, these are
the different tools and techniques and user feedback is required, is taken, and it changes, based
on that information architecture can be changed.

And then we go to the high fidelity design where graphic design, visual graphics are added on
top of it and UI transitions are there. And then to create the high fidelity design we again go for
the user feedback through user testing method. And again it goes back. So this is the iterative
part of the design which we will be talking about.
(Refer Slide Time: 02:44)

So today we will discuss the user testing process, tools and techniques and how the feedback is
taken.
(Refer Slide Time: 02:51)

369
So when we look at the method, so this is the iterative model of design which we have discussed
earlier. So the concept, from concept, design development and from design development it
directly does not go to the final design. It comes back for the user testing and then again the
development happens in different stages and then when the users are satisfied and achieve the
required user experience then it goes for the, it is called the final design.
(Refer Slide Time: 03:20)

So we also discussed about the Donald Norman’s proposal of double diamond method in his
book, Design for Everyday Thing and so the interface design methodology looks like a double
diamond when there is a divergence, convergence and again divergence and convergence and in

370
this process of divergence we create multivariate design and then through user testing the user
research we come to the optimum research question or the design problem identification.

And then again we create multivariate design and through we user testing we select the best
possible option.
(Refer Slide Time: 03:59)

So in this process of creating multivariate design, this process of double diamond method we
create a multivariate design in the second diamond which is the solution and here and this
multivariate design should go for a testing so that we can find out which solution works best for
the required user experience and the target audience of the user.
(Refer Slide Time: 04:29)

371
So here we create this multivariate testing and A/B testing which we have discussed briefly
earlier. So multivariate testing and A/B testing is or the alpha beta testing is similar. When
multivariate testing we create multiple different variation and A/B testing we create only 2
variations. So this is just a number, if we create 2, so it is A/B testing or if you create multiple
variations this is multivariate testing.

So A/B testing is a kind of multivariate testing or the split testing so which we have discussed
earlier. So we will also discuss about the other techniques of user testing. So user testing can be
broadly categorized between qualitative testing and the quantitative testing. So all this other tools
and techniques will be facilitating either qualitative testing or quantitative testing or both. So
today in this class we will discuss about the qualitative testing and the quantitative testing.

In the next class we will continue discussing the user testing and we will focus on the tools and
techniques for this kind of testing. So qualitative and quantitative testing is the different typology
of testing and many of the cases, they can even overlap.
(Refer Slide Time: 05:43)

372
So for this discussion the article is taken from the Nielsen Norman Group’s article whose Jakob
Nielsen’s blogs and articles are there. So we should definitely go and read the blog and he is one
of the famous pioneering user experience designers and he have write-ups on this articles on his
website. So qualitative and quantitative testing both of this are complementary type of user
research or testing technique which plays an important role in the iterative design cycle.

Where in the iterative model we apply the testing, not in the waterfall model of design where
there one step is done and then there is no go back to the previous stage. So this is the new model
of design which is iterative design cycle. Qualitative research informs the design process.
Quantitative research provides the basis for the benchmarking programs and return on
investment calculation.

So quantitative research generally looks for a large number of sample size where statistical
method is used to analyze the data and mostly the user feedback will be based on some
quantifiable numbers. So their feedback and experience will be translated into some numbers
which will be a very tangible outcome of how users are feeling based on some mathematical
numbers and for creating a mathematical correlation we definitely need a larger sample size.

That is why quantitative research you get a larger sample size of user and qualitative research
informs a design process and it might be target to very few people and where we try to

373
understand the user psychology. So this is more of a psychological research which is qualitative
research and we try to understand what people are thinking. Sometimes most of the cases of
qualitative research it will be a long interview and their experience.

And we let them speak and how they are feeling about the product, in qualitative testing model
when they are talking what is the meaning behind it. So this kind of codifying a particular word
is more important. So this is more subjective and the researchers perception of what users are
talking about, that is more important in qualitative technique of testing. And in quantitative
testing it is dependent on the numbers.

All usability testing studies involve a participant performing some assigned task on one or more
designs. There are however two types of data that can be collected in user testing study which is
qualitative and quantitative and definitely there has to be a task which has to be assigned or one
or more designs. So when there is one particular variation of design so it is not a multivariate
design.

So when there is a one concept which is going for a testing, so this is one concept testing and
then more designs which is the multivariate testing or the A/B testing is there. So in qualitative
data, this consists of observational finding that identify design features easy or hard to use. So
whether it is easy to use then the experience will be delightful. When this is hard to use then the
users experience, the users will feel anxious.

And there will be more cognitive load on the users and then the experience would not be
delightful. So basis on that, so qualitative research only gives an idea whether it will be good
experience or bad experience. But qualitative research is very important to understand what users
want and what their need is. So there are lot of soft codes which users can give which might not
be feasible for quantitative research.

That is why qualitative research should be done in the early stages of design to understand to
ideate the design and lot of salient features and needs of the users can emerge from the
qualitative research while talking to the users in a long discussion or the qualitative method. In

374
quantitative data, it informs of one or more matrix such as the task completion rate or the task
time which are quantifiable whether the completion rate can be whether it is completed or not.

So there can be a number assigned for that or a percentage of people who have completed the
task and the time. So time also can be recorded, for this particular task how much time people
take on an average. So all this quantifiable data can be part of the quantitative research
technique. So this reflects whether the tasks were easy to perform or not. So through that
quantitative data also it feeds to the easiness or the hardness of the task which is design for.

So they lead to a similar kind of analysis but the process is different and the way the experiment
setup and the questionnaire will be designed in qualitative research and quantitative research are
different.
(Refer Slide Time: 11:16)

So the qualitative testing is the qualitative data when we take, it offers a direct assessment of the
usability of the system. Researchers will be observing the participant’s struggle with specific UI
element and they can infer which aspect of the designs are problematic and which aspect of the
design work pretty fine. So they can always ask participants follow-up questions and change the
course of the study to get insight into the specific use of the participant’s experience.

375
So this is very important part of the qualitative testing which quantitative testing does not enable
designers to do that. So when there is a new thing which can be found through qualitative data,
so the moderator who is moderating the testing, so they can change the course of the testing and
some new questions can be added which is the follow-up question when there is a new direction
and they can shift the direction of the testing.

And some other kind of question can come so that they get more insight of the real need. So even
through the qualitative testing they can find different kind of needs which they might be missing
out throughout the design process. That is why qualitative design can give more insight, different
directional insight in the testing process. And then it can also be subjective and the experience of
the users can be recorded through the verbal discussion.

Then based on their own UX knowledge and possibility on observing other participant’s
encounter or not with the same difficulty researcher will determine whether the respective UI
element is needed or poorly designed.
(Refer Slide Time: 13:10)

So in terms of quantitative testing, quantitative data offers an indirect assessment of the usability
of the design. They can be based on user’s performance on a given task. For example task
completion time or success rate or the number of errors. They are within the task flow or can

376
reflect the participants perception of usability that is satisfaction rating. But satisfaction, it cannot
be in quantitative testing they cannot just talk about their satisfaction with their own expression.

So there has to be some rating. So it can be 0 to 5 scale rating or any rating. 0 to 5 scale rating is
the Likert scale. So Likert have first introduced the scale of transferring a qualitative idea of the
satisfaction rate. So that satisfaction rate while using the product is a very qualitative concept.
But when users are putting this satisfaction rate in 0 to 5 which is the number or it can be another
numbers which they are putting into so that qualitative concept right now is transferred in the
quantitative number.

So that can also happen in the quantitative testing. So satisfaction level can also be transferred
like that. And then through the large sample size this numbers can again statistically can be
calculated to achieve the satisfaction rate for the particular product. Quantitative matrix are
simply numbers and as such they can be hard to interpret in absence of the referred point. For
example if 60% of the participant in a study were able to complete the task, is it good or bad?

So that is very difficult to interpret. So that is why designer should blend qualitative with the
quantitative testing and both should then lead to a particular decision making. Because for a
particular user they might give a less number for their satisfaction rate and for some other user
they might tend to give higher value of a satisfaction rate for a similar kind of experience. So that
is why quantitative research testing requires a large number of user within the sample size so that
to nullify the error of these kind of judgment.

So larger the sample size in quantitative testing, the better it is. But for qualitative research
sample size is not required. More of a in-depth talking and in-depth analysis is more required in
qualitative testing. So it is hard to say in absolute what is the number exactly mean. So that is
why many quantitative studies are usually aimed not so much to describe the usability of a site
but rather to compare it with a known standard or with the usability of a competitor of the
previous design.

377
So generally it is better to test, go for a quantitative testing for a multivariate design either so if
there are a few options created and then similar kind of users were given those options and then
they start rating, then it can be a comparable rating. So if 60% participants are satisfied for
product A and 70% are satisfied for product B then product B is better than product A. Or option
B is better than so vice versa. And also it can be used to benchmark the other products.

So it can be compared. The design product, how design product is performing in respect to the
other existing product which is available in the market. So that comparison can be done with the
quantitative testing because this numbers can be better to compare. But number can be difficult
and can be misleading while to understand whether the performance is, in a isolated system
whether the performance is quite good or not.

While quantitative data can tell us that other designs may not be usable relative to the reference
point, they do not point out what problems users encounter. So that exact problem and what they
are thinking during that problem. So these are difficult to interpret during the quantitative testing.
Even worse, they do not tell us what changes to make in the design to get a better result next
time.

Because they will not be, users will not be telling that this might work in a different way which
provision is there in the qualitative testing where the moderator or the designer can take a follow-
up question and lead to a different direction which can enable the designers to understand
different direction of design. Knowing that only 40% of the participants are able to complete the
task does not say why users had trouble with the task or how to make it easier.

So for that we need qualitative testing and often researchers will need to use qualitative method
to supplement quantitative data in order to understand the specific usability issues in an interface
design.
(Refer Slide Time: 18:38)

378
So if we look at the differences between the qualitative and the quantitative testing, here the
differences are, so qualitative research and the quantitative research are shown in the tabulated
format. So questions, answers are generally why in qualitative research which enables the users
to take a follow-up question, so why when users will answer this why, so they can give their own
opinion and they can tell what can be the probable solutions and what are they looking for.

Which can be noted down by the designers and they can take a different direction of a design
totally from what they were thinking in which line they are thinking at. And quantitative research
will be how many and how much which leads to a number which can be analyzed statistically.
Then goal of this qualitative research is both formative and summative. So when they form
towards design and then they sum up to the final design.

So this is a formative design of the initial stages when they lead towards a particular design and
they seek for a design and then they sum up towards a final design. So the inform design
decisions whether the decisions are good or bad or there can be new different direction of
decisions. Identify usability issues and find solution for them. So they are better to find out the
right solution which might not even be there in the multivariate design options.

Mostly it is summative which is evaluate the usability in a existing site, tract usability over the
time and whether the usability is what is the performance evaluation of that whether how many

379
percentage of people are able to cope up with the task. Compare the site or the competitors and
compute the return on investment. So if 60% people are able to complete the task so then among
the target audience, 60% users might continue to use that.

So that gives the idea of how much return on investment can be. So this is definitely not a right
figure but it gives a idea to the company that how much return they can get on the investment. So
when to use this particular research technique qualitative research can be used anytime during
the redesign or when you are finally working for the product and quantitative research can be
used when you have a working product either at the beginning or the end of the design cycle. So
generally this is more of a comparative analysis of 2, 3 existing product.
(Refer Slide Time: 21:26)

So outcome of the qualitative research is finding based on the researcher’s impressions,

interpretations and prior knowledge. So those play a very important role in qualitative research.
So it is based on the impression, interpretation and the prior knowledge of the researcher’s or the
moderators or the designers. This is statistically meaningful results that are likely to be replicated
in a different study.

These quantitative methods are statistically analyzed when we get a particular data. So here the
interpretation or the soft understanding or decoding a meaning what users have said that does not
require but more of a statistical analysis and mathematical analysis is required for quantitative

380
research. The methodology is it can happen with a few participants, qualitative research. Flexible
study and condition that can be adjusted according to the team’s need.

So there can be different follow-up question. Even the setup can be different. So some qualitative
research can be done in a virtual setup. Some qualitative research with some user it can be done
with a real setup and some can be done with a different other setup because we are not
comparing the numbers between different user group. So different variety of setups, variety of
user groups can be deployed in the qualitative research where designers try to understand
different direction of interpretation by the user.

So this is more vast and incorporate different typology of study and different typology of setup.
And here quantitative research we go in-depth and we go for many participants and a well-
defined setup. So we cannot compare and tabulate the data of a different user groups qualitative
research and club them together because their numbers and based on the setup and the user’s
persona, the number will be different.

So for one particular setup there has to be a lot of user group and then we can club those numbers
and formulate a particular number for the satisfaction rate of a particular setup. So we cannot
club different scenarios together. So it is well-defined, strictly controlled study condition. We
cannot deviate from that so that the number’s meaning will also deviate. And usually no think-
aloud process is done in quantitative research technique.

But think-aloud process is done in qualitative research. So when they are thinking aloud then
users are talking about their experience and why they are doing it so those helps the moderator or
the designer to lead towards the different direction but think-aloud process is not required in the
quantitative research because we are looking for a number and which can be statistically
meaningful and statistically formulated.
(Refer Slide Time: 24:27)

381
The qualitative and the quantitative research in generic design methodology how do they come
into picture when the design concept is there we can deploy qualitative as well as quantitative
method to understand the user to do the user research. For the qualitative research we can
understand why this is required and answer those why’s. And through the quantitative research
we can understand how many participant will be, how many users will be using this and what
amount of return on investment can be there.

And then we can start with the design deployment and then again qualitative or quantitative
research user testing. So this is the user testing process of quantitative and qualitative thought. So
this is the user research and this is user testing. So in user testing also again we can deploy the
qualitative and quantitative method and when we do the final design.

So we have already compared the existing product and we have existing product where
quantitative method can be used and we have already compared the multivariate design which
designers have created and compared it through the quantitative research. So for the final testing
and the validation, qualitative research can only help. Because there is one final design, so one
design can only be useful in the qualitative method of testing.
(Refer Slide Time: 26:01)

382
So now we will talk about the experiment setup in qualitative as well as quantitative research
technique. So in the experiment setup qualitative studies involved more user than the quantitative
study. That is because it requires statistically analysis. Qualitative testing involves a small
number of user. Generally it is 5 to 8 or it can even be 15. And it directly identifies the main
usability problems in an interface.

So it is often used formatively to inform the design process and channel it in the right direction.
Quantitative usability testing or it is mostly for benchmarking, benchmarking with the existing
product with the design idea. Or it can be the comparative analysis between the multivariate
design. This is based on a large number of participants, often more than 30. And more the
number is better the research will be.

The conditions in quantitative studies need to be stringently controlled and cannot be changed
from the session to session. Quantitative studies often start with a practice task intended to make
all the participants familiar with the study setup and they will not deviate from that and with the
site being evaluated. And it will be totally controlled and for each and every participant they will
be in the same environment and they will do the same task.

Otherwise we cannot compare and club the data through the feedback of the users. In this way
possible individual differences between them for example expert and novice users are nullified

383
and novice gets a better chance to learn with the interface. The think-aloud protocol is while
users are using or going through the testing or they are using the design product, the designer ask
them to say what they are thinking.

So if they are thinking about okay I will click this button and then they are expected to launch on
the different page, so they will say that. And if they are not satisfied they will say that okay I am
having problem here. I am not going to use it. And they will constantly say what they are
thinking. So that designer will tell them that whatever you are thinking you should always talk
about that.

So this process is involved in the qualitative research and not in quantitative research because in
quantitative research it will be just the number of the satisfaction level. So in the qualitative
research, when they are talking, so that is how designers are recording their satisfaction level
whether what they are feeling and in quantitative research when users are feeling the Likert like
scale or giving the satisfaction rating that is how designers are evaluating the satisfaction rate.

So the think-aloud protocol is the de facto method in qualitative studies but it is sometimes not
recommended for the quantitative studies. Researchers are split in their opinion whether the
think-aloud protocol can be used in quantitative studies but mostly it is not required and in
qualitative studies it is definitely required.
(Refer Slide Time: 29:31)

384
So the next thing is for qualitative studies it is okay to vary the study condition between the
sessions to understand more different opinion, more different scenarios and to get a wider range
of view of the particular product. For example if you discover the certain task does not give you
the insight you need then you change the task and change the scenario. By all means rewrite it
before running your test users.

So changing the task would make it invalid to average measures in case of quantitative technique
across the users who had performed the different task. But in qualitative study you aim to for
insights not number. So you can take liberties that it will ruin the numbers but you will get a
different point of view. For quantitative studies task need to have a single well-defined answer.
Can be transferred into a Likert like scale or the rating system.

So in the next class we will discuss about the tools and techniques of the user testing and which
can be both applied for qualitative and quantitative research.

385
 User Interface Design
Prof. Saptarshi Kolay
Department of Architecture & Planning Engineering
Indian Institute of Technology, Roorkee

Lecture - 19
User Testing-II

Welcome students to the online NPTEL course, User Interface Design. So in this class we will
discuss about the tools and techniques of user testing. So in the previous class we have talked
about the user testing processes. We have discussed about the multivariate testing and A/B
testing and then we have discussed about the different approaches of testing which is qualitative
and the quantitative.

So in this class we will discuss about the different tools and techniques of the user testing
process which can be applied in qualitative testing as well as the quantitative testing.
(Refer Slide Time: 00:58)

So this is how the generic design methodology looks like. So here we are discussing about the
user testing where these are the tools and techniques and we take the user feedback of the design
which goes to the high fidelity design or the low fidelity design which is information
architecture. It is the low fidelity design which comes from the UI UX designers and the high
fidelity design which comes from the visual designers.
(Refer Slide Time: 01:20)

386
So these are the tools and techniques of qualitative and quantitative research which is for the user
testing and then there are many other different tools and techniques based on the what you are
designing for and what kind of setup you are looking at. So what is the experiment setup and
what is the target audience. If the target audience is very different, if you are working with a
child or disable or elderly or different kind of user group then your testing method might be
different.

But these are the common tools and techniques which we deploy to understand the user testing
process. So first is the very common is the questionnaire survey. Questionnaire survey can be
remotely done. Questionnaire survey can be done personally. Then there is a card sorting. Card
sorting we have discussed briefly in one previous class. We will discuss it in this class as well.
And then there is a focus group discussion.

So this happens like a group discussion of different user groups. So there can be participants
from different users so that there will be lesser number not like in quantitative method. So focus
group discussion is a qualitative research technique, not quantitative research. Because they
discuss and designers decipher how what is the meaning of what they are talking about and how
their satisfaction level is there.

387
So in focus group discussion it can also happen with the experts, not the real user who are
experts in a particular domain. So it can be a group discussion by the expert and then from there
design idea can come or whose sound in the research of a particular domain of a product. So that
can happen in the focus group discussion as well. Then the moderated usability testing which is
done by a moderator.

And this is most likely to be into the qualitative research because moderator’s role is more
required in the qualitative research where they can shift the direction of the research question and
the experiment setup. But definitely in quantitative research moderator is required when the
moderator has to tell the users, so this is the setup and this is the particular task. But moderators
there do not change the experiment setup and do not change the task and they conduct the
testing..

So a moderator also is required when there are testing which is going on live. But there also can
be a testing which is remote, is a testing which can be done, so forms can be sent online or can
be distributed to the users. They will just fill up the form and give it back. And mostly this is
required when we are targeting a large number of sample size. So that correlates mostly with the
quantitative research technique when we need lot of data and numbers and which can be done
remotely.
(Refer Slide Time: 04:15)

388
Now the questionnaire survey which is most commonly used and very easy to understand. So
there we write the questionnaire relevant to what we are looking for and this can also lead to
quantitative as well as qualitative research. Questionnaires are surveys when there are easy way
to gather. This is a easy way to gather a large amount of information about users with minimal
time investment. A researcher can create a survey form which is in remote or in person.

So this is useful when we create a large number, targeting a large number of users. So that relates
with the quantitative research technique but questionnaire can also be descriptive when we give
this descriptive questions to few of the users then that becomes a qualitative research and then
they write their experience on the questionnaire. But that sometimes can be elaborative and that
might take lot of time so that the users might not feel that kind of questionnaire.

So it is better to create the questionnaire for the yes, no question which is binary in answer or
Likert like system which gives a value. So that will be easy for the user to understand. So it is
more towards the quantitative research technique. Answers can be documented in Likert like
scale or qualitative comments of subjective answer, both can happen. So this research tools and
techniques are mostly taken from the Adobe blog. We can read the blog of this user.

They have written the different techniques and tools of user testing. So this is how it can be
formulated through a infographics how many percentage have a satisfied with the performance
of the product and there can be comparative pie charts. There can be also, we can understand
how many people have completed the task and how many people have, what time it takes on an
average to complete a particular task.
(Refer Slide Time: 06:19)

389
So another tool and technique is card sorting. So here you can see the process of card sorting. So
written words or phrases on card will be categorized by the users. So this written cards of
different words can be given to the users and this is very important to do a qualitative research.
So there can be different emotions written on the card. Different usage of a particular product
written on the card or anything which can be written on the card.

And then it will be given to the users and user will categorize them and they can also sort which
they relate to. So that cards they will pick up so which they are relating to based on a particular
task or questions given to them and then they can which they have sorted, they can prioritize the
cards which are more relatable, which are not relatable and they can sort according to different
categories.

It is a great way to determine whether the design, the information architecture is heading towards
the right direction or it can examine the information architecture of a new product. To do that
card sorting is one of the useful tool.
(Refer Slide Time: 07:25)

390
Now the next tool and technique is the focus group discussion. So focus groups are group of
users which is used, so this method is used to communicate between the researchers and the
users. So in a focus group, designers bring together 6 to 12 user in average, it can be more, it can
be less, but it cannot be a very large number like a quantitative research because then
everybody’s opinion cannot be heard.

And there will be chaos between the group and everybody cannot give a in-depth opinion. So
focus group are targeted for the few number of users and when they give a in-depth opinion and
when another user is bringing out a point, the positive point of focus group is then it might strike
to the other user that this point is also valid or invalid for that particular user. So new items can
be brought, new direction can be brought in front of many people.

And then they can discuss on the new direction. So that is how focus group becomes a very
important tool to find out a new way of discussion what direction which designers might not
have even thought about it before. So they discuss on the issue or concern about the feature of a
UI, user interface. The group typically goes on hours long and it runs through a moderator who
maintains the group’s focus.

Or the moderator can deviate the group’s focus if he thinks that, that focus is not touched upon in
the design but required for the design team to understand. Focus group discussion can also be

391
done with a experts’ group. So instead of user group, they can be an expert group. Expert group
might not be the real user. They might be the expert on a particular domain or the particular
product. So they can be technically sound people.

There can be focus group discussion between the client and the technically sound people and the
people who are specialist of the psychology do research of a particular user segment. So they
might not be the real user. So that can also happen and that can also lead to a different direction
of the design. Focus group can be a powerful tool in the system development and while it is in
the formative stage of design and the initial stage of design.

But it cannot be a tool to validate the design because few people’s subjective opinion might in a
discussion forum might not be just a tool for a user testing. This technique can be helpful for
assessing the user needs and feeling both before a product’s design and long after the release.
Focus group discussion cannot be the only tool to use the user testing data because it has to be
supplemented with the real question answer or the moderated design technique and the
quantitative data.
(Refer Slide Time: 10:45)

Then the other tool and technique is moderated usability testing. So moderated usability testing
happens with the presence of a moderator. So moderator can see what users are behaving through
a one-way mirror. So typically this glass which you are seeing will be a one way mirror in the

392
usability lab. So this moderator are seeing how user is behaving with a system and user is being
observed by a moderator and moderator can ask user to do a different task and go to a different
direction.

So moderated usability testing is practiced by professionals looking to obtain feedback from a

live user in a experiment setup. During a moderated test, moderators are live with the test
participants facilitating them through the task, answering their questions. If users are stuck
somewhere moderators will talk and communicate with the user and then they reply with the
feedback on the real time and they ask follow-up questions and go to a different direction.

Live communication with the test participants is a strength of this type of testing. The technique
enables designers to watch participants in real time and being able to ask probing questions or
the follow-up questions about what they are doing, why they are doing and this why questions
which are very important for the qualitative research can be done when the moderator or the user
researcher is there in the user testing process while the user testing process is going on with the
user.

A moderator can help the participant user to probe deep into the particular problem and ask this
why questions, why you are feeling that and where are you stuck in this process and keep the
participants on track and help them to clarify the confusion. But it has to be kept in mind that
leading questions and guiding the user to complete the task should be strictly avoided. So
moderator should not ask them leading questions.

So it is like, is it good or is it bad? So this kind of question, does it feel like this. So they cannot
give the answer. So that should not become a leading question to the user, so user will fall in the
trap and say yes it is. This kind of question should not be asked and should be strictly avoided
and this might lead to a different direction which might not give the users real feedback on the
design. And also they should not help the user to complete the task.

So if users are stuck somewhere, they should ask why you are stuck there and what is the
problem you are facing? What can be the solution? These kind of questions can be asked. But

393
they should not help the user click on this and that is how complete the task. So that should not
be done by the moderator.
(Refer Slide Time: 13:43)

And the other technique is the remote usability testing which is more correlated to the
quantitative testing. So this is unmoderated remote user usability testing as the name implies
occurs remotely without a moderator. It offers quick, robust and inexpensive user testing results.
Participants complete their task in their own environment without a moderator’s presence. And it
is conducted online much like a survey with a predetermined task.

So it can be completed in the participant’s own time without requiring the hassle of coordinating
the schedules. So that is why this becomes cheap and large number of sample size can be
targeted so a questionnaire can be sent online or it can be distributed among the users and they
can fill up the questionnaire according to their time and mostly this type of questionnaires
becomes a yes, no question or a Likert like scale which leads to the quantitative research.
(Refer Slide Time: 14:46)

394
These are the tools and techniques of research. Now we will talk about a digital device, this is a
tool. So earlier those were the technique, more of a technique of the research and this tool eye
tracker is used. This is a new device to use, it can be used by the users for the user testing. So
other card sorting, questionnaire, those are the things which were used in a traditional way of
testing and this eye tracker is a new device which can be used for the user testing.

And this is becoming widely popular. So this is the photograph of two different kind of eye
tracker. This is a desktop mounted eye tracker and this is a wearable head mounted eye tracker.
Desktop mounted eye trackers are capable of recording the user behavior through their gaze data
or the fixation, where the fixations are happening on the desktop screen it is attached with. It can
be attached with a fixed PC or a fixed laptop. So this is the eye tracker.

This is from the Tobii company, is attached with the desktop and this can record how the
performance evaluation can be done of whatever digital display is there on screen. Whereas the
wearable head mounted eye tracker looks like a glass. So there is a camera over here which
records what users are seeing and then here there will be sensors which tracks the user’s eye
position.

So in the system what the users are looking at and what is their eye position that can be
calibrated with the calibrator tool and based on that it will tell where users are looking at. So this

395
is useful to interpret how, users are behaving in a 3D environment and with a digital media
which they can hold in front of their hand which is not fixed in the desktop. So this wearable eye
tracker is more useful to understand the product, how they are performing with the product
which is not a desktop or PC.

So if it is mobile users or a tablet user’s performance is evaluated through a application which is

openable on the mobile or tablet or any kind of other product how people are behaving with a
tangible product like any product like bottle, refrigerator, or car, how they are driving and what
they are seeing, how they are seeing the signages and how they are behaving in a shopping
complex.

So that can be recorded in a 3D space of how they are behaving can be recorded with a wearable
head-mounted eye tracker. So this is the kind of data eye tracker gives. It can give the qualitative
data, it can also give the quantitative data.
(Refer Slide Time: 17:50)

So what kind of qualitative data it gives. So it generates the heat map and he flow of eye
movement. So this is a photograph of a heat map, what users have seen in a display system of a
shopping center or where the products are displayed on a shop front, what people look at and
which products are getting user’s attention. So this is the heat map generated by the eye tracker
and it can also give the eye movement.

396
So it can give the data where people have seen first, so number 1, then number 2 maybe, then
number 3. What is the direction of eye movement and how in which path I have moved. So those
kind of datas which falls under the qualitative data can be generated by eye tracker, both type of
eye tracker, desktop mounted as well as the head-mounted eye tracker. It can also export the raw
data about the fixation point and gaze behavior in excel format which is the quantitative data.

So it will also record the number of time I have moved in a particular area or the distance of the
object and the x, y, and z dimension, what is the time duration and all this numbers and datas are
also recorded in the eye tracker so that comes as a raw data file on the excel format. So that gives
you as a quantitative data as well.

But you need to understand when to use the quantitative data, what should be the sample size,
what will be the experiment setup, from the technique of the research and when to use the
qualitative research what will be the sample size and the setup and other things, when to use that
data from the technique of the research. So this is a tool, just a tool which facilitates both the
qualitative and quantitative data. So this we have already discussed earlier.
(Refer Slide Time: 19:44)

So this is a F shaped pattern by Jacob Nielsen which is done by Jacob Nielsen’s Nielsen Norman
Group and this is a eye tracker heat map data through which he have established the relooked at

397
the Gutenberg’s diagram, how Gutenberg’s diagram deviate from what Gutenberg have said
from this four domains and how eye move to the digital media when they scroll and look at read
the pattern. So he have come up with the F shape pattern.

We will read like, which looks like a f shape pattern and that is how people read. So this is a
qualitative data or the heat map taken from the desktop mounted eye tracker. So I will give a
case example of the user research through the proper technique through one of the example
which has been done in IIT Kanpur’s M.Tech student. So this is one of the example of a
particular app design of how they have conducted the research.
(Refer Slide Time: 20:57)

So this design was for adventure trip, some application has to be designed. So this is how they
have come up with the sequential method of design. So first there was the summary of client
interview. They have come up with the need statement and then what client wants and then other
requirement from the client interview. So first it starts with the client who is proposing this
adventure trip related web application.
(Refer Slide Time: 21:23)

398
And then they have formulated the objective from the client’s interview and the summary. Then
they have gone for the potential target audience which client wants and they have understood
that these can be the target audience of the particular application. So who is the data givers and
the data seekers. So these all are different target audience or the different kind of users. From
there the persona and the scenario will evolve.
(Refer Slide Time: 21:55)

So after that they have gone for the user research methods and what can be different methods
which can be or you can call it technique of research which they have formulated. One is the user
interview which they will go and ask them one to one questions, informal talks, online survey
which is not moderated and the telephonic interviews which is moderated but remotely done.

399
Then literature review has to be done which is the similar benchmarking of product, similar
products of whether there is not and from there they will create a task flow which task has to be
given to the users and how user will go about interacting with the particular session. So then they
have formulated the interview questions. So ice breaking questions so that there will be a ease of
conversation between the user and the researcher.

Then the detailed question which will lead to the feedback of understanding the design problem.
So this will be qualitative as well as quantitative. Along with the questionnaire they have created
different persona. I am just showing one persona. There are different persona’s based on the type
of users. So this persona caters to a particular segment of user, based on their demographic
segregation and their task, what kind of task they are looking at and how they will interact with
the particular web application.
(Refer Slide Time: 23:28)

So they have given a particular photograph of a person who is the fictitious representative of this
segment of user and the description of this person. And then they have created a scenario how
this particular persona will interact with the existing scenario as well as the desired scenario. So I
am just showing one scenario which they are talking about. So this they have made with the
infographical narratives and with the storyboarding.
(Refer Slide Time: 24:02)

400
Now based on the research which they have conducted, this is the experience map which is
outcome of the research. So research has been done after this stage when the scenario is built, all
this techniques which they have formulated, they have gone for the question answers, they have
gone for the discussions and other techniques which they have identified will be suitable for this
case example.

They have summarized it in terms of experience mapping how user satisfaction level is achieved
or not in a particular task flow. So this satisfaction level can be mapped either by qualitative
research technique when we ask question what you are feeling about this in design so they have
definitely gone before this, they have gone for the low fidelity design and then they have asked
these questions.

And then also it can be done with the quantitative research when the users will mark the rating of
the satisfaction. So the satisfaction level is shown in a graph. It can be shown in a different way
in pie chart and in any other format based on how you want to show the information as what
kind of infographics. So this is the activities, different activities, duration, cost it is required and
the journey of user.

401
Then the task flow they have mapped, so these are the task which will be given. The task was
there which based on that they have conducted the user testing and the experience map was
generated from that.
(Refer Slide Time: 25:42)

These are the paper prototype which they have shown to generate the experience map while they
have collected the data. And these are the user testing inferences they have taken from the case
example. So these things are there. And this is how they have conducted the user testing. So this
is just an example. There can be multiple different method which I have discussed from the tools
and techniques you can deploy different methods.

You can deploy eye trackers. You can deploy other focus group discussions and different tools
and techniques and mix and match and which will be apt and suitable for a particular design
which we are looking at. Thank you.

402
 User Interface Design
Prof. Saptarshi Kolay
Department of Architecture & Planning Engineering
Indian Institute of Technology, Roorkee

Lecture - 20
Contemporary Interface Design Technology

Welcome students to the online NPTEL course, User Interface Design. This is the final lecture.
In this lecture we will discuss about what are the other kind of paradigms where UI UX and user
interface are going to. So what are the future domains of UI UX and till now we have finished all
the methodologies and what is the existing paradigm of design process and how we can deliver
the design within the existing paradigm of design.

And human computer interaction design domains and also we have discussed about the elevator
pitch and how we can interact with the client after the designing. So within this paradigm what
existingly we have is we see mostly laptop, PCs personal computers and tablet and mobiles. This
is the main interaction devices. So there can be other human computer interface devices for
different equipments which has a UI interface within that.

It can be ATM vending machine, it can be other equipments which we see in our day-to-day life.
But UI UX and the interface design and human computer interaction this is changing, the
paradigms are shifting in a very rapid manner. So in next few decades the type of interface what
we are seeing right now might be totally changed. So right now the way we perceive a interface
between human and computer that might totally differ in next few years.

So few of the directions which we can already see the researchers are going on in few directions
and few of the ways we are trying to perceive human computer interface in a different way. So
we will discuss today some futuristic approach of human computer interaction design. These are
not exactly the futuristic approach. So these few of the examples which we will talk today are
already existing but these technologies did not percolate to the users as much as the other devices
for example mobile tab and laptops.

403
So these are some devices which are coming into picture nowadays and these are few devices
where the interaction design will be totally different, the way of interactions are absolutely
different in those devices. So if we understand those devices and what are their potentiality and
how they differ in terms of user interface design then we can at least perceive what can be in the
next few years.

And in this class we did not discuss about how to design on these futuristic devices and what are
the some of the devices are already existing because the scope of work within that devices are
limited and those devices are not very popular among the user till now. So they are there but few
of the users use that but those are the equipments which are not as market invasive as the other
existing devices on which we have already discussed.
(Refer Slide Time: 03:57)

So this is the mode if we look at the user, so this is user connects to the world through this
human computer interaction devices. So HCI is there, would there is a human and computer
interaction is going on within this facade. So there is a, the way computers are talking to human
is the human computer interaction and through that we are connected with the world. Now
existing devices, these are few existing devices we can relate to.

It can be desktop, it can be laptop, it can be tab or mobile. So these are the most commonly used
devices today. So definitely there are other devices which are there, which also has a human

404
computer interface. Even some digital camera and other digital, if there is a digital display in
front of a refrigerator or washing machine or any other devices those are also machine interface
design.

So there also the same principles of UI UX and visual communication comes into picture, similar
principle. But there are few other devices which are totally different in nature. So we will have
some idea on that.
(Refer Slide Time: 05:18)

So today, the mode of input through which we communicate with the human computer interface
basically is by typing or clicking UI buttons in case of mobile, tab, or PC, or laptop. But there are
some emerging paradigms of input devices. The way we give the information to the human
computer interface, it is not just limited to typing or clicking the buttons. So emerging paradigms
of gestures, command of giving UI commands are gesture command and voice command.

So we can also give voice command which is also there within the mobile, smart phone, in iOS
device we have Siri and also in android device we have voice command. And gesture commands
are even there in apple watch. So we can give certain gestures, can be used as a command. There
are smart TV remotes where we can just user our gesture to change the channels and other things
are there.

405
So gesture commands are already there and voice commands are also there in the UI UX devices.
And this will definitely be more and more useful and it will be used more as a UI command
rather than typing or clicking. Because the typing and clicking requires some larger amount of
cognitive load and giving a voice command is very natural for human being so that is how we
naturally give the command and gesture command is also quite intuitive and natural.

So that becomes more user friendly and more easy to use and more natural for the users.
(Refer Slide Time: 07:09)

So few of the advancement in technologies are virtual reality, mixed reality and augmented
reality. These are the earlier what we were discussing this voice command and gesture
commands are the way to give, it is a kind of a input device, how we give the command, so
through voice or through gesture we can give the command and these are few technologies like
virtual reality, mixed reality and augmented reality.

These are the way displays are changing. So one thing is if we understand traditional or the
existing personal computer or the desktop one is the input devices which is keyboard and mouse.
Through mouse we click the UI button and through keyboard we can type. Similarly, in mobile
earlier we use to have this text buttons. Right now we have the touch screen button. So that is
one way of giving the input and another is selecting a UI button on the screen.

406
Now that is the way, from there we are shifting to voice and gesture command. And now the
display is also changing. Now we have a very solid digital display. Through that we see all this
informations and everything and that display is also changing in the new paradigm of design
which is the virtual reality display and mixed reality display and augmented reality display. So
they might not totally differ from the existing way of display but slight addition, alteration and in
few cases lot of difference can also be there. So let us discuss what are these.
(Refer Slide Time: 08:54)

Virtual reality is when everything which we perceive through a digital media and we are totally
cut down from the physical existence of the visual. So if there is a physical existence of the
visual is there in your periphery of 360 degree environment, we do not see that in virtual reality.
We see a total different display around a 360 degree periphery.

So in design domain digitally generated visual and sound will be displayed and that can be
replicated as a realistic environment. This is the realistic and immersive simulation of a 3D
environment created using the interactive software and hardware. So when we look at the virtual,
when we wear the virtual reality headset, we will be totally cut down from the existing physical
reality from 2 aspects. One is the visual and is the auditory. So these two inputs will be totally
given from the virtual reality devices.
(Refer Slide Time: 10:05)

407
Few of the devices are Oculus rift, Samsung Gear, Google cardboard, and HTC Vive. Google
cardboard is a device and within that you can put your phone in front of your eye and that goes
through a software so that we split the vision and perceive as a 360 degree environment around
us, virtual environment. So this will be the kind of devices which you will see. So it will be
totally in front of your eye.

And you will not see anything which is there around your physical reality. So in this virtual
reality you will see a totally digitally created 3D visualization as well as the sound will also be
there. For sound it is just a visualization. For sound you can also have another equipment. You
can wear that and you can hear the virtual reality sounds as well for a more immersive
experience. So these are right now this Oculus Rift, HTC Vive is mostly used for gaming.

So when you want to have a very immersive experience of a digital gaming, then you can have
this. And mostly it is confined right now in gaming or experiencing some 3D visualization in few
cases or some walkthrough if you want to perceive a space through a walkthrough that can also
be done through this. But yet this did not come as a day-to-day life use, a day-to-day usage.

It does not have a very a day-to-day usage and did not replace our other equipments like for
mobile and others and it did not want to because we cannot wear a virtual reality headset all the
time and experience a virtual device. So this is not a replacement of personal computer or tab or

408
mobile phone but this is another way of having a more immersive experience of a 360 degree
environment so which is more of a gaming experiences right now.

Otherwise many cases of researchers in different cases researchers use that when they want to
experience a virtual environment. In architecture this can also be used to give a client a better
view of how the building will look like when it is built. Now another type of display is mixed
reality display.
(Refer Slide Time: 12:51)

So when virtual reality is mixed with the physical reality that creates the mixed reality. The
virtual technology adds on to the another informative and interactive layer on the physical world.
So in virtual reality what we have seen is, the users are totally seeing a virtual environment and
virtual environment as a visual input and also it can have a virtual sound.

But in mixed reality, the physical environment what is around us and the sound and the visuals
around us will also be there and there will be another layer of virtual information on top of this
physical reality. So we will give example.
(Refer Slide Time: 13:37)

409
So some of the mixed reality devices are Google Glass and Microsoft Hololens. So these are yet
to come in the market. So they have, Google and Microsoft have already made their alpha or beta
version within the lab but this did not come as a daily usage and is not, once Google Glass was
launched but it is not finally launched with the usage of the everyone. So this is how it will be
perceived. So this is not how Google Glass looks like.

So this is a visual impression of how the users will perceive when they will wear a Hololens or a
Google Glass. So what you are seeing here, so they will see the physical environment, even the
man is seeing what is there within the interior space and this lady is seeing what is the there in
the exterior space. But another layer of information on top of the physical reality will be there.
So it can be the temperature of this existing space.

So it can have a GPS tracker where exactly you are and it can provide the information of the
temperature of that particular place. On top of this what you are seeing within on that it can also
project some information. And also it can recognize some of the building through image
processing. It can process the image what you are seeing because it has a camera and it can relate
to what you are looking at.

So it can identify that image and tell that this building is a hotel or restaurant and through image
processing and image recognition. So it will process the image first what you are looking at. So

410
that is the image processing and later it will recognize so if that the image matches with the data
which is already there in the cloud with some information which is already loaded in the cloud.

So it will fetch that information from there and tell that this building based on the visual
similarity it will recognize the building and then it can tell that this building is or restaurant
whatever and give the information about the building. So it is interacting with the physical reality
what you are seeing recognizing the visuals or recognizing the places where you are and then
giving data what you may want around your physical reality.

So this is mixing a digital information, putting a digital information layer on top of the physical
reality. So this is called the mixed reality devices in terms of the display. So similarly in
Microsoft Hololens which is a kind of a computer, so all this datas and files and folders will be
on top of your, and you will visualize. So it is a wearable device. So you will see what you want
to in the physical reality and on top of that it will perform as a computer.

So all folders and everything you can see while working or while doing other works. And yes, it
also incorporates gesture input process and the voice command so that you do not need to type
where you want to, the way you type in the mobile or laptop. So it might have a keypad on top of
the visual display and you can type there through gesture commands. So another kind of digital
medial technology in terms of display is augmented reality.

Augmented reality is right now pretty common, more common than the other two. The mixed
reality is right now the least common and still in the inception phase or in the lab. It is not
purchasable for the common people.
(Refer Slide Time: 17:39)

411
Augmented reality you will see, you might have already seen augmented reality devices or
augmented reality display. Because you can see augmented reality through a QR code through
your own mobile phone. So it does not require a different kind of display. So whatever the
display of a smart phone is that can show you the augmented reality display if there is a QR code
for a particular augmented reality model.

So augmented reality what it does is that it gives the perception of a 3D simulated image on top
of the real world. So if you scan the QR code through your tab or a smart phone, this is the QR
code. So after scanning that, on top of this physical reality a model can emerge. So this
augmented reality, can also be used as a perception of a 3D model in terms of mechanical
engineering if somebody wants to make a 3D model or a product designer or architecture that
design can be there as a 3D model.

And it can be perceived from all this different viewing angles if there is a QR code for a
particular model. So each and every model will have a unique QR code. So if that is scanned
through a QR code scanner from your tablet or a mobile phone then it will give you the view of
this 3D model. So this 3D model does not exist over here but if you scan through your devices
then the 3D model can be seen. And if you rotate the QR code it can be, the 3D model will also
rotate in front of your eye.
(Refer Slide Time: 19:17)

412
So some other different technologies which are emerging is internet of things, 6th sense and
Haptics. Haptics also right now it is not confined within the visual because we are starting to
give gesture commands and so through gesture command also the Haptic technology which is
based on the touch sensation is also is there within the digital interface. So it is not just a visual
interface right now and Haptic still lot of researches are going on.

It is not still incorporated within the commercial products which is available there so but in near
future it might be incorporated within the devices which we see in today’s time.
(Refer Slide Time: 20:06)

413
So internet of things is a concept where every devices are interconnected and exchanging data
amongst themselves. So there can be multiple digital devices, smart devices which can
communicate within themselves and transmit the data among themselves and through a
connected loop. So ioT enables smart devices to control remotely. It can be applicable in various
domains like smart homes, intelligent transportation and smart cities.

So smart home concept already is there. So all the home appliances which are smart appliances
can be digitally connected. So for example refrigerator, lights, fans, Acs, and washing machines,
everything can be connected together and there can be a central monitoring system or system
device which can monitor every devices so that it can tell the device when to start, when to start
operating and when to stop.

And when the AC might switch on, when the AC will be switched off. And a person who is the
user can remotely control that. So they might give a voice command through that the voice
command switch board might start operating. So this is how smart in home can function.
Similarly, smart transportation, all the transportation devices like the signals, through the smart
bus stops the datas on the bus stops can also be there.

You can read more about this ioT devices and how it can be incorporated within the smart cities
or smart transportation or smart homes because this concepts are quite difficult to understand
because a lot of researches are going on here and how every devices will be connected. So the
main concept is every devices are connected and the datas are transmitting. So what data is there
in device 1 and which might be required for the device 2 can automatically go to device 2 if
device 2 wants to access the data.

And similarly there can be multiple loop of all this devices which are interconnected and shares
the information among each other for a better sustainable model. So here is an example of a
movie. This is the movie called Her where the computer is connected with all the devices and it
starts directing the other devices and, in this movie it has a the concept of machine learning is
there. So it kind of tries to adopt.

414
So this machine learning is also another concept which is there and many of the smart devices
also has the capability of machine learning, very high-end equipment might have that capability.
So it can automatically learn the behavior of the user and accordingly it will start functioning and
optimizing its behavior.

For a very rough example, primitive way is when we search for few words and when we start
typing a few common words in our devices so the suggestion of the next word when we start
typing also changes based on our mobile. So our mobile learns what is the pattern of typing and
so what kind of text we want. So it might be based on also our language preference.

So these are the ways, so the device is actually reading, memorizing the typing pattern of the
users and adopting itself through the users behavior. And it can adopt based on many other kind
of functions for example the walking pattern and daily calorie use and other kind of apps can
also get the data and adopt itself and so these are the concepts of machine learning and it can be
very difficult and high-end level as well.

So these are some examples which I am giving from a very easy examples and the machine
learning program becomes more complicated. It can have more and more capability of machine
learning and it can go towards artificial intelligence.
(Refer Slide Time: 24:54)

415
Now one of the example of internet of things are smart home. So this is a Google Home product.
So this device of Google Home can connect all the home appliances which is there within your
home which can be connected like smart appliances can be connected with the Google Home and
this can control all the smart appliances of the home. So Google Home is an example of this
domain of ioT. It is a smart speaker which connects the smart home appliances.

It enables the users to operate home appliances by voice command and it connects with the
mobile phones. So when you are away from home, through mobile phone also you can give the
command to the Google Home. So this device will receive all the commands from the mobile or
if you are around this device, so it can also take the voice command.

It will recognize the voice and then understand the voice command and through that other smart
appliances, so the other appliances has to be a smart appliances which can connect remotely with
the blue tooth or the other ways of connection has to be there established within this Google
Home with the other equipment for example refrigerator, washing machine and it can switch on
remotely those equipments.

So it can change the AC volume and other illuminants through the light. So electronic devices
like smart TV, refrigerator, and lighting fixtures and ACs can be operated through Google Home.
So this is already existing which is, already in the market.
(Refer Slide Time: 26:31)

416
So another example can be internet of things can be in the smart city. So this is a conceptual
model by MIT Media Lab. So this is Florence bus stop which they have designed for the
Florence city of Italy. So what it can do is gathering information about locations of transportation
system through GPS and whether data through sensors installed in the various part of the city. So
the location of the bus or trams and other transportation systems or vehicles can send the data of
their location through GPS.

And this bus stop will have all this datas of which route might come and where is the exact
location and after how long it might come and all the datas, the time, temperature, other weather
data can be shown here and if there is a jam or other things which every datas will be updated on
real time.
(Refer Slide Time: 27:35)

417
So intelligent transportations another example is BMW Motorrad Vision Next 100. So this is a
conceptual model by BMW. So you just wear a device, head-mounted device where you see all
the datas regarding what we use to see on the car or two-wheeler on the display that you can see
on your head-mounted device and this user is wearing a jacket which is interactive jacket so that
through movement and hand gestures it can give command to this bike.

So if the user wants to go this way, so there will be some gestures which will be accustomed, the
bike will be accustomed with that and through that it will automatically go and the speed and
everything will be controlled through this movement. So this is still in a conceptual stage, so you
can see the BMW Motorrad’s concept on internet and you can read more about it.
(Refer Slide Time: 28:46)

418
So another concept is 6th sense which is given by Indian designer Pranav Mistry who worked in
Samsung. So this is a wearable gesture interface which enables the users to perceive the physical
world with augmented digital informations. So his concept was every devices can become a
smart devices and every devices can be interactive. So it is not just limited to display screen of a
mobile or display screen of a PC.

So every devices right now in the near future can become a point of information system,
everything around us. So that is his concept of 6th sense and we can give input through gestures
and voice commands.
(Refer Slide Time: 29:34)

419
Now the next level where the researches are going on not just we are not talking about in the
terms of visual anymore. So Haptics sensation or the touch sensation is also they are looking at.
So the next step towards the infusing physical reality into virtual platform is through touch or the
Haptics. Touch sensation or the tactile sensation or the tactile texture, the feelings of the tactile
texture of physical form can be transferred through the digital platform.

So whatever the tactile texture of a physical form in the remote world which so the hardness,
softness, or the texture of the material which is not existing in front of us can be simulated
through a device. So it can take the form of the softness or hardness of a device which is not
present in front of us and also give the feelings of the texture. So this is a research going on so
this is in a inception level.
(Refer Slide Time: 30:46)

So this is MIT Media Labs, tangible media lab of MIT, tangible media team of MIT Media Lab.
So what they are doing is, you can see this person is playing with the ball while sitting remotely.
So his hand’s position and the shape and everything is transferred here in this Haptic device. So
this is taking the form of his hand which is not existing in front of this system.

So they have used instead of a pixels, of a digital pixel, so they are pixels of a 3D pixels which
can take the form of other solid 3D form of something which is not in the physical vicinity of
this device. So this is a very initial model of Haptic Media. So the pixels are more sensitive and

420
smaller. It can mimic more different kind of materials and it can give the sensation of the
material of which is not existing in front of them.

So these are some new directions of technology where the UI UX design and SGI design can
lead to. But right now UI UX designers or visual designers are not commonly using this, working
on this devices. If you are in the research field then you might be interested to these kind of
domains but otherwise the main commonly used domains, the platforms are mobile tabs and PCs
and within that we have different systems like android and iOS and other kind of operating
systems.

So we mostly design on that but still this paradigm will be there for near future but later this kind
of new technology might percolate and we have to adapt according to that technology.

421
THIS BOOK IS NOT FOR SALE
NOR COMMERCIAL USE

(044) 2257 5905/08 nptel.ac.in swayam.gov.in