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