01.introduction ux

45
Введение в Пользовательский Опыт Vladimir Tomberg, PhD Эстонский Университет Прикладных Наук по Предпринимательству Майнор Сентябрь 2014 Picture source: http://usercenteredcontent.com

Upload: vladimir-tomberg

Post on 04-Feb-2015

470 views

Category:

Education


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: 01.introduction ux

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

Vladimir Tomberg, PhD

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

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

Сентябрь 2014

Pic

ture

sou

rce:

htt

p://

user

cent

ered

cont

ent.

com

Page 2: 01.introduction ux

2

Интерфейс (от англ. interface — поверхность раздела, перегородка) — совокупность средств и методов взаимодействия между элементами системы.

Интерфейс

Проектирование Пользовательских ИнтерфейсовImage source: http://theheartthrills.wordpress.com

Page 3: 01.introduction ux

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

• Интерфейс пользователя, он же пользовательский интерфейс (UI — англ. user interface) — разновидность интерфейсов, в котором одна сторона представлена человеком (пользователем), другая — машиной или устройством.

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

Page 4: 01.introduction ux

4

Где тут интерфейс?

Кофейник

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

Page 5: 01.introduction ux

5

При наличии стандартной функциональности этот интерфейс работать не будет

Кофейник Карельмана

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

Page 6: 01.introduction ux

6

Пользовательский опыт

• Дизайн пользовательского интерфейса – это не рисование кнопок. Прежде всего – это изучение пользователей, их потребностей, целей и психологии.

• Множество дисциплин изучающих эти потребности и цели объединены под общим термином – Проектирование Пользовательского Опыта (User Experience Design)

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

Page 7: 01.introduction ux

7

Что включает в себя UxD?

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

Page 8: 01.introduction ux

8

Что включает в себя UxD?

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

Page 9: 01.introduction ux

9

Архитектура

https://www.facebook.com/BrandNewGeorgiaПроектирование Пользовательских Интерфейсов

Page 10: 01.introduction ux

10

Что включает в себя UxD?

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

Page 11: 01.introduction ux

11

Промышленный дизайн

Source http://challenge.cgsociety.orgПроектирование Пользовательских Интерфейсов

Page 12: 01.introduction ux

12

Что включает в себя UxD?

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

Page 13: 01.introduction ux

13

Проектирование пользовательского взаимодействия (IxD)

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

Page 14: 01.introduction ux

14

Проектирование пользовательского взаимодействия (IxD)

• Проектирование пользовательского взаимодействия отвечает за контроль,механизмы и процессы, необходимые пользователю для выполнения их задач при использовании системы. Использовать меню, или вкладки? Выпадающий список или радио-кнопки?

• Проектирование пользовательского взаимодействия рассматривает аффордансы (affordance): что делают контрольные механизмы и как это соотносится с пользователем?

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

Page 15: 01.introduction ux

15

Аффорданс (affordance)• “Приглашающее" (повелительное,

побудительное) качество; предрасположенность, интуитивно понятное (объективное или ощущаемое, воспринимаемое) свойство объекта (среды, интерфейса), указывающее на то, каким образом следует взаимодействовать с данным объектом или использовать его;

• Это понятие исследуется в научной теории восприятия и находит применение в области эргономики, искусственного интеллекта, при разработке интерфейсов для взаимодействия человека с компьютером;

• Термин предложил психолог Джеймс Гибсон (James J. Gibson) в 1966 г.

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

Page 16: 01.introduction ux

16

Что включает в себя UxD?

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

Page 17: 01.introduction ux

17

Взаимодействие человека с компьютером

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

Page 18: 01.introduction ux

18

Что включает в себя UxD?

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

Page 19: 01.introduction ux

19

Информационная архитектура

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

• На уровне Веб-сайта Информационная Архитектура определяет содержание каждой страницы и отношения между страницами;

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

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

Page 21: 01.introduction ux

21

Что включает в себя UxD?

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

Page 22: 01.introduction ux

22

Графический дизайн

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

Page 23: 01.introduction ux

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

