User Interface Design

BIT275CO

Year: II Semester: III

Background & Introduction
What is Design? Introduction

well-organized, managed and provides some Digital Devices often come with screen.
appealing feeling to the eyes.
Screen were only used for displaying some
Meaningful arrangements. status or information in a computer
system.
Why is design important?
With growth and expanse of computer
The satisfaction of using anything is directly technology, interaction with computer
concerned with its design. system was made possible through the
screens and input devices.
Design is equally important in physical goods
as well as digital assets and software User Interface (UI) is meant to allow human
applications. computer interaction.
Course Objective
How to design user interface?

Which environment requires what kind of user

interface?

Devices: Mobiles, Tablets, Desktop

Platform: Windows, Linux, Mactintosh, Android,

iOS
Fig. Evolution of software development process with introduction of design
 Chapter 1 The Goal
Goal Oriented Design
This is my business problem, solve it. (Think about user too)
Background:

1. Someone wants a software because s/he realizes software can solve his
business problems.

2. Findings from Research lead to the necessity of a software system to facilitate

business problems.
 Software development is about Research and
Development (R&D).

What is trend?

Mostly “D” and very little or no “R”

Design emerges from the research and development teams

meet those design needs being goal oriented.
 Problems with today’s softwares

1. Making the user look stupid

2. Causing user to make big mistakes

3. Slowing the user so that there is less efficiency

4. Preventing fun and boring the user

When we choose Replace Windows 7 with Ubuntu, the installation does something else. It formats the
whole disk instead of formatting the drive on which windows 7 installed.
 Stakeholders in software development
1. User
2. Business (Marketing, Human Resource, Account, etc.)
3. Programmer
User centric design must be taken into practice than business
and programmer centric.
E.g. A web form that is sent as email instead of storing in
database.
 Considerations

1. Software that is rude (language and behavior)

2. Software that is obscure (hidden features)

3. Software with inappropriate behaviour

Examples
 Features of user interface design:
1. No rude language
2. No hidden features
3. No inappropriate behavior (good user experience)
4. No misleading controls or messages
5. Effective user functions to increase efficiency
6. Infrequent users friendly (Facebook vs. Google+)
 Models of Interface Design
Programmer (Software Design) User (Interface Design)

1. Mind is blended with programming 1. User just knows general terms,

terms, understanding and have basic understanding and
complexity. they don’t like complexity.
2. Programmers are concerned about
what they can do easily by writing
easy codes.

There’s is a huge gap between understanding of a problem by a

programmer and a user. - Conflict of Interest
Software Design Interface Design

• It is about what the software • It is a subset of software design

program will do, what the UI will that is concerned with the visual
look like and what is the result components in the software and
when a button is clicked. their behavior.

• It also includes the communication • How will the UI look like when a
between different modules and user starts a software application?
objects and their responsibilities
and functions. • What will the button with “Login”
text do when it is clicked?
 Models of Interface Design
Conceptual Model Implementation Model Manifest Model

Represents user vision Represents how Represents disconnection

about what can be done technology is being used between what is real and
on what user interactions. in order to achieve a user what is offered as
function. explanation.
It shows “what is
offered”. It shows “what is real”. It must be close to
conceptual model for
easier use &
understanding to users.
 How to design login page for facebook in browser?

Conceptual Model Implementation Model Manifest Model

• Go to facebook login • Get username and • If username and
page password and check it password isn’t found,
in database if there is message with
• Input your username record of the user “Database has no
and password username or
• If found the user is password” is a bad
• If correct, you are logged in manifest model
logged in
• If not found, the user is • “Password is wrong,
• If incorrect, you get shown error messages please try again” can
error messages
be a better manifest
model
 Relationship between three models of interface design

In the figure Represented Models represent manifest models. The closer the manifest models are to
the mental model, the better is the manifest model of interface design. So, instead of being closer to
implementation model, closer to mental model is necessary for a good interface design.
 Modeling From User’s Point of View

1. Focus on user goals.

2. Ignore technology implementation if required to meet user

goals.

3. Follow user’s mental (conceptual) model.

4. Don’t use mathematical model for inventing user

interfaces.
Visual Interface Design
● GUI (Graphical User Interface) is better than character based user interface.
● Despite of GUI, majority of programs irritate and annoy users, why?

