Анастасия Чеснокова
6 декабря 2016
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Как с помощью пиктограмм отобразить строительные материалы, например цемент, гипс, известь?


Хорошие интерфейсные пиктограммы не пытаются изображать сам предмет.

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

Хоть текст и понятнее пиктограммы, но пиктограмму мы быстрее узнаём. Знакомая пиктограмма помогает быстро найти нужную кнопку:


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

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

Крайний случай — когда рисунок пиктограммы вообще никак не связан с её смыслом:



В конце 90-х среди пользователей Виндоуса были популярны темы оформления операционной системы, которые меняли не только обои рабочего стола, но и цвета интерфейса и набор пиктограмм. В одной теме оформления все иконки могли стать разными цветами, в другой — планетами. Но пользователи быстро научались узнавать, что Земля — это мой компьютер, а Юпитер — Корзина.



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

А ещё пиктограммы экономят место и расходы на локализацию.

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

В 2008 году в Бюро спроектировали интерфейс для новой версии почтового клиента. В предыдущей версии основные кнопки управления почтой были неотличимы:


Для каждой мы придумали узнаваемый символ:



А потом раскрасили их в соответствии со стилем эпохи скеоморфизма:


Узнаваемость этих кнопок не пострадает, если стиль поменять.

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


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

О привычках

P. S. Я проведу практический курс «Пользовательский интерфейс и представление информации» 22, 23, 24 и 26 апреля в Москве

 

Запись открыта до ВС 16 апр


Поделиться

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

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

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

Вот такой веб 2.0.

Пиктограммы





Недавно всплыло

Как флексить. Отступить от идеала 2 Столкнулся с проблемой, когда долго общаешься с клиентом, и потом выясняется, что его не устраивает порядок цен. Часть 1 2 5 4