Конспект ‘Микровзаимодействий’ Дэна Саффера

microinteractions_comp1-228x300


«Детали — это не детали. Они создают дизайн.» — какой-то Чарльз Имз:)

 

Микровзаимодействие  — это 1 конкретное, зачастую крохотное, действие Вашего интерфейса. Сохранение, настройка громкости, звучок о новом письме, индикатор прогресса “Loading…”, отправка твита, да, все, что угодно. Их крутость тем важнее, чем выше конкуренция — нужно выпендриваться фишечками. Тем не менее, чем их меньше, тем лучше — они должны жить только ради общей цели.

Триггер же — некая приметная иконка для этого микровзаимодействия, например, крестик закрытия окна или кнопка «Home» на смартфоне. В большинстве случаев, это просто банальная кнопка. Действие модальным (разным) быть не может, иначе это не триггер.

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

Триггеры могут быть и невидимыми. Примеры: жесты на смартфонах, Siri или «ok, google, ..». Невидимые элементы управления должны по возможности поддаваться обнаружению. Например, возможность обновления списка на айфоне можно обнаружить при попытке прокрутить список выше первого элемента.

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

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

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

Еще понятия

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

А Разовый режим — вариант минимизации вреда режимов. Пример: нажатие клавиши shift вместо caps lock — ты все равно отожмешь клавишу, и поведение системы вернется к норме.

Цикл — это повторяющаяся команда или последовательность команд. Например, “получать данные каждые 30 секунд” и “отправить напоминание через 10 дней”. Цикл может быть использован, чтобы ограничить время действия. Например, завершить сессию онлайн-банкинга в целях обеспечения безопасности. Или предложение помощи надолго застрявшему на сайте пользователю.

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

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

Да, обратную связь хорошо разбавлять юмором — «Dropbox предлагает подкрепиться, пока идет длительная загрузка. Siri отвечает шуткой на вопросы типа “В чем смысл жизни?”. Когда падает di.fm, он показывает мне котиков. В Warcraft 3, помнится, каждое пятое нажатие на персонажа провоцировало его на смешную реплику, а если много раз кликнуть на овцу, она вообще взрывалась.

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

Анимируйте

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

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

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

Звучите

Потому что время реакция мозга на звуковую ОС существенно выше, чем на визуальную.

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

Не используйте похожие звуковые иконки для разных действий.

А вот вибрация не очень эффективна — тактильная обратная связь способна передавать лишь 1% от звуковой информации. Большинство людей способно различать лишь 3-4 уровня вибрации.

Вы снова ошиблись, неудачник!

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

Джеф Раскин вообще считает, что если пользователю вышло сообщение об ошибке — значит, Вы неверно спроектировали интерфейс: Lightning cable в iPhone можно подключать любой стороной (в отличии от USB), а Gmail предупреждает об отсутствии упоминаемого в письме вложения — мол, Вы написали «во вложении», но вложения нетуть.

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

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

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

И не используйте личные местоимения. Фраза “Пароль неверный” лучше, чем “Вы ввели неверный пароль”, но лучше делайте акцент на верном действии в этой ситуации. Пример: “Введите верный пароль”.

Шпионьте за пользователем

Не нужно начинать с нуля.  Всегда нужно задавать себе вопрос — что я знаю о пользователе до начала микровзаимодействия? Платформа/устройство, время дня, местонахождение..

Вот Threadless на основании местоположения пользователя сразу показывает, возможна ли доставка. Dropbox показывает разные инструкции загрузки в зависимости от используемого браузера. А в игре Kingdom Hearts на PlayStation2 персонажи могли с тобой «пообщаться» о другой игре, в которую ты играл, т.к. видят на твоей карте памяти сохранения для этой игры.

Интерфейс должен собирать информацию также по ходу и самоадаптироваться. На примере приложения «будильник»: если за неделю пользователь ни разу не пользовался кнопкой Snooze, убрать ее из интерфейса, или предлагать пользователю время, если он использовал его 3 раз до этого.

Еще пара советов

— В тексте инструкций сначала должна идти задача, потом действие для ее достижения. То есть вариант: “Для выключения звука скажите “да”, — будет быстрее понят, чем “Скажите “да” для выключения звука”.

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

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

— Когда мы что-то ищем, наше поле зрения сужается менее чем до одного градуса (менее чем 1% от обычного состояния). Зрение в этом смысле похоже на прожектор. При распознавании объектов наши глаза ищут знакомые фигуры — геоны. Геоны  — это простые фигуры (квадраты, треугольники, кубы, цилиндры), которые мозг объединяет для того, чтобы понять, что за объект перед ним. Учитывая эту особенность мозга, важно, чтобы иконки имели геометрическую форму.

 

SmartDesign_DanSaffer_HR

Добавить комментарий