20 сентября 2015, 13:20

Конспект курса «Пользовательский интерфейс и представление информации» 1/2

Ведёт Илья Бирман, арт-директор Дизайн-бюро Артёма Горбунова
Страница курса , сайт Ильи

Первая часть о дизайне интерфейсов:

Информативность

Интерфейс — узкий канал, его пропускная способность ограничена. Поэтому хороший интерфейс передаёт суть информации минимальными средствами. Повышение информативности достигается не увеличением объёма информации, а оптимизацией на уровне текстовых формулировок, визуальных средств и общей структуры интерфейса.

Приёмы повышения информативности интерфейса:

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

Cовет о минимизации конструкции

Информативность интерфейсов. Студия Лебедева

  • Знак файла стал рассказывать о содержании картинки и соотношении сторон. Или в навигации на сайте. В навигации по сайту компании полезно заменить обобщенное название раздела товаров перечислением: Продукты → Картриджи, бумага, плёнка.

Теория близости

Расположенные рядом объекты воспринимаются, как связанные. На видимое взаимодействие объектов влияет расстояние и визуальная масса объектов. Так крупные заголовки притягивают к себе расположенные рядом куски текста.

Совет о расстояниях между словами

§ 136. Теория близости. Ководство

Закон Фиттса

Время и точность прицеливания зависят от размеров и удалённости цели. То есть чем дальше объект и чем меньше его размеры, тем труднее в него попасть. Формула закона выглядит примерно так:

Статья о законе Фиттса на Хабре

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

У небольших объектов полезно увеличивать «нажимаемую» область, чтобы в них было легче попасть. Например, открывать выпадающий список при нажатии на любую часть выпадайки, а не только на стрелочку.

Самая быстродоступная точка на экране — там, где стоит курсор. Поэтому удобны контекстные меню по нажатию правкой кнопки мыши. Следующие по доступности — углы экрана. В углы почти не надо целиться, достаточно вести мышь по диагонали. Там ставят важные кнопки, например, кнопки закрытия окна или «Пуск». После углов — края. Прицел по краям ведётся только по одной координатной оси. Поэтому меню на Маке прибито к верхнему краю.

Обратная связь

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

Где использовать

Если запускается длительный процесс, программа должна показывать статус процесса. Пример: анимированный индикатор загрузки показывает, что процесс загрузки ещё не закончен.

Если какая-то команда программы не может быть выполнена, правильно давать мягкую отрицательную реакцию, при этом не прерывая работу пользователя. Часто достаточно отсутствия положительной связи. Антипример: Фотошоп открывает модальное окно с ошибкой в ответ на некорректное действие.

Если кнопка не может быть нажата, отключите её и покажите это состояние внешним видом. Одна из задач интерфейса — предотвращать ошибочные и бесполезные действия пользователя.

Мгновенная обратная связь

Мгновенная обратная связь — крутая штука. Она удобна для человека, но усложняет реализацию программы. Спасают хитрости.

Илья:

Совет о фильтрах

«Фильтры бывают мгновенного и отложенного действия.

Фильтр мгновенного действия применяется к данным „на лету‟, по мере настройки. Поставил галку „только пятизвёздочные‟ — список отелей сразу же сократился. Подвинул слайдер максимальной цены левее — список стал ещё меньше. Вписал в поле „Ег‟ — остались только отели в Египте.

Фильтр отложенного действия срабатывает после настройки и получения от пользователя команды „Отфильтровать‟.

Поскольку каждое движение в мгновенном фильтре изменяет список найденного и сбрасывает положение прокрутки, важно предусмотреть возможность вернуться к предыдущему состоянию».

Вёрстка и разработка экранных форм

Форма — это таблица. Поэтому к дизайну формы надо относиться также, как к дизайну таблицы, у них смежная область решений и приёмов.

Улучшить читабельность формы помогает группирование полей по смыслу или по количеству. Чтобы объединить поля в группу, увеличьте вертикальные расстояния между группами.

Ещё хорошо, когда форма не пустая по умолчанию.

Ошибки в форме

Текст ошибки должен отвечать на два вопроса: что не так и как это исправить?

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

Если ошибку пользователя может исправить машина, пусть исправляет. Действует принцип «пусть потеет машина».

