User Interface Design and

Development (UIDD)
15IT 1205

Prof. Ananthanagu
Assistant Professor
Prof. Ananthanagu Dept. of CSE 1
 Information presented in the slides
are for educational purposes. Credit is
given to the respective sources.
Prof. Ananthanagu 2
 User Interface Design and Development (UIDD)-15IT 1205
Course Description
• This course introduces students to the principles and practices of user interface (UI)
design and development with a focus on using Adobe Illustrator. Students will learn
to create visually compelling and user-friendly interfaces for various digital
platforms, including web and mobile applications. The course covers essential UI
design concepts, Adobe Illustrator tools, and techniques, and provides hands-on
experience through practical assignments and projects
Course Objectives
• To understand the fundamental principles of user interface design.
• To gain proficiency in using Adobe Illustrator for UI design.
• To develop the ability to create wireframes, and prototypes.
• To apply design thinking and user-centered design principles in UI development.
• To understand the process of testing and iterating on UI designs based on user
feedback.

Prof. Ananthanagu 3
 User Interface Design and Development (UIDD)-15IT 1205

Course Outcome
CO1: Demonstrate an understanding of UI design principles and best practices-BLT2
CO2: Use Adobe Illustrator to create professional-quality UI components and layouts -
BLT3
CO3: Demonstrate proficiency in using advanced Adobe Illustrator techniques for
creating detailed and visually appealing UI components - BLT3
CO4: Develop wireframes, and prototypes for UI designs- BLT3
CO5: Apply usability testing methods to gather user feedback and make iterative
improvements to UI designs - BLT3

Prof. Ananthanagu 4
 User Interface Design and Development (UIDD)-15IT 1205
PO-PSO

PSO1: Integrate software components to build

comprehensive business application systems.
PSO2: Analyze system requirements, design efficient
and scalable IT solutions, and implement security
measures to create effective IT solutions.
PSO3: Implement backup and recovery strategies to
safeguard critical data and ensure business continuity
in the event of system failures or disasters.

Prof. Ananthanagu 5
 User Interface Design and Development (UIDD)-15IT 1205
Course Assessments

Prof. Ananthanagu 6
 User Interface Design and Development (UIDD)-15IT 1205
CO-PO Mapping

Prof. Ananthanagu 7
Course Syllabus User Interface Design and Development (UIDD)-15IT 1205

Module -I Introduction, Overview, The importance of user interface – Defining the user interface, The importance of Good design,
5 Hours.
Introduction Characteristics of graphical and web user interfaces, Principles of user interface design.

Module -II Basics of Adobe Illustrator, Introduction to Adobe Illustrator interface- Exploring the workspace, Changing the view of
artwork, Navigating multiple artboards, Arranging multiple documents, Essential tools and features for UI design- Techniques
Basics of For Selecting Artwork- Selecting objects, Aligning objects, Working with groups, Exploring object arrangement, Creating and 7 Hours.
Adobe managing artboards- Working with basic shapes, Using Image Trace to convert images into editable vector art, Working with
Illustrator drawing modes. -Basic shapes and pathfinder operations, Combining shapes, Using the Width tool.

Module -III Working with artboards, working with rulers and guides, Transforming content, Using repeats, Creating with the Curvature
Designing UI tool, Creating dashed lines, Creating with the Pencil tool, Joining with the Join tool, Adding arrowheads to paths, Starting with 6 Hours.
Components the Pen tool, Exploring color modes, Working with color

Module -IV Definition and importance of wireframes in UI design- Who Uses Wireframes?, Why Should Anyone Use Wireframes?, Why
Should I Use Wireframes? Types of wireframes: low-fidelity vs. high-fidelity-Wireframing & Prototyping Convergence
Wireframing Choosing Your Wireframe Style. Tools and techniques for creating wireframes- Sketching, Black & Whiteboarding, Paper
and 6 Hours
Cutouts (i.e. Paper Prototyping), Stenciling, Digital Wireframing Tools- Word Processing Software, Graphics Editing
Prototyping Software, Presentation Software, What is prototyping, Prototyping tools and techniques- The Power of Low Fidelity
Prototyping, Components of Lo-Fi Prototypes, Introduction to Adobe XD for interactive prototypes.

Module -V User Testing and Iteration- Usability, The Purpose of Usability Testing, The Importance of Usability Testing, Scope of
User Testing Testing, Preparing prototypes for user testing, Conducting and recording usability tests, collecting and analyzing user 6 Hours
and Iteration feedback, Iterating on design based on testing results.

Prof. Ananthanagu 8
Course Syllabus User Interface Design and Development (UIDD)-15IT 1205

Textbooks
Wilbert O. Galitz, “The Essential Guide to User Interface Design”, John Wiley & Sons, Second
1
Edition 2002.
2 Adobe Illustrator Classroom in a Book (2023 release)" by Brian Wood
Reference books
The Guide To Wireframing For Designers, Pms, Engineers And Anyone Who Touches Product by
1
UXPin

