Рекомендации по проектированию пользовательских интерфейсов.


Термины UI и UX

«User Interface» — внешний вид интерфейса. Тут уместно говорить о его предсказуемости, лаконичности, наглядности, акцентах.

На изображении рассмотрен пример, когда внешним видом (цветом кнопки) интерфейс подсказывает пользователю вероятность негативных последствий нажатия.

«User eXperience» — опыт пользователя, приобретенный в процессе взаимодействия с современными программами, сайтами, компьютерами, телефонами и т.д..

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

Принципы   Пространство   Комфорт   Таблицы   Изображения   Бонус

Принципы: По ходу чтения

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




Руководствуясь таким методом восприятия, мы ищем элементы, позволяющие продолжить работу, справа, а элементы, которые вернут нас назад, слева. Это как перелистнуть страницу вперёд или назад:




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




Пример из FRS. Если на фото не было определено лицо, пользователь может вручную установить точки глаз и принудительно отправить его на кодирование. Либо можно изменить тип фото и оставить его как есть. Кнопка смены типа стояла рядом с выпадающим списком и пользователи не догадывались её нажать, а выбирали тип и жали кнопку "Перекодировать" в точке выхода из интерфейса. Пришлось учесть пользовательский опыт. Было принято решение кнопку смены типа поставить в точку выхода из интерфейса.




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

Автоматическая настройка — это функция прогресса и движения от плохого к хорошему. Поэтому кнопка настройки должна стоять справа.

  


Цифровые показатели (угол наклона, значение яркости, масштаб и т.д.) размещаются справа от элементов управления ими. Сперва пользователь должен сделать что-то, а потом «по ходу чтения» справа обнаружить результат изменений в виде обновлённого цифрового показателя.

  


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

  


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




Чтобы избежать противоречий, рассмотрим пример.


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




Добавление этапа в ЕСУПП Крона.




Расположение вкладок в просмотре БД АДИС. Должны быть сверху.




Модуль учета рабочего времени в 1С. В программе есть основной блок (зеленый), с которым пользователи работают 90% времени, и вспомогательный блок (синий) технологических операций. В основном блоке все маршруты пользователя подчинены последовательности сверху вниз и слева направо.




Расположение кнопок в диалоговом окне управления яркостью/контрастом БД АДИС. Сброс должен быть сверху, кнопки завершения работы — снизу.




Кнопки «Очистка полей» или «Сброс настроек» (как правило используется в формах выборок) должны размещаться в самом начале формы. Размещение этой кнопки внизу формы недопустимо!






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




Принципы: От общего к частному

Чтобы минимизировать «метания» пользователя по экрану, следует располагать элементы в последовательности от общего к частному. Рассмотрим пример с выбором автомобиля. Сперва определяемся с категорией автомобиля, затем — с маркой, а уже потом — с моделью. Так мы получаем прямой порядок действий:




Нарушение этого принципа усложняет восприятие информации в интерфейсе:




Допустимые варианты расположения элементов на форме:




Пример, формирование запроса в программе 1С:




Пример, управления настройками в Питоне:




Принципу от общего к частному подчиняется и расположение полей ввода на форме. Например, если речь идёт о полях ввода ФИО или адресах.
Для ФИО актуален порядок: фамилия, имя, отчество (фамилия Пашков — это общее, потому как есть Михаил, а есть Юрий).
Для адресов актуален порядок: cтрана, область, город, район, улица, дом, корпус, квартира.




Вывод:
Чтобы пользователь не «метался» по экрану, следует располагать элементы по принципу «от общего к частному».




Несколько примеров, в которых прослеживаются сквозные принципы.

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




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




В ICQ ситуация аналогичная, но тут до сих пор сохранилась кнопка «Отправить». Она и является самым последним элементом, с которым мы работаем в окне.




В двух разных интерфейсах программы Emacs мы начинаем с создания нового документа, либо выбора из вкладок. Для каждой выделенной строки в документе мы справа или внизу получаем информацию о стилях.





В ftp-клиенте FileZilla пользователь сперва подключается к серверу, затем выбирает каталоги с которыми будет работать. После происходит переброс файлов. Статичные данные (данные с текущего компьютера) всегда слева, а вот данные, которые могут меняться в зависимости от сервера, справа. После переброски файлов в нижней части окна пользователь может наблюдать состояние/результат операций.




Рассмотрим пример из модуля администрирования настроек системы АДИС Папилон 8.

