Principles of UI and UX Design

PIXD5112

“People ignore design

that ignores people.”
– Frank Chimero

Lecturer: Brendan v.d Merwe

Lecture 1
Email: [email protected]
 Objectives

• Administration: Downloading the resources, A glance at the learning guide

• Today:
Introduction - What is UX Design and UI Design?

- Differentiate between User Experience Design and User Interface Design.

- Explain the dynamics between UX and UI Design.

• Activities (two) to complete and an ICE task

https://ezproxy.iielearn.ac.za/login
?url=https://search.ebscohost.com
/login.aspx?direct=true&db=nlebk
&AN=1135545&site=ehost-live&s
cope=site&ebv=EB&ppid=pp_iv
https://www.interaction-design.org
/literature/topics/user-centered-de
sign

https://uxdesign.cc/how-to-solve-pro
blems-applying-a-uxdesign-designthi
nking-hcd-or-any-design-process-fro
m-scratch-v2-aa16e2dd550b
https://ezproxy.iielearn.ac.za/login?url=https://search.ebscohost.co
m/login.aspx?direct=true&db=nlebk&AN=1135545&site=ehost-live
&scope=site&ebv=EB&ppid=pp_iv
Source: Filipiuk, M. 2021. UI Design Principles - Learn to create beautiful and usable interfaces from scratch. [eBook].
Source: Filipiuk, M. 2021. UI Design Principles - Learn to create beautiful and usable interfaces from scratch. [eBook].
Source: Filipiuk, M. 2021. UI Design Principles - Learn to create beautiful and usable interfaces from scratch. [eBook].
 Source: Filipiuk, M. 2021. UI Design Principles - Learn to create beautiful and usable interfaces from scratch. [eBook].

Both of these screens do the exact same thing. Which one do you like more?
Source: Filipiuk, M. 2021. UI Design Principles - Learn to create beautiful and usable interfaces from scratch. [eBook].

When presenting your work, which one do you like more?

A day in the life of a UX Designer
What is UX Design and UI Design?

LO1: Differentiate between User Experience Design and User Interface Design.

LO2: Explain the dynamic between UX and UI Design.

PM: Part 1 – Lessons 1, 3 and 4

UX stands for “user experience.” The end user’s interaction with a product.

When we define UX, we’re referring to the interactive elements and responsive design of the
user journey.

• What happens when they click this button?

• Is there a smooth transition from this page to another?
• Are there rigid points or problems with the way a user navigates on the page?

The primary goal of UX design is to improve the user experience.

Source: Marsh, J. 2015. UX for Beginners: A crash course in 100 lessons. Sebastopol: O’Reilly [eBook]
User experience (UX) design is the process used
to create products that provide meaningful and
relevant experiences to users.

This involves the design of the entire process of

acquiring and integrating the product, including
aspects of branding, design, usability and
function.

Source: Marsh, J. 2015. UX for Beginners: A crash course in 100 lessons. Sebastopol: O’Reilly [eBook]

When using a website or app, what would you consider to

be a “good” user experience?
The goal of a UX designer is to make users effective.
What is the difference between a UX and UI Designer?

UI focuses on the technical components that allow users to interact with websites and
mobile apps.
UI refers to the screens, buttons, toggles, icons, and other visual elements that you interact
with when using a website, app, or other electronic device.

UX design emphasizes the user’s overall perception of their experience with the software.
UX refers to the entire interaction you have with a product, including how you feel about the
interaction.

Source: Marsh, J. 2015. UX for Beginners: A crash course in 100 lessons. Sebastopol: O’Reilly [eBook]
Example: mobile app aspect of UI and UX design.

An app user interacting with the design elements falls in the user interface (UI) design
category. It could involve the ability for users to navigate on the screen, click on buttons,
read content etc.
If a button is in an awkward location or the menu color is too similar to a background color,
that’s all related to the product’s interface.

UX design is all about the final takeaway of your target users. If the user’s experience is
compromised due to design flaws, then the UX designer needs to make changes.

Source: Marsh, J. 2015. UX for Beginners: A crash course in 100 lessons. Sebastopol: O’Reilly [eBook]
Looking at Google.
The home screen has a simple design, making it really easy for users to use the search engine.
This is an example of a great UI design.

