07. web design

Введение в Пользовательский Опыт

Лекция 7, Дизайн функциональности

Vladimir Tomberg, PhD

Эстонский Университет Прикладных Наук

по Предпринимательству Майнор

Ноябрь 2014

Pic

ture

sou

rce:

htt

p://

user

cent

ered

cont

ent.

com

http://usercenteredcontent.com/2014/06/09/what-is-user-centered-content/

Дизайн сайта и дизайн страниц

• Когда пользователь использует сайт со сложной функциональностью, он вынужден терять много времени, перемещаясь вперед-назад между множеством страниц. Эти страницы нуждаются в объединение в отдельные маршруты, соответствующие целям разных людей.

• Необходимо отличать дизайн сайта от дизайна страниц. Цель дизайна сайта — удовлетворение потребностей пользователей.

2

Определение задач

• Изучение аудитории помогает определить задачи пользователей. Задачи связаны с их целями.

• Задачи могут быть простыми и очевидными, например, покупка книги. Но в то же время они могут дополняться другими, смежными задачами, например, поиск лучшей книги, поиск похожей книги, сообщение другу о найденной книге. Поддержка неочевидных целей отличает хороший сайт от среднего.

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

3

Анализ задач

• Техника анализа задач заключается в разбиении больших задач на малые, подзадачи. Они выглядят, как описание шагов, необходимых пользователю для того, чтобы выполнить большую задачу.

• Анализ задач полезен, поскольку помогает понять все шаги, необходимые пользователю и проанализировать их.

• Анализ задач базируется на изучении пользователей и сценариях.

4

Пример анализа задач:Регистрация на сайте

• Типичная задача персонажа, разбитая на подзадачи:1. Зайти на домашнюю страницу;2. Найти ссыпку на регистрацию. Цель — получить авторитетный и

независимый совет;3. Щелкнуть по ссылке;4. Безошибочно заполнить все поля формы. Цель — доверить им мою

информацию;5. Увидеть экран подтверждения;6. Получить по почте подтверждение регистрации;7. Куда-нибудь записать полученные имя пользователя и пароль.

5

Работа с подзадачами

• Разбивая задачи на подзадачи легко обратить внимание на то, каким образом избежать лишних ошибок пользователя. Например, если он неверно заполнит форму. Другая идея — посылка подтверждения по почте.

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

• К отдельным подзадачам добавляются дизайнерские заметки, которые в последствии должны помочь выбрать правильное дизайн решение.

6

Пример: Дизайнерские и маркетинговые заметки, связанные с потоком задач

1. Зайти на домашнюю страницу;Маркетинговое замечание: дополнительной мотивацией для регистрации могло бы быть специальное предложение.

2. Найти ссыпку на регистрацию. Цель — получить авторитетный и независимый совет;Дизайн замечание: обеспечить визуальное ободрение.

3. Щелкнуть по ссылке;4. Безошибочно заполнить все поля формы. Цель — доверить им мою

информацию;Дизайн замечание: проявить внимательность, запрашивая личную информацию. Хорошая обработка ошибок критична для увеличения доверия.

7

Пример (2): Дизайнерские и маркетинговые заметки, связанные с потоком задач

5. Увидеть экран подтверждения;Дизайн заметка: связать этот экран со следующими действиями пользователя, “ознакомить пользователя с системой”. Сквозной нитью заботы о пользователе должна стать его уверенность в возможности всегда вернуться назад.

6. Получить по почте подтверждение регистрации;Дизайн заметка: также связать подтверждение регистрации с целью “ознакомить пользователя с системой”. Запросить пользователя ввести имя и пароль.

7. Куда-нибудь записать полученные имя пользователя и пароль.

8

Фокус на потоке задач

• В данном примере нет ничего, связанного с интерфейсом. Фокус только на потоке задач пользователя. На этом этапе желательно избегать анализа интерфейса.

• Анализ задач является хорошей возможностью найти все части задач, которые, возможно, не поддерживаются интерфейсом, они помогают найти новые и полезные функциональности сайта.

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

9

От анализа задач к веб страницам

• Используя анализ задач можно идентифицировать страницы веб-сайта и то, как они взаимодействуют друг с другом.

