Оригинал статьи: https://www.interaction-design.org/literature/article/the-self-generation-effect-how-to-create-more-memorable-user-interfaces

Автор — Эуфемия Вонг (Euphemia Wong)

Узнайте, как усовершенствовать опыт взаимодействия (user experience), включив эффект самогенерации (self-generation effect) в ваш пользовательский интерфейс. Данный эффект предлагается во многих настройках инструментов, встроенных в одни из наиболее широко используемых продуктов. Это явление обеспечивает пользователям чувство контроля, поскольку они настраивают свои собственные инструменты и функциональные возможности. Adobe Photoshop, Microsoft Word, настройки игрового контроллера EA Sports и мыши серии Logitech MX — это всего лишь малая часть среди многих популярных продуктов, которые имеют эффект самогенерации, отраженный в их дизайнах. Эта статья научит вас, как данный эффект применяется в дизайне пользовательского интерфейса и даст вам идеи о том, как включить его в свои собственные проекты, просмотрев примеры как из программного обеспечения/веб, так и физических продуктов.

Эффект самогенерации (The Self-Generation Effect)

Эффект самогенерации описывает, как лучше запоминать информацию, когда она самовоспроизводится, вместо того, чтобы пассивно поглощать и взаимодействовать с ней. Это явление изучали различные исследователи когнитивной науки, включая Нормана Сламецку и Питера Графа (1978), оно рассматривалось во многих упражнениях по извлечению воспоминаний (recall exercises), включающих в себя устную информацию, картинки, а также арифметические проблемы.

Одна из теорий для эффекта самогенерации — это гипотеза лексической активации, которую исследовали ученые-когнитивисты Джон Гардинер и Джеймс Хэмптон (1985) (John Gardiner, James Hampton). Она объясняет, что процесс генерации информации требует большего вовлечения семантической памяти, чем простого чтения. Гардинер и Хэмптон предложили гипотезу лексической активации, основанную на трех экспериментальных результатах, которые поддерживают их теорию. Один эксперимент тестировал участников на однородном наборе буквенных биграмм, последовательность из двух смежных элементов из строки букв. В результате эффективность воспроизведения воспоминаний была намного хуже при изучении бессмысленных биграмм, чем при изучении значимых известных аббревиатур. Второй эксперимент тестировал участников как на целых, так и на нецелых числах (например, 25 против 2, 5). Результат показал, что эффект самогенерации проявляется в воспроизведении целых чисел, а для нецелых нет. В третьем эксперименте, изученном Гардинером и Хэмптоном, участники были испытаны как на знакомых, так и на незнакомых парах слов, образующих составные существительные, существительные, состоящие из двух или более слов. Они обнаружили, что эффект самогенерации проявляется только тогда, когда участникам предоставляются значащие знакомые пары слов (например, чизкейк), а не бессмысленные незнакомые словосочетания (например, сырный кетчуп).

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

«Если вы хотите, чтобы было сделано хорошо, сделайте это сами» — Наполеон Бонапарт

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

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

4 примера того, как эффект самогенерации должен влиять на UX дизайн

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

1. Настраиваемые рабочие области в Adobe Photoshop

Adobe Photoshop, созданный крупной североамериканской компьютерной компанией Adobe Systems Incorporated, является отличным примером того, как использование эффекта самогенерации в дизайне пользовательского интерфейса может сделать продукт широко популярным и успешным. Одна из многих причин для пользователей любить Photoshop — это гибкость и эффективность, создаваемые с помощью самогенерируемых рабочих пространств. Пользователи могут использовать эту гибкость путем организации и добавления к рабочему пространству, а также делая вещи более эффективными, сохраняя их для будущего использования. Таким образом, пользователи лучше помнят, где расположены их инструменты, что представляет собой лучший пользовательский интерфейс, поскольку для пользователя при каждом открытии приложения задействовано меньшее количества запоминаний и когнитивного разногласия (cognitive friction).

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

2. Настраиваемая панель инструментов в Microsoft Word

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

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

3. Настраиваемые консоли-элементы управления в FIFA

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

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

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

4. Настраиваемые кнопки в беспроводной мыши Logitech MX Master

Беспроводная мышь Logitech MX Master от Logitech International S.A. является еще одним отличным примером того, как физический продукт может быть разработан для пользовательской настройки, чтобы обеспечить эффект самогенерации и обеспечить потребителю более широкий пользовательский опыт.

Logitech MX Master Wireless Mouse значительно облегчает жизнь пользователям, предоставляя больше контроля над тем, как они хотят настроить свою мышь, создавая свои собственные функции, чтобы повысить производительность и эффективность при использовании своего продукта.

В заключение

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

Ссылки и где узнать больше

Чтобы найти более подробную информацию об «Эффекте самогенерации: описание феномена» Сламека и Графа (Slamecka и Graf) (1978), смотрите тут:

http://worthylab.tamu.edu/Courses_files/Generation%20Effect%20Slamecka%20%26%20Graf%20(1978).%20JEP-HLM.pdf

