UX Notes
24.7K subscribers
59 photos
5 videos
1 file
1.18K links
В соцсетях: vk.com/ux_notes и fb.com/uxnotes
Чат читателей: @uxnoteschat
О карьере в UX-дизайне и вакансии: @uxwork

Рекламодателям: uxnotes.ru/ads · В перечне РКН: gosuslugi.ru/snet/67a9a56970de7b4d761a81ae

Est. 2016 · Автор: @zGrav
加入频道
Федор Борщев написал, как вырастает оценка задачи, если надо не просто сделать, а сделать хорошо.

— У качественных продуктов не бывает небольших доработок;
— Объем работ прирастает очень быстро. То, что при планировании кажется 5 минутами, моментально превращается в неделю;
— Пропихнуть фичу в следующий спринт — легко. Написать — сложно. Поддерживать всю жизнь — [устанешь].
Павел Моисеенко рассказал о своих приёмах вёрстки сложных форм.

— Подписи в форме должны читаться как связное предложение;
— Скрывать связанные с чекбоксом элементы, пока не поставлен флаг;
— Устанавливать значения по умолчанию, подходящие большинству пользователей;
— Наиболее важный пункт выделять нестандартным контролом.

Копия в Вебархиве.
Пройдите 1-минутный тест на внимательность с баскетболистами. Нужно сосчитать количество пассов, которые сделает команда в белом. Если уже проходили этот тест, напишите, какой результат был в первый раз. https://www.youtube.com/watch?v=Ahg6qcgoay4

Не увидел / не увидела – 69
👍👍👍👍👍👍👍 45%

Увидел / увидела – 47
👍👍👍👍👍 30%

Хочу просто посмотреть распределение ответов – 39
👍👍👍👍 25%

👥 155 people voted so far.
Дима Шишкин сделал конспект «Типографики и вёрстки» Артёма Горбунова. Можно вспомнить, о чём в книге шла речь, а тем кто не читал — решить, стоит ли содержимое 1200 рублей (подписка на 3 месяца).

Копия в Вебархиве.
В Mobiscroll составили рекомендации по дизайну форм на смартфонах.

— Вместо выпадающих списков используйте сегментные контролы (если вариантов мало), переключатели (если варианта всего 2: да или нет) или кнопки «плюс» и «минус» (если варианты — это числа);
— Выбор дня, месяца и года или часа и минуты делайте единым контролом;
— Используйте слайдеры;
— Избегайте нескольких колонок;
— Показывайте сообщения об ошибках рядом с полями;
— Если много обязательных полей, помечайте только необязательные;
— Группируйте поля по смыслу;
— Не делайте кнопки слишком маленькими;
— Старайтесь придерживаться правил платформ.
Кевина Виньо раздражает, когда на адаптивных сайтах блок «3 преимущества» в десктопной версии располагается горизонтально и занимает один экран, а в версии для смартфонов — вертикально и занимает 3 экрана.

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

Кевин предложил другие способы компоновки этого блока для отображения на смартфонах.

In English.
Рори Сазерленд снова рассказал, как небольшие изменения меняют восприятие и поведение людей. Например, возможность контролировать ситуацию (даже мнимая) повышает удовлетворение.

Одним из самых удачных улучшений в лондонском метро по отношению позитивных отзывов к затратам были точечные дисплеи на платформах, которые показывали, когда будет следующий поезд.

Обратный отсчёт красного света светофора снизил количество ДТП в Южной Корее, так как нетерпеливость и раздражительность снижаются, когда знаешь, сколько ещё ждать.

В Китае не поняли принцип и добавили обратный отсчёт на зелёный свет, что провоцировало ускорение, когда оставалось мало времени. Это привело к росту ДТП.
Илья Бирман написал, как подписывать кнопки и пункты контекстного меню.

1-я функция кнопки — дать команду компьютеру. Кнопка отвечает на вопрос «Что сделать?». Используется глагол совершенного вида в начальной форме: Отправить; Купить; Добавить; Настроить.

2-я функция кнопки или пункта меню — изменение статуса, отношения к объекту. Отвечает на вопрос о подлежащем «— это что? какое?». Используется существительное, прилагательное, наречие, причастие, числительное, например: Это спам; Важное; Готово; 5.

