20 принципов проектирования интерфейсов
Принципы проектирования пользовательских интерфейсов
«Проектировать - не означает просто собрать воедино функции, упорядочить и поместить на белый лист.Суть проектирования в добавлении содержимому значимости, в выделении, упрощении, прояснении,акцентировании, облагораживании, убеждении и возможно даже развлечении»
Пол Рэнд
1. Интерфейс создан для интерактивности
Интерфейсы нужны для взаимодействия человека с миром. Они помогают сделать сложное простым, показывают соотношения элементов, собирают нас вместе или напротив разъединяют, удовлетворяют наши ожидания и предоставляют доступ к услугам. Проектирование интерфейсов имеет мало общего с искусством, ведь эффективность интерфейса может быть измерена. С другой стороны, лучшие интерфейсы - это больше чем решенная задача. Они могут вдохновлять, захватывать и погружать в другой мир.
2. Ясность - задача номер 1
Ясность лежит в основе любого интерфейса. Люди должны быстро понять, с чем они работают, зачем это нужно и что с помощью этого можно сделать, предположить, что будет получаться в результате их действий и затем начать использовать это. Ясность подпитывает уверенность пользователей в своих действиях и делает использование интерфейса приятным. Сотня кристально ясных страниц лучше, чем одна страница, на которой царит хаос из-за переизбытка информации.
3. Удерживайте внимание любой ценой
Мы живем в мире, где нас часто отвлекают и прерывают. Уже сложно спокойно почитать, чтобы ничего не отвлекало нас. Внимание - золото. Поэтому всегда держите в голове цель того или иного экрана. Если цель - чтение статьи, дайте пользователю дочитать ее перед тем, как показывать рекламу. Не заполняйте боковую часть страницы всякой отвлекающей ерундой. Помня о внимании, вы не только сделаете читателей счастливее, но и повысите эффективность взаимодействия.
4. Предоставьте пользователю контроль над ситуацией
Люди чувствуют себя уверенно, когда владеют ситуацией. Плохо спроектированные программы заставляют людей делать незапланированные действия, мешают на пути к цели и даже неожиданно закрываются. Держите пользователя в курсе дел, периодически показывая системный статус, объясняя что произойдет, если вы сделаете то или иное действие и давая представление о том, что их ждет на каждом шагу. Не бойтесь быть слишком очевидным. Очевидности много не бывает
5. Прямое взаимодействие лучше
Лучший интерфейс - его отсутствие, то есть возможность напрямую взаимодействовать с физическими объектами. Учитывая, что это не всегда возможно и то, что объекты становятся все больше информационными, мы создаем интерфейсы, чтобы помочь взаимодействовать с ними. Проще всего набабахать множество слоев из глянцевых кнопок, хрома, графики, опций, свойств, окон, приложений. Однако пользователь будет вынужден обращаться с ними, а не с реальным объектами, над которыми выполняются действия. Вместо этого создавайте интерфейсы, с которыми можно обращаться жестами, как и в жизни. Идеальный интерфейс оставляет ощущение прямого контакта с объектами на экране.
6. Одно главное действие на экран
Каждый экран должен быть спроектирован ради единственного действия, которое действительно важно в данный момент. Так легче учиться, легче использовать, легче надстраивать по необходимости. Экраны с двумя и более основными действиями быстро становятся запутывающими. Так же как написанная статья должна иметь одну объединяющую идею, экран должен иметь одно главное действие, ради которого он создан.
7. Оставьте второстепенные действия второстепенными
На экранах с одним главным действием может быть множество второстепенных действий, но они должны оставаться таковыми. Вы пишете статью не для того, чтобы люди делились ею в Твиттере, а чтобы ее прочитали и поняли. Сделайте второстепенное визуально легче или вообще показывайте его после того, как главное действие выполнено.
8. Обеспечьте естественный следующий шаг
Редкие действия выполняются за один шаг. Поэтому подумайте над шагами для каждого действия, которое есть в вашем интерфейсе. Предскажите следующее действие и дайте ему интерфейс. Так же, как и в человеческих отношениях, дайте понять, каким будет следующий шаг. Не оставляйте человека в ожидании только потому, что он сделал, что вы хотели. Нарисуйте ему дорогу к цели и ненавязчиво помогайте на каждом шагу.
9. Форма следует за функцией
Люди уверенно себя чувствуют, когда обращаются с предсказуемыми вещами. Когда другие люди, животные, предметы, программы ведут себя, так, как мы ожидаем, нам это нравится. Поэтому важно проектировать элементы интерфейса так, чтобы по ним можно было предсказать, какие действия они выполняют. Если что-то выглядит как кнопка, она должна работать как кнопка. Не выпендривайтесь на основах взаимодействия, оставьте свою креативность для более важных вещей.
10. Последовательность имеет значение
Элементы, которые выполняют похожие функции, должны выглядеть похоже. Это кажется логичным и очевидным. Но в этом принципе часто забывается обратное следствие: непохожие действия должны обозначаться непохожими элементами. В попытках создать целостный интерфейс, начинающие проектировщики игнорируют важные различия, используя ограниченный набор визуальных элементов.
11. Строгие визуальные иерархии работают лучшим образом
Строгая визуальная иерархия прослеживается там, где есть четкая последовательность элементов на экране. То есть порядок расположения схожих элементов одинаков на всех однотипных экранах. Если иерархия отсутствует, то пользователю сложно понять, куда надо смотреть, чтобы увидеть то, что нужно. Мало кто замечает эту иерархию, но она является одним из простых способов сделать интерфейс более четким.
12. Порядок разгружает мозг
Как сказал Джон Маэда (John Maeda) в его книге “Простота”, порядок в расположении элементов может дать ощущение, что многое выглядит как малое. Это помогает людям понять ваш интерфейс лучше и быстрее, так как вы показываете невидимые связи между элементами. Группируйте схожие элементы, акцентируйте связи расположением и визуальной иерархией. Этим вы помогаете пользователю, который не обязан разбираться в вашем интерфейсе, просто потому, что вы его сделали. Не заставляйте пользователя думать и он будет вам благодарен.
13. Используйте цвет для выделения, а не создания смысла
Цвет физических предметов меняется в зависимости от освещения. При свете дня мы видим дерево со всеми его деталями и оттенками, однако если смотреть на него против закатного солнца - мы увидим только черный контур. Так же, как и в физическом мире, где цвет предмета может сильно различаться, цвет не должен быть главным в интерфейсе. Он может помочь, когда нужно направить внимание на определенный элемент, но не стоит использовать его как единственный способ различения элементов. Используйте легкие или приглушенные цвета фона, оставив яркие для акцентирования. Конечно, вы можете использовать яркие цвета, но только когда вы уверены, что это будет позитивно воспринято вашей аудиторией.
14. Постепенное появление
Показывайте только то, что нужно на текущем экране. Если люди должны сделать выбор, дайте им достаточно информации для него, а в детали погружайтесь на следующем экране. Избегайте привычки рассказать и показать все сразу. Когда возможно, разделите принятие нескольких решений на разные экраны. Это поможет сохранить ясность во взаимодействии.
15. Помогайте пользователям по ходу
В идеальных интерфейсах помощь не нужна, т.к. они понятны и легко используемы. В реальной жизни интерфейсы иногда требуют помощи, однако ее нужно оказывать порционно и там, где она действительно нужна, скрывая в остальное время. Можно попросить людей пройти в раздел справки и найти там ответ на свой вопрос, но лучше встроить подсказки там, где они нужны. Только убедитесь, что пользователи знакомы с подобными интерфейсами.
16. Решающий момент: нулевой шаг
Первый опыт взаимодействия с интерфейсом имеет решающее значение, которое часто недооценивают дизайнеры. Сложности с интерфейсом чаще всего проявляются на этой стадии. Чтобы помочь пользователям побыстрее разобраться в интерфейсе, спроектируйте справочную страницу перед загрузкой основного содержимого. Расскажите и покажите, что и как нужно будет делать. Когда пользователи поймут правила, им будет приятнее пользоваться интерфейсом.
17. Существующие проблемы - самые главные
Люди ищут решения своих текущих проблем, а не потенциальных проблем, которые ждут их в будущем. Поэтому не стоит проектировать интерфейс, заточенный под гипотетические проблемы. Исследуйте текущие проблемы и создайте интерфейс под них. Это не так увлекательно, но однозначно даст свои плоды, когда реальные пользователи начнут пользоваться вашим интерфейсом.
18. Лучший дизайн незаметен
Парадоксально, но факт: отличный дизайн незаметен. Причина в том, что пользователь может сконцентрироваться на решении своих задач, вместо того, чтобы разбираться с интерфейсом. Когда пользователь успешно решил свою задачу, он счастлив и не видит причин благодарить за это интерфейс. Возможно это звучит разочаровывающе для дизайнеров, ведь никто не скажет, как хорош ваш дизайн. Однако, великие проектировщики знают, что счастливые пользователи молчат.
19. Черпайте вдохновение в других областях
Дизайн, типографика, копирайт, информационная архитектура и визуализация. Все эти области являются частью интерфейса. Они могут быть второстепенными или главными в вашем интерфейсе. Не замыкайтесь на проектировании, расширьте свой кругозор и поищите вдохновения в принципах других дисциплин. Подумайте, чему вы можете научиться из написания программного кода, правил оформления книг, скейтбординга или карате.
20. Интерфейсы создаются, чтобы ими пользовались
Как и с другими видами дизайна, проектирование успешно тогда, когда люди пользуются этим. Как красивый стул, на котором неудобно сидеть, интерфейс считается провальным, когда пользователи не хотят им пользоваться. Поэтому важно помнить, что проектирование интерфейса совмещает в себе как создание среды для решения задач, так и продукт, которым хочется пользоваться. Интерфейс, который удовлетворяет только эго дизайнера, не может считаться хорошим. Интерфейс хорош тогда, когда им активно пользуются.
Источник: bokardo|com
Автор: Джошуа Портер (Joshua Porter)
Перевод: ActualWeb
Опубликовано в блоге Actual WEB.