05. web design

Веб Дизайн

Лекция 5, Функциональный дизайн Vladimir Tomberg, PhD

Estonian Entrepreneurship University Mainor

Октябрь 2015

Pic

ture

sou

rce:

http

://us

erce

nter

edco

nten

t.com

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

Презентация домашних работ

1. Краткое описание проекта2. Три сайта с похожей идеей3. Слоган4. Цели бизнеса5. Прототип посадочной страницы6. Анализ аудитории7. Персонажи8. Сценарии и Раскадровки

2

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

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

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

3

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

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

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

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

4

Анализ задач

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

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

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

5

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

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

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

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

6

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

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

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

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

7

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

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

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

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

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

8

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

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

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

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

9

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

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

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

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

10

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

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

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

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

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

11

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

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

Просмотр входящих

сообщений

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

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

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

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

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

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

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

книги

12

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

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

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

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

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

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

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

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

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

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

Читать

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

Обслужить

13

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

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

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

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

14

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

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

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

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

нет

15

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

16

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

17Source: 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

18

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

Задание 11

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

19

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

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

модели

20

Дизайн интерфейса и графический дизайн

• Дизайн интерфейса и графический дизайн — разные понятия;

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

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

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

21

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

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

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

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

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

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

23

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

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. 24

Опасность путаницы• Используя макеты в работе с клиентом необходимо

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

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

25

26Prototyping

Low-fidelity прототипы• Зачастую делаются из

бумаги и не позволяют пользовательского взаимодействия;

• Могут варьироваться от вручную нарисованных до распечатанных эскизов;

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

Source: http://www.bennadel.com

http://www.bennadel.com/blog/2473-the-ux-of-prototyping-low-fidelity-is-the-new-high-fidelity.htm

27Prototyping

Video:https://www.youtube.com

https://www.youtube.com/watch?v=V8LNDqMIapY



28Prototyping

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

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

Image source: http://www.sabazaidi.com

29Prototyping

Где испольуется

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

• Как техника тестирования юзабилити: чтобы наблюдать человеческое взаимодействие с пользовательским интерфейсом перед тем как эти интерфейсы будут окончательно разработаны

30Prototyping

Пример бумажного прототипа

Source: http://www.rachelilansimpson.com

http://www.rachelilansimpson.com/blog

31Prototyping

Преимущества Lo-Fi прототипов1. Обнаружение и устранение проблем на ранних этапах ─ убирая

детали, которые используются в high-fidelity прототипах, концепты сокращаются до их сути. Быстрое прототипирование позволяет решить до 80% проблем интерфейсов;

2. Быстрая и дешевая разработка ─ для построения Lo-Fi прототипов почти не требуются технические навыки;

3. Hi-Fi прототипы направляют внимание на эстетику продукта. Грубые Lo-Fi прототипы вынуждают пользователя думать больше о содержании, чем о внешнем виде;

4. Легкие изменения ─ поскольку для построеня low-fidelity прототипов требуется гораздо меньше сил и ресурсов, дизайнер меноьше сопротивляется серьезным изменениям;

5. Легко показать и переместить ─ Lo-Fi прототипы легко переносимы — они могут быть представлены на бумаге, слайдах или белой доске

Задание 12:Создание бумажного прототипа

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

• Результаты сфотографировать и выложить• Прототипы принести с собой на лекцию для

тестирования• NB! Это критическое задание. Кто не

принесет в январе готовые прототипы, не будет аттестован по предмету

32

Design

05. web design