Чтобы найти дополнительную информацию о книге «Семантическая память и эффект генерации: некоторые тесты гипотезы лексической активации» Гардинера и Хэмптона (1985), смотрите тут:

http://www.staff.city.ac.uk/hampton/PDF%20files/Gardiner&Hampton1985-11-732.pdf

Оригинал статьи: https://www.interaction-design.org/literature/article/getting-lost-and-found-maps-and-the-mobile-user-experience?utm_source=newsletter&utm_medium=email&utm_content=letter2018-02-06&utm_campaign=subscribers

Возможность использования данных карт и GPS на платформах смартфонов дает разработчикам возможность улучшить пользовательский опыт (user experience) своих продуктов. Однако, чтобы карты отображали лучший опыт для пользователей — важно включать эти функции с учетом UX. Существуют некоторые правила, которые можно использовать, чтобы увеличить шансы на успех при использовании данных местоположения и карт в мобильных приложениях.

Нет сомнения, что смартфон дает пользователям и дизайнерам множество вариантов, когда речь идет о новых возможностях; одной из самых популярных из них является функция GPS (Глобальная система определения местоположения — Global Positioning System). GPS может использоваться для определения местоположения пользователя и объединяться с данными карты, чтобы дать пользователям возможность находить местоположение и варианты дорог к нему.

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

Исследования, проведенные Nielsen Norman Group, показали, что при демонстрации мобильного сайта, который не включал карту на страницах результатов поиска местоположения — ни один пользователь не пожелал, чтобы карта была предоставлена. Фактически, их исследование рекомендовало, чтобы карты были для пользователей переключаемой возможностью, и чтобы данные местоположения были в виде списка, который выводится по заказу расстояния от ближайшего местоположения.

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

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

Прокрутка и панорамирование

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

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

Противоречия точек объектов с целевыми размерами

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

Точки на картах слишком часто оказываются меньше этой цели в 36 x 36 пикселей, что затрудняет присоединение пользователя к цели и взаимодействие с ней.

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

Сенсорные экраны, сети и другие проблемы

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

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

Контроль жестов

Чем проще вы держите пользовательский интерфейс на карте, тем больше вероятность того, что ваши значки (pins) и элементы управления будут соответствовать этому ориентиру в 36 x 36 пикселей для точек касания. Это не означает, что вы не можете предлагать дополнительные функции пользователю карты. Это означает, что вам нужно будет рассмотреть жесты управления для этой дополнительной интерактивной функциональности. Эти жесты управления могут быть не сразу очевидны или интуитивно понятны для пользователя, поэтому их нужно будет осторожно применять, чтобы внести реальную ценность в user-experience.

Размещение панели инструментов

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

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

Помощь и выход

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

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

Ссылки:

Тематическое исследование внедрения карт с использованием Google-карт — http://www.tnooz.com/article/lessons-for-mobile-app-developers-on-why-google-maps-for-iphone-looks-so-good/

Интересное исследование проблем использования для данных карт в мобильных приложениях — http://www.slideshare.net/fgarofalo/ux-considerations-for-mapping-apps-on-touch-devices

Брэд Фрост исследует адаптивную карту здесь — http://bradfrost.com/blog/post/adaptive-maps/

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

https://www.nngroup.com/articles/mobile-subnavigation/

Автор — Ралука Будиу (Raluca Budiu)

Исходя из того, сколько категорий нижнего уровня в информационной архитектуре сайта (information architecture, IA) и пользовательских навигационных шаблонах, можно определить наиболее подходящий вариант.

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

Cisco.com: Для десктопа применяют горизонтальную панель навигации, включающую главные категории. Если навести курсор мышки, появляется мега-меню с подкатегориями второго и третьего уровня. Они раскрывают все главные категории. Мега-меню делится на три столбика, а внизу содержит список вкладок.

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

Дизайнерские цели

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

Приступая к разработке поднавигаций ставьте перед собой такие дизайнерские цели:

1. Наименьшая стоимость взаимодействия: необходимо, чтобы пользователи могли добраться до элемента, который их интересует, прилагая минимум усилий. То есть, немного нажать, прокрутить, и не ждать загрузки страниц.
2. Поддержка стандартного пути пользователя: если за одно посещение сайта пользователю приходится перемещаться с одной страницы определенного раздела в совсем противоположную часть, целью поднавигации будет — облегчить эту задачу. В ином случае, когда большая часть посетителей будет «жить» в одном разделе сайта (например, в спортивном разделе газеты), поднавигацию нужно фокусировать на поддержание этого шаблона.
3. Возможность нахождения: пользователи не должны тратить много времени на то, чтобы найти элементы поднавигации. При этом они не должны повторять вид основного меню, чтобы посетители их не путали.

Виды мобильной навигации

Выделяют четыре простых способа разработки дизайна поднавигации для мобильных устройств:

• Меню аккордеон (или «подменю») в рамках главного меню (Accordions)
• Меню секций или разделов (Sequential menus)
• Последовательное меню (Section menus)
• Категориальные посадочные или целевые страницы (Category landing pages)

Меню аккордеон

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

Tide.com отображает поднавигацию с помощью аккордеонов

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

SBNation.com расширяет основные навигационные категории с помощью аккордеон-меню. Но подкатегории, к сожалению, занимают более трёх полных экранов и затрудняют человеку поиск  одного интересующего объекта. (Однако то, что меню включает имена команд в алфавитном порядке, немного сглаживает эту проблему, поскольку пользователям не нужно читать все ярлыки и искать нужную команду.)

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

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

Seventhgeneration.com: Цвет показывает отличие между главными и нижнеуровневыми категориями

Последовательное меню

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

HIV.gov: Выбирая основную категорию из главного меню, мы видим не исходную навигацию, а соответствующие подкатегории. Переходить от одного раздела сайта к другому можно с помощью кнопки «Назад», которая находится внутри меню.

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

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

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

(Замечание: лучше воздержаться от отображения меню сверху загруженного изображения, как показано на картинке.)

Есть сайты, которые вместо кнопки «Назад» намеренно используют другой знак для переходов по меню верхнего уровня. Например, в меню сайта Macy отображается специальная цепочка навигации («тропа хлебных крошек» —  trail of breadcrumbss), позволяющая пользователям подниматься по IA сайта.

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

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

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

Mayoclinic.com: Наше исследование показало, что большая часть участников испытания не нашли путь к категориям высшего уровня (отображены справа), и подумали, что на сайте кроме подкатегорий в данных разделах больше ничего нет.

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

Последовательное меню отличается умеренной стоимостью взаимодействия (при наличии 1-2 подуровней в навигационной иерархии) и дает пользователям возможность с легкостью перемещаться по сайту (при условии, что они учатся, как это делать), но в то же время оно может привести к дезориентации. Посетители сайта могут просто не понять, в какой части сайта они находятся и каким образом определить принадлежность категорий к разным уровням IA. Поскольку пользователи испытывают сложности в различении кнопки «Назад» в последовательных меню и в браузере, лучше исключить их использование в поднавигации.

Меню секций или разделов

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

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

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

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

Приведенный выше пример Би-би-си хорошо подходит к названным выше критериям.

Breastcancer.org: Основное меню (слева) и меню раздела (справа) отображены с помощью одинакового элемента (значок «Меню»). Посетители могут не понять, что разные функции одной кнопки зависят от расположения, поэтому они не станут нажимать на «Меню» для перехода к подкатегории текущей категории.

Mayoclinic: Меню раздела и главное меню в достаточной мере отличаются по внешнему виду, так что у людей не будет проблем со спутыванием одного с другим

Категориальные целевые страницы

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

Stanford.edu: Для осуществления поднавигации используются категориальные целевые страницы. Например, у целевой страницы «Admission» больше шести информационных экранов и ссылок к разнообразным подкатегориям.

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

Вывод

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

• При наличии 6 и меньше подкатегорий для всех главных категорий, подменю или аккордеон-меню в основной навигации могут быть уместны.
• Если число подкатегорий от 6 до 15 хотя бы для некоторых главных категорий, то стоит рассмотреть вариант меню разделов.
• При количество более 15 подкатегорий для одной главной категории рассмотрите вариант с категориальной целевой страницей.

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

Ссылки:

Гарри Хохейзер, Бен Шнейдерман (Harry Hochheiser, Ben Shneiderman). Преимущества использования одновременных над последовательными меню в качестве сложности задачи. Международный журнал взаимодействия человека с компьютером, 2009.

Мари Кармен Пуэрта Мелгизо, Ути Видья и Герре ван Остендорп (Mari Carmen Puerta Melguizo, Uti Vidya, and Herre van Oostendorp). Поиск информации в Интернете: влияние типа меню, сложность пути навигации и пространственные возможности при сборе информации. Поведение и информационные технологии, 2012

Они осветляют подводные камни в работе дизайнера для того, чтобы избежать и дать нам понять, как правильно перевести теории дизайна в решения, которые работают в реальном мире. Джаред Спул (Jared Spool), американский писатель, исследователь и эксперт по удобству использования («usability»), однажды сказал: «Хороший дизайн, когда он выполнен правильно, становится невидимым. Только когда он сделан бедно, мы замечаем его». Что же, давайте посмотрим на пять примеров очевидно плохого дизайна и прольем свет на то, как хороший дизайн может работать сам на себя. А также извлечём несколько уроков, как мы все можем создавать прекрасный и невидимый опыт для наших пользователей.  

Оригинал статьи: https://www.interaction-design.org/literature/article/bad-design-vs-good-design-5-examples-we-can-learn-frombad-design-vs-good-design-5-examples-we-can-learn-from-130706

1.Информационная перегрузка

Плохой пример: Дорожные знаки на парковке в Лос Анджелесе (Los Angeles, далее – LA)