Изначальное расположение панелей в интерфейсе не является интуитивно понятным. Панели, которые тесно связаны друг с другом («Секции» и «Доступные параметры») должны стоять рядом, а панель, которая отражает результат работы пользователя («Активные параметры») должна стоять праве всего (как бы по ходу чтения).





Было бы вполне уместно отказаться от самостоятельной панели «Активных параметров». Вместо этого следует снабдить каждый параметр чекбоксом, определяющим активирован параметр или нет. Все активные параметры при переключении между группами параметров можно отсортировывать в верхнюю часть списка.




Пример из модуля администрирования форм ввода текстовых данных АДИС Папилон 8.

Расположение панелей в интерфейсе изменилось. Горизонтальная ориентация не представляется возможной, так как в каждой панели лишь по одному столбцу и будет оставаться много пустого пространства. Таким образом панели расположены по ходу чтения, сперва мы видим общий список доступных параметров, из которого «набрасываем» в окно будущей формы необходимые поля. А когда нужный набор полей скомплектован переходим к дальнейшей настройке каждого поля в правой части окна.








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




Принципы: Рядом родня

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

Настройка параметров системы АДИС Папилон 8. Кнопка «Восстановить значение по умолчанию» затерялась среди общих кнопок формы. Место её непосредственно у параметра, на который она влияет.




Форма установки параметров рассылки дактилокарт АДИС Папилон 8.




Пример из командной строки Windows. Кнопка «Обзор» затерялась среди кнопок формы. Место ей возле поля ввода:




Пример окна выборки в АДИС Папилон 8, когда кнопка выбора сегментов уехала от чекбокса активизации данного вида выборки.




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




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

Окно кодирования дактилокарты АДИС Папилон 8. Чтобы увеличить контраст изображения, пользователю следует сперва выделить нужный отпечаток, а затем вернуться к панели управления и нажать соответствующую кнопку.




Если же задействовать контекстное меню, то мы приблизим эти два «родственных» объекта.




Окно программы составления трёхмерных фотороботов KLIM3D. Чтобы снять с фоторобота очки, следует пройти на вкладку «Аксессуары», найти пункт «Очки» и нажать кнопку «Скрыть/показать».




Гораздо быстрее это можно проделать, если кликнуть по рабочей области правой кнопкой. Выбрав нужный пункт, пользователь откроет соответствующую панель настроек.




Третья ступень в действии принципа «рядом родня» — перемещение, масштабирование и вращение объектов. Гораздо удобнее, когда для этих действий пользователь работает не с кнопками, находящимися где-то в стороне (как правило под изображения отводится наибольшая площадь формы, а следовательно кнопки могут «уезжать» далеко), а с самими объектами.

Окно кодирования следа АДИС Папилон 8. Для вращения объекта используется «колесо». Это неудобно, так как небольшое движение мыши приводит к большому повороту объекта. В итоге приходится пользоваться финальной настройкой при помощи цифр, либо напрягать руку для плавного движения.




Если же вращать сам объект, то радиус увеличивается в разы — следовательно, проще будет соблюсти точность угла поворота.




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

Рассмотрим на примере трансформирования морщины из программы KLIM3D.




Как это выглядит в Photoshop.




Ещё пример, когда действие принципа «Рядом родня» существенно упрощает работу с интерфейсом — добавление/редактирование событий в СУРВ и GWI.
На текущий момент, редактирование данных происходит в отрыве от их места размещения. Если перенести элементы управления непосредственно в таблицу, то данные станет проще заполнять и редактировать:







Вывод:
Сближайте родственников — взаимосвязанные и взаимозависимые элементы.




Принципы: Унификация

Самым простым методом приведения разных модулей одной программы можно назвать комплекс мер:

  1. Во все модули внедряем иконки отрисованные в одном стиле;
  2. Во всех модулях приводим к единому виду текстовое Alt-меню:


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


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




В АДИС Папилон признак секретности дактилокарты проиллюстрирован грифом SS:




В АДИС Папилон режим фас/профиль символизировал Барт Симпсон:




Привычные образы в иконках можно разделить на несколько групп:

Общепринятые иконки.

Говоря об экспорте следует руководствоваться принципом: «Можно ли обойтись функцией "Сохранить как...", позволяющей изменить наименование или формат файла, а так же место его хранения (каталог или даже носитель)?»




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




Иконки масштабирования отображаемой на экране информации.




