Lecture 2:

User Interface Design Process

User Interface Design
Dr. Mohamed Saied Amer
Outlines

 Introduction
 UI Design process steps
 Benefits of good UI design.
 Mistakes to avoid in UI design.
Introduction

The process of designing an interface can be

divided into a number of stages.
Starting with the setting of the design objective, then
Perform user research and know your users,
Emphasize your users by define scenarios to see what
users want to achieve.
Introduction

 Starting from a blank artboard and ending up with final

high-fidelity UI designs requires a variety of different skills
and knowledge.
 Sometimes it's hard to know if you should start with a
sketch, jump right into wireframes or skip to final designs.
 It's important to keep in mind that in order to make your
User Interface designs functional and useable, you'll
need to start with good, insightful user research and
data.
UI Design Process
Step 1: Context and user recognition

 Identify the ways of products application and

convenience to the selected viewers.
 Know the grading of goals and the performance option
for gathering selected viewers goals.
 Ranking the functionality allocate on how good they
help to reach the goal.
 Considerations of the business and functionality related
limitation
 Choice of best products interface, allowing to reach the
main business goal of the assignment.
Step 2: Navigational and systemic
interface design
Designing plots sketch the ‘’user-product’’
interplay in order to reach the goal.
The grading of the scheme by the importance,
dependence on the usage frequency and the
client’s role.
The growth of the information architecture and
the navigation interface design giving the best
functionality content and user interactivity plot.
Step 3: Distributional design of
interface
The layout design of the pages which must be
present on the screen.
Such design meets the needs toward the
navigation, graphics, functional and text
element of the screen forms the pages.
The needs of the question meets the standards
of the advantage of checklist.
Step 4: Visual interface design

 In UI Design Process, we design the creative visual

elements of the interface to meet the brand standards
and identity of the company, such as style, colour, fonts,
graphics solutions.
 The designing of the icons and the graphic symbols.
 The design of the screen forms the key screen of content
design.
Step 5: Products prototype design

 Creating the work model for the user and combination

of arranging the text is a prototype testing of products
model on the engineering stage creates more needs
towards functionality and user interface to the future
product.
Step 6: Testing usability of the prototype

 The experimental way to detect the user elements of the

product and to find the problems which are faced by
the users while the application is in usability testing. The
main aim of usability testing is to evaluate the usability of
the product.
 The methods of testing usability:
 Observation of users
 View of users
 Measurement of benchmark
Step 7: Wire framing

 Wire framing is a critical aspect of both the user

experience design process and the process of UI design.
 It lays the foundation for creating effective and visually
appealing user interfaces by enabling designers to
visualize the overall structure and layout of a digital
product.
 By determining the placement of key elements,
wireframing ensures a logical and intuitive flow for users.
Step 8: Specification of UI

 The record construction of the “specification of user

interface”, gives the outlook of the standards, structural
composition and design of the product visually
considering the endorsement on the bases of the
usability testing results.
Benefits of Good User Interface

 The user interface design is a part of the wider user experience process.
 UI design is concerned with the look and feel of the interface that the
user interacts with. The benefits of good UI are:
 Make a clear vision: Clarifying helps you to define precisely how to satisfy
the needs and expectations of the audience.
 User confidence: The best UI design creates the prospective confidence in
your user and the brand. If the work or the element won’t work properly or
looks poor-quality. They will interpret this as a direct reflection of your
company.
 Simplify everything: Involving in your website or web application should be
delightful, not a burden. Simplify the process.
 Creating your mark: Being visionary is very essential in design making. Due
to incorrect assumptions of the user leads to poor online experience.
Not testing the website design enough

The following are the mistakes that we have to avoid in UI design:

 Do not implement a user-centered design. User's desires,
expectations, and the problems should all be considered when
designing. Avoid doing, so it may have a negative effect on your
company and lead to its demise.
 Excessive use of dynamic effects: Using a lot of animation effects is
not always a sign of a good design. As a result, limiting the use of
decorative animations will help to improve the user experience.
 Preparing so much in advance: Particularly in the early stages of
design, we just need to have the appropriate image of the design
in our heads and get to work. However, this strategy is not always
successful. At times, exploring other sources can show some
unexpected results.
Mistakes to Avoid in UI Design

Not testing the website design enough:

 Designing a website can be a fun and creative process, but it is
critical that product designers thoroughly test their graphical user
interfaces to avoid any pitfalls in interaction design.
 Creativity can get in the way of the user experience if designers do
not test prototypes and go for shortcuts.
Confusing navigation:
 Confusing navigation can be a website killer. Consumers don’t
want to spend most of their time trying to figure out what page
matches their needs and they will leave your website quickly if they
decide it’s too confusing.
How to improve UI design?

 Start with a clear understanding of the project's goals and target

audience.
 Conduct research to identify any existing user interfaces or designs that
are similar to the project. This will help you understand what works well
and what can be improved upon.
 Create wireframes or mockups of the user interface. These visual
representations of the interface will help you identify any potential issues
or areas for improvement.
 Iterate on the design. This may involve making changes to the layout,
color scheme, or overall aesthetic based on feedback from users or
stakeholders.
 Test the user interface with real users. This will help you identify any
usability issues or areas where the interface can be improved.
How to improve UI design?

 Refine the design based on the test results. This may involve making changes to
the layout, color scheme, or overall aesthetic.
 Create a style guide. This document will provide guidance on the visual
elements of the user interface, such as color palettes, typography, and
iconography.
 Develop the final user interface. This may involve working with a front-end
developer or a team of developers to implement the design using HTML, CSS,
and JavaScript.
 Test the final user interface again to ensure that all issues have been resolved
and that the interface is user-friendly and visually appealing.
 Launch the user interface and gather feedback from users. This feedback can
be used to make improvements to the interface in the future.
Thanks
Any questions?