Универсальные принципы дизайна: 125 способов улучшить юзабилити продукта, повлиять на его восприятие потребителем, выбрать верное дизайнерское решение и повысить эффективность

Предисловие

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

Несколько лет я была поклонницей канала HGTV и пересмотрела уйму передач про то, как строить, покупать или обновлять дом, и ни разу не увидела человека, которому бы нравились низкие потолки, комнаты с маленькими окнами или невыразительный вид из окна. Авторы книги объясняют дизайнеру причины, по которым людям нравятся высокие потолки (см. Эффект собора) и большие окна, из которых открывается прекрасный вид (см. Эффект биофилии). Кто бы мог подумать, что высокие потолки способствуют творческой активности, а образы природы дарят ощущение благополучия?

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

Эта книга научила меня лучше понимать человеческую роль в дизайне. Дизайн — это не только то, что мы видим, это больше того, что лежит на поверхности. Мотивация человека таинственна и скрывается на подсознательном уровне, наравне с инстинктами и ощущениями. «Универсальные принципы дизайна» обнажают силы, движущие мотивацией, и позволяют дизайнеру понять природу интуитивных процессов. Эти принципы не из области гипотез. Они реальны, они основаны на серьезных исследованиях и действительно работают.

Кимберли Элам,

профессор кафедры графического дизайна

Института искусств и дизайна Флориды (США)

Введение

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

К сожалению, это неизбежно, поскольку о многом теперь можно прочитать или услышать, если просто отслеживать новинки в различных сферах разработки. Еще недавно удобный доступ к междисциплинарным знаниям по проектированию был невозможен. Интересовавшемуся другими областями знания дизайнеру приходилось перечитывать ворох книг по самым разнообразным дисциплинам. Основная проблема заключалась в том, чтобы определить, каким именно источникам стоит отдать предпочтение, а ведь еще приходилось разбираться в специальной терминологии, много времени тратилось на то, чтобы вникнуть в детали. Все это требовало немалых усилий, поэтому исследования редко выходили за рамки краткого экскурса в незнакомую область знаний и зачастую ограничивались изучением конкретной проблемы. Цель книги «Универсальные принципы дизайна» — помочь дизайнерам избежать этих сложностей и свести к минимуму усилия, необходимые для постижения ключевых принципов проектирования, общих для большинства дисциплин. Приведенные в книге понятия, те самые «принципы», — это законы, рекомендации, человеческие предпочтения и универсальные подходы к проектированию. Принципы были отобраны из множества смежных с дизайном дисциплин в соответствии с несколькими факторами: полезностью, частотностью неправильного применения и доказанной эффективностью принципа. Не нужно думать, что таких принципов всего 125 (по числу предложенных в настоящем издании статей) — в действительности их значительно больше. В книге принципы расположены в алфавитном порядке (в соответствии с англоязычной терминологией. — Примеч. ред.), чтобы их было проще найти по названию. Обратившись к содержанию по категориям, где принципы объединены как способы решения часто возникающих проблем, читатель сможет найти выход из конкретной ситуации.

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

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

Лучшие дизайнеры подчас пренебрегают принципами дизайна. Однако нарушение правил они зачастую компенсируют другими достоинствами. Если только дизайнер не уверен твердо, что его разработки хороши, желательно все же соблюдать принципы.

Уильям Лидвелл

Критина Холден

Джилл Батлер

Правило 80/20

(80/20 Rule)

Высокий процент результатов в любой крупной системе зависит от низкого процента переменных¹.

Правило 80/20 гласит, что примерно 80% результатов, которые дает крупная система, вызваны 20% переменных этой системы. Правилу 80/20 подчинены все крупные системы, включая экономику, управление, пользовательский интерфейс, контроль качества и технику, — это лишь некоторые из них. Важнее даже не конкретные проценты, а попадание в диапазон от 10 до 30%. Универсальность правила 80/20 предполагает его привязку к системам, которые подчиняются нормальному распределению; оно неприменимо к системам с переменными, на которые оказывают влияние множество незначительных, не связанных с этими переменными факторов, например к системам, использующимся разными способами большим количеством людей. Ниже приведены несколько вариаций правила 80/20²:

80% полезных свойств продукта зависят от 20% его характеристик;

80% движения транспорта приходится на 20% дорог в городе;

80% выручки компании поступают от продажи 20% ее продуктов;

80% инноваций исходят от 20% людей;

80% нововведений обусловлены 20% приложенных усилий;

80% поломок вызваны 20% деталей.

Правило 80/20 полезно для планирования распределения ресурсов и, следовательно, для повышения эффективности проекта. Так, если на ключевые 20% характеристик продукта затрачиваются 80% времени, основные ресурсы следует сфокусировать именно на этих характеристиках. Далее стоит оценить оставшиеся 80% характеристик, чтобы определить их значимость для проекта. Аналогично, если модернизация системы увеличивает ее эффективность, то, сосредоточив внимание на незначительных факторах, не входящих в критические 20%, вы повысите расходы и таким образом снизите доходы. Все улучшения системы, выходящие за рамки этих 20%, будут снижать прибыль, поскольку часть средств затратится на корректировку ошибок или новых проблем, которые возникнут в системе. Не все элементы проектирования равноценны.

Учитывайте правило 80/20, чтобы разобраться со значимостью элементов, точно определить области модернизации и оптимизации и сфокусировать ресурсы самым эффективным способом. Несущественные функции, которые являются частью маловажных функций, входящих в 80%, следует минимизировать или вовсе устранить. Если время и ресурсы ограниченны, воздержитесь от выходящих за рамки критических 20% корректировки и оптимизации, поскольку эти усилия приведут к снижению доходов.

См. также Затраты–выгода, Форма следует за функцией, Яркостное выделение, Предельно продвинутое, но приемлемое, Нормальное распределение.

Графические пользовательские интерфейсы «прячут» большинство своих функций в выпадающем меню (нижнее изображение). Это облегчает вид экрана, зато усложняет доступ к часто используемым функциям. Чтобы решить проблему, следует выделить 20% важных функций и сделать их быстродоступными на панели инструментов (верхнее изображение).

¹ Это правило известно также как закон Парето, принцип Юрана и принцип «немногого, имеющего решающее значение».

² Правило 80/20 было выведено Вильфредо Парето, итальянским экономистом, обнаружившим, что 20% итальянцев владеют 80% материальных ценностей. Основная работа по теме: Joseph M. Juran (ed.). Quality Control Handbook, McGraw-Hill, 1951.

Доступность

(Accessibility)

Объекты и среды следует разрабатывать таким образом, чтобы максимальное количество людей могли использовать их без модификации³.

Принцип доступности предполагает, что без специальной адаптации или модификации разработка будет полезна людям с разным уровнем подготовки. Под доступностью дизайна понимают возможность его использования людьми с ограниченными физическими возможностями. По мере накопления опыта в сфере доступного дизайна становится очевидным, что чаще всего используемые устройства следует разрабатывать так, чтобы они были удобными для любого человека. Доступной разработке свойственны: заметность, удобство использования, простота и предупредительность⁴.

Заметность разработки подразумевает, что каждый сможет воспринять ее вне зависимости от личной способности к восприятию. Основные ориентиры: представление информации методами избыточного кодирования (текстовым, изобразительным, тактильным); совместимость с поддерживающими сенсорными технологиями (тег ALT для изображений в интернете); расположение информации и элементов управления таким образом, чтобы их могли воспринимать и сидящие и стоящие пользователи.

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

Простота разработки подразумевает, что каждый может легко понять и использовать разработку вне зависимости от опыта, уровня грамотности и способности концентрировать внимание. Основные ориентиры: избегайте неоправданной сложности, четко и недвусмысленно кодируйте или снабжайте надписями элементы управления и обозначайте режимы работы; используйте современные способы предоставления доступа к информации и элементам управления; давайте подсказки и обеспечивайте обратную связь на каждом этапе взаимодействия; убедитесь, что текст доступен для пользователей с разным уровнем грамотности.