Необязательные поля

Неэффективно разделять поля на обязательные и необязательные. Если поле обязательное, но пользователь не понимает зачем его заполнять и ленится, он заполнит его так, чтобы поскорее пройти дальше. Толку от такой информации мало. «Привет, qwerty!».

Максим Ильяхов:
Сильный текст в интерфейсе

Вы невнимательное говно, попробуйте еще раз

Объясните пользу от заполнения поля. Человек поймет и получит мотивацию заполнить. Например, польза поля «Паспортные данные» формы покупки айфона в интернет-магазине: «Курьер выдаст заказ по паспорту».

Максим Ильяхов показал пользу для формы регистрации на Озоне

Навигация в форме

Навигация облегчает работу с громоздкими формами. Есть крутой приём — показывать незаполненные разделы формы рядом с кнопкой отправки формы. Примерно так:

Заполненность полей формы проверяется инлайн-проверкой

Синтаксис элементов интерфейса

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

Для проверки точности формулировки есть правило — слово точное, если для него можно нарисовать иконку.

Максим Ильяхов о тексте, редактуре, информационном стиле и рекламе

Некоторые группы стоп-слов для интерфейса:

  • Основной, общий, дополнительный, другой, системный
  • Полезный, справочный
  • Статьи, материалы
  • Список, каталог, архив

Человечность, не технозависимость

Технозависимость — это зависимость принципа работы и языка общения интерфейса от устройства технической структуры данных программы. Переход к человечности состоит в том, чтобы переориентироваться на сценарии использования интерфейса человеком.

Человечность интерфейсов. Студия Лебедева

Доклад об Ангстреме

Вопрос для проверки текста в интерфейсе на технозависимость — как тоже самое сказал бы человек?

Провести за ручку

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

Илья о подходе:

Провести за ручку

«Представьте, что ваш сайт — это хороший, опытный продавец, а не просто ценник. Что изменится в его дизайне?..

Подход „Провести за ручку‟ лежит, например, в основе дизайна сайта „Формула лома‟. Сайт по пунктам рассказывает о том, как компания „Унимет‟ покупает и перерабатывает медный лом. И прямо внутри рассказа есть приглашения сделать очередной шаг».

Привычки

В выполнении привычных дел нет акта принятия решения. Поэтому бесполезны модальные окна с подтверждениями — привыкаешь быстро жать «Да» не задумываясь.

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

Илья:

Денормализация в дизайне таблиц

«Привычность к чему-то не означает, что это хорошо. Она лишь означает, что человек перестаёт обращать внимание на связанные с этим неудобства. При этом, если человеку, привыкшему ковыряться под капотом „Жигулей“, предложить пересесть на „Мерседес“, вряд ли он будет против, мотивируя это привычкой».

И ещё

Анду

Используйте отмену действия вместо запроса его подтверждения. Возможность отмены уважает намерение человека что-то сделать и позволяет ему произойти моментально и гладко.

Коротко: не надо «а вы уверены?», делаем, что просят и даём возможность откатиться.

Последовательное волшебство

Илья: «Интерфейс должен быть лазерными мечом. Магия, но понятна. Кролик из шляпы, а не сам фокусник превращается в кролика».

Миф о семи элементах

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

Николай Товеровский о правиле семи элементов

Взгляд новичка

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

Скроллинг против пейджинга

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

Дизайн для разного количества объектов

Должен быть разным, универсального решения не существует.

Нестандартные элементы интерфейса

Нужны для увеличения пользы, иначе — стандартные. Если всё-таки решились использовать, объясните, как ими пользоваться.

Поделиться
Запинить
2 комментария
Виталий

Разве крутой приём — рядом с очередным незаполненным полем показывать перечень незаполненных полей и кнопку, которую всё равно ещё нельзя нажать? Это даже словами звучит жутко.

Андрей Медведев

Виталий, вы неверно поняли приём. Думаю, виновата иллюстрация. На ней поля стоят близко к кнопке, а название раздела «Адрес доставки» совпало с названием поля. Предлагаю эксперимент — мысленно представьте форму в контексте веб-страницы, переименуйте поле в «Адрес» и отодвиньте кнопку в правый верхний угол.

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

Виталий

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