Let's say that the search engine took 10-20+ seconds to load results.
This would hinder the user experience and therefore fall into the UX (user experience) category.
Source: Marsh, J. 2015. UX for Beginners: A crash course in 100 lessons. Sebastopol: O’Reilly [eBook]
Know Thyself

There are two things you need to be aware of, about yourself, before you can start
understanding users well:

• You want things that don’t matter to users.

• You know things that don’t matter to users.

Source: Marsh, J. 2015. UX for Beginners: A crash course in 100 lessons. Sebastopol: O’Reilly [eBook]
Empathy: Want What They Want
Do research. Talk to users. Study the data.

When you truly understand a problem, it becomes your problem, emotionally. That’s
empathy. You will feel it.

A good solution will excite you, because you relate to the users.

Ask yourself:
• If you have to choose between a feature for your users or having this design in your
portfolio, what will you choose?
• If users don’t like your design, what would probably be the reason?
• Have you actually tried the software, or are you just clicking “next” to get through it?

Source: Marsh, J. 2015. UX for Beginners: A crash course in 100 lessons. Sebastopol: O’Reilly [eBook]
You Know Too Much
Are you assuming users will click it just because it exists? (They won’t.)

Are you judging a feature based on the time it will take to build it or the value to the user?

If a user only had a few clicks to find what they want, would this design be your best bet?

Source: Marsh, J. 2015. UX for Beginners: A crash course in 100 lessons. Sebastopol: O’Reilly [eBook]
 Source: Filipiuk, M. 2021. UI Design Principles - Learn to create beautiful and usable interfaces from scratch. [eBook].

Before using this app all you needed to do was to create an account on Domino’s
website and choose your favorite pizza, payment method and delivery address.

Once that was done, whenever you opened the app, your pizza was automatically
ordered.
Source: Marsh, J. 2015. UX for Beginners: A crash course in 100 lessons. Sebastopol: O’Reilly [eBook]
A good design communicates three things:

1. What is this?
2. What is the benefit for the user?
3. What should they do next?
“What Is This?”
It is always a good idea to have a title or an image (or
both) that answers the question: “what is this?”

“What’s in It for Me?”

What can the user gain? It is better to show users what they will get, rather than tell them. You can use a
video, demo, example images, free trial, sample content, testimonials, or several of those things.

“What Do I Do?”
If the user understands what it is and they are motivated to know or see more, their next action should be
obvious in your design. There is always a “next” step. It’s up to you to figure out what the users might need, and
tell them how to get it.

Source: Marsh, J. 2015. UX for Beginners: A crash course in 100 lessons. Sebastopol: O’Reilly [eBook]
• In what ways do the Apple website and Steers’ websites differ – how many differences can you spot?

• Why do you think the two sites differ so completely?

• Do you think the same users visit Apple’s and Steers’ websites? Why/Why not?
• Are they visiting the websites for the same reasons?
• How do you think their reasons for visiting differ?
https://www.interaction-design.org/literature/topics/ux-design
https://www.interaction-design.org/literature/topics/ui-design
https://ezproxy.iielearn.ac.za/login?url=https://search.ebscohost.co
m/login.aspx?direct=true&db=nlebk&AN=1135545&site=ehost-live
&scope=site&ebv=EB&ppid=pp_iv
Answers:
ICE TASK 1
Due Date: 29/07/2024
On Brightspace complete Micro-assessment

o: te :
t le
Go m p
Co
ICE TASK 1
Due Date: 29/07/2024
On Brightspace complete Micro-assessment
List of References:
Filipiuk, M. 2021. UI Design Principles - Learn to create beautiful and usable interfaces from scratch. [eBook].

Marsh, J. 2015. UX for Beginners: A crash course in 100 lessons. Sebastopol: O’Reilly [eBook] Available at:
https://ezproxy.iielearn.ac.za/login?url=https://search.ebscohost.com/login.aspx?direct=true&db=nlebk&AN=1135545&site=eho
st-live&scope=site&ebv=EB&ppid=pp_iv [Accessed 19 July 2022].