Unit-1 Introduction

Importance of user Interface

• User interface (UI) design defines how an individual user interacts
with a digital information system.
• It is essentially a series of visual elements that a user uses to interact
with the digital device.
• The goal of any UI design is to make the users interaction with the
device and the interface as smooth as possible.
• UI and user experience (UX) design are two sides of the same coin
and both of them are incredibly crucial to the success of any digital
product.
Importance of user Interface
• There are a few basic characteristics of good UI such as appealing graphics,
proper spacing of icons, appropriate functionality when required, lightweight UI
elements, organized layouts, consistency across elements, proper screen fit, and
good typography among other features.
• The goal of user interface design is to make digital interaction as simple, fluid,
intuitive and efficient as possible. Thus, it must anticipate needs and ensure
ease of access, comprehension and use, maximising the user experience.
• The more in-depth knowledge about the target audience, the more efficient the
interface will be as it will be designed considering the profile and needs of its
users.
• Thus, the interface must always have a user-centred design, whether it is a
website, an app or software.
Importance of user Interface
• A good user interface design should be imperceptible. The focus of
the UI is to ensure simple and quick access to content that the user is
looking for. Therefore, the interface should not be a barrier, but a
path.
• UI builds customer confidence
• Good UI reduces confusion
• Consistency in UI design is critical
• Good UI increases customer conversion
Definition of UI
• The user interface (UI) is the point of human-computer interaction
and communication in a device. This can include display screens,
keyboards, a mouse and the appearance of a desktop. It is also the
way through which a user interacts with an application or a website.
• The growing dependence of many businesses on web applications
and mobile applications has led many companies to place increased
priority on UI in an effort to improve the user's overall experience.
Types of user interfaces

• graphical user interface (GUI)

• command line interface (CLI)
• menu-driven user interface
• touch user interface
• voice user interface (VUI)
• natural language user interface
Importance of a Good Design
• Strive for consistency by utilizing familiar icons, colors, menu hierarchy, call-
to-actions, and user flows when designing similar situations and sequence of
actions. Standardizing the way information is conveyed ensures users are able
to apply knowledge from one click to another; without the need to learn new
representations for the same actions. Consistency plays an important role by
helping users become familiar with the digital landscape of your product so
they can achieve their goals more easily.
• Enable frequent users to use shortcuts. With increased use comes the
demand for quicker methods of completing tasks. For example, both
Windows and Mac provide users with keyboard shortcuts for copying and
pasting, so as the user becomes more experienced, they can navigate and
operate the user interface more quickly and effortlessly.
Importance of a Good Design
• Offer informative feedback. The user should know where they are at and
what is going on at all times. For every action there should be appropriate,
human-readable feedback within a reasonable amount of time. A good
example of applying this would be to indicate to the user where they are at
in the process when working through a multi-page questionnaire. A bad
example we often see is when an error message shows an error-code
instead of a human-readable and meaningful message.
• Design dialogue to yield closure. Don’t keep your users guessing. Tell them
what their action has led them to. For example, users would appreciate a
“Thank You” message and a proof of purchase receipt when they’ve
completed an online purchase.
Importance of a Good Design
• Offer simple error handling. No one likes to be told they’re wrong,
especially your users. Systems should be designed to be as fool-proof
as possible, but when unavoidable errors occur, ensure users are
provided with simple, intuitive step-by-step instructions to solve the
problem as quickly and painlessly as possible. For example, flag the
text fields where the users forgot to provide input in an online form.
• Permit easy reversal of actions. Designers should aim to offer users
obvious ways to reverse their actions. These reversals should be
permitted at various points whether it occurs after a single action, a
data entry or a whole sequence of actions.
Importance of a Good Design
• Support internal locus of control. Allow your users to be the initiators
of actions. Give users the sense that they are in full control of events
occurring in the digital space. Earn their trust as you design the
system to behave as they expect.
• Reduce short-term memory load. Human attention is limited and we
are only capable of maintaining around five items in our short-term
memory at one time. Therefore, interfaces should be as simple as
possible with proper information hierarchy, and choosing recognition
over recall.
The Benefits of Good Design

• Clarify your vision

• Make your mark
• Strike the right balance
• Customer confidence
• Navigation is a breeze
• Everything will be exactly where it should be
• Interaction acknowledgement
• Optimal on-screen experience
The Benefits of Good Design

• Capitalise on a clear competitive advantage

