WEBVTT

00:00.370 --> 00:07.100
All right guys in this lecture we're going to be talking about the mobile design for user experience.

00:07.110 --> 00:09.850
Now we already know what the user experience is.

00:09.870 --> 00:10.480
Right.

00:10.500 --> 00:14.380
That is how people are going to be perceiving our Web site.

00:14.400 --> 00:18.510
And this time we're going to be focusing on the mobile design.

00:18.690 --> 00:25.260
So right now for example our Web site is looking like this on a cell phone and we can see that there

00:25.260 --> 00:30.670
are a couple of errors even though we have gotten a lot for free from elementary right.

00:30.690 --> 00:35.130
Because now you can access the website and it actually works and you can do all the things you want

00:35.130 --> 00:40.080
to do in it if it wasn't for elements or you'd have to assume in and out and it would be a mess.

00:40.080 --> 00:44.190
So we can thank elements for that and ocean WP theme.

00:44.190 --> 00:47.730
Now there's still a couple of issues in here that we're going to want to correct.

00:47.730 --> 00:53.420
The first thing that's pretty clear is that we can see that the menu is huge right.

00:53.430 --> 00:54.600
It's really really big.

00:54.600 --> 00:56.240
We have the logo on top.

00:56.250 --> 01:00.970
We have the menu to the right and then we just have a bunch of white there doing no good at all.

01:00.990 --> 01:04.560
And when we are on our cell phone space becomes really precious.

01:04.560 --> 01:06.720
Like really really precious.

01:06.720 --> 01:12.510
So what we're going to want to do here is move our menu up towards and put it next to the logo.

01:12.630 --> 01:18.600
What that is going to do is that that is going to make a lot of extra space for people's cell phones

01:18.600 --> 01:24.690
to be displaying more of our content that is severely going to be improving the user experience for

01:24.690 --> 01:25.560
our visitors.

01:25.560 --> 01:25.980
Right.

01:26.250 --> 01:31.050
And as you can see there's quite a chunk that's going to disappear and that's going to be displaying

01:31.050 --> 01:32.730
our website instead.

01:32.730 --> 01:37.280
So this is really smart design for improving user experience.

01:37.290 --> 01:40.190
Now there are more things there for us to fix.

01:40.230 --> 01:46.230
For example looking down we can see that the text is quite crammed up and we're going to want to have

01:46.230 --> 01:48.640
their experience as good as possible.

01:48.690 --> 01:54.180
So we're going to go ahead and move over into our website and fix all of these little details in the

01:54.180 --> 01:55.320
upcoming lecture.

01:55.320 --> 02:00.570
Now in this lecture we're going to be focusing more on the user experience before we move over solely

02:00.570 --> 02:02.720
to the user interface right.

02:02.730 --> 02:09.480
The design itself first of all why should you be caring about the mobile user experience.

02:09.480 --> 02:17.460
Well the reason is this over 50 percent of traffic on the web is actually from the mobile.

02:17.460 --> 02:22.570
That is insane statistics that's been all the way back since 2015.

02:22.620 --> 02:28.660
So since 2015 more than half of all the traffic is actually from people's cell phones.

02:28.680 --> 02:29.940
That is insane.

02:29.940 --> 02:35.880
And it is estimated that in the upcoming years there's going to be as much as up towards 75 and 80 percent

02:35.880 --> 02:38.570
of all traffic will be mobile.

02:38.580 --> 02:44.590
So guys if you don't adapt your website to be mobile friendly you are missing out.

02:44.670 --> 02:50.040
And don't think that you can only make your web some mobile friendly too because studies show that 83

02:50.040 --> 02:56.070
percent of everyone who prefers to use their mobile still want to be able to use their desktop to browse

02:56.100 --> 02:56.760
Web sites.

02:56.760 --> 02:57.370
OK.

02:57.390 --> 03:00.060
So we're really going to need both here.

03:00.060 --> 03:05.620
Now next up is that mobile friendliness is actually super important for a CEO.

03:05.640 --> 03:11.840
Now if your Web site is not mobile friendly the search engines are actually going to demote you.

03:11.910 --> 03:15.530
And as we know Google is the biggest search engine of all.

03:15.600 --> 03:20.790
And Google sort of becomes like the parent who always want to have their approval right.

03:20.790 --> 03:28.230
So what we can do is check if our Web site is mobile friendly approved from Google because otherwise

03:28.260 --> 03:31.500
we're going to miss out on SEO and they're going to demote us.

03:31.860 --> 03:37.020
So what we're going to do here is we're going to do a little test from Google to check our mobile friendliness.

03:37.080 --> 03:37.950
So this.

03:38.160 --> 03:43.530
So this test will be in the resources and all we're going to go ahead and do is enter a euro which is

03:43.530 --> 03:48.630
for us ETP as for us less forest large Robin and Jasper dot com.

03:48.630 --> 03:49.610
We know this already.

03:49.610 --> 03:49.890
Right.

03:50.340 --> 03:52.850
And then we're going to click on Test you Earl.

03:52.950 --> 03:55.850
And as we can see here Page is mobile friendly.

03:55.860 --> 04:01.830
And this is really good news not surprising because uptime gave us almost full score on mobile friendliness

04:02.130 --> 04:07.080
but you still want to be doing this check to make sure that everything is in order.

04:07.080 --> 04:08.180
On our Web site.

