Video Transcript
User Experience Part Two
8m 0s
0:08
Once you have a solid grasp of what your UCI needs to let the user do,
0:12
you have to provide them the buttons to make that happen!
0:15
But don’t just throw all those buttons randomly onto the screen.
0:19
There are a lot of design principles to keep in mind when you start
0:22
arranging the visual layout of each UCI page.
0:26
Again, some of these things may seem obvious,
0:28
but that also makes them easy to overlook if you don’t keep them in mind while designing your UCI.
0:35
Start off by considering some psychology of the user.
0:38
Most western-countries read from top-to-bottom and from left-to-right,
0:43
which means that we instinctively place more importance to items on the top and left.
0:48
If you’re creating page navigation buttons, for instance,
0:52
then the most important pages should be at the top or left,with less important pages following.
0:57
That same reading psychology tells us that we can turn to the next page when we’re done,
1:02
which is why the bottom right corner is a natural place
1:05
for a “next” button that advances to the next UCI page.
1:09
These aren’t rules, of course – you can layout your UCI any way you wish,
1:14
but if it’s built counter-intuitively then your users
1:17
may take a while to educate themselves when trying to navigate.
1:21
Probably the most important thing to consider is consistency.
1:25
Once you pick a navigation method, you should keep that style throughout the whole UCI.
1:31
You wouldn’t want to have a horizontal navigation menu on one page
1:35
and a vertical one on another, or for the pages to randomly change their order or size.
1:40
Keeping consistent rules within your design gives the user the best chance at navigating it successfully.
1:47
Important isn’t limited to page navigation, of course.
1:50
There are a lot of ways to denote the importance of an action.
1:53
Think of our Audio Player again – there are a lot of buttons you might push,
1:58
but the Play button is probably the most important one.
2:01
The location and size of the button help tell the user that
2:05
this is the most important function on the page.
2:08
You can also use empty space to show importance.
2:12
In this example, the Play button isn’t any larger than the other buttons,
2:16
but you can tell by the use of “white-space” around it that it is more important than the other buttons.
2:21
A lot of Designers are afraid of empty space because they think they need to fill the page,
2:26
but empty space can often be your friend.
2:29
It divides objects that are not alike, it shows importance
2:33
and it helps keeps your design simple and easy to understand
2:36
Once again, finding a consistent style is important.
2:40
If you teach the user that an important button looks like this on one page,
2:45
you should probably keep that aesthetic for other important buttons on other pages.
2:50
Another tool you have in your toolkit is color.
2:54
Color isn’t just for making things pretty, color can also communicate different feelings and emotions.
2:59
The color red, for instance, is often associated with urgent emotions such as panic and danger,
3:05
or the need for an emergency stop.
3:08
Green, on the other hand, is a calmer color and we often associate it with starting something.
3:13
Changing the colors of different buttons gives the user an
3:16
immediate impression of the nature of that button, without them even realizing it.
3:21
Along the same lines, if your entire UCI is red then you may be stressing your user out.
3:27
There are a lot of schools of thought on color, far more than we can get into in this video.
3:33
But if you think of a basic color wheel, there are some easy ways to find colors that look good together.
3:39
Complementary colors are colors with on opposite sides of the wheel
3:43
these are combinations such as red and green, purple and yellow, or blue and orange.
3:49
Complementary colors are great because they have the highest contrast from each other,
3:53
which is a great way to show distinction.
3:56
But if you overuse these complementary colors then the experience
4:00
can be quite jarring because there’s no comfortable place to look.
4:04
Other color templates involve semi-complementary colors, triad colors, etc.
4:10
It’s also worth keeping in mind the difference between warm colors and cool colors,
4:16
and the effect that has on your user.
4:19
Of course, when you start thinking about color,
4:21
you may want to consider the official colors of the business that you’re designing for.
4:25
If their logo is cornflower blue, then you may want to use cornflower blue as a main color in the UCI.
4:33
Most larger companies will have a style guide that specify
4:37
the colors they use as well as rules they apply for the use of their logo,
4:41
which you should likely keep in mind
4:43
before you accidentally pair their logo with their competitor’s color.
4:48
Of course, you shouldn’t rely entirely on color either.
4:51
Keep in mind that many people are color-blind, and you wouldn’t want to leave them out in the cold.
4:56
There are actually a number of free Color Blind Simulators you can find online,
5:01
where you could upload a screenshot
5:03
of your UCI to see what it would look like to someone with color-blindness.
5:08
So color is useful, but shouldn’t be your only tool.
5:13
With that in mind, you may want to consider how different people learn in different ways.
5:18
Some people learn best by reading, others through imagery, others through spatial association –
5:25
so if you have the flexibility in your design to appeal to multiple styles, it’s worth considering.
5:32
In Q-SYS you can add icons to your buttons as well as a label,
5:36
which may be a good way to satisfy different types of learners.
5:40
There’s one more critical concept to consider when building your UCI: feedback.
5:45
No, not audio feedback, we don’t want that.
5:48
I’m talking about a reaction the screen gives you to let you know that you’ve done something.
5:53
For some actions the feedback is obvious:
5:55
when you touch a button that navigates to another page, the screen changes to that page.
6:00
Many buttons naturally provide feedback –
6:03
a toggle button for instance will change its color when you press it.
6:07
A Play button will light up as long as its Audio Player is playing.
6:11
But other buttons might not give the user the feedback that they want.
6:15
If you only provide a user with volume bump buttons,
6:18
for instance, they don’t really know where they are in the gain range.
6:23
You may want to provide a meter that gives them feedback.
6:26
If you allow them to recall a Snapshot that changes the settings of controls that aren’t on the
6:32
current UCI page, you may want to give some sort of indication that the Snapshot has been engaged.
6:39
Any visual cue you can provide the user that their action has had an
6:43
effect will help their confidence level when interacting with the system.
6:46
Finally, don’t forget to test your UCI. Not just yourself,
6:50
Not just yourself, ask other people to test it for you so you’ll get a better sense of how intuitive it is.
6:56
You may learn a lot by watching someone struggle to navigate your menus,
6:59
or by seeing where they go to perform certain tasks.
7:04
Try to leave your ego behind and learn from them
7:07
rather than teach them how you want them to use the system.
7:11
Give them a task to perform and see if they can figure it out on their own.
7:15
If they can’t, that may be a good sign that your UCI needs a little more work.
7:20
So don’t fall in love with your own design too early –
7:24
just because you love it, doesn’t mean it’s useful to someone else.
7:28
And if you are going to use a Graphic Designer to add more visual flair to the system,
7:33
you want to make sure the UCI is field tested first before you build images that might be harder to change later on.
7:40
Hopefully, this gives you a good basis of things to keep in mind while designing your UCI.
7:45
The User Experience is just as important as the AVC platform is –
7:50
because all of your work inside the software is useless if nobody can figure out how to use it.
7:56
Thanks for watching.
Lesson Description
User Experience Part Two
8m 0s
Learn how color and the layout of your UCI can affect user experience.
Tips and Definitions
User Experience Part Two
8m 0s
Coming Soon!
Downloads and Links
User Experience Part Two
8m 0s