Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Touch screens have introduced a new kind of interaction where users no longer need a keyboard, mouse, or any other device to make it work. However, this has also created new usability issues to consider.
[Dan Gorgone] Touchscreens have introduced a new kind of interaction
0:00
where users no longer need a keyboard, mouse, or any other device to make it work.
0:03
Simply by using a finger or 2, users can hit buttons,
0:08
they can select text, zoom in and out, scroll—and those are just the basics.
0:12
But by adding a new way to interact with your design,
0:16
a new set of concerns has been created
0:20
related to touch and gestures.
0:23
Since mobile devices can be held in one hand or both,
0:26
using a touch interface means that the fingers are very close to the screen at all times.
0:29
While this can speed up interaction, it can also lead to accidental touches or mistakes.
0:34
Users will also have different sized fingers and hands,
0:39
while others may have challenges with their vision and physical dexterity.
0:42
Therefore, trying to click a link, while potentially easier with a touch pad or a mouse,
0:47
can take a bit more focus on a much smaller screen and device.
0:52
[Amit Bijlani] So, we're talking about usability, right? And one of the key components
0:56
when it comes to a mobile interface are buttons.
1:00
There is that fine line where there are too many buttons,
1:05
so you're presenting too many options to the users
1:08
and then there's that fine line when there are not enough buttons.
1:11
There's this whole trend to add gestures—I get it.
1:16
You are using the smartphone that's capable of multitouch gestures or just gestures plainly.
1:19
You can have double-tap, long tap. You can have multiple finger swipes.
1:26
It's beautiful and I think all apps should take advantage of that,
1:31
but the problem with these gestures are sometimes that they are hidden.
1:35
What do I mean by hidden? An app takes great advantage of these gestures,
1:39
so you have swipe left, right, up, down, double-tap—all of these things,
1:43
but you don't know of these until you start swiping.
1:48
I'm not going to open up an app and swipe it all over to figure out what gestures are there.
1:52
You have to walk me through all these gestures
1:57
and explain to me what these gestures can do,
2:00
but where you have to visually indicate that something should be tapped, put a button there.
2:03
Make sure that button is the size of a finger,
2:09
so you're not putting tiny buttons all over the place—
2:14
when you're trying to tap one thing you end up tapping something else.
2:16
[Gorgone] Links and buttons should give some kind of visual feedback
2:21
to show that they've been clicked or pressed.
2:24
Since the early days of the Web, alternate colors could be chosen for active links
2:27
to show that they were clicked by the user.
2:32
These days, many apps have buttons of different shapes and sizes
2:34
that should also clearly show that they've been pressed.
2:38
This can help users confirm they pressed the right button.
2:42
You'll see this in action on many mobile touch keyboards now
2:45
used as a visual aid, since users probably won't be looking at what they're typing,
2:48
but rather what buttons they're pressing.
2:53
Something else to consider—people are using mobile devices everywhere.
2:56
You could count on laptops being on a lap or a desk when they're being used,
3:00
but phones and tablets are being used while walking, sitting,
3:05
laying down, exercising, and much more.
3:09
So what can you do about all this? Well, just like any design,
3:12
we can't guarantee 100% usability or satisfaction
3:16
and we really shouldn't try—attempting to solve every problem
3:19
for every exception is just not worth the effort.
3:22
On the contrary, we can simply try to anticipate
3:26
as many of the usual needs as possible
3:29
and take care of the majority of our users.
3:32
Part of this problem can be solved by using mobile-friendly design frameworks
3:36
that have accounted for many of these issues already
3:40
within its code, design, and best practices.
3:43
Another way to improve your designs is to continue to use them on mobile devices.
3:47
Designers should have regular access to smartphones and tablets,
3:52
so that they can proof their work, and again,
3:55
emulators can be another helpful alternative.
3:58
Either way, becoming used to using these designs yourself
4:01
and testing them with others can give you
4:05
insight into improving your work.
4:07
You need to sign up for Treehouse in order to download course files.
Sign up