Дизайн вокруг

Перечитывая разные сайты по психологии поведения людей, я наткнулся на статью, которая побудила меня написать этот пост. В ней говорится о вещах, которые люди просто не могут игнорировать. Они постоянно привлекают их внимание.

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

В этой статье я перескажу очень простую теорию, которая стоит за всем этим, а так же накидаю примеры того, как эта теория применяется на практике. Надеюсь, это пригодится вам в вашей работе.

Древнеегипетский художник должен был рисовать фигуры строго по определенным канонам. Отсюда изображение человека "странным" для современного зрителя образом. Он как бы вывернут к нам разными частями тела. Глаз в анфас, голова - в профиль и так далее. Это все оттого, что изображения воспринимались сродни компьютерным иконкам - нужно передать смысл, а выразительность - фиг с ней. Но как ни странно, одной из самых известных древнеегипетских живописных работ сегодня является изображение лица в анфас.

Боязнь выступлений перед публикой есть даже у вице-президента IBM. Разные консультанты предлагают способы и советы его преодоления. Вот лично я в душе - интраверт. Перед каждой презентацией я прихожу в ужас. И знаете что? Очень хорошо, что этот страх есть. Он помогает мне не забыть кое что еще очень важное. И в результате этого страха я выступаю лучше.

Если вам доводилось выступать с презентацией то вы прекрасно знаете, что вас будут слушать только в самом начале речи. Ровно через семь минут все заснут. И никакие поцелуи прекрасного принца не спасут вашу Белоснежку. Сон будет летаргическим. Но вы можете избежать этого, если будете использовать простые приемы привлечения внимания.

Все вы наверняка видели предупреждающие об опасности знаки. Бумажными стикерами обклеены стены в транспорте, а всяческие таблички стоят у природных и рукотворных аттракционов. Несмотря на то, что все эти знаки говорят дело, люди очень часто их игнорируют. Типа: "это все меня не касается" или "ха-ха, это все для дебилов написано".

Что не хватает всем этим знакам - так это персонального подхода. Ведь еще Аристотель в "Риторике" говорил, что использование страха подразумевает, что опасность угрожает именно вам и именно сейчас. Таблички же слишком абстрактны.

На Гаваях есть национальный парк Haleakala, а в нем водопад 'Ohe'o Gulch. В этом живописном месте так и хочется вскарабкаться по скалам и прыгнуть в прохладную воду. Чтобы охочие до эмоций туристы реже обваливались со скал да втыкались в острые камни под водой, руководство парка устанавливает вот такие предупреждающие щиты.

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

"Проблема многих презентаций в том, что люди пытаются сказать слишком много за короткое время", - пишет Garr Reynolds в книге Naked Presenter (вот ее электронная версия для Kindle). Действительно, очень многие ведущие презентаций стараются напихать их контентом по максимуму. Им кажется, что если они что-то упустят, на них обязательно обрушится волна критики.

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

Широко - означает, что вы поверхностно обозначаете вашу предметную область, но зато так широко, как сможете. Вы показываете ее с высоты птичьего полета. Зрители видят всю картину целиком: все составные части проблемы, все возможные стратегии решения, все интересные области - словно карту в компьютерной игре-стратегии. Детали - вообще не предмет для такой презентации. Все дискуссии относительно деталей должны быть прекращены.

Глубоко - означает, что вы берете один определенный вопрос вашей тематики и прорабатываете его и только его. Других вопросов словно не существует. Если вас будут сбивать с темы, вы должны возвращать всех к предмету обсуждения.

Как часто вам нужно выполнить важную работу, но вы почему-то ее не делаете? Если с вас спросить, то сразу же найдется куча оправданий: делали другую работу, писали письмо, были на встрече или на совещании. Прикол в том, что вы действительно этим всем занимались. Вы не ленились. Если подумать, ваш день полностью забит полезной деятельностью. Однако, работа все равно не сделана. Почему?

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

Операционная система многозадачна. А человек - нет. Компьютер постоянно засыпает человека уведомлениями, алертами, сообщениями, индикаторами и невесть еще чем. Вам кажется, что это так и должно быть. Но это не так. Вы думаете, что нужно быть постоянно в курсе того, что происходит с вашими друзьями и с вашим компьютером. Но на самом деле делая десять дел одновременно, вы не делаете ни одного. Потому что вы не многозадачны. Это нормально.

