MODULE - I

Module 1: THE IMPORTANCE OF USER INTERFACE: (06 Periods)

Defining the User Interface, The Importance Of Good Design, The Benefits of Good
Design, A Brief History of The Human-Computer Interface-Introduction of The
Graphical User Interface, The Blossoming of The World Wide Web, A Brief History
of Screen Design

CHARACTERISTICS OF GRAPHICAL AND WEB USER INTERFACES: The

Graphical User Interface, The Web User Interface, Principles of User Interface
Design.
 DEFINING USER INTERFACE
• User Interface (UI) defines the way humans interact with the information systems.
• In Layman’s terms, User Interface (UI) is a series of pages, screens, buttons, forms, and
other visual elements that are used to interact with the device.
• Every app and every website has a user interface.
• User Interface (UI) Design is the creation of graphics, illustrations, and the use of
photographic artwork and typography to enhance the display and layout of a digital
product within its various device views.
• Interface elements consist of input controls (buttons, drop-down menus, data fields),
navigational components (search fields, slider, icons, tags), and informational
components (progress bars, notifications, message boxes).
History of User Interface (UI)
• The only user interface on early computers was a few buttons at the operator’s console.
Many of these early computers relied heavily on punched cards that were created using
keypunch machines to input data and programs.
• With the advent of the command line interface, which at first took the form of a largely
blank display screen with a line for user input, the user interface underwent an
evolution.
• Users navigated information exchanges with the computer using a keyboard and a series
of commands. This command line interface gave way to one where menus (lists of
options with text descriptions) became the norm.
Types of User Interface (UI)
There are several types of User Interface (UI) depending upon the interaction between
users and computers or electronic devices in different ways.
• GUI (Graphical User Interface): Visual user interface output (keyboard and monitor)
with a tactile user interface input.
• Menu Driven Interface: An UI that uses a menu of options to navigate a program or
website is known as a menu-driven UI. For instance, ATMs have user interfaces that are
menu-driven and simple to use.
• Form Based Interface: Form-based user interfaces provide a small number of options for
users to choose from when entering data into a program or application. For instance, a
device’s settings menu is form-based.
• Touch user interface: Haptic input is used by most smartphones, tablets, and other
devices with touch screens.
• Voice user interface: Auditory commands are used to communicate between humans and
machines. GPS, talk-to-text gadgets, and virtual assistants are a few examples.
 IMPORTANCE OF GOOD DESIGN
• A good user interface (UI) focuses on making user’s interactions simple and efficient.
• User would appreciate a website with user interface that leads them towards their task
in most engaging way.
• User Interface (UI) design focuses on thinking of a user, what they might need to do
when they visit website and ensure that the interface has elements that are easy to access
and understand.
• Being a UI designer, one need to understand the goals, skills, preferences and tendencies
of the user to make a better interface.
 IMPORTANCE OF GOOD DESIGN
• How you present your product matters the most. The presentation (the interface) of a
badly designed application or website can drive away the incoming users and leave a
bad impression on them. Navigation through a site can be made efficient and simple by
effective UI design.
• Great design is great business The color scheme, layout, graphics, tab and button
placement and other design elements determine how well the site/app communicates
visually with the user.
• At a given time, finding right thing at right place is essential Consistent navigation that
is equally easy to locate and browse through is basic need of any app/website. If
navigation is complex for a user to work, there is no way he would want to work on that
site/app.
As the User Interface can make or break the incoming users, it’s important to take care of
below points when designing a UI:
• Keep the interface simple: Clear and simple interface are best. Avoid unnecessary
elements. Best interfaces are invisible to user.
• Be consistent and use common UI elements: Using common elements, users feel more
comfortable and are able to get things done more quickly.
• Placement of items: To draw attention to most important pieces of information careful
placement of items is necessary. This can improve users readability and engage them.
• Use of right color: To direct attention towards something take advantage of color, light,
shade, contrast and texture. It’s important top make use of good color combination as a
bad color combination can easily distract or irritate a user.
• Anticipate: Make the user to work less by having pre-chosen fields, reduce the burden
on the user, anticipate the goals of the users who come to your site. The things which
can be mostly searched by the users are presented so that the users need not to work to
search for it.
 BENEFITS OF GOOD DESIGN