2 Adobe Illustrator Help

Coursera Courses
https://www.coursera.org/specializations/user-interface-design

Prof. Ananthanagu 9
Course Syllabus User Interface Design and Development (UIDD)-15IT 1205

SN Module Experiment Name

Explore the Adobe Illustrator interface, create a new document, and familiarize yourself
1 1 with workspace layouts, tools, and panels.
Design a simple logo for a your startup company
Create a set of basic icons for a mobile app’s navigation bar.
2 1 Hint-Use the Shape Tools to create various shapes and lines, and adjust their stroke
weight, color, and style.
Design the splash screen, login screen, and home screen for a new mobile app.
3 1
Hint- Create multiple artboards, arrange them logically, and move objects between them.
Create a set of action buttons (e.g., save, cancel, delete) for a web form. Hint- Use basic
4 2 button shapes and custom icons using the Shape Tools and Pen Tool, and combine shapes
using the Pathfinder Panel.
Design a responsive navigation menu for a website that works on both desktop and
5 2 mobile. Hint- Use rulers, guides, and the grid to define layout areas and align UI
elements precisely.
Develop a consistent visual style guide for an e-commerce website.
6 2 Hint- Use color palette and apply it to UI elements, and experiment with different fonts
and typography styles.
Prof. Ananthanagu 10
Course Syllabus User Interface Design and Development (UIDD)-15IT 1205

SN Module Experiment Name

Design a library of reusable icons for a social media application.
7 3
Hint- Use custom symbols, use the Symbol Sprayer Tool, and edit symbol instances
Design a detailed product image with realistic shadows and highlights for a product detail
page.
8 3
Hint- Use a complex gradient using the Mesh Tool and apply it to UI elements for
realistic shading and depth
Create a series of decorative borders and dividers for a lifestyle blog.
9 3
Hint- Use custom brushes, and experiment with different brush settings and styles.
Create wireframes for a travel booking website, focusing on the search results page and
10 4
booking confirmation page
Develop high-fidelity prototypes for a personal finance app, including dashboard and
11 4
transaction details screens.
Create an interactive prototype for a restaurant reservation system and prepare it for user
12 5
testing.

Prof. Ananthanagu 11
Course Syllabus User Interface Design and Development (UIDD)-15IT 1205

Prof. Ananthanagu 12
Course Syllabus User Interface Design and Development (UIDD)-15IT 1205

Mini Project:

• Students are expected to design and develop a functional user interface and user experience for a
chosen application, demonstrating their understanding and application of UI/UX principles and tools.
• The project involves phases of research and analysis, wireframing, prototyping, usability testing, and
final design. Students should conduct user research to understand the target audience, create user
personas and journey maps, then create low-fidelity wireframes followed by high-fidelity prototypes.
• Usability testing with real users will provide feedback for refining the design.
• Tools like Google Forms or SurveyMonkey for surveys, Balsamiq for wireframing, Sketch or Figma for
prototyping, and UsabilityHub or Lookback.io for testing will be utilized.
• The final UI designs will be created using Adobe XD, Figma, or Sketch, with Zeplin assisting in design
handoff. Deliverables include research documentation, wireframes, prototypes, testing reports, and final
designs, along with a 10-15 minute presentation summarizing the project and key design decisions
Prof. Ananthanagu 13
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction
• Overview
• The importance of user interface
• Defining the user interface
• The importance of Good design
• Characteristics of graphical and web user interfaces
• Interaction Styles
• The Graphical User Interface
• Characteristics of the Graphical User Interface
• The Web User Interface
• Principles of user interface design
Prof. Ananthanagu 14
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction
What’s UI design?
• User interface (UI) design is about building interfaces with a focus
on styling and interactivity.
• The UI designer’s goal is to create an interface the user finds easy
to use and aesthetically pleasing.
• The word “interface” refers to the access point where a user
interacts with a software application (e.g., Figma, Sketch), a
browser-based website, or a hardware device (e.g., a smartphone
touchscreen).
• A UI designer explores all the interactions and behaviors a user
takes with a product to create an interface that best adapts to the
user’s needs.
• When we talk about UI design, we talk about the stylistic choices a
designer makes when creating a product, e.g., an image, button,
menu bar, or footer.
• All of these elements will affect the user’s interaction, and so, must
be planned accordingly.

Prof. Ananthanagu 15
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction
What’s UX design?
• User experience (UX) design is the process designers use to create
products that deliver relevant and valuable experiences to users.

• According to Don Norman, the co-founder of Nielsen Norman

Group and the one who coined the phrase “user experience,” the
term includes “all aspects of the end-user’s interaction with the
company, its services, and its products.”

