91. Простые интерфейсные решения

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

Баухаус: лицо двадцатого века

Документальный фильм «Баухаус: лицо двадцатого века», 49 минут, 1994 год.

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

В экспериментальных мастерских студенты работали под присмотром мастеров — передовых деятелей дизайна или искусства. Гропиус пригласил преподавать Пауля Клее и Василия Кандинского, занятия в мастерской по металлу вели венгерский авангардист Ласло Мохой-Надь и известный дизайнер Марианна Брандт. Гюнта Штольц была преподавателем текстильного отделения.

Баухаус существовал всего 14 лет во время Веймарской республики в Германии. Вооружённая полиция в апреле 1933 года разгромила здание, и школа была закрыта.

Простые интерфейсные решения

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

  1. Возможность в форме заказа ввести номер телефона в любом формате, даже буквами. С телефоном разберётся менеджер, а если не разберётся или телефон не указан, связаться с клиентом можно по почте.
  2. Если идентифицировать клиента можно по номеру телефона, почте и номеру бонусной карты, пусть он вводит в поле «логин» то, что хочет. Система сама разберётся.
  3. Если пользователь ввёл в форме входа адрес электронной почты, а потом перешёл к форме восстановления пароля, в ней уже должен быть этот адрес. На сайте «Мосигры» ссылка «Я забыл пароль» не открывает новую форму, а сразу отправляет нужное письмо на адрес, введённый в поле входа.
  4. В письме «Восстановление пароля» можно написать номер телефона для связи. Возможно, клиенту не нужен личный кабинет (и пароль от него), чтобы решить свою задачу.
  5. Не стоит с помощью КЛАДРа приводить адрес к нормализованной форме во время ввода. Лучше использовать его для подсказки, когда улицы с таким названием есть в разных районах города или с таким названием есть и проезд, и переулок.
  6. Если вам нужно знать ближайшее к адресу доставки метро, не спрашивайте пользователя, а берите его по API у Яндекс-карт.
  7. Если пользователь ввёл в поле поиска n символов и получил несколько подсказок для поисковых запросов, а затем ввёл ещё один символ и не получил ни одной подсказки, возможно, произошла опечатка. В этом случае стоит показывать старые подсказки, актуальные для n символов.

Обсуждение заметки.

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

Мобильные платежи

Адил Сиддики написал, как улучшить опыт мобильных платежей.

  1. Не размещайте подписи к полям в плейсхолдерах;
  2. Если пользователь должен заполнить поле, автоматически перемещайте фокус на это поле;
  3. Если в поле надо вводить только цифры, отображайте цифровую клавиатуру;
  4. Как только пользователь заполнил поле, перемещайте фокус на следующее;
  5. Размещайте кнопку платежа на видном месте. Стоит учесть, что при заполнении полей формы клавиатура может закрывать часть экрана;
  6. Добавьте иконки безопасности и надписи вроде «100% Secure»;
  7. Если поле заполнено некорректно, показывайте сообщение об ошибке сразу после его заполнения;
  8. После того как пользователь нажимает «Заплатить», моментально давайте обратную связь: блокируйте кнопку от дальнейших нажатий и показывайте на ней сообщение об обработке запроса или показывайте следующий экран;
  9. Если платёж не прошёл, чётко сообщите об этом и дайте возможность повторить платёж или обратиться за помощью;
  10. Пишите на кнопке платежа, что произойдёт после нажатия: «Pay $100», «Save card & pay $100»;
  11. Если платёж прошёл, наглядно сообщите об этом. И только потом показывайте остальные детали;
  12. Дайте пользователю возможность быстро очистить поле.

Картинки с примерами лучше смотреть в оригинальной статье.

Адаптация приложения для людей с плохим зрением

Алексей Берёзка написал про адаптацию приложения для людей с плохим зрением, которые увеличили на смартфоне размер шрифта.

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

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

«На большом кегле [заголовок акции] не влезет ну вообще никак. Если сделать верхнюю оранжевую панель резиновой и позволить ему в большом кегле занимать несколько строк, то верхний блок отъест половину экрана даже на больших айфонах, а про 4S вообще можно будет не вспоминать. Это не дело.

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

Так, а можно ж опять полностью убрать картинки и всё место занять заголовком».

Шаблон для аудита структуры сайта

Лиза Мария Мартин предложила шаблон для аудита структуры сайта, который может пригодиться при редизайне или поиске проблем текущей структуры.

Таблица включает:

  • Разделённые по уровням вложенности страницы сайта;
  • Страницы, доступные через ссылки в контенте, а не через меню;
  • Внешние ссылки в меню, которые ведут за пределы сайта;
  • Файлы;
  • Страницы, которые по URL принадлежат к одному разделу, а по навигационной схеме — к другому;
  • Дублирующие ссылки — чтобы не записывать одинаковую информацию о странице дважды, но знать, где они есть, чтобы отследить разные пути к контенту.

Указанные выше типы элементов закодированы цветом.

По каждой странице отображаются:

  • ID;
  • URL;
  • Название пункта меню или текст ссылки;
  • Заголовок страницы, который видит пользователь;
  • Заголовок страницы, указанный в метаданных;
  • Наименование раздела;
  • Примечания.

Удобный чат с клиентами

Ралука Будиу из Nielsen Norman Group написала, как сделать удобный чат с клиентами.

Кнопка чата:

  1. Размещайте ссылку на чат на странице «Контакты» и на странице товара. Иногда покупателям нужна дополнительная информация о товаре;
  2. Не оставляйте плавающую кнопку единственным способом открыть чат;
  3. Эта кнопка должна выделяться и располагаться в правом нижнем углу экрана;
  4. Пишите, что кнопка открывает чат. Если написать «Задать вопрос», пользователь может проигнорировать её, решив, что кнопка открывает форму обратной связи.

Сам чат:

  1. Если клиент пишет со смартфона, ожидание должно быть минимальным, так как ему сложнее заниматься чем-то ещё параллельно;
  2. Сообщайте пользователю, через какое время он получит ответ;
  3. Отображайте надпись, что оператор пишет сообщение, но не показывайте её слишком долго. Если подготовка ответа затянется, напишите клиенту, что оператор ещё работает над вопросом;
  4. Визуально разделяйте сообщения от разных участников чата. Например, свои сообщения, ответы оператора и автоматические ответы;
  5. Предусмотрите проблемы с подключением к сети. Если пользователь возобновляет прерванную сессию, прогресс работы над его вопросом должен сохраниться. Можно заранее спросить у клиента номер телефона для продолжения диалога в офлайне;
  6. Не заставляйте клиента повторять то, что он уже сообщил ранее;
  7. Оператор может переходить к конкретике сразу и писать «Привет! Чем могу помочь?» вместо «Привет! Как дела?». Совет актуален для стран, где не вежливо сразу говорить о деле;
  8. Предупреждайте, если с пользователем будет общаться бот;
  9. Оператор не должен злоупотреблять шаблонными ответами. Люди любят живое и не слишком формальное общение;
  10. Ответы на типовые вопросы должны появляться максимально быстро;
  11. Не отправляйте клиента читать те или иные страницы сайта. Уточняйте, чего он хочет, и давайте конкретные ответы. Если пользователь решился на чат, возможно, найденные на сайте ответы его не удовлетворили.

Полезные возможности чата:

  1. Загрузка в чат документов;
  2. Сохранение всего диалога в отдельный файл.

Рассылка Проектората × UX Notes

Технологии цифрового маркетинга — книга, где я был соавтором (параграф про создание сайта) и литературным редактором (привёл текст к единой стилистике и упростил формулировки). От 250 рублей.