• Enhances User Experience. The primary goal of UI design is to deliver a great
experience to users. ...
• Improves Usability. ...
• Boosts User Interaction. ...
• Increases User Retention. ...
• Competitive Advantage. ...
• Enhances Productivity. ...
• Reduces Development Costs. ...
• Lowers Customer Support Costs.
 A BRIEF HISTORY OF THE HUMAN-COMPUTER INTERFACE
• Early computer (e.g. ENIAC, 1946) − Improvement in the H/W technology brought
massive increase in computing power. People started thinking on innovative ideas.
• Visual Display Unit (1950s) − SAGE (semi-automatic ground environment), an air
defense system of the USA used the earliest version of VDU.
• Development of the Sketchpad (1962) − Ivan Sutherland developed Sketchpad and
proved that computer can be used for more than data processing.
• Douglas Engelbart introduced the idea of programming toolkits (1963) − Smaller
systems created larger systems and components.
• Introduction of Word Processor, Mouse (1968) − Design of NLS (oNLine System).
• Introduction of personal computer Dynabook (1970s) − Developed smalltalk at
Xerox PARC.
• Windows and WIMP interfaces − Simultaneous jobs at one desktop, switching
between work and screens, sequential interaction.
 A BRIEF HISTORY OF THE HUMAN-COMPUTER INTERFACE
• Direct Manipulation introduced by Ben Shneiderman (1982) − First used in Apple
Mac PC (1984) that reduced the chances for syntactic errors.
• Computer Supported Cooperative Work (1990’s) − Computer mediated
communication.
• WWW (1989) − The first graphical browser (Mosaic) came in 1993.
 INTRODUCTION OF THE GRAPHICAL USER INTERFACE
• A system of interactive visual components for a computer or system software is called a
GUI (graphical user interface).
• GUI is the interface that uses graphical elements to let people interact as per requirement
with electronic devices including computers, laptops, tablets, and smartphones.
• In terms of human-computer interaction systems or technology, it’s a very important
component of software application programming since it substitutes actions for the text-
based commands in the system.
• Whether it’s a text file, object, image, or video as per requirement, it displays all types
of required content a user could envision in the system. Additionally, it can be featured
in the gaming platform where the resolution is visible or optimal.
 INTRODUCTION OF THE GRAPHICAL USER INTERFACE
Components of GUI
• Pointers: The pointer appears on the user’s screen as a marking symbol. The pointer
moves on to choose instructions and objects as per requirement.
• Icons: Icons allude to tiny visual representations of windows, documents, actions, and
other things on the display screen to simplify. A pointer and pointing device can be used
by the user to carry out the initial tasks for the overall processes.
• Pointing tool: At the initial stages, the pointing tool enables the user to select and move
the required pointer items on the screen, including a trackball or mouse. It is the most
beneficial tool in GUI.
• Desktop: The desktop is the screen that is contained within the icons and user beneficial.
 INTRODUCTION OF THE GRAPHICAL USER INTERFACE
Features of GUI
• The graphical user interface (GUI) is very easy to use and the user can modify and
simplify the requirements.
• The required software, documents, or a few relevant programs are reflected in the icons
on the user interface to control the overall processes properly.
• A graphical user interface (GUI) has several features as per requirement, such as tabs, a
menu, pointers, and various other types of things to simplify and process smoothly.
 INTRODUCTION OF THE GRAPHICAL USER INTERFACE
Advantages of GUI
• A graphical user interface (GUI) is basically seen as more intuitive for users than a text-
based command-line interface as per requirement, such MS-DOS or the Unix-like
operating system shell process.
• It is incredibly user-friendly and readily available to all and for novices, the user
interface is rather easy to understand and uncomplicated as per requirement.
• GUI represents the now-hidden lines of command with the required graphic elements.
• The end users must commit required instructions to memory for the software to function
properly.
 INTRODUCTION OF THE GRAPHICAL USER INTERFACE
