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