• UX designers create meaningful experiences by integrating

elements of branding, marketing, engineering, design, and
usability into a product.

• Their job requires extensive user research to understand their user’s

mindset, feelings, and goals and to connect this information to the
product.

Prof. Ananthanagu 16
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction
UX vs. UI: What’s the difference?

• UI design “is the process of transforming wireframes into a polished graphical user interface.”

• UX design requires “understanding the overall journey of your users and turning it into a product.”

Prof. Ananthanagu 17
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction

Prof. Ananthanagu 18
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction
UI Design vs. UI Development

• UI design (User Interface Design) is the process of

designing user interface elements, layouts, and
interactions–everything users see and interact with.

• These elements include images, animations, sliders, text

fields, buttons, etc.

• Like user experience (UX) design, UI design decisions are

based on user needs and testing.

What does a UI designer do?

• A UI designer is responsible for designing the visual elements of a digital product or application that users interact
with.
• Their primary focus is on creating a user-friendly and aesthetically pleasing interface that not only enhances the
overall user experience, but also communicates what actions are possible within a given user interface (clicking a
button, navigating to the homepage, typing in text.)

Prof. Ananthanagu 19
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction
What is UI Development?

• UI development is the process of programming client-facing

interfaces.
• Like UI design, the UI development process includes writing
code for images, animations, sliders, text fields, buttons, etc.

What is a UI developer?

• A UI developer is responsible for implementing the visual

design of a website or application.

• While UI designers focus on creating the overall look and feel

of the interface, UI developers bring those designs to life by
writing the code that enables the interface to function on the
web or within an application.

Prof. Ananthanagu 20
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction
What is the difference between Front-End Development vs. Back-End Development?
Engineers divide programming into two separate disciplines, front-end, and back-end development.

•Front-end development: Focuses on developing “client-facing” interfaces using HTML, CSS, and Javascript.

•Back-end development: Write server-side code to connect front-end interfaces to databases, APIs,
authentication, etc. Some programming languages include Java, Ruby, Python, and Javascript, to name a few.

Prof. Ananthanagu 21
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction
The importance of user interface
Defining the User Interface
• User interface design is a subset of a field of study called human-
computer interaction (HCI).
• Human-computer interaction is the study, planning, and design of how
people and computers work together so that a person’s needs are
satisfied in the most effective way.
• The user interface is the part of a computer and its software that people
can see, hear, touch, talk to, or otherwise understand or direct.
• The user interface has essentially two components: input and output.
• Input is how people communicate his needs to the system using
keyboard or any pointing device
• Output is how the system returns processing result to user through
screen or sound.
• The best interface is one which has proper design with combination of
effective input and output mechanisms.
Prof. Ananthanagu 22
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction
The Importance of Good Design
What is Good Design?

• Good design is a concept defined by industrial

designer Dieter Rams’s principles

• It makes a product useful and understandable, is

innovative, aesthetic, unobtrusive, honest, long-
lasting, thorough to the last detail, environmentally
friendly, and involves as little design as possible.

“You cannot understand good design if you do not understand people.”— Dieter Rams

Prof. Ananthanagu 23
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction
The Importance of Good Design

“You cannot understand good design if you do not understand people.”— Dieter Rams
Prof. Ananthanagu 24
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction
The Importance of Good Design

“You cannot understand good design if you do not understand people.”— Dieter Rams
Prof. Ananthanagu 25
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction
The Importance of Good Design

“You cannot understand good design if you do not understand people.”— Dieter Rams
Prof. Ananthanagu 26
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction
The Importance of Good Design

“You cannot understand good design if you do not understand people.”— Dieter Rams
Prof. Ananthanagu 27
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction
The Importance of Good Design
Ten principles-Good Design
1.Is innovative.
2.Makes a product useful.
3.Is aesthetic.
4.Makes a product understandable.
5.Is unobtrusive.
6.Is honest.
7.Is long-lasting.
8.Is thorough down to the last detail.
9.Is environmentally friendly.
10.Involves as little design as possible.

Prof. Ananthanagu 28
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction
The Importance of Good Design
• Inspite of today’s rich technologies and tools we are unable to provide effective and usable screen because
lack of time and care.
• A well-designed interface and screen is terribly important to our users.
• It is their window to view the capabilities of the system and it is also the vehicle trough which complex tasks
can be performed.
• A screen’s layout and appearance affect a person in a variety of ways.
• If they are confusing and inefficient, people will have greater difficulty in doing their jobs and will make
more mistakes.
• Poor design may even chase some people away from a system permanently.
• It can also lead to aggravation, frustration, and increased stress.