• Retain that custom
• Reduced support costs
• Development times are impressive
• Design for a variety of users
• Simplify everything
A brief history of Screen design
• A brief history of Computer Screen Design will be of great interest to web designers
from all cities and countries. 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.
The 3270 was used in myriad ways in the office, and company-specific guidelines for
good screen design occasionally began to surface (e.g., Galitz and DiMatteo, 1974).
• Typically, however, design at this time period had little to guide it because it was
driven by hardware and telephone line transmission issues. A1970's screen usually
consisted of many fields with very cryptic and often unintelligible captions. 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.
A brief history of Screen design
• 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.
Graphical User Interface
• A graphical user interface (GUI) is a type of user interface through which users
interact with electronic devices via visual indicator representations.
• The graphical user interface, developed in the late 1970s by the Xerox Palo Alto
research laboratory and deployed commercially in Apple’s Macintosh and
Microsoft’s Windows operating systems, was designed as a response to the
problem of inefficient usability in early, text-based command-line interfaces for the
average user.
• Graphical user interfaces would become the standard of user-centered design in
software application programming, providing users the capability to intuitively
operate computers and other electronic devices through the direct manipulation of
graphical icons such as buttons, scroll bars, windows, tabs, menus, cursors, and the
mouse pointing device. Many modern graphical user interfaces feature
touchscreen and voice-command interaction capabilities.
How Does a Graphical User
Interface Work
• Graphical user interface design principles conform to the model–view–controller software
pattern, which separates internal representations of information from the manner in
which information is presented to the user, resulting in a platform where users are shown
which functions are possible rather than requiring the input of command codes. Users
interact with information by manipulating visual widgets, which are designed to respond in
accordance with the type of data they hold and support the actions necessary to complete
the user’s task.

The appearance, or “skin,” of an operating system or application software may be

redesigned at will due to the nature of graphical user interfaces being independent from
application functions. Applications typically implement their own unique graphical user
interface display elements in addition to graphical user interface elements already present
on the existing operating system. A typical graphical user interface also includes standard
formats for representing graphics and text, making it possible to share data between
applications running under common graphical user interface design software.
The elements of a GUI

To make a GUI as user-friendly as possible, there are different elements and objects that the user use to
interact with the software. Below is a list of each of these with a brief description.
• Button - A graphical representation of a button that performs an action in a program when pressed
• Dialog box - A type of window that displays additional information, and asks a user for input.
• Icon - Small graphical representation of a program, feature, or file.
• Menu - List of commands or choices offered to the user through the menu bar.
• Menu bar - Thin, horizontal bar containing the labels of menus.
• Ribbon - Replacement for the file menu and toolbar that groups programs activities together.
• Tab - Clickable area at the top of a window that shows another page or area.
• Toolbar - Row of buttons, often near the top of an application window, that controls software
functions.
• Window - Rectangular section of the computer's display that shows the program currently being used.
The Concept of Direct Manipulation
• Direct manipulation is an interaction style in which the objects of
interest in the UI are visible and can be acted upon via physical,
reversible, incremental actions that receive immediate feedback.
• Ben Shneiderman first coined the term “direct manipulation” in the
early 1980s, at a time when the dominant interaction style was the
command line. In command-line interfaces, the user must remember
the system label for a desired action, and type it in together with the
names for the objects of the action.
The Characteristics of Direct
Manipulation
• Continuous representation of the object of interest
• Physical actions instead of complex syntax
• Continuous feedback and reversible, incremental actions
• Rapid learning
Graphical System Characteristics
• Sophisticated Visual Presentation
• Pick-and-Click Interaction
• Restricted Set of Interface Options
• Visualization
• Object Orientation
Principles of User Interface
Visibility
• It might sound straightforward, but in order to interact with something,
users need to see it first. This is the visibility principle.
• But what does that mean in practice?
• Well, applying the visibility principle requires optimising the elements of
the design that help users fulfil their goals. You can’t make everything
visible, as your interface will become too cluttered. What separates the
wheat from the chaff is the ability to identify those key elements that’ll get
the user to where they need to be.
• Ultimately, users should be able to clearly see how and where they can
achieve their goal.
Principles of User Interface
Consistency
• The consistency principle refers to how easy it is for users to make sense of what they
see on your interface.
• In a nutshell, it means keeping all the repeating elements of your design the same,
whether it’s colour, typography, function or location.
• For example, does your menu bar stay in the same position on different pages? Is all
your typography consistent across the interface? Factors like these contribute to a
positive user interaction.
• Applied through elements, visual design or interaction, consistency builds trust and
helps users feel in control of their experience.
• When consistency is applied correctly, users will understand what all the elements of
the design will look like, where they are located and how they can interact with them.
Principles of User Interface
Learnability
• The third principle of UI design is learnability.
• Users must be able to understand products and design systems easily
and quickly. As a designer, it’s your job to create an interface that
facilitates this, so users can reach their goals without needing further
help.
Principles of User Interface
Predictability
• Predictability refers to a user’s ability to forecast what will happen
next.
• If a user can predict the outcome of a certain action before they do it,
then you’ve successfully applied predictability.
• Without it, users won’t know what to do with an interface. And if they
can’t figure out what actions to take to reach their goal, they probably
won’t stick around long enough to figure it out.
Principles of User Interface
Feedback
• The fifth user interface design principle is feedback. The feedback
principle requires designers to communicate whether the user has
completed an action correctly or incorrectly.
• Feedback is important, as users need to know whether they are moving
closer to their goal. By using visual signals, designers can guide users
through their experience with an interface.
• Most importantly, feedback should be clear and meaningful, so that
users can interpret it in the desired way. For example, using a tick when
an action has been completed successfully is a globally recognised way
of saying “that’s correct!”.