Digital explosion материал с интенсивной тренировки

дмитрий карпов 2012

взрывная тренировка креативного мышления в интерактивных медиаДМИТРИЙ КАРПОВ И КОМАНДА

DIGITAL EXPLOSION

лекции сменяют упражнения, темы сменяют кейсы и примеры, рекомендации и советы, задания специально развивают комплекс навыков, практика и теория,все по делу, без воды, в интенсивном ритме взрывающем мозг новыми идеями, неожиданным применением интерактивных медиа, инструментов и пониманием природы взаимодействий в digital


взрывная тренировка креативного мышления в интерактивных медиа

ДМИТРИЙ КАРПОВ И КОМАНДА


КРЫМ. КОКТЕБЕЛЬ.ПЛАН ДЕЙСТВИЙ. КОМАНДА.


почему, зачем и как


почему, зачем и какзадача, процесс

стратегия и тактика

Коктебель !?



ДЕНЬ ПЕРВЫЙ


что это такое?


структуразнаний, навыков и опыта в профессии

direction

interaction

graphics art

languagetechnology

ideation


идея и концепция в интерактивных проектах

direction

interaction

graphics art

languagetechnology

ideation


комплекс основных навыков для дизайна в интерактивных медиа

direction

interaction

graphics art

languagetechnology

ideation

intuitive interfaceexperience artistic innovation

дмитрий карпов / [email protected] 2012г

дизайнер в digital не визуализатор идей, он создает сценарии, реализует человеческое желание, манипулирует, знает действие наперед, находит нужную визуальную форму

mailto:[email protected]



дизайнер в digital должен быть взрывателем, он способен собрать «интерактивную бомбу»




«интерактивная бомба»взять задачу, достать мотивы пользователя, взять самый популярный сервис, внедрить провокацию, удалить баги, смешать желания и страхи, полить самоутверждением, в центр выгоды по краям осколки мнений, ретвитов и репинов, внедрить фильтры, персонифицировать проникновение, добавить разрывных, коротких текстов, фугасный заряд нового опыта и красивая и удобная оболочка сверху




дизайнер в цифровой интерактивной среде не только проводник визуальных идей, дизайнер является сооснователем многих известных компаний и сервисов, как эти.дизайнер должен мыслить категориями успешного бизнеса, желательно своего собственного :)




этапы разработки интерактивного проекта

корректировка

обновление

статистика

KPI

верстка

отладка / оптимизация

outsource или работа фрилансеров

интерфейс

шаблоны экранов

иллюстрации

карта сайта

wireframes

прототипы

сценарий механики

концепт эскизы

презентацияанализ

SWOTтз

согласование

подписание


управление проектом

UX дизайнкреативное предложение

исследование визуальный дизайн разработка запуск проекта корректировкасопровождение

договор

программинг

outsource или работа фрилансеров




этапы разработки интерактивного проекта / вопросы к клиенту и анализ информации

•Наличие интерактивных сервисов•Социальные сети•CRM активность•Наличие промо-сайтов продуктов•Наличие мобильных приложений •Передача ценностей бренда•Usability анализ•Поисковая оптимизация


этапы разработки интерактивного проекта / вопросы к клиенту и анализ информации


техническая модель

визуальная интерпретация

вербальная интерпретация

социальная интеграция

психологическая механика

задача клиента репрезентация задачи с позиции пользователя

реальный срок

набор обязательныхобразов

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

% реализуемость модели

реализуемость визуальной коммуникации и технической интерактивной модели

прогнозируемая реализация мотивов психологической механики


SMM перспективы и влияние на развитие медиа


http://blog.rjmetrics.com/Pinterest-Data-Analysis-An-Inside-Look/

Общее количество сайтов, с которых производились пины картинок, превысило 100 тысяч. На схеме приведены 20 самых популярных из них.

Около 80% пинов составляют репины, то есть картинки других пользователей, которым делается перепост. Pinterest, таким образом, является действительно глобальной системой обмена. Для сравнения: исследование Hubspot показало, что в Twitter лишь 1,4% твитов — это ретвиты.




Не ждем, что пользователи будут охотно из группы переходить на наш сайт. Чаще всего, они этого не делают. Поэтому всю необходимую информацию даем им в группе: цены под фотографиями товаров, описания условий доставки и т. п.