Иконки управления изображениями.




Иконки управления пользователями.




Иконки сброса, отмены, удаления и очистки.




Вывод:
Привычные места расположения и привычные образы, облегчают поиск нужных кнопок.




Принципы   Пространство   Комфорт   Таблицы   Изображения   Бонус

Пространство: Заголовки и группировка

Отвыкайте от ЗАГЛАВНЫХ букв и жирного начертания. Во времена печатных машинок не было возможности менять размер шрифта, поэтому чтобы отделить заголовок от общего текста, использовали заглавные буквы. Для большего контраста, каретку возвращали в начало слова и печатали его ещё раз, чтобы получить жирное начертание. Сейчас есть возможность использовать более крупный шрифт. Заглавные буквы теперь воспринимаются как «крик» и используются для эмоциональной окраски сообщения, что уместно в переписке, но не в специализированных программах. Считывать их сложнее, так как форма букв схожа.
Сравните: «рвб» и «РВБ».

Пример из программы MS Visual Studio. Пункты меню написали заглавными буквами, чтобы они отличались от информационных подписей. Лучше было изменить шрифт.




Пример из программы Полифейс




Старайтесь использовать для заголовков тот же шрифт с размером +4 пункта. То есть для 8 размера обычного шрифта текста заголовки должны писаться 12 размером.

Разницы в 2 пункта может быть недостаточно на больших размерах, а разница в 6 пунктов избыточна на малых размерах.




Чтобы пользователю не приходилось тратить время на «чтение и распознавание» интерфейса, следует руководствоваться простейшими правилами его построения. Эти правила действуют во всех сферах проектирования от вёрстки газеты или web-ресурса, до панелей приборов и программ.

Думаю, все согласятся с утверждением: «Группировка элементов облегчает восприятие интерфейса и поиск нужного».
Группировка — это не всегда объединение рамочкой или отбивка разделителями. Группировка может осуществляться за счёт свободного пространства вокруг элементов. Причём такой способ предпочтительней, так как он не вносит в интерфейс «мусорные» элементы.




На картинке ниже представлен текст. Сложно судить, какую роль выполняют сиреневые строки. Это могут быть как информационные сноски, так и выделенные куски текста.




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




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




Вот пара примеров, где расстояние между заголовком и подчинённым ему информационным блоком такое же, как и до предыдущего информационного блока:









Вывод:
Отступ перед заголовком в 3 раза больше, чем после. Вместо жирных и заглавных — размер шрифта +4.




Пространство: Воздух

Ещё одно простое правило: не лепи.




Между всеми объектами интерфейса (кроме случаев регламентированных фрэймворком, таких как выпадающие меню или командные панели кнопок) должен присутствовать «воздух».
Воздух — минимальное пространство между краями формы и элементами на ней, а так же между объектами внутри формы. 10 пикселей от краёв формы, и 5 между объектами внутри формы. Можно больше. Меньше нельзя!




Когда объект вписан в некую ограниченную область и контактирует с границами — его сложнее отделить от этой области. Объект начинает восприниматься как её часть:




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




Пример отсутствия «воздуха» в окне настройки параметров видеоокна Папилон-СКВ:




Ещё одно простое правило: не лепи.




Вывод:
Отступ от краёв формы — не менее 10 пикселей, между объектами внутри формы — 5 пикселей.




Пространство: Размеры

Третье простое правило: содержимое диктует размер. Размер элемента зачастую является подсказкой для пользователя.

Рассмотрим поле ввода даты. Без каких-либо дополнительных подсказок понятно, что в первом варианте придётся вводить месяц цифрами, а во втором варианте — буквами.




Теперь рассмотрим поля ввода почтового адреса.




Пример из АБИС Арсенал, когда размер полей не является подсказкой для пользователя:




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




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


Альтернатива при малом количестве полей




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

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




Задавая размеры объектов старайтесь придерживаться 4-5 вариаций. Иначе получится хаос.




Размер кнопок так же имеет значение. Допускается самую важную кнопку снабдить и иконкой, и подписью, а так же увеличить в размере. Однако следует стремиться к единству и унификации.

Пример из модуля кодирования АДИС8.







Справедливо и обратное, когда размер окна диктует размер содержимого. Иначе говоря, не надо мельчить там, где полно места.

Рассмотрим интерфейс ФМС-киоска. Этап сканирования паспорта и сверки по базе данных.