Предупредительность дизайна подразумевает, что в разработке сведены к минимуму возможность появления ошибки и ее последствия. Основные ориентиры: аффорданс и ограничительные условия (например, элементы управления, которые можно использовать только правильно); подтверждения и предупреждения, чтобы снизить вероятность ошибки; реверсивные действия и подстраховка для минимизации последствий ошибок (например, возможность аннулировать выполненное действие и вернуться к предшествующему состоянию).

См. также Аффорданс, Предупредительность, Разборчивость, Нормальное распределение, Удобочитаемость.

Большой лифт удобнее для всех, чем небольшой: в широкие двери легче входить; благодаря перилам пассажир меньше устает стоять; две панели управления легкодоступны из сидячего положения; кнопки снабжены дополнительными номерами этажей, символами и шрифтом Брайля; существуют визуальная и акустическая обратная, а также аварийная телефонная связь.

³ Принцип также известен под названием «без барьеров», связан с понятием универсального и инклюзивного дизайна.

⁴ Источники: W3C Web Content Accessibility Guidelines 1.0 (1999); ADA Accessibility Guidelines for Buildings and Facilities (1998); Ronald L. Mace, Graeme J. Hardie & Jaine P. Place. Accessible Environments: Toward Universal Design, Center for Universal Design, North Carolina State University, 1996.

Предварительный органайзер

(Advance Organizer)

Учебная методика, помогающая людям усвоить новую информацию на основе имеющихся у них знаний.

Предварительные органайзеры — это сжатые блоки информации (звуковой, текстовой или графической), так называемые чанки, которые облегчают изучение и понимание нового материала на ранней стадии ознакомления с ним. В отличие от обзоров и резюме предварительные органайзеры подаются в более абстрактной форме, характеризуя предмет в целом, без подробностей. Применение методики зависит от способа обучения: она подходит для линейных презентаций (например, традиционной лекции), но плохо работает при нелинейном, исследовательском обучении (например, обучении в игровой форме)⁵.

Существуют два типа предварительных органайзеров: поясняющие и сравнительные. Решение, какой из них выбрать, зависит от степени новизны информации для обучаемого. Поясняющие предварительные органайзеры рекомендованы в тех случаях, когда аудитория или мало знакома, или вовсе не знакома с представляемой информацией. Так, перед тем как подробно рассказать об управлении вилочным погрузчиком (при дополнительном условии, что учащиеся ничего о нем не знают), поясняющий предварительный органайзер кратко описывает оборудование и принцип его работы⁶.

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

Эффективность методики сложно проверить, но она, бесспорно, приносит свои плоды. Используйте поясняющие предварительные органайзеры в процессе ступенчатого обучения. При раскрытии новой информации, перекликающейся с той, которая уже известна аудитории, используйте сравнительные предварительные органайзеры⁷.

См. также Перевернутая пирамида, Розеттский камень, Система навигации.

Это поясняющий предварительный органайзер для предварительных органайзеров. Он на абстрактном уровне показывает, что предварительные органайзеры представляют собой учебную стратегию (как чанкинг, перевернутая пирамида и сторителлинг) и что они бывают двух видов.

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

Сравнительный предварительный органайзер использует знания o модели вилочного погрузчика 1300A для знакомства с моделью 2300A.

⁵ Основные работы по теме: Holt Reinhart. The Psychology of Meaningful Verbal Learning, Grune and Stratton, 1963; David P. Ausubel. Educational Psychology: A Cognitive View (2nd ed.), 1978. См. также: David P. Ausubel. In Defense of Advanced Organizers: A Reply to the Critics // Review of Educational Research, vol. 48 (2), p. 251–257.

⁶ В обзоре или резюме представлены только ключевые моменты управления вилочным погрузчиком.

⁷ См., например: Richard E. Mayer. Twenty Years of Research on Advance Organizers: Assimilation Theory is Still the Best Predictor of Effects? // Instructional Science, 1979, vol. 8, p. 133–167.

Эффект «эстетика–юзабилити»

(Aesthetic-Usability Effect)

Привлекательные с точки зрения эстетики разработки кажутся проще в использовании, чем непривлекательные⁸.

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