Disadvantages of GUI
• An interface which is very much difficult to use will make the required tasks more
difficult for the user to complete and less effective overall processes.
• Gamers are still much affected negatively by a poor interface or surface system,
therefore it remains a problem for them to control the overall system.
 THE BLOSSOMING OF THE WORLD WIDE WEB
• The World Wide Web (WWW), often called the Web, is a system of interconnected
webpages and information that you can access using the Internet. It was created to help
people share and find information easily, using links that connect different pages
together.
• The Web allows us to browse websites, watch videos, shop online, and connect with
others around the world through our computers and phones.
• All public websites or web pages that people may access on their local computers and
other devices through the internet are collectively known as the World Wide Web or W3.
• Users can get further information by navigating to links interconnecting these pages and
documents. This data may be presented in text, picture, audio, or video formats on the
internet.
 THE BLOSSOMING OF THE WORLD WIDE WEB
• WWW stands for World Wide Web and is commonly known as the Web. The WWW
was developed by TimBerners lee in 1989.
• WWW is defined as the collection of different websites around the world, containing
different information shared via local servers(or computers).
• Web pages are linked together using hyperlinks which are HTML-formatted and, also
referred to as hypertext, these are the fundamental units of the Internet and are accessed
through Hypertext Transfer Protocol(HTTP).
• Such digital connections, or links, allow users to easily access desired information by
connecting relevant pieces of information. The benefit of hypertext is it allows you to
pick a word or phrase from the text and click on other sites that have more information
about it.
 THE BLOSSOMING OF THE WORLD WIDE WEB
Working of WWW
• A Web browser is used to access web pages. Web browsers can be defined as programs
which display text, data, pictures, animation and video on the Internet.
• Hyperlinked resources on the World Wide Web can be accessed using software
interfaces provided by Web browsers. Initially, Web browsers were used only for surfing
the Web but now they have become more universal.
• When users request web pages or other information, then the web browser of your
system request to the server for the information and then the web server provide
requested services to web browser back and finally the requested service is utilized by
the user who made the request.
THE BLOSSOMING OF THE WORLD WIDE WEB
 THE BLOSSOMING OF THE WORLD WIDE WEB
Features of WWW
• WWW is open source.
• It is a distributed system spread across various websites.
• It is a Hypertext Information System.
• It is Cross-Platform.
• Uses Web Browsers to provide a single interface for many services.
• Dynamic, Interactive and Evolving.
 THE BLOSSOMING OF THE WORLD WIDE WEB
Components of the Web
There are 3 components of the web:
• Uniform Resource Locator (URL): URL serves as a system for resources on the web.
• Hyper Text Transfer Protocol (HTTP): HTTP specifies communication of browser and
server.
• Hyper Text Markup Language (HTML): HTML defines the structure, organisation and
content of a web page.
 THE BLOSSOMING OF THE WORLD WIDE WEB
Advantages of the WWW
• The World Wide Web is one of the most popular used services over the internet.
• It is very helpful for learning and educational purposes.
• Anyone can get access to any information or can learn from them.
• It also provides the facilities for exchanging a huge amount of data.

Disadvantages of the WWW

• There are many unusual sites that provide wrong information related to any topic. It
should be our intellect to which site we are referring and considering it to be reliable.
• There are many spam and fraud emails that are there to cheat and misguide us.
• We waste our valuable time by chatting with friends.
 A BRIEF HISTORY OF SCREEN DESIGN
• While developers have been designing screens since a cathode ray tube display was first
attached to a computer, more widespread interest in the application of good design
principles to screens did not begin to emerge until the early 1970s, when IBM
introduced its 3270 cathode ray tube text-based terminal.
• It usually consisted of many fields with very cryptic and often unintelligible captions
A BRIEF HISTORY OF SCREEN DESIGN
A BRIEF HISTORY OF SCREEN DESIGN
 A BRIEF HISTORY OF SCREEN DESIGN