• Для начала определяются главные, корневые страницы и задачи, которые они выполняют. Детали интерфейса на этом этапе опускаются.

• Когда корневые страницы определены, реализация дизайна интерфейса становится простым и понятным делом.

• К корневым страницам добавляются страницы второстепенных задач и так далее.

10

Пример: От анализа задач к веб страницам — E-mail агент

Экраны корневых задач

Просмотр входящих сообщений

Чтение сообщения

Написание сообщения

Экраны вторичных задач

Поиск адресов и сообщений

Обслуживание папок

Настройка учетной записи

Обслуживание адресной

книги

11

Пример: От анализа задач к веб страницам — E-mail агент

Экраны корневых задач

Просмотр входящих сообщений- Прочитать письмо,- Удалить письмо,- Переместить письмо

Чтение сообщения- Ответить,- Читать следующее,- Добавить адресата в книгу

Написание сообщения- Взять адресата из книги,- Добавить вложение,- Выбрать подпись.

Экраны вторичных задач

Поиск адресов и сообщений

Обслуживание папок

Настройка учетной записи

Обслуживание адресной книги- Добавить адресата,- Импорт – экспорт,- Написать адресату,- Организовать папки

Читать

ОтветитьЧитать след.Добавить

Обслужить

12

Документирование функциональности

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

• Лучшим инструментом для описания функциональности являются блок-схемы.

• Особенно важным является использование блок-схем при общении с программистами.

13

Пример:Простая блок-схема

Экран с формой

Следующий экран

Форма валидна?

да

нет

14

Порция карты сайта в виде блок-схемы

15

Пример: Блок схема, показывающая процесс выполнения запроса

16Source: http://baks.gaz.ru

http://baks.gaz.ru/oradoc/Developer/Forms/Triggers/appendix.htm





The Life Cycle of a Wireframe. © Nick Finckhttp://www.slideshare.net/nickf/the-life-cycle-of-a-wireframe-1522564

17

http://www.slideshare.net/nickf/the-life-cycle-of-a-wireframe-1522564

Задание

• Сделать анализ задач для каждого персонажа, Руководствуясь написанным сценарием. Результат изложить в виде перечня задач каждого и опубликовать;

• Создать блок-схемы, иллюстрирующие последовательность важнейших действий пользователя

18

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

Макеты;Визуальные навигационные

модели

19

Дизайн интерфейса и визуальный дизайн

• Дизайн интерфейса и визуальный дизайн — разные понятия.

• Дизайн интерфейса делает страницу функциональной, интуитивно понятной и совместимой с целями пользователя.

• Визуальный дизайн предназначен для придания странице определенного вида, вызывающего некоторые чувства, то есть — стиля.

• Интерфейс — это часть интерактивной системы. Он является соединителем между компанией, стоящей за веб сайтом и пользователем.

20

Макеты (Каркасные сетки — wireframes)

• Для работы с дизайном интерфейса используются макеты — каркасные сетки.

• Каркасная сетка — это упрощенная схематическая компоновка будущей страницы. Она показывает элементы страницы и не показывает визуальный дизайн.

• Назначение макета — обсуждение и тестирование интерфейса до применения визуального дизайна. Такой порядок работы экономит время и деньги.

21

Пример: Типичная каркасная сетка

top of page

Link | Link | Link | Link

© 2004 Some Corporation. | Privacy Statement

Logo

Home | Contact | FAQs

Nav Nav Nav Nav Nav

Search: Search

Fig 0.0 {Project} Homepage

Feature

Title

Project Title Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

View project details View more projects

Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

See how Georgia Transmission is helping our environment.

News

DD Month, 2003Lorem ipsum dolor sit amet, consectetuer adipiscing elit


Title


Title


1

2

3

4

5

22

Пример: каркасная сетка с комментариями

top of page

Link | Link | Link | Link

© 2004 Some Corporation. | Privacy Statement

Logo

Home | Contact | FAQs

Nav Nav Nav Nav Nav

Search: Search

Fig 0.0 {Project} Homepage

Feature

Title

Project Title Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

View project details View more projects

Title


See how Georgia Transmission is helping our environment.

News



Title


Title


1

2

3

4

5

1

Notes

Some notes about this section of the wireframe