Prof. Ananthanagu 29
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction
The Benefits of Good Design
•Well-designed screens improve efficiency and reduce
errors.
•Simplifying screens resulted in:
•25% faster task completion.
•25% fewer errors.
•Reformatting screens following good design principles
reduced decision-making time by about 40%, saving 79
person-years in one system.
•Additional benefits include:
•Lower training and support costs.
•Increased employee satisfaction.
•Better service for customers.
•Addressing design problems early also brings significant
economic benefits.

Prof. Ananthanagu 30
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction
Characteristics of Graphical and web user interfaces
Interaction Styles
• An interaction style is simply the method, or methods, by
which the user and a computer system communicate with
one another.
• Today the designer has a choice of several interaction
styles in graphical system or Web page and application
design.
They are as follows:
• Command line
• Menu selection
• Form fill-in
• Direct manipulation
• Anthropomorphic
Prof. Ananthanagu 31
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Command Line
• The command-line interface is the oldest and original user
interaction style.
• It requires the user to press a function key or type a command
into a designated entry area on a screen.
• The commands may be single characters, abbreviations, words,
or multiple words and codes.
• The command-line style is powerful, offering immediate access
to system functions.
• It is also flexible and able to incorporate options or parameters
to vary its behavior.
• One problem with command lines is that they must be
remembered and they test one’s power of recall.
• No clues about what commands are available exist on the screen.
• Another problem is that command lines can be cryptic and
obscure with complex syntax.
• They are also very prone to, and intolerant of, typing errors that
can lead to user frustration. Prof. Ananthanagu 32
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Menu Selection
•A set of options or choices from which a user must choose.
•Screen Selection: Users select choices with a pointing device or keystroke, with
visual feedback provided.
•Voice Selection: Menu selections can also be made by voice, such as "Press 1 to..."
options after phone calls.
•Voice Recognition: Newer voice menus ask callers to speak a request, relying on
voice recognition systems.
•Recognition vs. Recall: Screen menus are beneficial because they utilize recognition,
which is stronger than recall.
•Effective Menus: Menu choice labels must be meaningful and understandable to
avoid slowing use and increasing errors.
•Structured Interaction: Menus break complex interactions into small steps, aiding
decision-making, especially for infrequent users.
•Expert Use: Many small steps can slow knowledgeable users, but techniques are
available to overcome this for experts.

Prof. Ananthanagu 33
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Form Fill-in
•Useful for collecting information.

•Typical Form Structure: Contains controls or fields for typing information or

selecting options from a list.
•A listing of choices presented to users is also a menu.

•Old Text-Based Systems: Screen forms composed entirely of fields for typing
information.

•Screen Fill-In Forms: Derived from paper forms.

•Advantages of Forms:
•Familiarity aids user understanding.
•Allows fast and easy entry of information if well-designed.

•Disadvantages of Poorly Designed Forms: Can be inefficient and aggravating to

complete. Prof. Ananthanagu 34
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Direct Manipulation
• A direct manipulation interface, as found in graphical
systems

• It enables the user to directly interact with elements

presented on the screen.

• These elements (called objects) replace the keyed entry of

commands and menus.

• Users typically select screen objects and actions by using

pointing mechanisms, such as the mouse or joystick,
instead of the traditional keyboard.

• They navigate the screen and execute commands by

using menu bars and pull-down menus
Prof. Ananthanagu 35
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Anthropomorphic
• Athropomorphic interface tries to interact with people the same
way people interact with each other.
• Anthropomorphic interfaces include spoken natural language
dialogues, hand gestures, facial expressions, and eye movement
• Development Requirement: Requires understanding
human behavior and interaction.
• Potential Capabilities:
•Eye tracking to select menu choices with a blink.
•Automatic display of help screen with a frown.
•Recognizing a smile as OK.
• Current Status: Many exist only in labs or in theoretical
concepts.
• Advanced Interface: Natural language dialog with limited
recognition of typed or spoken words.
• Current Systems: Blend of various interaction styles.
Prof. Ananthanagu 36
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Advantages and Disadvantages of Interaction Styles

Prof. Ananthanagu 37
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

The Graphical User Interface

• A graphical user interface, or GUI, is a form of user interface

that allows users to interact with electronic devices through
graphical icons and visual indicators such as secondary
notation.

• In many applications, GUIs are used instead of text-based UIs,

which are based on typed command labels or text navigation.

• In a graphical interface, the primary interaction mechanism is

a pointing device of some kind.

• What the user interacts with is a collection of elements referred

to as objects.

Prof. Ananthanagu 38
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

The Graphical User Interface

• They can be seen, heard, touched, or otherwise perceived.

• Objects are always visible to the user and are used to perform
tasks.

• They are interacted with as entities independent of all other

objects.

• People perform operations, called actions, on objects.

• The operations include accessing and modifying objects by

pointing, selecting, and manipulating.

Prof. Ananthanagu 39
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

