Принципы проектирования пользовательских интерфейсов

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

Пол Рэнд

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

Вас может заинтересовать и:

1. Бен Шнейдерман об интерфейсе

Сэм Ротстейн (Роберт Де Ниро) о юзабилити / кадр из фильма 1995 года «Казино», режиссер Мартин Скорсезе/

— Почему они там? Их нужно перенести сюда — там их не видно.
А где джек-пот? Это ж самые прибыльные машины.
Теперь понятно почему мы стали меньше получать — глупо думать, что люди будут рыскать по углам в поисках автоматов.

Сэм Ротстейн (Роберт Де Ниро) — «Казино» (фильм, 1995), режиссер Мартин Скорсезе

No related posts.

Как выглядел бы онлайн-заказ в реальной жизни

youtube|com|actualwebchannel|3Sk7cOqB9Dk

Замечательный ролик Google Analyticts, который наглядно показывает с какими проблемами сталкиваются посетители интернет-магазинов.

Вы можете увидеть видео под катом или пройдя по ссылке.

youtube|com|actualwebchannel|3Sk7cOqB9Dk

Вас может заинтересовать и:

1. Like от Google — кнопка +1
2. Визуализация работы веб-сервера Apache — logstalgia
3. Мобильная связь – признак революционной ситуации

Хороший пример интернет-магазина женской одежды

Darling Clothes|com

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

главная страница

каталог

товар

Вас может заинтересовать и:

1. Минималистический интернет-магазин обуви
2. Небольшой интернет-магазин носков
3. Минималистический интернет-магазин футболок

Хороший пример одностраничного сайта

qlpros|com

Классный пример одностраничного сайта онлайн «дом быта». Небольшой семейный бизнес американской семьи из штата Миссури. Предоставляют услуги от глажки до восстановления обуви. Немного текста, простая таблица с ценами, большой и красивый презентационный слайдер — классно! Смотрите сайт по ссылке, а под катом снимок экрана.

Вас может заинтересовать и:

1. Сайт ресторана в Швеции
2. Одностраничный сайт-портфолио видео продакшн студии
3. Одностраничный сайт винодельческой компании

Давид Льюис об элегантном дизайне

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

Давид Льюис (David Lewis), 2006, Главный дизайнер Bang Olufsen

Вас может заинтересовать и:

1. Афоризм: Чарльз Мингус о простоте и творчестве.
2. Лучшие посты — 10′09
3. Афоризм: потребности пользователей

Пример минималистического интернет-магазина

gadget-o|com

Хороший пример минималистического сайта-витрины. Судя по тому, что там еще встречается Lorem ipsum — сайт еще в разработке, но это неважно. Товары расположены на странице с горизонтальной прокруткой — довольно редко разработчики используют такое представление товаров.  Несложная навигация, большие фотографии, очень простая страница товара. Приятно находится на сайте. Взгляните, возможно вас вдохновит во время разработки ваших проектов.

страница с товарами

страница товаров

Вас может заинтересовать и:

1. Хороший пример интернет-магазина очков
2. Минималистичный интернет-магазин
3. Минималистический интернет-магазин обуви

Хороший пример интернет-магазина очков

bonlook|com

Отличный пример интернет-магазина очков. Удобное меню, минималистический дизайн. На главной странице презентационный слайдер. Пользователи могут фильтровать список по множеству параметрам, указать размеры. простая страница товара с возможностью «примерить» очки(виртуальное зеркало). Понятие «корзина» вообще отсутствует в этом интернет-магазине, так как владельцы справедливо полагают, что покупатели приобретают только одну модель за одно посещение, а раз так — не стоит грузить пользователей еще одной дополнительной страницей. Смотрите снимки экрана под катом.

меню

возможность поиска своих размеров

Возможность "примерить" очки (загрузить или снять с веб-камеры)

Главная страница

Страница каталога

Страница товара

Вас может заинтересовать и:

1. Минималистичный интернет-магазин
2. Лучшие посты — 10’06
3. Пример минималистического интернет-магазина

Хороший пример промо-сайта Toshiba

The Toshiba Tablet|com

Отличный пример промо-сайта. Посетителя встречает великолепный промо-ролик о всех достоинствах нового устройства. Далее пользователь может узнать немного подробностей об устройств, посмотреть устройство со всех сторон с описанием. Никакой воды — только информация, которая может быть полезной для посетителя, и которая поможет во время выбора.

PS: для розжига — прощай, айпад;)

Вас может заинтересовать и:

1. Промо видео-сайт Kodak PlaySport video camera
2. Лучшие посты — 10′10
3. Волшебный flash-сайт Nespresso

Минималистичный интернет-магазин мебели

Ball Chair Shop|com

Хороший пример небольшого интернет-магазина. Всё просто и удобно. Но здесь есть один интересный юзабилити момент, который заслуживает внимания — в корзину продукты кладутся в прямом смысле, то есть пользователь имеет возможность перетащить покупки в корзину(drag&drop).

главная страница

Вас может заинтересовать и:

1. Хороший пример интернет-магазина очков
2. Пример минималистического интернет-магазина
3. Минималистический интернет-магазин обуви