Между человеком, который вам симпатичен, и сайтом, который вам интересен, гораздо меньше отличий, чем можно ожидать.
Чтобы разобраться с этим, давайте вспомним, как мы общаемся с другими людьми в реальном мире.
Можно выделить три инструмента, при помощи которых мы взаимодействуем с окружающими (в зависимости от того, насколько они нам близки и насколько тесное общение нас интересует):
Точно так же, используя те же приемы, мы «развиваем отношения» с сайтом.
Здесь надо понять важную вещь: всё, с чем мы можем так или иначе общаться (то есть получать некий фидбек в ответ на наши действия) подсознательно приравнивается нами к другому живому существу со сходным образом мысли. Отсюда привычка вести философские беседы с неработающим прибором, отсюда тяга наших предков давать человеческое лицо природным и физическим явлениям, отсюда даже смайлы.
Ведь куда проще найти общий язык с другим человеком, чем с неведомой бездушной штуковиной, верно?
Возвращаясь к нашим инструментам общения: всё начинается с оценки внешних данных. Применительно к вебу это общее впечатление о виде страницы; особое внимание уделяется иллюстрациям.
Вывести общее впечатление о сайте нам поможет ответ на следующие вопросы:
Желательно, чтобы на эти вопросы отвечала группа из пяти-десяти человек. И это не должны быть разработчики проекта, поскольку за время работы над сайтом они наверняка успелипогрузиться в глубины делирия заучить как что работает, даже если оно работает вопреки логике.
Самые распространённые ошибки на страницах:
В отношении иллюстраций существуют как минимум две противоположные точки зрения.
Первые объявили войну «скучным иллюстрациям». Представители этого направления в качестве визуальной рифмы для понятия «автоматизация бизнеса» вполне могут избрать ананас. Потому что он небанальный, красивый и вкусный, а значит — вызывает положительные ассоциации. Разве не это нам нужно чтобы получше продать продукт?
Точка зрения второй стороны заключается в следующем: визуал должен быть логически связан со всем остальным материалом на странице.
Здесь можно привести цитату из веб-догмы компании «FatDUX», евангелистов юзабилити:
Anything that is irrelevant within the context of the page must be eliminated.
Всё, что не связано напрямую с содержанием страницы, должно быть удалено.
То есть моральное право использовать фотографии милых щенят на главной странице появляется у дизайнера только если сайт торгует щенятами, или если пёсики являются маскотом компании.
Моя позиция представляет собой среднее арифметическое между обоими подходами: связь между иллюстрациями и всем остальным должна быть, при чём она должна существовать не только на эмоциональном плане. Хороший пример — иллюстрации, где картинка представляет собой законченный, продуманный образ, вызывающий ассоциации и эмоционального, и логического характера.
Например:
Насмотреться можно на adme.ru в рубрике «Принты оптом».
А сейчас — самое интересное. Поговорим о конкретных инструментах для связи с пользователем через визуал.
№1 в списке — человеческое лицо. Фото людей (и даже их стилизованные изображения) обладают естественным магнетизмом, представляя собой соблазнительный визуальный якорь. Вне зависимости от того, красиво лицо или не очень, мы зацепимс�� за него взглядом и некоторое время потратим на изучение. Это работает даже на грудничках и обезьянах!
Если вы подаёте резюме с фотографией, есть больше вероятности, что его рассмотрят. Если вы продаёте йогурт, на этикетке которого изображено счастливое белозубое семейство, это будет по крайней мере одним из факторов, почему его покупают: люди подсознательно пытаются купить не только продукт (йогурт), но и атрибуты, которые его окружают (счастье, крепкая семья, здоровье, красота).
Более того, имея в зоне внимания лицо человека, мы больше открыты к восприятию новой информации. Мы жаждем связи с другими людьми.
Именно поэтому очень важно тщательно подбирать фото, поскольку оттенки мимики могут вызвать не совсем тот результат, которого мы ожидали. Например, игриво улыбающаяся секретарша на странице с контактной информацией может вызвать ощущение, что контора недостаточно серьёзная. Но та же картинка на 404 странице может скрасить одиночество заплутавшего пользователя, особенно если будет сопровождаться простой, а может даже остроумной инструкцией к дальнейшим действиям.
Не совсем секретарша, но тоже лепота — 404 на zeldman.com:
Дальше в нашем арсенале иллюстрации типа было/стало.
Все помнят из детства картинки «найди 10 отличий»? У такого визуала два преимущества: игровая форма восприятия и разительный эффект между прошлым, унылым, и настоящим, улучшенным.
Так мы пришли к ещё одному инструменту управления вниманием: неожиданный визуал.
Нота бене: «неожиданный» не означает «нелогичный». Здесь мы говорим скорее о вещах,
Задача в этом случае — вызвать яркие, сильные эмоции, либо любопытство. Именно на этом инструменте чаще всего выезжают любители «нетрадиционного» визуала.
Якоб Нильсен уверяет: пользователи не читают. Они просматривают.
Типичные схемы просмотра страниц представляют собой буквы E (внимательный пользователь), Г (быстрый пользователь) или F (эта схема просмотра встречается чаще всего).
Типичное поведение при этом: пользователь просматривает одну-две верхние строчки, затем спускается чуть ниже и просматривает ещё пару строчек, на этот раз доходя примерно до их середины. Потом его взгляд перемещается вертикально, выхватывая слова из левой части столбца текста.
Как мы можем это использовать?
Все мы любим конкретные цифры и исчислимые выражения. Большая часть — это сколько? Около 60% — уже лучше, а ещё лучше — 63%.
Старайтесь использовать простые фразы, избегайте деепричастных оборотов и не разговаривайте с незнакомыми дядями.
… Да и с тётями тоже не стоит. Текст на сайте должен быть рассчитан на вашу целевую аудиторию. Так что, если вы только что прочитали Энциклопедический словарь-справочник руководителя предприятия, а ваша ЦА — молодые мамы, храните своё великое знание в тайне до более подходящего проекта.
Я не буду сейчас углубляться в тему хорошего коп��райтинга, просто подскажу, что стоит почитать для общего понимания вопроса:
Дэвид Огилви «О рекламе»
Джо Витале «Гипнотические рекламные тексты»
Алан и Барбара Пиз «Язык письма»
Для создания эффективных приёмов работы с текстом фокусируемся на:
Крайне удачный пример — dirty.ru с их персонифицированными фразами.
Cистемные сообщения, которые пользователь сам может под себя настроить, это тоже большое дело.
К примеру, сообщение об авторизации на diary.ru приветствует автора приятным ему образом.
Осязание, ощущение пространства и своего положения в нём — один из основных слонов на котором стоит наше восприятие. А следовательно, и одна из основных потребностей. Это штука, которая нас успокаивает и даёт уверенность: всё в порядке, мы знаем, где находимся и представляем, куда идти дальше.
В интернете у нас нет возможности опереться о плашку или пощупать кнопочки формы заказа.
Так что с этим делать?
То же, что и всегда: создать ощущение, что интернет-пространство подчиняется законам физического мира, и ввести некую систему ориентиров, по которой пользователь сможет определять своё положение на сайте.
В этом нам помогут три принципа:
Не забывайте наделять объекты на странице атрибутами предметов из реального мира, например:
Помните, ваша задача — симулировать реальность, да не простую, а комфортную.
Чтобы разобраться с этим, давайте вспомним, как мы общаемся с другими людьми в реальном мире.
Можно выделить три инструмента, при помощи которых мы взаимодействуем с окружающими (в зависимости от того, насколько они нам близки и насколько тесное общение нас интересует):
- визуальный контакт,
- вербальный контакт,
- физический контакт.
Точно так же, используя те же приемы, мы «развиваем отношения» с сайтом.
Здесь надо понять важную вещь: всё, с чем мы можем так или иначе общаться (то есть получать некий фидбек в ответ на наши действия) подсознательно приравнивается нами к другому живому существу со сходным образом мысли. Отсюда привычка вести философские беседы с неработающим прибором, отсюда тяга наших предков давать человеческое лицо природным и физическим явлениям, отсюда даже смайлы.
Ведь куда проще найти общий язык с другим человеком, чем с неведомой бездушной штуковиной, верно?
Визуальный контакт
Возвращаясь к нашим инструментам общения: всё начинается с оценки внешних данных. Применительно к вебу это общее впечатление о виде страницы; особое внимание уделяется иллюстрациям.
Вывести общее впечатление о сайте нам поможет ответ на следующие вопросы:
- Что мы видим в первую очередь?
- Что самое главное на странице? Внимание! Ответ на этот вопрос должен совпадать с предыдущим; если не совпадает, у вас где-то плохо.
- Есть ли что-то отвлекающее или запутывающее?
- Куда, как нам кажется, мы должны идти дальше?
Желательно, чтобы на эти вопросы отвечала группа из пяти-десяти человек. И это не должны быть разработчики проекта, поскольку за время работы над сайтом они наверняка успели
Самые распространённые ошибки на страницах:
- избыток ссылок,
- неочевидные или непривычные названия («искать» или «быстрый поиск» вместо «поиск»),
- слишком много пестроты (при оптимальном количестве якорей на экран — 3),
- плохая навигация или полное её отсутствие.
В отношении иллюстраций существуют как минимум две противоположные точки зрения.
Первые объявили войну «скучным иллюстрациям». Представители этого направления в качестве визуальной рифмы для понятия «автоматизация бизнеса» вполне могут избрать ананас. Потому что он небанальный, красивый и вкусный, а значит — вызывает положительные ассоциации. Разве не это нам нужно чтобы получше продать продукт?
Точка зрения второй стороны заключается в следующем: визуал должен быть логически связан со всем остальным материалом на странице.
Здесь можно привести цитату из веб-догмы компании «FatDUX», евангелистов юзабилити:
Anything that is irrelevant within the context of the page must be eliminated.
Всё, что не связано напрямую с содержанием страницы, должно быть удалено.
То есть моральное право использовать фотографии милых щенят на главной странице появляется у дизайнера только если сайт торгует щенятами, или если пёсики являются маскотом компании.
Моя позиция представляет собой среднее арифметическое между обоими подходами: связь между иллюстрациями и всем остальным должна быть, при чём она должна существовать не только на эмоциональном плане. Хороший пример — иллюстрации, где картинка представляет собой законченный, продуманный образ, вызывающий ассоциации и эмоционального, и логического характера.
Например:
Насмотреться можно на adme.ru в рубрике «Принты оптом».
А сейчас — самое интересное. Поговорим о конкретных инструментах для связи с пользователем через визуал.
№1 в списке — человеческое лицо. Фото людей (и даже их стилизованные изображения) обладают естественным магнетизмом, представляя собой соблазнительный визуальный якорь. Вне зависимости от того, красиво лицо или не очень, мы зацепимс�� за него взглядом и некоторое время потратим на изучение. Это работает даже на грудничках и обезьянах!
Если вы подаёте резюме с фотографией, есть больше вероятности, что его рассмотрят. Если вы продаёте йогурт, на этикетке которого изображено счастливое белозубое семейство, это будет по крайней мере одним из факторов, почему его покупают: люди подсознательно пытаются купить не только продукт (йогурт), но и атрибуты, которые его окружают (счастье, крепкая семья, здоровье, красота).
Более того, имея в зоне внимания лицо человека, мы больше открыты к восприятию новой информации. Мы жаждем связи с другими людьми.
Именно поэтому очень важно тщательно подбирать фото, поскольку оттенки мимики могут вызвать не совсем тот результат, которого мы ожидали. Например, игриво улыбающаяся секретарша на странице с контактной информацией может вызвать ощущение, что контора недостаточно серьёзная. Но та же картинка на 404 странице может скрасить одиночество заплутавшего пользователя, особенно если будет сопровождаться простой, а может даже остроумной инструкцией к дальнейшим действиям.
Не совсем секретарша, но тоже лепота — 404 на zeldman.com:
Дальше в нашем арсенале иллюстрации типа было/стало.
Все помнят из детства картинки «найди 10 отличий»? У такого визуала два преимущества: игровая форма восприятия и разительный эффект между прошлым, унылым, и настоящим, улучшенным.
Так мы пришли к ещё одному инструменту управления вниманием: неожиданный визуал.
Нота бене: «неожиданный» не означает «нелогичный». Здесь мы говорим скорее о вещах,
- которые нам редко доводится видеть,
- которые мы не рассчитывали увидеть в конкретных условиях,
- которые являются шокирующими,
- … или очень милыми.
Задача в этом случае — вызвать яркие, сильные эмоции, либо любопытство. Именно на этом инструменте чаще всего выезжают любители «нетрадиционного» визуала.
Вербальный контакт
Якоб Нильсен уверяет: пользователи не читают. Они просматривают.
Типичные схемы просмотра страниц представляют собой буквы E (внимательный пользователь), Г (быстрый пользователь) или F (эта схема просмотра встречается чаще всего).
Типичное поведение при этом: пользователь просматривает одну-две верхние строчки, затем спускается чуть ниже и просматривает ещё пару строчек, на этот раз доходя примерно до их середины. Потом его взгляд перемещается вертикально, выхватывая слова из левой части столбца текста.
Как мы можем это использовать?
- Располагайте наиболее важную информацию в верхних строчках.
- Избегайте длинных текстов. Чем больше строчек, тем меньше вероятности, что их прочитают.
- Начинайте абзацы с хороших тезисов, так у них больше шансов быть прочитанными.
- Если «простыни» не избежать и вам нужно привлечь внимание к чему-то внутри текста, сделайте так, чтобы взгляд пользователя споткнулся обо что-то. Хорошим решением могут быть, например, списки.
Все мы любим конкретные цифры и исчислимые выражения. Большая часть — это сколько? Около 60% — уже лучше, а ещё лучше — 63%.
Старайтесь использовать простые фразы, избегайте деепричастных оборотов и не разговаривайте с незнакомыми дядями.
… Да и с тётями тоже не стоит. Текст на сайте должен быть рассчитан на вашу целевую аудиторию. Так что, если вы только что прочитали Энциклопедический словарь-справочник руководителя предприятия, а ваша ЦА — молодые мамы, храните своё великое знание в тайне до более подходящего проекта.
Я не буду сейчас углубляться в тему хорошего коп��райтинга, просто подскажу, что стоит почитать для общего понимания вопроса:
Дэвид Огилви «О рекламе»
Джо Витале «Гипнотические рекламные тексты»
Алан и Барбара Пиз «Язык письма»
Для создания эффективных приёмов работы с текстом фокусируемся на:
- Внимании. Пользователь любит оказываться в центре внимания. Или более осторожно: любит, когда о нём заботятся.
- Дружелюбии. Люди предпочитают общаться с другими людьми, а не техникой; любят видеть своё имя (или ник).
Крайне удачный пример — dirty.ru с их персонифицированными фразами.
Cистемные сообщения, которые пользователь сам может под себя настроить, это тоже большое дело.
К примеру, сообщение об авторизации на diary.ru приветствует автора приятным ему образом.
Физический контакт
Осязание, ощущение пространства и своего положения в нём — один из основных слонов на котором стоит наше восприятие. А следовательно, и одна из основных потребностей. Это штука, которая нас успокаивает и даёт уверенность: всё в порядке, мы знаем, где находимся и представляем, куда идти дальше.
В интернете у нас нет возможности опереться о плашку или пощупать кнопочки формы заказа.
Так что с этим делать?
То же, что и всегда: создать ощущение, что интернет-пространство подчиняется законам физического мира, и ввести некую систему ориентиров, по которой пользователь сможет определять своё положение на сайте.
В этом нам помогут три принципа:
- Интерактивность. Все элементы, с которыми можно взаимодействовать, должны иметь состояния.
- Информативность. Не должно быть лишних элементов. Если можно убрать какой-то элемент без вреда для информативности страницы, значит его нужно убрать.
- Интуитивность. Не должно быть элементов, которые могли бы означать что-то ещё.
Не забывайте наделять объекты на странице атрибутами предметов из реального мира, например:
- текстурами на кнопках и плашках, благодаря которым кажется, что элемент сделан из какого-то материала;
- рефлексами на соседние поверхности от объекта, кажущегося стеклянным;
- возможностью менять форму, размер или положение в зависимости от того, что вы с ним делаете.
Помните, ваша задача — симулировать реальность, да не простую, а комфортную.