Дорожные знаки на парковках LA являются олицетворением информационной перегрузки уже не первое десятилетие. Они всегда были трудны для понимания, потому как правила дорожного движения сами по себе сложны, что в результате приводит к необходимости передачи большого количества информации на маленькой площади. Насколько эти знаки запутаны? Как показывает практика – очень. Можете убедиться в этом, глядя на пример такого знака с 2010 года.

Поскольку такие знаки на парковках ЛА до сих пор существуют, то, пожалуй —  это яркий пример.

Представьте на минуту, что Вы – водитель, который едет вдоль дороги во вторник, в 9 утра. Можно ли Вам припарковаться в этом месте? То, что звучит как простой вопрос, требует большого процесса размышления для ответа. Как дизайнеры, мы часто сталкиваемся с ситуациями, где мы должны передать  много информации на маленьком пространстве. Знаки на парковках LA могли бы быть крайним случаем, но часто разработка дизайна для мобильных приложений означает столкновение с такой же проблемой. Можно ли найти выход в таких ситуациях: для знаков на парковке и дизайнеров в целом?

Хороший пример: Дорожные знаки Никки Сильянтенга (Nikki Sylianteng)

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

Вариант, который предложил Никки, в конечном счете был использован на парковках ЛА ­­в тестовом режиме.

Одна из причин удачного дизайна Никки– это использование в работе принципа, что называется «ориентация на пользователя»: дизайнер дает водителям просто понять, когда они могут парковаться. Ведь всё, что нужно водителям – это ДА или НЕТ, а именно такой знак им в этом легко поможет.

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

Сейчас, когда вы смотрите на знак, вы знаете, что парковка во вторник, в 9 утра не разрешена.

Бары доказывают, как на первый взгляд – всё просто.

Извлеченный урок: лучшая практика

• Необходимо понимать, что именно нужно вашим пользователям, затем разработать дизайн, основанный на этом. Это помогает уменьшить информационную перегрузку.
• У вас много информации для передачи вашим пользователей? Попробуйте визуализацию вместо текса. Изучайте больше про визуализацию данных здесь. https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/data-visualization-for-human-perception

2. Скрытая навигация

Плохой пример: LazorOffice.com

Придуманный в 1998 году Винсентом Фландерсом с компании Web Pages That Suck, термин «скрытая навигация (далее — СМН)» относится к кейсам, когда назначения посыла невидимо, пока пользователь не кликнет на это или не наведет курсор мыши. Термин «скрытое мясо» произошел от ситуации с подачи еды в столовых общеобразовательных американских школ: мясо для учеников подавалось так, что совсем не был понятен его первоначальный вид. Использование в дизайне таких элементов плохо влияет на результат, потому что они снижают понятность навигации в целом. Это добавляет когнитивной нагрузки пользователям, потому что теперь они должны догадаться, как именно передвигаться или какой клик ведет за собой определенное действие.

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

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

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

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

Хороший пример: Карточки курсов на веб-сайте The Interaction Design Foundation.

Слава Богу, проблемы СМН легко решаемые. Ключ к решению  — это четкое осознание того, что у вас должны быть предельно ясные метки на ссылки. Простое добавление «Просмотреть проект», что появляется при наведении курсора мыши, намного улучшит удобство пользования страницей Lazor Office.

Наши карточки курсов также НЕ секретны, как и наши ссылки.

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

Извлеченный урок: лучшие практики

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

3. Создание дизайна, который добавляет преграды к совершению действий.

Плохой пример: iFly50.com

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

Ярким примером такого случая есть продукт iFly50.com, который был создан в честь юбилея журнала iFly от KLM. На этом сайте вы сможете увидеть 50 мест для путешествий, используя вертикальную прокрутку, а в некоторых пунктах назначения (как показано на примере ниже) появляется кнопка внизу, которая заставляет пользователя удерживать её несколько секунд при желании просмотреть большее количество фотографий.

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

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

Хороший пример: эластичная прокрутка на iOS

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

У корпорации Apple есть отличный продукт, который был разработан для мобильной операционной системы IOS. Этот продукт называется «эластичная прокрутка». Смысл такой прокрутки в том, что когда вы попадаете в определенное место или ситуацию (например, в конец веб-страницы), вам становится труднее прокручивать страницу. То есть, к действию пользователя осознанно и намеренно добавляется помеха.

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

Извлеченный урок: лучшая практика

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

4. «Умный» дизайн: когда удобство использования не имеет значения

Плохо: Bolden.nl

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

Отличный пример вышесказанного – голландский сайт развития и стратегического дизайна Bolden:

Можете ли вы сказать, что именно пытается донести до вас домашняя страница? Скорее всего, нет. Ведь для того, чтобы понять послание и растолковать его правильно – вы должны перевести курсор мыши в один из углов страницы.

Сразу видно, что это «умный» дизайн, ведь так? Да, безусловно. Но также понятно, что это абсолютно плохой дизайн!

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

