Archive | Июль, 2010

Обзор свежих материалов, май-июнь 2010

23 Июл

Юрий Ветров, пользователь сайта Хабрахабра, опять подал нам новую порцию обзоров на новые инструменты, материалы и практики по юзабилити. Спасибо ему огромное!

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

Методы и практики

Wireframe Showcase
Коллекция примеров wireframes. Хотя по масштабности ей далеко до коллекции №1, в ней каждая схема страницы совмещена с итоговым дизайном — это помогает лучше понять особенности процесса проектирования.

Sketches and Wireframes and Prototypes! Oh My! Creating Your Own Magical Wizard Experience
Traci Lepore подробно описывает возможные уровни проработки интерфейса от скетчей и wireframes до интерактивных прототипов и дизайна. Статья хорошо показывает, как вместе с затрачиваемым на продумывание интерфейса временем растут его продуманность и уменьшаются «белые пятна». На эту же тему недавно написал Tyler Tate, включив в статью небольшой полезный кейс из практики с примерами готовых документов и графиком их создания.

Designing for Delight (презентация Giles Colborne)
Giles Colborne из компании CXPartners описывает процесс создания дизайна, который вызывает у пользователя ощущение восторга. Причем речь идет не о модных визуальных решениях — для этого важнее предвосхитить ожидания или помочь в проблемной ситуации.

How to Engage Customers in Your E-Commerce Website
В своей статье для Smashing Magazine Rung Andras рассказывает о пользовательских рейтингах в интернет-магазинах — как лучше собирать их, отображать на страницах сайта и учитывать в специальных предложениях.

The Question Protocol — How to Make Sure Every Form Field Is Necessary
Caroline Jarrett, автор книги «Forms that Work: Designing Web Forms for Usability» описывает хороший способ сокращения полей форм. Речь идет об опроснике для заинтересованных лиц компании-владельца сайта, который позволяет определить, кому именно нужны предоставляемые пользователем данные и можно ли отказаться от их части.

The Small Print — Writing UI Instructions
Connie Malamed дает несколько советов о том, как стоит писать краткие поясняющие тексты в интерфейсах. В первую очередь это касается форм и системных сообщений.

Not to Prime, is a Crime!
Jodie Moule из компании Symplicit рассказывает о методе исследования пользователей «priming». В ходе него участвующие в исследовании создают коллажи, описывающие их повседневные дела, что помогает лучше понять контекст и особенности их жизни и работы.

Читать далее

Постепенное вовлечение пользователей вместо формы регистрации

23 Июл

Алексей (aka lexxscorp) сделал перевод замечательной статьи Luke Wroblewski «Gradual Engagement Boosts Twitter Sign-Ups by 29%«. В статье описывается на примере Twitter’а, как можно вовлечь пользователей в проект и самое главное их заинтересовать. То есть как выполнить один из трех принципов — вовлечение (борьба с безразличием).

Недавно (весной этого года) Твитер перепроектировал процесс регистрации, чтобы увеличить количество новых пользователей. И хотя в новой версии в регистрацию добавилась ещё одна страница, то есть дополнительный шаг, конверсия всё равно выросла на 29%. Почему это произошло? Благодаря постепенному вовлечению.

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

Правильное постепенное вовлечение рассказывает пользователю об основной сущности сервиса путём простых взаимодействий. Если вы при этом осчастливите человека — даже лучше. Уилл Райт, создатель Sims & Spore, верит, что игры должны позволять человеку выигрывать в течении первых 5 секунд. Это хорошая философия, чтобы добиться постепенного вовлечения. На самом деле вы можете позволить людям за одно-два простых взаимодействия сделать то, в чём смысл вашего сервиса. Это наилучший вариант.

Термин «gradual engagement» я перевожу как «постепенное вовлечение». По-моему он точно отражает суть, но вы можете указать в комментариях свой вариант.

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

Вот как выглядела регистрация в Твитере до изменений
image

Она не попала в цель. Если человек решал зарегистрироваться, то его приветствовала форма, где он:

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

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

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

Новая версия регистрации в Твитере
image

И хотя новый процесс регистрации состоит из 4 шагов вместо 3-х и занимает больше времени, его полностью завершают на 29% больше людей, которые становятся гораздо более вовлечёнными в Твитер, чем раньше.

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