Трафик из ВКонтакте — тянем на группу ВКонтакте. Трафик с внешних сайтов — тянем на внешний сайт. Любые попытки «скрестить» эти виды трафика — ведут к большим потерям трафика в пути.

Группа ВКонтакте и ее продвижение не заменяют сайт и трафик с поисковых систем (SEO и контекстная реклама).

http://keymarketing.ru/page/neskolko-slov-o-prodvizhenii-vkontakte






Теперь, в эпоху интернет-магазинов, amazon.com и eBay, место на виртуальной полке не стоит ничего — и очень невеликие, но все же продажи странных продуктов в совокупности складываются в очень внушительные цифры. Эти нишевые продукты, количество которых увеличивается с фантастической скоростью в силу упрощения и удешевления производства, составляют так называемый «длинный хвост» — который бесконечен (равно как и спрос на него). Демократизируется и дистрибуция: теперь независимые производители могут сами торговать своей продукцией, через сеть; успешные прецеденты вы и сами, наверное, знаете.Будущее — не за хитами, а за нишевыми продуктами.




http://www.vedomosti.ru/newspaper/article/281441/obognal_televizor






идея дизайнера это сумма факторов культуры, экономики, эстетики и психологии





ДЕНЬ ПЕРВЫЙ


ТНТ (тринитротолуол) не взрывается сам, даже при темпиратуре плавления... горит, но взрыва не будет, ему нужен детонатор

так и наш опыт, наше представление о мире требует новых детонирующих идей, которые не возьмутся из прошлого, но из размышлений, фантазий и бреда о будущем, смелых концепций дизайна несуществующего, вне объективного опыта




Когда подопытным дают головоломку, а потом предлагают перекусить, они намного чаще (по сравнению с контрольной группой) выбирают вредный торт, чем полезный фруктовый салат. Опрос показал, что подопытные — студенты университета в США — понимают, какая пища вреднее. Но в момент выбора их сознание занято, и автоматические процессы мозга, которые некому притормозить, делают нерациональный выбор в пользу сладкой калорийной еды.

http://www.d.umn.edu/~dglisczi/4501web/4501Readings/Shiv(1999)FruitOrCake.pdf



http://www.d.umn.edu/%7Edglisczi/4501web/4501Readings/Shiv%281999%29FruitOrCake.pdf

http://www.d.umn.edu/%7Edglisczi/4501web/4501Readings/Shiv%281999%29FruitOrCake.pdf




Перила лестницы, ведущей с верхних этажей в подвал, на первом обязаны обрываться: спускаться сложнее, но зато во время пожара толпа перепуганных людей не будет попадать в тупик, пролетев первый этаж без остановки. С подачи медиков дизайнерам придется страховать человечество не от катастроф во внешнем мире, а от собственных вредных привычек

http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0465067107






Мозг руководствуется соображениями тактической выгоды — например, взять то, что ближе лежит, и сэкономить доли калорий на движении руки. Как обратить это на пользу здоровью? Например, в салат-баре отодвигать тарелки на 25 сантиметров назад. Эксперимент годовалой давности показал: в этой ситуации люди набирают на 8-16 процентов меньше еды. Хотя каждый и уверен, что определяет свою порцию волевым решением.





ДЕНЬ ВТОРОЙ


метод креативных кругов

совмещаем несовместимое, сумма больше чем составные факторы



Дмитрий Карпов 2012г

мотивы

выгоды / RTB /персоны

атрибуты

визуальные атрибуты коммуникации

мотивыкультурный архетип


мотивы


мотивы

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

Просоциальные (общественно значимые) мотивы

Мотив достижения

Мотив саморазвития

Экстринсивные (внешние) мотивы

Процессуально-содержательные мотивы

Мотив власти

Мотив аффилиации

Мотив идентификации с другим человеком

Мотив самоутверждения


мотивы

Просоциальные (общественно значимые) мотивы

Мотив достижения

Мотив саморазвития

Экстринсивные (внешние) мотивы

Процессуально-содержательные мотивы

Мотив идентификации с другим человеком

Мотив самоутверждения


мотивы

культурный архетип

герой

феникс

матьтрикстерклад

дитя

антигерой

старец

сила

магияприродадух

возвращение

смерть

знание

время

артефакт

путешествие


мотивы


герой

феникс

матьтрикстер

клад

дитя

антигерой

старец

сила



смерть

знание

время

артефакт



мотивы


герой

феникс

матьтрикстер