The Graphical User Interface
The Popularity of Graphics
•Graphics Revolution: Transformed design and user interfaces.
•Three-Dimensional Look: Graphics provide a 3D look, unlike text-based systems 1D look.
•Dynamic Information: Information can appear or disappear through floating windows.
•Navigation and Commands: Accomplished through menus, pull-downs, or screen controls.
•Improved User Experience: Increased computer power and better displays allow quick,
dynamic, and meaningful reactions to user actions.
•Benefits of Graphics:
•Reduce mental and perceptual load.
•Increase information transfer between humans and machines.
•Facilitate visual comparisons and simplify perception of structure.
Prof. Ananthanagu 40
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

The Concept of Direct Manipulation
Shneiderman (1982) introduced "direct manipulation" for graphical systems.
• The system is portrayed as an extension of the real world
• Users work in a familiar environment focusing on data, not the application/tools.
• The system's physical organization is hidden
• Objects and actions are continuously visible
• Objects and actions are always visible, with obvious reminders of actions.
• Nelson (1980) called it "virtual reality," Hatfield (1981) called it "WYSIWYG(what
you see is what you get)," and Rutkowski (1982) described it as "transparency.“
• Actions are rapid and incremental with visible display of results
• Results of actions are immediately displayed visually, with possible auditory
feedback. Task evolution is continuous and effortless.
• Incremental actions are easily reversible
• Incorrect or undesired actions can be easily undone.
Prof. Ananthanagu 41
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Indirect Manipulation
• In practice, direct manipulation of all screen objects and actions may not be feasible because of the
following:
• The operation may be difficult to conceptualize in the graphical system.
• The graphics capability of the system may be limited.
• The amount of space available for placing manipulation controls in the window border may be
limited.
• It may be difficult for people to learn and remember all the necessary operations and actions.

• When this occurs, indirect manipulation is provided.

• Indirect manipulation substitutes words and text, such as pull-down or pop-up menus, for
symbols, and substitutes typing for pointing.

Prof. Ananthanagu 42
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Graphical Systems: Advantages and Disadvantages
•Symbols Recognized Faster than Text: Icons enable speedy and accurate recognition of messages.
•Faster Learning: Graphical, pictorial representations aid in faster learning and easier symbol comprehension.
•Faster Use and Problem Solving: Visual/spatial information is easier to retain and manipulate, leading to quicker and more successful problem solving.
•Easier Remembering: Simplicity helps casual users retain operational concepts.
•More Natural: Symbolic displays align with the human mind's powerful image memory.
•Fewer Errors: Action reversibility reduces errors, making error messages less necessary.
•Increased Feeling of Control: Users feel in control, boosting confidence.
•Immediate Feedback: Actions result in immediate, visible feedback, allowing quick course corrections.
•Predictable System Responses: Predictability speeds up learning.
•Easily Reversible Actions: Reversibility enhances user confidence.
•More Attractive: Direct-manipulation systems are more engaging and appealing.
•May Consume Less Space: Icons can take up less space than text.
•Replaces National Languages: Icons have universal comprehension, surpassing text in global understanding.
•Easily Augmented with Text Displays: Graphical systems can be supplemented with text; the reverse is not true.
•Low Typing Requirements: Pointing and selection devices, like a mouse or trackball, minimize the need for typing skills.
Prof. Ananthanagu 43
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Graphical Systems: Disadvantages

•Greater design complexity •Few tested icons exist

•Learning still necessary •Inefficient for touch typists

•Lack of experimentally-derived design guidelines •Inefficient for expert users
•Inconsistencies in technique and terminology •Not always the preferred style of interaction
•Working domain is the present. •Not always fastest style of interaction
•Not always familiar •Increased chances of clutter and confusion

•Human comprehension limitations •The futz and fiddle factor

•Window manipulation requirements •May consume more screen space
•Production limitations •Hardware limitations

Prof. Ananthanagu 44
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Characteristics of the Graphical User Interface
Sophisticated Visual Presentation
•Visual Aspect: What users see on the screen.
•Graphical Capabilities:
•Lines, drawings, and icons.
•Variety of character fonts, sizes, and styles.
•Display of 16 million or more colors.
•Animation, photographs, and motion video.
•Interface Elements:
•Windows: Primary, secondary, dialog boxes.
•Menus: Menu bar, pull-down, pop-up, cascading.
•Icons: Represent objects like programs or files.
•Screen-Based Controls: Text boxes, list boxes, combo boxes, settings, scroll bars, buttons.
•Pointing Devices: Mouse or other devices.
•Cursor: Visual indicator. Prof. Ananthanagu 45
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Characteristics of the Graphical User Interface
Pick-and-Click Interaction
• To identify a proposed action is commonly referred to as pick, the signal to
perform an action as click.
• The primary mechanism for performing this pick-and-click is most often the
mouse and its buttons and the secondary mechanism for performing these
selection actions is the keyboard.
Restricted Set of Interface Options
• The array of alternatives available to the user is what is presented on the
screen or what may be retrieved through what is presented on the screen,
nothing less, and nothing more.
• This concept fostered the acronym WYSIWYG.
Prof. Ananthanagu 46
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Characteristics of the Graphical User Interface