Ещё несколько мыслей

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

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

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

Основные принципы юзабилити

22 Июл

Правило 7±2
Известно, что физические возможности мозга по обработке информации далеко не безграничны. По результатам исследования Джорджа Миллера кратковременная память человека может одновременно содержать от 5 до 9 сущностей. Этот факт очень часто используется для обоснования необходимости сокращения количества элементов в навигационных меню до 7, что является причиной горячих дебатов, поскольку не совсем ясно, как это правило должно использоваться в Интернете. [Miller’s studies]

Правило 2-х секунд
Оно состоит в том, что пользователь не должен ждать определенной реакции системы (например, запуска или переключения приложения) дольше, чем 2 секунды. Это значение — 2 секунды — выбрано абсолютно произвольно; тем не менее, оно кажется подходящим. В итоге, чем меньше пользователь находится в ожидании, тем лучше.
Правило 3-х кликов
Никакому пользователю не понравится использовать сайт, если он не может найти нужную ему информацию за 3 клика мышкой. Иными словами, это правило подчеркивает важность интуитивно понятной и простой навигации по сайту. В большинстве случаев важно не само количество необходимых кликов, а общая понятность организации системы. Да, даже 10 кликов не являются проблемой, если на каждом этапе пользователь ясно представляет, где он и куда следует двигаться дальше.

Читать далее

10 юзабилити-преступлений, которых вы не должны совершать

22 Июл

Юрий Пискун (yoyurec) перевел отличную статью Криса Спунера (Chris Spooner) «10 Usability Crimes You Really Shouldn’t Commit«. Эти 10 преступлений действительно частая ошибка веб-разработчиков, поэтому рекомендую почитать.

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

Преступление #1: В формах метки не связаны с полями ввода

crime1
Использование атрибута «for» позволит пользователям кликать по метке, для выбора соответствующего поля формы. Это особенно важно для чекбоксов и радиокнопок — увеличить область клика.

Преступление #2: Логотип не ведёт на главную страницу

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

Преступление #3: Не помечены посещённые ссылки

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

Читать далее

Экстремальные юзабилити методы от Яндекса

21 Июл

Как фотографии людей удваивают конверсию

21 Июл

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

Это было подтверждено двумя независимыми экспериментами

Я проанализировал результаты двух A/B тестирований пользователей сайта Visual Website Optimizer и пришёл к выводу, что верный способ привлечь внимание посетителей — это разместить людские фотографии на сайте.
RSS2LJ[idarwin]3588b04e213785d4038ef736c96badb0

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

Давайте рассмотрим оба эксперимента.

Пример первый

Ребята из Medalia Art продают бразильские и карибские картины через интернет. Недавно они были приятно удивлены, когда фотографии художников на главной странице сайта увеличили число посетителей на 90%. Это не было их первое A/B тестирование, они до этого уже “игрались” со своей главной страницей. В прошлом им удалось уменьшить процент отказов на 20%, экспериментируя с размещением рекламных сообщений.

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

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

Ниже я привожу скриншоты вариантов исследования.

Первый вариант с картинами — контрольный.
image

А второй с фотографиями — победивший.
image

А вот результаты в цифрах

Вариант Конверсия Улучшение в %
Контрольный с картинами 8,8% —-
С фотографиями 17,2% +95%

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

Пример второй

Блог EmptyMind Джейсона Томпсона посвещён веб-аналитике и оптимизации. В боковой панели сайта находится большая иконка телефона, ведущая на страницу с контактными данными. В отличии от Medalia Art у Джейсона была причина провести сравнительное тестирование иконки против фотографии.

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

В данном экперименте целью была страница с контактными данными, каков процент посетителей перешёл на неё. Вот варианты и их производительность.

Контрольный вариант
image

С фотографией
image

Вариант Конверсия Улучшение в %
Контрольный с иконкой телефона 3,7% —-
С фотографией 5,5% +48%

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

Выводы

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

Я рекомендую вам провести подобное A/B тестирование, чтобы проверить, поможет ли людское фото чудесным образом вашему бизнесу.

И если у вас получится, то возможно, мы нашли великую формулу увеличения конверсии на сайтах. Удачи!

via lexxscorp