Маленькие кнопки на большом экране и мелкие шрифты, существенно замедляют работу с устройством.




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





Альтернативное решение — применение другого метода отображения вкладок. Так и площадь нажатия больше и видны сразу все группы настроек. Пример свойств системы Windows:




Вывод:
Кнопки одного размера. Ширина полей зависит от содержимого, а не длины переменной. Не мельчи!




Пространство: Выравнивание

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




Выравнивать подписи по правому краю нельзя, так как усложняется поиск нужных полей по первым буквам наименований:




Пример из АДИС Папилон. Если избавиться от «гребёнки», то проще будет находить нужные параметры как по названиям, так и по содержимому полей.




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




Пространство: Резинка

Всегда следует предусматривать возможность изменения размера формы, но не всё необходимо растягивать.

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




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

Исходное окно.


Результат растягивания.




Пример растягивания окна, когда в нём нет таблиц и многострочных полей ввода.




Вывод:
Растягиваем только таблицы, панели и многострочные поля ввода. Если есть растягивающиеся объекты, то и кнопки должны «ездить».




Разберём работу с пространством на примере

Вернёмся к интерфейсу окна настройки параметров видеоокна Папилон-СКВ и попробуем применить полученные знания.




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




Добавим воздух:




Поработаем с заголовками. Увеличим отступы, чтобы обозначить группировку элементов:




Итого, размер окна не изменился, а интерфейс стал «считываться» быстрее.




Принципы   Пространство   Комфорт   Таблицы   Изображения   Бонус

Комфорт: Ссылки

Три правила о ссылках, которые относятся как к web-интерфесам, так и к обычным приложениям (в современных приложениях всё чаще можно встретить web-ссылки):

  1. ссылка, которая ведёт на новую страницу или открывает новое окно, должна быть подчёркнута сплошной линией.
  2. ссылка, которая показывает новые данные на текущей странице, должна быть подчёркнута пунктирной линией.
  3. если фон позволяет, то цвет ссылки задаём приближенным к синему цвету, например  #00789b .

Ссылками можно заменять кнопки «Открытия» каких-либо данных. Например, открытие информации о сотруднике в Проходной GWI. Так и ФИО заметнее:




Пример из АДИС PQ3. Кнопка «Создать новый» раскрывает список кнопок с выбором типа запроса, поэтому ссылка подчёркнута пунктиром:




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




Пример окна выборки в АДИС Папилон 8, когда количество выбранных сегментов неизвестно.




Вариант улучшения.




Пример из 1С, когда период анализа и склады указываются в отдельных формах, а результат выбора этих параметров выводится ссылками. В отличие от поля выбора (например, отбор по организации), использование ссылок даёт возможность гибкой настройки интерфейса.




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




Пример из Системы учета рабочего времени. Из-за отсутствия опознавательных подчеркиваний сложно догадаться, что ФИО — это ссылки на отчёты сотрудников.




Пример с сайта санатория, когда неверное использование подчеркиваний сбивает пользователя с толку.




Вывод:
Ссылки — синий подчёркнутый текст. Используйте их для экономии кнопок и акцентирования информации.




Комфорт: Однозначность

Пренебрежение типом информации, которую несёт тот или иной элемент управления существенно затрудняет работу с интерфейсом:

— Поля ввода текста.

— Радиокнопки для выбора только одного значения из нескольких.

— Чекбоксы для выбора либо одного, либо нескольких значений.

— Кнопки для совершения действий.


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




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




Пример из Папилон СКВ.




Если есть выбор между использованием чекбокса или тумблера, то всегда предпочтительней чекбокс. Считать сосотяние чекбокса гораздо легче, чем состояние тумблера.
Пример интерфейс GWI, окно редактирования данных сотрудника:




Тумблеры — относительно новый элемент управления и на них ещё не сформировался стандарт. Как следствие, понимание функционала может быть затуднено. Использование чекбокса требует формирование закрытых вопросов, так как ответ может быть только Да/Нет. По внешнему виду тумблера нельзя однозначно сказать "он уже включен" или то, что на нем написано, произойдёт по нажатию.
Пример интерфейс GWI, окно редактирования шифров:




Вывод:
Функционал должен соответствовать ожиданиям. Не используйте элементы, провоцирующие к разночтениям.




Комфорт: Мусор и порядок

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

Если из объявления выкинуть слово «Объявление», но крупно написать суть, то все и так поймут, что это объявление.




