#Кнопки

🖱 Короткий гайд по кнопочкам в интерфейсе. Составили вместе с Сергеем. Он продакт в Ozon, консультирует и находит точки роста в других продуктах, ведет блог @Freshproductgo.

Кнопка — реплика человека
Например, человек думает «хочу оформить заказ» и нажимает на кнопку «Оформить заказ».

На кнопках лучше писать то, что продолжит фразу «я хочу… ».

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

Иногда рядом с кнопкой дописывают то, что не влезло. Например, [Подписаться на рассылку] и получить книгу в подарок. Это уместный приём, если то, что вынесли за кнопку — второстепенное и не влияет на основной результат.

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

Чтобы выделить кнопку, можно использовать пустое пространство вокруг или даже поставить её в рамку.

Кнопку, как и другие элементы, нужно адаптировать под мобилку и под веб — чтобы человек мог нажать на неё с любого устройства. Если делаете приложение, потестируйте кнопку. Она должна быть достаточно большой, чтобы пользователю удобно было нажать на нее пальцем. Но не стоит слишком усердствовать.

АБ-тесты для кнопок
Текст на кнопке влияет на конверсию. Если человек не поймёт, что от него хочет интерфейс, то и нажимать не будет.

Чтобы проверить, как работает текст на кнопке, можно запустить АБ-тест. Он покажет, какой вариант работает лучше.

Кейсы про кнопки
✨ Goolge PAY поменяли надпись на кнопке и click rate вырос на 12%.

Было [ADD CARD], стало [GET STARTED].

✨ Unbounce заменила текст call-to-action с «Начать ваш 30-дневный пробный период» на «Начать мой 30-дневный пробный период».

Конверсия выросла на 90%. Ещё в одном тесте кнопка с местоимением от первого лица показал себя лучше на 25%.

✨ Preply использовали вместо сложных терминов простые слова и увеличили бронирование уроков на 11%.

Было [Забронировать один-на-один урок], стало [Забронировать один урок].

Насмотренность без логики — это лотерея.

Например, Василий хочет сделать ремонт. В интернете он прочитал статью про то, что всем дизайнерам интерьеров важна насмотренность. «Ну, я же не дизайнер, мне логику не надо. Я просто посмотрю картинки в Pinterest, пойму, что мне нравится — и сделаю так» — подумал Василий.

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

Смотрит Василий на это и грустит.

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

Насмотренность — это хорошо. Но учитывайте ещё и:

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

И вот со всем этим в голове — насматривайтесь на здоровье:)

#софтскиллы

Как всё успевать

Всё хотела написать пост про то, как я успеваю заниматься 4 работами, каналом, ремонтом, музыкой, приготовлением еды, фотографией, путешествиями, ежедневной йогой и ещё кучей всего, но не успевала (ха). Если коротко — я не успеваю.

У меня дофига желаний и стремлений что-то делать, бесконечные туду-списки на столе и в телефоне, я постоянно всё забываю и нервничаю, когда что-то не успела. Состояния супер-продуктивности, когда я почти даже успеваю, предсказуемо заканчиваются усталой апатией (и хорошо, если не приступами агрессии).

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

А вообще пока я собиралась писать пост, наткнулась на статью Максима Ильяхова на ту же тему. Держите инструкцию, как всё успевать.

#tov

В прошлый раз я скидывала классную статью про проектирование голоса продукта с точки зрения Nielsen Norman Group.

На этот раз — статья Иры Моториной про другой метод проектирования. Берём пользователя, даём ему задачу с ограничениями, просим оценить эмоции от каждого этапа. А потом на основе этих эмоций строим Emotional Journey Map.

Про то, как именно всё это делать, и что потом — в статье Иры:)

#команде

How to design words, статья о том, как проектировать текст в интерфейсах. На английском.
Будет очень полезна дизайнерам, аналитикам, менеджерам или кому-то ещё, кто может проектировать интерфейсы или прототипы.

«Я не люблю читать. Поэтому я научился довольно неплохо писать»

Проектировать интерфейс нужно сразу с правильным по смыслу текстом, даже если форма будет корявой (никаких лорем ипсумов, они не дают понимания ни о смысле, ни о размере будущего текста).

Как ещё надо:
1. Покороче
2. Смысл — в заголовок
3. Однородные члены — в списки
4. Больше воздуха (портянку читать сложно)
5. Важное — в начало (или выделить), менее важное — потом (или выкинуть)
6. Большой блок информации разбить на несколько блоков поменьше
7. Писать в макетах, а не в текстовом документе

В статье классные примеры для каждого пункта. Будет понятно, даже если не знаете английский:)

Мам, я UX-писатель.

Очень тёплая и простая статья о том, как рассказать своей маме, кем работаешь:)

«Помнишь, когда мы были детьми, дедушка всё время выкидывал инструкции? Помнишь, как нам каждый раз приходилось доставать их из мусорки, когда не получилось правильно собрать?
В общем, часть моей работы — писать инструкции для твоих любимых приложений. Только в приложениях инструкции встроены внутрь, так что дедушка не сможет их выкинуть!»

#исследования

Отличный подробный гайд про разные методы UX-исследований. Краткие описания исследований, частые ошибки, фишки, примеры, статьи на тему. Что внутри:

- Глубинные интервью (проблемные и решенческие)
- Фокус-группы
- Этнографические (полевые) исследования
- Метод дневников
- Юзабилити-тестирования
- Карточные сортировки
- Проективные и творческие методы
- Опросы
- A/B-тестирования

Для себя я открыла проективные методы. И поностальгировала по доизоляционным временам, когда мы ходили в поля, проводили глубинки и юзабилити-тесты:)

​​Читаю некоторые рассылки не ради продукта, а ради текста. Потому что хорошо:)

​​Что писать на кнопке
#совет

Хорошая кнопка на лендинге или в рассылке:
— дает понять, что произойдет,
— синтаксически является ответом,
— совпадает с собственной мыслью пользователя.

Кнопка не может быть частью остального текста. Это реплика пользователя.

Пользователь — автору

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

[Что это?]
[Дайте две!]
[Беру]

Пользователь — самому себе

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

[Повешу в спальню]
[Надо успеть]
[Это про меня]

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

Типичные ошибки

Только 25 октября.
Лучшие скоморохи города.
[Не пропустите!]

Текст на кнопке — не призыв к действию.

Мы делаем лучший кофе
[Сомневаетесь?]

Здесь синтаксическая ошибка — как будто пользователь задает вопрос автору рассылки.

Кнопка принадлежит читателю. Дайте ему сказать.

Когда пытаешься быть полезным, но забыл проверить, что польза ...

Байка о том, как UX-специалистам в бизнесовых и технических темах важно разбираться.

Какое-то время назад я работала над приложением по оплате ЖКХ. Мы хотели сделать классные пуши, которые бы напоминали пользователям о том, что пора вносить показания счётчиков.
Команда вдохновилась идеей и устроила небольшой мозгоштурм. Была идея пушей, которые можно настроить по датам. Была идея, что в пуше есть кнопки «напомнить через час» или через день. Была идея, что пуш приходит с инпутом, куда можно ввести показание счётчика. Самые крутые пуши должны были сами распознавать счётчик по фотографии или камерой — вообще почти ничего не нужно делать руками.
А потом выяснилось, что всё это сделать можно, только очень-очень-очень дорого. Что угодно, что сложнее текстовых пушей, сразу увелививало сложность и стоимость разработки так, что мы бы не осилили.

У меня даже есть знакомая местная контора, которая занимается исключительно пушами (зато разными). И разные компании по всему миру покупают у них пуши, потому что сложно самим.

Мозгоштурмы и классные идеи — это круто. Но технические особенности и ограничения лучше всё-таки знать:)

Человечный интерфейс

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

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

Эмпатия
Намного проще взаимодействовать с тем, кто понимает тебя и твои проблемы.

На практике: подсвечивать боли, следовать за эмоциями (CJM с эмоциями — наш лучший друг).

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

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

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

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

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

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

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

На практике: пользователь пишет, что карту украли → не расспрашиваем детали, а блокируем (решаем крупную проблему), а потом уже обсуждаем, что делать.

Речевые связки
В погоне за краткостью и инфостилем, мы иногда исключаем предлоги и связки, которые обычно используем в речи. А зря, они могут помочь вам человечнее.

На практике: «Счётчик показывает число непрочитанных чатов. Счётчик не показывает число сообщений» → «Счётчик показывает число непрочитанных чатов, а вот число сообщений нет».

Тинькофф прислал рассылку про то, что у них в приложении теперь можно оплачивать ЖКУ по номеру лицевого счёта.
Самое время рассказать о классном продукте, в котором я работала какое-то время назад.

Квартплата+ — приложение, в котором можно оплатить ЖКУ, даже не зная номер лицевого счёта. Вводишь адрес — и получаешь все свои услуги. По тем, где есть начисления, они подставляются сразу, а где их нет (интернет, например), можно ввести свою сумму. А потом оплатить всё одной операцией и не вводить код подтверждения 5 раз, отдельно для каждой услуги. Эта была моя личная боль, да:)

