Оффтоп Олег Чулаков
658

Chulakov Design #5: «Прочитай меня!» или как донести до пользователя информацию

Информация — самое важное на сайте. Дизайнеры Студии Олега Чулакова делятся проверенными способами заинтересовать пользователей контентом, который вы собираетесь разместить.

В закладки

Больше заметок дизайнеров вы можете прочитать здесь.

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

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

Что это такое и чем она отличается от карты сайта?

Информационная архитектура — это схема, которая содержит все смысловые блоки сайта или приложения. Карта сайта содержит в себе только структуру и переходы страниц, но не рассказывает о том, какие блоки используются в этих страницах.

Для чего нужна информационная архитектура?

С помощью ИА можно оперировать всей структурой сайта. Она помогает увидеть взаимосвязи между страницами, упорядочить информацию, понять, где контент дублируется, а где его не хватает, и в конечном итоге смоделировать путь пользователя.

Как сделать информационную архитектуру?

По-разному. Иногда ее расписывают в гугл-документах или с помощью программ, вроде Mindmap. Мы советуем рисовать ее в виде блок-схемы. Смотрите прикрепленный файл.

Как работать с информационной архитектурой?

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

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

Контентмейкер

«У меня нет контента для сайта», — часто звучит от дизайнеров. Плохой дизайнер всегда надеется, что заказчик предоставит на блюдечке контент, который он просто разместит на сайте в заранее приготовленных блоках. Редко случается, что клиент говорит: «Мне нужно пять страниц с таким-то содержанием, вот здесь будет использоваться такой-то текст, а для этих блоков у меня есть вот такие фотографии». Дизайнер должен уметь определять, что нужно пользователю, а что важно для бизнеса, и из совокупности этих потребностей формировать контент или техническое задание для копирайтера.

Несколько советов, которые могут помочь:

  • определите тип контента. Сайт всегда решает какую-либо задачу. Поставьте себя на место пользователя и спросите, что вам было бы интересно;

  • спросите клиента. Нужно не просто попросить клиента дать вам что-нибудь. Задайте конкретные вопросы о пользователях, о товаре или услуге;
  • используйте то, что есть. Больше не всегда означает лучше. Подумайте, как показать в выгодном свете то, что у вас уже есть. Любую мысль можно развить, проиллюстрировать, обыграть интересной механикой;

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

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

Настойчивый консультант

Никто не любит чрезмерной назойливости. Она не только не способствует продажам, но наоборот уменьшает их. Вы должны чувствовать клиента и понимать, какую информацию он хочет узнать в данный момент.

Если вы продаете дорогой товар, который не покупают импульсивно, то нет смысла делать большие заголовки «Успей купить» и красные кнопки. Следует описать, почему он столько стоит, и чем может помочь пользователю. В описании тоже не нужно размещать полотно текста. Лучше начинать от общего и переходить к частному, делая ответвления.

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

Модальные окна

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

Если по каким-либо причинам вы все же решили затемнить экран и привлечь внимание пользователя таким радикальным образом, обязательно учтите:

  • название. Дайте пользователю сразу понять, что за окно возникло перед ним, и почему оно появилось. В идеале заголовок модального окна и кнопка, которая его вызвала, должны совпадать;
  • содержание. Копирайт модальных окон должен соответствовать tone of voice бренда, для которого вы проектируете сайт или приложение. Если конкретных требований по текстам у заказчика нет, создайте впечатление общения приложения с пользователем. Составляйте закрытые вопросы, на которые можно ответить «Да» или «Нет», и тогда у посетителя никогда не возникнет мысли «Что от меня хотят?» и «Что нажимать?»;
  • расположение. Цель модального окна — сохранение контекста той страницы, на которой пользователь находился. Поэтому «всплывашка» не должна быть слишком большой или слишком маленькой. Она должна быть легкой во взаимодействии и хорошо заметной (но без фанатизма). Если в какой-то момент вы понимаете, что без скролла не обойтись, подумайте об отдельной странице;
  • пути отхода. Самое важное — дайте пользователю возможность беспрепятственно закрыть окно. Это может быть кнопка отмены, перекрестие «закрыть», клик (тап) за пределами окна. Также можно добавить возможность закрытия по клавише «Escape».

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

Push me

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

Это микровзаимодействие может быть как полезным, так и паразитирующим. Полезными являются уведомления о списании средств с карты, о прибытии такси по адресу, о новом письме на почту (если это не спам). Как только приложение начинает злоупотреблять вниманием, посылая бесполезные сообщения вроде «Эй, тебя давно не было! Скорее возвращайся и захвати еще пару замков!», это в определенный момент начнет раздражать пользователя. В лучшем случае, он отключит уведомления в настройках, в худшем — избавится от приложения навсегда.

Уведомление должно быть кратким. Если вы получили SMS с кодом подтверждения какой-либо операции, а нужный код находится в самом конце сообщения, он не попадет в превью на пуше. Это неудобно. Емкий информативный вариант «Ваш код – ХХХХ» будет значительно лучше.

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

Спасибо за ваш заказ

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

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

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Олег Чулаков", "author_type": "self", "tags": [], "comments": 1, "likes": 7, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 38607, "is_wide": false }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 38607, "author_id": 2389, "diff_limit": 1000, "urls": {"diff":"\/comments\/38607\/get","add":"\/comments\/38607\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/38607"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

1 комментарий 1 комм.

Популярные

По порядку

0

«Мы советуем рисовать ее в виде блок-схемы. Смотрите прикрепленный файл.» Интересно. Где только смотреть его?

Ответить

Комментарий удален

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Хакеры смогли обойти двухфакторную
авторизацию с помощью уговоров
Подписаться на push-уведомления