Явно мусорными элементами являются кнопки «Выход» и «Справка» в командной панели.




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




Старайтесь обходиться стандартными элементами.




Рассмотрим случай использования поля ввода для отображения текста в панели кодирования отпечатка АДИС Папилон 8:




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




Дальше следует подумать, а есть ли смысл во вспомогательных надписях? От некоторых можно смело избавиться, заменив их подсказками, всплывающими при наведении курсора.




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




Так как в данном окне информация о человеке является вспомогательной, то не критично, что часть её может быть спрятана. Смело избавляемся от лишней строки, объединяя ФИО. Чтобы дата рождения не воспринималась как дата регистрации, её лучше сгруппировать с ФИО.
Номер дактилокарты оформляем как ссылку, чтобы пользователь всегда мог кликнуть по ней и просмотреть подробную информацию, если что-то не увидит или засомневается.

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




Избавление от мусора происходит повсеместно. Это проявляется в избавлении от объёма, теней и мелких деталей:




Поэтому и в интерфесах следует использовать как можно меньше элементов, добавляющих мусор: рамки, отбивки.




Другой пример — рамки групп в программе Полифейс. Тут рамками обведён практически каждый объект формы:




Можно смело избавляться от рамок, некоторых заголовков и блока «результат», который, по сути, дублирует блок «рекомендованное действие»:




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

На освободившемся от иконки «Результат» месте лучше вывести подробные подсказки для пользователя.




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




Так же к мусорным относятся двоеточия после подписей к полям ввода, потому как двоеточие предполагает перечисление нескольких объектов:




Мусор на форме статистики АДИС. Заголовки используются для демонстрации, в каком списке фокус, однако такую информацию можно считать по цвету выделенныъ трок (серый/синий).




Мусор на форме пользователей АДИС.




Из-за рамок кнопок невозможно понять какая нажата, а какая — нет:




Отдельно стоит поговорить о неряшливости в оформлении интерфейса. Неряшливость и отсутствие порядка создаёт визуальное засорение пространства, что затрудняет его восприятие. Рассмотрим окно редактирования справочника моделей оружия в АБИС Арсенал:




Попытаемся его улучшить:




Другой пример — размер кнопок в окне кодирования отпечатка АДСИ Папилон 8:

Неряшливость не только затрудняет восприятие, но и влияет на отношение пользователя к продукту:




Вывод:
Если без чего-то можно обойтись, надо без этого обойтись: рамки, заголовки, кнопки и т.д.. Ширина и высота подгоняется под один размер. Элементы выстраиваются по линиям.




Комфорт: Лишние клики

Рассмотрим пример из СУРВ. На странице «Отчёт» есть два поля: Начало периода и Конец периода. Если кликнуть по полю, появляется календарь для выбора даты.

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

Применим это правило к СУРВ, а заодно избавимся от заголовка страницы «Отчёт», подсветив соответствующий пункт меню.




Один из вариантов сокращения количества кликов пользователей, а так же перехода от общего к частному — выделение кнопки «создать новый». Если в обычной ситуации мы сперва открываем общий список объектов, чтобы добавить в него новый (частный), то так мы можем миновать данный этап, сохраняя суть неизменной. Если нажатие кнопки приведёт к открытию окна со списком объектов, то при наведении курсора на кнопку справа должен появиться знак «+», нажатие на который приведёт к созданию нового объекта непосредственно из текущего окна.




В программе PQ3 в окнах маски ампутации изначально на всех иконках стоят вопросы. Чтобы понять, какая кнопка за что отвечает, приходится «прощёлкивать» каждую. Исправить эту ситуацию можно, разместив иконки рядом с кнопками.




При использовании тумблеров и выпадающих списков иногда лучше применять кнопки. Это уменьшает количество кликов и упрощает восприятие интерфейса. Рассмотрим три примера:




В АДСИ 8 информацию о поле следует выводить сразу за Отчеством. В этой ситуации можно обойтись как радиокнопками, так и кнопками, потому что на данном параметре работа с окном не заканчивается:




В оrне программы ГИБДД причину отказа выписки штрафа следует выбирать в отдельном окне с радиокнопками, что отнимает у оператора много времени на поиск подходящего и лишние клики:




Можно заменить радиокнопки кнопками и разгруппировать их по смыслу. При этом избавиться от "Ок" и "Отмена":




