Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

05. web design

395 visualizaciones

Publicado el

Web design course December 2015

Publicado en: Diseño
  • Sé el primero en comentar

05. web design

  1. 1. Веб Дизайн Лекция 5, Функциональный дизайн Vladimir Tomberg, PhD Estonian Entrepreneurship University Mainor Октябрь 2015 Picturesource:http://usercenteredcontent.com
  2. 2. Презентация домашних работ 1. Краткое описание проекта 2. Три сайта с похожей идеей 3. Слоган 4. Цели бизнеса 5. Прототип посадочной страницы 6. Анализ аудитории 7. Персонажи 8. Сценарии и Раскадровки 2
  3. 3. Дизайн сайта vs. дизайн страниц • Когда пользователь использует сайт со сложной функциональностью, он вынужден терять много времени, перемещаясь вперед- назад между множеством страниц. Эти страницы нуждаются в объединение в отдельные маршруты, соответствующие целям разных людей; • Необходимо отличать дизайн сайта от дизайна страниц. Цель дизайна сайта — удовлетворение потребностей пользователей 3
  4. 4. Определение задач • Изучение аудитории помогает определить задачи пользователей. Задачи связаны с их целями; • Задачи могут быть простыми и очевидными, например, покупка книги. Но в то же время они могут дополняться другими, смежными задачами, например, поиск лучшей книги, поиск похожей книги, сообщение другу о найденной книге. Поддержка неочевидных целей отличает хороший сайт от среднего; • Из задач необходимо сделать список, распределив их в порядке важности 4
  5. 5. Анализ задач • Техника анализа задач заключается в разбиении больших задач на малые, подзадачи. Они выглядят, как описание шагов, необходимых пользователю для того, чтобы выполнить большую задачу; • Анализ задач полезен, поскольку помогает понять все шаги, необходимые пользователю и проанализировать их; • Анализ задач базируется на изучении персонажей и сценариях 5
  6. 6. Пример анализа задач: Регистрация на сайте • Типичная задача персонажа, разбитая на подзадачи: 1. Зайти на домашнюю страницу; 2. Найти ссылку на регистрацию. Цель — получить авторитетный и независимый совет; 3. Щелкнуть по ссылке; 4. Безошибочно заполнить все поля формы. Цель — доверить им мою информацию; 5. Увидеть экран подтверждения; 6. Получить по почте подтверждение регистрации; 7. Куда-нибудь записать полученные имя пользователя и пароль. 6
  7. 7. Работа с подзадачами • Разбивая задачи на подзадачи легко обратить внимание на то, каким образом избежать лишних ошибок пользователя. Например, если он неверно заполнит форму. (Пример — посылка подтверждения по почте); • Часто подобные задачи игнорируются разработчиками, хотя в некоторых случаях они могут играть критическую роль для достижения цели; • К отдельным подзадачам добавляются дизайнерские заметки, которые в последствии должны помочь выбрать правильное дизайн решение 7
  8. 8. Пример: Дизайнерские и маркетинговые заметки, связанные с потоком задач 1. Зайти на домашнюю страницу; Маркетинговое замечание: дополнительной мотивацией для регистрации могло бы быть специальное предложение. 2. Найти ссылку на регистрацию. Цель — получить авторитетный и независимый совет; Дизайн замечание: обеспечить визуальное ободрение. 3. Щелкнуть по ссылке; 4. Безошибочно заполнить все поля формы. Цель — доверить им мою информацию; Дизайн замечание: проявить внимательность, запрашивая личную информацию. Хорошая обработка ошибок критична для увеличения доверия. 8
  9. 9. Пример (2): Дизайнерские и маркетинговые заметки, связанные с потоком задач 5. Увидеть экран подтверждения; Дизайн заметка: связать этот экран со следующими действиями пользователя, “ознакомить пользователя с системой”. Сквозной нитью заботы о пользователе должна стать его уверенность в возможности всегда вернуться назад. 6. Получить по почте подтверждение регистрации; Дизайн заметка: также связать подтверждение регистрации с целью “ознакомить пользователя с системой”. Запросить пользователя ввести имя и пароль. 7. Куда-нибудь записать полученные имя пользователя и пароль. 9
  10. 10. Фокус на потоке задач • В данном примере нет ничего, связанного с интерфейсом. Фокус только на потоке задач пользователя. На этом этапе желательно избегать анализа интерфейса; • Анализ задач является хорошей возможностью найти все части задач, которые, возможно, не поддерживаются интерфейсом, они помогают найти новые и полезные функциональности сайта; • Анализ задач не делается для каждой мелочи — фокус необходим на сложных критических задачах, когда нет уверенности в лучшем варианте для пользователя 10
  11. 11. От анализа задач к веб страницам • Используя анализ задач можно идентифицировать страницы веб-сайта и то, как они взаимодействуют друг с другом; • Для начала определяются главные, корневые страницы и задачи, которые они выполняют. Детали интерфейса на этом этапе опускаются; • Когда корневые страницы определены, реализация дизайна интерфейса становится простым и понятным делом; • К корневым страницам добавляются страницы второстепенных задач и так далее 11
  12. 12. Пример: От анализа задач к веб страницам — E-mail агент Экраны корневых задач Просмотр входящих сообщений Чтение сообщения Написание сообщения Экраны вторичных задач Поиск адресов и сообщений Обслуживание папок Настройка учетной записи Обслуживание адресной книги 12
  13. 13. Пример: От анализа задач к веб страницам — E-mail агент Экраны корневых задач Просмотр входящих сообщений - Прочитать письмо, - Удалить письмо, - Переместить письмо Чтение сообщения - Ответить, - Читать следующее, - Добавить адресата в книгу Написание сообщения - Взять адресата из книги, - Добавить вложение, - Выбрать подпись. Экраны вторичных задач Поиск адресов и сообщений Обслуживание папок Настройка учетной записи Обслуживание адресной книги - Добавить адресата, - Импорт – экспорт, - Написать адресату, - Организовать папки Читать ОтветитьЧитать след. Добавить Обслужить 13
  14. 14. Документирование функциональности • Функциональные решения необходимы для общения с клиентами, дизайнерами и программистами, в каждом случае используется разный уровень детализации; • Лучшим инструментом для описания функциональности являются блок-схемы; • Особенно важным является использование блок-схем при общении с программистами 14
  15. 15. Пример: Простая блок-схема Экран с формой Следующий экран Форма валидна? да нет 15
  16. 16. Порция карты сайта в виде блок-схемы 16
  17. 17. Пример: Блок схема, показывающая процесс выполнения запроса 17Source: http://baks.gaz.ru
  18. 18. The Life Cycle of a Wireframe. © Nick Finck http://www.slideshare.net/nickf/the-life-cycle-of-a-wireframe-1522564 18
  19. 19. Задание 11 • Сделать анализ задач для каждого персонажа, руководствуясь написанным сценарием. Результат изложить в виде списков задач и опубликовать; 19
  20. 20. Дизайн интерфейса Макеты; Визуальные навигационные модели 20
  21. 21. Дизайн интерфейса и графический дизайн • Дизайн интерфейса и графический дизайн — разные понятия; • Дизайн интерфейса делает страницу функциональной, интуитивно понятной и совместимой с целями пользователя; • Графический дизайн предназначен для придания странице определенного вида, вызывающего некоторые чувства, то есть — стиля; • Интерфейс — это часть интерактивной системы. Он является соединителем между компанией, стоящей за веб сайтом и пользователем 21
  22. 22. Макеты (Каркасные сетки — wireframes) • Для работы с дизайном интерфейса используются макеты — каркасные сетки; • Каркасная сетка — это упрощенная схематическая компоновка будущей страницы. Она показывает элементы страницы и не показывает визуальный дизайн; • Назначение макета — обсуждение и тестирование интерфейса до применения визуального дизайна. Такой порядок работы экономит время и деньги 22
  23. 23. Пример: Типичная каркасная сетка top of page Link | Link | Link | Link © 2004 Some Corporation. | Privacy Statement Logo Home | Contact | FAQs Nav Nav Nav Nav Nav Search: Search Fig0.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, 2003 Lorem ipsum dolor sit amet, consectetuer adipiscing elit DD Month, 2003 Lorem ipsum dolor sit amet, consectetuer adipiscing elit Title Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Title Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 1 2 3 4 5 23
  24. 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 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, 2003 Lorem ipsum dolor sit amet, consectetuer adipiscing elit DD Month, 2003 Lorem ipsum dolor sit amet, consectetuer adipiscing elit Title Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Title Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 1 2 3 4 5 1 Notes Some notes about this section of the wireframe 2 Some notes about this section of the wireframe 3 Some notes about this section of the wireframe 4 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. 25. Опасность путаницы • Используя макеты в работе с клиентом необходимо точно дать ему понять, что это не визуальный дизайн. Надо объяснить ему, что визуальные элементы (иллюстрации, шрифты, цвета) будут обсуждаться позже; • Особенно нежелательно допускать, чтобы клиент распространял макет внутри своей организации. В последствии это может привести к негативному отношению людей к визуальному дизайну, от того, что они привыкли воспринимать в качестве такого дизайна каркасную сетку 25
  26. 26. Low-fidelity прототипы • Зачастую делаются из бумаги и не позволяют пользовательского взаимодействия; • Могут варьироваться от вручную нарисованных до распечатанных эскизов; • Помогают получить раннюю визуализацию альтернативных дизайн решений, стимулирующих инновации и улучшения Prototyping 26Source: http://www.bennadel.com
  27. 27. Pro toty pin 27 Video:https://www.youtube.com
  28. 28. Бумажное Прототипирование • Бумажное прототипирование это техника, которая включает в себя создание вручную рисунков пользовательских интерфейсов для быстрого дизайна, симуляции и оценки Prototyping 28Image source: http://www.sabazaidi.com
  29. 29. Где испольуется • Для обмена идеями: между дизайнерами, разработчиками, пользователями и другими участниками первых этапов процесса дизайна ориентированного на пользователя; • Как техника тестирования юзабилити: чтобы наблюдать человеческое взаимодействие с пользовательским интерфейсом перед тем как эти интерфейсы будут окончательно разработаны Prototyping 29
  30. 30. Пример бумажного прототипа Prototyping 30Source: http://www.rachelilansimpson.com
  31. 31. Преимущества Lo-Fi прототипов 1. Обнаружение и устранение проблем на ранних этапах ─ убирая детали, которые используются в high-fidelity прототипах, концепты сокращаются до их сути. Быстрое прототипирование позволяет решить до 80% проблем интерфейсов; 2. Быстрая и дешевая разработка ─ для построения Lo-Fi прототипов почти не требуются технические навыки; 3. Hi-Fi прототипы направляют внимание на эстетику продукта. Грубые Lo-Fi прототипы вынуждают пользователя думать больше о содержании, чем о внешнем виде; 4. Легкие изменения ─ поскольку для построеня low-fidelity прототипов требуется гораздо меньше сил и ресурсов, дизайнер меноьше сопротивляется серьезным изменениям; 5. Легко показать и переместить ─ Lo-Fi прототипы легко переносимы — они могут быть представлены на бумаге, слайдах или белой доске Prototyping 31
  32. 32. Задание 12: Создание бумажного прототипа • Создать бумажные прототипы для основных страниц сайта • Результаты сфотографировать и выложить • Прототипы принести с собой на лекцию для тестирования • NB! Это критическое задание. Кто не принесет в январе готовые прототипы, не будет аттестован по предмету 32

×