Turbomilk

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Объекты:

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

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

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

Действия:

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

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

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

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

Объекты:

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

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

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

Действия:

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

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

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

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

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

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

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