В Арсенале для получения информации об объектах БД по нажатию кнопк «i» открывается окно с радиокнопками.
В данной ситуации так же лучше заменить радиокнопки кнопками и избавиться от "Ок" и "Отмена". Либо вообще использовать кнпоку с подменю:




Вывод:
Не увлекайся радиокнопками. Если вариантов выбора всего два или три, следует применять кнопки.




Комфорт: Индикация

Для удобства работы пользователя следует сообщать ему о том, какие поля являются обязательными для заполнения. Для этого лучше подкрашивать цвет рамки поля красным цветом #c35b6c. При этом для людей с искаженным цветовосприятием оставляем звездочку «*»:




При заполнении цвет рамки должен меняться на обычный:




Если в поле введены некорректные данные, меняем цвет фона поля на бледно-оранжевый #ffeeee.:




Иногда глазам трудно разгруппировать блоки информации. Сложнее всего выделять просроченные даты и проценты. Следует подкрашивать значения, для облегчения ориентации пользователя. Зелёный — #7eaa49. Оранжевый — #bc9545. Красный — #bc2f42.




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




Пример — таблица заказов с просроченными датами в 1С.




Пример — Цветовая подсветка синтаксиса в текстовом редакторе существенно упрощает работу.




Особенно это актуально в не сортированных списках.




Не всегда нажатие кнопки «Да», «Ok» или «Подтвердить» приводит к положительному результату. Иногда, чтобы оградить пользователя от случайного нажатия, следует менять цвет кнопки.





Цветовую индикацию можно заменить текстовой. Следует избегать вопросов «Архивация сегмента приведёт к удалению данных.» «Ок» «Отмена».
Вариант исправления. «При архивации корзина сегмента будет очищена. Продолжить?» «Да, очистить» «Нет, вернуться».
Когда на стандартных кнопках появляются дополнительные слова с указанием на действие, это привлекает внимание и количество необдуманных нажатий снижается.




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






При этом в самом окне выделять новые/не просмотренные данные.




Вывод:
Расставляй акценты, чтобы пользователь сразу видел нужное. Выделяй негативные значения. Основные показатели — яркие, вспомогательные — блёклые.




Комфорт: Подсказки

Чтобы пользователь быстрее работал, необходимо снабжать интерфейс подсказками.

Пример из макета интерфейса ФМС киоска.
Пользователь должен сфотографировать себя так, чтобы изображение легко было сопоставить с фото из паспорта. Для этого следует показать фото из паспорта.





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




Так же очень важно все элементы формы снабжать всплывающими подсказками об их назначении. Это позволит сократить названия и сэкономит время пользователя, чтобы не обращаться к справке.

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






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

Если форма содержит поля для указания персональной информации, например номера телефона или адреса, необходимо добавлять пояснение о том, как эта информация будет использована.




Пример управления настройками учёта в программе 1С. Рядом с элементами упарвления выведены не просто подсказки, а целые выкладки из спраовчных материалов. В итоге пользователю не нужно искать в отдельном окне справки и в книгах информацию о той или иной настройке.




Пример со страницы резервирования спортивного зала. Совершенно неясно для чего нужны поля «Тип» и «Куда», а следовательно непонятно какие значения в них следует выбирать. Подсказки помогают выбрать правильные варианты:




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

Значения «по умолчанию» назначаются кнопкам, чекбоксам, радиокнопкам, выпадающим спискам, а так же подставляются в текстовые поля бледным серым цветом и исчезают, когда пользователь помещает в конкретное поле курсор, чтобы начать вводить свои данные.

Самый наглядный пример — поле ввода номера телефона. Как правило пользователи вынуждены гадать, через пробел вводить цифры или слитно? Как начать номер с «8» или «+7»?




Решить эту задачу можно в два счёта, подставив значение по умолчанию.




Пример расстановки значений по умолчанию в макете окна нового запроса в АДИС Папилон 8. Красными рамками помечены обязательные для заполнения поля, в которые ещё не вносились данные. Бледным текстом прописаны значения подсказки. Розовый фон имеют поля, в которых указаны некорректные данные.




Вывод:
Насыщай интерфейс подсказками. Переноси куски «справки» и «правил» непосредственно к элементам.




Разберём на примере принципы комфорта

Интерфейс резервирования спотивного зала:




Панель добавления нового резервирования:




Упорядочим поля ввода данных, добавим подсказки и избавимся от лишних строк в календаре, подсветив выходные дни:




