Unit 5 Introduction to UI

Prepared By : Jigar Dave

What is UI?
UI stands for user interface. It is the bridge between humans and computers. Anything you interact with
as a user is part of the user interface. For example, screens, sounds, overall style, and responsiveness are
all elements that need to be considered in UI. A user interface involves the following four
components.
1. Navigational elements: Navigational elements help users navigate an interface. Examples of
navigational elements in UI include slide bars, search fields, and back arrows.
2. Input controls: On-page elements that enable users to input information are input controls. Buttons,
checkboxes, and text fields are all examples of input controls.
3. Informational components: Informational components are used to communicate information to the
user. A progress bar beneath a video or tutorial is an example of an informational component.
4. Containers: Containers organise content into easily digestible sections. Rather than listing every
subheading underneath a tab, a container element like an accordion menu may be used to hide or show
content.
What is UX?
UI design focuses on interaction design and the visual elements of an
application, UX design exists to satisfy user intent.
A UX designer’s primary goal is to get the user where they want to go. If the
user wants to find a list of services that a company offers, the UX designer
ensures a clear navigation path to access that information. The UI designer then
ensures the navigation path is efficient, visually pleasing, and effortless to use.
Conducting user research to identify any goals, needs, behaviours, and pain points involved
with a product interaction
Developing user personas based on target customers
Creating user journey maps to analyse how a customer interacts with a product
Building wireframes and prototypes to hone in on what the final product will look like
Performing user testing to validate design decisions and identify problems
Collaborating with stakeholders, UI designers, and developers
The Relationship Between UI and UX
Roles in UI / UX
 History of UI / UX
1960s – 1980s

Modern microwaves were the first things that needed any help related to computing power in the late 20th century.
After them, from the 1960s to 1980s, keyboards played an important part in human interaction with computers. It was
in the early 1980s; we started to see rapid development in UI innovation.

The 1980s

It was the time when GUI(Graphical User Interface) and mouses were in trend; Steve Jobs visited the famous Xerox Parc.
From here, he got the inspiration to discover the game-changer; Apple Macintosh. The game slowly started to change
when big companies like IBM and Compaq followed Apple to create their own mice.

In 1985, Microsoft introduced Windows 1.0, but it wasn’t until 1992 that it began to follow others to have its own GUI in
the form of Windows 3.1.

1994-1997

The invention of laptops and palm pilots came soon after with simplifying devices like keyboards and mice.

There were significant updates in GUI in the meantime, which served as the base for developments in Operating
Systems to make computer usage easier.
The 2000s

The 2000s was the era of smartphones which made computer UI design the hot topic in the market again. The huge
changes in the hardware side of this era are remarkable to this day which continue to be the inspiration behind all the
new discoveries.

In 2007, Apple came up with the best UI design so far for handheld devices. It was a touch-screen GUI that has proven
to be super functional with different features distributed as “apps”.

2011 -Today

The early 2010s had been quite a time for everything digital going under significant renovations. Innovations like voice
assistants started with Apple again as its Siri had served as an inspiration for Google Now (2012) and Amazon Alexa
(2014), which are creating wonders today.

UI Design has made its way into every field like Gaming, Architecture, Engineering, etc., which need technology to stay
important in this competitive world.
 Key principles of UI design
An easy way to recall the fundamental principles of UI design is to learn the four c’s:
Control: The users should be in control of the interface.
Consistency: Use common elements to make your UI predictable and easy to navigate,
even for novice users.
Comfortability: Interacting with a product should be an effortless, comfortable
experience.
Cognitive load: It’s critical to be mindful of bombarding users with content. Be as clear
and concise as possible.
Interface Conventions
 Approaches to Screen Based UI
UI screens are critical in communicating a brand’s message and the application’s functionality. A well-designed UI screen
can improve a user’s experience while reducing the learning curve in navigating the application. When users can easily and
efficiently interact with an application, they are likely to continue using it, enhancing brand loyalty.

Tips for creating effective UI design screens

Keep it simple: Avoid cluttering the screen with unnecessary design elements; instead, focus on what is essential to the
user’s needs
.
Consistency: Keep the design elements consistent throughout the design to make the application feel cohesive and
seamless. Define a design system and stick to defined frameworks.

Navigation: Make sure navigation is intuitive and easy to understand; users should be able to find what they need quickly.

Typography and color: Use typography and color to guide users’ attention to the essential elements of the screen,
ensuring they find what they need promptly.
UI trends to keep in mind

As with any design field, UI design screens have trends that come and go. Here are a few
UI trends to keep in mind to ensure your designs stay modern and effective:

Flat design: A minimalist style that has been popular for several years.
Dark mode: It provides a dark background to reduce eye strain, making it an excellent
option for users who use the application at night.
Asymmetric design: A trend that involves playing with layout and breaking the
traditional symmetrical design to create unique and eye-catching designs.
How to create effective UI design screens?
1. Understand your users

Conduct thorough user research to understand your target audience’s preferences, behaviors, and needs. Identify
user personas and tailor your design to meet their expectations.

2. Establish clear objectives

Clearly define the objectives of your UI screens. What actions do you want users to take? Understanding the
purpose helps in designing screens that support those goals.

3. Keep it simple

Avoid unnecessary complexity. Simplicity in design makes it easier for users to understand and navigate the
interface. Focus on clarity and minimalism.

4. Consistent design

Maintain consistency in design elements such as colors, fonts, and button styles across all screens. Consistency
enhances the overall user experience.
5. Prioritize information hierarchy

Organize information logically with a clear hierarchy. Essential elements should be more prominent, guiding users through the
interface intuitively.

6. Intuitive navigation

Design a seamless user flow that aligns with the user’s natural expectations. Use familiar navigation patterns and minimize the
learning curve.

7. Responsive design

Ensure your UI is responsive and works well on different devices and screen sizes. Responsive design contributes to a positive
user experience across various platforms.

8. Provide feedback

Use interactive elements such as buttons, hover effects, transitions, and error messages to provide immediate feedback to
users. Feedback enhances the user’s understanding of their actions.

9. Use clear CTAs

Highlight actionable elements with well-defined CTAs (Call-to-Action). Make it easy for users to understand what steps they
need to take.
10. Optimize load times

Optimize the performance of your UI design screens. Fast load times contribute to a positive user experience and
prevent frustration.

11. Typography matters

Choose fonts that are easy to read. Pay attention to font size, line spacing, and contrast. Typography should enhance, not
hinder, the user’s ability to consume information.

12. Visual hierarchy

To guide users’ attention, create a visual hierarchy using size, color, and placement. Emphasize essential elements and
de-emphasize less critical ones.

13. Accessibility

Ensure your UI is accessible to users with different abilities. Consider color contrast, text size, and navigation for users
with disabilities.

14. User testing

Conduct user testing throughout the design process. Gather feedback and iterate on your design to address any usability
issues.
15. Stay updated

Stay informed about current design trends and innovations. While not every trend may suit your project, being aware keeps your
design contemporary.
Formal Elements of Interface Design

Link
UI Design Process
Step 1: User research

Step 2: Define objectives

Step 3: Wireframing

Step 4: Visual design

Step 5: Prototyping

Step 6: Testing and iteration

Step 7: Development handoff

Visual Communication design component in Interface Design
Visual communication is the use of images, icons, colors, typography, and other elements to convey information
and emotions in a user interface (UI) design. It can enhance the usability, aesthetics, and accessibility of a UI, as
well as create a consistent and memorable brand identity.

1 Know your audience

2 Define your message
3 Choose your elements
4 Test and iterate
5 Learn from examples
6 Experiment and have fun