Поиск
Close this search box.
Поиск
Close this search box.

Проектирование сайтов по стандартам юзабилити.

Юзабилити стандарт

Научитесь проектировать сайты с учетом преемственности и стандартов. Поймите причины, по которым они важны для включения их в вашу работу. «Преемственность и стандарты», полученные из руководящих принципов Якова Нильсена и Рольфа Молича «Десять пользовательских интерфейсов», очевидны во многих широко используемых продуктах, созданных некоторыми из наиболее успешных компаний. 

Такие продукты, как Adobe Photoshop, первоначально выпущенный в 1990-х годах, и Google Gmail, выпущенный в середине 2000-х годов, — это лишь некоторые из широко популярных продуктов, демонстрирующих это важное практическое правило. Эта статья научит вас распознавать юзабилити стандарты и объяснит, почему они важны в дизайне пользовательского интерфейса.






Две ключевые причины для преемственности и стандартов проектирования в дизайне сайта.

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

Упрощение для ваших пользователей означает не заставлять их изучать новые представления или наборы инструментов для каждой задачи. Сокращение продолжительности процесса мышления за счет устранения путаницы также является верным выбором, когда речь идет об улучшении пользовательского опыта (UX).

1. Сократить время обучения.

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

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

Одним из таких примеров, иллюстрирующих эту проблему, является веб-сайт американской компании средств массовой информации Comcast Corporation для Xfinity. 

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

Проектирования UX сайтов

Автор / правообладатель: Comcast Corporation. Условия авторского права и лицензия: добросовестное использование.

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

Проектирование

Автор / правообладатель: Comcast Corporation. Условия авторского права и лицензия: добросовестное использование.

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

UX сайтов и Юзабилити

Автор / правообладатель: Comcast Corporation. Условия авторского права и лицензия: добросовестное использование.

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

2. Устранить путаницу в проектировании сайта.

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

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

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

Путаница возникает, когда люди не могут «собрать воедино» информацию, а иногда и мешают им чего-то достичь. 

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

Пять способов качественного проектирования юзабилити сайта.

Есть много аспектов для достижения согласованности в вашем пользовательском интерфейсе. Вот 5 вещей, на которые вы можете обратить внимание, чтобы улучшить согласованность ваших проектов:

1. Ваш выбор языка.

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

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

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

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

Проектирование дизайна сайтов

Автор / владелец авторских прав: David Bruce Jr. 2011. Условия авторского права и лицензия: CC BY 2.0

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

2. Применяйте элементы пользовательского интерфейса с умом.

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

Например, переключатели предназначены для использования, когда разрешена только одна опция. Флажки следует использовать только тогда, когда пользователю разрешено более одного варианта. Во многих отношениях мы можем увидеть, как HTML5 превзошел технологию Flash в конце 2014 года.

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

Проектирование сайтов по Юзабилити стандартам

Радиокнопки допускают только одну опцию. Поэтому имеет смысл только для встроенных переключателей HTML.

дизайн сайтов

Флажки позволяют более одного варианта.

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

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

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

Стандарты дизайна сайтов

Автор / правообладатель: BBC. Условия авторского права и лицензия: добросовестное использование.

В разделе комментариев BBC отображается стрелка вниз для «Наивысший рейтинг» и стрелка вверх для «Наименьший рейтинг». Это представление является непоследовательным и запутанным для ваших пользователей, поскольку понятие «выше» обычно синонимично со стрелкой вверх, а «ниже» синонимично со стрелкой вниз.

3. Учитывайте различные устоявшиеся юзабилити стандарты при принятии решения о планировке.

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

Проектирование веб сайтов

Автор / правообладатель: Microsoft Corporation. Условия авторского права и лицензия: добросовестное использование.

Юзабилити сайтов

Автор / владелец авторских прав: Apple Inc. Условия авторского права и лицензия: добросовестное использование.

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

4. Юзабилити — это дизайн ожиданий вашего пользователя.

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

Проектирование UX сайтов

Автор / правообладатель: Youtube. Условия авторского права и лицензия: добросовестное использование.

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

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

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

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

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

Автор / правообладатель: Ян-Альфред Барклай. Behance. Условия авторского права и лицензия: CC BY-NC 4.0

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

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

Юзабилити UX сайтов

Автор / владелец авторских прав: Google Inc. Условия авторского права и лицензия: добросовестное использование.

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

Заключение. Как проектировать сайт?

Преемственность и стандарты признаны в качестве основного принципа проектирования и должны применяться ко всему контенту и взаимодействиям внутри вашего продукта. 

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

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

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

Источник: https://www.interaction-design.org/literature/article/principle-of-consistency-and-standards-in-user-interface-design

✓ Какие стандарты дизайна в 2020 году?

Минималистичный дизайн. Видео контент. Большой шрифт. Белый фон сайтов.

✓ Какие правила дизайна в 2020 году?

Обязательно белый фон. Не более двух цветов на странице. Маркированные списки и большие заголовки.

✓ Как правильно согласовать цвета в дизайне?

Не существует единого правила для этого, но существует стандарт. Не более двух цветов в дизайне.

✓ Что лучше радио кнопки или флажки?

Радио кнопки включают в себя только одну опцию. Флажки позволяют делать множественный выбор.

✓ Что такое стандарты юзабилити?

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

✓ Сколько часов нужно на создание веб-сайта?

Создание веб-сайта с шаблоном из 6-8 страниц займет 40-100 часов.

✓ Что такое удовлетворение от удобства использования?

Удовлетворенность пользователей — лишь один из важных аспектов юзабилити.

Обратный Звонок

Напишите нам