Принципы   Пространство   Комфорт   Таблицы   Изображения   Бонус

Таблицы: границы и строки

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


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

Правило присущее как web-интерфейсам, так и обычным программам:
В таблицах следует избавляться от границ, заменяя их другим визуальным приёмом — чередованием цвета строк. Вертикальные границы допускаются, но по возможности того же цвета что и основной фон таблицы (в большинстве случаев это белый).

Для чередования посредством стилей css в web создаётся класс .stripy tr:nth-child(2n+1){background-color: rgba(238, 226, 200, 0.2);} и .stripy tr:nth-child(2n){background-color: rgba(255, 255, 255, 0.0);}

Если применить чередование цвета фона строк невозможно, то следует оставить только нижние границы у строк.

Рассмотрим пример из Пропускной системы GWI.




Сперва устраним границы у всех таблиц.




Избавимся от очевидных названий колонок: N, ФИО, Цвет, Описание. В ячейке ФИО разместим название отдела. Добавим чередование цветов строк и белые вертикальные границы.




Пример из программы кодирования следов АДИС Папилон 8. Устраняем границы, добавляем чередование цветов строк. Возвращаем белые вертикальные границы. Читабельность не ухудшилось, интерфейс стал легче.




Окно событий в Папилон-СКВ




Пример из программы АБИС Арсенал.




Ситуации, когда чередование цвета строк неуместно:
Если разработчику заранее известно, что в большинстве ситуаций таблица будет содердать мало строк, то вместо чередования цветов строк, лучше показывать нижние гарницы. Таким образом у пользователя не будет возникать ощущения, что на какой-то из строк сделали "акцент".




Так же чередование цветов строк не решает проблемы в древовидных списках. Пример из списка тем в СУРВ, где слились темы GSM и GWI, а так же Изделия и Талоны на питание. В таких случаях лучше просто выводить границы строк...




...либо красить в разные цвета разные уровни дерева. Пример из спецификации прибора в 1С:




Вывод:
В таблицах строки разделять за счет чередование цветов. В дереве и коротких таблицах строки разделять нижними границами. Границы должны быть блёклые.




При неправильном подборе ширины колонок данные могут не умещаться в одну строку. В этой ситуации в обычных приложениях данные скрываются за пределами ячейки, о чём свидетельствует многоточие «Константин Константино...». Зато в web-интерфейсах высота ячеек начинает увеличиваться. Это даёт эффект плавающей высоты строк. Информацию в таких таблицах очень тяжело воспринимать.

Старайтесь приводить высоту строк в таблицах к одному размеру. Вертикальное выравнивание содержимого — по середине.




Вывод:
Усредняйте высоту строк таблицы за счёт отступов.




Таблицы: форматирование.

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




Чтобы информация в таблицах считывалась быстро и легко, следует её оформлять по определённым правилам:

  1. Числа выравниваются по правому краю, текст — по левому. Колонка с единицами измерения размещается следом за колонкой количества.
  2. Выравнивание по центру допустимо только в колонках с булевыми занчениями (галки, точки, да/нет).
  3. Заголовок колонки должен выравниваться так же, как и содержимое.
  4. От краёв ячеек должны быть отступы по 5 пикселей.
  5. У чисел должны быть видны разряды. Разряды обозначаются пробелами «7 100», а не апострофами «7'100», чтобы не было путаницы с десятичными запятыми.
  6. Числа одной колонки должны приводиться к единому знаменателю дробной части. Лидирующие нули допускаются только в датах и времени. Целая и дробная часть разделяются запятой «0,25», время разделяется двоеточием «18:00», даты разделяются точкой «01.04.2016».
  7. Если в числовой ячейке ноль, то лучше оставить ячейку пустой « » и не выводить цифру «0». Тогда найти нулевые значения в таблице будет быстрее, ведь визуально они не будут пересекаться с ячейками, в которых встречается только одна цифра: «6», «8», «9» и т.д..

Пример некорректного выравнивания заголовков колонок.




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




При нулевых значениях лучше показывать пустоту «  », а не «0».




Отступы по бокам в ячейках позволяют информации не сливаться при разных методах выравнивания:




Вывод:
Текст влево, числа вправо. Числа делим на разряды и приводим к общему знаменателю. Нули либо не показываем, либо показываем бледно. Отступы по периметру 5 пикселей.




Таблицы: шапка и первая колонка.