Visualization
• Visualization is a cognitive process that allows people to understand information that is difficult to
perceive, because it is either too voluminous or too abstract.
• The goal is not necessarily to reproduce a realistic graphical image, but to produce one that conveys
the most relevant information.
• Effective visualizations can facilitate mental insights, increase productivity, and foster faster and
more accurate use of data.

Prof. Ananthanagu 47
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Characteristics of the Graphical User Interface
Object Orientation
• A graphical system consists of objects and actions. Properties or Attributes of Objects :
• Objects are what people see on the screen as a single
unit. • Properties are the unique characteristics of an object.
• Objects can be composed of subobjects. • Properties help to describe an object and can be changed by
• For example, an object may be a document and its users.
subobjects may be a paragraph, sentence, word, and
letter. Actions:
• Objects are divided into three meaningful classes as • People take actions on objects.
o Data objects, which present information • They manipulate objects in specific ways (commands) or
o container objects to hold other objects and modify the properties of objects (property or attribute
o Device objects represent physical objects in the real specification).
world.
• Objects can exist within the context of other objects, and
one object may affect the way another object appears or
behaves.
• These relationships are called collections, constraints,
composites, and containers.

Prof. Ananthanagu 48
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Characteristics of the Graphical User Interface
The following is a typical property/attribute specification sequence:
• The user selects an object—for example, several words of text.
• The user then selects an action to apply to that object, such as the action BOLD.
• The selected words are made bold and will remain bold until selected and changed again.

Application versus Object or Data Orientation

An application-oriented approach takes an action: object approach, like this:
Action> 1. An application is opened (for example, word processing).
Object> 2. A file or other object selected (for example, a memo).

An object-oriented object: action approach does this:

Object> 1. An object is chosen(a memo).
Action> 2. An application is selected (word processing).

Views: Views are ways of looking at an object’s information. IBM’s SAA CUA describes four kinds of views:
composed, contents, settings, and help.

Prof. Ananthanagu 49
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Characteristics of the Graphical User Interface
Use of Recognition Memory

• Continuous visibility of objects and actions encourages to eliminate ―out of sight, out of mind‖ problem

Concurrent Performance of Functions

• Graphic systems may do two or more things at one time.

• Multiple programs may run simultaneously.
• It may process background tasks (cooperative multitasking) or preemptive multitasking.
• Data may also be transferred between programs.
• It may be temporarily stored on a ―clipboard‖ for later transfer or be automatically swapped between
programs.

Prof. Ananthanagu 50
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

The Web User Interface
• Web interface design is essentially the design of navigation and the presentation of information.
• Proper interface design is largely a matter of properly balancing the structure and relationships of menus, content, and other
linked documents or graphics.
• The design goal is to build a hierarchy of menus and pages that feels natural, is well structured, is easy to use, and is truthful.
• The Web is a navigation environment where people move between pages of information, not an application environment.
• It is also a graphically rich environment.
• Web interface design is difficult for a number of reasons.
o First, its underlying design language, HTML.
o Next, browser navigation retreated to the pre-GUI era.
o Web interface design is also more difficult because the main issues concern information architecture and task flow, neither
of which is easy to standardize.
o It is more difficult because of the availability of the various types of multimedia, and the desire of many designers to use
something simply because it is available.
o It is more difficult because users are ill defined, andProf.
theAnanthanagu
user’s tools so variable in nature. 51
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Characteristics of Web Design
Characteristics GUI WEB
• User hardware variations limited. • User hardware variations
• User hardware characteristics well enormous.
Devices defined • Screen appearance influenced
• Screens appear exactly as specified. by hardware being used.

User Focus • Data and applications. • Information and navigation.

• Typically created and used by known • Full of unknown content.

Data
and trusted
• Sources are trusted. • Source not always trusted.
• Properties generally known. • Often not placed onto the
Information • Typically placed into system by users Web by users or known
or known people and organizations. • people and organizations.
• Highly variable organization.

Prof. Ananthanagu 52
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Characteristics of Web Design
Characteristics GUI WEB
• Link to a site, browse or read pages,
fill out forms, upgrade programs,
• Install, configure, personalize, start,
register for services, participate in
use, and Open, use, and close data files.
User Tasks transactions, download and save
• Familiarity with applications often
things.
achieved.
• Familiarity with many sites not
established.
• Two components, browser and page
• Windows, menus, controls, data, Within page, any combination of text,
toolbars Presented as specified by images, audio, video, and animation.
Presentation designer. • May not be presented as specified by
• Generally standardized by toolkits and the designer dependent on browser,
style specifications. guides. monitor, and user Little
standardization.

