1.2 Introduction To UI Design - XMPRO UI Design Basics
Last updated
Last updated
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 support@xmpro.com
Go to https://xmpro.com if you want to learn more about how you can build real-time applications with our Event Intelligence Platform.
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