Несколько способов сделать дизайн для сайта простым

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

Сначала мобильные

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

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

Пример метода «Сначала мобильные»

Moblle first

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

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

Последовательное раскрытие

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

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

Пример последовательного раскрытия

Progressive Disclosure

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

Прогрессивное улучшение

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

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

Пример прогрессивного улучшения

Progresive Enhancement

A Bear's-Eye View of Yellowstone от National Geographic является прекрасным примером прогрессивного улучшения в действии. Расширенная интерактивная работа с сайтом построена вокруг базовых элементов: текста и видео, которые рассказывают историю о путешествии медведей через Йеллоустоун.

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

Оцените статью:
Рейтинг: 0/5 - 0 голосов
Вам также может понравиться
Комментарии ()