Недостаток тоже есть: поиск по адресу работает не во всех регионах. Там, где его нет, придётся оплачивать через лицевой счёт или реквизиты.

Реклама не за деньги, а по любви ❤️

Мега-полезный материал с практическими советами и объяснениями, почему так

Вытащили самое главное из статьи Microcopy: an essential guide to becoming a more literate designer.

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

Задачи интерфейсных текстов:

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

1. Основные правила

- Пишите кратко и избегайте ненужных уточнений.
- Говорите конкретно и не используйте расплывчатые формулировки.
- Не используйте жаргон, если он не в мире клиента.
- Следите за объемом абзацев: не больше семи строк по 70 знаков.
- Пишите цифры словами: один, два, три… девять, а числа — цифрами: 10, 11, 12…

2. Заглавные буквы. Это правило скорее характерно для английского

Title case. Заглавная Буква В Каждом Слове

Выглядит более формально и визуально придает веса словам. C Title case легко переборщить, если слов больше трех. Если же слов больше шести, разработка может путаться, как же эта фраза написана на других экранах или в других частях проекта.

Sentence case. Заглавная буква только в начале фразы

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

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

John Saito подметил, что Apple используют Title Case, а Google — Sentence case.

Заглавные буквы в именах собственных и терминах

Ставьте заглавные буквы в названиях: Корпорация Зла, Криогенные Технологии Самары.

Не ставьте заглавные буквы в названиях функций, только если это не фирменные функции вроде Инстаграм Сторис или Озон Бонусы.

3. Ваше или наше

Ваш профиль или мой профиль — как лучше?

Ваш

Обращение «Ваш» говорит: у нас есть кое-что специально для тебя. Например, ваш отчет. И больше ничей.

Используйте «Ваш», когда хотите показать, что система что-то сделала персонально для пользователя.

Мой

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

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

Ничье

В большинстве случаев можно обойтись без «Ваш» или «Мой», и это будет даже лучше. Используйте местоимения только в тех ситуациях, когда нужно явно отделить личное от общего.

4. Объясняйте подробнее

Нельзя скатываться в негативный тон и писать «Извините, вы не можете выполнить действие». Пользователь, увидев такое, почувствует себя виноватым и подумает: «Ну, здесь я ничего не могу поделать. Пошло оно все к черту».

Если пользователь видит проблему, он должен видеть и способ ее решить.

Вот четыре способа, как вы можете ответить пользователю.

1. «Нет» — негативно-деструктивный.
2. «Нет, потому что» — негативно-конструктивный.
3. «Да, но» — позитивно-деструктивный.
4. «Да, и» — позитивно-конструктивный.

Используйте только конструктивные: второй и четвертый.

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

Позитивно-конструктивный способ выглядит так: вы подписались на наш блог, теперь вы можете просматривать скрытые посты.

5. Активный и пассивный залоги

Старайтесь использовать активный залог.

Активный залог описывает, как человек или объект что-то делает.

Сергей танцует и поет, потому что подписал документы и теперь ждет интерфейсные тексты.

Пассивный залог описывает, как с человеком или объектом что-то происходит.

Документы подписываются, дела делаются, а нами были подготовлены превосходные интерфейсные тексты.

Залоги в уведомлениях и сообщениях об ошибках

Используйте активный залог, когда хотите подчеркнуть, кто или что делает какие-то действия.

Андрей создал задачу, такси подъехало, молния сожгла дата-центр.

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

Корзина переполнена, компромат удален, задача выполнена.

6. Призывы к действиям

Используйте глаголы: скачать файл, зарегистрироваться, обновить страницу. Не пишите на кнопке «Аккаунт». Что аккаунт?

Хороший призыв к действию должен завершать мысль пользователя: «я хочу… »

7. Сообщения пользователю

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

- кто ему пишет;
- зачем ему пишут;
- почему он это получил;
- чего от него хотят.

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

То есть, подразумевается, что раньше у Сбера её не было?
#чтонового

Интересно, как поняли, что боль - это то что нужно пользователю? 🤔

@uxhorn

Завела хэштэг. Будет копилочка.
#чтонового

​​#uxwritingchallenge
Давайте попробуем улучшить эту ошибку или напишем понятную подсказку?

Контекст
В почту пришло письмо с ics-вложением — событием для google-календаря. Пользователь хочет добавить его в свой apple-календарь и поставить напоминание. При попытке сохранить напоминание появляется ошибка.