Так что же теперь, отключить компьютер и запереться в одиночестве? "Именно так", - говорит Garr Reynolds в книге Naked Presenter (в оригинале для Kindle). Он приводит слова легендарного британского актера комика Джона Клиза: "Главная проблема современного человека - вечная спешка". Когда речь заходит о креативной работе вечную гонку непонятно с чем просто необходимо прекратить. Лучшие идеи и инсайты приходят вам в то время, когда вы оставлены на едине сами с собой: на прогулке, по дороге домой, в кафе, перед сном. Знаете место в офисе где лучше всего думается? Да-да. Помимо освежителя воздуха, там явно бы пригодился блокнот.

Эту простую статью я не мог написать четыре дня. Просто не мог собраться. В конце-концов, я занял переговорку на полчаса, выключил все мессенджеры, сел и написал. Вуаля!

Гарр Рейнольдс пишет, что вам просто необходимо место для приватной работы. Хорошо, если вы можете занять в любой момент переговорку или уединиться дома. Если нет, вы можете засесть где-нибудь в парке или кафе. Вы словно черепаха должны спрятаться в панцирь, отгородиться от внешнего мира, отключиться от Сети, убрать все возможные источники раздражения. Только тогда вы сможете плодотворно потрудиться.

Но это еще не все. Человеку сложно долго концентрироваться на чем-то одном. Вам нужно обязательно установить себе ограничения по времени. Мой опыт креативной работы показывает, что сессия в 40 минут - отличное решение. Если взять меньше, вам может не хватить времени. Если больше - вы потратитесь на лишние детали. Если работа большая, делайте несколько сессий по 40 минут, но с обязательным перерывом между ними.

Итого, чтобы сделать какую-то важную работу, руководствуйтесь этими шагами:

1. Назначьте четкое время, когда вы будете это делать.

2. Выберите место, в котором вам никто не помешает.

3. Отключите все (ВСЕ!) программы: всю почту, все мессенжеры, бейте себя линейкой по руке когда заходите перейти на не относящийся к делу сайт.

4. Используйте сессии по 40 минут. Делайте между ними перерывы.

Вот и все. Очень просто. Вы все это сами знаете. Но ведь не делаете, не правда ли? :)

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

Теперь вспомните что вас волнует сейчас больше всего. Проблемы на работе? Отсутствие денег? Мечты об отпуске?

Дэн Роэм в книге "Визуальное мышление" (в оригинале The Back Of The Napkin) говорит о том, гораздо легче найти решение какой-либо проблемы, если представить ее графически. Для этого нужно лишь нарисовать рисунок правильного типа. Мозг человека устроен таким образом, что гораздо лучше решает вопросы когда смотрит на них. Он просто видит решение.

Всего существует шесть типов визуализации, соответственно и шесть типов проблем. Вам нужно посмотреть на вашу проблему и понять к какому типу она относится:

1. Кто или Что

Сюда относятся все вопросы, связанные с людьми и вещами. Например: "Кто за это будет отвечать?", "Кого позвать на встречу?" или "Какое платье выбрать?"

За последнее время я наблюдал несколько десятков презентаций, которые начинались вот так

- Мы делаем систему управления электронным обучением...

- Мы провели исследование поведения посетителей на нашем сайте...

- Наша компания была основана более ста лет назад...

Это просто удивительно как люди любят так поступать. Они составляют презентации так, чтобы с первых секунд сесть на уши аудитории рассказом про себя:

- Мы предлагаем SAAS-решение...

- Наши технологии...

И мое любимое:

- Начну рассказ с того, кто мы такие...

Почему все так уверены, что именно это в первую очередь интересует слушателей? Единственное что выступающий гарантированно получит в таком выступлении - это претензии к себе лично и своей компании.

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

Почему каждый раз это происходит? В отличной книжке "iПрезентация" Кармин Галло рассказывает, что абсолютное большинство неправильно готовятся к своим выступлениям. Что они делают в первую очередь? Открывают PowerPoint и начинают накидывать слайды. Затем они идут на мероприятие и получают закономерный результат - безразличие аудитории ко всему сказанному.

Вообще-то правило одно. Но действительно самое главное. Сейчас все объясню.

Недавно в Подмосковье проходило заметное событие в индустрии интернет-разработок РИФ+КИБ 2011. Десятки выступающих показывали свои презентации перед четырехтысячной аудиторией. Практически все они промахнулись мимо своих слушателей.

Раз за разом ведущие не могли донести до аудитории то, что хотели, потому что совершали одну и ту же ошибку. Эта ошибка заключалась в несоблюдении наиглавнейшего правила любого выступления, любой речи и любого рассказа вообще. Это правило пластилиновой чашки.

Чтобы донести до человека какую-то мысль, нужно его к ней подготовить.

