Автор — Эуфемия Вонг (Euphemia Wong)
Научитесь создавать дизайн с учетом последовательности и стандартов и поймите причины, по которым они важны, чтобы включить их в вашу работу. Полученные от Якоба Нильсена и Рольфа Молича (Jakob Nielsen и Rolf Molich) рекомендации по пользовательскому интерфейсу «Последовательность и стандарты» проявляются во многих широко используемых продуктах, созданных одними из наиболее успешных компаний. Такие продукты, как Adobe Photoshop, первоначально выпущенные в 1990-х годах, и Google Gmail, выпущенные в середине 2000-х годов, — это лишь некоторые из самых популярных продуктов, которые демонстрируют это важное правило. Эта статья расскажет, как распознавать последовательность и стандарты и объяснит, почему они важны в дизайне пользовательского интерфейса (User Interface Design, UI Дизайн).
Два основные причины для последовательности и стандартов в UI дизайне
Когда вы разрабатываете дизайн пользовательского интерфейса, важно иметь в виду взаимодействия, которые происходят между человеческим познанием и экраном, для которого вы проектируете. Сделать вещи проще для ваших пользователей означает не принуждать их к изучению новых отображений или наборов инструментов для каждой задачи. Сокращение продолжительности процесса мышления путем устранения путаницы, также является важным, когда дело доходит до улучшения пользовательского опыта.
1. Сокращение обучения
Последовательность ограничивает количество способов действий и операций, которые гарантируют, что пользователям не нужно изучать новые материалы для каждой задачи. Кроме того, установление норм проектирования, таких как следование соглашения платформы, позволяет пользователям выполнять новые задачи без необходимости изучения нового набора инструментов. Это может показаться простой концепцией, но есть много примеров, которые демонстрируют отсутствие последовательности в их проектах. Одним из таких примеров, который показывает эту проблему, является веб-сайт Xfinity от Comcast Corporation, американской медиа-компании. На их сайте не только второстепенное меню непоследовательно почти каждый раз, когда пользователь нажимает на другую страницу, но оно также непоследовательно по отношению к основному меню. Давайте посмотрим и сравним три разные страницы веб-сайта: Домашняя страница, My Xfinity и ТВ (Homepage, My Xfinity, and TV.).
Author/Copyright holder: Comcast Corporation. Copyright terms and licence: Fair Use.
Это домашняя страница сайта Xfinity. Обратите внимание, как аннотированная область, выделяющая как основную, так и вторичную строки меню, будет отличаться по мере того, как пользователь нажимает на другие страницы.
Author/Copyright holder: Comcast Corporation. Copyright terms and licence: Fair Use.
Это ТВ-страница сайта Xfinity. Что вводит пользователя в заблуждение, так это то, как цвета, расположение и стили шрифтов отличаются от домашней страницы.
Author/Copyright holder: Comcast Corporation. Copyright terms and licence: Fair Use
Это страница My Xfinity веб-сайта Xfinity. Все три страницы, рассмотренные выше, имеют очень разные цвета, расположение и стили шрифтов в меню навигации. Эти различия делают его запутанным и дезориентирующим для пользователя, поскольку он больше не чувствуется как единый сайт, будто бы это три разные компании.
2. Устранение путаницы
Пользователи склонны применять правила, которые они испытали на своем опыте за пределами вашего сайта или продукта, принося набор собственных ожиданий. Зная это, мы должны помнить о том, вызываем ли мы путаницу и отчуждение, когда отклоняемся от стандартов и соглашений дизайна. Кроме того, пользователи не должны тратить время на то, чтобы понять, действительно ли разные слова, взаимодействия или действия означают одно и то же в контексте вашего продукта. Путаница возникает, когда люди не могут «собрать воедино» информацию. Когда пользователю мешают достичь своей цели, понятно, что они могут чувствовать себя сердитыми или расстроенными. Не секрет, что путаница, как правило, вызывает разочарование, а разочарование приводит к плохому пользовательскому опыту. Поэтому вы всегда должны стремиться к устранению путаницы в каждом касательном пункте, где это возможно.
Пять способов достижения последовательности в вашей работе
Существует много аспектов для достижения последовательности в вашем пользовательском интерфейсе. Вот 5 вещей, на которые вы можете обратить внимание, чтобы улучшить последовательность ваших проектов.
1. Ваш выбор языка
Язык, который вы используете как в маркетинговой копии, так и в формулировке, используемой в путях взаимодействия пользователей (user flow), может не только повлиять на восприятие вашим пользователем вашего продукта, но и быть путаницей, когда вы используете другую терминологию для представления того же самого. Это касается не только выбранных вами терминов, но и тона, в котором вы передаете свое сообщение.
Например, если вы напугаете вашего пользователя серьезным и угрожающим сообщением об ошибке, когда он просматриваете сайт электронной торговли, который демонстрирует общий дружеский тон, это обязательно убьет хороший user experience.
Когда вещи означают одно и то же или выполняют одну и ту же операцию, они должны быть представлены таким же образом, как в случае с почтовым сервисом Google, Gmail. На основе стиля организации клиентских почтовых приложений папки Gmail помечены как «Входящие», «Черновики», «Отправленные письма» и т. д. Язык, используемый для этих папок, показывает последовательность и знаком для всех, кто использовал почтовые приложения в прошлом.
Author/Copyright holder: David Bruce Jr. 2011. Copyright terms and licence: CC BY 2.0
Ярлыки папок в версии Gmail 2011 года отображают множество знакомых опций. Язык, используемый для этих папок, показывает последовательность, поскольку он использует метки «Входящие», «Черновики» и «Спам» — они знакомы всем, кто использовал почтовые приложения в прошлом.
2. Применение элементов пользовательского интерфейса так, как они первоначально определены
Элементы пользовательского интерфейса, которые обычно используются, такие как окна сообщений, строки меню, значки, полосы прокрутки и переключатели, являются графическими элементами, которые обычно последовательны и имеют визуальные отображения, которые понимают пользователи.
Например, селективные кнопки (radio buttons) используются, когда разрешена только одна опция. Флажки (checkboxes) с другой стороны должны использоваться только тогда, когда пользователю разрешено несколько вариантов. Во многом мы можем видеть, как HTML5 вытеснил технологию Flash на конец 2014 года. Одной из причин является, пожалуй, простота применения и простота использования, которую разработчики, дизайнеры и пользователи могут получить в результате последовательности и стандартов HTML5 в определении их UI элементов.
Селективные кнопки допускают только один вариант. Поэтому для встроенных селективных кнопок HTML разумно вести себя в функциональности так же.
Флажки допускают более одного варианта. Поэтому для встроенных флажков HTML имеет смысл вести себя в функциональности таким же образом.
Плохой пример последовательности в выборе UI элементов представлен в разделе комментариев, который раньше был в новостном веб-сайте BBC. Самые высоко оцененные комментарии пользователей обозначаются стрелкой на юг, но пользователи должны щелкнуть стрелку на север, чтобы увеличить рейтинг комментариев. Использование южной стрелки для представления комментариев с наивысшей оценкой также не интуитивно; увеличивающиеся цифры идут вверх, а не вниз. Когда пользователи просматривают раздел комментариев на веб-странице, они могут просто действовать в соответствии со стрелками, не читая ярлыки действий, что может привести к неправильному выбору.
Неспособность использовать широко применяемые визуальные отображения заставит пользователя сознательно взаимодействовать с пользовательским интерфейсом неудобным образом, что уменьшит скорость, с которой они могли бы осуществлять навигацию и выполнение желаемых задач.
Author/Copyright holder: BBC. Copyright terms and licence: Fair Use.
Раздел BBC Comment показывает стрелку вниз для «наивысшей оценки» и стрелку вверх для «самой низкой оценки». Это отображение является непоследовательным и запутанным для пользователей, так как понятие «наивысший» обычно является синонимом стрелки вверх, а «нижний» — синонимом стрелки вниз.
3. Использование различных устоявшихся соглашений при выборе схемы расположения
Это, конечно, спорно должен ли дизайнер «копировать», как другие люди планируют свои веб-сайты или приложения. Однако, когда вы разрабатываете с учетом перспективы и восприятия пользователя, важно понять, что люди имеют сильную память о том, где вещи визуально расположены на экране. Вы должны использовать эту характеристику, резервируя обычно используемые местоположения для различных графических элементов, таких как наличие логотипа в левом верхнем углу, поля поиска в правом верхнем углу, значок выхода в правом верхнем углу и т. д.
Author/Copyright holder: Microsoft Corporation. Copyright terms and licence: Fair Use.
Author/Copyright holder: Apple Inc. Copyright terms and licence: Fair Use.
И Microsoft, и Apple помещают свой логотип в верхнем левом углу, а поле поиска — в верхнем правом углу их веб-сайтов. Такая форма последовательности в схеме расположения помогает пользователям чувствовать себя менее дезориентированными, когда они просматривают новый и незнакомый сайт.
4. Дизайн для ожиданий пользователей
Убедитесь, что у вас есть возможности и функции, которые пользователи ожидали увидеть на вашем сайте. Например, на сайте авиакомпании должна быть система бронирования билетов, а на сайте обмена музыкой должен быть медиаплеер.
Author/Copyright holder: Youtube. Copyright terms and licence: Fair Use.
Ожидается, что на сайте видеообмена, таком как YouTube, появится видеоплеер. Это отличный пример последовательности в том, что функции и функциональные возможности сайта поддерживают то, что ожидает пользователь.
5. Создание последовательных визуальных элементов на вашем сайте
Убедитесь, что визуальные элементы последовательны на вашем сайте. Контент, элементы пользовательского интерфейса, шрифты, фоны и цвета должны быть в гармонии и ощущаться последовательными в каждой точке взаимодействия. Как упоминалось выше, придерживаться технических соглашений, которые существуют в форме HTML5 и CSS3, — это один из способов сохранения последовательности. Между тем, брендинг и руководство по стилю помогает в том случае, когда сталкиваешься с дизайнерскими решениями, такими как цвета и шрифты.
Author/Copyright holder: Jan-Alfred Barclay. Behance. Copyright terms and licence: CC BY-NC 4.0
Пример руководства по стилю и руководства по брендингу, разработанного для компании «Goodnyt». Наличие руководства по стилю и брендингу поможет вам убедиться, что ваши визуальные элементы последовательны на вашем сайте.
Плохой пример последовательности в выборе цветов и шрифтов можно увидеть в версии мобильного интерфейса Google Gmail от 2013 года. Хотя можно поспорить, что «значение» в данном случае не отображено, очевидно, что пользовательский опыт почти всегда ухудшается в результате каких-либо странных различий в визуальных элементах между экранами.
Author/Copyright holder: Google Inc. Copyright terms and licence: Fair Use
Скриншот мобильного пользовательского интерфейса приложения Gmail, когда он был впервые представлен в 2013 году, показывает непоследовательность в выборе цветных прямоугольников и стилей шрифтов.
В заключение
Последовательность и стандарты признаются основным принципом дизайна и должны применяться во всем содержимом вашего продукта и во всех взаимодействиях внутри него. Есть несколько аспектов последовательности, на которые мы можем обратить внимание при улучшении наших дизайнов, включая язык, который мы используем, элементы пользовательского интерфейса, которые мы выбираем, способ размещения нашего сайта, функции и возможности, которые мы включаем, а также визуальные компоненты, которые мы определяем, такие как цвет и шрифт.
В то время как последовательность помогает улучшить пользовательский интерфейс, устраняя ненужное обучение и путаницу для ваших пользователей, важно помнить, что вы должны использовать его, когда это необходимо, не отказывайтесь из-за него от инноваций по дизайнерским идеям там, где это имеет смысл.
Следование стандартам, соглашениям и последовательность – все это должно быть тем, что вы можете использовать в своих интересах. Это освободит вас от относительно тривиальных дизайнерских решений. Это поможет вам сэкономить время и освободит ваш разум, чтобы вы могли еще больше улучшить свои дизайны и пользовательский опыт для своих пользователей.
Ссылки и где узнать больше
Чтобы найти дополнительную информацию о «Повышение объяснительной силы эвристики юзабилити» Якоба Нильсена, смотрите здесь: https://static.aminer.org/pdf/PDF/000/089/679/enhancing_the_explanatory_power_of_usability_heuristics.pdf
Чтобы узнать больше о различии между искусством и дизайном, смотрите здесь:
http://www.hongkiat.com/blog/design-vs-art/
Чтобы узнать больше о различных аспектах последовательности, смотрите здесь:
http://www.sitepoint.com/why-consistency-is-critical/
Чтобы узнать больше о сбалансированной последовательности и инновациях, пожалуйста, смотрите здесь:
Hero Image: Author/Copyright holder: GraphBerry. Deviant Art. Copyright terms and license: CC BY-SA 3.0
Добавить комментарий