Lecture 1 :

Introduction
User Interface Design
Dr. Mohamed Saied Amer
Outlines

 Introduction
 Design Principles
 Basic Factors
 Types of user interfaces
 Example of user interfaces
 Applications of interfaces
 Components and layout
Where Do I Start?

 To make a design. It may seem like there is a mountain of stuff to learn, and
it’s not easy to know where to jump in. But you have to start somewhere.
 Your particular starting point will no doubt depend on your background
and goals.
 There are many levels of involvement in user interface design, from building
a small site for yourself to making it a full-blown career.
What is User Interface?

User interface (UI) is the front-end application view to which user interacts in
order to use the software.
The software becomes more popular if its user interface is:
 Attractive
 Simple to use
 Responsive in short time
 Clear to understand
 Consistent on all interface screens
Aim of User Interface Design

 The aim of user interface design is to make user experiences as easy as

possible while still being successful in achieving user goals.
 A well-designed user interface design makes it easier to complete the task
in hand without drawing needless attention to itself.
 Graphic design and typography are used to influence its utility by influencing
how the consumer interacts with it and improving the design's aesthetic appeal.
 Design aesthetics can increase or decrease the user's ability to use interface's
functions.
The principles of user interface design

 The structure principle:

Design should organize the user interface purposefully, in meaningful and
useful ways based on clear, consistent models that are apparent and
recognizable to users, putting related things together and separating
unrelated things, differentiating dissimilar things and making similar things
resemble one another.
 The simplicity principle:
The design should make simple, common tasks easy, communicating clearly
and simply in the user's own language, and providing good shortcuts that are
meaningfully related to longer procedures.
The principles of user interface design
(cont.)
 The visibility principle:
The design should make all needed options and materials for a given task
visible without distracting the user with extraneous or redundant information.
 The feedback principle:
The design should keep users informed of actions or interpretations, changes of
state or condition, and errors or exceptions that are relevant and of interest to
the user through clear, concise, and unambiguous language familiar to users.
The Basic factors of Proper UI

 A professional looking UX depends on these four factors:

 Spacing and Positioning
 Size of components
 Grouping of components
 Intuitiveness
The Basic factors of Proper UI

Spacing and Positioning

 Spacing between two controls is
important.
 The figure demonstrates a poorly
designed User Information entry form
 The top two text boxes are too close.
 The list under them is too far away.
 There is a lot of unused room on the
form.
The Basic factors of Proper UI

Size of components
 The same considerations apply to size. When
you drag a button from the toolbox on to
your form—it has the perfect height and
width.
 In the following image, you can see three
buttons. The first button is the most
recommended size and is the size created
by default when dragged (or double-
clicked) from the toolbox.
 Sometimes extra text requires you to make
the button larger.
The Basic factors of Proper UI

Grouping of components
 Applied on an application contains
many controls.
 Function-based or categorized grouping
is done best by Tab controls.
 Group controls inside Group controls are
not recommended.
The Basic factors of Proper UI

Intuitiveness
 Is that tells the user to knows what the controls do.
 An important topic in intuitive design is color-coding.
 For example, the placement of the OK and Cancel buttons is so uniform
and well placed in our minds that if a dialog holds these buttons in a
reverse sequence.
Application of UI

 Interface design is used in various projects, including

computer systems, commercial planes, automobiles,
and websites designs;
 Application design UI UX is the process and techniques
used to create an effective user interface for a software
application.
 It includes the development of visual elements, layouts,
and interactions that make using the application easy
and satisfying for users.
Types of user interfaces

 Command Line Interface (CLI)

 Graphical User Interface (GUI)
 Menu-driven user interface
 Touch user interface (TUI)
 Voice user interface (VUI)
 Form-based user interface
 Web User Interface (Web design)
Types of user interfaces

 Command Line Interface (CLI)

It is a text-based user interface (UI) used to run
programs, manage computer files and interact with the
computer.
Types of user interfaces

 Graphical User Interface (GUI)

 In the Graphical user interface, the users can interact with visual representations
on the digital control panels.
 Example of GUI, a computer's desktop.
 Types of user interfaces

 Menu-driven user interface

 It is a type of user interface where users
