85. Всплывающие подсказки

В этом выпуске: как общаться с другими людьми, о добавлении и поиске данных в таблицах, всплывающих подсказках, страницах-заглушках, Турбостраницах и AMP, работе с Google Optimize для проведения АБ-тестов.

Общение с людьми

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

Добавление и поиск данных в таблицах

Михаил Греков написал о добавлении и поиске данных в таблицах, с которыми работают.

Как помочь пользователю добавлять данные быстрее:

  1. Добавить в продукт горячие клавиши. Они не должны перебивать горячие клавиши среды. Хорошо, если они совпадают с горячими клавишами из других продуктов пользователя;
  2. Если данные достаточно однородны, пригодится возможность создать копию или создать на основе. В первом случае в ключевое поле добавится текст «Копия». Во втором — отобразится форма, в которую уже введены данные из основной записи;
  3. Если новая запись добавляется через модальное окно, она должна отобразиться в таблице без перезагрузки страницы;
  4. Дать возможность одновременно добавить вторую запись, не закрывая форму добавления первой;
  5. Дать возможность не возвращаться к таблице после добавления первой записи, а сразу добавить вторую. Например, с помощью кнопки «Сохранить и добавить новую»;
  6. Учитывать параметры поиска при добавлении записи. Если пользователь искал проект «Сайт города С» для исполнителя «Иванов», эти параметры могут быть заполнены в форме добавления нового проекта. Как в Jira;
  7. Импорт записей из файла полезен для работы со внешними источниками информации, первоначальном наполнении данными, которые раньше велись в Excel.

Поиск:

  1. Поиск по ключевой фразе — мощный инструмент, но сложный в реализации. Для удобной с ним работы может потребоваться учёт морфологии и опечаток, поиск в связанных таблицах и справочниках, предложение вариантов поискового запроса (autosuggest), выделение найденного фрагмента в таблице и на странице записи;
  2. Иногда пользователю для работы требуется всего несколько полей из расширенного поиска. Можно вынести их на панель основного поиска или дать пользователю настроить поля для основного поиска;
  3. Когда нет основного поиска, полезен поиск по столбцу таблицы. Многие табличные движки поддерживают его из коробки;
  4. Расширенный поиск нужен не всем: руководителям и тем, кто ищет информацию по запросам извне (колцентры, секретари). Расширенный поиск хорош в связке с сохранёнными поисковыми запросами;
  5. Доступ к сохранённым поисковым запросам должен быть таким же простым, как доступ к расширенному поиску. В списке запросов полезно показать количество записей, удовлетворяющих запросу;
  6. Обязательно надо показывать количество найденных записей. Иногда удобно показывать их до поиска, например, чтобы пользователь видел, как выбор параметров влияет на количество найденных записей;
  7. Поиск не должен сбрасываться после ухода со страницы и после выхода из системы. При этом важно, чтобы пользователь понимал, что применены критерии поиска;
  8. Должна быть возможность отключить фильтр одним нажатием;
  9. При выборе параметров поиска из раскрывающегося списка бывает полезен множественный выбор и возможность выбрать и снять все варианты из списка. Например, так можно найти записи всех цветов кроме жёлтого.

Всплывающие подсказки

Алита Джойс написала о всплывающих подсказках (tooltips).

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

  1. Не стоит прятать в подсказки важную информацию, без которой пользователю не выполнить нужное действие. Например, длинный список требований к паролю;
  2. Подсказка должна быть краткой;
  3. Подсказка должна быть полезной. Если на кнопке написано «Add new line», в подсказке к ней нет смысла писать «Add new line»;
  4. Всплывающая подсказка должна отображаться и при наведении курсора, и при фокусировке на элементе интерфейса с помощью клавиатуры;
  5. Чтобы было ясно, с каким элементом связана подсказка, у неё должна быть стрелка, указывающая на этот элемент;
  6. Будьте последовательны. Если всплывающая подсказка есть у одной иконки, она должна быть и у другой;
  7. У иконок без подписей должны быть всплывающие подсказки;
  8. Подсказка не должна перекрывать информацию, связанную с текущей целью пользователя.

(Самая популярная ссылка в этой подборке, если судить по количеству лайков в ВК.)

Страницы-заглушки

Игорь Васильев написал о проектировании страниц-заглушек.

Пользователь видит пустой экран, когда:

  1. Что-то сломалось. Надо продумать все причины ошибок (нет связи, завис сервер, сбой в работе модуля и так далее) и для каждой подготовить текст о том, что могло произойти и что делать пользователю;
  2. Содержимое должен создать сам пользователь. Надо объяснить пользователю, что от него зависит наполнение этой страницы, и предложить ему сделать первый шаг. Например, перейти в список ресторанов, чтобы добавить что-то в избранное. Можно предложить ему подборку лучших ресторанов в городе;
  3. Содержимое должны добавить другие пользователи системы. Надо объяснить, что происходит. Если у пользователя нет прав, можно предложить аналогичные объекты со свободным доступом или дать ему возможность запросить приглашение;
  4. Поиск ничего не нашёл. Если причина в опечатке, стоит попробовать её исправить. Также можно показать похожие товары из заданной категории, предложить ослабить фильтры или вернуться к полному списку товаров.

Общие рекомендации:

  1. Предложите действие: наполнить страницу, посмотреть аналоги, сообщить о проблеме;
  2. Добавьте иллюстрацию, чтобы разрядить обстановку;
  3. Будьте краткими;
  4. Текст сообщения начинайте с цели: «Чтобы найти любимые места, перейдите в список ресторанов»;
  5. Говорите по-человечески: пишите «На сегодня ещё нет планов» вместо «13.02.2019 ничего нет»;
  6. Добавьте немного юмора или жаргона, если продукт нацелен на узкую аудиторию;
  7. Язык должен соответствовать платформе. В мобильном приложении — tap, в десктопном — click.

Турбостраницы и AMP

В «Сибириксе» написали о Турбостраницах Яндекса и технологии Accelerated Mobile Pages, которую поддерживает Гугл. Это отдельные версии страниц, которые моментально открываются из результатов поиска.

Плюсы:

  • Быстрая загрузка;
  • Высокие позиции в поиске;
  • Место в «карусели» в гугловом поиске.

Минусы:

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

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

Google Optimize для АБ-тестов

Ольга Шаврина продолжила рассказ об использовании Google Optimize для проведения АБ-тестов.

Как тестировать:

  • Всплывающие блоки вроде по умолчанию скрытой плашки с календарём (режим Interactive mode);
  • Сразу все типовые элементы на странице, например, карточки товаров в каталоге (кнопка Select similar);
  • Совершенно новые элементы интерфейса. Экспериментальный дизайн отображается после полной загрузки страницы, поэтому пользователь может заметить исчезновение новых элементов. Это снижает доверие. Скрытие всего содержимого страницы до загрузки эксперимента замедляет продукт. Чтобы избежать этого, новые элементы следует добавлять в скрытом виде (display: none), а в рамках эксперимента включать их. Тогда пользователь может заметить не исчезновение, а появление элементов, что вполне нормально для современных сайтов.

Почему лучше тестировать на всех языковых версиях одновременно:

  • На результаты могут влиять неточности перевода;
  • Поведение аудитории может отличаться (немцы и итальянцы);
  • Объём контента может быть разным. В одной стране много товаров, в другой — мало, и появление нового параметра фильтрации будет чаще приводить к пустому списку;
  • Больше выборка и статистически более значимые результаты.

Как проверять экспериментальный дизайн на мобильных устройствах: Preview → Share preview → Открытие полученной ссылки в любом браузере.