Современный подход к WEB-публикации

Page 24: 01.introduction ux

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

Системы Управления Содержанием(Content Management Systems)

Page 25: 01.introduction ux

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

Шаблоны: Template Monster

http://www.templatemonster.com/

Page 26: 01.introduction ux

26

Что включает в себя UxD?

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

Page 27: 01.introduction ux

27

Содержание

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

Page 28: 01.introduction ux

28

Что включает в себя UxD?

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

Page 29: 01.introduction ux

29

Если бы дизайнер пользовательского опыта проектировал дом

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

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

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

• Инженер по юзабилити должен ‘придираться’ в процессе разработки чтобы идентифицировать проблемы с которыми потом столкнутся люди.

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

Page 30: 01.introduction ux

30

Немного мотивации

http://infographicsmania.com/10-hottest-digital-creative-jobs/Проектирование Пользовательских Интерфейсов

Page 31: 01.introduction ux

31

Литература• Джесс Гарретт

"Web-дизайн: Элементы опыта взаимодействия"

• Книга в формате .PDF• https://www.sugarsync.com/pf/

D430412_1274331_6476181

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

Page 32: 01.introduction ux

32

Литература• Dan Saffer

Designing for Interaction: Creating Smart Applications and Clever Devices

• Книга в формате .CHM• https://www.sugarsync.com/pf/

D430412_1274331_6477664

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

Page 33: 01.introduction ux

33

Литература• Peter Van Dijk • Information Architecture for

Designers: Structuring Websites for Business Success

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

Page 34: 01.introduction ux

34

Литература• Frank Thissen• Screen Design Manual:

Communicating Effectively Through Multimedia

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

Page 35: 01.introduction ux

35

Парная работа: поиск необходимостей

1. Интервьюируйте партнера: задача кратко описать утро студента:

– Какие активности студент делает каждое утро?

– Что ему мешает? Чего не хватает?

– Какая информация ему нужна?

Интервью 10 минут, затем смена ролей.

2. Описать проблемы3. Как можно помочь студенту

решить часть утренних проблем? Описать возможные варианты

4. Выступить с 2-х минутной презентацией результатов

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

Page 36: 01.introduction ux

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

ПОДГОТОВКА К ДОМАШНЕМУ ЗАДАНИЮ

Page 37: 01.introduction ux

37

Типы влияние на пользовательские действия

• Возможно влияние на следующие три аспекта использования системы:

1. Изменение 2. Вид3. Время

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

Page 38: 01.introduction ux

38

Типы влияние на пользовательские действия

1. Изменение – заставить пользователя выполнять действия по-другому;

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

Page 39: 01.introduction ux

39

До появления TripIt люди по-другому отслеживали свои рейсы

Изменение. Пример: Tripit.com

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

Page 40: 01.introduction ux

40

Типы влияние на пользовательские действия

2. Вид – позволить пользователю выполнять действия более эффективно;

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

Page 41: 01.introduction ux

41

Вид. Пример: Mac OS Dashboard

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

Page 42: 01.introduction ux

42

Типы влияние на пользовательские действия

3. Время – способы отражения времени и возможная польза

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

Page 43: 01.introduction ux

43

Время. Пример: fitbit.com

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

Page 44: 01.introduction ux

44

Типы влияние на пользовательские действия

• Возможно влияние на следующие три аспекта использования системы:

1. Изменение – заставить пользователя выполнять действия по-другому;

2. Вид – позволить пользователю выполнять действия более эффективно;

3. Время – способы отражения времени и возможная польза.

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

Page 45: 01.introduction ux

45

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

(выявить потребность пользователя);• Описать, как люди выполняют эту деятельность и что может

быть улучшено;• Выбрать, в какой плоскости могут быть сделаны улучшения:

Изменение, Вид или Время;• Написать список из 7 дополнительных потребностей, целей,

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

• Найти три решения (Веб-сервисы, устройства, ПО) которые уже используются для похожих задач;

• Опубликовать результаты в блоге;• Подготовить короткую (3 мин.) презентацию

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