Как проектировать интерфейс

1 Дизайн всегда делается для людей

фото: evie22 (flickr)

2 Концептуальные подходы

Ориентация на пользователей

на задачи/цели пользователей

на деятельность пользователей

3 User-centered design

фот

о: E

dge

of S

pace

(flic

kr)

На слэдущей виходишь, дарагой?

44

пользователь?

55

пользователь?

человек!

6 Персоны

Ориентация на пользователей

на задачи/цели пользователей

на деятельность пользователей

6

МетодПерсон

фот

о: A

nton

io G

oya

(flic

kr)

7 Анализ целей пользователяф

ото:

ligh

tpla

ce (fl

ickr

)

8 Когнитивная психология

Действие состоит из следующих этапов:

формирование цели

формирование намерения

определение конкретных действий

выполнение действий

восприятие нового состояния системы

интерпретация изменений

оценка результата

1234567

9 Оптимизация действия

Хороший дизайн:

нагляден

имеет ясную концептуальную модель

указывает возможные действия

позволяет легко выполнить действия

говорит, находится ли система в необх. сост.

имеет хорошее соотв. между сост. и его отобр.

имеет внятную обратную связь

1234567

10 Сценарии использования

В сценариях описаны типовые «маршруты» пользователей при достижении целей

11 Прототипирование интерфейсовф

ото:

ww

w.D

aveW

ard.

net (

flick

r)

12

Прототип должен создаваться и редактироваться быстро.

13

Прототип должен создаваться и редактироваться быстро

очень быстро.

14 Бумажный прототипф

ото:

Sha

wn

Med

ero

(A L

ist A

part

)

15 Бумажный прототипф

ото:

Sha

wn

Med

ero

(A L

ist A

part

)

16 Бумажный прототип

фот

о: jc

river

a.ne

t

17 Скетч, иллюстрирующий идею

илл.: Константин Горский, Артем Горбунов

18 Структурный скетч

19 Прототип с графическим дизайном

20 Axure RP Pro

21 Axure RP Pro

Ориентирована на создание веб-сайтов.

Генерирует кликабельный HTML и документацию в формате MS Word.

Windows, Mac, $589

22 Caretta GUI Design Studio

23 Caretta GUI Design Studio

Специализированное средство, позволяющее создавать интерфейсы в разных визуальных стилях, аннотации к ним, раскадровки и т. д.

Можно экспортировать прототип.

Windows, $499

24 Balsamiq Mockups

25

Подходит для быстрого создания макетов интерфейсов.

Прототипы выглядят «рисованными».

Web, $79

Balsamiq Mockups

26 Adobe InDesign

27

Изначально рассчитана для верстки полиграфических материалов, тем не менее подходит и для отрисовки прототипов.

На выходе: кликабельный PDF

Windows, Mac, $699

Adobe InDesign

28 Adobe Fireworks

29

Специально предназначена для прототипирования интерфейсов.

На выходе: кликабельный PDF или HTML

Windows, Mac, $299

Adobe Fireworks

30 Adobe Dreamweaver

31

Предназначена для HTML-верстки

На выходе: кликабельный HTML

Windows, Mac, $399

Adobe Dreamweaver

32 Microsoft Expression Blend

33

Интегрируется с Visual Studio. Прототип можно преобразовывать в конечный продукт. Использует технологии Silverlight или WPF.

Windows, $499

Microsoft Expression Blend

34 Microsoft Visio

35

Возможно, вы уже знакомы с Visio.Можно создавать кликабельные HTML-прототипы

Windows, $560

Microsoft Visio

36 Microsoft Powerpoint

37

Powerpoint поддерживает интерактивные горячие точки, кторые можно использовать для переходов между слайдами, создавая кликабельный прототип.

Windows, Mac, $229

Microsoft Powerpoint

38

Для простых задач можно использовать любое средство, позволяющее рисовать.

Для сложных лучше выбрать специализированный инструмент.

Прототипирование: мораль

39