UX Notes
@uxnotes

Заметки UX-проектировщика · автор @zGrav · vk.com/ux_notes · fb.com/uxnotes · Вакансии для проектировщиков: @uxwork.
355  
UX Notes
2019-06-12 

Илья Бирман написал про иконки «ленточка» (закладка), «сердечко», «поднятый большой палец» и «звёздочка».

«Ленточка означает, что ты хочешь запомнить эту страницу и упростить себе повторный доступ к ней. Вероятно, где‑то в интерфейсе есть список сохранённых страниц. Или страницы с закладками хотя бы выделены в оглавлении, и ты можешь быстро их найти. Мы не ожидаем, что наши закладки увидит кто‑то другой.
Сердечко просто выражает твоё отношение к предмету: «нравится». В интерфейсе могут быть места, где собраны понравившиеся страницы, но по умолчанию этого никто не обещает. При этом твоё отношение, вероятно, будет передано автору страницы и может быть использовано в рекомендациях другим читателям. Мы не ожидаем, что наши сердечки останутся нашим частным делом.
Поднятый большой палец не просто выражает отношение к предмету, но и сообщает его автору. Мы ожидаем, что автору точно покажут, что люди жмут на эту иконку. Мы даже не думаем использовать это как способ «сохранить» понравившуюся страницу.
Звёздочка — это джокер. Она может значить что угодно и работать как угодно.
Смысл этих символов и наши ожидания от них меняются с развитием популярных продуктов».
https://bureau.ru/soviet/20190611/
UX Notes
2019-06-10 

60% необходимых знаний вы получаете за первые 40% срока, запланированного для проекта, к этому моменту проект выполнен на 25%.

Начальство или заказчик может сказать следующее: «Вы потратили 40% времени, а сделали 25% проекта. Дело плохо».
При итеративной разработке важно в самом начале накопить знания. Чтобы объяснить полезность этой работы, можно взять список рисков, составленный в самом начале: малоизученные технологии, интеграции со сторонними системами и всё то, что может принести проблемы в процессе разработки. И показать, как эти риски были уменьшены или устранены.
Из книги Джо Мараско «IT-проекты: фронтовые очерки». Джо — один из руководителей компании Rational Software, где придумали UML.
UX Notes
2019-06-10 

Анна Кочеткова, автор канала @uxwords , рассказала, как писать хороший интерфейсный текст с примерами из банковской сферы.

Продумывайте контент на этапе проектирования, так как он может повлиять на дизайн.
Например, дизайнер создал лёгкий интерфейс с тарифами. Пакеты услуг стоят недёшево, клиент будет изучать условия и подробности, прежде чем покупать их. Дизайнер не знал этого, и важные для клиента условия оказались в неудобных всплывающих подсказках.
Чтобы пользователи читали текст, он должен быть простым, кратким и хорошо структурированным.
В 1997 году Якоб Нильсен тестировал текст про достопримечательности Небраски:
— Из базового варианта убрали лишние подробности и цифры, читаемость выросла на 58%.
— Текст не трогали, но достопримечательности собрали в ненумерованный список, +47%.
— В базовом варианте сложные слова заменили простыми, +27%.
— Объединение этих вариантов дало увеличение читаемости на 120% (в 2,2 раза).
В статье много примеров понятных и простых формулировок для банковской сферы.
https://medium.com/nancypong/6d66fa378a1f
UX Notes
2019-06-09 

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

Кнопка чата:
1. Размещайте ссылку на чат на странице «Контакты» и на странице товара. Иногда покупателям нужна дополнительная информация о товаре.
2. Не оставляйте плавающую кнопку единственным способом открыть чат.
3. Эта кнопка должна выделяться и располагаться в правом нижнем углу экрана.
4. Пишите, что кнопка открывает чат. Если написать «Задать вопрос», пользователь может проигнорировать её, решив, что кнопка открывает форму обратной связи.
Сам чат:
5. Если клиент пишет со смартфона, ожидание должно быть минимальным, так как ему сложнее заниматься чем-то ещё параллельно.
6. Сообщайте пользователю, через какое время он получит ответ.
7. Отображайте надпись, что оператор пишет сообщение, но не показывайте её слишком долго. Если подготовка ответа затянется, напишите клиенту, что оператор ещё работает над вопросом.
8. Визуально разделяйте сообщения от разных участников чата. Например, свои сообщения, ответы оператора и автоматические ответы.
9. Предусмотрите проблемы с подключением к сети. Если пользователь возобновляет прерванную сессию, прогресс работы над его вопросом должен сохраниться. Можно заранее спросить у клиента номер телефона для продолжения диалога в офлайне.
10. Не заставляйте клиента повторять то, что он уже сообщил ранее.
11. Оператор может переходить к конкретике сразу и писать «Привет! Чем могу помочь?» вместо «Привет! Как дела?». Совет актуален для стран, где не вежливо сразу говорить о деле.
12. Предупреждайте, если с пользователем будет общаться бот.
13. Оператор не должен злоупотреблять шаблонными ответами. Люди любят живое и не слишком формальное общение.
14. Ответы на типовые вопросы должны появляться максимально быстро.
15. Не отправляйте клиента читать те или иные страницы сайта. Уточняйте, чего он хочет, и давайте конкретные ответы. Если пользователь решился на чат, возможно, найденные на сайте ответы его не удовлетворили.
Полезные возможности чата:
16. Загрузка в чат документов.
17. Сохранение всего диалога в отдельный файл.
https://vc.ru/design/69554
UX Notes
2019-06-07 

Хотите узнать, подходит ли вам быть разработчиком, дизайнером или геймдизайнером?