2 Some notes about this section of the wireframe



5 Used to show content continues (so we don't have to show a full page of stuff). You'll find this and other widgets on the bottom layer of this file. 23

Опасность путаницы

• Используя макеты в работе с клиентом необходимо точно дать ему понять, что это не визуальный дизайн. Надо объяснить ему, что визуальные элементы (иллюстрации, шрифты, цвета) будут обсуждаться позже;

• Особенно нежелательно допускать, чтобы клиент распространял макет внутри своей организации. В последствии это может привести к негативному отношению людей к визуальному дизайну, от того, что они привыкли воспринимать в качестве такого дизайна каркасную сетку.

24

Инструментарий

• Для работы с каркасными сетками подходит любой графический редактор, а также MS Visio;

• NB! Нежелательно использовать в качестве инструментария HTML, поскольку из-за специфического “HTML - вида” при этом остается риск путаницы с визуальным дизайном;

• Желательно использовать только черно-белую гамму и не использовать изображения, например, вместо изображения логотипа помещать прямоугольник с надписью “Logo” или “Логотип”

25

Примеры библиотек для каркасных сеток

26

Инфографика о разных инструментах прототипирования

• http://www.usertesting.com/blog/2012/10/23/the-ultimate-wireframing-tools-guide/

27

http://www.usertesting.com/blog/2012/10/23/the-ultimate-wireframing-tools-guide/



20 Excellent Wireframing Tools for Mobile

• http://mashable.com/2013/04/02/wireframing-tools-mobile/

28

http://mashable.com/2013/04/02/wireframing-tools-mobile/

http://mashable.com/2013/04/02/wireframing-tools-mobile/

Для желающих – регистрация на сайте MyBalsamiq

https://eek.mybalsamiq.com/projects

29

https://eek.mybalsamiq.com/projects

Пример: каркасная сетка

l ogobradi ng

mai nnavi gat i on

mi nornavi gat i on

brandi ng,“you are here”

page cont ent

( can scrol l )

secondarycont ent

cont act det ai l s

what ’ s newsubscr i beadver t i secal endarcur rent i ssue

magazi ne profi l eawardscont act ussuppor t er s/ par t ner scredi t scopyr i ghtpr i vacy

f ront page:cover i magecover headl i nes

subscr i be:speci al deal sco- market i ng

adver t i se:upcomi ng deadl i nes

cur rent i ssue:cover i magecover headl i nes

credi t s:l ogo’ s

30

Пример: визуальный дизайн, основанный на каркасной сетке

31

Для каких страниц нужны макеты

• Макеты помогают общаться. Они помогают выразить идеи и являются основой для визуального дизайна и производства HTML;

• Настоятельно рекомендуется создать макеты для всех основных, вторичных и шаблонизированных страниц (имеющих схожее содержимое, расположение и компоновку), а также для всех страниц с уникальными функциональными возможностями;

• Страницы третьего и четвертого уровней обычно текстовые, поэтому для них макеты зачастую бывают не нужны

32

Что может отражаться в макете

1. Изображения/чертежи/иллюстрации;2. Контент (общее направление содержимого или фактический текст,

если он готов);3. Заголовок или глобальная навигация (навигационная панель или

общие элементы, появляющиеся на каждой странице);4. Функциональные возможности (описание основных функциональных

возможностей страницы);5. Первичные ссылки (предполагаемая навигация);6. Вторичные ссылки;7. Мультимедиа (если есть);8. Целевой размер окна (например, 800x600; фактически очертить

область и указать размеры в пикселях)

33

Loren ipsum• При разработке макетов и визуального

дизайна часто случается, что разработчику еще не доступно текстовое содержание сайта.

• Для того, чтобы иметь представление о том, как сайт будет выглядеть с текстом, используют специальные текстогенераторы.

• Традиционно, для латинского алфавита используется набор латинских слов “Loren ipsum”. Существует много программ для его генерации.

• Аналогичные генераторы текста имеются и для русского языка.

• http://www.lipsum.com/

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ultricies, mi sit amet aliquet gravida, purus pede sollicitudin turpis, ac bibendum nisl orci nec justo. Aliquam erat volutpat. Donec vestibulum fermentum nibh. Morbi congue. Etiam faucibus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet justo sit amet lectus semper porttitor. Donec commodo orci.

• Aenean vehicula lacus ac nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse sed elit quis mi aliquet sodales. Quisque semper, magna eu imperdiet pulvinar, turpis ligula volutpat orci, nec vestibulum orci tellus vel mauris. Nullam bibendum leo pellentesque urna. Suspendisse rhoncus erat in eros.

• Etiam enim tortor, porttitor a, suscipit nec, bibendum at, eros. Duis ligula nunc, luctus quis, ullamcorper at, pretium sed, dui.

34

http://www.lipsum.com/

Рыбаhttp://www.artlebedev.ru/everything/backstage/fish/

35

http://www.artlebedev.ru/everything/backstage/fish/

Визуальные навигационные модели

• Есть много различных подходов к визуальной навигации; все они служат тому, чтобы направить пользователей к желательному действию или через него. Существуют четыре основные визуальные навигационные модели:1. Направленная;2. Поисковая;3. Последовательная навигация; 4. Навигация с вкладками

• Следует отметить, что большинство сайтов использует комбинацию из двух и более моделей.

36

Направленная навигация• Направленная навигация

вынуждает сделать выбор сразу на входе. Эта навигационная модель обычно используется, чтобы разделить аудиторию по соответствующим ее интересам разделам содержимого сайта;

• В случае bananarepublic.com это разделы для мужчин, для женщин, обувь и подарки 37

Пример: направленная навигацияhttp://www.bananarepublic.com

Men Shoes Jewelry GiftsPetitesWomen Checkout

Promotion

Site Name Account / Sign in

Advertising

Sign Up Promotion

Footer

Secondary navigation

38

Поисковая навигация• Поисковая навигация

используется, прежде всего, на поисковых или информационных сайтах, в которых лучшим способом перемещения к желаемому содержанию являются ключевые слова

39

Пример: поисковая навигацияhttp://www.google.ru

Logo

keyword

Search Fast Search

Content

40

Последовательная навигация• Последовательная навигация

ведет пользователя по однозначному, предопределенному пути. В основной навигации эта модель встречается редко, но ее можно увидеть в местах с последовательностью папок или при просмотре слайдов с помощью кнопок Следующий/ Предыдущий (Next /Previous) или Вперед/Назад (Forward /Back).

41

Пример: последовательная навигацияhttp://www.adammoore.com

Image

Link

Link

Navigation aid

ForwardBack Up

Image

Image

Image

Image

Image

42

Навигация с закладками• Навигация с закладками

предлагает пользователю информацию, а не заставляет искать ее;

• Напоминающая бумажные папки с разделителями, знакомые каждому, эта навигационная модель позволяет легко разобраться в строго классифицированной информации, как показано в примере.

43

Пример: навигация с закладкамиhttp://www.cooking.com

Content

ImageHome Special Gifts Registry Recipes

Sub nav Sub nav Sub nav Sub nav Sub nav

Logo

44

Выбор типа навигации

• В конечном итоге разобраться с тем, какой тип или типы навигации использовать, помогают сценарии;

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

45

Задание

• Исходя из функциональностей, анализа задач и сценариев каждого персонажа выбрать для них подходящие типы навигации;

• Используя эти типы создать макеты всех ключевых уровней сайта. Использовать библиотеки MS Visio для каркасных сеток (догрузить недостающие);

• Прокомментировать важнейшие элементы, как показано на слайдах 24 и 31

46

Тестирование на прототипах

Бумажные прототипы;Программные прототипы

47

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

• Одним из самых простых и наименее формальных методов быстрого выяснения достоверного мнения пользователей является проверка на бумажных прототипах. Это могут быть схемы сайта, начерченные на бумаге вручную, или макеты страниц, собранные из распечатанных элементов;

• Модели позволяют выявить и устранить некоторые недостатки в самом начале, не внося их в практические разработки. Изменения в бумажных прототипах можно сделать быстро - даже во время испытания, - и разработчики смогут сразу отреагировать на выявленные недостатки

48

Пример: работа с прототипом

49

Библиотеки элементов для бумажных прототипов

• Инструментальные средства для моделирования на бумаге можно бесплатно загрузить на

http://www.infodesign.com.au/usabilityresources/design/paperprototypinggraphics.asp

50




Программные прототипы

• В некоторых случаях возможна замена бумажных прототипов программными. Они также позволяют проводить проверку юзабилити до начала работ, связанных с программированием и оформлением;

• Одним из популярных инструментов является Denim, разработанный в Калифорнийском университете

51

Denim

52

53

Элементы дизайна страницы

54

Выборочные ощущения

• Зрительное восприятие не является пассивным получением оптической информации из окружающего мира. Это активный процесс, сопровождающийся выбором и фильтрацией.

• Мы видим те вещи, которые ожидаем увидеть, которые мы знаем, и которые, как мы предполагаем, могут потребовать нашего внимания.

• Наш мозг отсекает большую часть окружающих предметов и обрабатывает лишь те, которые имеют для нас субъективную значимость.

55

Пример зрительной фильтрации

56

Выборочные ощущения применительно к дизайну страниц

• Для дизайна экранного содержания это означает, что пользователь воспринимает и использует это содержание, как структурированную композицию разных элементов.

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

57

Концепция• Перед тем, как создавать продукт, создается концепция дизайна

экранных страниц. В этом помогут следующие рекомендации:1. Создавая дизайн, рассматривайте его содержание, как отдельные

единицы. Пользователи мыслят также. Размещая элементы экрана, добивайтесь, чтобы они существовали во взаимодействии с другими элементами.

2. Будьте последовательны, позвольте пользователю знакомиться с вашими продуктами в гармонии.

3. Решайте отдельно для каждой аудитории, насколько фривольной или структурированной должна быть ваша композиция экрана. Не принижайте уровень пользователей, но и не ожидайте от него слишком много, располагая экранные элементы.

58

Зрительное сканирование изображения

“Зрительный процесс означает нахождение отличительных возможностей объекта.”

Рудольф Арнхейм• Таким образом мозг получает ориентацию во всем

содержании. Следующим шагом является более пристальное рассматривание этих отличительных возможностей.

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

59

Пример 1:Сканирование экрана глазами

60


61


62

Законы целостности и их применение

• В начале ХХ века несколько психологов описали последовательности человеческого восприятия в нескольких “законах целостности” (Gestalt law):1. Закон близости;2. Закон схожести;3. Закон симметрии;4. Закон правильного продолжения;5. Закон простоты;6. Закон опыта.

Эти законы помогают на практике располагать элементы экрана таким образом, чтобы они соответствовали человеческому восприятию.

63

Закон близости

• Элементы, которые располагаются в пространстве ближе друг к другу, воспринимаются как находящиеся вместе.

64

Пример: google.comПрименение закона близости

65

Закон схожести• Элементы, которые выглядят похоже друг

на друга, воспринимаются человеком, как находящиеся вместе.

66

Пример: www.kiwilogic.comПрименение закона схожести

http://www.kiwilogic.com/

67

Закон симметрии• Элементы, располагающиеся симметрично

друг-другу, воспринимаются как единое целое.

68

Закон симметрии

• Симметричные структуры воспринимаются как фигуры, находящиеся на переднем плане. Асимметричные структуры ассоциируются с фоном.

• Симметричное расположение элементов создает строгую структуру, асимметричное расположение приводит к потере элементов на экране.

69

Пример: www.new-rexton.ruПрименение закона симметрии

70

Закон правильного продолжения

• Элементы, располагающиеся в некоторой целостности (например, на линии), воспринимаются как находящиеся вместе.

71

Пример: www.be-lufthansa.comПрименение закона правильного продолжения

72

Закон простоты

• Визуальное восприятие склонно к простой и последовательной организации элементов. Простые и выдержанные структуры лучше отличаются от фона.

• Обеспечение максимально возможно простой структуры элементов экрана способствует концентрации пользователя на содержании.

73

Пример: www.nestle.co.ukПрименение закона простоты

74

Пример: www.lavazza.comЗакон простоты нарушен

75

Закон опыта• Визуальное восприятие всегда

возвращается к предыдущему опыту и автоматически завершает незаконченную последовательность.

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

76

Пример: www.hush-puppies.comЗакон опыта

07. web design

Education