emotional design 2.0 - tech hangout #28 - 2013.07.31

44
EMOTIONAL DESIGN Sergey Protopopov

Upload: innovecs

Post on 15-Jan-2015

325 views

Category:

Education


0 download

DESCRIPTION

31 июля, на внутренней встрече Tech Hangout Сергей Протопопов рассказал о том, как с помощью дизайна, текстов и верстки создать яркие и положительные эмоции у пользователей, показал множество удачных примеров и не очень… Было интересно, запоминающе и эмоционально! * Tech Hangout – внутреннее мероприятие, организованное разработчиками для разработчиков с целью обмена знаниями и опытом. Подобные встречи проводятся еженедельно по средам с 12:00 до 13:00 и охватывают исключительно инженерные темы. Формат данного ивента подразумевает под собой 30 минутный доклад на ранее определенную тему, и такую же по продолжительности дискуссию в формате круглого стола. Если у вас есть неутомимое рвение к новым знаниям, профессиональному росту, или же вы хотите поделиться своим опытом - добро пожаловать в Hangout Club! Присоединяйтесь к обсуждению - https://www.facebook.com/groups/techhangout/ Читайте нас на - http://hangout.innovecs.com/

TRANSCRIPT

Page 1: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

EMOTIONAL DESIGN

Sergey Protopopov

Page 2: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Привлекательные вещи более эффективны

Don Norman

Page 3: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Удобный

Надежный

Фунциональный

Привлекательный

Индивидуальный

Page 4: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Почему это важно?

Page 5: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Цель проекта

Page 6: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Эмоции и память

Page 7: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Колесо эмоций Роберта Плутчика

Page 8: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31
Page 9: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Эмоции которые должен вызывать ваш продукт

Page 10: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Жизненный цикл пользователя

Page 11: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Заинтересованость

Page 12: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

О чем думает пользователь?

Page 13: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Предвкушение

Page 14: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Первое знакомство

Page 15: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31
Page 16: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31
Page 17: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Привлекательно?

Page 18: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

А так.

Page 19: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Индивидуальностьhttp://macpaw.com/

Page 20: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

http://subplot.com/newsfeed/

Page 21: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31
Page 22: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31
Page 23: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Постояный клиент

Page 24: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31
Page 25: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Юмор

Page 26: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Пример:http://photojojo.com/store/awesomeness/pocket-reflector/

Улыбка

Page 27: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

http://madrobots.ru/

Page 28: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Лояльный клиент

Page 29: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

http://highrisehq.com/https://rocketbank.ru/#rocketbank

Больше человечности

Page 30: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Приятные мелочи

Page 31: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Развлечение

Page 32: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

https://github.com/500.html

Уменьшение раздражения

Page 33: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

http://dribbble.com/mattrobs

Page 34: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Oops

Page 35: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31
Page 36: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Умение прощать

Page 37: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Удивление

Page 38: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Остроумие

Page 39: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Риски

Page 40: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31
Page 41: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

В заключении

Page 42: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Ну, вот и все!

Page 43: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Блиц-опрос:

"Какая операционная система более счастливая?"

Page 44: Emotional Design 2.0 - Tech Hangout #28 - 2013.07.31

Полезные ссылкиhttp://www.smashingmagazine.com/the-personality-layer-related-resources/

http://en.wikipedia.org/wiki/Emotion_and_memory

Эмоциональный веб-дизайнhttp://coollib.net/b/216729/read

Маленькие большие деталиhttp://littlebigdetails.com

Персональный уровеньhttp://uxdesign.smashingmagazine.com/2012/07/18/the-personality-layer/

Эмоциональный дизайн с примерамиhttp://naikom.ru/blog/archives/6382

Полезности