Узнайте и не томитесь! 3 коротких бесплатных курса Нетологии, которые можно пройти дома.
🚀 Как стать программистом / 13 июня
Бесплатный онлайн-интенсив Нетологии для всех, кто хочет начать карьеру в сфере разработки
5 занятий / бесплатно / онлайн / будут подарки
Хочу записаться: http://netolo.gy/eXu
🚀 Как стать дизайнером / 24 июня
Вы сможете построить свой карьерный путь в мире дизайна и избежать частых ошибок тех, кто начинает изучать его самостоятельно.
3 занятия / бесплатно / онлайн / готовая траектория развития в дизайне
Хочу записаться: http://netolo.gy/eXs
🚀 Основы геймдизайна: создайтесь свою первую игру
Подпишитесь на бесплатный email-курс Нетологии и узнайте, как создать концепцию успешной игры
8 писем — 8 шагов / бесплатно / 5-7 минут на одно письмо
Хочу записаться: http://netolo.gy/eXq
Публикация оплачена
UX Notes
2019-06-06 

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

Таблица включает:
— Разделённые по уровням вложенности страницы сайта;
— Страницы, доступные через ссылки в контенте, а не через меню;
— Внешние ссылки в меню, которые ведут за пределы сайта;
— Файлы;
— Страницы, которые по URL принадлежат к одному разделу, а по навигационной схеме — к другому;
— Дублирующие ссылки — чтобы не записывать одинаковую информацию о странице дважды, но знать, где они есть, чтобы отследить разные пути к контенту.
Указанные выше типы элементов закодированы цветом.
По каждой странице отображаются:
— ID;
— URL;
— Название пункта меню или текст ссылки;
— Заголовок страницы, который видит пользователь;
— Заголовок страницы, указанный в метаданных;
— Наименование раздела;
— Примечания.
https://sobakapav.ru/publications/everyday-information-architecture-excerpt
UX Notes
2019-06-04 

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

Можно использовать динамические текстовые стили вместо статичных и научить интерфейс растягиваться под разные размеры шрифтов. В результате текст увеличится, но приложение станет неудобным.
Алексей на примере показал, что можно изменить в компоновке, контенте и контролах приложения с увеличенными шрифтами.
«На большом кегле [заголовок акции] не влезет ну вообще никак. Если сделать верхнюю оранжевую панель резиновой и позволить ему в большом кегле занимать несколько строк, то верхний блок отъест половину экрана даже на больших айфонах, а про 4S вообще можно будет не вспоминать. Это не дело.
Можно поиграть с лейаутом внутри ячейки акции: сделать картинку квадратной, а освободившееся место занять заголовком. Но картинки для акций подгоняются под конкретный формат и будут некорректно показываться в другом. Так нельзя.
Так, а можно ж опять полностью убрать картинки и всё место занять заголовком».
https://habr.com/ru/company/dodopizzaio/blog/452226/
UX Notes
2019-05-29 

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

Не размещайте подписи к полям в плейсхолдерах.
2. Если пользователь должен заполнить поле, автоматически перемещайте фокус на это поле.
3. Если в поле надо вводить только цифры, отображайте цифровую клавиатуру.
4. Как только пользователь заполнил поле, перемещайте фокус на следующее.
5. Размещайте кнопку платежа на видном месте. Стоит учесть, что при заполнении полей формы клавиатура может закрывать часть экрана.
6. Добавьте иконки безопасности и надписи вроде «100% Secure».
7. Если поле заполнено некорректно, показывайте сообщение об ошибке сразу после его заполнения.
8. После того как пользователь нажимает «Заплатить», моментально давайте обратную связь: блокируйте кнопку от дальнейших нажатий и показывайте на ней сообщение об обработке запроса или показывайте следующий экран.
9. Если платёж не прошёл, чётко сообщите об этом и дайте возможность повторить платёж или обратиться за помощью.
10. Пишите на кнопке платежа, что произойдёт после нажатия: «Pay $100», «Save card & pay $100».
11. Если платёж прошёл, наглядно сообщите об этом. И только потом показывайте остальные детали.
12. Дайте пользователю возможность быстро очистить поле.
— Перевод: https://ux.pub/rekomendatsii-dlya-uluchsheniya-opyta-tsifrovyh-platezhey/
— Картинки с примерами лучше смотреть в оригинальной статье: http://adilsiddiqui.in/x/designing-for-digital-payments
UX Notes
2019-05-27 

4 июля пройдёт очередной онлайновый UX-марафон. В этот раз по теме «Банковский продакт-дизайн».

6 продуктовых дизайнеров из Тинькофф Банка, Райффайзенбанка, Росбанка, Газпромбанка и других банков расскажут о своих продуктах, процессах и командах.
Пока что известен только один докладчик, но и билеты продаются по минимальной цене:
1. Куликова Елена из Райффайзенбанка: «Как мы улучшили UX и проверили это. История редизайна приложений».
Купить билеты, пока цена минимальна: https://clc.to/_AQuZw
Партнёрская публикация
UX Notes
2019-05-26 

Баухаус — легендарная школа искусств эпохи модернизма.

Её основатель Вальтер Гропиус хотел объединить искусство с промышленностью и сделать его частью повседневной жизни. Он хотел производить товары массового потребления с привлекательным дизайном, которые преображали бы интерьеры домов и город в целом.
В экспериментальных мастерских студенты работали под присмотром мастеров — передовых деятелей дизайна или искусства. Гропиус пригласил преподавать Пауля Клее и Василия Кандинского, занятия в мастерской по металлу вели венгерский авангардист Ласло Мохой-Надь и известный дизайнер Марианна Брандт. Гюнта Штольц была преподавателем текстильного отделения.
Баухаус существовал всего 14 лет во время Веймарской республики в Германии. Вооружённая полиция в апреле 1933 года разгромила здание, и школа была закрыта.
https://www.youtube.com/watch?v=qRNn2Z1INl8