Рубрика: Интерфейс

 

 

Автор — Эуфемия Вонг (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

 

Hero Image: Author/Copyright holder: bh_style. Wikimedia. Copyright terms and license: Public Domain

 

 

Возможность использования данных карт и 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/

 

Оригинал статьи

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

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

Научитесь создавать проекты, которые полностью удовлетворят потребности и запросы вашего клиента, применяя рекомендации Якоба Нильсена (Jakob Nielsen) и Рольфа Молика (Rolf Molich) по улучшению пользовательского интерфейса. Данные методы отразились во многих продуктах, разработанных успешными компаниями, такими как: Apple, Google, и Adobe. Еще одним, ярким доказательством того, что команда проектировщиков в этих компаниях учитывает и применяет данные правила, являются опубликованные и распространенные ими, рекомендации по дизайну пользовательского интерфейса. В этой статье вы узнаете, как придерживаться 10 эмпирических правил, для улучшения удобства использования, практичности и привлекательности ваших проектов.

(далее…)

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

(UI Pattern – User interface pattern – Образец/Схема/Шаблон дизайна пользовательских интерфейсов, также UI паттерны).

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

(далее…)