Prof. Ananthanagu 53
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Characteristics of Web Design
Characteristics GUI WEB
• Through menus, lists, trees, dialogs, • Through links, bookmarks, and typed
Navigation
and wizards.. URLs.

• Interactions such as clicking menu

• Basic interaction is a single click.
choices, pressing buttons, selecting
Interaction • This can cause extreme changes in
list choices, and cut/copy/paste occur
context, which may not be noticed.
within context of active program.

• Quite variable, depending on

transmission speeds, page content, and
Response Time • Nearly instantaneous
so on.
• Long times can upset the user.

Prof. Ananthanagu 54
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Characteristics of Web Design
Characteristics GUI WEB
• Limited by constraints imposed by the hardware,
• Unlimited capability proportional to
browser, software, client support, and user
System Capability sophistication of hardware and
willingness to allow features because of
software.
response time, security, and Privacy concerns
• Targeted to a specific audience with • Limited by browser and network capabilities.
specific tasks. Only limited by the • Actual user audience usually not well
Task Efficiency
amount of programming undertaken to understood.
support it. • Often intended for anyone and everyone

• Major objective exists within and • Sites tend to establish their own identity.
across applications. Aided by platform Frequently standards set within a site. Frequent
Consistency toolkit and design guidelines. ignoring of GUI guidelines for identical created
Universal consistency in GUI through toolkits and design guidelines.
products generally • Components, especially controls.

Prof. Ananthanagu 55
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Characteristics of Web Design
Characteristics GUI WEB
• Integral part of most systems and
applications.
• No similar help systems. Accessed through standard
• Documentation, both online and
mechanisms.
User Assistance offline, Customer service support, if
• The little available help is built into the page oriented
provided, usually provided.
to product or service offered.
• Personal support desk also usually
provided
• Apparent for some basic functions within most Web
• Seamless integration of all
sites (navigation, printing, and so on.) in
Integration applications into the platform
accomplishing this objective Sites tend to achieve
environment is a major objective
individual distinction rather than integration

• Renowned for security exposures. Browser-provided

• Tightly controlled, proportional to
security options typically understood by average
degree of willingness to invest
Security users.
resources and effort.
• When employed, may have function-limiting side
• Not an issue for most home PC users.
effects
Prof. Ananthanagu 56
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Characteristics of Web Design
Characteristics GUI WEB
• Susceptible to disruptions caused by user,
telephone proportional to degree of willingness
• Tightly controlled in business
Reliability line and cable providers, Internet service
systems,
providers, to invest resources and effort.
• Hosting servers, and remotely accessed sites.

Prof. Ananthanagu 57
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Principles of User Interface Design

• It should be useful, accomplishing some business objectives faster and more efficiently than the previously
used method or tool did.
• It must also be easy to learn, for people want to do, not learn to do.
• The interface itself should serve as both a connector and a separator:
• A connector in that it ties the user to the power of the computer
• A separator in that it minimizes the possibility of the participants damaging one another
• We will begin with the first set of published principles, those for the Xerox STAR.

Prof. Ananthanagu 58
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Principles of User Interface Design
Principles for the Xerox STAR
The illusion of manipulable objects:
• Displayed objects that are selectable and manipulable must be created.
• A design challenge is to invent a set of displayable objects that are represented meaningfully and appropriately for the intended
application.
• It must be clear that these objects can be selected
Visual order and viewer focus:
• Effective visual contrast between various components of the screen is used to achieve this goal.
• Animation is also used to draw attention, as is sound.
• Feedback must also be provided to the user.
Revealed structure:
• The distance between one’s intention and the effect must be minimized.
• The relationship between intention and effect must be tightened and made as apparent as possible to the user.
Consistency: Consistency aids learning.
• Consistency is provided in such areas as element location, grammar, font shapes, styles, and sizes, selection indicators, and
contrast and emphasis techniques. Prof. Ananthanagu 59
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Principles of User Interface Design

Principles for the Xerox STAR

Appropriate effect or emotional impact:
• The interface must provide the appropriate emotional effect for
the product and its market.
A match with the medium:
• The interface must also reflect the capabilities of the device on
which it will be displayed.
• Quality of screen images will be greatly affected by a device’s
resolution and color-generation capabilities.

Prof. Ananthanagu 60
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Principles of User Interface Design
General Principles
Aesthetically Pleasing
Provide visual appeal by following these presentation and graphic design principles:
• Provide meaningful contrast between screen elements.
• Create groupings.
• Align screen elements and groups.
• Provide three-dimensional representation.
• Use color and graphics effectively and simply.