клад

дитя

антигерой

старец

сила



смерть

знание

время

артефакт


культурный архетип культурная аллюзия

герой

трикстер

старец

клад

сцена из кинофильма

сцена из книги

музыкальный фрагмент

сюжет картины

историческое событие

известная личность


визуальные атрибуты коммуникации бренда

мотивы

культурный архетипцвета

типографика

ключевой образ

символы

звуки-образы

теглайн

ритуал

ощущения

герой




мотивы

культурный архетипздоровье

качество жизни

ощущение прогресса и саморазвития

социальный статус

соревнования

интеграция с ус-ми Apple



мотивы


здоровье

качество жизни

ощущение прогресса и саморазвития


соревнования

интеграция с ус-ми Apple


преданность марке


выгоды /RTB/ персоны


мотивы


атрибуты

ценовая категория

УТП / преимущества

акции

места распространения

сезонные факторы

ситуации потребления




мотивы


атрибуты



акции


анализ конкурентов






мотивы


атрибуты



акции




можем / должны не можем

анализ конкурентов


атрибуты


мотивы


канал коммуникации выгоды / RTB /персоны

Print

Ambient

Outdoor

TV

DMail

OnlineWeb Mobile Video SMM

креативная концепцияmedia mix


атрибуты


мотивы



Print

Ambient

Outdoor

TV

DMail


креативная концепцияmedia mix

таинственный клад / подарок

мотив идентификации с другим человеком

мотив самоутверждения

цвета типографикасимволы


акцииместа распространения сезонные факторы

лидеры мненийчлены командыактивные фанаты

Advertising Agency: F/Nazca Saatchi & Saatchi, BrazilCreative Directors: Fabio Fernandes, Eduardo Lima, Alexandre Soares

Creatives: Leandro Dolfini, Rafael Merel, Marcelo RibeiroAccount Services: Marcello Penna, Gisela Assumpção, Camila Hamaoui, Gustavo Saab

Planners: José Porto, Utymo Oliveira, Diego DumontGraphic Producers: Jomar Farias, Leandro Ferreira

Media: Lica Bueno, Sandro Cachiello

http://www.fnazca.com.br/

http://www.fnazca.com.br/

http://adsoftheworld.com/creative/fabio_fernandes

http://adsoftheworld.com/creative/fabio_fernandes

http://adsoftheworld.com/creative/eduardo_lima

http://adsoftheworld.com/creative/eduardo_lima

http://adsoftheworld.com/creative/alexandre_soares

http://adsoftheworld.com/creative/alexandre_soares

http://adsoftheworld.com/creative/leandro_dolfini

http://adsoftheworld.com/creative/leandro_dolfini

http://adsoftheworld.com/creative/rafael_merel

http://adsoftheworld.com/creative/rafael_merel

http://adsoftheworld.com/creative/marcelo_ribeiro

http://adsoftheworld.com/creative/marcelo_ribeiro

http://adsoftheworld.com/creative/jomar_farias

http://adsoftheworld.com/creative/jomar_farias

http://adsoftheworld.com/creative/leandro_ferreira

http://adsoftheworld.com/creative/leandro_ferreira


атрибуты


мотивы



Print

Ambient

Outdoor

TV

DMail


media mix

интегрированная кампания

креативная концепция

цели и задачи клиента

цели и задачи потребителя



ДЕНЬ Третий


ПРОВЕРЯЕМ И ОБСУЖДАЕМЗАДАНИЯ




люди, медиа, статистика




в среднем у интернет пользователя на мобильном установленно 20-25 приложений, 5-9 из которых он использует еженедельно, обычно это SM приложения

InSites Consulting



http://www.slideshare.net/InSitesConsulting



окло 53% пользователей смартфонов в США савнивают цены при покупках используя интернет

InSites Consulting






InSites Consulting






InSites Consulting

Pinterest становится потенциально интересным для брендов, 41% пользователей распространяют информацию о брендах, контент удобно «брендировать», около 35% бренд-контента публикуется в instagram среди пользователей




пользователи в половине случаев позитивно комментируют бренды в соц. сетях, только около 10% негативно

InSites Consulting






креативная концепция должна всегда учитывать два факторапервый экономический, идея может значительно снижать издержки производства, например используя существующие тех. площадки и экономически заинтересованные «третьи стороны» второе прогнозировать расширение охвата аудитории

