You will learn to develop sophisticated user interfaces for iOS, with a focus on user interface design best practices, UI animations, and responsive design. You will learn about the key UI widgets, mapping interfaces and view restoration.
Gestures and Touch
Loading...
From the course by University of California, Irvine
Best Practices for iOS User Interface Design
173 ratings
University of California, Irvine
173 ratings
Course 3 of 6 in the Specialization iOS Development for Creative Entrepreneurs
From the lesson
The Design Solutions that come with iOS
In week 2, we will discuss the design solutions that come with iOS. We will cover HIG and HCI principles plus learn how to achieve the design. We will wrap up this week with a quiz to test your knowledge on what you have learned this week.
Meet the Instructors
Don PattersonAssociate Professor
Informatics and Computer Science
Sam KaufmanPartner at Gradient
[MUSIC]
There are a lot of different ways that users interact with the physical
device of the iPhone, or iTouch, iPad, all the iOS devices.
There's some physical manipulations that just like a navigation style or
other ways in which standardized buttons or UI widgets.
There are some standard gestures and
touches that users have become accustomed to.
In order to make a high quality application,
you need to make sure that your gestures and your touches are following the same
patterns that have been established as regular ways of interacting with content,
that have been just established as metaphors that have been reused.
So what I'd like to do is walk through the gestures and touches
that are common in applications, and talk a little bit about what they are used for.
At a high level,
what iOS does is it treats interactions based on an idea of direct manipulation.
Direct manipulation is something that came about as part of a natural user interface
style of interacting with content or touch-based user interfaces.
And by direct manipulation what I mean is,
the images that you see on the screen are almost like they're real objects.
So that when you touch them, and you move them, and
you manipulate them, they respond like maybe real objects might,
like a real sheet of paper or maybe if you're manipulating a 3D object.
It's like you're working with real objects on the other side of a piece of glass.
When you touch them they respond.
They can be moved in response to touches just like a real object would move
if somehow you could put a piece of glass between you and it and still move things.
Contrast this to the idea of indirect manipulation.
Indirect manipulation, for example, is when you use a mouse in order to move
a mouse cursor on the screen and work with things on the screen.
Now while this may also have some ways in which it's like moving a real object.
Because your mouse is over on the side, and there's this indirection between
the movement of your hand and the mouse, and what you see happening on the screen,
you're not physically touching the screen, and working with the object directly.
You have this level of indirection from the mouse
to what's happening on the screen.
There are other even earlier interfaces that were done before the mouse
in which there wasn't even really a manipulation.
There are various kinds of text editing where you edit text in one window and
then you have to go through a process of
rendering it into a typeset document in another window.
Lawtech is an example of this, old versions of Word Perfect were
like this where not only were you not manipulating real objects but
you weren't even directly or indirectly manipulating them.
You were kind of crafting code of some kind to create a document or
to create an image.
Or you just weren't directly working with the data as a sort
of a thing on the screen.
So high level, what we're trying to do is encourage common ways of
doing direct manipulation with virtual objects on the screen.
iOS users have used some particular gestures before, and
they expect them to work in certain ways.
And there is this common experience across all the different devices and
apps that involve a variety of different gestures.
There are a few more than what's listed here, but here are some important ones.
There's the tap, the double tap, the pinch, drag, swipe, flick, touch and
hold, shake, and the newest one is force press.
That was introduced with the Apple Watch and
is being rolled out into some of the other hardware that's available now in iOS.
We'll look at that just very quickly.
So for starters, a tap.
Tap is the most basic building block of interaction with the direct
manipulation interface.
It's used to select an item.
By tapping on it, you choose it.
It's used to activate a control.
Or it's possibly used to activate a button, like for
example if you have a radio button.
It's a very simple, direct interaction, that changes the state of the interface.
The next kind of interaction is the double-tap.
Now double-tap on a iOS device has come to mean zooming in, centering content.
Or if the user is already zoomed in, the double-tap will zoom them out.
Now this is in contrast to what a double-click is used for.
A double-click is used for other things on a desktop metaphor.
But the double-tap is used to zoom in in the iOS environment.
A pinch is a interaction with two fingers in which you grab two spots and
bring it together.
That's a pinch in.
And there's an alternative, which is the pinch out.
And those have come to mean zooming in and zooming out, but
providing a finer level of control than the double tap does.
Additionally with that pinch, if you move your hand rotationally,
it's expected that the object that's underneath the pinch would also rotate,
if that's something that's rotatable.
For example, a map.
You pull it in and you zoom out actually because you're grabbing points far apart
and you're bringing them together.
And you can also rotate the map by moving those two fingers around.
The drag and swipe interaction is what happens when you press a location and
then you drag it with one touch and you move it around.
In this case, the animation is showing you a vertical drag and swipe,
and this would be associated with maybe moving an object up and
down or scrolling a document up and down.
And notice that the scrolling action when done with dragging is a direct
manipulation metaphor where it's like you're moving a piece of paper up and
moving a piece of paper down.
And it's interesting that Apple probably, I don't know,
probably two generations of OS ago switched the orientation on their
desktop environment to match what was going on in the iOS environment.
So that there was a consistent experience of when you touch and push,
it's like you're pushing a piece of paper.
If you use Windows applications as, I think Windows is up to date with,
has changed their metaphor as well.
But a common way in Windows that scrolling is done is that when you grab
something and you move it down, it causes the document to move up
in the opposite direction, as if you're moving the scroll bar and changing a lens,
but not as if you're manipulating the document itself.
The other thing that a drag can be used for
is if it's used sideways rather than up and down.
It can be used to go to a previous screen or to a next screen.
If you're going through books or
you're going through some kind of a card metaphor selecting things.
It's often used to reveal hidden views much to the chagrin of Donald Norman.
So for example, it is sometimes used in order to bring in content from the bottom
like the Control Center, or bring in content from the top, like Notifications.
If it's used in, for example, email or your text messages, and you slide sideways
it reveals functionality that's available in a table-view row.
For example, deleting an email or archiving an email,
or responding to a text message.
The swipe is used in different contexts for that.
The flick is an example of a drag and swipe, it's just done very quickly.
And sometimes that invokes different kinds of metaphors than a drag and swipe.
For example, it may be the default action that a drag and swipe might give you.
A drag and swipe might reveal several options, but
a flick might pick one of them automatically, like deleting an email.
The touch and hold is a single tap, but
rather than letting go quickly, you hold your finger down.
And that reveals different kinds of options in an interface.
If you touch and hold in a text interface, it's used for selecting some text so
that you can cut and paste it.
It can also be used in the text context to be able to move a cursor around,
if you wanted to edit text.
Sometimes it's used to reveal new options, like I mentioned, as well.
Sometimes, if you touch and hold something, for example, the keyboard,
if you touch and hold a letter, it'll bring up a selection of
different letters related to the letter you're picking with, maybe, accents.
So if you select an N on an English language keyboard, and you hold it down,
you do a touch and hold operation, it will bring up the enye for example,
which is a Spanish character related to an N.
The shake action is one that's, many people don't know about but
it's a way to undo an action.
So that if you have done something like moved a document or sent an email,
well sent an email might be too late.
But if you've done something like filed an email and you want to undo it,
sometimes applications support an undo action by shaking the phone.
And that's something that you can support as well.
Now the newest operation is one that's come available on the iWatch and
is rolling out in new versions of the iOS phones and on some trackpads.
And this is a force touch, this is a touch which is associated not just with a tap
but a touch and then a push.
Like you're pushing through the content in order to do something.
Now this is a really new interface, a new gesture, that's become available.
And it hasn't completely been established what it is that this kind of a gesture
is supposed to be used for.
What Apple's guidelines, and the Human Interface Guidelines have been suggesting
is that this is to initiate an action based on what you pressed initially.
So, it's to do something with the object that you're manipulating
besides just giving you a selection of options.
So one thing that it might be is that if you had a selection of thumbnails,
of movies, you might force touch the movie in order to get a preview.
Or you might force touch an address in order to bring up a map preview.
You might force touch an object, and
if you touch an object when you're moving around, if you force touch it,
maybe it will create a new document that has that text in it.
This is an interesting gesture because as it hasn't been used very broadly,
there aren't common metaphors and common user experiences for it.
So if you get on the ball and implement an app and
it has a great way of using force touch, you might be able to set the standard for
what this gesture comes to be used as as a common experience for other users.
Now when you're doing these gestures, with the exception of force touch of course,
be careful because you don't wanna change the meaning of the gestures.
For example, you don't wanna use a single tap to zoom in, because there's already
this idea of zooming in, either with a double-tap or with a pinch action.
And you don't wanna create new gestures, some sort of complicated squiggle or
multi-finger gesture, that duplicates the functionality of an existing gesture.
If you can already zoom in, don't create a new zoom in gesture,
that's gonna confuse users.
And also, it's important to notice that nonstandard gestures aren't discoverable.
And honestly, even standard gestures aren't discoverable, but
people have come, to some degree, to expect some gestures to mean something.
But if you introduce some new gesture that's never been done before, people
aren't gonna understand that that's even something that they should be able to do.
So a good rule of thumb is to only have complicated gestures,
if that's something you want to do, as a shortcut or
to duplicate some functionality that's available in some other way.
Okay, in summary, iOS has a collection of standard gestures.
And you as an application developer and
as a user interface designer should understand what those metaphors,
what those gestures are metaphors for, and you should use them appropriately.
Those meanings have become standardized, all with the exception of force touch.
And high quality apps are gonna respect those standards.
Users will understand how to use an app,
your app, with standard gestures more easily.
And that will cause your app to be more successful, and for
users to have a better experience with your app, broadly speaking.
Understanding them is an important part of being a good user interface designer.
And we have yet to talk about how to use them.
And we'll touch on that in upcoming lectures.
I can't wait to see what people do with force touch,
that's something really new and innovative.
You can do a lot of potentially neat things with it.
So maybe you guys'll come up with something to set the bar for
what we're gonna do with it.
Thank you.
[MUSIC]
Explore our Catalog
Join for free and get personalized recommendations, updates and offers.
Coursera provides universal access to the world’s best education,
partnering with top universities and organizations to offer courses online.
© 2018 Coursera Inc. All rights reserved.