• It was visually cluttered, and often possessed a command field that challenged the user
to remember what had to be keyed into it.
• Ambiguous messages often required referral to a manual to interpret.
• Effectively using this kind of screen required a great deal of practice and patience.
• Most early screens were monochromatic, typically presenting green text on black
backgrounds.
• At the turn of the decade guidelines for text-based screen design were finally made
widely available and many screens began to take on a much less cluttered look through
concepts such as grouping and alignment of elements.
• User memory was supported by providing clear and meaningful field captions and by
listing commands on the screen, and enabling them to be applied, through function keys.
Messages also became clearer.
• These screens were not entirely clutter-free, however. Instructions and reminders to the
user had to be inscribed on the screen in the form of prompts or completion aids such as
the codes PR and Sc.
 A BRIEF HISTORY OF SCREEN DESIGN
• Not all 1980s screens looked like this, however. In the 1980s, 1970s-type screens were
still being designed, and many still reside in systems today.
• While some basic "design principles did not change, groupings and alignment, for
example ,Borders were made available to visually enhance groupings and buttons and
menus for implementing commands replaced function keys.
• Multiple properties of elements were also provided, including many different font sizes
and styles, line thicknesses, and colors.
• The entry field was supplemented by a multitude of other kinds of controls, including
list boxes, drop-down combination boxes, spin boxes, and so forth.
 A BRIEF HISTORY OF SCREEN DESIGN
• These new controls were much more effective in supporting a person's memory, now
simply allowing for selection from a list instead of requiring a remembered key entry.
• Completion aids disappeared from screens, replaced by one of the new listing controls.
Screens could also be simplified, the much more powerful computers being able to
quickly present a new screen.
• In the 1990s, our knowledge concerning what makes effective screen design continued
to expand.
• Coupled with ever-improving technology, the result was even greater improvements in
the user-computer screen interface as the new century dawned.
 THE GRAPHICAL USER INTERFACE
• A user interface is a collection of techniques and mechanisms to interact with
something.
• In a graphical interface the primary interaction mechanism is a pointing device of some
kind. This device is the electronic equivalent to the human hand. What the user interacts
with is a collection of elements referred to as objects.
• 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. All objects have
standard resulting behaviors.
 THE GRAPHICAL USER INTERFACE
Characteristics of Graphical User Interface:-
A graphical system possesses a set of defining concepts. Included are
1. Sophisticated visual Presentation
2. Pick-and click interaction
3. A restricted set of interface option
4. Visualization
5. Object orientation
 THE GRAPHICAL USER INTERFACE
Sophisticated visual Presentation:-
• Visual presentation is the visual aspect of the interface. It is what people see on the
screen.
• The sophistication of a graphical system permits displaying lines, including drawings
and icons. It also permits the displaying of a variety of character fonts, including
different sizes and styles.
• The display of 16 million or more colors is possible on some screens. Graphics also
permit animation and the presentation of photograph and motion video.
 THE GRAPHICAL USER INTERFACE
Pick-and click interaction
• Elements of a graphical screen upon which some action is to be performed must first
identified.
• The motor activity required of a person to identify this element for a proposed action is
commonly referred to as pick, the signal to perform an action as cue.
• The primary mechanism for performing this pick-and-click is most often the mouse and
its buttons. The user moves the mouse pointer to the relevant element (pick) and the
action is signaled (click).
• Pointing allows rapid selection and feedback. The hand and mind seem to work
smoothly and efficiently together.
• The secondary mechanism for performing these selection actions is the keyboard most
systems permit pick-and-click to be performed using the keyboard as well
 THE GRAPHICAL USER INTERFACE
A Restricted set of interface option
• The array of alternatives available to the user is what is presented on the screen or may
be retrieved through what is presented on the screen, nothing less, and nothing more.

Visualization
• Visualization is a cognitive process that allows people to understand Information that is
difficult to perceive .
 THE GRAPHICAL USER INTERFACE