хорошая идея в digital всегда экономична и вызывает Word-Of-Mouth Marketing, вызывает желание делиться, обсуждать, участвовать




Архитектура каналов

BOUGHT MEDIA OWNED MEDIA EARNED MEDIA

Обеспечение доступности всех digital каналов

Основная площадка для трансляции премиального brand experienceHub всех digital коммуникаций

Трансляция имиджа и анонсирование digital-инноваций, формирование обратной связи CRM-активностей, репутационный менеджментПривлечение аудитории (генерация траффика)

Search (SEM) Display & SP Social Ads Social App SMS & E-mail list SMS & E-mail list сайт SM каналы


наемные медиа

собственные медиа заслуженные медиа

BOUGHT MEDIA

OWNED MEDIA

EARNED MEDIA

концепция А

концепция Б

концепция B


креативная концепция должна всегда учитывать два фактора.первый экономический, идея может значительно снижать издержки производства, например используя существующие тех. площадки и экономически заинтересованные «третьи стороны» второе прогнозировать расширение охвата аудитории

хорошая идея в digital всегда экономична и вызывает Word-Of-Mouth Marketing, вызывает желание делиться, обсуждать, участвовать




упражнения


Придумать и реализоватьлюбой сюжет с использованием пальцев одной рукивозможна реализация анимации




Придумать сценарийинтерактивного взаимодействиясвязанный с косметическим средством ухода за кожей




Придумать и реализовать

концепт несуществующего

продукта или услуги Apple

по стандартам оформления и в стиле общения




маркетингу в цифровой среде не хватает творческого, изобретательного подхода, он больше формулирует цели, а не стимулирует решения, знаниями, экспертизой, а должно быть иначе




Awareness

Acceptance

Trial

Loyalty

Retention / Preference

Advocacy

Accumulation

Awareness — узнавание названия бренда и его принадлежность к категории.

Acceptance — принятие бренда. То есть, потребитель не отрицает возможности приобретения.

Trial — пробная самостоятельная покупка.

Retention / Preference — потребление товара или услуги по рациональным причинам (цена, акции, наличие в ближайшем магазине и пр.) на постоянной основе.

Loyalty — потребление по эмоциональным причинам. Меньше зависит от цены, дистрибуции и других объективны факторов.

Advocacy является следствием работы с лояльностью и приводит к распространению положительных рекомендаций (word of mouth)

Accumulation — накопление знаний и опыта потребления товаров бренда, что приводит к желанию пользоваться любыми товарами, доверяя качеству (рационально) и характеру бренда (эмоционально) является следсвием работы коммуникаций не только ориентированных на потребителя, независимые media материалы.

маркетинговая воронкапринцип формирования отношения потребитель&продукт





Awareness

Acceptance

Trial

Loyalty


Advocacy

Accumulation




как это работает на примере «landing page»

только digital — только hardcore практические приемы проектного мышления в новых медиа





от перехода к тестовой покупке, от знакомства к преданным отношениямсценарии маркетинговой воронки в digital


Awareness

Acceptance

Trial

Loyalty


Advocacy

Accumulation






ДЕНЬ Третий (вечер)


процесс дизайна в цифровой интерактивной среде

возвращаемся к теме


процесс дизайна в интерактивной среде

анализ конкурентовизучение целевой аудитории

разработка сценариевпользователя

разработка wireframeсоздание интерактивной модели, прототипа

разработка карты сайтаописание стратегии UXдетали реализации интерактивных сценариев

визуализация, дизайн и иллюстрирование интерактивных элементов, оформление контента

разработка, верстка страниц по шаблонам и прототипам, кодинг интерактивных взаимодействий, оптимизация, отладка под браузеры и устройства

в зависимости от договоренностей с клиентом учитывается предварительное тестирование, внесение корректировок в каждый этап, создание дополнительных материалов и прототипов, что должно изначально присутствовать в договоре, техническом задании и условиях предоставления услиу


процесс дизайна в интерактивной среде

анализ конкурентовизучение целевой аудитории

разработка сценариевпользователя

разработка wireframeсоздание интерактивной модели, прототипа

разработка карты сайтаописание стратегии UXдетали реализации интерактивных сценариев

визуализация, дизайн и иллюстрирование интерактивных элементов, оформление контента

разработка, верстка страниц по шаблонам и прототипам, кодинг интерактивных взаимодействий, оптимизация, отладка под браузеры и устройства

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

