Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,470 --> 00:00:04,210
Welcome back to our next lecture.
2
00:00:04,210 --> 00:00:07,350
And in this one, I want to give you a quick introduction
3
00:00:07,350 --> 00:00:10,630
to the field of User Experience design
4
00:00:10,630 --> 00:00:13,320
or UX design for short.
5
00:00:13,320 --> 00:00:16,540
And I say introduction, because UX design
6
00:00:16,540 --> 00:00:19,940
is actually a huge field with many designers
7
00:00:19,940 --> 00:00:23,330
actually being specialized, UX designers.
8
00:00:23,330 --> 00:00:25,060
And so in this lecture,
9
00:00:25,060 --> 00:00:29,520
we will really just scratch the surface of UX design.
10
00:00:29,520 --> 00:00:32,460
But still, I believe that all web designers
11
00:00:32,460 --> 00:00:34,580
should at least have some idea
12
00:00:34,580 --> 00:00:37,550
of what UX is actually all about,
13
00:00:37,550 --> 00:00:40,740
why it's important and of course also
14
00:00:40,740 --> 00:00:44,883
how we can improve the User Experience of our interfaces.
15
00:00:47,060 --> 00:00:49,530
And to start, let's try to understand
16
00:00:49,530 --> 00:00:52,800
what User Experience actually means.
17
00:00:52,800 --> 00:00:56,000
And to do that, we can use a very popular quote
18
00:00:56,000 --> 00:00:58,797
by Steve Jobs which is,
19
00:00:58,797 --> 00:01:02,860
"Design is not just what it looks and feels like,
20
00:01:02,860 --> 00:01:05,810
but design is how it works."
21
00:01:05,810 --> 00:01:10,430
So here, what it looks and feels like is basically
22
00:01:10,430 --> 00:01:13,630
what the User Interface is all about.
23
00:01:13,630 --> 00:01:17,870
So the User Interface is basically the visual presentation
24
00:01:17,870 --> 00:01:19,980
of any digital product.
25
00:01:19,980 --> 00:01:24,170
And so therefore it's all about the layout of the design
26
00:01:24,170 --> 00:01:28,010
as well as the typography, colors, icons,
27
00:01:28,010 --> 00:01:30,930
and other design elements that we use.
28
00:01:30,930 --> 00:01:35,010
And in the end, it's also about the overall personality.
29
00:01:35,010 --> 00:01:40,010
So, kind of a feel and the vibe that we give to our design.
30
00:01:40,310 --> 00:01:42,830
So that is what the part of, "Looks like
31
00:01:42,830 --> 00:01:45,040
and feels like", is all about.
32
00:01:45,040 --> 00:01:47,500
It's about the User Interface.
33
00:01:47,500 --> 00:01:49,860
But then Steve jobs actually said
34
00:01:49,860 --> 00:01:52,310
that, "Design is how it works."
35
00:01:52,310 --> 00:01:54,140
And so that, "How it works,"
36
00:01:54,140 --> 00:01:57,660
is what refers to the User Experience.
37
00:01:57,660 --> 00:02:01,980
So in a nutshell, User Experience is simply the experience
38
00:02:01,980 --> 00:02:06,420
that a user has while they interact with a product.
39
00:02:06,420 --> 00:02:10,100
And so when we think about and design the User Experience
40
00:02:10,100 --> 00:02:13,360
of a product, we ask questions like,
41
00:02:13,360 --> 00:02:17,550
does the application feel logical and well thought out?
42
00:02:17,550 --> 00:02:22,030
Or does the navigation of this app work intuitively?
43
00:02:22,030 --> 00:02:23,630
Or even questions like,
44
00:02:23,630 --> 00:02:26,510
are users actually reaching the goals
45
00:02:26,510 --> 00:02:29,760
that they wanted to achieve by using this product?
46
00:02:29,760 --> 00:02:33,750
And of course that again only really scratches the surface.
47
00:02:33,750 --> 00:02:36,930
There is a lot more to do when we think about,
48
00:02:36,930 --> 00:02:39,450
and when we design the UX.
49
00:02:39,450 --> 00:02:42,770
And speaking about design, let's now talk a little bit more
50
00:02:42,770 --> 00:02:46,523
about User Interface and User Experience design.
51
00:02:48,550 --> 00:02:51,860
So as designers, we can of course design
52
00:02:51,860 --> 00:02:56,250
both the User Interface and the User Experience.
53
00:02:56,250 --> 00:02:59,830
So if UI means the user interface,
54
00:02:59,830 --> 00:03:02,640
then UI design is essentially
55
00:03:02,640 --> 00:03:05,310
what makes an interface beautiful.
56
00:03:05,310 --> 00:03:09,910
And in the same vein, if UX is the User Experience,
57
00:03:09,910 --> 00:03:12,430
then UX design is what makes
58
00:03:12,430 --> 00:03:15,620
an interface useful and functional.
59
00:03:15,620 --> 00:03:17,710
That makes sense, right?
60
00:03:17,710 --> 00:03:21,140
And so this is what this lecture is all about.
61
00:03:21,140 --> 00:03:24,320
It's about learning some rules to design interfaces
62
00:03:24,320 --> 00:03:27,550
that are easy for your users to use.
63
00:03:27,550 --> 00:03:31,830
Now, there is this strange analogy of UI versus UX,
64
00:03:31,830 --> 00:03:36,080
where the UI is supposed to be this glass ketchup bottle,
65
00:03:36,080 --> 00:03:38,180
which is aesthetically pleasing,
66
00:03:38,180 --> 00:03:41,400
but doesn't really work in many situations.
67
00:03:41,400 --> 00:03:45,160
On the other hand, UX is supposed to be represented
68
00:03:45,160 --> 00:03:48,860
by the newer plastic bottle that is easy to squeeze.
69
00:03:48,860 --> 00:03:52,040
So the one that is easier to use.
70
00:03:52,040 --> 00:03:54,920
However, if we actually think about this,
71
00:03:54,920 --> 00:03:58,110
this analogy, doesn't make a lot of sense.
72
00:03:58,110 --> 00:04:01,360
Because in reality, both of these bottles
73
00:04:01,360 --> 00:04:04,240
can actually be called a User Interface
74
00:04:04,240 --> 00:04:07,200
because they're both interfaces for the user
75
00:04:07,200 --> 00:04:10,240
to get some ketchup, right?
76
00:04:10,240 --> 00:04:14,690
They do however, create completely different experiences.
77
00:04:14,690 --> 00:04:18,660
And I'm sure that you too have experienced this kind
78
00:04:18,660 --> 00:04:21,600
of situation here at some point in your life
79
00:04:21,600 --> 00:04:24,650
when you used this kind of ketchup bottle.
80
00:04:24,650 --> 00:04:28,090
And also you might've felt how easy it is
81
00:04:28,090 --> 00:04:30,730
to just squeeze the plastic bottle.
82
00:04:30,730 --> 00:04:35,410
So again, both are actually a kind of the User Interfaces
83
00:04:35,410 --> 00:04:39,290
but they do create completely different experiences.
84
00:04:39,290 --> 00:04:41,810
One is more pleasing and the other one
85
00:04:41,810 --> 00:04:45,050
is many times a lot more frustrating.
86
00:04:45,050 --> 00:04:48,520
But I think that this is actually a nice example
87
00:04:48,520 --> 00:04:50,830
of how different User Interfaces
88
00:04:50,830 --> 00:04:52,570
can create completely different
89
00:04:52,570 --> 00:04:55,400
experiences for the user.
90
00:04:55,400 --> 00:05:00,400
But anyway, comparing UI design and UX design like this,
91
00:05:00,640 --> 00:05:02,980
so by comparing these two bottles
92
00:05:02,980 --> 00:05:06,780
and saying that one is UI, and the other one is UX,
93
00:05:06,780 --> 00:05:08,980
doesn't make a lot of sense anyway.
94
00:05:08,980 --> 00:05:11,870
Because UI design, is actually already
95
00:05:11,870 --> 00:05:15,180
a big part of UX design.
96
00:05:15,180 --> 00:05:17,530
Or in other words, UX design
97
00:05:17,530 --> 00:05:21,080
can really not exist without UI design.
98
00:05:21,080 --> 00:05:23,760
Because a well-designed User Interface
99
00:05:23,760 --> 00:05:26,090
is already contributing a lot
100
00:05:26,090 --> 00:05:29,340
to a good experience for the user.
101
00:05:29,340 --> 00:05:31,510
And in fact, many of the things
102
00:05:31,510 --> 00:05:34,180
that we have talked about in earlier lectures
103
00:05:34,180 --> 00:05:38,770
are actually also part of creating a good User Experience.
104
00:05:38,770 --> 00:05:42,330
So again, it's not just about visual design,
105
00:05:42,330 --> 00:05:44,850
but really creating an experience,
106
00:05:44,850 --> 00:05:48,020
which has both the User Interface in mind
107
00:05:48,020 --> 00:05:51,050
and the experience for the user.
108
00:05:51,050 --> 00:05:53,310
And so here again, you can see
109
00:05:53,310 --> 00:05:57,460
that UX and UI are really deeply intertwined.
110
00:05:57,460 --> 00:06:00,190
And so it's actually quite hard
111
00:06:00,190 --> 00:06:02,933
to separate these two topics completely.
112
00:06:05,210 --> 00:06:07,657
Now, when we think about and design,
113
00:06:07,657 --> 00:06:10,210
the User Experience of a product,
114
00:06:10,210 --> 00:06:12,950
it's always all about goals.
115
00:06:12,950 --> 00:06:17,950
So a website or an application exists for a certain reason.
116
00:06:18,080 --> 00:06:21,690
So a user has a certain goal for visiting a page
117
00:06:21,690 --> 00:06:23,670
and the business has a certain goal
118
00:06:23,670 --> 00:06:26,970
for creating that page in the first place.
119
00:06:26,970 --> 00:06:29,090
Because if neither the user
120
00:06:29,090 --> 00:06:31,860
or the business would have a certain goal,
121
00:06:31,860 --> 00:06:33,620
then there wouldn't be the need
122
00:06:33,620 --> 00:06:37,560
for that page to actually exist in the first place.
123
00:06:37,560 --> 00:06:38,870
Right?
124
00:06:38,870 --> 00:06:41,840
And usually the goal of the user is
125
00:06:41,840 --> 00:06:44,210
to simply use a certain product,
126
00:06:44,210 --> 00:06:48,280
to find some information or to buy some product.
127
00:06:48,280 --> 00:06:50,110
While many times the goal
128
00:06:50,110 --> 00:06:52,960
of the business is to sell something,
129
00:06:52,960 --> 00:06:55,210
No matter if it's an actual product
130
00:06:55,210 --> 00:06:58,030
or simply selling advertisements.
131
00:06:58,030 --> 00:07:01,990
And this is extremely important because basically all
132
00:07:01,990 --> 00:07:06,010
that UX design is for, is to align the user's goals
133
00:07:06,010 --> 00:07:08,210
with the business goals.
134
00:07:08,210 --> 00:07:12,210
Or in other words, the goal of UX design is
135
00:07:12,210 --> 00:07:16,930
to fulfill both the goals of the user and the business.
136
00:07:16,930 --> 00:07:19,720
So, as an example, let's say that the goal
137
00:07:19,720 --> 00:07:23,760
of a certain user is to design websites faster.
138
00:07:23,760 --> 00:07:26,660
And the goal of some other business is
139
00:07:26,660 --> 00:07:29,890
to sell design kits for design tools,
140
00:07:29,890 --> 00:07:32,193
such as Sketch or Figma.
141
00:07:33,050 --> 00:07:35,960
And so here, good User Experience design
142
00:07:35,960 --> 00:07:39,160
will design a product that makes it really easy
143
00:07:39,160 --> 00:07:43,740
to both the user and the business to fulfill their goals.
144
00:07:43,740 --> 00:07:46,380
So in this case to create a transaction
145
00:07:46,380 --> 00:07:49,390
between the business selling some design kits
146
00:07:49,390 --> 00:07:53,280
so that the user can design their websites faster.
147
00:07:53,280 --> 00:07:55,410
Now, one extremely common example
148
00:07:55,410 --> 00:07:57,340
that you will see all the time
149
00:07:57,340 --> 00:08:01,560
is to highlight one option in a pricing table like this.
150
00:08:01,560 --> 00:08:03,710
And the designer does that because
151
00:08:03,710 --> 00:08:06,660
it makes it easier for the user to decide
152
00:08:06,660 --> 00:08:09,170
which is the best option to choose.
153
00:08:09,170 --> 00:08:10,540
And on the other hand,
154
00:08:10,540 --> 00:08:13,990
it helps the business maximize their revenue.
155
00:08:13,990 --> 00:08:17,060
Because usually the option that is highlighted
156
00:08:17,060 --> 00:08:20,520
is the most expensive one, or also the one
157
00:08:20,520 --> 00:08:22,610
that they know will sell the best
158
00:08:22,610 --> 00:08:24,730
and make them the most money.
159
00:08:24,730 --> 00:08:27,720
So again, here, the user has to goal
160
00:08:27,720 --> 00:08:30,960
of quickly deciding which is the best option.
161
00:08:30,960 --> 00:08:32,230
While the business of course,
162
00:08:32,230 --> 00:08:34,700
has the goal of maximizing revenue.
163
00:08:34,700 --> 00:08:36,700
And so here, the user's goals seem
164
00:08:36,700 --> 00:08:39,190
to be aligned with the business goals.
165
00:08:39,190 --> 00:08:42,950
So this I would say, is good UX design.
166
00:08:42,950 --> 00:08:47,410
And finally, another UX example that many companies use
167
00:08:47,410 --> 00:08:50,900
to maximize revenue is to use a pop-up form
168
00:08:50,900 --> 00:08:54,560
in order to capture users' email addresses.
169
00:08:54,560 --> 00:08:57,420
Now this does help the business' goal,
170
00:08:57,420 --> 00:08:59,930
but in many cases, it actually makes
171
00:08:59,930 --> 00:09:03,630
for a really bad and annoying User Experience.
172
00:09:03,630 --> 00:09:08,630
And it many times also doesn't help the user reach his goal.
173
00:09:08,670 --> 00:09:13,670
And so in this case, the goals are very clearly not aligned.
174
00:09:13,750 --> 00:09:17,220
Now, this doesn't mean that you can never use pop-ups
175
00:09:17,220 --> 00:09:18,640
but you have to be aware
176
00:09:18,640 --> 00:09:22,420
that it's actually not good UX design.
177
00:09:22,420 --> 00:09:24,520
And like this, there are of course,
178
00:09:24,520 --> 00:09:28,230
countless other examples of bad UX design.
179
00:09:28,230 --> 00:09:31,480
Such as hiding a button to cancel a subscription
180
00:09:31,480 --> 00:09:35,210
on some page that is almost impossible to find.
181
00:09:35,210 --> 00:09:38,300
But anyway, I think this is enough theory
182
00:09:38,300 --> 00:09:40,910
on UX and UX design.
183
00:09:40,910 --> 00:09:44,760
And so let's now go over some practical UX guidelines
184
00:09:44,760 --> 00:09:47,793
that had no real place in previous lectures.
185
00:09:49,440 --> 00:09:51,410
And the very first one is that you
186
00:09:51,410 --> 00:09:54,860
should not create over complicated layouts.
187
00:09:54,860 --> 00:09:57,180
So there is no need to reinvent
188
00:09:57,180 --> 00:10:00,330
the wheel like this, (chuckles), for example.
189
00:10:00,330 --> 00:10:02,460
Instead, you should use patterns
190
00:10:02,460 --> 00:10:05,220
that users are already familiar with
191
00:10:05,220 --> 00:10:08,060
instead of trying to be original.
192
00:10:08,060 --> 00:10:11,440
So, there's absolutely no need to be original
193
00:10:11,440 --> 00:10:15,830
because creativity is quite overrated in web design.
194
00:10:15,830 --> 00:10:20,830
Now creativity might be important for the top 1% websites,
195
00:10:20,910 --> 00:10:23,550
or if you want to win some award.
196
00:10:23,550 --> 00:10:26,610
But the everyday designer like you and me
197
00:10:26,610 --> 00:10:28,990
should simply use patterns that are used
198
00:10:28,990 --> 00:10:31,870
on most of the websites out there.
199
00:10:31,870 --> 00:10:34,040
So there's absolutely nothing wrong
200
00:10:34,040 --> 00:10:36,950
with using well established patterns.
201
00:10:36,950 --> 00:10:39,990
Because remember a website exists
202
00:10:39,990 --> 00:10:42,570
because users want to reach a goal.
203
00:10:42,570 --> 00:10:44,820
And so if a page looks familiar,
204
00:10:44,820 --> 00:10:47,750
it will help the user navigate to page faster
205
00:10:47,750 --> 00:10:51,970
and therefore they will reach their goal faster as well.
206
00:10:51,970 --> 00:10:54,790
Now, as a result of this, many websites
207
00:10:54,790 --> 00:10:57,970
do look the same or are quite the same.
208
00:10:57,970 --> 00:11:00,440
But again, there's actually not really
209
00:11:00,440 --> 00:11:02,710
anything wrong with that.
210
00:11:02,710 --> 00:11:05,040
So familiarity with your layout
211
00:11:05,040 --> 00:11:08,350
is way more important than being original.
212
00:11:08,350 --> 00:11:10,333
Okay. Never forget that.
213
00:11:11,270 --> 00:11:14,490
Next up, always make your call to action,
214
00:11:14,490 --> 00:11:16,260
which is usually a button,
215
00:11:16,260 --> 00:11:19,490
the most prominent element on the screen.
216
00:11:19,490 --> 00:11:21,860
Here, for example, the reserve button
217
00:11:21,860 --> 00:11:25,300
is quite difficult to find and so this will create
218
00:11:25,300 --> 00:11:28,690
a frustrating experience for your user.
219
00:11:28,690 --> 00:11:30,710
On the other hand, here of course,
220
00:11:30,710 --> 00:11:34,180
it is pretty clear how you can reserve a booking.
221
00:11:34,180 --> 00:11:36,980
So all you have to do is to click this button.
222
00:11:36,980 --> 00:11:40,720
It is really clear because the button really stands out.
223
00:11:40,720 --> 00:11:42,350
It's really prominent.
224
00:11:42,350 --> 00:11:44,900
And so, that's basically also what we learned
225
00:11:44,900 --> 00:11:48,800
in the lecture about visual hierarchy, right?
226
00:11:48,800 --> 00:11:51,880
Also make sure that the button describes exactly
227
00:11:51,880 --> 00:11:54,270
what will happen when user clicks it.
228
00:11:54,270 --> 00:11:58,300
Because this will once again, make sure that your users,
229
00:11:58,300 --> 00:12:01,143
can reach the goal faster and more easily.
230
00:12:01,990 --> 00:12:04,630
Now the next rule is a very simple one,
231
00:12:04,630 --> 00:12:07,330
which is that you should use blue text
232
00:12:07,330 --> 00:12:11,090
and underline text only for links.
233
00:12:11,090 --> 00:12:15,070
So that's super important because users are so used
234
00:12:15,070 --> 00:12:19,860
to the pattern that links are blue or underlined like this,
235
00:12:19,860 --> 00:12:21,860
that you will really confuse them
236
00:12:21,860 --> 00:12:24,830
if you ever used underlined or blue text
237
00:12:24,830 --> 00:12:27,920
anywhere that is not a link.
238
00:12:27,920 --> 00:12:29,680
So in this second example,
239
00:12:29,680 --> 00:12:33,330
that blue and underlined United States text there
240
00:12:33,330 --> 00:12:37,840
very clearly looks like a link to you as well, right?
241
00:12:37,840 --> 00:12:40,800
But well, here it is actually not a link.
242
00:12:40,800 --> 00:12:43,910
And so this is very confusing and frustrating.
243
00:12:43,910 --> 00:12:45,363
And so don't do that,
244
00:12:46,240 --> 00:12:49,540
Next up, if you use animations in your design,
245
00:12:49,540 --> 00:12:52,210
make sure that they actually have a purpose
246
00:12:52,210 --> 00:12:53,693
and that they are fast.
247
00:12:54,560 --> 00:12:58,220
So don't use animations just because you can,
248
00:12:58,220 --> 00:13:01,310
because that might leave users confused.
249
00:13:01,310 --> 00:13:05,050
And many times it simply doesn't look professional.
250
00:13:05,050 --> 00:13:08,400
Also make sure that your animations are fast,
251
00:13:08,400 --> 00:13:11,680
like between 200 and 500 milliseconds.
252
00:13:11,680 --> 00:13:15,900
Because otherwise your users will perceive the interface
253
00:13:15,900 --> 00:13:18,490
as being slow and sluggish.
254
00:13:18,490 --> 00:13:23,310
So no one wants to wait for some animation to finish, right?
255
00:13:23,310 --> 00:13:26,400
Just take a look at this image here, fading in
256
00:13:26,400 --> 00:13:28,500
for two whole seconds.
257
00:13:28,500 --> 00:13:31,770
That looked really sluggish, right?
258
00:13:31,770 --> 00:13:33,740
Like, not professional.
259
00:13:33,740 --> 00:13:35,700
On the other hand, the next animation
260
00:13:35,700 --> 00:13:38,210
only takes 0.4 seconds.
261
00:13:38,210 --> 00:13:41,603
And that looks just right if you ask me.
262
00:13:42,440 --> 00:13:45,240
So, follow this rule whenever you do want
263
00:13:45,240 --> 00:13:48,010
to place animations in your design.
264
00:13:48,010 --> 00:13:50,440
Next up, when you design a form,
265
00:13:50,440 --> 00:13:52,580
it should be very easy to scan.
266
00:13:52,580 --> 00:13:56,040
And so in order to do that, you should align your labels
267
00:13:56,040 --> 00:13:59,140
and fields in one single vertical line,
268
00:13:59,140 --> 00:14:01,330
just in this example here.
269
00:14:01,330 --> 00:14:03,960
And another one about forms is that
270
00:14:03,960 --> 00:14:08,060
you should always offer good feedback for all the actions.
271
00:14:08,060 --> 00:14:11,290
So whatever happens after a form is submitted,
272
00:14:11,290 --> 00:14:14,560
should clearly be stated in your interface.
273
00:14:14,560 --> 00:14:18,060
Because otherwise that might be very frustrating.
274
00:14:18,060 --> 00:14:20,350
So for example, if this form here
275
00:14:20,350 --> 00:14:22,870
would successfully send an email,
276
00:14:22,870 --> 00:14:27,040
the user would expect to know that by the end, right?
277
00:14:27,040 --> 00:14:29,270
So you should display some kind of banner
278
00:14:29,270 --> 00:14:32,240
saying that your email has been sent.
279
00:14:32,240 --> 00:14:35,490
You should not just leave your user hanging and wondering
280
00:14:35,490 --> 00:14:39,560
if the email was actually sent successfully or not.
281
00:14:39,560 --> 00:14:43,990
And the final rule for usability of your interface is more
282
00:14:43,990 --> 00:14:48,750
about web applications, which is the law of locality.
283
00:14:48,750 --> 00:14:51,470
And what the law of locality says is that,
284
00:14:51,470 --> 00:14:55,130
basically whenever you have a button for a certain action
285
00:14:55,130 --> 00:14:58,810
in your user interface, you should place that button
286
00:14:58,810 --> 00:15:02,600
wherever that will actually create an effect.
287
00:15:02,600 --> 00:15:06,350
So in this example here, which is a simple to-do list.
288
00:15:06,350 --> 00:15:10,130
A new task will be added to the end of this list.
289
00:15:10,130 --> 00:15:13,020
And so therefore that is where the add task button
290
00:15:13,020 --> 00:15:14,900
is actually located.
291
00:15:14,900 --> 00:15:17,810
So this is what good UX for an action
292
00:15:17,810 --> 00:15:19,820
in a web application looks like.
293
00:15:19,820 --> 00:15:23,870
While bad UX design would be something like this.
294
00:15:23,870 --> 00:15:27,180
So having a button in a completely random place,
295
00:15:27,180 --> 00:15:29,100
which will then create an effect
296
00:15:29,100 --> 00:15:32,640
that is completely detached from the buttons location.
297
00:15:32,640 --> 00:15:34,790
Now, of course, this doesn't really apply
298
00:15:34,790 --> 00:15:37,400
to the typical call to action buttons
299
00:15:37,400 --> 00:15:41,030
that we have on something like marketing websites.
300
00:15:41,030 --> 00:15:42,640
But I still find it important
301
00:15:42,640 --> 00:15:44,673
to mention these rules here anyway.
302
00:15:45,580 --> 00:15:48,350
Now, if you want to know even more like this,
303
00:15:48,350 --> 00:15:49,670
then please just let me know
304
00:15:49,670 --> 00:15:52,570
in the Q and A area of this video.
305
00:15:52,570 --> 00:15:54,830
But now we're actually quickly gonna move on
306
00:15:54,830 --> 00:15:59,493
to some UX rules for the actual content of a website.
307
00:16:00,370 --> 00:16:04,010
And that's super important because the actual content
308
00:16:04,010 --> 00:16:07,280
is yet another area that really influences
309
00:16:07,280 --> 00:16:11,120
the way that users use your website.
310
00:16:11,120 --> 00:16:13,080
And so therefore we really need
311
00:16:13,080 --> 00:16:16,020
a couple of rules for creating content
312
00:16:16,020 --> 00:16:19,160
that creates a good User Experience.
313
00:16:19,160 --> 00:16:21,990
And first of all, what you should do is
314
00:16:21,990 --> 00:16:26,080
to write a very descriptive headline on your main page,
315
00:16:26,080 --> 00:16:29,730
which focuses on the keywords that best describe
316
00:16:29,730 --> 00:16:32,690
what your business actually does.
317
00:16:32,690 --> 00:16:36,440
So as always, here are a couple of examples of that.
318
00:16:36,440 --> 00:16:38,740
And if you read through these headlines,
319
00:16:38,740 --> 00:16:41,530
you will see that they actually really tell you
320
00:16:41,530 --> 00:16:45,740
what the business is all about all in one sentence.
321
00:16:45,740 --> 00:16:49,150
Now, many websites are actually way too vague
322
00:16:49,150 --> 00:16:51,130
or even too fancy here.
323
00:16:51,130 --> 00:16:54,570
And so please don't do anything like this.
324
00:16:54,570 --> 00:16:57,260
So for example, if you just read the headline
325
00:16:57,260 --> 00:16:59,087
of this website, which says,
326
00:16:59,087 --> 00:17:02,360
"Join the solar energy revolution."
327
00:17:02,360 --> 00:17:05,950
Well, what would that business really be about?
328
00:17:05,950 --> 00:17:09,320
So again, the main headline of the website
329
00:17:09,320 --> 00:17:12,940
should really, really convey what the business does
330
00:17:12,940 --> 00:17:15,760
or what the website is all about.
331
00:17:15,760 --> 00:17:18,820
Because once more, this will help your users
332
00:17:18,820 --> 00:17:21,040
reach their goal faster.
333
00:17:21,040 --> 00:17:23,440
Because how can they reach their goal
334
00:17:23,440 --> 00:17:27,250
if they are not even sure what the website is all about
335
00:17:27,250 --> 00:17:29,770
or what the business even does.
336
00:17:29,770 --> 00:17:31,490
Now, when you're actually deciding
337
00:17:31,490 --> 00:17:34,190
about the content of your website,
338
00:17:34,190 --> 00:17:37,490
make sure to only include relevant information
339
00:17:37,490 --> 00:17:41,110
and also to present it in an efficient way.
340
00:17:41,110 --> 00:17:44,870
So cut out all the fluff that you don't really need,
341
00:17:44,870 --> 00:17:48,340
like irrelevant images, text, illustrations,
342
00:17:48,340 --> 00:17:51,500
buttons, and so on and so forth.
343
00:17:51,500 --> 00:17:54,470
So everything that makes it onto the page
344
00:17:54,470 --> 00:17:57,000
should have a very clear purpose.
345
00:17:57,000 --> 00:17:58,810
And these two websites here
346
00:17:58,810 --> 00:18:01,490
actually do that really, really well.
347
00:18:01,490 --> 00:18:05,650
So you can pause the video and check them out if you'd like.
348
00:18:05,650 --> 00:18:08,730
Now, the reason why this is so important is that
349
00:18:08,730 --> 00:18:12,050
every time did we add an additional piece of content
350
00:18:12,050 --> 00:18:16,460
to the page, it will compete with all the other information
351
00:18:16,460 --> 00:18:19,580
that might be actually more relevant.
352
00:18:19,580 --> 00:18:22,870
And so in order to help your user understand
353
00:18:22,870 --> 00:18:26,090
what the product or the service is all about,
354
00:18:26,090 --> 00:18:30,440
make the content 100% clear and relevant.
355
00:18:30,440 --> 00:18:32,630
Now this doesn't mean that your website
356
00:18:32,630 --> 00:18:35,460
needs to be like super minimal
357
00:18:35,460 --> 00:18:38,950
and completely stripped down to the bare essentials.
358
00:18:38,950 --> 00:18:43,180
But just make sure that you don't include any fluff content
359
00:18:43,180 --> 00:18:46,180
that doesn't really add to the overall message
360
00:18:46,180 --> 00:18:48,140
that you're trying to convey.
361
00:18:48,140 --> 00:18:49,970
In following the same line,
362
00:18:49,970 --> 00:18:54,010
you should also use simple words for the actual text.
363
00:18:54,010 --> 00:18:57,180
Everyone prefers to read text that is simple.
364
00:18:57,180 --> 00:19:00,550
So avoid complicated and smart sounding words.
365
00:19:00,550 --> 00:19:04,430
And even more importantly, avoid technical jargon
366
00:19:04,430 --> 00:19:07,830
that might be relevant in your particular industry,
367
00:19:07,830 --> 00:19:11,320
but that your users might not even know about.
368
00:19:11,320 --> 00:19:15,700
So some people think that doing this makes them sound smart
369
00:19:15,700 --> 00:19:18,060
or knowledgeable in their field,
370
00:19:18,060 --> 00:19:22,320
but really what it does is to confuse your users.
371
00:19:22,320 --> 00:19:24,480
And you don't want that.
372
00:19:24,480 --> 00:19:27,120
And now finally, because I know
373
00:19:27,120 --> 00:19:30,540
that you're probably tired of listening to me.
374
00:19:30,540 --> 00:19:34,880
So the last one is that if you have a long text,
375
00:19:34,880 --> 00:19:38,490
then make sure to break up that long wall of text
376
00:19:38,490 --> 00:19:43,390
using subheadings images, block quotes, bullet points,
377
00:19:43,390 --> 00:19:45,850
and other things like that.
378
00:19:45,850 --> 00:19:49,180
And doing this is important because it will make the text
379
00:19:49,180 --> 00:19:51,970
actually look more interesting to read.
380
00:19:51,970 --> 00:19:55,500
If the user sees just one big wall of text,
381
00:19:55,500 --> 00:19:59,520
you can be pretty sure that they are going to just skip it.
382
00:19:59,520 --> 00:20:02,950
But if you do something like you see here on the right side,
383
00:20:02,950 --> 00:20:05,790
then that looks way more interesting.
384
00:20:05,790 --> 00:20:08,220
And so I believe that there will be a
385
00:20:08,220 --> 00:20:12,090
way higher user retention on this content.
386
00:20:12,090 --> 00:20:16,180
Okay. And that's actually it for this lecture.
387
00:20:16,180 --> 00:20:18,100
I hope that you found it useful
388
00:20:18,100 --> 00:20:20,570
and that you learned a couple of things
389
00:20:20,570 --> 00:20:22,420
and especially new things
390
00:20:22,420 --> 00:20:25,900
about this huge field of UX design.
391
00:20:25,900 --> 00:20:29,270
Again, we really just scratched the surface here.
392
00:20:29,270 --> 00:20:30,570
But this would be enough
393
00:20:30,570 --> 00:20:34,053
for a new aspiring web designer like you.
30067
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.