Join us

Mobile UI Design

Closes in
12
hrs
57
mins
16
secs
28% booked
Intermediate

How This Course Will Help Your Career

A strong UI design is essential for the success of a digital product in today's saturated market. Mobile devices' screen real estate is small, and people are on the move, so a good UI is even more crucial. You’ll learn to encourage task completion and to make your products intuitive and easy to use.

People delete 3 out of 10 apps within 30 days of downloading. You must deliver an exceptional user experience to engage people with your product. Learn mobile UI design to turn design ideas into interfaces your customers will love.

Mobile UI design skills are essential to any UX or UI designer's toolkit. Discover the foundations of mobile UI design and break into this ever-expanding market.

What You Will Learn

  • What affordances and signifiers are and why they are essential.

  • How to improve touch targets and tappability in mobile UIs.

  • How to use common UI patterns.

  • The fundamentals of visual design, and how it supports task completion.

  • Visual strategy and how Google implements it through Material Design.

  • How to avoid cognitive friction to make UIs easy to use.

  • How to evaluate your designs with a mobile UI checklist.

  • What the opportunities of Augmented reality (AR) in mobile UX are. 

  • How to use UI heuristics (rules of thumb) to evaluate your AR interfaces.

In the “Build Your Portfolio” project, you’ll find a series of practical exercises that will give you first-hand experience of the methods we cover. You will build on your project in each lesson so once you have completed the course you will have a thorough case study for your portfolio.

Mobile User Experience Design: UI Design is built on evidence-based research and practice. Your expert facilitator is Frank Spillers, CEO of ExperienceDynamics.com, author, speaker and internationally respected Senior Usability practitioner.

Gain an Industry-Recognized UX Course Certificate

Use your industry-recognized Course Certificate on your resume, CV, LinkedIn profile or your website.

Course Certificate example

Our courses and Course Certificates are trusted by these industry leaders:

Our clients: IBM, HP, Adobe, GE, Accenture, Allianz, Phillips, Deezer, Capgemin, Mcafee, SAP, Telenor, Cigna, British Parliament, State of New York

Is This Course Right for You?

This course covers mobile UI design and is suitable for anyone who has a basic knowledge of UX design, such as intermediate learners and experienced practitioners.

These lessons aren't only for mobile interface designers. To deliver the best user experiences, people across different roles should understand the principles of user experience and how to design experiences for a mobile environment. 

In particular, this course will benefit:

  • UX and UI designers interested in learning about UI design to create optimal product designs.

  • Graphic designers looking to switch to UI design.

  • Marketing professionals who work closely with visual designers to communicate and collaborate better. 

  • Product managers keen on improving usability and efficiency of product designs.

  • Software engineers looking to boost their skill sets and gain a foundational understanding of UI design.

  • Entrepreneurs who want to make sure their products have the appropriate user interface for maximum success.

  • Newcomers to design who are considering making a switch to UX or UI design.

Learn and Work with a Global Team of Designers

You’ll join a global community and work together to improve your skills and career opportunities. Connect with helpful peers and make friends with like-minded individuals as you push deeper into the exciting and booming industry of design.


Course Overview: What You'll Master

  • Each week, one lesson becomes available.
  • There's no time limit to finish a course. Lessons have no deadlines.
  • Estimated learning time: 13 hours 48 mins spread over 6 weeks .

Lesson 0: Welcome and Introduction

Available once you start the course. Estimated time to complete: 1 hour 13 mins.

Lesson 1: Introduction to Mobile UI Design

Available once you start the course. Estimated time to complete: 2 hours 51 mins.

Lesson 2: UI Patterns for Mobile

Available anytime after May 10, 2025. Estimated time to complete: 3 hours 25 mins.

Lesson 3: Visual Design for Mobile

Available anytime after May 17, 2025. Estimated time to complete: 4 hours 14 mins.

Lesson 4: AR Experiences for Mobile

Available anytime after May 24, 2025. Estimated time to complete: 2 hours 5 mins.

Lesson 5: Course Certificate, Final Networking, and Course Wrap-up

Available anytime after May 31, 2025.

How Others Have Benefited

Ricardo de Mello

Ricardo de Mello, Ireland

“The content given to us is placed in real-world applications and came with rich insights into how to use it any kind of project. It is the best investment I made to update myself and improve my knowledge and skills.”

María Camila Delgado

María Camila Delgado, Colombia

“The course was excellent, the references were helpful, and the videos were very useful to me.”

Andy Gingerich

Andy Gingerich, United States

“The instructor shared plenty of relatable content that made it easy to understand how the course topic applied. Even as a UX designer with exposure to most of this content, I still picked up some really good insights and new material.”

See other reviews

