Константин Горский — «Дизайн интерфейсов»

руководитель службы дизайна веб-интерфейсов

Дизайн интерфейсов

Константин Горский

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

!"#$%&'()&**$& +$*'(,"-,$).*-& /,&#0&(*$1$ 0-,.; ,.2,.3$(+. $3,.24$) ,.4-$*.56*$1$ /$'(,$&*-7 /,&#0&(*$8 ',&#9

!"#$. 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

Простота — необходимое условие прекрасного.Л. Н. Толстой

Спасибо! Константин Горскийgorskiy@yandex-team.ru@k00