User Experience Part Two
| Site: | QSC |
| Course: | Q-SYS Level 1 Training |
| Book: | User Experience Part Two |
| Printed by: | Guest user |
| Date: | Wednesday, 1 May 2024, 7:22 AM |
Description
Video Transcript
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
Learn how color and the layout of your UCI can affect user experience.
Tips and Definitions
Coming Soon!