Все очень просто. Представьте, что ваш рассказ - это вода. Ум слушателя - кусок пластилина. Большинство ораторов льют воду вообще не глядя. Получается вот что:

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

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

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

Бррр...

Все мы видели нескончаемый поток презентаций, который выглядит вот так:

Что делает ведущий при этом? Правильно: зачитывает текст. Зрители уже давно все прочитали и заснули, а он еще не добрался и до середины.

Если вам приходится быть оратором и выступать с речами, лекциями или презентациями перед аудиторией, рекомендую прочитать эти правила донесения мысли до публики, которые Карстен Бредемайер описывает в своей книге "Черная риторика":

1. Способ выражения должен быть простым и метким - "смотреть в рот народу".
Сила речи заключается в ясности простых мыслительных ходов. Не нужно витиеватых оборотов.

Сделав сайт на любую из этих тем, станете популярными:

Продолжайте

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

На конференции User Experience 2010 Эрик Райс привел несколько слайдов, комментирующих процесс инноваций в дизайне.

Это схема дизайна, ориентированного на пользователя:

Это схема инновационного цикла:

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

Не нужно влезать в эту область, если вам нужно:

Все это плохие причины проводить инновайии в дизайне.

Вот здесь вы можете посмотреть презентацию целиком:
http://userexperience.ru/2010/wp-content/themes/webinars-uxr2010/docs/UX_2010_Russia_Eric_Reiss.pdf

Люк Вроблевски в своей заметке Webdagene: The Usage Lifecycle (которая в свою очередь является конспектом выступления Джошуа Портера на конференции Webdagene в Норвегии) говорит о жизненных циклах веб сервисов с точки зрения пользователя. Я бы выделил следующие моменты:

Этапы жизненного цикла услуг

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

Вот несколько полезных сайтов по дизайну пользовательского поведения:

http://www.90percentofeverything.com/ - блог Гарри Бригнулла (Harry Brignull). Примеры хорошего и плохого дизайна, рассказ об методах и инструментах проектирования, теоретические записи, а также отдельная категория про мобильные устройства.

http://www.uxbydesign.org/ - блог Брэдли Хебдона (Bradley Hebdon). Новости о запуске всяких дизайнерских штук, обзор модных фишечек и сайтов, интервью интересными людьми.

http://uxnet.org/ - это неудавшийся проект построения сети профессионалов в UX. Тем не менее, в архивах сайта большое количество интересных статей по поведенческому дизайну.

Дэн Маргулис в книге про цветокоррекцию "Фотошоп для профессионалов" описывает почему вы видите вот такую картину:

...а когда делаете фотографию, она выглядит вот так:

Хроматическая адаптация

Дело в том, что человеческий глаз и мозг постоянно адаптируются к окружающим условиям. Вспомните, как вы заходите в темную комнату и сначала ничего не видите, но постепенно глаза привыкают и предметы начинают проявляться перед вами. Точно так же на дискотеке, где осветитель забацывает слишком много зеленого цвета, вы привыкаете к нему и перестаете воспринимать. То есть происходит адаптация глаза (а точнее - мозга). В результате все объекты снова принимают нормальные оттенки.

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

Что же делать?

Нужно выбирать на фотографии предметы, которые точно являются белыми или серыми. То есть такие кусочки, про которые вы точно знаете что они белые или черные. Затем через интрумент Curves в фотошопе или другом редакторе по числам подогнать цветовой баланс изображения к нужным величинам. Самый простой способ сделать это - взять в окне кривых пипетку Black или White point и ткнуть ей в нужный кусок фотки. Программа сама перестроит цветовой баланс изображения.

Для более точной настройки... Читайте Маргулиса :)

Если вы хотите изучить Adobe Illustrator или другую программу векторной графики, я рекомендую вам книгу Стивена Уитроу и Джека Харриса "Vector Graphics and Illustration".

В ней по полочкам разложены все винтики и шпунтики векторного рисования. Можно читать все подряд и тренироваться на туториалах в конце каждой главы. А можно использовать как справочник, если вы все уже и так знаете.

Книга красиво напечатана и легко усваивается. Помимо уроков по векторной графике, в ней есть вставки с работами талантливых иллюстраторов, которые могут послужить для вас источниками вдохновения. В России английский оригинал можно найти в интернет-магазинах. Я так же видел русский перевод, но не буду его вам советовать по причине богомерзости оформления.

Посмотреть цены на книгу в интернет-магазинах:

На Амазоне: Vector Graphics and Illustration

На Abebooks.co.uk: Vector Graphics and Illustration