Шапка всегда должна быть контрастнее и темнее, чем основной цвет фона строк таблицы. По возможности высота шапки должна быть больше, чем высота строк таблицы.




Организовать это в web-интерфейсах ещё проще.




Если таблица имеет много колонок и полосу прокрутки по ширине, то следует фиксировать самую главную колонку.






Вывод:
Шапка должна отличаться от строк таблицы. Главная колонка фиксируется. Заголовок таблицы перенеси в имя главной колонки.




Таблицы: сортировка, фильтрация и поиск.

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

Пример из СУРВ. Данные и в дереве, и в выпадающем списке отсортированы по индексу темы, а не по наименованию.




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

Пример из GWI-5. Сложно сразу понять по какой колонке отсортирован Список сотрудников подразделения. В итоге поиск нужного в большом списке может быть затруднен.




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




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




Отключается фильтрация таким же методом.




Поиск уступает фильтрации. Предусматривайте возможность фильтрации списков и таблиц.




Пример из GWI 4, когда в выпадающем списке нельзя воспользоваться инкрементным поиском. Пришлось слева от списка размещать поле фильтрации.







Пример, когда в выпадающем списке Bootstrap реализована возможность фильтрации.




Вывод:
Кнопки сортировки — в названия колонок, фильтрации — в контекстные меню. Лучше фильтраця, чем поиск.




Таблицы: изображения и спутники.

Информация с изображений считывается в разы быстрее, чем с текстовых данных. Если мы можем вывести изображение, то надо это сделать.

Дополнение иконками:




Даже крошечное изображение упрощает ориентирование.



Если нет возможности вывести картинку в строку таблицы, то можно выводить её по соседству при выделении строки таблицы:




Таким же путём следует выводить наиболее часто используемую вспомогательную информацию, чтобы пользователю не приходилось каждый раз пользоваться кнопкой «Подробнее» или «Просмотреть данные»:




Примеры применения. Просмотр базы данных в АДИС Папилон 8:






Просмотр базы данных АБИС Арсенал:




Вывод:
Интерактивно выводи изображения и сопутствующую информацию.




Принципы   Пространство   Комфорт   Таблицы   Изображения   Бонус

Изображения: Второй слой

Поверх изображений можно смело размещать информацию. Это экономит место на форме и позволяет увеличить площадь изображения.




Пример из АБИС Арсенал. Элементы управления размещены поверх рабочей области изображения.






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

Вписываем в панель изображения воображаемую окружность и намечаем её центр.




Вписываем вторую окружность с диаметром в половину меньше, чем у первой.




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






При этом следует помнить, что читабельность текста, размещённого поверх изображения без подложки, ухудшается. Следует увеличивать размер шрифта и добавлять тень.

Рассмотрим пример из программы Папилон СКВ.




Наложим элементы управления вторым слоем.




Получим тот же результат при большей площади картинки.




Вывод:
Смело переносите часть информации поверх изображения. Допустимая площадь — 50% от краёв.




Изображения: Размеры

Если пользователю придётся работать с изображением, то оно должно занимать максимум площади.

Рассмотрим пример из Пропускной системы GWI.




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

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



Даже при большом количестве отображаемых проходов, изображение остаётся крупным.




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




Изображения: Редактирование

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






Не рекомендуется заменять «окнами предпросмотра» визуализацию изменений на исходном изображении. Внесённые изменения должны отображаться сразу на рабочем изображении. Пример Папилон Растр.




При этом следует предусматривать кнопку "Показать как было", чтобы, не откатывая изменений, восстановить в памяти, каким был исходник.




Вывод:
Изменения показывай сразу на изображении, а не в отдельном окне. Функцию «предпросмотр» активируй по умолчанию, но делай отключаемой.




Принципы   Пространство   Комфорт   Таблицы   Изображения   Бонус

Бонус: Перегруз

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




Такое же правило относится и к диалогом/оповещениям пользователей. Не надо выдавать всё сразу.




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




Бонус: Велосипеды

Прежде чем взяться за выдумываение собственного оригинального дизайнерского решения, просто посмотрите, как это уже реализовали другие люди:



Иначе рискуете изобрести свой велосипед...


Регулировка громкости:




Ввод телефонного номера без клавиатуры:




Вращение картинки при помощи колеса:




Вывод:
Не изобретай велосипед. Используй популярные решения.




Вам нужен такой же проект?
Да, хочу обсудить условия Нет, посмотрю ещё проект