Блог: статьи

Конструирование языка пиктограмм пользовательского интерфейса

Егор ГилёвАвтор: Егор Гилёв
21 июня 2007

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

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

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

Первое правило абсолютно очевидно, второе — может вызывать вопросы. Однако, наш опыт подтверждает, что пренебрежение этим правилом обычно приводит к напрасной потере времени и к плачевным результатам. Безотказный способ создать разваливающийся на ходу набор пиктограмм — делать пиктограммы одну за другой, по списку, в алфавитном порядке, не заглядывая вперед и не рассматривая задачу в комплексе. Противоположный подход мы называем «конструированием языка пиктограмм». Этот метод подробно описан в книге Вильяма Хортона «The Icon Book». А сейчас я постараюсь на примере продемонстрировать, что это такое и как это делается.

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

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

Вкратце перечислим основные особенности приложения:

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

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

Команды для работы со свободными строчками:

  • Добавить в кучу строчку об оказанной услуге
  • Добавить в кучу строчку об обработанном времени
  • Добавить в кучу строчку о продаже продукта
  • Удалить строчку
  • Собрать (выбранные) строчки в счет
  • Показать (только) свободные строчки
  • Показать любые строчки

Команды для работы со счетами:

  • Добавить счет
  • Удалить счет
  • Отправить счет
  • Показать не отправленные счета
  • Показать отправленные счета
  • Показать оплаченные счета
  • Показать любые счета

Команды для работы со строчками в счетах:

  • Добавить в счет строчку об оказанной услуге
  • Добавить в счет строчку об обработанном времени
  • Добавить в счет строчку о продаже продукта
  • Удалить строчку из счета в кучу
  • Удалить строчку совсем

Команды для регистрации поступления денег:

  • Добавить оплату
  • Удалить оплату

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

Объекты:

  • строчка
  • счет
  • оплата

Определения:

  • об услуге
  • об отработанном времени
  • о продаже продукта
  • связанная
  • свободная
  • не отправленный
  • отправленный
  • оплаченный
  • любая/любой

Действия:

  • добавить
  • удалить
  • собрать
  • показать
  • отправить

Обстоятельства:

  • из счета
  • совсем
  • в счет
  • в кучу

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

Объекты:

Объекты

Определения — типы строчек:

Определения - типы строчек

Определения — состояния строчек:

Определения - состояния строчек

Определения — состояния счетов:

Определения - состояния счетов:

Действия:

Действия

Обстоятельства:

Обстоятельства

Наконец, выбрав из результатов мозгового штурма наиболее перспективные наброски, мы компонуем из них нужные нам пиктограммы.

Пиктограммы команд для работы со свободными строчками:

Пиктограммы команд для работы со свободными строчками

Пиктограммы команд для работы со счетами:

Пиктограммы команд для работы со счетами

Пиктограммы команд для работы со строчками в счетах:

Пиктограммы команд для работы со строчками в счетах

Пиктограммы команд для регистрации поступления денег:

Пиктограммы команд для регистрации поступления денег

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

Условия использования

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

Комментарии

спасибо, полезная статья

Ответить Grin, 21 июня 2007

Спасибо! отлично рассмотрено на хорошем примере:)

Ответить Vic, 21 июня 2007

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

Ответить Вовка Соловьёв, 21 июня 2007

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

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

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

Ответить yegor, 21 июня 2007

Крестик они и есть крестик. Чем проще – тем лучше. Но вот 3 одинаковых легко спутать, если они не сгруппированы в меню или на панели.
Удалить оплату: крестик на фоне стопки монет. Логично? Логично. Удалить счёт: крестик на фоне листа. То же самое со строчкой.
К листочкам-счетам можно подрисовать знак суммы, чтобы не путать со значком пустого счёта. Думаю, не нужно пугаться листочков, это всё же иконки для программы учёта, своего рода бухгалтерии. А до 1С были самые обычные бухгалтерские книги, состоящие из самых обычных листочков-счетов и листочков-квитанций.
Успехов!

Ответить ArtDesigner, 22 июня 2007

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

Ответить yegor, 22 июня 2007

ура, очень полезная статья :D

попалась бы она мне год-два назад… а так – эти правила выработались интуитивно. только, увы, в нашей компании, например, зачастую не получается заранее предопределять все моменты, так как приложение разрабатывается экстремально (а графика рисуется порой параллельно), пишутся новые модули и т. д. порой приходится иконки, сделанные для одного элемента интерфейса, позже применять к другому )

Ответить compgraf, 22 июня 2007

Спасибо за статью!

Ответить shalvius, 5 июля 2007

о, спасибо, очень полезное дело. снова засел за программирование, и аппликация до черта много чего на вебе делать будет, без картинок никак ! :)

Ответить mano, 20 июля 2007

>> В ходе мозгового штурма мы генерируем как можно больше идей, как можно изобразить тот или иной элемент
Зачем?
Не лучше ли спросить у пользователей?
Есть методы психологического исследования, практически решающие вопросы создания графических образов, и даже создания пользовательского меню.
Не особенно трудоемкие. Например, метод пиктограмм А.Р. Лурии (он так и называется), или метод классификации.
Подробнее см. дневник http://moikrug.ru/circles/first/topics/553436316/

Ответить Lulu, 25 января 2008

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

Ответить dolzhenkov, 6 февраля 2008

Полезная статья, спасибо большое!

Ответить Sash, 19 декабря 2008

Напишите комментарий

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

Connect with Facebook

Если у вас есть OpenID (например, myopenid.com), воспользуйтесь им для авторизации.

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

Закрыть