04:08.190 --> 04:08.700
Right.

04:08.730 --> 04:13.460
We always want the approval of Google the big parent of search engines.

04:13.470 --> 04:19.560
Right now the next thing we're going to want to do is learn how to prioritize because when it comes

04:19.560 --> 04:24.300
to cell phones and the user experience and user interface we have less space.

04:24.330 --> 04:25.730
That's just the way it is.

04:25.740 --> 04:31.470
Cell phones are smaller than a desktop so we're gonna have less space to be showing our content to be

04:31.470 --> 04:36.890
using our call to action buttons to be using our opt in forms our menu everything.

04:36.900 --> 04:43.440
So we need to learn to prioritize for example what is the most important that I want to be showing them

04:43.530 --> 04:44.540
on this site.

04:44.550 --> 04:49.260
In this section and you want to be displaying only that then remove all of the clutter.

04:49.680 --> 04:56.160
So for example if you're having an e-mail update and you're asking for their first name last name phone

04:56.160 --> 05:03.430
number email middle name grandparents names all of this information you want to make that shorter you

05:03.430 --> 05:09.040
want to make that form more simple because otherwise there's going to be too much being picked up on

05:09.040 --> 05:13.900
the display and it's not going to be looking good and you are going to be ruining your own conversions

05:13.900 --> 05:14.360
here.

05:14.410 --> 05:16.470
So we're gonna have to learn to prioritize.

05:16.480 --> 05:22.930
Look what is it that's most important for me to show on the home page on the start here page in this

05:22.930 --> 05:25.870
section in the next section et cetera et cetera.

05:25.870 --> 05:31.450
Now the next thing we're going to talk about is the thumb design and what the thumb design is is actually

05:31.450 --> 05:38.200
based on a lot of studies that show that 67 percent and above actually prefer to use their cell phone

05:38.230 --> 05:44.830
with one hand and scroll and use and navigate with their thumb looking something like this.

05:45.190 --> 05:50.500
So what this means is that there are going to be certain areas is going to be easier to navigate than

05:50.560 --> 05:51.190
others.

05:51.190 --> 05:53.910
Most people by the way are also right handed.

05:53.950 --> 05:59.530
So if we look at this chart for example we can see that there are some limits to using your thumb we

05:59.530 --> 06:05.950
can see that the space there to the lower left comes more natural to the thumb because it's easier to

06:05.950 --> 06:10.200
be reaching that space if you have a cell phone near you which most people do.

06:10.300 --> 06:13.280
You can actually grab your own phone and try this out.

06:13.300 --> 06:18.230
Now this is also going to be depending on what kind of model you had the resolution on your screen et

06:18.230 --> 06:19.000
cetera et cetera.

06:19.000 --> 06:24.190
There are big phones or small phones so this isn't set in stone but it is a very good estimate that

06:24.190 --> 06:30.670
this area the green area will basically always be easy to reach for everyone preferring to use one hand

06:30.670 --> 06:32.940
and use their thumb which is the majority.

06:33.190 --> 06:38.110
And then we also have the orange part where you're going to need to stretch your thumbs in order to

06:38.110 --> 06:39.450
reach those areas.

06:39.580 --> 06:44.530
And then we have the red parts where you're usually going to have to flip around your phone or use the

06:44.530 --> 06:48.400
other hand or do some awkward movement in order to reach there.

06:48.400 --> 06:54.220
So what this means is that we want to be putting our most important material or rather where we need

06:54.220 --> 06:56.320
them to do an action in the Green Zone.

06:56.800 --> 07:00.640
So with this in mind navigation is key.

07:00.640 --> 07:04.220
We always want to keep navigation in mind when we are designing.

07:04.220 --> 07:07.030
This is going to be a huge part of the user experience.

07:07.360 --> 07:13.270
So if we take our own website right now as an example we can see that we have learn more bottom.

07:13.590 --> 07:16.540
That's being put in the lower left in the Green Zone.

07:16.540 --> 07:17.530
This is Google.

07:17.530 --> 07:24.230
This is exactly how we want our design because we want them to be pressing that button to get them to

07:24.230 --> 07:29.680
the starts here page or we're going to be introducing them to our concept to our products and then have

07:29.680 --> 07:30.910
them buy something.

07:30.930 --> 07:35.950
But in order to do that they need to click on that button to learn more button and the easier it is

07:35.950 --> 07:37.990
for them to click on that button.

07:37.990 --> 07:42.960
The higher are the chances that they will actually click and you will have a conversion.

07:42.970 --> 07:47.630
So if you're not adapting your website for mobiles overall you are missing out.

07:47.680 --> 07:52.650
And if you're not using the proper navigation you will be losing conversion guys.

07:52.690 --> 07:58.150
But the great news is it's not that hard would just need to keep this in mind when we move over to the

07:58.150 --> 08:02.760
next lecture and we start designing for the mobile user interface.

08:02.770 --> 08:03.340
Right.

08:03.370 --> 08:09.340
So we're going to move over to the next lecture do some designing and make our website even more mobile

08:09.340 --> 08:11.590
friendly than it already is.

08:11.590 --> 08:17.200
Make sure that it is easy to click on the buttons it is easy to see all of the content and clean some

08:17.200 --> 08:18.130
things up.

08:18.130 --> 08:19.750
So guys see in the next lecture.