1.2 Introduction To UI Design - XMPRO UI Design Basics

To get access to the full course and resource links mentioned in the video, sign up at https://courses.xmpro.com.

Need help with creating your XMPRO apps? Send an email to [e-mail]

Go to https://xmpro.com if you want to learn more about how you can build real-time applications with our Event Intelligence Platform.

Transcript

in the previous video you heard me use

the terms

ux and ui design you're probably

wondering what these terms

mean and how they're different from each

other

according to usertesting.com user

experience design is the process of

designing products that are useful

easy to use and delightful to interact

with

you can think of this as the umbrella

term for what we're doing when we design

interfaces ux design includes things

like user research

creating personas doing usability

testing

creating user stories designing user

flows

and designing the user interface

so user interface or ui design

is purely focused on the visual design

of the interface for an

app or a website it involves choosing

colors

fonts and styling interactive elements

like icons and buttons

now that you understand what it means

when i refer to ui or ux design

i'm going to go through a few key design

principles that you should keep in mind

as we move through this course

the five foundational principles of ui

design that i want to go through with

you

are clarity flexibility familiarity

efficiency and consistency

i understand that these words might not

mean much to you at the moment

but i'm going to take you through a few

practical examples

to show you how they apply to your

designs

clarity so clarity means your designs

should be simple

and easy to understand there's a common

saying

that a confused mind says no and when

someone is confused by your interface

they're very likely to stop using it you

want to avoid using

elements that don't have a clear meaning

in your interface

when you create an interface the user

should always know

three basic things firstly they should

know where they are

then they should know what they need to

do and

finally they should know what's going to

happen next like when they click on a

button

or drill down into something they should

know what to expect

and that is how you bring clarity into

your user interface design

now let's look at some examples

you'll see that the modal on the left

has dozens of check boxes that are

aligned in all sorts of different ways

there's no clear hierarchy to indicate

what the most important action is

there are 12 buttons in that one modal

and they all look equally important

this is definitely going to leave a user

feeling confused about what to do

and about what's going to happen next

now compare that to the modal on the

right

this is a good example of clarity in ui

design

it comes from envision which is an

interactive prototyping software

platform

that we use here at xm pro we use it to

prototype products like our app designer

and the data stream designer

you'll see that this modal has a very

clear hierarchy in terms of text

you can tell by the heading that this

modal is all about deleting your

prototype

there's a warning that tells you if you

do this you can't

undo it it also shows you all the things

that are going to happen

once you click the button and they make

the default choice prominent

so you're clear which one is actually

going to delete your prototype

now let's look at flexibility

in the 1990s the fathers of user

experience

design jacob nielsen and ralph muller

came up with something called heuristic

evaluation

which is a way to do usability

evaluations

they then turned those heuristics into

10 rules

their rule around flexibility says that

every system

has two types of users you have beginner

users

and power users and your system should

be created

to empower both of those

one way that you can build flexibility

into your interfaces

is by adding shortcuts while that's not

necessarily

directly applicable to the apps you'll

create in the xm pro app designer

it's useful to get you thinking about

how you can cater for users with

different skill levels

you could create an easily accessible

icon that

power users can click on to navigate

directly

or provide tooltips for beginners these

simple tweaks can go a long way to

accommodating both types of users

in your interface

the third principle we're going to look

at is familiarity

i want to stress you do not have to

reinvent the wheel with your user

interface design

using familiarity means that you're

going to use

elements that users are used to seeing

in interfaces

one example is using a house icon to

show them how to get back to the home

page

using familiar elements in your

interface is one way to reduce the

learning curve for your app

and also improve the speed at which

people use it

one way to add familiarity is by using

commonly accepted terms

things like home search cart delete

and cancel words like main

find or remove have a similar meaning in

the literal sense

but they're just not commonly used in

interfaces and those

uncommon terms might add confusion to

the user experience

efficiency refers to how long it takes

an expert user

to complete a task in your app you

should always be asking yourself

whether there's a more efficient way to

do something in your app

but you have to also be careful to not

reduce the steps so much

that you start negatively impacting the

user experience

especially for those beginner users that

we talked about in the flexibility

section

these efficiency examples are a bit

small

but they do demonstrate what a big

impact a small change can have

so on the left you can customize your

email preferences for an email

newsletter

by choosing whether you want to receive

emails immediately

daily or not at all and when the user

clicks on one of these radio buttons

they turn blue

but there's no save button it turns out

that the system

automatically saves your choice but

there's no indication to the user that

anything actually happened

and this might be confusing to them so

if you look at the example on the right

you'll notice a very subtle difference

there's a green tick icon with the word

saved

by adding that simple element you've

given the user an indication

that their action worked the main thing

to take away from this example

is that the screen on the left tried to

be too efficient

and ended up negatively impacting the

user experience

by adding a small indicator like that

saved message on the right

the designer could create a much more

pleasant experience

that was still efficient for the user

the last principle we'll cover in this

lesson is consistency

you want to create consistency in the

look and feel of your app

but also in how the user interacts with

it

elements should mean the same thing

every time the user sees them in your

interface

it's important to keep in mind that

different words symbols

and even colors have meanings that

people associate with them

and it's important to use them

consistently across your interface

in the example on the left you'll see

that there's not a lot of consistency

being used in this interface

the fonts colors and sizes are

completely different

it's difficult to make sense of what's

going on even the main menu

is in the middle of the page and on the

right

we have a great example of consistency

this is zapier.com's app store

they've created a format that they use

for each of the apps they have an

integration for

you'll notice that each app follows the

exact same pattern

it has an icon a heading and a

description

in this example the user will know

exactly where they are

what's going to happen next and what

they're supposed to do

so let's recap the principles of ui

design that you need to keep in mind

as you create your app interfaces

your designs should have clarity and the

user should always know

where they are what to do and what to

expect

you need to be flexible to allow power

users and beginners

to easily use your interface use

elements that are familiar to your users

to help speed up their learning curve

and get their work done make your design

efficient so that there are no

unnecessary steps

but be careful of making it so efficient

that you negatively impact the user

experience

use consistency and the look and feel

and how your user interacts with the app

it's worth considering what meaning

certain icons words and colors have

before adding them to your interface

join me in the next module to learn all

about responsive design

you