MVP. Как выводить на рынок товары и услуги, которые нравятся покупателям - Дэн Олсен Страница 43

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

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

Принципы композиции

В дополнение к принципам гештальта и визуальной иерархии при создании и оценке дизайна необходимо учитывать следующие композиционные принципы:

1. Единство: Воспринимается страница или экран как единое целое или как набор разрозненных элементов?

2. Контраст: Имеется ли достаточно различий в цвете, размере, расположении и так далее, чтобы это вызывало визуальный интерес?

3. Баланс: Равномерно ли распределен визуальный вес (положение, размер, цвет и так далее) элементов в дизайне?

4. Использование пространства: Насколько загроможденным или разреженным выглядит дизайн? Убедитесь, что на странице/экране оставлено достаточное количество свободного места – неиспользуемого пространства, – чтобы дизайн не выглядел перегруженным.

Адаптивный дизайн

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

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

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

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

Проектирование для экранов разных размеров

Необходимость учитывать факт использования потребителями экранов разных размеров является реальностью современного дизайна программных продуктов. Для веб-продуктов адаптивный дизайн является отличным инструментом, предлагающим элегантное и простое решение этой проблемы. Комплекты для разработки мобильного программного обеспечения (SDK) также включают в себя инструменты, которые позволяют создавать для одного и того же приложения различные макеты, оптимизированные под разные размеры экрана.

У вас может возникнуть вопрос: на какой размер экрана (большой или маленький) следует ориентироваться, начиная процесс разработки UX-интерфейса? Если вы изначально разрабатывали свой продукт под экран большего размера, адаптация его к меньшему экрану может оказаться непростой задачей. Созданный объем контента может просто не поместиться на маленьком экране, и вам придется делать трудный выбор – определить элементы, которые придется удалить. Вероятно, вы будете вынуждены изменить и систему навигации. Необходимо будет пересмотреть и переделать контент, размер которого слишком широк для маленького экрана. Поэтому в подобных случаях разработчики часто создают отдельный продукт, переписывая программный код. Однако такое решение не является идеальным. Во-первых, необходимость в дальнейшем каждый раз вносить изменения и дополнения в два отдельных фрагмента кода приводит к снижению эффективности и увеличению вероятности ошибок. Во-вторых, разработанные по отдельности мобильная и немобильная версии продукта часто оказываются настолько непохожими друг на друга, что это приводит к неорганичности пользовательского опыта, вызывая у клиентов непонимание и раздражение.

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

Копирайтинг также является частью UX-дизайна

Прежде чем завершить