PIXD5112_Lecture 2S

Principles of UI and UX Design
PIXD5112
“People ignore design

that ignores people.”
– Frank Chimero
Lecture 2
Objectives
• Administration: -
• Recap Activity: Introduction - What is UX Design and UI Design?

- Differentiate between User Experience Design and User Interface Design.
- Explain the dynamic between UX and UI Design.
• Today:
The Fundamental Elements of UX Design
- Discuss the notions of an application as a functional software interface and an application as digital information system.
- Distinguish between the fundamental elements of UX Design.
- Explain the dynamics between the various elements of UX Design.
• Activities to complete before the next lecture

https://www.interaction-design.org/literature/topics/ux-design
https://www.interaction-design.org/literature/topics/ui-design
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.
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.
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.
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.
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?
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?
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.
The Fundamental Elements of UX Design
LO3: Discuss the notions of an application as a functional software interface and an

application as digital information system.
LO4: Distinguish between the fundamental elements of UX Design.
LO5: Explain the dynamics between the various elements of UX Design.
PM: Part 1 – Lessons 2 and 6

1. Psychology
UX designers work with subjective thoughts and feelings a lot which can have an
impact on your design. It can make or break your results.
And sometimes the designer must ignore their own psychology.
Ask yourself:
– What is the user’s motivation to be here in the first place?
– How does this make them feel?
– How much work does the user have to do to get what they want?
– What habits are created if they do this over and over?
– What do they expect when they click this?
– Are you assuming they know something that they haven’t learned yet?
– Is this something they want to do again? Why? How often?
– Are you thinking of the user’s wants and needs, or your own?
– How are you rewarding good behavior?
Looking at the image above:
• What is your natural action when you see a door handle?

• What do you think will happen when you see a handle on a push door?
• How do you think that would influence the user’s experience?
2. Usability
If user psychology is mostly subconscious, usability is mostly conscious.
We want it to be so easy so that everyone, anyone, could use it.
Ask yourself:
– Could you get the job done with less input from the user?
– Are there any user mistakes you could prevent? (Hint: Yes, there are.)
– Are you being clear and direct, or is this a little too clever?
– Is it easy to find (good), hard to miss (better), or subconsciously expected (best)?
– Are you working with the user’s assumptions or against them?
– Have you provided everything the user needs to know?
– Could you solve this just as well by doing something more common?
– Are you basing your decisions on your own logic or categories, or the user’s intuition?
How do you know?
3. Design
In UX, design is how it works, and it’s something you can prove; it’s not a matter of style.
Ask yourself:
– Do users think it looks good? Do they trust it immediately?
– Does it communicate the purpose and function without words?
– Does it represent the brand? Does it all feel like the same site?
– Does the design lead the user’s eyes to the right places? How do you know?
– Do the colors, shapes, and typography help people find what they want and improve
usability of the details?
– Do clickable things look different than non-clickable things?
4. Copywriting
Definition of Copywriting: the activity or occupation of writing the text of advertisements
or publicity material.
UX writing is the art of writing copy to aid the user experience.
There is a huge difference between writing brand copy (text) and writing UX copy.
Brand copy supports the image and values of the company.
UX copy gets things done as directly and simply as possible.
Ask yourself:
– Does it sound confident and tell the user what to do?
– Does it motivate the user to complete their goal? Is that what we want?
– Is the biggest text the most important text? Why not?
– Does it inform the user or does it assume that they already understand?
– Does it reduce anxiety?
– Is it clear, direct, simple, and functional?
5. Analysis
UX analysis is the process of collecting and evaluating data about how your users
are experiencing and interacting with your product, then using that data to
enhance the user experience.
Ask yourself:
– Are you using data to prove that you are right, or to learn the truth?
– Are you looking for subjective opinions or objective facts?
– Have you collected information that can give you those types of answers?
– Do you know why users do that, or are you interpreting their behavior?
– Are you looking at absolute numbers, or relative improvements?
– How will you measure this? Are you measuring the right things?
– Are you looking for bad results, too? Why not?
– How can you use this analysis to make improvements?
As a UX designer, your job is to create value—from the user’s perspective.
Some parts of the UX process create more value than others.
What are the five elements of UX design?
(existing in a material or physical form)
(existing in thought or as an idea but

not having a physical or concrete
existence)
Source: https://www.educative.io/answers/what-are-the-five-elements-of-ux-design
(existing in a material or physical form)
1. Strategy
The first layer is strategy. In this phase, the
designer gathers information and lays the
foundation while keeping in view the needs of
the users and business objectives.
The designer researches who the users and

the end-users are, as well as their needs, pain
points, etc.
(existing in thought or as an idea but

not having a physical or concrete
existence)
Class Activity
List:
1. Read through the description of the above business. Highlight everything that gives you clues about the reasons why
the business needs the website.
2. Write down a list of the reasons (product goals) the business needs the website or app.
Class Activity
List:
1. Carefully look at the two user personas provided for the business. Highlight everything in the
persona description that you think provides clues as to what the user may want to find out or do
when using the website.
2. Make a list of the things the user may want to find out or do (user goals) when using the web site.
2. Scope
In the next layer, the designer decides on the
idea and type of content they are designing.
They set their requirements and goals.
Functional requirements include functions

and features that need to be added.
Content requirements explain the theme,
images audio, videos that will help in
creating value and fulfilling requirements.
3. Structure
The third layer is structure. Here the designer
decides the organization of the design, and how
the system will behave when the user interacts
with the product.
Interaction design builds upon the functional

requirements to define the function of the
product and user interaction.
Information architecture builds upon the
content requirements to define how the
content will be structured and arranged.
4. Skeleton
This is the fourth layer. The designer puts
together the previous pieces to determine the
visual form of the design.
Here, the designer decides the flow of

information and movement from one screen to
the next.
The designer makes sure that navigation is

smooth and the presentation of information
facilitates user understanding.
5. Surface
This is the final layer. It is the combination of
the layers below.
The designer decides on the layout of the

visuals, typography, styling, and colors.
The designer finalizes the final ‘surface’ that

the user is going to interact with to make it
easy to use and navigate.
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].

PIXD5112_Lecture 2S

Uploaded by

Copyright:

Available Formats

PIXD5112_Lecture 2S

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

PIXD5112_Lecture 2S

Uploaded by

Copyright:

Available Formats

Principles of UI and UX Design

“People ignore design

• Recap Activity: Introduction - What is UX Design and UI Design?

• Activities to complete before the next lecture

LO2: Explain the dynamic between UX and UI Design.

PM: Part 1 – Lessons 1, 3 and 4

• What happens when they click this button?

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

This involves the design of the entire process of

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

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

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

“What’s in It for Me?”

LO3: Discuss the notions of an application as a functional software interface and an

PM: Part 1 – Lessons 2 and 6

And sometimes the designer must ignore their own psychology.

• What is your natural action when you see a door handle?

If user psychology is mostly subconscious, usability is mostly conscious.

We want it to be so easy so that everyone, anyone, could use it.

(existing in a material or physical form)

(existing in thought or as an idea but

(existing in a material or physical form)

The designer researches who the users and

(existing in thought or as an idea but

Functional requirements include functions

Interaction design builds upon the functional

Here, the designer decides the flow of

The designer makes sure that navigation is

The designer decides on the layout of the

The designer finalizes the final ‘surface’ that

You might also like