Внешне привлекательные предметы на вид кажутся более простыми в использовании, и поэтому вероятность, что их правда будут использовать, возрастает, вне зависимости от того, действительно ли они так удобны. Более практичные, но внешне менее привлекательные разработки публика встречает не так тепло, как красиво оформленные; это противоречит общепринятому мнению, что на первое место потребитель ставит именно юзабилити. Как ни странно, но в дальнейшем на уже сложившееся отношение довольно сложно повлиять. Так, опросив владельцев компьютеров, исследователи установили, что при совершении покупки первые впечатления от компьютера оказались для них гораздо важнее требований к его качеству и практичности. Аналогичный феномен наблюдается в повседневной жизни: первое впечатление, которое человек производит на окружающих, влияет на отношение к нему и в известной мере на то, как его принимают и как с ним обращаются¹⁰.

Эстетичность серьезно влияет на наше отношение к продукту. Красиво оформленные товары чаще всего формируют позитивное отношение потребителей и, кроме того, делают людей толерантными к проблемам, которые могут возникнуть при их использовании. «Симпатичным» предметам люди очень часто дают имена и испытывают к ним добрые чувства, но крайне редко люди поступают так с внешне неприятными, отталкивающими предметами. Личностное отношение к разработке провоцирует привязанность, лояльность и уважение — важные факторы долговечного ее использования и общего успеха. Позитивное отношение вызывает эффективное взаимодействие человека с вашей разработкой, оно активизирует его творческое мышление и определяет способность решать возникающие порой проблемы. В результате отрицательного отношения формируется взаимодействие, которое сужает мышление и подавляет творческий порыв. Это особенно справедливо для стрессовых сред, поскольку стресс увеличивает усталость и снижает способность мыслить¹¹.

Всегда стремитесь создавать внешне привлекательные продукты. Они кажутся более простыми в использовании, приятный внешний вид формирует положительное отношение к продукту, делает человека толерантным к возможным недостаткам разработки.

См. также Предвзятость в отношении привлекательности, Предвзятость в отношении контура, Форма следует за функцией, Золотое отношение, Закон прегнантности, «Бритва Оккама», Правило третей.

Компания Nokia одной из первых поняла: чтобы ее продукция получила широкое распространение, мобильные телефоны должны выполнять не только свою главную функцию — обеспечивать связь. Мобильный телефон приходится часто подзаряжать, носить с собой, сигнал иногда пропадает, порой возникают помехи — не такое уж это и бесхлопотное устройство. Акцент на эстетичности (изменение цвета корпуса и возможность смены мелодии звонка) сделал использование телефона приятнее. В результате потребитель относится к существующим проблемам толерантно, а само устройство становится все более востребованным.

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

⁸ Авторы используют термин «эффект эстетика–юзабилити» для удобства. Этот термин не употребляется в основных работах и последующих научных исследованиях.

⁹ Основная работа по теме: Masaaki Kurosu and Kaori Kashimura. Apparent Usability vs. Inherent Usability: Experimental Analysis on the Determinants of the Apparent Usability, CHI ’95 Conference Companion, 1995, p. 292–293.

¹⁰ Solomon E. Asch. Forming Impressions of Personality // Journal of Abnormal and Social Psychology, 1946, vol. 41, p. 258–290.

¹¹ Donald Norman. Emotion & Design: Attractive Things Work Better, 2002, www.jnd.org.

Аффорданс

(Affordance)

Свойство объекта, благодаря которому его физические характеристики или среды влияют на его функции.

Одни объекты и среды больше подходят для выполнения определенных функций, чем другие. Для движения круглые колеса подходят больше, чем квадратные, поэтому говорят: круглые колеса обладают аффордансом для вращения. Для подъема лестницы лучше подходят, чем заборы, поэтому говорят: лестницы обладают аффордансом для восхождения. Это вовсе не означает, что квадратные колеса не могут катиться, а по забору нельзя изящно подняться, просто физические характеристики круглых колес и лестниц больше соответствуют функции вращения/восхождения¹².

