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.
Проектирование Пользовательских Интерфейсов 
Vladimir Tomberg, PhD 
Эстонский Университет Прикладных Наук 
по Предпринимат...
Интерфейс (от англ. interface — поверхность раздела, 
перегородка) — совокупность средств и методов взаимодействия 
между ...
Пользовательский интерфейс 
• Интерфейс пользователя, он же 
пользовательский интерфейс (UI — англ. 
user interface) — раз...
Где тут интерфейс? 
4 
Кофейник 
Проектирование 
Пользовательских 
Интерфейсов
Кофейник Карельмана 
При наличии стандартной функциональности этот 
интерфейс работать не будет 
5 
Проектирование 
Пользо...
Пользовательский опыт 
• Дизайн пользовательского интерфейса – 
это не рисование кнопок. Прежде всего – 
это изучение поль...
Что включает в себя UxD? 
7 
Проектирование 
Пользовательских 
Интерфейсов
Что включает в себя UxD? 
8 
Проектирование 
Пользовательских 
Интерфейсов
Архитектура 
Проектирование 
Пользовательских 
Интерфейсов 
https://www.facebook.com/BrandNewGeorgia 9
Что включает в себя UxD? 
10 
Проектирование 
Пользовательских 
Интерфейсов
Промышленный дизайн 
Source http://challenge.cgsociety.org 
11 
Проектирование 
Пользовательских 
Интерфейсов
Что включает в себя UxD? 
12 
Проектирование 
Пользовательских 
Интерфейсов
Проектирование пользовательского 
взаимодействия (IxD) 
13 
Проектирование 
Пользовательских 
Интерфейсов
Проектирование пользовательского 
взаимодействия (IxD) 
• Проектирование пользовательского 
взаимодействия отвечает за кон...
Аффорданс (affordance) 
• “Приглашающее" (повелительное, 
побудительное) качество; 
предрасположенность, интуитивно понятн...
Что включает в себя UxD? 
16 
Проектирование 
Пользовательских 
Интерфейсов
Взаимодействие человека с 
компьютером 
17 
Проектирование 
Пользовательских 
Интерфейсов
Что включает в себя UxD? 
18 
Проектирование 
Пользовательских 
Интерфейсов
Информационная архитектура 
• Информационная архитектура отвечает за 
структуру и организацию данных с 
перспективы пользо...
Информационная архитектура 
Проектирование 
Пользовательских 
Интерфейсов 
Источник: http://webstyleguide.com 20
Что включает в себя UxD? 
21 
Проектирование 
Пользовательских 
Интерфейсов
Графический дизайн 
22 
Проектирование 
Пользовательских 
Интерфейсов
Современный подход 
к WEB-публикации 
23 
Проектирование 
Пользовательских 
Интерфейсов
Системы Управления Содержанием 
(Content Management Systems) 
24 
Проектирование 
Пользовательских 
Интерфейсов
Шаблоны: Template Monster 
25 
Проектирование 
Пользовательских 
Интерфейсов 
http://www.templatemonster.com/
Что включает в себя UxD? 
26 
Проектирование 
Пользовательских 
Интерфейсов
Содержание 
27 
Проектирование 
Пользовательских 
Интерфейсов
Что включает в себя UxD? 
28 
Проектирование 
Пользовательских 
Интерфейсов
Если бы дизайнер пользовательского 
опыта проектировал дом 
• Информационный архитектор должен убедиться в том 
что: в спа...
Немного мотивации 
Проектирование 
Пользовательских 
Интерфейсов 
http://infographicsmania.com/10-hottest-digital-creative...
Литература 
• Джесс Гарретт 
"Web-дизайн: Элементы опыта 
взаимодействия" 
• Книга в формате .PDF 
• https://www.sugarsync...
Литература 
• Dan Saffer 
Designing for Interaction: 
Creating Smart Applications and 
Clever Devices 
• Книга в формате ....
Литература 
• Peter Van Dijk 
• Information Architecture for 
Designers: Structuring Websites 
for Business Success 
33 
П...
Литература 
• Frank Thissen 
• Screen Design Manual: 
Communicating Effectively 
Through Multimedia 
34 
Проектирование 
П...
Парная работа: поиск 
необходимостей 
1. Интервьюируйте 
партнера: задача кратко 
описать утро студента: 
– Какие активнос...
ПОДГОТОВКА К ДОМАШНЕМУ 
ЗАДАНИЮ 
36 
Проектирование 
Пользовательских 
Интерфейсов
Типы влияние на пользовательские 
действия 
• Возможно влияние на следующие три 
аспекта использования системы: 
1. Измене...
Типы влияние на пользовательские 
действия 
1. Изменение – заставить пользователя 
выполнять действия по-другому; 
38 
Про...
До появления TripIt люди по-другому отслеживали свои рейсы 
39 
Изменение. Пример: Tripit.com 
Проектирование 
Пользовател...
Типы влияние на пользовательские 
действия 
2. Вид – позволить пользователю выполнять 
действия более эффективно; 
40 
Про...
Вид. Пример: Mac OS Dashboard 
41 
Проектирование 
Пользовательских 
Интерфейсов
Типы влияние на пользовательские 
действия 
3. Время – способы отражения времени и 
возможная польза 
42 
Проектирование 
...
Время. Пример: fitbit.com 
43 
Проектирование 
Пользовательских 
Интерфейсов
Типы влияние на пользовательские 
действия 
• Возможно влияние на следующие три 
аспекта использования системы: 
1. Измене...
Задание на дом 
• Найти простую деятельность, которая может быть 
улучшена (выявить потребность пользователя); 
• Описать,...
Próxima SlideShare
Cargando en…5
×

