Содержание
- Внутренняя согласованность
- Внутренняя согласованность Reddit
- Как проверить внутреннюю непротиворечивость
- Забрать
Последовательный дизайн кажется знакомым, а знакомый дизайн легче изучить. Что интересно, проекты с короткими кривыми обучения кажутся более удобными.
Конечно, есть тонкая грань между последовательностью и единообразием. Вам нужно знать, когда нарушить последовательность, чтобы не привести к хаосу в дизайне. Ключевым моментом, как это часто бывает в дизайне, является баланс.
Во вторник в статье «Как создавать веб-сайты, соответствующие ожиданиям пользователей» мы кратко объяснили, почему внешний последовательность важна: то есть, как создавать веб-дизайн, который соответствует ожиданиям пользователей на основе предыдущего опыта (и других дизайнов).
Здесь мы подробнее рассмотрим, как обеспечить единообразие на вашем сайте и на всех страницах (внутренний последовательность).
Внутренняя согласованность
В то время как внешняя согласованность может улучшить ваш дизайн пользовательского интерфейса за счет удовлетворения ожиданий пользователей, внутренняя согласованность рассматривается как более важное требование, и его несоблюдение, скорее всего, нанесет вред пользовательскому опыту.
Как описано в «Руководстве по согласованности в дизайне пользовательского интерфейса», внутренние несоответствия обычно применяются только для того, чтобы различать различия в контенте или действиях пользователя (например, разные макеты для разных форм контента).
Давайте посмотрим на пример внутренней согласованности и рассмотрим краткий контрольный список.
Внутренняя согласованность Reddit
Согласованность внутри вашего сайта или приложения охватывает как эстетику, так и функциональность, особенно когда они одинаковы. Давайте рассмотрим самопровозглашенную "первую страницу Интернета" Reddit.
Во-первых, все ссылки Reddit, ведущие на внешние сайты, выделены синим цветом и одним и тем же крупным шрифтом. Эта повторяющаяся последовательность позволяет пользователям точно знать, на что они могут нажать и что произойдет, когда они это сделают. Он также использует преимущества внешней согласованности с одним из самых известных веб-шаблонов: размещение ссылок синим цветом.
Но внутренняя согласованность Reddit глубже. При перемещении курсора мыши по странице все внутренние ссылки (комментарии, подкатегории, пользователи и параметры общего доступа) будут подчеркнуты при наведении курсора на них. Таким образом, пользователь сразу же получает обратную связь о том, что вторичные ссылки кликабельны, а какой-то другой текст - нет. Несмотря на то, что это тонкое, последовательное использование визуальных эффектов экономит время на объяснение взаимодействий.
Как проверить внутреннюю непротиворечивость
Внутренняя согласованность - неблагодарная черта. Замечено только его отсутствие.
Например, изменение положения кнопки на разных страницах: пользователь привыкает к тому, что опция входа находится в правом верхнем углу, а затем не может найти ее на странице, где она находится в правом нижнем углу. Другой вариант - это переключение команд «Сохранить» и «Отправить» - обе представляют две разные функции. Еще одно - определенные функции доступны только на определенных страницах: если на домашней странице используется функция перетаскивания, пользователь будет ожидать, что все страницы будут ее использовать.
В качестве общего контрольного списка постарайтесь охватить все эти основы, когда имеете дело с внутренней согласованностью:
- Цвет - очевидный визуальный сигнал, поддерживайте цвета в соответствии с их функцией (например, зеленый всегда означает принятие, а красный - отклонение). Общая цветовая схема сайта также не должна сильно отличаться от страницы к странице.
- Типографика. Как и в случае с Reddit, все шрифты и расцветки могут использоваться в качестве визуальных сигналов, но только при постоянном использовании. Разделите заголовки, основные и второстепенные тексты, придавая каждому отдельную типографику.
- Язык - для простоты не меняйте выбранные слова. Если вы даете пользователю выбор между Да и Нет для одной задачи, не меняйте это значение на Принять и Отклонить для другой.
- Общие визуальные эффекты - такие функции, как наборы значков, кнопки и даже интерактивные ссылки, должны быть согласованными, чтобы выражать свою функцию - использование двух разных типов кнопок запутает пользователя.
- Макет и расположение. Для правильной навигации пользователям необходим согласованный макет страниц. Несогласованность приемлема, когда вы пытаетесь вызвать различные типы контента или действия пользователя.
- Взаимодействия - хотя они могут показаться незначительными деталями, любые несоответствия между элементами формы, диалоговыми окнами, анимацией, переходами и т. Д. Будут раздражать. Одно плохое взаимодействие может испортить все предыдущие восхитительные.
Если вы думаете, что все эти детали сложно отследить, вы правы.
Вот почему многие компании - даже за пределами цифрового дизайна - используют руководства по стилю для внутренней согласованности. Руководство по стилю - это формализованный документ, в котором отслеживается надлежащая политика компании в отношении этих деталей. Например, «все заголовки должны быть 12 pt., Arial черным и полужирным» или «логотип компании всегда должен отображаться в поле 4 x 4 см в верхнем левом углу».
Если вы хотите узнать больше о руководствах по стилям, ознакомьтесь с рекомендациями по веб-интерфейсу. Для получения более общих ссылок ознакомьтесь с этими другими онлайн-статьями:
- Создание руководств по стилю Сьюзан Робертсон
- Создание руководства по стилю веб-сайта Стива Фишера
- Написание руководства по стилю интерфейса от Джины Болтон
Вы также можете начать работу с руководством по стилю для начинающих, используя бесплатный шаблон руководства по стилю пользовательского интерфейса Medialoot - укажите, что работает, и настройте остальное.
Забрать
Дело не в том, что вы последовательны, а в том, как и где вы последовательны.
Помните, что шаблоны могут сэкономить много времени, поскольку они основаны на предыдущих знаниях ваших пользователей, поэтому используйте их при любой возможности. Если вы вступаете на неизведанную территорию, попробуйте задействовать методы, которые интуитивно понятны человеку - понимание мысли вашего пользователя поможет во всех отношениях.
Ваши пользователи также ожидают, что ваш сайт или приложение будет поддерживать внутреннюю согласованность, поэтому не нарушайте ритм взаимодействия. Учитывайте ключевые категории внутренней согласованности - цвет, типографику, язык, общие визуальные эффекты, макет и взаимодействие - и поддерживайте их все в соответствии с руководством по стилю.
Чтобы узнать больше о типах согласованности и несогласованности, необходимых для желаемого дизайна интерфейса, загрузите бесплатную электронную книгу «Согласованность в дизайне пользовательского интерфейса». Анализируются наглядные примеры из Amazon, Jawbone, Dolce & Gabbana и других.
Слова: Джерри Цао
Джерри Цао (Jerry Cao) - стратег по UX-контенту в UXPin - приложении для создания каркасов и прототипов. Чтобы узнать больше о балансе согласованности и непоследовательности для создания визуально захватывающих дизайнов, загрузите бесплатную электронную книгу «Согласованность в дизайне пользовательского интерфейса».
