Изготовление сайтов в Славянске, ДНР. Обучаемость в веб-дизайне: 5 лучших практик

Вы когда-нибудь задумывались об улучшении обучаемости вашего продукта или веб-сайта? Возможно, вы впервые читаете о концепции обучаемости. Создание обучаемого веб-сайта — непростая задача, так как это требует некоторых экспериментов и A/B-тестирования.

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

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

последовательность

Обратная связь

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

знакомство

хранение

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

Обучаемость в веб-дизайне

Почему обучаемость имеет значение?

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

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

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

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

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

1. Консистенция

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

Почему? Пользователи уже видели этот дизайн и знают, как с ним взаимодействовать. Давайте сравним интерфейс Google Диска и Gmail. Обратите внимание на сходство в расположении таких элементов, как панель поиска, меню и кнопка действия.

Элементы на Google Диске

Например, на Google Диске есть большая кнопка призыва к действию с текстом «Новый» для создания нового файла или папки. Если мы сравним это с Gmail, мы обнаружим ту же кнопку призыва к действию «Создать», чтобы создать новое электронное письмо. Это позволяет пользователю, который плохо знаком с Gmail, но часто использует Google Диск, быстро понять назначение этой большой кнопки.

Интерфейс Gmail

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

2. Обратная связь

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

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

Три разных состояния кнопки: обычное, при наведении и активное.

Обратная связь может быть очень тонкой. Мы называем это микровзаимодействиями. Микровзаимодействия могут принимать форму:

анимация или эффекты перехода

изменение цвета

установлен флажок

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

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

3. Не изобретайте велосипед

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

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

Состав меню гамбургера от Рифайета Удая

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

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

4. Знакомство

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

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

Кроме того, знакомство создает надежность и помогает пользователям чувствовать себя уверенно при изучении и использовании незнакомого интерфейса. Например, если вы примените язык Google Material Design к своему веб-сайту, пользователи смогут распознавать элементы и знать, как с ними взаимодействовать. Поэтому они не боятся нажимать на определенную кнопку, так как знают, какого действия ожидать. Надежность — это ключ к тому, чтобы пользователь избавился от любых страхов перед изучением нового инструмента.

Совет: используйте стандартный набор значков, например Font Awesome, чтобы сделать интерфейс более знакомым.

Знакомые иконки Font Awesome

5. Сохранение

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

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

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

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

Вывод: обучаемость и распознавание образов

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

Я надеюсь, вы поняли, что внедрение обучаемости приносит реальную пользу. Для меня наиболее важным аспектом внимания к обучаемости является улучшение пользовательского опыта. В настоящее время продукты разрабатываются с мыслью о пользователе. Итак, зачем вам разрабатывать продукт, который не учитывает фактор обучаемости вашего интерфейса? У вас может быть потрясающий продукт, но сложный пользовательский интерфейс.

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