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

Принципы разработки пользовательского интерфейса Главная задача — ясность Ясность — это первая и самая главная задача любого интерфейса. Чтобы интерфейс эффективно помогал людям добиваться своих целей, он должен обладать следующими характеристиками.  Во-первых, он должен быть узнаваемым, а его назначение — очевидным для пользователя.  Во-вторых, люди должны понимать, с чем они взаимодействуют через интерфейс.  Наконец, процесс взаимодействия с интерфейсом должен быть предсказуемым. В интерфейс можно внести некую загадочность или элементы игры, но вот путаницы быть не должно. Ясность рождает в пользователях уверенность и готовность продолжать работу с интерфейсом. Сто понятных экранов лучше, чем один беспорядочный. Ключевое назначение интерфейсов — взаимодействие Интерфейсы существуют, чтобы люди могли взаимодействовать с нашим миром. Через интерфейс мы можем прояснить, проиллюстрировать, дать возможность, показать взаимосвязь, объединить людей или разделить, управлять ожиданиями и давать доступ к услугам. Процесс проектирования интерфейсов — это не Искусство. Интерфейсы — это не памятники самим себе. Интерфейсы выполняют конкретные задачи, их эффективность измерима. Однако, они могут выходить за рамки чисто практического применения. Лучшие интерфейсы — те, которые вдохновляют, пробуждают чувства, удивляют и усиливают наш опыт общения с миром. Удержать внимание любой ценой Мы живем в мире отвлекающих факторов. В наше время даже почитать спокойно не получится — кто-то или что-то всегда будет отвлекать нас, перетягивать наше внимание. Внимание — это большая ценность. Не нужно замусоривать боковую панель приложения отвлекающими картинками … помните о ключевом назначении интерфейса. Если человек читает, пусть сначала дочитает, а потом уж покажите свою рекламу (если это необходимо). Цените внимание — это не только порадует пользователей, но и повысит ваши результаты. Если ваша главная цель — чтобы приложением пользовались, то внимание — это необходимый ингредиент. Удерживайте его любой ценой. Дайте пользователям ощущение контроля Человек чувствует себя максимально комфортно, когда чувствует контроль над собой и своим окружением. Непродуманный софт лишает пользователей контроля: людям навязываются неожиданные взаимодействия, запутанные процессы и непредсказуемые результаты. Дайте пользователям ощущение контроля: регулярно информируйте их о состоянии системы, покажите причинноследственные связи (если сделать это, будет то) и подскажите, чего ожидать на каждом этапе. Не бойтесь повторять очевидные вещи … очевидность вообще относительное понятие. Прямое управление — лучший вариант Лучший интерфейс — это отсутствие интерфейса. Так мы управляем физическими объектами в реальном мире — напрямую. Но поскольку это не всегда возможно, а объекты заключают в себе все больше информации, мы создаем для взаимодействия с ними интерфейсы. Очень легко переборщить и добавить в интерфейс больше слоев, чем нужно: перегруженные кнопки, хром, графика, опции, предпочтения, окна, вложения и прочий хлам. В итоге пользователь вынужден управлять элементами интерфейса, вместо того, чтобы перейти к главному. Стремитесь к прямому управлению … спроектируйте максимально естественный интерфейс, словно его не касалась рука человека. В идеале интерфейс должен быть настолько незаметным, чтобы у пользователя сохранялось ощущение прямого управления объектом его внимания. Один экран — одно основное действие В основе каждого экрана нашего интерфейса должно лежать одно значимое для пользователя действие. Такой интерфейс проще изучать и использовать, а также его проще дополнить и расширить (при необходимости). Экраны, в которых заложено два или более основных действий, быстро сбивают с толку. Так же как в основе любой статьи должен лежать один сильный тезис, в основе любого экрана в нашем дизайне должно лежать одно сильное действие — смысл его существования. Пусть второстепенные действия выглядят как второстепенные Когда в основе экрана лежит одно основное действие, вы также можете добавить несколько второстепенных действий — но они должны выглядеть как второстепенные! Смысл существования вашей статьи не в том, чтобы люди могли поделиться ею в Твиттере… смысл в том, чтобы люди ее прочли и поняли. Пусть второстепенные действия выглядят второстепенными — уменьшите их визуальный вес или покажите после того, как основное действие достигнуто. Подскажите логичный следующий шаг Мало какие экраны изначально проектируются как финальные. Поэтому мы всегда должны четко продумывать следующий шаг. Предположите, каким должно быть следующее взаимодействие с интерфейсом — и спроектируйте этот сценарий. Будьте открыты к действиям пользователей. Не оставляйте их в невесомости, когда добьетесь нужных вам действий … подскажите пользователям следующий шаг, который поможет добиться их целей. Внешний вид соответствует поведению Людям комфортно, когда все происходит согласно ожиданиям. Когда окружающие (люди, животные, объекты, программы) ведут себя предсказуемо, между нами формируются хорошие взаимоотношения. В этом контексте элементы дизайна должны выглядеть соответственно их поведению. Сначала функция, потом форма. На практике это означает, что внешний вид элемента должен говорить о том, как он себя поведет при взаимодействии. Если элемент выглядит как кнопка, то и работать должен как кнопка. Не нужно мудрить с базовыми взаимодействиями … приберегите свою креативность для задач более высокого порядка. Вопрос согласованности В догонку к предыдущему принципу: элементы интерфейса не должны выглядеть согласованными, если их поведение не согласовано. А вот если элементы работают одинаково, то и выглядеть должны одинаково. Но не менее важно, чтобы разные по сути элементы и выглядели по-разному — в то время как похожие будут внешне согласованы. В погоне за тотальной согласованностью, многие новички теряют важные отличия элементов, применяя ко всем один и тот же визуальный прием. Сильная визуальная иерархия работает лучше всего Сильная визуальная иерархия — это когда пользователю понятно, в каком порядке следует рассматривать визуальные элементы на экране. Визуальная иерархия задает последовательность и плавно направляет взгляд пользователя с одного элемента интерфейса на другой. При слабой визуальной иерархии интерфейс выглядит перегруженным и непонятным — взгляд прыгает по экрану и всегда находится в напряжении. Сложно сохранить сильную визуальную иерархию, если интерфейс постоянно меняется: когда все выделено жирным, считайте что ничего не выделено. Как только в иерархической системе появляется новый элемент, дизайнеру приходится редактировать визуальные веса всех остальных элементов, чтобы снова добиться сильной иерархии. Большинство людей вообще не замечают визуальной иерархии, но она легко способна усилить (или ослабить) дизайн. Толковая организация снижает когнитивную нагрузку Как говорит Джон Маэда в своей книге Законы простоты, когда элементы на экране организованы с умом, то даже если их много, все выглядит очень лаконично. Организация элементов в дизайне — это иллюстрация их взаимосвязей. Благодаря этому люди смогут проще и быстрее понять ваш интерфейс. Группируйте похожие элементы, располагайте элементы в пространстве так, чтобы были понятны их связи. Когда контент правильно организован, снижается когнитивная нагрузка на пользователя: ему не нужно думать, как элементы связаны между собой, ведь вы все продумали за него. Не заставляйте пользователя думать — пусть дизайн говорит сам за себя. Используйте цвет для расстановки акцентов — но не как главную отличительную черту Цвета физических объектов могут меняться в зависимости от освещения. Дерево при дневном цвете и дерево на закате воспринимается совершенно по-разному. В реальном мире цвет — это совокупность множества оттенков, поэтому цвет в интерфейсе не должен играть определяющую роль. Он может помогать, подчеркивать, направлять внимание — но он не может быть единственной отличительной чертой объектов. Если вы знаете, что пользователь будет долго взаимодействовать с дизайном (например, читать) — используйте приглушенный фоновый цвет, а яркими оттенками расставляйте акценты. Конечно, иногда насыщенный фон тоже может быть уместным — только убедитесь, что это подходит вашей аудитории. Поэтапное раскрытие информации Показывайте на каждом экране только то, что нужно. Если человек должен сделать выбор, предоставьте достаточно информации для принятия решения, а подробности расскажите на следующих экранах. Не стоит пускаться в лишние подробности или стараться рассказать все и сразу. Если это возможно, перенесите момент принятия решения на один из последующих экранов. Так ваши взаимодействия станут более понятными. Органично встройте помощь в интерфейс В идеальном интерфейсе пользователю не требуется помощь — все и так понятно. Уровнем ниже — в реальности — помощь должна быть органично встроена в интерфейс: скрыта, когда все идет нормально, но легко доступна при необходимости. Если система не предлагает помощь автоматически, пользователю приходится самому искать ответ на свой вопрос — а для этого он должен понимать, что именно ему нужно найти. Просто встройте помощь там, где она может потребоваться … только убедитесь, что ваши подсказки не мешают опытным пользователям. Решающий момент: пустое состояние Первый опыт взаимодействия с интерфейсом очень важен, и все же дизайнеры часто упускают его из виду. Чтобы помочь пользователям быстро освоиться в дизайне, важно качественно спроектировать пустое состояние — состояние, когда ничего еще не произошло. Пустое состояние — это не просто пустой экран … на этом этапе важно направить пользователя, подсказать, как использовать дизайн максимально эффективно. Очень часто у пользователей бывают проблемы именно на этапе пустого состояния … зато если люди сразу понимают правила игры, их шансы на успех повышаются. Отличный дизайн невидим Любопытная черта отличного дизайна — пользователи обычно не замечают его. Одна из причин в том, что в контексте удачного дизайна пользователь может сосредоточиться на своих целях и забыть об интерфейсе … добившись своих целей, он просто уходит довольный. Для дизайнера это может быть сложным испытанием: чем лучше дизайн, тем меньше его замечают. Но вот что отличает отличных дизайнеров: им главное, чтобы интерфейс был удобным … а еще они знают, что счастливые пользователи обычно молчат. Примените в работе все направления дизайна Визуальный и графический дизайн, типографика, копирайтинг, информационная архитектура и визуализация … всё это составляющие дизайна интерфейсов. Вы можете владеть ими в совершенстве или просто знать основы. Не надо относиться к другим дисциплинам высокомерно или бороться за сферы влияния: просто берите из любой области то, что усилит вашу работу и поможет выйти на новый уровень. Даже если дисциплина на первый взгляд не имеет отношения к дизайну — какие-то принципы могут “выстрелить” … что полезного мы можем привнести в дизайн из издательского или переплётного дела, программирования или скейтбординга, карате или тушения пожаров? Интерфейсы существуют, чтобы ими пользовались Интерфейс можно считать успешным, когда люди им пользуются. Никому не нужен великолепный стул, если на нем невозможно сидеть. Поэтому проектирование удобного интерфейса можно сравнить с созданием удобного стула. Интерфейс должен не только льстить вашему дизайнерскому эго: им должны пользоваться!