Формулировки в виде команды в таких случаях избыточны («Отметить как…», «Перевести в категорию…», «Оценить на…»), то есть малоинформативны.
Максим Ильяхов советует с осторожностью упоминать слово «успешно» в системных сообщениях и вообще.

«Платеж успешно отправлен → Платёж отправлен».

Единственный случай, когда «успешный» имеет смысл — когда что-то, о чем мы говорим, может быть провальным:

«Сотрудник МВД отчитался об успешном завершении операции → Операция завершена успешно, задержаны все женщины и дети».
Николай Бабич рассказал, как должна работать страница с результатами поиска. Некоторые из рекомендаций. Некоторые из рекомендаций:

— Не удаляйте запрос после нажатия на кнопку «Найти»;
— Автозаполнение должно работать;
— Исправляйте опечатки;
— Сохраняйте историю запросов;
— Во время поиска показывайте прогресс;
— Подключите возможность сортировать и фильтровать результаты;
— Не выдавайте «Ничего не найдено».

In English (копия в Вебархиве).
Михаил Калашников написал, как создавать такие продукты, чтобы пользователь не чувствовал себя неудачником только потому, что он новичок, не хочет разбираться в сложных правилах или не планирует быть хардкорным пользователем.

Советы по правильной геймификации, работе с сообществом и помощи пользователям в создании контента. Примеры из жизни Sports.ru.
Видео о таком когнитивном искажении как ошибка выжившего.

— Не всегда стоит смотреть на успешный продукт и делать так же;
— Для улучшения продукта стоит опрашивать в том числе тех, кто отказался от его использования.
Кирилл Беляев написал о курсе Ильи Бирмана «Пользовательский интерфейс и представление информации».

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

«Понравился рассказ, как Илья отправлял Артёму свою первую схему челябинских троллейбусов и трамваев. Он предложил Илье убрать промежутки между параллельными линиями. Илья убрал и написал, что теперь линии плохо различимы и отступы нужно вернуть. Артём ответил, что вместо отступов, цвета подбирают так, чтобы те хорошо различались».
Психолог из Valve Майк Амбиндер рассказал о человеческом внимании, предпочтениях, когнитивных искажениях, мотивации и как это использовать при разработке игр. Хороший пример борьбы с «токсичным» поведением:

«В конце матча стали задавать 2 вопроса. Сначала просили оценить уровень командной работы. Отношение игрока к своей команде — полезные данные, но мы спросили это только ради следующего вопроса: оцените собственный уровень работы в команде.

Конечно, игроку в любой ситуации хочется оценить себя на 5 звёзд. Но если он вёл себя плохо, ругался на окружающих или нарочно вредил собственной команде, ему будет намного сложнее это сделать.

Из-за конфликтующих идей возникает когнитивный диссонанс: я плохо работал в команде, но я очень хотел бы оценить себя на 5. Совсем небольшое изменение, маленький опрос, но общее число ежедневных жалоб упало на 12,5%».

Видео in English.
Эндрю Койл написал об интерфейсных приёмах, с помощью которых можно упростить работу с большими таблицами.

— Закрепление заголовка;
— Закрепление столбца с параметрами и отдельных столбцов;
— Возможность изменить ширину столбца;
— Чередование фона в строках (зебра);
— Отображение сводки по табличным данным;
— Появление управляющих кнопок при наведении курсора на строку;
— Возможность редактирования данных в строке;
— Отображение дополнительных данных, связанных со строкой (Эндрю предлагает несколько разных способов);
— Сортировка и фильтрация (разные способы);
— Настройка отображаемых столбцов и их порядка следования.

In English. #table
Рауль Гулати собрал примеры применения эвристик Якоба Нильсена для интерфейса. Несмотря на название статьи, там не только дашборды.

In English. #heuristic
Пол ван Ойен написал, как передавать разработчикам требования к анимации.

Анимации в интерфейсе становится всё больше. Крупные компании вроде Google и IBM в своих рекомендациях уделяют ей отдельное внимание.

Часто разработчики получают от дизайнеров довольно смутное описание задачи: видео или GIF с анимацией в несколько секунд и пара комментариев. Им приходится самостоятельно анализировать происходящее на картинке, а дизайнер часто получает не то, что планировал.

Спасти ситуацию может кривая анимации или моушн-граф — графическое представление временной шкалы анимации, на которой показаны подробности движения элементов.

In English.