1

2

3

обычно две встречи проходят на этапе анализа и разработки креативного решения до прототипа, встреча-презентация визуального дизайна и финальная сдача готового функционального решения с завершением юридических формальностей и оплатой работ


принцип функционирования

digital promo

http://www.f-i.com/google/rebrief/

задача: убедительно рассказать об интерактивной идее решающей задачу клиента



http://www.f-i.com/broadway/iPad/

этап: проектирование на бумаге, идеи и их эскизирование, условные детали интерфейса в масштабе 1:1




Wireframes




Wireframesкарта сайта

и пользовательские сценарии

http://www.artlebedev.ru/everything/rbe/site/process/





Дополнительно


технологии интерактивных взаидействий и их влияние на тенденции в дизайне


технологии в DIGITAL— понимать, знать, уметьбез знания нет новых идей, только адаптации чужих


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

http://twitter.github.com/bootstrap/index.html




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

http://foundation.zurb.com/

http://foundation.zurb.com

http://foundation.zurb.com


ТипографикаСетки и адаптивный дизайн

CSS3 инструмент дизайнера


новые методы:иллюстрация пиктограммиспользуя шрифт

http://pictos.cc/

http://pictos.cc

http://pictos.cc


новые методы:иллюстрация пиктограммиспользуя шрифт

http://pictos.cc/@font-face { font-family: 'Pictos'; src: url('pictos-web.eot'); src: local('☺'), url('pictos-web.woff') format('woff'), url('pictos-web.ttf') format('truetype'), url('pictos-web.svg#webfontIyfZbseF') format('svg');}

.icon { font-family: 'Pictos'; font-size: 22px:}

http://pictos.cc

http://pictos.cc


адаптивная сетка средствами CSS/* 732px, 7-column width */

@media only screen and (min-width: 768px) {

.content-sub { width : 40.983%; /* 300px ÷ 732px = .40983 */ }

}

/* 948px, 9-column width */@media only screen and (min-width: 992px) {


}

/* 1380px, 13-column width */@media only screen and (min-width: 1382px) {


}


адаптивная сетка средствами CSS

http://24ways.org/2011/theres-no-formula-for-great-designs




адаптивная сетка средствами CSS


типографика золотого сечения


типографика золотого сечения

http://www.pearsonified.com/typography/




CSS3 — must для дизайнерапонимать, полюбить,

использовать




• Media Queries• RGBa & HSLa• Gradients• @font-face / Google fonts• Rounded Corners• Box Shadow• Multiple Backgrounds• Visual Effects




• Media Queries





border-radiusborder-radius: 10px;

box-shadowbox-shadow (horizontal offset,vertical offset,optional blur distance,optional distance,optional color,optional inset)

• min-width• max-width• device-width• min-device-width• max-device-width• orientation• -webkit-min-device-pixel-ratio

<link rel="stylesheet" type="text/css"media="screen and (max-device-width: 480px)"href="mobile.css" />

opacity: 0.5;-webkit-transition-property: opacity;-webkit-transition-duration: 1s;-webkit-transition-timing-function: ease;opacity: 1;




• Gradients

http://www.colorzilla.com/gradient-editor/






• Rounded Corners• Box Shadow• Multiple Backgrounds• Visual Effects


opacity: 0.5;-webkit-transition-property: opacity;-webkit-transition-duration: 1s;-webkit-transition-timing-function: ease;opacity: 1;



http://narrowdesign.com/

http://narrowdesign.com

http://narrowdesign.com


CSS3 — Типографика



