От переводчика. Принцип простоты является одним из основополагающих в эргономике и дизайне. Термины «простота» и «интуитивность» принадлежат к числу наиболее часто используемых в публикациях по проблемам юзабилити. Однако нередко бывает так, что мы употребляем эти термины как самопонятные и не задумываемся над их значением. Как можно определить простоту? Можно ли предложить какие-то объективные критерии для оценки простоты и интуитивности интерфейсов?Предлагаем вниманию наших читателей перевод статьи Брандона Уокина (ныне занимающегося дизайном интерфейсов для Фейсбука), в которой затрагиваются обозначенные выше вопросы.
Любой дизайнер, работающий над сложными приложениями, старается, чтобы интерфейс не получился слишком сложным. Усложненный интерфейс может негативно повлиять на эффективность работы пользователя, увеличить затраты времени и сил на обучение работе с программой и отпугнуть пользователей.
В настоящей статье будет показано, какими способами можно решить проблему повышенной сложности.
Последовательное раскрытие (progressive disclosure)
Последовательное раскрытие (progressive disclosure) является одним из наиболее распространенных подходов к проблеме снижения уровня сложности. Идея заключается в том, что наиболее сложные и редко используемые элементы должны быть скрыты и вызываться лишь по специальной команде (щелчком мыши ли нажатием некоторой комбинации клавиш). Необходимо, что дизайнер четко определил, какие элементы являются необходимыми и насколько часто они используются.
С особым вниманием следует отнестись к иерархии и механизмам последовательного раскрытия. Малейшая ошибка может привести к прямо противоположному результату: интерфейс станет еще более сложным. Например, в Windows прослеживается тенденция к устранению меню из индивидуальных окон и перенесению их в главный интерфейс, что приводит к определенным последствиям. Рассмотрим некоторые из них:
- Доступ ко многим важным функциям в различных приложениях стал несогласованным. Например, пункт «Печать» расположен в разных местах в главном интерфейсе и в иерархии постепенного раскрытия. На скриншоте ниже показано расположение функции печати в Interner Explorer, контактах Windows Explorer и WordPad. В тоже время в приложениях для Mac (соответственно в Safari, AddressBook и TextEdit) способ доступа к функции печати унифицирован (последний пункт в меню «Файл»). Пользователь, уже имеющий опыт печати в одном из названных приложений, без труда перенесет приобретенный навык и на остальные. Здесь работает принцип «выучил раз — используй везде».
- Налицо тенденция к злоупотреблению последовательным раскрытием. Интерфейс Internet Explorer с установленным Windows Live включает в общей сложности 17 раскрывающихся меню. Естественно, что все подобные элементы занимают существенную часть экранного пространства. Чем больше экранного пространства занимают элементы управления, тем меньше его отводится под основные функции приложения.
Контекстные действия
Контекстные действия представляют собой форму последовательного раскрытия, при которой доступ к некоторым функциям отображается лишь при работе со строго определенными объектами. Чаще всего они отображаются в контекстных меню, вызываемых нажатием правой кнопки мыши. Хотя контекстные меню удобны и полезны, их не всегда просто обнаружить, поэтому для действительно важных в работе действий они не подходят.
Стандартный способ сделать элементы контекстного меню более заметными заключается в следующем: набор контекстных элементов управления располагается рядом с каждым объектом. Уровень сложности в таком случае только возрастает: повторяющиеся элементы управления располагаются рядом с каждым объектом на экране. Эту проблему можно решить использованием другой техники последовательного раскрытия: элементы управления отображаются, когда объект выделен, когда он находится под курсором и т. п. Такой подход решает проблему, так как на экране отображается только один конкретный набор элементов в конкретное время, но и он не лишен недостатков.
Расположение элементов и визуальные иерархия
Грамотное расположение элементов интерфейса является важным шагом на пути к его упрощению. Путем простого визуального упорядочения можно сделать интерфейс гораздо более гармоничным и привлекательным.
Убедительными примерами являются меню свойств объекта в Microsoft Expression Blend и Adobe Lightroom. По целому ряду причин интерфейс Expression Blend выглядит гораздо более сложным, но главной причиной является горизонтальное расположение элементов:
В меню Lightroom очень четко проведены различия между заголовками страниц и их содержанием. Заголовки заметны. Они выполнены крупным шрифтом, выделены с помощью отступов и пробелов; цвет шрифта контрастирует с цветом фона. Связи и отношения между элементами дизайна ясны и понятны.
Визуальный шум и контрастность
Уровень визуального шума в интерфейсе оказывает существенное влияние на его восприятие. Важную роль при этом играет контрастность. Использование менее контрастных элементов ведет к уменьшению уровня визуального шума, и интерфейс воспринимается как менее сложный. Проиллюстрируем сказанное конкретными примерами.
В пользовательском интерфейсе AddressBook предпочтение отдается не полям с высокой контрастностью, а полям, которые становятся видимыми при наведении фокуса. В результате этого поля сливаются с остальной частью интерфейса. В окне «Создать контакт» программы Entourage 2008 используются стандартный цвет фона окна и стандартное поле для ввода текста, в результате чего интерфейс выглядит более сложным по сравнению с AddressBook.
В качестве еще одного примера рассмотрим несколько измененный скриншот Aperture 2.0. На рисунке показано, как бы выглядел интерфейс программы, если бы он включал более контрастные текстовые поля из iLife08 (и частнично — из iLife09). Измененный интерфейс выглядит гораздо сложнее, чем реальный. Как видно из приведенных примеров, даже путем обычного изменения цветов можно существенно упростить интерфейс.
Использование иконок
Сложные и непонятные интерфейсы зачастую характеризуются обилием иконок, не сопровождающихся никакими пояснениями. Когда пользователь в первый раз откроет приложение со множеством непонятных иконок, он придет в ужас. Для того, чтобы по-настоящему овладеть приложением, нужно знать значение всех этих иконок.
Эту проблему трудно решить. Бывает так, что рядом с иконками просто нет места для ярлыков и пояснений. Принятие адекватного решения в подобной ситуации — это настоящее искусство.
Относительно решения данной проблемы можно дать следующие советы:
- Делайте иконки такими, чтобы об их значении без труда можно было бы догадаться по внешнему виду. Тщательно продумывайте метафоры, цвета, размеры.
- Делите иконки на группы исходя из их значения.
- Используйте технику последовательного раскрытия: включайте нечасто используемые элементы в выпадающие меню, обозначая их с помощью иконки с текстовым пояснением.
Стили мышления
Проектируя интерфейс, старайтесь максимально подстраивать его под стиль мышления своих пользователей. Невнимание к данному моменту может серьезно усложнить работу: на изучение интерфейса придется затрачивать слишком много лишних интеллектуальных усилий.
В качестве примера рассмотрим календарь Windows: он явно выстроен в соответствии с логикой мышления разработчика — но не пользователя. Внимательно посмотрите на приведенный ниже скриншот:
a. Что значит «28 последний день месяца» (28th last day of the month)?
b. Что значит «4 последний вторник месяца» (4th last Tuesday of the month)?
с. Сколько времени у вас ушло на то, чтобы понять, что все это значит?
Приведенный интерфейс кажется трудным, так как его функциональность и используемый язык никак не согласуются с вашими представлениями о повторяемости событий. Изучайте и учитывайте спефицику пользовательского понимания — это поможет сделать ваши интерфейсы интуитивно понятными. Более подробно об этом можно почитать в руководстве Apple по дизайну интерфейсов.
Наконец, старайтесь тщательно все обдумывать. Каждая из описанных выше техник требует определенных затрат и усилий. Проанализируйте возможности каждой техники применительно к вашему интерфейсу и решите, какая из них лучше всего подходит для вашего приложения и как ей лучше воспользоваться.
