WEBVTT

1
00:00:00.000 --> 00:00:03.360
User Interface Design Patterns
are recurring components

2
00:00:03.360 --> 00:00:07.280
which designers use
to solve common problems in interfaces.

3
00:00:07.360 --> 00:00:09.960
like, for example,
when we think about those regular things

4
00:00:09.960 --> 00:00:15.000
that often are repeating themselves
to kind of appear in, you know, in complex environments

5
00:00:15.000 --> 00:00:18.640
We need to show things that matter to
people when they matter and nothing else.

6
00:00:18.640 --> 00:00:19.280
Right.

7
00:00:19.280 --> 00:00:21.080
it's just really sad what we see.

8
00:00:21.080 --> 00:00:24.600
Like, for example,
if you look at Sears, right?

9
00:00:24.680 --> 00:00:27.200
Sears is just one of the many e-commerce sites,

10
00:00:27.200 --> 00:00:29.240
you know, nothing groundbreaking here.

11
00:00:29.240 --> 00:00:33.160
So you click on one of the filters
and then the entire interface freezes

12
00:00:33.240 --> 00:00:36.720
and then there is a refresh
and you're being scrolled up.

13
00:00:36.800 --> 00:00:40.320
And I always ask myself,
is this really the best we can do?

14
00:00:40.400 --> 00:00:43.720
Is really the best kind of interface
for filtering that we can come up with,

15
00:00:43.800 --> 00:00:47.120
or can we do it a bit better?
Because we can do it a bit better.

16
00:00:47.120 --> 00:00:50.200
So this is a great example
where you have galaxies and then galaxies,

17
00:00:50.200 --> 00:00:52.200
you have all this filters
which are in rows.

18
00:00:52.200 --> 00:00:55.640
Sometimes they take three rows,
sometimes four or sometimes five rows.

19
00:00:55.880 --> 00:00:56.400
That's okay.

20
00:00:56.400 --> 00:01:00.640
Show people filters, show people buttons
if they important show them.

21
00:01:00.720 --> 00:01:01.240
Right.

22
00:01:01.240 --> 00:01:03.920
But what's important here,
what I really like

23
00:01:03.920 --> 00:01:06.440
is we do not automatically refresh.

24
00:01:06.440 --> 00:01:11.200
Instead, we go ahead and say, "Hey, choose
asmany filters as you like", right?

25
00:01:11.440 --> 00:01:14.360
And then whenever
you click on show results,

26
00:01:14.360 --> 00:01:17.360
it's only then when you actually get an update
coming up in the back.

27
00:01:17.560 --> 00:01:19.680
Which I think is perfectly fine.

28
00:01:19.680 --> 00:01:22.240
You don't need to auto
update all the time.

29
00:01:22.240 --> 00:01:23.720
And that's especially critical

30
00:01:23.720 --> 00:01:26.200
when you're actually talking
about the mobile view.

31
00:01:26.200 --> 00:01:27.200
The filter.

32
00:01:27.200 --> 00:01:32.480
Sure, why not? Slide in, slide out,
although I probably prefer accordions instead.

33
00:01:32.480 --> 00:01:34.280
And you just click on show products

34
00:01:34.280 --> 00:01:38.160
and it's only then when you return back
to the other selection of filters

35
00:01:38.240 --> 00:01:40.880
and only when you click okay, show
all products,

36
00:01:40.880 --> 00:01:44.360
then you actually get to load
all the products, right?

37
00:01:44.440 --> 00:01:47.280
Designing good UI patterns is important

38
00:01:47.280 --> 00:01:51.600
because it leads to a better user
experience, reduces usability issues,

39
00:01:51.840 --> 00:01:56.680
and ultimately contributes to the success
of a product or application.

40
00:01:56.760 --> 00:02:01.120
It's a critical aspect of user centered
design and product development.