How It Works

  1. Take online courses by industry experts

    Lessons are self-paced so you'll never be late for class or miss a deadline.

  2. Get a Course Certificate

    Your answers are graded by experts, not machines. Get an industry-recognized Course Certificate to prove your skills.

  3. Advance your career

    Use your new skills in your existing job or to get a new job in UX design. Get help from our community.

Start Advancing Your Career Now

Join us to take “Mobile UI Design”. Take other courses at no additional cost. Make a concrete step forward in your career path today.

Advance my career now
Mobile UI Design
Closes in
12
hrs
57
mins
16
secs
28% booked

Mobile UI Design

1.2 - How to Use Affordances and Signifiers

Show Hide video transcript
  1. 00:00:00 --> 00:00:31

    When you want to design pleasurable and effective apps and products, you need to understand the basic interactions between humans and the world. You need to understand the basic interactions between humans and the objects you design. Essentially, that means that you need to understand what affordances are, what are affordances, Affordances define what actions are possible.

  2. 00:00:31 --> 00:01:07

    The latter affords climbing for people who know how to hold their balance. The latter would not afford climbing for a baby. That's because the term affordances refers to the relationship between a physical object and a person, or for that matter, any interacting agent, whether animal or human or even machines and robots. Don Norman

  3. 00:01:07 --> 00:01:33

    and affordances is a relationship between the properties of an object and the capabilities of the agent that determine just how the object could possibly be used. What does that mean? The tractor door properties of the object affords opening. If you have arms and hands capabilities of the agent and you know how to operate a handle the properties of the object.

  4. 00:01:33 --> 00:02:00

    Eight year old Felix knows how a regular tool works. However, this still doesn't afford opening for him because he's not yet learned the proper technique to push quite hard while pressing down. Here, the agent. Felix doesn't have the capabilities to afford the operation of the property door. On the contrary, the door affords opening for Rikke.

  5. 00:02:00 --> 00:02:33

    Now you know why? That's because affordances are all about the relationship between the object and the agent. The clutch and accelerator pedals are for pushing. But if the person isn't strong enough or doesn't have long enough legs like five year old or a ghost, then the person can't push down the pedals to shift gears or speed up the pedals. Do not afford pushing for him. The pedals are for pushing for Felix and the pedals are for pushing for Rikke.

  6. 00:02:33 --> 00:03:02

    Affordances represent the possibilities in the world for how the agent, a person animal or machine can interact with something. The presence of an affordances is jointly determined by the qualities of the objects and the abilities of the agent that is interacting. But wait, how on earth are you going to use those insights when you design an app to help people lose weight effectively, or an app

  7. 00:03:02 --> 00:03:32

    to help kids learn multiplication tables in a fun and effective manner? And how can you use those same insights when you design a microwave? Yes, you can use them in all those cases. And to cut to the chase, here is how you use those insights. When you design, it's your job to ensure that the object you design fits your target group of people and that the object you design affords your target group of people

  8. 00:03:32 --> 00:03:46

    to use it in a way so they can discover and understand how your product works so it can help them achieve their goal of using that product. Interaction Design Foundation.

Mobile UI Design

1.4 - How to Use “Tappability” Affordances