01.introduction ux

807 visualizaciones

Publicado el

Лекция 1. Введение в пользовательский опыт

Publicado en: Educación
  • Sé el primero en comentar

01.introduction ux

  1. 1. Проектирование Пользовательских Интерфейсов Vladimir Tomberg, PhD Эстонский Университет Прикладных Наук по Предпринимательству Майнор Сентябрь 2014 Picture source: http://usercenteredcontent.com
  2. 2. Интерфейс (от англ. interface — поверхность раздела, перегородка) — совокупность средств и методов взаимодействия между элементами системы. 2 Интерфейс Проектирование Пользовательских Интерфейсов Image source: http://theheartthrills.wordpress.com
  3. 3. Пользовательский интерфейс • Интерфейс пользователя, он же пользовательский интерфейс (UI — англ. user interface) — разновидность интерфейсов, в котором одна сторона представлена человеком (пользователем), другая — машиной или устройством. 3 Проектирование Пользовательских Интерфейсов
  4. 4. Где тут интерфейс? 4 Кофейник Проектирование Пользовательских Интерфейсов
  5. 5. Кофейник Карельмана При наличии стандартной функциональности этот интерфейс работать не будет 5 Проектирование Пользовательских Интерфейсов
  6. 6. Пользовательский опыт • Дизайн пользовательского интерфейса – это не рисование кнопок. Прежде всего – это изучение пользователей, их потребностей, целей и психологии. • Множество дисциплин изучающих эти потребности и цели объединены под общим термином – Проектирование Пользовательского Опыта (User Experience Design) 6 Проектирование Пользовательских Интерфейсов
  7. 7. Что включает в себя UxD? 7 Проектирование Пользовательских Интерфейсов
  8. 8. Что включает в себя UxD? 8 Проектирование Пользовательских Интерфейсов
  9. 9. Архитектура Проектирование Пользовательских Интерфейсов https://www.facebook.com/BrandNewGeorgia 9
  10. 10. Что включает в себя UxD? 10 Проектирование Пользовательских Интерфейсов
  11. 11. Промышленный дизайн Source http://challenge.cgsociety.org 11 Проектирование Пользовательских Интерфейсов
  12. 12. Что включает в себя UxD? 12 Проектирование Пользовательских Интерфейсов
  13. 13. Проектирование пользовательского взаимодействия (IxD) 13 Проектирование Пользовательских Интерфейсов
  14. 14. Проектирование пользовательского взаимодействия (IxD) • Проектирование пользовательского взаимодействия отвечает за контроль,механизмы и процессы, необходимые пользователю для выполнения их задач при использовании системы.  Использовать меню, или вкладки?  Выпадающий список или радио-кнопки? • Проектирование пользовательского взаимодействия рассматривает аффордансы (affordance): что делают контрольные механизмы и как это соотносится с пользователем? 14 Проектирование Пользовательских Интерфейсов
  15. 15. Аффорданс (affordance) • “Приглашающее" (повелительное, побудительное) качество; предрасположенность, интуитивно понятное (объективное или ощущаемое, воспринимаемое) свойство объекта (среды, интерфейса), указывающее на то, каким образом следует взаимодействовать с данным объектом или использовать его; • Это понятие исследуется в научной теории восприятия и находит применение в области эргономики, искусственного интеллекта, при разработке интерфейсов для взаимодействия человека с компьютером; • Термин предложил психолог Джеймс Гибсон (James J. Gibson) в 1966 г. 15 Проектирование Пользовательских Интерфейсов
  16. 16. Что включает в себя UxD? 16 Проектирование Пользовательских Интерфейсов
  17. 17. Взаимодействие человека с компьютером 17 Проектирование Пользовательских Интерфейсов
  18. 18. Что включает в себя UxD? 18 Проектирование Пользовательских Интерфейсов
  19. 19. Информационная архитектура • Информационная архитектура отвечает за структуру и организацию данных с перспективы пользователя — в противоположность перспективе системы; • На уровне Веб-сайта Информационная Архитектура определяет содержание каждой страницы и отношения между страницами; • На уровне индивидуальной страницы информационная архитектура отвечает за логическую группировку и расположение данных 19 Проектирование Пользовательских Интерфейсов
  20. 20. Информационная архитектура Проектирование Пользовательских Интерфейсов Источник: http://webstyleguide.com 20
  21. 21. Что включает в себя UxD? 21 Проектирование Пользовательских Интерфейсов
  22. 22. Графический дизайн 22 Проектирование Пользовательских Интерфейсов
  23. 23. Современный подход к WEB-публикации 23 Проектирование Пользовательских Интерфейсов
  24. 24. Системы Управления Содержанием (Content Management Systems) 24 Проектирование Пользовательских Интерфейсов
  25. 25. Шаблоны: Template Monster 25 Проектирование Пользовательских Интерфейсов http://www.templatemonster.com/
  26. 26. Что включает в себя UxD? 26 Проектирование Пользовательских Интерфейсов
  27. 27. Содержание 27 Проектирование Пользовательских Интерфейсов
  28. 28. Что включает в себя UxD? 28 Проектирование Пользовательских Интерфейсов
  29. 29. Если бы дизайнер пользовательского опыта проектировал дом • Информационный архитектор должен убедиться в том что: в спальню помещается двуспальная кровать и гардероб; кухня прилегает к столовой; и единственная ванная не находится в гараже; • Дизайнер пользовательского взаимодействия должен убедиться в том что: кран с холодной водой всегда справа, лестницы снабжены перилами, а выключатели находятся с правильной стороны от двери; • Визуальный дизайнер должен подобрать соответствующие друг-другу ковер, шторы и мебель, передающие стиль дома и знакомящие со вкусом владельца; • Инженер по юзабилити должен ‘придираться’ в процессе разработки чтобы идентифицировать проблемы с которыми потом столкнутся люди. 29 Проектирование Пользовательских Интерфейсов
  30. 30. Немного мотивации Проектирование Пользовательских Интерфейсов http://infographicsmania.com/10-hottest-digital-creative-jobs/ 30
  31. 31. Литература • Джесс Гарретт "Web-дизайн: Элементы опыта взаимодействия" • Книга в формате .PDF • https://www.sugarsync.com/pf/D 430412_1274331_6476181 31 Проектирование Пользовательских Интерфейсов
  32. 32. Литература • Dan Saffer Designing for Interaction: Creating Smart Applications and Clever Devices • Книга в формате .CHM • https://www.sugarsync.com/pf/D 430412_1274331_6477664 32 Проектирование Пользовательских Интерфейсов
  33. 33. Литература • Peter Van Dijk • Information Architecture for Designers: Structuring Websites for Business Success 33 Проектирование Пользовательских Интерфейсов
  34. 34. Литература • Frank Thissen • Screen Design Manual: Communicating Effectively Through Multimedia 34 Проектирование Пользовательских Интерфейсов
  35. 35. Парная работа: поиск необходимостей 1. Интервьюируйте партнера: задача кратко описать утро студента: – Какие активности студент делает каждое утро? – Что ему мешает? Чего не хватает? – Какая информация ему нужна? Интервью 10 минут, затем смена ролей. 2. Описать проблемы 3. Как можно помочь студенту решить часть утренних проблем? Описать возможные варианты 4. Выступить с 2-х минутной презентацией результатов 35 Проектирование Пользовательских Интерфейсов
  36. 36. ПОДГОТОВКА К ДОМАШНЕМУ ЗАДАНИЮ 36 Проектирование Пользовательских Интерфейсов
  37. 37. Типы влияние на пользовательские действия • Возможно влияние на следующие три аспекта использования системы: 1. Изменение 2. Вид 3. Время 37 Проектирование Пользовательских Интерфейсов
  38. 38. Типы влияние на пользовательские действия 1. Изменение – заставить пользователя выполнять действия по-другому; 38 Проектирование Пользовательских Интерфейсов
  39. 39. До появления TripIt люди по-другому отслеживали свои рейсы 39 Изменение. Пример: Tripit.com Проектирование Пользовательских Интерфейсов
  40. 40. Типы влияние на пользовательские действия 2. Вид – позволить пользователю выполнять действия более эффективно; 40 Проектирование Пользовательских Интерфейсов
  41. 41. Вид. Пример: Mac OS Dashboard 41 Проектирование Пользовательских Интерфейсов
  42. 42. Типы влияние на пользовательские действия 3. Время – способы отражения времени и возможная польза 42 Проектирование Пользовательских Интерфейсов
  43. 43. Время. Пример: fitbit.com 43 Проектирование Пользовательских Интерфейсов
  44. 44. Типы влияние на пользовательские действия • Возможно влияние на следующие три аспекта использования системы: 1. Изменение – заставить пользователя выполнять действия по-другому; 2. Вид – позволить пользователю выполнять действия более эффективно; 3. Время – способы отражения времени и возможная польза. 44 Проектирование Пользовательских Интерфейсов
  45. 45. Задание на дом • Найти простую деятельность, которая может быть улучшена (выявить потребность пользователя); • Описать, как люди выполняют эту деятельность и что может быть улучшено; • Выбрать, в какой плоскости могут быть сделаны улучшения: Изменение, Вид или Время; • Написать список из 7 дополнительных потребностей, целей, задач пользователя, которые могут помочь выполнению деятельности; • Найти три решения (Веб-сервисы, устройства, ПО) которые уже используются для похожих задач; • Подготовить короткую (3 мин.) презентацию 45 Проектирование Пользовательских Интерфейсов

×