Visual Software
● Must of user-centric rather than technology-centric.
● The qualities of user-centric are visualness and program’s vocabulary.
● Technology-centric is about graphicalness.
Visual Interface Design (Contd.)
● Visual software is required because humans process it better than textual
ones.
● Interaction must be visual. For this, GUI is replaced by VUI (Visual User
Interface).
● So visual interface design is about software that has user interaction in some
observable form.

Advantages (attain user goals):

● Feeling of fluency.
● Moving along smoothly/effortlessly.
Visual Processing
● Human brain is a superb pattern-processing computer.
● Acuity of human eye is tremendous and is managed by brain.

How Visual Processing works in Humans?

● When we look a view in front of us, our eye receives the visual input and
passes it to the brain.
● Brain unconsciously process patterns. It also establishes a system of priority.
● Brain consciously analyzes visual inputs.
Visual Processing (Contd.)
How human brain processes complex scene?
● Complex scene is broken into chunks of the view that are manageable pieces like
building, street, tree, etc.
● If we have difficult time visual complexity, the visual information that we see puts us in a
state of shock.
● If the brain quickly processes those chunks, then it starts to analyze for the details.
● If there’s someone we saw in past in the view, our subconscious brain identifies it that
we had seen the person somewhere before.
● Then the details are observed to identify who the person actually is.
● Likewise, documents also are identified first through patterns.
● To know what the document has, we look for the details.
Visual Pattern
● Need to present the program’s components on the screen as recognizable
visual patterns with accompanying text as a descriptive supplement.
● Patterns are engine of unconscious recognition. (To recognize something, we
don’t need details in it. This is the difference of pattern from pictures, images
or icons)
● Pattern matching is done by unconscious mind.
● Reading is done by conscious mind. It is only done after pattern matching.
● Visual patterns have text but in a secondary role of distinguishing between
objects with similar patterns. If there are a number of menus with icons
followed by text or label, all of them give the visual pattern of menus.
Visual Pattern (Contd.)
Example:

● While driving, if we see some symbols on highways with written text in them
like “H26” within a shape, we learn the shape from the context in which it is
used. The symbols represent that the road is a highway.
● From then on, it represents the context.
● Whenever we see the same visual pattern on a new location, our brain
identifies the visual pattern with context and makes us aware that we are on
highways.
Visual Interface Design (Contd.)
Visual Interface is based on visual patterns.

Our visual user interface must create readily recognizable patterns.

For that, we must create symbols for objects in the interface.

The symbols must be recognizable.

As a result of this, user can understand and manipulate the interface and achieve
user goals.
The Canonical Vocabulary
Learning a new software and its user interface is like learning a new language.

In order to let learners learn it easily, we must restrict the vocabulary of the
language.

The restriction in vocabulary is achieved by GUI.

GUI were first user interfaces to restrict range of such vocabulary for
communicating with the user.

Input changed from command line to a tightly restricted set of mouse based
actions.
Drawbacks of Command line based UI
● Must know exactly what text or command the program accepts.
● Must remember letters and symbols (symbols used in text).
● Must remember the sequence of words in commands.
● Must remember the capitalization of some words in commands.

This introduces need for restricting the vocabulary.

● So if there are more atomic elements in a communication vocabulary, the

learning process becomes more time consuming and difficult.
● This means to say that we restrict the vocabulary to make user interface
learning process easier.
The Canonical Vocabulary
A properly formed vocabulary is shaped like an inverted pyramid. All easy-to-learn communication
systems obey this pattern. It is so fundamental unit that it can be called canonical vocabulary.
The Canonical Vocabulary (Contd.)
Example:

● In a telephone system, there are number of primitives used for the

communication with the user.
● Those primitives are in the form of audio tones.
● The dial tones is different for each key to identify different key is being
pressed.
● There are different tones for different status like call ringing, busy or error.
● The purpose of these tones is to restrict the communication vocabulary.
Some important references
● https://skillcrush.com/2016/05/31/what-is-visual-design/
● https://www.lessannoyingcrm.com/blog/2010/10/198/The+differences+betwee
n+graphic+design+and+user+interface+design
● http://fadeyev.net/visual-interface-design/

Course about User Interface Design on Coursera

● https://www.coursera.org/learn/ui-design

If you want to know what exactly user interface design is for and what jobs are available in the
present world related to this, this course by Coursera is very helpful.
By Biplap Bhattarai