Принципы разработки пользовательского интерфейса
Автор: Joshua Porter
Перевод: Шаяхметова Екатерина Дмитриевна
Автор: Joshua Porter
Перевод: Шаяхметова Екатерина Дмитриевна
"Разработка подразумевает нечто большее, чем просто сборку, упорядочивание и редактирование; это означает придание ценности и значимости, очерчивание, упрощение, прояснение, видоизменение, возвеличивание, сгущение красок, убеждение и, возможно, даже развлечение." - Paul Rand
Ясность является первой и наиболее важной задачей любого интерфейса. Для эффективного использования разработанного Вами интерфейса, люди должны быть в состоянии осознать, что это такое и для чего он будет использован, понять, с каким объектом он обеспечивает взаимодействие, иметь представление, представлять, что будет происходить при его использовании и в конце концов успешно его использовать. Ясность внушает доверие и приводит к дальнейшему использованию. Сотня понятных экранов предпочтительнее одного, но непонятного.
Интерфейсы существуют для обеспечения взаимодействия между людьми и нашим миром. Они помогают разъяснять и освещать, инициировать и демонстрировать взаимоотношения, объединять нас и разлучать, они управляют нашими ожиданиями и предоставляют доступ к функциям. Процедура разработки интерфейсов - это не искусство. Интерфейсы не являются чем то монументальным. Интерфейсы выполняют заданную им работу и эфективность этой работы может быть определена. Тем не менее, они не утилитарны. Лучшие интерфейсы способны вдохновлять, пробуждать, мистифицировать и усиливать наше взаимодействие с миром.
Мы живем в том мире, где нас постоянно отвлекают. В наше время сложно спокойно почитать, постоянно что то пытается нас прервать и переключить наше внимание на себя. Внимание - это богатство. Не следует перегружать боковые панеливаших приложений отвлекающими внимание элементами - не забывайте, первоначальный смысл существования экрана. Если кто-то читает – дайте ему дочитать до конца, прежде чем показывать рекламу (если это необходимо). Уважайте внимание и тогда не только ваши читатели станут счастливее, но и улучшатся ваши результаты. Когда главная цель – побудить к взаимодействию, внимание становится обязательным требованием. Удерживайте его любой ценой.
Люди ощущают себя наиболее комфортно, когда они чувствуют, что могут осуществлять контроль над собой и окружающей их средой. Написанное бездумно программное обеспечение этот комфорт у них отбирает, принуждая к каким то незапланированным мерам и вводя в замешательство своей запутанной навигацией. Дайте пользователю ощущение контроля, покажите ему состояние системы и опишите всевозможные результаты(если вы сделаете вот это, то произойдет следующее), а так же намекая, что произойдет во время следующего шага. Не бойтесь сообщать очевидные вещи… очевидное практически никогда таковым не является.
Наилучший вариант интерфейса - это его полное отсутствие, когда мы в состоянии непосредственно управлять физическими объектами в нашем мире. Так как это не всегда возможно, и объекты становятся все более информационным, мы создаем интерфейс, чтобы помочь нам легче взаимодействовать с ними. Легко добавить больше слоев, чем необходимо для интерфейса, создавая чрезмерно кованого кнопки, хром, графика, опции, настройки, окна вложений и другого хлама, так что мы в конечном итоге мы манипулируем уже элементами пользовательского интерфейса, а не тем, что действительно важно. Вместо этого, следует стремиться к изначальной цели прямого управления… к созданию интерфейса с наименьшим весом, кслонным к восприятию наибольшего количества простых человеческих жестов. Идиальный интерфейс настолько невесом и незрим, что у пользователя создается впечатление прямого взаимодействия с объектом его внимания.
Каждый из разрабатываемых нами экранов предназначен для одного единственного действия пользователя. Это позволяет легче учиться, упрощает в использовании, а также обслуживании и доработке когда это необходимо. Экран, включающий в себя более одного основного действия быстро вводит в замешательство. LКак статья нуждается в одном ключевом тезисе, также и каждый экран, создаваемый нами, должен служить одному ключевому действию, являющемуся его смыслом.
Экраны с одним первичным действием могут иметь несколько вторичных действий, но они должны оставаться вторичными! Причина, по которой существует ваша статья - это не материал, которым можно поделиться на Twitterе…она существует для того, что бы люди могли ее прочитать и понять. Держите второстепенные действия на втором плане, делая их менее заметными или демонстрируя после выполнения ключевой задачи.
Очень немногие действия должны выполняться в последнюю очередь, так что подумайте о пошаговом переходе пользователя от одного этапа к другому. Постарайтесь предвидеть следующий ход пользователя и поддержать его на стадии разработки. Именно это нам и нравится в человеческом общении – открытость для дальнейшего взаимодействия. Не оставляйте пользователей в подвешенном состоянии после того, как они выполнят необходимые вам действия… предоставьте им возможность сделать следующий шаг и продолжить взаимодействие для достижения своих целей.
Людям наиболее комфортно в окружении объектов, поведение которых они способны предсказать. Это другие люди, животные, объекты, программное обеспечение. Когда кто-то или что-то ведет себя в соответствии с нашими ожиданиями - мы испытываем к нему расположение. Для этого разработаные элементы должны внешне соответствовать своему поведению. Форма следует за функцией. На практике это означает, что кто-то должен быть в состоянии предсказать, как элемент интерфейса будет вести себя просто взглянув на него. Если он выглядит как кнопка, то он должна действовать как кнопка. Не играйте с базовым взаимодействием… приберегите свою фантазию для задач более высокого уровня.
В качестве дополнения к предыдущему принципу, экранные элементы не должны появляться согласованно, за исключением тех случаев, когда они предназначены для согласованных действий. Ведущие себя одинаково элементы должны при этом выглядеть одинаково. Данное утверждение верно и для выглядящих по-разному объектов, которые соответственно и ведут себя по-разному(не согласованно). Для обеспечения согласованности многие начинающие дизайнеры часто скрывают важные различия, используя однородный визуальный подход (и, нередко, повторяющийся код) в то время как визуальные различия вполне допустимы.
Сильная визуальная иерархия формируется, когда есть четкий порядок просмотра визуальных элементов на экране. То есть, когда пользователь просматривает одни и те же элементы в одном и том же порядке каждый раз. Слабая визуальная иерархия не дает глазам пользователя отдохнуть, создавая в конечном итоге ощущение громоздкости и запутанности. В быстро меняющемся окружении очень сложно обеспечить сильную визуальную иерархию по причине относительности зрительной нагрузки: когда весь текст выделен полужирным, в нем не выделено ни единого слова. Один единственный визуально тяжелый элемент, добавленный на экран, может полностью нарушить иерархию и заставить дизайнера пересмотреть вес каждого из объектов. Большинство людей не замечает визуальную иерархию, но она является одним из простейших способов усиления (или ослабления) дизайна.
Как сказал Джон Маэда в своей книге "Простота" - продуманная расстановка элементов на экране может заставить казаться большое - малым. Это поможет пользователю понять ваш интерфейс легче и быстрее, как вы уже показали в содержимом своего проекта. Группируя вместе похожие элементы, покажите естественные связи путем размещения и ориентации. Организовав свой контент с умом, вы снизите когнитивную нагрузку, оказываемую им на пользователя… которому не придется думать над тем, как соотносятся элементы интерфейса – ведь вы уже сделали это за него. Не вынуждайте пользователя размышлять над взаимосвязями… продемонстрируйте их ему на экране.
Цвета физических объектов меняются при изменении освещения. В ясный день мы видим дерево, сильно отличающееся от того, что предстает перед нами в свете заходящего солнца. Как и в физическом мире, где цвет является понятием относительным, в интерфейсе он также не должен быть чем-то определенным. Он может помогать, использоваться при выделении, для привлечения внимания, но не должен становиться единственной определяющей чертой. Для экранов предназначенных для долгого чтения или продолжительной работы используйте приглушенные фоновые тона, а более яркие приберегите для расстановки акцентов. Разумеется, временами для заднего фона нужны кричащие цвета, однако, убедитесь прежде, что такое настроение соответствует вашей аудитории.
Показывайте только то, что требуется на каждом из экранов. Если люди делают выбор, предоставьте им достаточно информации для принятия решения, а в тему углубляйтесь уже на следующем экране. Избегайте лишних объяснений и показа всего за раз. Когда это возможно, отложите принятие решений на другие экраны путем постепенного раскрытия информации по мере необходимости. Это позволит сохранить ваши взаимодействия более ясными.
В идиальном интерфейсе нет необходимости в подсказках, потому как такой интерфейс легок в использовании и обучении. На более низком уровне, в реальности, подсказки должны быть встроенными и контекстными, доступными лишь в определенном месте, в необходимый момент, скрытые от взоров на протяжении всего остального времени. Прося людей отправиться в раздел помощи и найти ответ на интересующий их вопрос там, вы взваливаете на них необходимость знать всё. Вместо этого встройте подсказки там, где это необходимо… только убедитесь, чтобы они не попадались на глаза тем, кто уже знает, как пользоваться вашим интерфейсом.
Впечатление от интерфейса при первой встрече имеет решающее значение, что часто ускользает от разработчиков Для того, чтобы помочь нашим пользователям максимально быстро освоиться с интерфейсом, разрабатывать дизайн нужно с учетом точки входа – момента, когда еще ничего не произошло. И точкой этой не должна быть пустая страница… она должна указывать направление движения, помогать в освоении. Большинство проблем взаимодействия возникает в контексте начала работы… Как только люди понимают правила они имеют гораздо более высокую вероятность успеха.
Любопытное свойство великолепного дизайна в том, что обычно он остается незамеченным людьми, которые используют его Одна из причин этого в том, что успешный дизайн позволяет пользователю полностью сосредоточиться на выполнении своей задачи… завершив ее выполнение, он чувствует себя удовлетворенным и не склонен рефлектировать. Для дизайнера это может быть тяжким испытанием… ведь мы получаем меньше отзывов, если проект удается. Но хорошие разработчики всегда довольны удобным дизайном… и знают, что счастливые пользователи часто молчат.
Визуальный и графический дизайн, типографика, копирайтинг, информационная архитектура и теория визуализации… все эти дисциплины являются частью дизайна интерфейсов. Их можно изучать поверхностно или специализироваться. Но не увлекайтесь отдельными из них и не упускайте из виду ни одной: берите из каждой ровно столько, сколько нужно для работы и двигайтесь вперед. Черпайте вдохновение в других дисциплинах, которые, как может показаться, не имеют никакого отношения к дизайну… что полезного мы можем почерпнуть из программирования, издательского, переплетного и пожарного дела, скейтбординга или карате?
Как и большинство других дизайнерских дисциплин, дизайн интерфейса является успешным, когда люди пользуются плодами ваших усилий. Как красивый стул, на котором невозможно сидеть, проект проваливается, если люди не хотят им пользоваться. Таким образом, дизайн интерфейсов может рассматриваться не только как создание среды взаимодействия, но и как разработка объекта использования. Самого интерфейса недостаточно для удовлетворения Эго дизайнера – им должны пользоваться!
Источник (англ.): Principles of User Interface Design