Что отличает хороший дизайн
Как отличить хороший дизайн от плохого
Director of Brand & Digital CX Department в Райффайзенбанк, ex-Design Director в Mail.Ru, эксперт курса «Профессия UX/UI-дизайнер»
Руководство для дизайнеров и заказчиков (менеджеров, бизнесменов, клиентов, программистов и всех сочувствующих), как сделать действительно хороший интерфейс и избежать ненужных правок.
Когда я работал дизайнером, я постоянно слышал от своих коллег жалобы на правки. Наверняка и вы замечали, какая это популярная тема для разговора. В любом деле исполнители жалуются на заказчиков, а заказчики не понимают исполнителей. А если говорить о дизайне, то тут пропасть между двумя мирами еще больше. Шутки из разряда «поиграй со шрифтами» и «передвинь иконку на один пиксель» уже давно перестали быть смешными.
С одной стороны — дизайнеры, которые уверены, что знают, как лучше.
С другой стороны — заказчики, которым нужен результат, а не красивые картинки. Как вы думаете, кто прав в этом споре? На самом деле, прав всегда пользователь.
Если ваша задача — сделать действительно хороший интерфейс, попробуйте проанализировать ваш дизайн по пяти пользовательским критериям.
5 критериев хорошего дизайна
Профессия
«UX/UI-дизайнер
с нуля до PRO»
Создавайте пользовательский опыт мирового уровня
Юрий Ветров рассказал, по каким критериям надо оценивать дизайн
1. Обучаемость
Насколько легко человек решает свою задачу в интерфейсе? Если вы делаете сложный сервис для профессионалов, то не лишним будет дать пользователю подсказки. Если же вы работаете над каким-то простым сервисом, то не нужно усложнять пользователю жизнь обучением, дайте ему максимально простой и интуитивно понятный путь к целевому действию – покупке или заказу услуги.
2. Эффективность
Насколько быстро человек решает достаточно типовую задачу? Это можно легко понять на примере кассового оборудования: если кассир тратит одну минуту на обслуживание клиента из-за определенного набора действий, то просто сократив это время на пятнадцать секунд мы принесем большую прибыль магазину.
3. Запоминаемость
Насколько человек легко возвращается к интерфейсу и понимает его после перерыва? Если пользователь уехал в отпуск и после возвращения не может вспомнить, как пользоваться рабочей программой, – это плохой интерфейс
4. Предотвращение ошибок
Насколько хорошо система помогает человеку избежать ошибок? Простой пример: пользователь неправильно вводит запрос в поиске, а интерфейс его поправляет. Или если человеку нужно ввести дату рождения, мы можем запретить вводить некорректные значения. Можете разложить этот пункт на три шага: первый — подсказать, в чем проблема и где нужно исправить, второй — не дать совершить ошибку, третий — если ошибка произошла, то нужно помочь ее исправить.Насколько человек легко возвращается к интерфейсу и понимает его после перерыва? Если пользователь уехал в отпуск и после возвращения не может вспомнить, как пользоваться рабочей программой, – это плохой интерфейс
5. Удовлетворенность
Насколько хорошо вы проработали визуальную составляющую интерфейса? Если все четыре критерия объединить с эстетически приятным визуальным дизайном, сделать понятные сообщения об ошибках и подсказки и поработать над тональностью коммуникации, мы сможем повысить удовлетворенность пользователя от использования нашего интерфейса.
Вы не сможете сразу прокачать все пять параметров вашего интерфейса. Поэтому вам нужно расставить приоритеты: выяснить, что наиболее важно для пользователей в вашем интерфейсе, и сделать на этом упор. А потом, в процессе эксплуатации, дорабатывать все второстепенные факторы.
Почему возникают правки?
Я прекрасно понимаю, какие чувства вы испытываете, когда получаете задачу. Когда я работал дизайнером, любая задача, попавшая ко мне в руки, вызывала прилив вдохновения. Мне хотелось немедленно сесть и нарисовать то, что, как мне казалось, идеально подойдет заказчику.
И я не жалел времени и сил на создание действительно красивых сайтов, приложений, баннеров. Но когда я отправлял макет клиенту, я получал в ответ набор бессвязных и бессмысленных комментариев. Все это ужасно убивало мотивацию, и конечно, в итоге после всех итераций мне бывало стыдно показывать кому-либо получившийся макет.
Почему так получалось? Потому что во всем этом есть глобальная ошибка – я моментально садился и рисовал что-то. Представьте аналогию: вы хотите построить загородный дом, даете задачу архитектору. И он моментально показывает вам готовый, построенный дом. Конечно, вы не сможете принять его работу, он не согласовал с вами макет этого дома, не объяснил, почему он будет именно такой, не показал функциональность своего решения.
Для того, чтобы принять вашу работу, любому человеку нужно понимать, почему она получилась именно такой. Вашу работу должны принять еще до того, как вы сядете рисовать финальный макет или прототип. Понимаете, вы должны открывать фотошоп или скетч в самый последний момент, когда работа по факту уже принята.
Как избежать правок
В этой статье мы поговорили о критериях хорошего дизайна. Это поможет вам чувствовать себя уверенно, когда нужно объяснить заказчику то или иное решение. Но для того, чтобы навсегда забыть о бесполезных правках, вам нужно правильно выстроить процесс работы над задачами, наладить взаимодействие с исследовательским отделом, продуктовой командой и заказчиком (лицом, принимающим вашу работу). Кроме этого, нужно уметь аргументированно доказывать свою точку зрения коллегам и заказчикам.
Всему этому мы хотим вас научить на программе «Дизайнер интерфейсов». Сначала вы получите теоретическую базу, которая поможет объединить все, что вы знали об интерфейсах. А потом вы по шагам пройдете путь дизайнера интерфейсов: от принятия задачи до создания и тестирования прототипа. В итоге вы сможете пополнить свое портфолио собственным интерфейсом.
При разработке программы мы ориентировались на процесс работы над интерфейсами в крупных продуктовых командах. Ваши преподаватели – это ведущие специалисты из Mail.Ru Group, «Одноклассников», Notamedia, «Вконтакте» и Redmadrobot. Они помогут вам систематизировать ваши знания, научат отличать хороший дизайн от плохого, в итоге вы сможете уверенно принимать решения и аргументированно отстаивать свою точку зрения в команде и перед заказчиком.
UX/UI-дизайнер с нуля до PRO
Научитесь создавать пользовательские интерфейсы
с нуля за 15 месяцев
6 шагов: Как отличить хороший дизайн от плохого
Вот что отделяет хороших дизайнеров от великих. Хорошие дизайнеры полагаются на свои технические навыки и основывают свой дизайн на принципах, но великие дизайнеры привносят в уравнение что-то свое.
Всегда ли качество дизайна зависит от субъективного мнения человека, который его оценивает? Дизайнер Хосе Торре объяснил, какие свойства выделяют действительно хороший дизайн.
В моем первом посте на Medium читательница задала вопрос, который очень заинтересовал меня. Она сказала, что дизайн субъективен, и поинтересовалась, возможно ли составить список принципов, которые могут определять хороший дизайн.
Этот вопрос делится на две части. Одна из них — утверждение, что дизайн субъективен. Я не думаю, что это справедливое замечание, но я понимаю, откуда оно пошло. Люди иногда смешивают дизайн и искусство, и свойства одного из них переходят к другому.
Искусство субъективно — это игра без правил. В дизайне все не так, и в нем существуют свои законы. Соблюдаются они или нет, они есть, что значит, что дизайн не субъективен. Однако, честно говоря, я не могу сказать, что он объективен на 100%, всегда существуют вещи, которые зависят от ваших предпочтений, которые определяются опытом и культурой.
Этот небольшой процент субъективности не значит, что вы не можете отличить хороший дизайн от плохого, это значит, что вы можете назвать хороший дизайн уродливым или, наоборот, посчитать плохой дизайн красивым. Давайте рассмотрим пример.
Я думаю, все согласятся, что это красивый предмет, но хороший ли это дизайн?
» data-medium-file=»https://i2.wp.com/apptractor.ru/wp-content/uploads/2017/08/1-D3qFMUOe_WSakAGhhAjePQ.gif?fit=300%2C153&ssl=1″ data-large-file=»https://i2.wp.com/apptractor.ru/wp-content/uploads/2017/08/1-D3qFMUOe_WSakAGhhAjePQ.gif?fit=500%2C255&ssl=1″ svg+xml,%3Csvg%20xmlns=’http://www.w3.org/2000/svg’%20viewBox=’0%200%20500%20255’%3E%3C/svg%3E» alt=»6 шагов: Как отличить хороший дизайн от плохого» width=»500″ height=»255″ data-recalc-dims=»1″ data-lazy-src=»https://i2.wp.com/apptractor.ru/wp-content/uploads/2017/08/1-D3qFMUOe_WSakAGhhAjePQ.gif?resize=500%2C255&ssl=1″ />
Он имеет столько функциональных проблем, что я даже не буду их здесь указывать (просто почитайте отзывы на Amazon), но вкратце можно сказать, что он не может хорошо выполнять свою единственную работу — выжимать сок.
Вам нужно уметь смотреть не на внешний вид, и чтобы помочь с этим, я составил список из шести пунктов. Существует много нюансов, каждый из которых я попытался объяснить.
1. Дизайн эффективен?
Потребность в дизайне вызвана проблемой, которую нужно решить. Это может быть сайт, которому необходима простота использования, продукт, которому нужно привлечь определенную аудиторию, или новый бизнес, которому нужен логотип.
Это первое свойство для определения хорошего дизайна. Если он не решает проблему, вы можете не продолжать — дизайн точно плох. Неважно, насколько хорошо он выглядит, если он не выполняет главную цель своего существования.
Я думаю, что это одна из главных причин, по которой многих дизайнеров так раздражают клиенты и начальники. Дизайнеры иногда пытаются создать что-то крутое для своего портфолио, не понимая проблему полностью. Они забывают, что работают для клиентов, а не для себя, и должны ориентироваться на наши потребности.
Чтобы ваш дизайн был эффективным, необходимо понять вашего клиента или пользователя и проявить эмпатию. Перед началом работы задавайте вопрос “Зачем?”, пока не доберетесь до истинной цели дизайна. Иногда клиент может считать, что ему нужна одна вещь, но после нескольких вопросов вы поймете, что ему нужно что-то совсем другое. Это единственный способ проверить, что вы решаете верную проблему.
2. Задает ли он верный тон?
Чтобы понять это, сначала вам нужно понять бренд и его аудиторию.
Бренд
Термин “бренд” обычно ассоциируется с бизнесом, но он этим не ограничивается. У многих вещей может быть бренд, даже у вас. Ваш бренд — это то, как люди вас воспринимают, то же самое относится к компаниям и всему остальному. Хороший дизайн помогает компании контролировать свой бренд и формировать мнение публики о себе.
Аудитория
У компании обычно есть своя целевая аудитория, и она может быть как очень обширной, так и нишевой. Если вы знаете, как компания хочет показать себя и для кого создается дизайн, вы должны задать вопрос: “Что будет уместно для них?”
Чем шире аудитория, тем чище и конвенциональнее должен быть дизайн, поэтому компании теряют “часть души” при росте. Это происходит, потому что определенные дизайнерские уловки, которые работают для маленькой ниши, не будут поняты широкой аудиторией, поэтому компания жертвует ими, чтобы привлечь больше людей. Но если ваша аудитория небольшая и очень специфичная, вы можете полагаться на такие вещи, чтобы сделать дизайн привлекательным и интересным для них.
Хороший пример: сравните McDonalds с вашим местным ресторанчиком с бургерами. Они продают одно и то же, но общаются с аудиторией по-разному.
Небольшой ресторан обычно использует последние тренды дизайна, чтобы привлечь людей, которые идентифицируют себя как часть сообщества, например, сайт Byron использует забавные иллюстрации. McDonalds же общается с аудиторией более конвенциональным образом, чтобы покрыть большую часть общества, никого не исключая и никому не симпатизируя.
3. Хороший дизайн проходит проверку временем?
Хороший дизайн чувствителен ко времени. В идеале, дизайн может быть вечным, но это не всегда необходимо и не всегда желательно. Это зависит от целей и срока жизни дизайна.
Если вы создаете сайт, который заменят или обновят через два года, имеет смысл применить тренды этого года. Ваш дизайн будет выглядеть современно и релевантно. Однако, вы должны смотреть вперед и знать, куда движутся тренды. Нет ничего хуже, чем поймать волну слишком поздно.
С другой стороны, если мы говорим о логотипе, тогда да, вы должны избегать недолговечных дизайнерских трендов. Если мы посмотрим на логотип Starbucks, то увидим, что существует тенденция его упрощения, таким образом, чем проще будет логотип, тем дольше он проживет.
Логотип Starbucks в 1971, 1987, 1992 и 2011 годах.
Чтобы пройти дальше, вы должны понять потенциальное время жизни дизайна и правильно его оценить. Дизайн подходит под нужный срок? Нам остается всего три пункта.
4. Не возникает ли трения?
Трение — это всё, что мешает человеку читать или использовать что-либо. Чем больше трения существует, тем сложнее пользователю получить то, что ему нужно, из вашего дизайна. Трение создается такими вещами, как сложночитаемый текст или непонятный веб-сайт.
Это может показаться очевидной ошибкой, но вы удивитесь, насколько часто дизайнеры жертвуют читабельностью и удобством использования, чтобы дизайн “выглядел лучше”.
Важно очень тщательно измерить количество информации, которое вы хотите представить. Избегайте слишком большого потока информации, это только добавит трение в ваш дизайн. Во многих случаях вам нужно от фильтровать эту информацию и сделать её восприятие проще.
Если дизайн хорошо выполнен, он становится невидимым, и люди легко находят то, что им нужно. Если нет, вы, вероятно, имеете дело с плохим дизайном, потому что в хорошем дизайне нет трения.
5. Хороший дизайн визуально привлекателен?
Обратно к субъективности. На эту часть люди обращают внимание чаще всего, и эта часть создает больше всего противоречий и дискуссий. Это происходит, потому что она может быть субъективной время от времени, и сложно прийти к одному выводу, когда у всех разное мнение.
Помимо знания теории, вы должны обогащать свою визуальную культуру. Вы можете это сделать, изучая дизайн в сообществах на сайтах или в книгах. Вы начнете видеть шаблоны, которые появляются в образцах хорошего дизайна, например, сбалансированные композиции, красивая типографика, точное выравнивание, отличные сочетания цветов и так далее.
Этот пункт всегда будет немного субъективным, но это всего один пункт из шести, он не должен останавливать вас от оценки дизайна.
6. 1+1=3?
Если дизайн прошел проверку предыдущими пятью пунктами, у вас уже есть хороший дизайн, но этот пункт отделяет просто хорошее от экстраординарного.
Чтобы понять, является ли дизайн чем-то большим, чем просто суммой частей, вам нужно взглянуть внимательнее. Это происходит, когда дизайн становится не просто комбинацией хорошей типографики и цветов, а ещё и содержит гениальную идею, которая объединяет все и выводит на новый уровень.
Простой, но идеальный пример — логотип FedEx. Между E и X вы можете заметить маленькую стрелку, хитро спрятанную в негативном пространстве. Она символизирует аккуратность и точность компании.
Вот что отделяет хороших дизайнеров от великих. Хорошие дизайнеры полагаются на свои технические навыки и основывают свой дизайн на принципах, но великие дизайнеры привносят в уравнение что-то свое.
Современный дизайн: как отличить хороший от плохого?
Согласно определению дизайнера Дитера Рамса, хорошую вещь отличить от плохой можно на три счета. Мало материала — много материала. Работает — не работает. Продается — не продается. Но это было в индустриальную эпоху. Сегодня критерии выбора хорошего дизайна стали такими же подвижными и изменчивыми, как и для произведения искусства.
По теме: Виктор Папанек: 5 принципов доброго дизайна
В начале нового тысячелетия, в эпоху цифровых технологий много говорится не офункциональном и рациональном, а о критическом, устойчивом, социальном и эмоциональном дизайне.
Происходит гиперинфляция понятия «дизайн» как такового. В поп-культуре слово дизайн легко соединяют с вещами и услугами, не имеющими к нему никакого отношения: от «дизайна ногтей» до «дизайна человека». Дизайн, с одной стороны, дематериализуется, отходит от объекта, формы и определенной эстетики. С другой, обсуждения дизайна становятся крайне острыми, поскольку меняется сам понятийный аппарат — происходит перелом в самой дисциплине.
Дизайн вошел в политическую повестку дня. Дизайн перестал быть просто «вещью», он стал «отношением». Он становится своего рода новой формой экономики. Многие исследователи настаивают на том, что возможно дизайн уже давно перестал быть «объектом», и стал «идеей».
Идеи, актуальные в конце 1960-х — начале 1970-х годов, сейчас обсуждаются особенно горячо. Протест против тесного взаимодействия промдизайна с капиталистическим производством привел к тому, что все заговорили о новом его смысле. О том, что дизайн может перестать быть частью исключительно коммерческой деятельности и начать влиять на сферы социальной жизни и улучшение окружающей среды.
«Хороший дизайн делает предмет полезным», — утверждал Дитер Рамс. Однако дизайн, задающий вопрос и формулирующий проблему, становится важнее дизайна, дающего ответ. Что можно считать хорошим дизайном, каковы его критерии?
В основе дизайна — идея
В основе дизайнерской вещи лежит проект. А в основе юбого проекта должна лежать сильная идея. План. Английское значение слова design — «план, проект». О героине романа Джейн Остин «Гордость и предубеждение» говорили she is not acting by design (она не действует по плану), имея ввиду ее эмоциональность, а не расчетливость.
Кастомизация
Стив Джобс любил говорить: «Дизайн — это забавный мир. Все думают, что главное в предмете — то, как он выглядит. На самом деле, если вы задумаетесь, главное то, как он работает». Когда Виктор Папанек в конце 60-х показывал студентам как пример хорошего дизайна свое радио Tin Can (производство которого обходилось всего в 9 центов), это полностью противоречило всему, чему их учили в университетах. Они задавались вопросом, почему заказчики сразу не послали эту вещь к черту, поскольку она выкрашена в серый цвет и выглядит уродливо. Но у Папанека были свои соображения: он оставил возможность пользователям кастомизировать предмет. Например, жители Индонезии, где производились эти радио, стали украшать их в традиционном народном стиле — зеркалами, нитками, камнями. И каждое радио стало очень личным и уникальным объектом.
Устойчивость
Хороший дизайн в наше время неотъемлемо связан с понятием «устойчивого». Необходимо думать о том, какое воздействие на окружающую среду произведут новые предметы или услуги. По оценкам британского Министерства окружающей среды, продовольствия и сельского хозяйства (Defra), 75% выбросов углерода в Великобритании происходит от использования продуктов и услуг. Также известно, что 80% воздействия этих продуктов и услуг на окружающую среду определяется на ранних стадиях проектирования. Эти цифры говорят о том, что «устойчивость» среды определяют бытовые вещи. То есть дизайн действительно имеет значение не только в части формирования и упорядочивания нашего мира, но и в определении нашего воздействия на него.
Новая волна «устойчивости» сфокусируется на сочетании творчества, предпринимательства, инновациях и практических решениях. Профессор калифорнийского дизайна Натан Шедрофф отмечал: «Дизайн — это не только решение, но и проблема». Если успех защиты окружающей среды заключался в выявлении проблем «устойчивости» в мире, то успех дизайна будет заключаться в нахождении решений.
Storytelling
Сейчас любой дизайнер обязан «рассказать историю» продукта. В эту историю обычно входят и происхождение материала, и техника изготовления, и упаковка, и идеи для использования, и личные ассоциации. Во многом «стори-теллинг» уже заменил значение самого предмета и подменил важнейшую коммуникативную функцию дизайна. Дизайн сегодня — это опыт. А дизайнер — режиссер наших ощущений. «Дизайн во многом — акт общения, означающий глубокое понимание человека, с которым общается дизайнер» (Н. Шедрофф).
Инновационность
Мебель с интегрированным интерфейсом, ковер с Wi-Fi, табуретка, напечатанная на принтере, беспроводной свет и управляемая голосовым помощником кухня… Хороший дизайн сегодня — технологичный дизайн. Он должен быть инновативным, указывать направление и двигаться вперед. Будничными инструментами современных дизайнеров стали технологии 3D-печати, AI, VR, роботы, биокомпозиты, станки с программным управлением и собственно компьютерное прототипирование. Дизайн из аналоговой сферы стремительно переходит в виртуальное пространство, где начинается его новое существование и новое ценообразование.
Про хороший и плохой дизайн для недизайнеров
Здравствуйте, меня зовут Анастасия Степанова, я дизайнер в Аркадии с опытом работы более 4 лет. Пришла в компанию в 2017 году в проект по разработке платформы для дистанционного обучения. Я часто сталкиваюсь с нарушением UX-принципов в продуктах, поэтому хочу помочь менеджерам, начинающим дизайнерам и программистам освоить базовые принципы юзабилити, а также научиться распознавать распространённые ошибки.
Дизайн решает проблемы
Функциональность против украшательства
Когда я только начинала работать веб-дизайнером в маленьком агентстве, я уделяла гораздо больше внимания эстетике, нежели функциональности. Менеджер, клиент и я тратили уйму времени, пытаясь создать красивый сайт, бесконечно двигали элементы и «играли» со шрифтами. Функции вроде «Перезвоните мне» появлялись на странице только потому, что они уже были на других сайтах. Об их назначении и уместности никто не думал. Со временем я поняла, что дизайн в первую очередь должен решать проблемы.
Тем не менее, эстетика сайта важна. Исследования показывают, что пользователи более терпимы к недочётам юзабилити, если им нравится дизайн.
Опция «Добавить к сравнению» полезна на сайтах, предлагающих технически сложные товары. Здесь она лишняя.
Помещайте важное на первый экран
Помещайте важную информацию о продукте над сгибом страницы. Сгиб страницы — термин, пришедший из печатного дела, когда газету складывали пополам. В вебе он обозначает нижнюю границу окна браузера. Информация «над сгибом» — это видимая при загрузке страницы часть контента. Информация под сгибом страницы не видна и требует прокрутки.
Если сайт выглядит не соответствующим запросу, мы не прокручиваем страницу на пять экранов ниже в надежде найти что-то полезное, мы закрываем вкладку. Расположенное над сгибом должно мотивировать посетителя изучить больше.
Делайте контент уникальным — приевшиеся рекламные слоганы и фото со стоков не вызывают интереса. Если вы заявляете, что у вас фермерская зелень, покажите грядки и расскажите о фермерах, с которыми сотрудничаете.
Это информационный, развлекательный или продающий ресурс? Чем он полезен мне как пользователю? Данные, расположенные над сгибом страницы, не отвечают на эти вопросы.
На сайте аптеки «Лекоптторг» место над сгибом страницы используется неэффективно. Навигацию можно сделать более плоской, вынеся важные ссылки на уровень выше (Доставка и оплата, Акции), а также разместить телефон call-центра и информацию об условиях доставки.
Люди не читают тексты на сайтах
Пользователи не читают тексты на сайтах. Опыт научил их, что если пробежаться по странице глазами, это принесёт почти тот же результат, но с меньшим усилием. Чтобы вовлечь пользователя в изучение страницы и помочь с поиском необходимой информации, используйте выделяющиеся заголовки. Заметные подзаголовки и списки поощряют паттерн сканирования «слоёный пирог», когда пользователь пробегает глазами по выделяющимся фразам и останавливается на максимально отвечающих его запросу. Плохо оформленный текст приведёт к тому, что пользователь упустит важную информацию или вовсе покинет сайт.
Пишите коротко и ясно, избавьтесь от маркетинговых уловок и необоснованных заявлений. Читающему приходится отфильтровывать то, что он считает правдой, от рекламных преувеличений, а это увеличивает ментальную нагрузку.
Нильсен Норман групп, лидер в области юзабилити исследований, изучили то, как пользователи читают в вебе. Они написали контрольный текст, насыщенный маркетинговыми оборотами, и несколько вариантов улучшенного — сокращённого и качественно визуально оформленного. Выяснилось, что короткий текст с хорошо сканируемым списком повысил удобство сайта на 129% по сравнению с первоначальным вариантом.
Вывод: пользователям не нравится рекламный стиль письма. Мы слишком заняты, чтобы тратить время на тексты с водой. Предоставьте факты.
Слева — перенасыщенный рекламными оборотами текст. Справа — улучшенный: простой, короткий, с удобным списком достопримечательностей.
При оформлении текста:
Используйте осмысленные заголовки;
Доносите одну идею для каждого параграфа, не перегружайте;
Оформляйте буллетированные списки и выделяйте ключевые слова весом, начертанием или ссылками;
Начинайте страницу с заключения, кратко отражающего суть статьи, и углубляйтесь в подробности далее;
Избегайте громких заявлений и маркетинговых оборотов;
Пишите языком, понятным восьмикласснику.
Визуальная иерархия
Хорошая компоновка ведёт взгляд по странице
Чтобы элементы на странице не превращались в визуальный хаос, необходимо выстраивать иерархию через компоновку. Хорошая композиция естественным образом ведёт взгляд пользователя от элемента к элементу.
Лучший способ выстроить иерархию — использовать white space, или негативное пространство, т.е. область вокруг объектов, которая остаётся пустой. Это не обязательно буквально белый экран; однородно закрашенные зоны или паттерн из мелких деталей, не отвлекающий внимания от главного объекта, — тоже white space.
Стремитесь к тому, чтобы на странице было больше свободного места, воздуха.
Для сложных многозадачных интерфейсов допускается, и даже желательно, более компактное размещение элементов.
На сайте Nike достаточно пространства, страница «дышит». В мобильной версии сайта Callebaut мало воздуха и есть проблемы со шрифтами.
Композиция на первом скриншоте выстроена правильно, взгляд скользит от заголовка страницы к опции «Показать всё», затем крупной фотографии и подписи к ней. На втором скриншоте элементы выстроены хаотично, поэтому взгляд мечется по странице.
На сайте tijuanaflats.com в качестве white space выступает текстура серой стены.
Понимание законов восприятия поможет с группировкой
В начале 20 века гештальтпсихологи пытались понять, как люди воспринимают мир, и в частности, как они определяют, является ли элемент частью группы. Ряд сформулированных принципов: близости, схожести, закрытия и общей области — важны в дизайне интерфейсов и применяются дизайнерами особенно часто.
Законы близости и общей области помогают правильно группировать объекты и выстраивать иерархию.
Закон близости, или Law of Proximity, — объекты, расположенные близко друг к другу, воспринимаются как группа. Объединение данных в группы облегчает восприятие. Например, запомнить три группы, состоящие из двух цифр, проще, чем шесть цифр подряд. Сравните: 23-56-12 или 235612. Последнюю группу вы, скорее всего, попытаетесь разбить на две части: 235-612.
Свободное пространство разделяет формы в две чётко различимые группы. Примеры с Nielsen Norman Group.
Закон общей области, или Law of Common Region, — элементы воспринимаются как группа, если они делят общую область, заключённую в явные рамки.
Закон общей области доминирует над законом близости. Пример с Nielsen Norman Group.
Используйте закон близости в интерфейсе как предпочтительный способ группировки. Элементы, относящиеся к одной и той же группе, размещайте ближе друг к другу, группы отделяйте свободным пространством. В отдельных случаях, когда пространства недостаточно и невозможно задать нужные отступы, применяйте закон общей области.
Грамотная группировка элементов помогает понять взаимоотношения между ними и облегчает сканирование страницы.
На скриншоте слева не очевидно, к какому именно товару относится ценник. Можно сместить цену ниже или добавить разделители.
В мобильной версии в корзине мне понадобилось удвоить количество крышек для контейнера. Как понять, что я добавила именно крышку, а не контейнер?
Консистентность, или предсказуемость
Пользователи проводят большую часть времени на других сайтах
Закон Джейкоба Нильсена гласит, что большую часть времени пользователи проводят на других сайтах. Это означает, что люди предпочитают, чтобы ваш сайт работал так же, как и все остальные сайты, которые они уже посетили.
Консистентность веб-паттернов подразумевает использование элементов управления в соответствии с принятыми в вебе практиками. Например, пользователи привыкли, что иконка гамбургера означает скрытое меню, и человек нажимает на неё с уже сформированными ожиданиями. Такую иконку не стоит применять в совершенно новых контекстах.
В моей практике были случаи, когда заказчики предлагали сделать что-то неконсистентное, подавая это как «фишку». К сожалению, в реальности это лишь усилит ментальную нагрузку посетителя сайта. Помните: человек пришёл на сайт с определённой целью; облегчите её достижение.
Консистентность на уровне сайта тоже важна. Не множьте дизайн кнопок, полей ввода и других элементов управления, используйте повторно уже разработанные стили.
Выбранная вкладка в навигации выглядит как плавающая кнопка. Пользователи привыкли, что FAB (floating action button, или плавающая кнопка) выполняет ключевое действие, такое применение стиля сбивает с толку. Eapteka.ru.
Галочка в чекбоксе подтверждает, что он выбран. На примере выше поле чекбокса после нажатия приобретает заливку вместо привычной галочки, поэтому не ясно, дано ли согласие. Aptekaeconom.com.
В карточке товара нет кнопки «В корзину», вместо этого необходимо выбрать количество, и товар будет добавлен автоматически. Это неочевидное поведение — есть вероятность, что пользователь откажется от покупки, а бизнес потеряет деньги.
Используйте компоненты по назначению
Юзабилити компонентов требует отдельного изучения, однако можно запомнить базовые правила. Радиокнопки применяют там, где возможен только один выбор из 2-4 опций.
Если опций от 5 до 15, подойдёт раскрывающийся список.
Опций больше 15? Стоит разрешить пользователю вводить название текстом (поле со списком).
Группа чекбоксов подойдёт для выбора нескольких опций одновременно.
Переключатель используется там, где действие применяется мгновенно (например, включение авиарежима в телефоне). И так далее.
Проводите небольшое исследование, прежде чем выбрать оптимальный компонент.
Лучше применять стандартные HTML элементы управления — они работают корректно с программами чтения с экрана. Если вы всё-таки хотите разработать собственные компоненты, используйте ARIA-лейблы.
В качестве хорошего примера детально проработанного руководства по дизайну интерфейсов крупной платформы можно посмотреть Контур.гайды.
В фильтре приложения «Юла» для iOS можно выбрать несколько параметров одновременно, однако чекбоксы визуально напоминают радиокнопки. Может показаться, что здесь возможен только единичный выбор.
Кнопка не должна выглядеть как ссылка, а ссылка — как кнопка
Ссылка ведёт на новую страницу, в то время как кнопка инициирует действие (отправить форму, открыть модальное окно). В вебе ссылки часто маскируются под кнопки, чтобы привлечь внимание пользователя, это неправильно. Алла Холматова, автор книги «Дизайн-системы», решила вопрос, добавив в руководство по стилю call-to-action (CTA) ссылки и кнопки. Ключевые ссылки обрели визуальный вес, но не потеряли узнаваемость.
Таким образом, call-to-action-ссылки, призывающие к ключевому действию (перейти в нужный раздел, подписаться на пожертвования и т.д.), могут быть оформлены более заметно.
Ссылкам в сплошном тексте достаточно добавления подчеркивания, так пользователи со слабым зрением смогут легко их идентифицировать.
Варианты сall-to-action-ссылок и кнопок из книги А. Холматовой «Дизайн-системы».
Кнопки в группе должны отличаться
Для действий различного приоритета используйте кнопки с отличающимся визуальным весом. Заметная кнопка с цветовой заливкой поощряет пользователя к действию. Второстепенная кнопка, напротив, привлекает меньше внимания.
Кнопки разного веса уменьшают ментальную нагрузку: визуально тяжёлую кнопку пользователь считывает быстрее, поэтому время на принятие решения сокращается.
Пользователи привыкли, что наиболее важное действие выделяется заметной кнопкой. Это позволяет не вчитываться в надписи и снижает энергозатраты (interaction cost).
Дизайн под все состояния контента
Тестируйте дизайн с разным объёмом контента
Часто дизайнеры создают лишь один макет страницы, в который замечательным образом вписываются заголовки, текст и картинки. В реальности объём и расположение содержимого сайта постоянно меняются.
Убедитесь, что ваш дизайн работает для всех состояний контента: максимального, оптимального, минимального и пустого. Попробуйте заполнить элемент до предела: добавьте длинные заголовки, объёмный текст и изображения. И напротив, сократите содержимое до минимума. Проверьте, всё ли хорошо с отступами, не стало ли элементам тесно и не нужно ли как-то скрыть часть данных.
Пустое состояние, или empty state, — это то, как будет выглядеть страница без контента вообще.
Оптимальное состояние — это идеальное состояние, под которое мы делаем дизайн, полагая, что в большинстве случаев контент будет выглядеть именно так.
Примеры дизайна под пустое состояние контента. Скриншот из мобильного приложения Outlook и иллюстрация с сайта materia.io.
В карточке товара онлайн-магазина Metro довольно удобно сканировать его параметры в двух столбцах, однако когда мы доходим до состава, то видим, что максимальное состояние не учтено — читать текст такой длины в узкой колонке неудобно.
В старой версии сайта магазина Метро дизайн карточки товара не учитывал вероятность объёмного описания.
Пустое состояние страницы на dropbox.com.
Состояния компонентов обеспечивают обратную связь
Не забывайте рисовать компонентам необходимые состояния: как они выглядят по наведению мыши (hover), в отключённом состоянии (disabled), когда компонент выбран (selected) или находится в фокусе (focus). Визуальное изменение компонента позволяет дать обратную связь пользователю, который с ним взаимодействует.
На сайте fasteda.ru поле поиска при фокусировке не меняется. Несмотря на присутствие мигающего курсора, изменение состояния поля с «default» на «focused» не столь очeвидно. На сайте designsystem.digital.gov, напротив, яркий заметный стиль фокуса.
Выбор шрифта, оформление и адаптация текста
«Рабочие лошадки» и акцидентные шрифты
Акцидентные шрифты хорошо смотрятся в заголовках, но не предназначены для сплошного набора. Для объёмных текстов выбирайте «рабочих лошадок», или надёжные разборчивые шрифты.
Сплошной текст, набранный акцидентным шрифтом, сложно читать.
Кураторы приюта «Друзья животных», возможно, хотели выбрать дружелюбный неформальный шрифт для сайта, однако выяснилось, что важная информация теперь не читается. Акцидентный шрифт вроде этого лучше оставить для заголовков.
Веб-шрифты. Когда речь заходит о пикселях, возникают сложности
У большинства из нас хорошие мониторы, но людей, которым недоступна современная техника, всё ещё много, поэтому веб-шрифты надёжны и безопасны.
На печати любой шрифт выглядит корректно, но когда речь заходит о цифровых экранах, возникают сложности. Буквы могут не встать в сетку пикселей ввиду более крупного размера пикселя, поэтому для веб-шрифтов используют хинтование. Контур шрифта изменяют так, чтобы он вписался в пиксельную сетку экрана с низким разрешением.
Взгляните на пример из книги Эрика Шпикермана «О шрифте». Векторные контуры букв искажены таким образом, чтобы шрифт на экране отображался так, как он отображается на печати.
Эрик Шпикерман, «О шрифте». Адаптация контуров шрифта Georgia под пиксельные экраны.
Какой шрифт выбрать?
Ориентируйтесь на читаемость, наличие дополнительных символов и возможность локализации, т.е. поддержку всевозможных языков, например кириллицы.
Source Sans Pro, Georgia, Segoe, Fira Sans, Proxima Sans, Lucida — лучшие шрифты для веба по мнению Шпикермана. Lucida идеальна для маленьких экранов с низким разрешением.
Source Sans Pro, Open Sans, Merriweather, Helvetica, Verdana, Tahoma и другие шрифты предлагает U.S. Web Design System — ресурс, предоставляющий рекомендации по созданию доступных государственных сайтов.
Roboto и Noto поддерживают множество языков.
Широкий параграф затрудняет чтение
Рекомендуемая ширина параграфа — 40-60 символов. Длинную строчку сложно отслеживать взглядом, а короткая вынуждает читателя слишком часто переноситься со строки на строку.
Параграф такой ширины нечитаем, длинную строчку сложно отслеживать взглядом. С сайта 1metallobaza.ru.
Межстрочное расстояние зависит от длины строки
Интерлиньяж (leading или line-height в англоязычной литературе) — расстояние между базовыми линиями соседних строк. Термин лэдинг отсылает к временам, когда для задания межстрочных промежутков на печати использовались свинцовые расширители.
Чем длиннее параграф и больше слов в строке, тем больше может быть интерлиньяж. Короткий параграф с большим межстрочным расстоянием нарушает ритм чтения.
Интерлиньяж зачастую варьируется между 1,2 и 1,8. По требованиям WCAG для уровня AA, интерлиньяж должен быть не менее 1,5 (150% от размера шрифта).
Заголовки обычно значительно короче параграфов, межстрочное расстояние в них нужно уменьшать, чтобы они визуально не распадались на строчки. Рекомендуемый leading для заголовка — 1-1,2.
Слишком большой интерлиньяж. Строки распадаются, пространство используется неэффективно.
Не выравнивайте текст по центру
Оптимальное выравнивание параграфа, или выключка, — по левой стороне, выключка по центру или по ширине снижает читаемость.
Сравните, насколько легче читать текст с выключкой по левой стороне. Icon made by Eucalyp from www.flaticon.com
Адаптация под языки
Если сайт подразумевает локализацию, убедитесь, что интерфейс работает с разными типами языков. Слова в русском или немецком языках длиннее, чем в английском. Некоторые языки, например вьетнамский, содержат буквы с дополнительными выносными элементами и требуют больше вертикального пространства. Для языков, использующих направление справа налево, таких как иврит или арабский, интерфейс отображают зеркально, т.е. все элементы, включая текстовые ярлыки и текст в полях ввода, выравниваются по правой стороне.
Интерфейс Instagram не адаптирован под длиннословные языки. «Send» превращается в «Отправить», занимая полезное место в поле ввода.
Пример зеркального отображения интерфейса под right-to-left языки. Material.io.
Цвета и контрастность
Ограничьте количество используемых цветов
Определитесь с первичным цветом для основных элементов управления и вторичным — для второстепенных кнопок и, к примеру, фона. Вариации первичного и вторичного цвета (более светлые или более тёмные оттенки) помогут с созданием состояний элементов управления (дизайнеры также называют их «контролами» — калька с английского термина control) или тёмной версии приложения. Подумайте, будете ли вы использовать ваш первичный цвет в том числе и для неинтерактивных компонентов, например с целью экспрессии бренда.
Заголовок «Test delivery» выделен первичным цветом и напоминает кнопку, хотя фактически это декоративный элемент.
Избыточное количество серых и оранжевых оттенков. Скриншот из библиотеки компонентов системы для дистанционного тестирования.
Не представляйте информацию только цветом
Важное требование accessibility — не доводите информацию до пользователя только цветом.
Например, в мире один из 10-12 мужчин и одна из 150-200 женщин в той или иной мере не различают цвета. Люди с выраженной протанопией не видят красный, с дейтеранопией — зелёный, а тританопией — голубой. Небольшая часть людей не видит цветов вообще, распознавая только тёмное и светлое.
К примеру, цветовые сегменты круговой диаграммы можно заполнить паттернами или продублировать информацию текстом и цифрами. Для иллюстрации ошибки заполнения полей ввода, в дополнение к красной обводке поля покажите иконку или текст.
Переведите дизайн в монохромный вариант (для этого есть специальные расширения) и посмотрите, хорошо ли считывается информация, достаточно ли контраста.
Добавление товара в избранное меняет цвет обводки иконки. Это нарушает требования доступности — обратная связь доводится исключительно цветом. Если добавить иконке заливку, такое изменение считается быстрее и тем самым поможет людям, не различающим цвета. При переводе картинки в монохромный режим разница очевидна.
Валидационное сообщение по возможности должно быть осмысленным, помогая пользователю в устранении ошибки.
Хотя сообщение об ошибке здесь есть, оно помещено на подложку и почти равноудалено от верхнего и нижнего полей. Создаётся впечатление, что появились новые поля ввода, форма перегружена. Добавление иконки ошибки в неверно заполненное поле помогло бы его идентифицировать.
Красный — для ошибок
В зависимости от культуры, цвета имеют определённые ассоциации. Зелёным часто обозначают успешно выполненное действие или стабильное состояние системы. Красным — ошибки, действия с негативными последствиями. Если красный — часть вашего бренда, подумайте о том, чтобы показывать ошибки другим цветом, например оранжевым.
Действие с негативным контекстом выделено красным. С сайта healthline.com.
Красный цвет — часть бренда, поэтому для баннера с негативной обратной связью используется оранжевый. С сайта material.io.
Контрастность графических элементов
Используйте контрастные цвета для всех недекоративных элементов. Иконка, дублирующая надпись — декоративная, иконка-кнопка без надписи уже несёт смысл и должна соответствовать требованиям к контрасту.
Контрастность шрифта
В соответствии с требованиями WCAG, соотношение контрастности шрифта к прилегающему фону должно быть не менее:
3:1 для пользователей с нормальным зрением (А);
4,5:1 для пользователей с дефектами зрения (АА);
7:1 для людей с наиболее серьезной потерей зрения (ААА).
Проверить контрастность шрифта можно на Webaim.org.
Не делайте текст абсолютно черным (#000000). У людей с синдромом Ирлен чтение чёрного текста на белом фоне вызывает сложности. Глазам обычного пользователя излишне высокий контраст также неприятен.
Отзыв пользователя набран неконтрастным цветом. Из-за тонкого начертания букв текст кажется ещё светлее.
На сайте Figma с читаемостью всё хорошо, однако стоит помнить, что слишком высокий контраст вызывает проблемы у людей с синдромом Ирлен. Избегайте использования абсолютно чёрного цвета на белом фоне.
Заключение
Надеюсь, приведённые выше рекомендации помогут вам в работе с продуктом.
Давайте ещё раз подытожим:
Помогайте пользователю решать проблемы, подходите к дизайну осознанно;
Помните о консистентности, будьте в хорошем смысле предсказуемыми;
Уважайте время пользователя, пишите коротко и ясно;