Конспект курса «Пользовательский интерфейс и представление информации» 1/2
Ведёт Илья Бирман, арт-директор Дизайн-бюро Артёма Горбунова. Страница курса, сайт Ильи.
Первая часть конспекта о дизайне интерфейсов:
Информативность
Интерфейс — узкий канал, его пропускная способность ограничена. Поэтому хороший интерфейс передаёт суть информации минимальными средствами. Повышение информативности достигается не увеличением объёма информации, а оптимизацией на уровне текстовых формулировок, визуальных средств и общей структуры интерфейса.
Приёмы повышения информативности интерфейса:
- Совмещение информационных функций — один элемент выполняет несколько функций. Смотри совет
о минимизации конструкции. - Вынесение за скобку. Общая часть за скобкой создаёт контекст подачи информации и помогает избежать повторений. Например, если в шапке сайта написано название компании, его не надо повторять в названиях пунктов меню.
- Увеличение смысловой части. Например, так:
В навигации по сайту компании полезно заменить обобщенное название раздела товаров перечислением: Продукты → Картриджи, бумага, плёнка.
См. Информативность интерфейсов. Студия Лебедева.
Теория близости
Расположенные рядом объекты воспринимаются, как связанные. На видимое взаимодействие объектов влияет расстояние и визуальная масса объектов. Так крупные заголовки притягивают к себе расположенные рядом куски текста.
См. совет о расстояниях между словами.
См. § 136. Теория близости. Ководство.
Закон Фиттса
Время и точность прицеливания зависят от размеров и удалённости цели. То есть чем дальше объект и чем меньше его размеры, тем труднее в него попасть. Формула закона выглядит примерно так:
Параметры в формуле связаны логарифмически, поэтому увеличивать малые объекты хорошо, но бессмысленно делать их слишком большими — выигрыш будет незначительный. Кроме того, объекты должны быть достаточно хорошо отделены друг от друга.
У небольших объектов полезно увеличивать «нажимаемую» область, чтобы в них было легче попасть. Например, открывать выпадающий список при нажатии на любую часть выпадайки, а не только на стрелочку.
Самая быстродоступная точка на экране — там, где стоит курсор. Поэтому удобны контекстные меню по нажатию правкой кнопки мыши. Следующие по доступности — углы экрана. В углы почти не надо целиться, достаточно вести мышь по диагонали. Там ставят важные кнопки, например, кнопки закрытия окна или «Пуск». После углов — края. Прицел по краям ведётся только по одной координатной оси. Поэтому меню на Маке прибито к верхнему краю.
См. статью о законе Фиттса на Хабре.
Обратная связь
Человек должен понимать, что происходит в интерфейсе, когда он с ним взаимодействует. Эту задачу решает обратная связь–реакция программы на действия пользователя. Реакция должна быть адекватной, заметной и предсказуемой.
Где использовать
Если запускается длительный процесс, программа должна показывать статус процесса. Пример: анимированный индикатор загрузки показывает, что процесс загрузки ещё не закончен.
Если какая-то команда программы не может быть выполнена, правильно давать мягкую отрицательную реакцию, при этом не прерывая работу пользователя. Часто достаточно отсутствия положительной связи. Антипример: Фотошоп открывает модальное окно с ошибкой в ответ на некорректное действие.
Если кнопка не может быть нажата, отключите её и покажите
это состояние внешним видом. Одна из задач интерфейса — предотвращать ошибочные и бесполезные действия пользователя.
Мгновенная обратная связь
Мгновенная обратная связь — крутая штука. Она удобна для человека, но усложняет реализацию программы. Спасают хитрости. Илья это объясняет в совете о фильтрах:
«Фильтры бывают мгновенного и отложенного действия.
Фильтр мгновенного действия применяется к данным „на лету‟, по мере настройки. Поставил галку „только пятизвёздочные‟ — список отелей сразу же сократился. Подвинул слайдер максимальной цены левее — список стал ещё меньше. Вписал
в поле „Ег‟ — остались только отели в Египте.Фильтр отложенного действия срабатывает после настройки
и получения от пользователя команды „Отфильтровать‟.Поскольку каждое движение в мгновенном фильтре изменяет список найденного и сбрасывает положение прокрутки, важно предусмотреть возможность вернуться к предыдущему состоянию».
Вёрстка и разработка экранных форм
Форма — это таблица. Поэтому к дизайну формы надо относиться также, как к дизайну таблицы, у них смежная область решений
и приёмов.
Улучшить читабельность формы помогает группирование полей по смыслу или по количеству. Чтобы объединить поля в группу, увеличьте вертикальные расстояния между группами.
Ещё хорошо, когда форма не пустая по умолчанию.
Ошибки в форме
Текст ошибки должен отвечать на два вопроса: что не так и как это исправить?
Иногда можно вообще не показывать текст. Если дополнительных пояснений не требуется, достаточно выделить поле, где допущена ошибка.
Если ошибку пользователя может исправить машина, пусть исправляет. Принцип «пусть потеет машина».
Необязательные поля
Неэффективно разделять поля на обязательные и необязательные. Если поле обязательное, но пользователь не понимает зачем его заполнять и ленится это делать, он заполнит его так, чтобы поскорее пройти дальше. Толку от такой информации мало. «Привет, qwerty!».
Объясните в чём польза от заполнения поля. Пользователь поймет и получит мотивацию заполнить. Пример пользы для поля «Паспортные данные» в форме покупки айфона в интернет-магазине: «Курьер выдаст заказ по паспорту».
См. Сильный текст в интерфейсе (Максим Ильяхов, UXPeople 2015).
См. Вы невнимательное говно, попробуйте ещё раз.
Навигация в форме
Навигация облегчает работу с громоздкими формами. Есть крутой приём — показывать незаполненные разделы формы рядом с кнопкой отправки формы. Примерно так:
Синтаксис элементов интерфейса
Структура формы схожа со структурой предложения. Следовательно при прочтении хорошей формы получается связный текст. Из этого правила вытекают рекомендации по именованию различных элементов интерфейса.
Для проверки точности формулировки есть правило — слово точное, если для него можно нарисовать иконку.
Некоторые группы стоп-слов для интерфейса:
- Основной, общий, дополнительный, другой, системный
- Полезный, справочный
- Статьи, материалы
- Список, каталог, архив
См. советы Максима Ильяхова о тексте и редактуре.
Человечность, не технозависимость
Технозависимость — это зависимость принципа работы и языка общения интерфейса от устройства технической структуры данных программы. Переход к человечности состоит в том, чтобы переориентироваться на сценарии использования интерфейса человеком.
Вопрос для проверки текста в интерфейсе на технозависимость — как тоже самое сказал бы человек?
См. Человечность интерфейсов. Студия Лебедева.
См. рассказ об Ангстреме.
Провести за ручку
Недостаточно показать возможности программы, нужно помочь этим воспользоваться. Интерфейс программы и ответы на вопросы о его работе должны быть частью одного повествования.
Илья:
«Представьте, что ваш сайт — это хороший, опытный продавец, а не просто ценник. Что изменится в его дизайне?»
«Подход „Провести за ручку‟ лежит, например, в основе дизайна сайта „Формула лома‟. Сайт по пунктам рассказывает о том, как компания „Унимет‟ покупает и перерабатывает медный лом. И прямо внутри рассказа есть приглашения сделать очередной шаг».
См. пост в блоге Ильи.
Привычки
В выполнении привычных дел нет акта принятия решения. Поэтому бесполезны модальные окна с подтверждениями — привыкаешь быстро жать «Да» не задумываясь.
Также люди привыкают к гайдланам операционной системы. Например, к расположению кнопок «Ок» и «Отмена». Несоблюдение гайдлайнов приводит к ошибкам и затрудняет использование интерфейса.
Илья:
«Привычность к чему-то не означает, что это хорошо. Она лишь означает, что человек перестаёт обращать внимание на связанные с этим неудобства. При этом, если человеку, привыкшему ковыряться под капотом «Жигулей», предложить пересесть на «Мерседес», вряд ли он будет против, мотивируя это привычкой».
См. пост о денормализации в дизайне таблиц
И ещё
Анду
Используйте отмену действия вместо запроса его подтверждения. Возможность отмены уважает намерение человека что-то сделать и позволяет ему произойти моментально и гладко.
Коротко: не надо «а вы уверены?», просто делаем и даём возможность откатиться.
Последовательное волшебство
Илья: «Интерфейс должен быть лазерными мечом. Магия, но понятна. Кролик из шляпы, а не сам фокусник превращается в кролика».
Миф о семи элементах
Исследование Джорджа Миллера показало, что человек способен удержать в кратковременной памяти около семи элементов. Окей, только это не значит, что надо сводить количество пунктов меню к семи и засовывать внутрь «лишние» пункты. Наоборот нужно показать всё, что есть, чтобы человек мог на это посмотреть и не держать в голове.
Николай Товеровский разобрал почему.
Навигация на сайте
Замена обобщенных названий пунктов меню конкретными повышает информативность. Например, Продукты → Картриджи, бумага, плёнка.
Взгляд новичка
Человек может прервать работу в любой момент, уйти по делам и забыть, что делал. Вернувшись он посмотрит на экран компьютера взглядом новичка, то есть вне контекста решения предыдущей задачи. Следовательно, чтобы в такой ситуации пользователь не растерялся, каждый экран должен отвечать на вопрос: что здесь происходит?
Скроллинг против пейджинга
Листалки создают преграду для доступа к дополнительной части большого списка, и потому снижают конверсию. Они подходят для выдачи результатов поиска, но в остальных ситуациях лучшее решение — использование прокрутки.
Дизайн для разного количества объектов должен быть разным, универсального решения не существует.
Нестандартные элементы интерфейса нужны для увеличения пользы. Если решились использовать, надо объяснить, как ими пользоваться.
P.S. Я переехал и теперь пишу на medvedism.ru/blog.