Хороший пример: CultivatedWit.com

Веб-сайт Cultivated Wit`s – это отличный пример того, как «умный» дизайн не должен влиять на удобство пользования.

Домашняя страница Cultivated Wit отображает изображение совы.

На домашней странице Cultivated Wit вы можете увидеть изображение совы, которое меняется, когда ваша мышь попадает на неё.

Сюрприз! Сова моргает вам, когда вы наводите курсор на неё. Обратите внимание на разумное распределение белого пространства.

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

Разница между этим дизайном и дизайном Bolden в том, что сова не является важной частью веб-сайта и никак не влияет на UX. То есть, ничего не изменится, если вдруг пользователь не обратит внимание на такой элемент «умного дизайна».

Кроме того, вы можете увидеть четкую стрелку, которая указывает направление вниз. Это помогает интуитивно понять, что внизу вас ожидает еще что-то. И вот, при прокрутке страницы, вы увидите это:

И веб-сайты могут быть «умными» без ущерба UX (user experience).

Копия (четкая, которая выделяется на контрасте) создает смысл остроумия. Но, к сожалению, это не похоже на то, что пытались достичь Bolden, что понесло за собой ухудшение удобства использования. Есть только одна маленькая проблема – это текст «Join our email club». Он, без сомнения, должен быть более видимым, но если брать в целом, то вебсайт Cultivated Wit – это отличный пример использования «умного» дизайна без создания убогого UX.

Извлеченный урок: лучшая практика

«Умные» дизайны должны всегда быть сделаны настолько просто, насколько это возможно и/или протестировано на актуальных пользователях. Иногда «умный» дизайн может навредить удобству использования.

5. Чрезмерная анимация

Плохой пример: Концепция чека от PayPal на Dribbble

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

Концепция чека для PayPal, которая была разработала Владиславом Тузиным и размещена на Dribbble – это пример, как плохо можно использовать анимацию:

Анимация – красивая, но её чересчур много. В общей сложности, она отбирает 3,5 секунды чтобы посмотреть детали транзакции. Появление самого чека могло бы быть более изящным: это забирало бы меньше времени и было лучше для пользователя.

Проблема становится всё опасней, ведь дизайнерам никогда не бывает достаточно анимации. С 2016 года разработка Владислава получила больше, чем 500 лайков и 8000 просмотров. Это показывает то, насколько ошибочно дизайнеры оценивают качество анимации. Теперь, понимая тенденции среди дизайнеров выбирать напыщенные эпики, вы сможете хорошенько подумать и предотвратить головную боль. Помните о том, что пользователи приходят на сайт с целью  — мы хотим показать им все, что нужно в короткие сроки, а не пускать их в грандиозный тур по галерее.

Хороший пример: Анимация проверки у Stripe

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

Stripe используют анимацию, чтобы заставить вещи быть быстрее, чем они есть на самом деле: это обеспечивает пользователей своевременной информацией (например, «Отправлено»), даже если они еще не получили смс-сообщение. Это помогает предотвратить чувство фрустрации у пользователя и обеспечивает уверенностью, что смс уже на правильном пути.

Рейчел Наборс, приглашенный эксперт в области веб-анимации в W3C, предлагает 5 принципов, которые необходимо помнить при создании анимации:

1. Осознанная анимация: продумайте каждую анимацию, прежде чем создать её.
2. Создание анимации несет в себе больше, чем 12 принципов: 12 принципов работы с анимацией от Диснея работает для фильмов, но никак не для веб-сайтов и приложений.
3. Польза и необходимость, потом красота: эстетика должна занимать последнее место, когда речь идет об UX.
4. Сделай ее в четыре раза быстрее: хорошая анимация обычно ненавязчивая, что означает, что она «бежит» быстро.
5. Установите «kill switch» : для больших анимаций, таких как эффект параллакса, создайте кнопку отказа.

Извлеченный урок: лучшая практика:

Всегда делайте вашу анимацию целенаправленной: очень многое может убить UX продукта. Красота должна  быть функциональной.

Забери с собой:

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

1. Поймите, что нужно вашим пользователям, потом передайте эту информацию.
2. Если у вас много информации, которую нужно передать – попробуйте использовать визуализацию вместо текста.
3. Всегда ставьте метки на ваших ссылки! Пользователям не нравятся тайные ссылки.
4. Избегайте добавления любых помех к действиям пользователя, если они не должны отговорить от действия.
5. Протестируйте ваш «умный» дизайн и используйте его осторожно.
6. Анимация как проклятие: если вы будете злоупотреблять ею, то она потеряет свое влияние.

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

Оригинал статьи: https://www.interaction-design.org/literature/article/user-interface-design-guidelines-10-rules-of-thumb

10 правил Нильсена (Nielsen) и Молика (Molich) по дизайну пользовательского интерфейса

В 1990 году Якоб Нильсен (Jakob Nielsen) — известный консультант по веб-дизайну и партнер в Nielsen Norman Group, вместе с Рольф Моликом (Rolf Molich) — еще один выдающийся эксперт по вопросам использования продуктов и доступности проектов, обнародовали список из 10 правил, которые помогут в разработке удобного интерфейса для пользователя. Обратите внимание, что между методами Нильсена — Молика (Nielsen-Molich) и работой “8 золотых правил” Бена Шнейдермана (Ben Shneiderman) — много общего! Кроме того, спустя 4 года после первоначальной публикации Шнейдермана (Shneiderman), эти 10 общепринятых рекомендации повторили и дополнили 8 золотых правил Бена Шнейдермана (Ben Shneiderman).

• Видимость системного статуса

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

• Соответствие системы и реального мира

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

• Пользовательский контроль и свобода действий

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

• Логичность и стандарты

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

• Предотвращение ошибок

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

1. Воспринять, а не запомнить

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

• Гибкость и эффективность использования

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

• Эстетический и минималистский дизайн

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

• Помогите пользователям распознать, диагностировать и оправиться после ошибки

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

• Помощь и документация

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

Корпорация Google — многомиллиардная технологическая компания, безусловно, создает проекты, которые отражают вышеупомянутые методы. Джон Уайли (Jon Wiley) — главный дизайнер поисковика Google в 2012 году сказал:

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

Вышеупомянутые рекомендации Нильсена — Молика (Nielsen-Molich) по созданию удобного интерфейса для пользователя, также включают в себя эти три ключевые компонента. Это означает, что вы можете улучшить впечатление пользователя о вашем дизайне и проекте в целом, используя и применяя данные руководства.

Пример того, как Adobe удачно интегрирует эвристики Нильсена и Молика

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

Давайте подробно рассмотрим, как Adobe Photoshop применяет каждый метод! Возможно, это вдохновит вас на улучшение удобства использования, полезности и востребовательности ваших проектов, путем включения 10 эмпирических правил.

1. Видимость системного статуса

Photoshop позволяет пользователю видеть и понимать, что происходит с программой, визуально показывая к чему привели их действия.  Например, когда пользователи передвигают слои в палитре «Слои», они могут наблюдать, как выбранный слой физически перемещается в пространстве (на экране монитора). Графика курсора также изменяется: когда пользователь перетаскивает слой палитры, курсор от открытой руки переходит к захваченной руке.

2. Соответствие системы реальному миру

Яркий пример того, как Photoshop имитирует реальный мир в терминах и представлениях, которые понимают их целевые пользователи — это использование информационной структуры и терминологии, такой же как мы привыкли слышать в реальном мире, в сфере фотографии и печатных СМИ. Привычные концепции и термины, такие как RGB, Hue / Saturation / Brightness и CMYK, используются для представления цвета, в то время, как различные инструменты, такие как  “Осветлитель” (англ. — “dodge tool”)  и “Затемнитель” (англ. — “burn tool”), имитируют традиционную технику темной комнаты для фотографий.

Author/Copyright holder: Adobe Systems Incorporated. Copyright terms and licence: Fair Use

Такие инструменты фотошопа как Dodge Tool и Burn Tool имитируют традиционную технику темной комнаты для фотографий.

Заметим, что Photoshop использует термин «экспозиция», так же как обычно им пользуются в мире фотографии.

3. Пользовательский контроль и свобода действий

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

Пользователи все контролируют, они могут сделать шаг назад/шаг вперед в меню «Правка» или использовать быстрые клавиши Photoshop — Alt + Ctrl + Z.

4. Логичность и стандарты

Photoshop придерживается стандартного формата и внешнего вида, когда дело доходит до строки меню. Они также используют общеизвестную терминологию, такую как: «Новый …», «Открыть …», «Сохранить как …» и т. д.

Меню «Файл» в Photoshop включает в себя множество знакомых опций.

5. Предотвращение ошибок

Чтобы пользователи не делали ошибок, Photoshop дает краткое описание или обозначение инструментов, при наведении на них курсором. Таким образом, человек понимает, подходит ему инструмент или нет.

Пользователь наводит на значок ластика и Photoshop отображает метку «Ластик».

6. Восприятие, а не запоминание

Абсолютно не важно, какое действие будет выполнять пользователь, будь то добавление фильтров или открытие нового файла, Photoshop поможет человеку сделать правильный выбор! Это позволяет пользователю визуально распознавать то, что они ищут, вместо того, чтобы вспоминать имя или искать что-то в поиске фотошопа. Возможно, вы сталкивались с другими программами редактирования фотографий, которые просили вспоминать и вводить имя нужного вам файла. На самом деле, довольно-таки сложно вспомнить название файла, так как в основном оно выглядит подобным образом: 29412_09342.JPG

Пользователю легко визуально распознать изображение заката по миниатюре и выбрать его.

7. Гибкость и эффективность использования

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

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

8. Эстетический и минималистский дизайн

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

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

9. Помощь пользователю в распознании, диагностике и восстановлению после ошибки

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

В этом сообщении об ошибке, Photoshop объясняет, что пошло не так, какая причина и как устранить неполадки.

10. Помощь и документация

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

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

10 шагов для улучшения удобства использования, полезности и востребовательности проекта, путем применения рекомендаций Нильсена и Молика ( Nielsen and Molich’s Interface Design Guidelines)

Как разработчик, вы должны уметь оценивать и критиковать дизайн собственных проектов так же хорошо, как и работу других разработчиков, опираясь на обоснованные доводы и знания! Применение 10 общепринятых правил Нильсена и Молика  (Nielsen and Molich’s Guidelines), при оценке дизайна вашего интерфейса, поможет лучше понять и увидеть потенциальные проблемы, создать прекрасные впечатления пользователя от вашего проекта. Ниже вы найдете рабочую таблицу где сможете практиковаться, как только научитесь распознавать, применялись ли данные правила и когда они были нарушены. Ну что ж… Наконец-то пришло время улучшить сайт или приложение, применяя 10 известных правил.

Напоследок…

Опираясь на инструкции по интерфейсу Нильсена и Молика (Nielsen and Molich), вы должны всегда помнить об удобстве использования, полезности и целесообразности вашего проекта для пользователя! Ровным счетом, так же как и дизайнеры успешных компаний (Apple, Google и Adobe), при разработке проекта, вы будете поддерживать свои решения с эвристикой и убеждаться в том, что создаете полезный и красивый дизайн! Чтобы практиковать распознавание этих 10 эмпирических правил, продолжайте работу и выполните упражнение, описанное в прикрепленном файле.

Рекомендации:

Чтобы просмотреть «Исследование удобства использования Adobe Photoshop», перейдите по ссылке:
https://courses.cs.washington.edu/courses/cse595/98wi/projects/photoshop.html

Чтобы найти дополнительную информацию о работе Якоба Нильсена (Jakob Nielsen) «Повышение объяснительной силы юзабилити », см.

https://static.aminer.org/pdf/PDF/000/089/679/enhancing_the_explanatory_power_of_usability_heuristics.pdf

Чтобы просмотреть дополнительную информацию о дизайнерском мышлении Джона Вилей (Jon Wiley), пожалуйста, перейдите по ссылке:

https://www.fastcodesign.com/1671425/how-googles-designers-are-quietly-overhauling-search

Оригинал статьи: https://www.interaction-design.org/literature/article/etch-a-sketch-how-to-use-sketching-in-user-experience-design

Билл Бакстон, пионер из Канады в области взаимодействия человека и компьютера и главный дизайнер Microsoft Research, считает, что в разработке программного обеспечения отсутствует «процесс проектирования», который помогает разработчикам UX получить четкость в отношении своих проектных решений до создания системы. Исходя из этого, Бакстон и его коллеги написали Sketching User Experiences: Getting the Design Right and the Right Design, 2007.

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

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

— Билл Бакстон

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

 

Преимущества эскизов

В частности, эскизы могут помочь вам в процессе проектирования следующими способами (Greenberg et al., Стр. 4):

• Более открыто и творчески думать о своих идеях
• Создавать шикарные идеи, не беспокоясь об их качестве
• Изобретать и исследовать концепции, быстро фикируя идеи
• Фиксировать идеи, с которыми вы сталкиваетесь
• Обсуждать, критиковать и делиться идеями с другими
• Выбирать стоящие идеи
• Накапливать свои идеи для последующего размышления
• Получать удовольствие при разработке

Это эскиз?

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

• Быстры: не нужно долго делать
• Своевременны: создавайте их, когда возникнет такая необходимость.
• Одноразовы
• Достаточны: создавайте эскизы как коллекцию, которая иллюстрирует различные аспекты взаимодействия с течением времени.
• Минималистичны: используйте эскизы, чтобы разработать одну концепцию за раз.

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

— Билл Бакстон

Эскизы против прототипов, сражайтесь!

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

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

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

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

— Билл Бакстон

Author/Copyright holder:Jorge Gonzalez. Copyright terms and licence: CC BY-SA 2.0

Эскизы и прототипы по-разному применяются в проектной воронке. Адаптировано от Билла Бакстона, опыт пользователя Sketching: получение права на дизайн и правильный дизайн, 2007.

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

Author/Copyright holder: Jose Rojas and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-ND

Конструкционная воронка иллюстрирует использование эскизов для определения правильной конструкции, а также применение методов юзабилити для ее усовершенствования. По мере увеличения инвестиций (красная стрелка) вы теряете возможность вносить существенные изменения в выбранный проект. Адаптировано от Билла Бакстона, Bill Buxton Sketching User Experiences: Getting the Design Right and the Right Design, 2007.

Получение правильного дизайна

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

Author/Copyright holder: Jose Rojas and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-ND

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

Адаптировано от Билла Бакстона, Sketching User Experiences: Getting the Design Right and the Right Design, 2007.

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

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

Более того, все отзывы коллег и пользователей будут направлены только на то единственное решение, которое вы представите. Это обстоятельство может еще больше дезориентировать вас, оставит без альтернативных возможностей. Кроме того, клиенты относятся предвзято к презентации одного проекта или концепции. Они могут отреагировать сдержано и проявить меньше заинтересованности, чем при наличии возможности выбора из нескольких вариантов дизайна (Tohidi et al., 2006).

«… дизайн — это отличная дисциплина. Он включает в себя уникальные навыки, которые имеют решающее значение для формования новых технологий […] в форму, которая служит нашему обществу и отражает его ценности. Это отнюдь не роскошь, информированный дизайн имеет важное значение с технической, экономической и культурной точек зрения ».

— Билл Бакстон

Достижение правильного дизайна

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

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

Author/Copyright holder: Jose Rojas and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-ND

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

Bill Buxton Sketching User Experiences: Getting the Design Right and the Right Design, 2007.

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

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

Author/Copyright holder: Jose Rojas and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-ND

Полный обзор роли дизайна, юзабилити и других областей бизнес-предприятия в цикле разработки продукта. Адаптировано от Саула Гринберга, Sheelagh Carpendale, Николая Марквардта и Билла Бакстона, Sketching User Experience: The Workbook, 2011.

ABC’s Sketching

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

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

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

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

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

Author/Copyright holder: Jose Rojas and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-ND

Используйте вариации осанки, эмоции лица и объекты для передачи широкого спектра действий и ситуаций. Адаптировано от Саула Гринберга, Sheelagh Carpendale, Николая Марквардта и Билла Бакстона, Sketching User Experience: The Workbook, 2011.

Улучшение эскиза: аннотации, стрелки и заметки

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

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

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

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

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

Author/Copyright holder: Yandle. Copyright terms and licence: CC BY-SA 2.0

Аннотации, стрелки и заметки увеличивают коммуникативную силу ваших эскизов.

Методы эскизов

Вы также можете использовать эскиз, как метод сбора информации. Используйте эскизы для «захвата» идей и / или проектов, с которыми вы сталкиваетесь в своей повседневной деятельности. Добавьте их в свой банк знаний, чтобы ремикшировать, влиять, вдохновлять или управлять своими идеями в разных и, возможно, неожиданных и инновационных направлениях. Чтобы помочь вам в этом процессе, мы приводим ниже два простых подхода к сбору виртуальных и реальных проектов.

1. Начертание эскиза

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

Author/Copyright holder: Espen Klem. Copyright terms and licence: CC BY 2.0

Определите суть объекта, дизайна или действия, которое вы собираетесь сделать

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

2. Отбор проб с помощью камер

Цель этого метода — использовать неподвижные фотографии и видео для отображения некоторых особенностей мира. Вы можете применить эту методику во время своих еженедельных покупок в продуктовых магазинах, при поездке на работу, или, когда вы встречаетесь с друзьями на ужин. Широкое распространение смартфонов облегчает эту задачу. «Захватывайте» объекты, проекты и действия, которые радуют, вдохновляют и раздражают вас.

Запись неудачных проектных усилий

Используйте описанные два метода, чтобы сохранить неудачные попытки проектирования. Соберите объекты и ситуации, которые вас раздражают. Запишите причины этого негативного эффекта. Это упражнение поможет вам развить «критический взгляд». Критический взгляд позволит вам даже идентифицировать недостатки вашей собственной работы. При этом вы будете развивать и демонстрировать более сложные дизайнерские навыки.

Запись успешного проекта

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

Взять с собой

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

Ссылки и где узнать больше

Bill Buxton Sketching User Experiences: Getting the Design Right and the Right Design, 2007.

Саул Гринберг, Sheelagh Carpendale, Николай Маркардт и Билл Бакстон, Sketching User Experience: The Workbook, 2011

Tohidi, M., Buxton, W., Baecker, R. & Sellen, A., «Правильный дизайн и дизайн»: тестирование многих лучше, чем одно из конференций ACM-SIGCHI по человеческим факторам в вычислительных системах (p 1243-1252), 2006: http://www.billbuxton.com/rightDesign.pdf

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

Оригинал статьи: https://www.interaction-design.org/literature/article/10-great-sites-for-ui-design-patterns

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

UI – Patterns

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

WELIE Interaction Design Patterns

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

Pattern Tap

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

Pattern Browser

Pattern Browser полностью соответствует своему названию (поиск шаблонов); он позволяет быстро переключаться между шаблонами пользовательского интерфейса в окне браузера. Здесь не так много шаблонов, как на некоторых больших сайтах, но тем не менее это хороший ресурс.

User Interface Engineering

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

NPM

Отличная коллекция всех ингредиентов, чтобы «испечь» сайт. NPM — отличный источник вдохновения, и многие шаблоны здесь очень хороши.

Design Snips

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

Elements of Design

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

Web Design Practices

Web Design Practices существует уже давно, но обновляется и дополняется довольно редко. Несмотря на это, здесь есть очень полезная информация.