Show Hide video transcript
  1. 00:00:00 --> 00:00:32

    The idea is to minimize  the amount of tapping that goes on. And so, we call this *tappability*. As we say with all UX, test it with users – make sure it's there. But there's a lot of little things that users can tap on – not everything has to be a huge button. And if it's task-oriented, then they can tap it and not have to do extra work  basically.

  2. 00:00:32 --> 00:01:02

    So, it's kind of tap-tap efficiency, but I want to talk for a second about *affordances* or *tappability affordances*. Remember that an affordance is a UI element that *invites the expected interaction*. The one that always comes to mind for UX people is the Norman Doors. You know – Don Norman, in his *Design of Everyday Things* wrote famously about: is it a handle that you pull or is it a bar like a flat thing that you push? And that should be the correct affordance because push is

  3. 00:01:02 --> 00:01:30

    the physical force, push, and the handle pull is pull. But then doors *mix it* – they go push, but it's a pull. And they go pull, but it's a push, and so he talked about that and it's called a Norman door. And it reminds us about that affordance should be the right one and should invite the interaction correctly. Now, the hilarious thing about Norman doors in the real world is you get signs like it's a help strategy. It's usually instead of a pull there's a handle and it says 'Push'.

  4. 00:01:30 --> 00:02:05

    So, on mobile what this means is that users need to know what's tappable. There's a bias that visual designers have for making things so clean and so beautiful that you can't tell what you can tap. And so, that's what we're talking about, is making affordances *clean but also clear* so that you know what you've selected. And I just want to say that animation can really help with this. It can help invite that expectation and add that affordance.

  5. 00:02:05 --> 00:02:32

    So, the other thing that Don Norman talks about in addition to affordances is *signifiers*. And *signifiers are UI elements* – think of them as visual nudges so that they give the user a little prompt, something that they can get a feel for – for example, a pulsating button. You know, my favorite one was a menu, like a hamburger menu that followed you down the page on a mobile website.

  6. 00:02:32 --> 00:03:00

    And it kind of pulsated a little bit, and you want to time that pulsation to a heartbeat. It really is a good 'boo boom, boo boom', as opposed to 'boom-boom-boom-boom-boom', which is going to create anxiety or... So, think about how you can use Material Design-type of suggestions for motion, for motion graphics or little animations or little moments of – you know – magic that can help increase signifiers.

  7. 00:03:00 --> 00:03:32

    If you don't offer it, it can lead to a lack of discoverability, false affordances, and can lead to user frustration, uncertainty and errors. This is what the research shows. And the other thing I would add to that – you know – user frustration, "uncertainty errors" is the technical term – how about feeling stupid? Like, you're like "oh..." – you know. You don't want users to feel stupid when they're interacting with your app, just because there are not strong tappability affordances and signifiers.

  8. 00:03:32 --> 00:04:01

    Here's an example for you: check this one out – you may have seen it before: What is the tapping object here? What should you tap? Study this for just a second; see what you  think, well, just a second because you only have maybe three. It turns out that that virtual key card thing is not tappable. The object below, the grey thing, it's supposed to be a button, I think; it's related to like a help strategy, but the contrast is low.

  9. 00:04:01 --> 00:04:31

    Notice the contrast, so you have grey on dark blue or something like that. The other problem with this is it's sort of  you're stuck in this conceptual model that just doesn't work; it's like, what is a virtual key card? It's used for unlocking a bike, for paying for a bike. And they've introduced this idea of physical and virtual key cards, which is like 'whoosh!' – way beyond. So, there are a lot of things – you know – and sort of stepping back from the UI and seeing – you know – you could make something really tappable, but it might be the wrong tap,

  10. 00:04:31 --> 00:04:52

    a wasted tap; or in this case, yes, you're drilling down just to try and pay and they're leading you into this, into their mind, into their labyrinth of virtual key cards. So, be *careful* with making the *right things tappable to support the task* and *animating the right things and  using animation and motion graphics strategically*.

Mobile UI Design

3.2 - Visual Design in Mobile: How to Support Tasks and Usability

Show Hide video transcript
  1. 00:00:00 --> 00:00:32

    Now, the important thing about mobile UX design is that it's *very visual*. It's important to have really good visuals. Of course, they need *task support* as well; they're very, very interlocked together: looks good, looks helpful, looks usable and actually *is* helpful, usable and good – worth keeping and leaving installed. But visualizations can aid in *comprehension*.

  2. 00:00:32 --> 00:01:02

    So, they can help you *make sense of stuff quickly*. An example from a field study we did with users. And it's a VPN, and what users said is  they like this example. It's a very big On and Off button. So, you want to know when the VPN is on; like you turn it on, you know, the context is I need to get online; for example, when you go to China, the first thing they do is have you install a VPN at the airport. There's like a little stand. But they give you a new VPN that usually doesn't work, so your first 5-10 minutes in China

  3. 00:01:02 --> 00:01:30

    or first, I should say, couple of hours, you're checking out many many VPNs. I think I tried five or six and had a tip from somebody and it really worked. But, yeah, just a *big affordance*, big *tappable*, and also the visual of *is it on?* Is it even on? It's surprising how many VPN users in our study actually really, really enjoyed this from certain apps, and then other apps, in the case of our client's app, didn't have such a strong affordance.

  4. 00:01:30 --> 00:02:05

    There's a lot of room for improvement in many apps and basic things like alarm clock, are they half-asleep friendly? You know, we talk about interruptible, playful, visual. For me, I'd have to put my glasses on to see the thing. And can I do that with low vision – with my contact lenses or my glasses off? Can I do it while I'm half asleep, and  so forth and so on? And so, that's the key. So, I introduce a watch or – it's an Apple Watch-type of concept because Apple Watches in particular and other fitness trackers

  5. 00:02:05 --> 00:02:30

    interact with the app and the device, and that's actually just a realistic setting that your mobile experience might not live alone. The other thing I like about the watch is it makes an even smaller canvas for focus, for task-first, mobile-first. If you look at the visualization, say, in the  Nike Fuel versus the Apple Watch, they're using a visualization – you know – like a complete on Nike Fuel.

  6. 00:02:30 --> 00:03:00

    The Apple Watch uses a conceptual model or a visualization, a concept about closing your loops, your rings. They actually advertise the product with this 'close your rings' idea. So, Apple has that very elegant way of pre-advertising, pre-teaching to you before you buy it and then the model carries through the use. It's like a meta-nudge – a big nudge to say, "Hey, have I closed my loops yet? Oh, I'd better close my loops."

  7. 00:03:00 --> 00:03:03

    And that's how users interact with it, so it's highly effective.

Course FAQ

loading content…