06. web design

Веб Дизайн

Лекция 6, Анализ задач, дизайн интерфейса

Vladimir Tomberg, PhD

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

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

Январь 2015

Pic

ture

sourc

e:

htt

p:/

/userc

ente

redconte

nt.

com

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

ПРЕЗЕНТАЦИЯ ДОМАШНИХ РАБОТ

2

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

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

3

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

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

4

Источник: https://enjoyableblog.wordpress.com

https://enjoyableblog.wordpress.com/2011/08/29/ashxarhi-amenaerkar-labirint/

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

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

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

• Поддержка неочевидных целей отличает хороший сайт от среднего;

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

5

Анализ задач

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

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

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

6

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

• Типичная задача персонажа, разбитая на подзадачи:

1. Зайти на домашнюю страницу;

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

3. Щелкнуть по ссылке;

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

5. Увидеть экран подтверждения;

6. Получить по почте подтверждение регистрации;

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

7

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

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

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

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

8

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

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

регистрации могло бы быть специальное предложение.

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

3. Щелкнуть по ссылке;

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

информацию. Хорошая обработка ошибок критична для увеличения

доверия.

9

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

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

пользователя, “ознакомить пользователя с системой”. Сквозной

нитью заботы о пользователе должна стать его уверенность в

возможности всегда вернуться назад.

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

целью “ознакомить пользователя с системой”. Запросить

пользователя ввести имя и пароль.

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

10

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

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

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

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

11

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

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

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

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

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

12

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

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

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

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

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

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

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

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

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

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

книги

13

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

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

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

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

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

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

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

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

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

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

Читать

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

Обслужить

14

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

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

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

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

15

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

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

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

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

да

нет

16

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

17

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

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

19

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

Задание 14. Анализ задач персонажей

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

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

20

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

21

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

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

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

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

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

22

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

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

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

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

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

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

24

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

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

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

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

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

26

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

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

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

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

27

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

28

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

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

29

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/

30

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

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

https://eek.mybalsamiq.com/projects

31

https://eek.mybalsamiq.com/projects

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

l ogobr adi ng

mai nnavi gat i on

mi nornavi gat i on

br andi ng,“ you ar e her e”

page cont ent

( can scr ol l )

secondar ycont ent

cont act det ai l s

what ’ s newsubscr i beadver t i secal endarcur r ent i ssue

magazi ne pr of i l eawar dscont act ussuppor t er s/ par t ner scr edi t scopyr i ghtpr i vacy

f r ont page:cover i magecover headl i nes

subscr i be:speci al deal sco- mar ket i ng

adver t i se:upcomi ng deadl i nes

cur r ent i ssue:cover i magecover headl i nes

cr edi t s:l ogo’ s

32

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

33

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

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

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

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

34

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

1. Изображения/чертежи/иллюстрации;

2. Контент (общее направление содержимого или фактический текст, если он готов);

3. Заголовок или глобальная навигация (навигационная панель или общие элементы, появляющиеся на каждой странице);

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

5. Первичные ссылки (предполагаемая навигация);

6. Вторичные ссылки;

7. Мультимедиа (если есть);

8. Целевой размер окна (например, 800x600; фактически очертить область и указать размеры в пикселях)

35

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.

36

http://www.lipsum.com/

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

37

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

Задание 15. Создание макетов

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

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

38

06. web design

Education