Prof. Ananthanagu 61
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Principles of User Interface Design
General Principles
Clarity
— The interface should be visually, conceptually, and linguistically clear, including:
• Visual elements
• Functions
• Metaphors
• Words and text
Compatibility
- Provide compatibility with the following:
• The user
• The task and job
• The product
— Adopt the user’s perspective.
Prof. Ananthanagu 62
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Principles of User Interface Design
Comprehensibility — A system should be easily learned and understood.
A user should know the following:
• What to look at
• What to do
• When to do it
• Where to do it
• Why to do it
• How to do it
— The flow of actions, responses, visual presentations, and information should be in a sensible order that is easy to recollect and place in context.
Configurability
— Permit easy personalization, configuration, and reconfiguration of settings.
• Enhances a sense of control.
• Encourages an active role in understanding.

Prof. Ananthanagu 63
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Principles of User Interface Design
In addition to increased learning requirements, inconsistency in design
Consistency
has a number of other prerequisites and by-products, including:
— A system should look, act, and operate the same
— More specialization by system users.
throughout.
— Greater demand for higher skills.
Similar components should: — More preparation time and less production time.
• Have a similar look. — More frequent changes in procedures.
• Have similar uses. — More error-tolerant systems (because errors are more likely).

• Operate similarly. — More kinds of documentation.

— The same action should always yield the same — More time to find information in documents.
— More unlearning and learning when systems are changed.
result.
— More demands on supervisors and managers.
— The function of elements should not change.
— More things to do wrong.
— The position of standard elements should not change.
Prof. Ananthanagu 64
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Principles of User Interface Design

Control
— The user must control the interaction.
o Actions should result from explicit user requests.
o Actions should be performed quickly.
o Actions should be capable of interruption or termination.
o The user should never be interrupted for errors.
— The context maintained must be from the perspective of the user.
— The means to achieve goals should be flexible and compatible with the user’s skills, experiences, habits, and preferences.
— Avoid modes since they constrain the actions available to the user.
— Permit the user to customize aspects of the interface, while always providing a proper set of defaults.

Prof. Ananthanagu 65
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Principles of User Interface Design

Directness
— Provide direct ways to accomplish tasks.
o Available alternatives should be visible.
o The effect of actions on objects should be visible.
Efficiency
— Minimize eye and hand movements, and other control actions.
o Transitions between various system controls should flow easily and freely.
o Navigation paths should be as short as possible.
o Eye movement through a screen should be obvious and sequential.
— Anticipate the user’s wants and needs whenever possible.

Prof. Ananthanagu 66
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Principles of User Interface Design

Familiarity
— Employ familiar concepts and use a language that is familiar to the user.
— Keep the interface natural, mimicking the user’s behavior patterns.
— Use real-world metaphors.
Flexibility
— A system must be sensitive to the differing needs of its users, enabling a level
and type of performance based upon:
o Each user’s knowledge and skills.
o Each user’s experience.
o Each user’s personal preference.
o Each user’s habits.
o The conditions at that moment. Prof. Ananthanagu 67
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Principles of User Interface Design

Forgiveness
• Tolerate and forgive common and unavoidable human errors.
• Prevent errors from occurring whenever possible.
• Protect against possible catastrophic errors.
Predictability
— The user should be able to anticipate the natural progression of each task.
• Provide distinct and recognizable screen elements.
• Provide cues to the result of an action to be performed.
— All expectations should be fulfilled uniformly and completely.
— When an error does occur, provide constructive messages.

Prof. Ananthanagu 68
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Principles of User Interface Design
Recovery
— A system should permit:
• Commands or actions to be abolished or reversed.
• Immediate return to a certain point if difficulties arise.
— Ensure that users never lose their work as a result of:
• An error on their part.
• Hardware, software, or communication problems.
Responsiveness
— The system must rapidly respond to the user’s requests.
— Provide immediate acknowledgment for all user actions:
• Visual.
• Textual.
• Auditory.
Prof. Ananthanagu 69
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Principles of User Interface Design

Simplicity
• Provide as simple an interface as possible.

Five ways to provide simplicity:

• Use progressive disclosure, hiding things until they are needed.
• Present common and necessary functions first.
• Prominently feature important functions.
• Hide more sophisticated and less frequently used functions.
• Provide defaults.
• Minimize screen alignment points.
• Make common actions simple at the expense of uncommon actions being made harder.
• Provide uniformity and consistency.

Prof. Ananthanagu 70
Unit-1 User Interface Design and Development (UIDD)-15IT 1205

Introduction Characteristics of Graphical and web user interfaces

Principles of User Interface Design

Transparency
• Permit the user to focus on the task or job, without concern for the mechanics of the interface.
• Workings and reminders of workings inside the computer should be invisible to the user.

Trade-Offs
• Final design will be based on a series of trade-offs balancing often conflicting design principles.
• People’s requirements always take precedence over technical requirements.

Prof. Ananthanagu 71
 Unit-I

Thank you with regards

Prof. Ananthanagu

Prof. Ananthanagu 72