Как упростить ваш дизайн

Что такое «простота»?

Мы можем определить простоту как то, что легко понять и сделать. Но это довольно субъективное понятие, ведь вещи, которые кажутся простыми одному, могут быть сложными для другого. Как правило, мы оцениваем любой процесс в три этапа:

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

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

А что насчет сложности?

Раз уж мы говорим о простоте, нужно упомянуть и о противоположном понятии — сложности. Оно также является субъективным, ведь при соответствующей подготовке даже ракетостроение не покажется вам сложным. Но есть несколько факторов, которые могут усложнить самые простые задачи. Их нужно избегать при работе над любым проектом:

Как применить это к дизайну продукта?

Определите основную ценность продукта

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

Удалите все лишнее

Самый легкий способ достичь простоты — разумно сократить то, что уже есть. Если в чем-то сомневаетесь, просто удалите это. Второстепенная информация, элементы управления, которые почти не используют, отвлекающие стили. Всё просто. Как только вы начнете применять этот принцип, сразу увидите результаты. Но будьте осторожны с тем, что удаляете.

Сделайте информацию наглядной

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

Помогите принять решение быстро

Когда перед пользователем слишком много возможностей, ему требуется больше времени для принятия решения. Это можно объяснить Законом Хика: время и усилия, необходимые для принятия решения, увеличиваются вместе с количеством вариантов. Если вы хотите, чтобы пользовательский опыт был простым и приятным, помогите сделать это быстро. Избавьте людей от необходимости выбирать, когда это не нужно, направляйте и поддерживайте их.

Слишком большой выбор отпугнет покупателей

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

Этот эксперимент доказывает, что люди, которым предоставили меньше альтернатив, имеют в 10 раз больше шансов совершить покупку, чем те, у кого есть богатый выбор. Фактически богатый выбор препятствует покупке.

Показывайте несколько рекомендаций

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

Обращайте внимание пользователей на нужные области

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

Используйте цвет и типографику для иерархии

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

Организуйте элементы

Давайте проведем небольшой тест. На картинке ниже у нас есть 2 квадрата. Возьмите секундомер и узнайте, сколько времени (и усилий) вам потребуется, чтобы посчитать количество черных точек в каждом из них.

Готово? Как видите, подсчет неорганизованных точек занимает значительно больше времени и вдобавок увеличивает когнитивную нагрузку. Почему мы получили такой результат, если в каждом квадрате точек поровну?

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

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

Группируйте контент

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

Разбивайте большие формы и используйте одну колонку

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

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

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

Сообщайте статус системы

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

Делайте расчеты для пользователей

Человеческий мозг не очень хорош в арифметике, особенно когда речь идет о большом объеме информации. Мы лучше распознаем отдельные объекты, чем производим подсчеты. Поэтому делайте все необходимые математические операции за пользователя.

Используйте поэтапное раскрытие

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

Поэтапное раскрытие подразумевает переход от абстрактного к конкретному и включает в себя последовательные шаги пользователя. Хороший пример поэтапного раскрытия — навигация по типу матрешки в iOS.

Положитесь на общепринятые паттерны и взаимодействия

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

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

Оптимизируйте первый опыт

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

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

Подумайте об эргономике и обстоятельствах, при которых ваш продукт будут использовать

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

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

Используйте встроенное редактирование и автозаполнение

Удалите все ненужные взаимодействия на каждом этапе процесса. Существует оптимальная скорость, с которой пользователь управляет системой — она называется «состоянием потока». Не прерывайте этот поток всплывающими окнами. Используйте автозаполнение и встроенное редактирование там, где это возможно.

Используйте Smart Defaults

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

Надо сказать, что это становится возможным только при глубоких исследованиях и тестировании: вы учитесь у своих пользователей и корректируете настройки по умолчанию на основе предыдущих ответов и моделей поведения. Всегда следует устанавливать Smart Defaults, которые выберет подавляющее большинство — скажем, 90 — 95%.

Предотвратите ошибки

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

Помните про доступный дизайн

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

Просто заключение

Создавать простые в использовании продукты совсем непросто, но это и есть самый короткий путь к простоте.