В этом выпуске: видео о Баухаусе, статьи о простых интерфейсных решениях, об улучшении опыта мобильных платежей, адаптации приложения для людей с плохим зрением, шаблоне для аудита структуры сайта, удобном чате с клиентами.
Баухаус: лицо двадцатого века
Документальный фильм «Баухаус: лицо двадцатого века», 49 минут, 1994 год.
Баухаус — легендарная школа искусств эпохи модернизма. Её основатель Вальтер Гропиус хотел объединить искусство с промышленностью и сделать его частью повседневной жизни. Он хотел производить товары массового потребления с привлекательным дизайном, которые преображали бы интерьеры домов и город в целом.
В экспериментальных мастерских студенты работали под присмотром мастеров — передовых деятелей дизайна или искусства. Гропиус пригласил преподавать Пауля Клее и Василия Кандинского, занятия в мастерской по металлу вели венгерский авангардист Ласло Мохой-Надь и известный дизайнер Марианна Брандт. Гюнта Штольц была преподавателем текстильного отделения.
Баухаус существовал всего 14 лет во время Веймарской республики в Германии. Вооружённая полиция в апреле 1933 года разгромила здание, и школа была закрыта.
Простые интерфейсные решения
Сергей Абдульманов написал о простых интерфейсных решениях, упрощающих жизнь пользователя:
- Возможность в форме заказа ввести номер телефона в любом формате, даже буквами. С телефоном разберётся менеджер, а если не разберётся или телефон не указан, связаться с клиентом можно по почте;
- Если идентифицировать клиента можно по номеру телефона, почте и номеру бонусной карты, пусть он вводит в поле «логин» то, что хочет. Система сама разберётся;
- Если пользователь ввёл в форме входа адрес электронной почты, а потом перешёл к форме восстановления пароля, в ней уже должен быть этот адрес. На сайте «Мосигры» ссылка «Я забыл пароль» не открывает новую форму, а сразу отправляет нужное письмо на адрес, введённый в поле входа;
- В письме «Восстановление пароля» можно написать номер телефона для связи. Возможно, клиенту не нужен личный кабинет (и пароль от него), чтобы решить свою задачу;
- Не стоит с помощью КЛАДРа приводить адрес к нормализованной форме во время ввода. Лучше использовать его для подсказки, когда улицы с таким названием есть в разных районах города или с таким названием есть и проезд, и переулок;
- Если вам нужно знать ближайшее к адресу доставки метро, не спрашивайте пользователя, а берите его по API у Яндекс-карт;
- Если пользователь ввёл в поле поиска n символов и получил несколько подсказок для поисковых запросов, а затем ввёл ещё один символ и не получил ни одной подсказки, возможно, произошла опечатка. В этом случае стоит показывать старые подсказки, актуальные для n символов.
Обсуждение в ВК.
(Самая популярная ссылка в этой подборке, если судить по количеству лайков в ВК.)
Мобильные платежи
Адил Сиддики написал, как улучшить опыт мобильных платежей:
- Не размещайте подписи к полям в плейсхолдерах;
- Если пользователь должен заполнить поле, автоматически перемещайте фокус на это поле;
- Если в поле надо вводить только цифры, отображайте цифровую клавиатуру;
- Как только пользователь заполнил поле, перемещайте фокус на следующее;
- Размещайте кнопку платежа на видном месте. Стоит учесть, что при заполнении полей формы клавиатура может закрывать часть экрана;
- Добавьте иконки безопасности и надписи вроде «100% Secure»;
- Если поле заполнено некорректно, показывайте сообщение об ошибке сразу после его заполнения;
- После того как пользователь нажимает «Заплатить», моментально давайте обратную связь: блокируйте кнопку от дальнейших нажатий и показывайте на ней сообщение об обработке запроса или показывайте следующий экран;
- Если платёж не прошёл, чётко сообщите об этом и дайте возможность повторить платёж или обратиться за помощью;
- Пишите на кнопке платежа, что произойдёт после нажатия: «Pay $100», «Save card & pay $100»;
- Если платёж прошёл, наглядно сообщите об этом. И только потом показывайте остальные детали;
- Дайте пользователю возможность быстро очистить поле.
Картинки с примерами лучше смотреть в оригинальной статье.
Адаптация приложения для людей с плохим зрением
Алексей Берёзка написал про адаптацию приложения для людей с плохим зрением, которые увеличили на смартфоне размер шрифта.
Можно использовать динамические текстовые стили вместо статичных и научить интерфейс растягиваться под разные размеры шрифтов. В результате текст увеличится, но приложение станет неудобным.
Алексей на примере показал, что можно изменить в компоновке, контенте и контролах приложения с увеличенными шрифтами.
На большом кегле заголовок акции не влезет ну вообще никак. Если сделать верхнюю оранжевую панель резиновой и позволить ему в большом кегле занимать несколько строк, то верхний блок отъест половину экрана даже на больших айфонах, а про 4S вообще можно будет не вспоминать. Это не дело.
Можно поиграть с лейаутом внутри ячейки акции: сделать картинку квадратной, а освободившееся место занять заголовком. Но картинки для акций подгоняются под конкретный формат и будут некорректно показываться в другом. Так нельзя.
Так, а можно ж опять полностью убрать картинки и всё место занять заголовком.
Шаблон для аудита структуры сайта
Лиза Мария Мартин предложила шаблон для аудита структуры сайта, который может пригодиться при редизайне или поиске проблем текущей структуры.
Таблица включает:
- Разделённые по уровням вложенности страницы сайта;
- Страницы, доступные через ссылки в контенте, а не через меню;
- Внешние ссылки в меню, которые ведут за пределы сайта;
- Файлы;
- Страницы, которые по URL принадлежат к одному разделу, а по навигационной схеме — к другому;
- Дублирующие ссылки — чтобы не записывать одинаковую информацию о странице дважды, но знать, где они есть, чтобы отследить разные пути к контенту.
Указанные выше типы элементов закодированы цветом.
По каждой странице отображаются:
- ID;
- URL;
- Название пункта меню или текст ссылки;
- Заголовок страницы, который видит пользователь;
- Заголовок страницы, указанный в метаданных;
- Наименование раздела;
- Примечания.
Удобный чат с клиентами
Ралука Будиу из Nielsen Norman Group написала, как сделать удобный чат с клиентами.
Кнопка чата:
- Размещайте ссылку на чат на странице «Контакты» и на странице товара. Иногда покупателям нужна дополнительная информация о товаре;
- Не оставляйте плавающую кнопку единственным способом открыть чат;
- Эта кнопка должна выделяться и располагаться в правом нижнем углу экрана;
- Пишите, что кнопка открывает чат. Если написать «Задать вопрос», пользователь может проигнорировать её, решив, что кнопка открывает форму обратной связи.
Сам чат:
- Если клиент пишет со смартфона, ожидание должно быть минимальным, так как ему сложнее заниматься чем-то ещё параллельно;
- Сообщайте пользователю, через какое время он получит ответ;
- Отображайте надпись, что оператор пишет сообщение, но не показывайте её слишком долго. Если подготовка ответа затянется, напишите клиенту, что оператор ещё работает над вопросом;
- Визуально разделяйте сообщения от разных участников чата. Например, свои сообщения, ответы оператора и автоматические ответы;
- Предусмотрите проблемы с подключением к сети. Если пользователь возобновляет прерванную сессию, прогресс работы над его вопросом должен сохраниться. Можно заранее спросить у клиента номер телефона для продолжения диалога в офлайне;
- Не заставляйте клиента повторять то, что он уже сообщил ранее;
- Оператор может переходить к конкретике сразу и писать «Привет! Чем могу помочь?» вместо «Привет! Как дела?». Совет актуален для стран, где не вежливо сразу говорить о деле;
- Предупреждайте, если с пользователем будет общаться бот;
- Оператор не должен злоупотреблять шаблонными ответами. Люди любят живое и не слишком формальное общение;
- Ответы на типовые вопросы должны появляться максимально быстро;
- Не отправляйте клиента читать те или иные страницы сайта. Уточняйте, чего он хочет, и давайте конкретные ответы. Если пользователь решился на чат, возможно, найденные на сайте ответы его не удовлетворили.
Полезные возможности чата:
- Загрузка в чат документов;
- Сохранение всего диалога в отдельный файл.