Object orientation
• A graphical system consists of objects and actions. Objects are what people see on
screen. They are manipulated as a single unit.
• Objects can be composed of sub objects. For example, an object may be a document.
The document's sub objects may be a paragraph, sentence, word, and letter.
• A collection is the simplest relationship-the objects sharing a common aspect.
• A collection might be the result of a query or a multiple selection of objects. Operations
can be applied to a collection of objects.
 THE GRAPHICAL USER INTERFACE

• A constraint is a stronger object relationship. Changing an object in a set affects some

other object in the set.
• A document being organized into pages is an example of a constraint. A composite
exists when the relationship between objects becomes so significant that the aggregation
itself can be identified as an object.
• Examples include a range of cells organized into a spreadsheet, or a collection of words
organized into a paragraph.
• A container is an object in which other objects exist.
• Examples include text in a document or documents in a folder.
 THE WEB USER INTERFACE
• Web interface design is essentially the design of navigation and the presentation
of information. It is about content, not data.
• 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. First, its underlying
design language, HTML, was never intended for creating screens to be used by
the general population. Its scope of users was expected to be technical. HTML
was limited in objects and interaction styles and did not provide a means for
presenting information in the most effective way for people
 THE WEB USER INTERFACE
• Browser navigation retreated to the pre-GUI era. This era was characterized by a
"command" field whose contents had to be learned, and a navigational
organization and structure that lay hidden beneath a mostly dark and blank
screen.
• GUIs eliminated the absolute necessity for a command field, providing menus
related to the task and the current contextual situation. Browser navigation is
mostly confined to a "Back" and "Forward" concept, but "back-to where" and
"forward-to where" is often unremembered or unknown.
• Web interface design is also more difficult because the main issues concern
information Architecture and task flow, neither of which is easy to standardize.
• 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.
It is more difficult because users are ill defined, and the user's tools so variable in
nature
 THE WEB USER INTERFACE
Popularity of the web:-
• It allows people to control much of the display and the rendering of Web pages.
• Aspects such as typography and colors can be changed, graphics turned off, and
decisions made whether or not to transmit certain data over non secure channels
or whether to accept or refuse cookies.
• The number of Internet hosts has risen dramatically:
• In 1984, hosts online exceeded 1,000;
• In 1987, 10,000;
• In 1989,100,000,
• In 1990, 300,000;
• In 1992 hosts exceeded one million
• In 1993, Internet traffic was expanding at a 341,634 percent annual growth rate.
• In 1996, there were nearly 10 million hosts online and 40 million connected
people.
 THE WEB USER INTERFACE
GUI VERSUS WEB PAGE DESIGN
• GUI and Web interface design do have similarities. Both are software designs,
they are used by people, they are interactive, they are heavily visual experiences
presented through screens, and they are composed of many similar components.
• Significant differences do exist

CONCEPT GUI WEB

• User hardware variations limited
• User hardware characteristics well defined.
• Screens appear exactly as specified.
• User hardware variations enormous.
• Screen appearance influenced by hardware being used.
 PRINCIPLES OF USER INTERFACE DESIGN
• An interface must really be just an extension of a person. This means that
the system and its software must reflect a person's capabilities and respond
to his or her specific needs.
• 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.
• Finally, the system must be easy and fun to use, evoking a sense of pleasure
and accomplishment not tedium and frustration.
• 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, and a
separator in that it minimizes the possibility of the participants damaging
one another.
 PRINCIPLES OF USER INTERFACE DESIGN
• While the damage the user inflicts on the computer tends to be physical,
the damage caused by the computer is more psychological.
• Throughout the history of the human-computer interface, various
researchers and writers have attempted to define a set of general principles
of interface design.
• What follows is a compilation of these principles. They reflect not only
what we know today, but also what we think we know today.
• Many are based on research, others on the collective thinking of
behaviorists working with user interfaces.
• These principles will continue to evolve, expand, and be refined as our
experience with Gills and the Web increases.