Реализм графических пользовательских интерфейсов

17 Авг

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

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

Графические детали и реализм могут отвлекать от истинной задачи иконки. Мне поможет вырезка из книги «Понимаем комиксы» Скотта Макклауда (Scott McCloud’s «Understanding Comics»), книга, которую должен прочитать каждый дизайнер.

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

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

Настоящий фотоаппарат на кнопке вводит в заблуждение.

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

Отсутствие нужных деталей размывает смысл
Круг слева чётко говорит нам, что это лицо. Круг справа как лицо не воспринимается.

Давайте взглянем на всем известный элемент интерфейса. Обычно для этого действия используют изображение дома.
Изображение домов: от фотографии к иконке
То, что слева — здание или дом. Штуку справа мы понимаем как «Вернуться в начало» или «Начать сначала». Где-то между этими символами находятся понятия «конкретное здание / дом» и «здание / дом вообще». Чем больше реализма вложено в символ, тем сложнее понять назначение этого символа.

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

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

Давайте я продемонстрирую вам идею вот этим вот ненаучным графиком:

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

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

Фотография кнопки и ее ui представители
Кнопка слева слишком реалистична. У кнопки справа не хватает деталей, чтобы быстро понять что это — кнопка.

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

<Кнопка «В начало». Реалистичная и символичная.

Исключение

Фирменные иконки программ

Есть сфера, где детали играют лишь на руку: фирменные иконки компьютерных программ. Листик программы Coda это не просто представление понятия «лист»; это конкретный листик, листик программы Coda. Жёлудь графического редактора Acorn, это не просто жёлудь с дерева, это жёлудь Acorn. Добавление деталей в таких случаях делают эти картинки именно теми иконками, которыми они являются и делают их отличными от других — как раз то, что надо любой программе.

Заключение

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

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

Оригинал: Realism in UI Design

Перевод: http://watcherr.wordpress.com/

Реклама

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: