01.introduction ux

Введение в Пользовательский Опыт

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 мин.) презентацию

Проектирование Пользовательских Интерфейсов