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
