3.4 UI Elements - 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 this video we're going to cover three

different ui

elements icons images and buttons

now if you want to add icons to your

interface a great place to find them

is a site called icons8.com

the website offers a large library of

icons in various styles

that you can resize recolor and add

padding to

all for a low monthly subscription fee

my most important recommendation for

using icons

is to use a consistent icon style across

your ui

at xmpro we use the windows 10 style

from icons 8

in all of our elements consistent icons

help to reinforce the familiarity that

your user has with the interface

secondly icons should convey meaning and

they need to be

easy to recognize for example if you

want to create a launch button using an

icon

a rocket would be a good choice but what

if you want to use an icon that's

difficult to recognize

and not commonly used well then you need

to pair it with a text label where

possible

and finally when you use icons it's

important to make them large enough to

tap

easily if they're going to be used on

mobile

now let's look at images blurry images

make an interface

look unprofessional and they detract

from the user experience

the best way to ensure that your images

are crisp and clear

is to use them at two times the

resolution

to optimize for retina displays mac

users have retina displays

and this simple tweak will greatly

improve their experience

if your image needs to be 300 by 600

pixels in the interface

it's ideal to use an image that is

double the size

so 600 by 1200 pixels

but you also don't want the page to take

forever to load so

one thing i recommend is to compress

your images

using something like tinypng.com

this tool will help you compress your

images without

losing any resolution quality now let's

look at buttons

there are a few things that you need to

consider when adding buttons to your

interface

firstly you want to emphasize the

positive action

in general on the left you'll see an

example of two

identical buttons except for the text in

their labels

ideally you want to point the user to

the action you think

they want to take in this case it's to

approve something

you'll see that we change the styling on

the reject button to give it an outline

and no fill on the right

next you want your buttons to be easily

recognized

as something clickable you can do this

by adding things like

rounded corners and drop shadows which

will help your user understand

that this is a clickable element you

need to stay consistent with button

styling in your interface

on the left we have buttons styled in a

variety of ways

and this can be confusing to your users

they might not recognize that something

is actually a button

whereas on the right you're using a

consistent style

and when you want to direct the user to

the default choice you can use outline

instead of full like we did on the

delete button

as i mentioned earlier you want your

buttons and icons to be easy to click or

touch

consider making any touch targets for

mobile

at least 48 by 48 pixels or a minimum

of 10 by 10 millimeters so you'll see

that the items on the left are not ideal

for use on mobile

because your finger is probably bigger

than the icon

and if there's something close to it

you'll end up tapping the wrong thing

whereas on the right you have large

touch targets that make it much easier

to interact with the interface

finally the labels you write on your

buttons should invite

action this also gets back to the

familiarity principle that we talked

about in our first video

rather than asking the user to say yes

or no

choose labels with verbs words like

approve or reject delete save cancel

undo these words clearly invite the

action you want the user to take

now that you know how to style different

elements in your ui

we're going to look at the final piece

of the design puzzle

in the next video we're going to be

covering chart types

and when to use which type of chart

depending on your data