Everyone, and welcome back.
So in this lesson, we're going to be learning about mobile design.
Now, the reason why is because it's so important, especially if you're building a responsive product,
if you're kind of just building a mobile based product similar to what we're doing right now, we're
building a mobile app for our client, habitual.
So I want to take you through the best practices for actually creating mobile design.
Now, we all know one thing, and the difference between a good up in a bad app is the quality of its
experience.
Now, if we think about it, many of us choose our phone for a large portion of the day.
I know like my phone is kind of, you know, replaced my laptop in many ways.
And it's never been more important to design a very good mobile experience.
Mobile users expect a lot from an app, whether that be like delite from, you know, interactions like
this or, you know, fast loading times like how this kind of loaded as well to just general ease of
use, you know, just the clarity of like this mobile design over here and just how easy it is just
to use.
I mean, all these different things make a great user experience.
So let me jump right into those best practices.
You know, no one practices don't make users think I mean, that seems pretty standard.
By mean, a lot of people kind of forget that we don't want to make users think too much.
Your product should really strive to be easy to understand and use.
If your app is too hard to use or understand, you really risk users walking away from your product.
So step one would be to declare I mean, cut away all the unnecessary content is kind of like that one
way to create good design.
I mean, this doesn't necessarily mean it's just for mobile.
I mean, you can do this for desktop as well.
But keep things really simple.
Don't just smack a whole bunch of copy on the screen.
I mean, find ways to hide that or show that.
But don't just make your screen incredibly cluttered.
You know, every extra button or image or paragraph makes your interface seem cluttered.
And because we don't have the screen real estate, I mean, we also need to keep interface elements
to a minimum.
We want to keep our design simple.
You can also practice actually hiding different things under interactions like this.
So that content is hidden.
And it's kind of not cluttering the main home page.
Well, you also want to do is to break tasks up, I mean, if you have, like a form similar to this,
you want to kind of break that process up, especially for mobile, because I mean, we just don't have
the screen real estate.
This is really important, especially because if a flow consists of some sort of logically connected
step, the user can easily use it.
Another best practice practices just to stick to the patterns.
I mean, think about the types of patterns that we normally see on mobile when being something like
onboarding screens.
Stick to those patterns.
And I've kind of been proven and just keep on using them similar to what we covered in design patterns.
Also reuse the elements and screens that users are used to that really decreases the learning curve.
So like home screens are an example setting screens and those are different types of screens that we
all kind of see in a lot of different apps.
And it really helps us understand how to use apps if we see similar screens over and over again.
Over here, we kind of have like a product description screen for a product and just kind of a very
simple e-commerce layout, and this is kind of all very standard.
You want to minimize your users input.
So, I mean, no long forms like over here.
We don't have a very long form.
There's just a couple of options.
And they've also broken it up, it looks like in different steps.
You know, typing on mobile is never really a fun experience.
And, you know, we're often prone to errors and we can really make this process easy by creating forums
as short as possible, like I mentioned before.
But also removing unnecessary fields are very key pre format.
Certain fields like this is a phone number and it really helps to see a pre formatted just because I
mean, if I want to review that content, I can notice the errors right away, especially for things
like even credit cards.
This is an example of like a credit card that is pre formatted as well.
And another thing to do is like, you know, autocomplete were necessary.
I mean, this could be applicable to things like addresses like over here.
This really allows users to enter their address without necessarily having to enter the entire address,
and you should also think about validating your inputs dynamically.
So when users do create an error, they don't necessarily need to go back and go through that interaction
all over again.
They can just correct it while they're actually focused on the input.
Next is consistency.
Now, this is a fundamental principle of design, and it really eliminates a lot of confusion.
It is essential like visual consistency, like typeface, buttons, labels, color.
It can mean like functional consistency, interactive elements across the app works similarly.
So that could be like buttons a will move you in a certain way, are swiping can move you to a new page
or the navigation is very consistent.
I mean, we're thinking about all these different things, even platform guidelines like iOS and Android
design systems like using that.
Like if you have two separate apps for both, I mean, you don't need to do that.
But say if you're creating an application for Android phones, you kind of want to stick to Google's
material design for a lot of those different types of design parents, because usually users are more
familiar with that in comparison to something like on iOS, where those design systems are really different.
Next, you want to give users as much control or the illusion of control.
So this can mean like just understanding where things are going.
Understanding how things work and that's this overall predictability, you know, all interactive elements
should be familiar and predictable when things work in the way you just predict and the kind of sense
that feeling of control.
So on mobile, we don't necessarily only have one way of interacting with an element to understand the
type of feedback they'll introduce.
So if we stick to familiar patterns, our users will really understand how our system works already.
So, I mean, if we notice, like we have cards, that's a big example of like a pattern, just cards
in general, we we know we can kind of tap them, like in this case to their very faint.
But we know that I can probably just tap on that.
And it's very familiar to me in the way that input is.
I know that this is like a menu of some sort.
So, I mean, introducing that sense of predictability really makes your application much more easier
to use.
Now, we're going to stop here and we're going to pick up on navigation when we come back.