Константин Горский — «Дизайн интерфейсов»
TRANSCRIPT
руководитель службы дизайна веб-интерфейсов
Дизайн интерфейсов
Константин Горский
Phot
o ©
yan
dex
Phot
o ©
yan
dex
5 Фот
о по
льзо
вате
ля m
oriz
a с
сайт
а fli
ckr.c
om
Фронтенд
6
Дизайнеры — люди творческие
Фот
о по
льзо
вате
ля m
oriz
a с
сайт
а fli
ckr.c
om
7
Про что дизайнеры нередко забывают
как всё будет выглядеть в старых браузерах?
что произойдет, когда мы подставим реальные данные?
особенно если эти данные не будут вмещаться
какими будут анимации, ховеры и переходы?
как должна вести себя страница при изменении размеров окна браузера?
8
Хорошо дизайнит тот, кто дизайнит последним.
— Артём Поликарпов
Что такое дизайн
1
»?
!"#":
Ado
be
2
!"#$%&'()&**$& +$*'(,"-,$).*-& /,�&(*$1$ 0-,.; ,.2,.3$(+. $3,.24$) ,.4-$*.56*$1$ /$'(,$&*-7 /,�&(*$8 ',	
!"#$. design — %&'()*+&',!*-, .(&*+*-, /!012!*-, ! *!)3( %&'()*, %$!", &+41"')
11
12
People think that the designers are told, 'Make it look good!'
That's not what we think design is. It's not just what it looks like and feels like.
Design is how it works.
Дизайн — это сознательные и интуитивные усилия по созданию значимого порядка.
13
Дизайн — это создание.
14
15
привлекательностьЛюди
Бизнес жизнеспособность
Технологии осуществимость
Что такое хороший дизайн?
16
10 принципов хорошего дизайнаДитера Рамса
17
12!"#"
Smar
tMar
mot
$ $%&
#% '
ickr
.com
18
13!"#"
Smar
tMar
mot
$ $%&
#% '
ickr
.com
18
19
14!"#"
donc
hris!
™ $ $%&#% 'i
ckr.c
om
20
Процесс дизайна
22
Исследование Интерпретация Идея Эксперимент Эволюция
1 2 3 4 5
1
!"#": evie22 ($ickr)
23
Исследование
Изучение историиИзучение рынкаНаблюденияЭтнографические иссл.Интервью экспертовСтатистикаВдохновение
Phot
o by
evi
e22
@ fl
ickr
.com
1
24
Интерпретация
Пересказ историйУпорядочиваниеАнализ Заключения и выводыПостановка задачиОбозначение рамок
Phot
o fr
om id
eo.c
om
2
25
Формирование идей
Мозговые штурмыКреативные техникиСовершенствование
Phot
o fr
om id
eo.c
om
3
26
27
28
29
30
31
32
`
Эксперименты
МакетированиеПрототипированиеОценкаЮзабилити-тесты
Phot
o fr
om id
eo.c
om
4
33
34
36
37
Достаточно ли картинки?
38
Достаточно ли картинки?Действие состоит из следующих этапов:1. Формирование цели2. Формировние намерения3. Определение конкретных действий4. Выполнение действий5. Восприятие нового состояния системы6. Интерпретация изменений7. Оценка результата
39
Достаточно ли картинки?Хороший дизайн:1. Нагляден2. Имеет ясную концептуальную модель3. Указывает возможные действия4. Позволяет легко выполнить действия5. Говорит, находится ли система в необх. сост.6. Имеет хорошее соотв. между сост. и его отобр.7. Имеет внятную обратную связь
40
41
42
43
Дизайн должен подсказывать, какие действия возможны в данный момент.
Дизайн должен быть наглядным.
44
Вопрос: в каком разделе я нахожусь?
45
46
47
48
49
50
51
52
53
Что такое юзабилити?
54
55
Определение из ISO 9241-11
Юзабилити — это степень эффективности, трудоемкости и удовлетворенности, с которыми продукт может быть использован определенными пользователями при определенном контексте использования для достижения определенных целей. Usability — the extent to which a product can be used by specified users to achieve specified goals with efficiency, effectiveness and satisfaction in a specified context of use.
56
Юзабилити-лаборатория
57
Юзабилити-лаборатория
58
Многие задачи невозможно решить одними только интеллектуальными усилиями, нужны эксперименты.
62
Эволюция
РазработкаЗапускИзучениеСовершенствование
Phot
o fr
om id
eo.c
om
5
63
64
65
66
67
68
69
70
71
72
73
74
75
76 Фот
о по
льзо
вате
ля m
oriz
a с
сайт
а fli
ckr.c
om
78
79
Что дальше?
alistapart.com smashingmagazine.com ilovetypography.com
87
Простота — необходимое условие прекрасного.Л. Н. Толстой