h1 a { text-decoration: none; color: #fff; position: absolute; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,1))); text-shadow: 0 2px 0 #e9e9e9; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; }



.text p{ font-family: Verdana; -moz-column-count: 2; -moz-column-gap: 1em; -webkit-column-count: 2; -webkit-column-gap: 1em; column-count: 2; column-gap: 1em; line-height: 1.5em; color: rgb(70,50,35);}

<div class="text">

Over the decades the character has evolved in response to changes in American culture and tastes. In the 1980s a new series was created, The Nancy Drew Files, which featured an older and more professional Nancy as well as romantic plots.

Nancy Drew is a fictional character in various mystery fiction series. She was created by Edward Stratemeyer and first appeared in 1930. The books have been ghostwritten by a number of authors and are published under the collective pseudonym Carolyn Keene.

<p>

</p><p>

</p>

Nancy Drew is a fictional character in various mystery fiction series. She was created by Edward Stratemeyer and first appeared in 1930. The books have been ghostwritten by a number of authors and are published under the collective pseudonym Carolyn Keene.

Over the decades the character has evolved in response to changes in American culture and tastes. In the 1980s a new series was created, The Nancy Drew Files, which featured an older and more professional Nancy as well as romantic plots.

</div>

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


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



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


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


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


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


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

















@font-face { font-family: 'Righteous'; font-style: normal; font-weight: 400; src: local('Righteous'), local('Righteous-Regular'), url(http://themes.googleusercontent.com/static/fonts/righteous/v2/w5P-SI7QJQSDqB3GziL8XbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');}@font-face { font-family: 'Sorts Mill Goudy'; font-style: normal; font-weight: 400; src: local('Sorts Mill Goudy Regular'), local('SortsMillGoudy-Regular'), url(http://themes.googleusercontent.com/static/fonts/sortsmillgoudy/v3/JzRrPKdwEnE8F1TDmDLMUtsZ51dqzBwIdH2JuTl9mv4.woff) format('woff');}

http://rule-of-three.co.uk/

<link href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy:400,400italic|Merriweather:300|Righteous' rel='stylesheet' type='text/css'>

http://themes.googleusercontent.com/static/fonts/righteous/v2/w5P-SI7QJQSDqB3GziL8XbO3LdcAZYWl9Si6vvxL-qU.woff




http://themes.googleusercontent.com/static/fonts/sortsmillgoudy/v3/JzRrPKdwEnE8F1TDmDLMUtsZ51dqzBwIdH2JuTl9mv4.woff




http://rule-of-three.co.uk

http://rule-of-three.co.uk

http://livepage.apple.com/











http://www.myfonts.com/fonts/abstrkt/lineatura/light/




CSS3 — Тени



CSS3 — Тени

H1{ text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);}

<h1> </h1>



как бренд может использовать подкасты?

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

как можно использовать любой сервис для получения при прокрутке страницы анимации? (pinterest, twitter, instagram)


перерыв на обед

есть что обсудить за столом :)


проектирование интерфейса



Aesthetic Integrity

Consistency

Direct Manipulation

Feedback

Metaphors

User Control

When virtual objects and actions in an app are metaphors for objects and actions in the real world, users quickly grasp how to use the app.

Users feel more in control of an app when behaviors and controls are familiar and predictable.

People expect immediate feedback when they operate a control, and they appreciate status updates during lengthy operations.

When people directly manipulate onscreen objects instead of using separate controls to manipulate them, they're more engaged with the task and they more readily understand the results of their actions.

Consistency in the interface allows people to transfer their knowledge and skills from one app to another.

http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Principles/Principles.html#//apple_ref/doc/uid/TP40006556-CH5-SW1





мышление категориями удобства и функциональности интерфейса

метод разработки интерфейса

дмитрий карпов 2012г. [email protected]

Research Empathy Acceptance Sophistication Opportunity Nature






Consistency

User Control

Direct Manipulation

Metaphors

FeedbackUser Control

Aesthetic Integrity






Consistency

User Control

Direct Manipulation

Metaphors

FeedbackUser Control Aesthetic Integrity






Reasonобъективные причины как сумма влияний на концепцию интерфейса, от логики функций до эстетики и кончных впечатлений

Исследование тематических материалов

Ментальное внедрение, восприятие пользователя через глубокое сопоставление себя

Принятие. Какие стереотипы существуют, что знают о продукте и функции пользователи, принятые паттерны поведения и знакомые метафоры

Разработка первичного прототипа учитывающего все привычные паттерны и сценарии пользователя

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

Тестирование прототипа в действии и наблюдение за естественным поведением пользователя. Корректировка «природы продукта», расширяемость, ограничения, сравнение с другими экосистемами





UX стратегия, что на самом деле надо знать дизайнеру


что если целевая аудитория...




примеры для обсуждения и анализа


http://www.sound.philips.com/



http://www.sound.philips.com

http://www.sound.philips.com


https://vimeo.com/47875656






команда




фотографии с тренинга




на этом все, спасибо «арриба», коллеги, участники, все устали, все работали и старались

обсудили результаты

Digital explosion материал с интенсивной тренировки

Design

Transcript of Digital explosion материал с интенсивной тренировки