interact with a program or system through a
series of menus.
 These menus present options or commands
that the user can select, typically through
the use of a pointer, keyboard, or
touchscreen, simplifying the interaction with
the system.
 Or even provide a navigation to another
pages or interfaces.
Types of user interfaces

 Touch user interface (TUI)

It is a computer-pointing technology based
upon the sense of touch (haptics).
Whereas a graphical user interface (GUI)
relies upon the sense of sight, the TUI enables
not only the sense of touch to innervate and
activate computer-based functions, it also
allows the user, particularly those with visual
impairments, an added level of interaction
based upon tactile or Braille input.
Types of user interfaces

 Voice User Interface (VUI)

In, Voice-controlled interfaces (VUIs), users
can interact with the help of the voice.
Example of Voice-Controlled Interfaces
(VUIs), Alexa on Amazon devices, and Siri
on iPhone.
Types of user interfaces

 Form-based user interface

Uses text-boxes, drop- down menus,
text areas, check boxes, radio boxes
and buttons to create an electronic
form which a user completes in order
to enter data into a system.
Types of user interfaces

 Web User Interface:

A Web user interface or Web app allows the user to interact
with content or software running on a remote server
through a Web browser.
Object-oriented user interface OOUI

 Reflexive user interfaces where the users control and redefine the entire system
via the user interface alone, for instance to change its command verbs.
Typically this is only possible with very rich graphic user interfaces.
 Tangible user interfaces, which place a greater emphasis on touch and physical
environment or its element.
 Text user interfaces are user interfaces which output text, but accept other form
of input in addition to or in place of typed command strings.
 Voice user interfaces, which accept input and provide output by generating
voice prompts. The user input is made by pressing keys or buttons, or responding
verbally to the interface.
 Natural-Language interfaces - Used for search engines and on webpages. User
types in a question and waits for a response.
 Zero-Input interfaces get inputs from a set of sensors instead of querying the user
with input dialogs.
Examples of user interfaces

Some examples of user interfaces include:

 Application Login
 Application registration
 Remote control
 Virtual reality
 ATMs
 Mobile phones
 Website template
Interface Components

Users have become aware of interface components acting in a certain

manner, so try to be predictable and consistent in our selections and their
layout. It may involves:
 Input Controls: Input Controls involve buttons, toggles, dropdown lists,
checkboxes, date fields, radio buttons, and text fields.
 Navigational Components: Navigational components contain slider, tags,
pagination, search field, breadcrumb, icons.
 Informational Components: Informational Components contain tooltips,
modal windows, progress bar, icons, notification message boxes.
 Containers: Containers include accordion.
Layout Concepts

Navigation area
 The screen is often divided into three boxes:
 Navigation area (top)
 Work area (middle)
 Status area (bottom)
Work area
 Information can be presented in multiple areas
 Like areas should be grouped together

Status area
Content Awareness

 All interfaces should have titles

 Menus should show
 where you are
 where you came from to get there
 It should be clear what information is within each area
 Fields and field labels should be selected carefully
 Use dates and version numbers to aid system users
Aesthetics

 Interfaces need to be functional and inviting to use

 Avoid squeezing in too much, particularly for novice users
 Design text carefully
 Be aware of font and size
 Avoid using all capital letters
 Colors and patterns should be used carefully
 Test quality of colors by trying the interface on a black/white monitor
 Use colors to separate or categorize items
UI design tools
UX design tools Cost Features
Advanced drawing tools, auto layout,
Figma Starts for free styles, plugins and widgets, sketch import,
interactive prototypes
Auto-styling, supports new graphics
InDesign $20.99/month formats, task automation, duplicate
pages and spreads

Built-in spell check, color support, symbols,

Sketch $9/month styles, color variables, browser prototype
testing, plugins, multi-scale exports

Third-party integrations, fast prototyping,

Adobe XD $9.99/month collaboration capabilities, unlimited
prototypes and design specs

UI components and icons, drag and drop,

Balsamiq $9/month after free trial export files to .PNG or .PDF, keyboard
shortcuts, reusable symbols