Способность объекта выполнять определенную функцию благодаря своим физическим характеристикам называется аффордансом. Если аффорданс объекта соответствует выполняемой им функции, то данный объект (разработка) будет эффективным и удобным в использовании. И наоборот, если аффорданс объекта не соответствует своей функции, дизайн оказывается неэффективным и неудобным в использовании.

Например, дверь с ручкой легко открыть, потянув за ручку. Однако иногда с ручкой делают и те двери, которые открываются «от себя», — то есть физические характеристики двери (наличие ручки) не соответствуют ее функции (за ручку необходимо тянуть, а не толкать, — аффорданс ручки противоречит ее назначению). Замените ручку плоской пластиной, и дверь перестанут дергать «на себя» — аффорданс плоской пластины соответствует способу открывания двери. Разработка улучшена.

Копирование физических объектов и сред может облегчить использование разработки. Например, вид трехмерной кнопки на мониторе компьютера наводит на мысль о физических характеристиках кнопок, и мы понимаем, что виртуальную кнопку тоже следует нажимать. Популярную метафору используют в компьютерных операционных системах: изображение столь привычного предмета, как «корзина», для удаленных файлов и папок наводит на мысль о назначении ее прототипа из реальной жизни, и мы понимаем ее функции в программной среде¹³.

Разрабатывайте, если возможно, объекты и среды таким образом, чтобы они сами «говорили» пользователю о своих функциях и не допускали неправильное использование. Например, пригодные для складывания один на другой стулья следует проектировать так, чтобы их можно было штабелировать единственным способом. Воспроизводите знакомые объекты и среды в абстрактном контексте (в интерфейсе программ), чтобы они сами подсказывали способ взаимодействия с новыми системами. Когда физические характеристики элемента разработки соответствуют своей функции (то есть при проектировании был соблюден принцип аффорданса), у потребителя не возникает даже мысли o другом, неправильном ее использовании.

См. также Ограничительное условие, Линия влечения, Установление соответствий, Надж.

Системы уличного освещения обычно сконструированы так, что птицы рассаживаются на них как на нашесте. Здесь изображено приспособление, сами физические характеристики которого помешают птицам устроиться на фонаре и пачкать улицу.

Физические характеристики дверей часто противоречат их функции. Табличка вступает в противоречие с внешним видом двери, снабженной ручкой, которая так и приглашает потянуть за нее. Если заменить ручку на плоскую пластину, табличка окажется ненужной, поскольку станет ясно: чтобы войти, дверь необходимо толкнуть.

Детали Lego сделаны по принципу «мама–папа», поэтому их легко собирать без всякой подсказки.

Утварь OXO известна дизайном ручек, удачно сочетающим форму, цвет и текстуру. В результате потребители четко понимают, что брать данный предмет надо за ручку.

Платформа и изогнутый руль сигвея предполагают всего одно положение пользователя — правильное.

¹² Основная работа по теме: R.E. Shaw and J. Bransford. Perceiving, Acting, and Knowing // The Theory of Affordances Lawrence Erlbaum Associates, 1977; James Gibson, Houghton Mifflin. The Ecological Approach to Visual Perception, 1979. Популярная трактовка принципа аффорданса: Д. Норман. Дизайн привычных вещей. М.: Манн, Иванов и Фербер, 2018.

¹³ Следует отметить, что термин «аффорданс» относится только к физическим объектам и средам. То есть к случаю с изображениями физических объектов или сред (например, с изображением кнопки) этот принцип неприменим, поскольку сами изображения невозможно использовать как материальный объект. Физические характеристики кнопки существуют только в воображении пользователя, который помнит, как он работал с осязаемыми кнопками, — это не свойство изображения, а свойство материального объекта. Поэтому аффордансом считается то, что осязаемо. См., например: Donald Norman. Affordances and Design www.jnd.org.

Выравнивание

(Alignment)

Расположение краев объектов по краю или по верху общего ряда (столбца) или размещение самих объектов по общему центру.

Элементы объекта следует выравнивать относительно прочих элементов. Таким образом создается ощущение единства и связности, приводящее к стабильности и гармоничному восприятию. Выравнивание также может помочь зрителю понять саму идею дизайна. Ряды и колонки сетки или таблицы связывают элементы, представленные в этих рядах и