Для того, чтобы заработать, главное — иметь желание. Для того, чтобы заработать много и при этом вложить мало, главное — иметь желание и доступ к Интернету (доказано индусами).
Самый идеальный заработок тот, которые несет в себе минимум рисков и потерь. В Интернете, как правило, достаточно иметь несколько десятков долларов и свежую идею, поэтому ежегодно количество вебмастеров по всему миру растет как на дрожжах. Незыблимое правило гласит «Едоки там, где есть кормушка», а значит Интернет — и есть та самая заветная кормушка.
Этот краткий обзор посвящен новому скрипту галереи, разработанному на основе html5 и css3 технологий. Данная программа предназначена для эффектной демонстрации фотографий.
При первом знакомстве с DI Gallery пользователя ждет деликатная подсказка в виде кнопки, предлагающая открыть окно браузера во весь экран. Такой режим просмотра позволит насладиться стильным дизайном и удобным функционалом галереи в полной мере.
Год назад здесь, в Smashing Magazine, мы опубликовали статью об одиннадцати фундаментальных принципах проектирования . Эти принципы основывались на 63 выводах крупного исследования юзабилити платёжных форм интернет-магазинов, проведённого в 2011 году и посвящённого исключительно опыту взаимодействия с формами заказа – от «корзины» до «подтверждениея покупки».
В этом году мы снова изучили состояние страниц оплаты интернет-магазинов, собрав платёжные формы и сравнив их со стандартами, созданными по итогам прошлого исследования. В результате была сформирована огромная база платёжных форм, включающая 508 страниц с этапами оплаты, 975 скриншотов и свыше 3000 примеров точного соблюдения и грубого нарушения юзабилити-правил для форм заказа.
Вот лишь небольшой список результатов сравнения с требованиями платёжных форм 100 крупнейших торговых сайтов:
Процесс оплаты в среднем состоит из пяти шагов (5,08).
24% требуют регистрацию аккаунта.
81% считают подписку на новости обязательной (в лучшем случае, есть возможность отказаться от неё впоследствии).
41% используют какую-либо проверку адреса.
50% запрашивают одну и ту же информацию дважды.
В среднем в 100 лучших формах нарушены 33% правил платёжного юзабилити.
В этой статье я пройду по пунктам и объясню, что скрывается за этими числами, а затем приведу конкретные примеры того, как нужно и как не нужно подходить к разработке процесса оплаты.
Процесс оплаты в среднем состоит из пяти шагов (Что не оказывает существенного влияния на юзабилити)
Среднее оформление покупки состоит из пяти шагов (5,08), начиная корзиной и заканчивая размещением заказа – обычно это шаг «проверьте введенные данные и подтвердите заказ». Самый короткий путь состоит из одного шага (включая корзину), самый длинный – из долгих девяти.
Распределение среди 100 крупнейших коммерческих сайтов по числу шагов для оформления покупок.
Заметьте: лишь у одного сайта процесс состоит из одного шага (включая корзину), поэтому он не оказывает существенного влияния на статистику.
На графике по оси Х расположены сайты, сгруппированные по числу шагов в форме заказа, а по оси Y – средняя оценка юзабилити в баллах.
Как можно заметить, колебание числа шагов в пределах от одного до шести не влияет на опыт взаимодействия покупателей с формой заказа. Эти данные совпадают с результатами исследования поведения пользователей 2011 года. На впечатление от покупки влияет не столько количество шагов, сколько то, что должен делать пользователь на каждом из этапов.
К сказанному стоит добавить, что предельное число шагов, после которого процесс начинает утомлять клиента, существует. Сайты с оформлением заказа в восемь и девять шагов получили гораздо более низкие оценки юзабилити по сравнению с остальными. Как правило, это результат обязательной регистрации (обычно она требует больше шагов и негативно сказывается на юзабилити), кроме того, сайты с числом шагов более восьми имеют больше шансов испортить впечатление своих клиентов. Среди протестированных сайтов более восьми шагов требовали пройти: Sephora (), Amazon (), Peapod (), Sony (
Напоследок: не заостряйте своё внимание на числе этапов оплаты – вместо этого направьте все силы на проработку того, что должны делать клиенты во время каждого из шагов, поскольку именно это определяет впечатление от покупки. Примерами тому служат платёжные формы Apple, Walmart и Gap, состоящие из семи шагов, чьё качество исполнения при этом на 50% лучше среднего показателя для ста крупнейших сайтов магазинов (нельзя назвать их совершенными, так как всегда есть, куда расти). Хотя теоретически этого можно избежать, на практике на всех протестированных сайтах с числом шагов более восьми процесс оформления покупки вызывал негодование покупателей и портил впечатление новым клиентам.
81% считают подписку на свои новости обязательной (и не ценят частную жизнь клиентов)
81% из 100 крупнейших коммерческих сайтов принимают решение о подписке на рекламу за своих клиентов – по умолчанию напротив этого пункта формы стоит галочка (в худшем случае клиента даже не спрашивают).
Одна из причин, по которой клиенты терпеть не могут требование создать аккаунт, – это закрепившаяся на уровне подсознания формула: аккаунт=рассылка. Эта очевидная связь проявилась во время тестов с участием пользователей, когда снова и снова мы слышали одни и те же жалобы: люди ненавидят создавать аккаунты во время онлайн-покупок. На вопрос о причинах 40% ответили, что они «не хотят получать никаких рассылок».
Долгие годы сайты, в том числе интернет-магазины, заставляли своих клиентов «случайно» подписываться на ненужные им рассылки, делая максимально незаметным пункт «подписаться на новости» с проставленной галочкой. Неудивительно, что создание аккаунта люди связывают с автоматической подпиской на почтовую рассылку или «спам» (как называли ее больше половины участников теста).
К сожалению, сформировавшийся у них образ – не ошибочное представление, а горькая правда, подкреплённая опытом. Но одно дело – галочка в поле с рассылкой, и совсем другое – то, как поступают 32% из 81% сайтов, считающих подписку обязательной:
Среди ста крупнейших интернет-магазинов Amazon – лишь один в числе 32% сайтов, которые автоматически подписывают клиента на почтовую рассылку, не сообщив ему об этом прямо (лишь в пользовательском соглашении есть ссылка для отказа) и лишив его возможности отказаться от нее во время оформления заказа. .
Эти 32% сайтов автоматически подписывают новых клиентов на рассылку, не позволяя отказаться от неё во время оформления покупки и, зачастую, зарывая упоминание об этом далеко в тексте пользовательского соглашения. Отказаться от рассылки клиент может лишь с помощью опции в настройках аккаунта (если он был вынужден зарегистрироваться), либо воспользовавшись ссылкой в рекламных письмах, которые автоматически станут приходить.
Итак, формулу аккаунт=рассылка испытуемые усвоили, совершая покупки на сайтах (таких, как эти 32%). Лишь 8% из 100 крупнейших электронных магазинов уважают личное информационное пространство своих клиентов, оставляя окошко пустым и предлагая поставить в нем галочку, если те желают получать рассылку (как и 11% сайтов, которые не предлагают клиентам подписаться на рассылку во время оформления заказа).
24% требуют регистрацию аккаунта
Для ясности: 24% сайтов не позволяют клиентам совершать «гостевые покупки» и вынуждают их создавать аккаунт на своём сайте.
Sony (шаг ) входит в 24% сайтов, требующих от каждого нового клиента регистрации для размещения заказа. .
Во время исследования удобства платёжных форм мы (как и многие другие до нас) нашли несколько причин, объясняющих негодование клиентов по поводу обязательной регистрации для оформления обычного заказа. Одна из них уже упоминалась: это воображаемая связь аккаунт=рассылка. Кратко перечислим остальные причины, которые нам удалось обнаружить в ходе исследования:
Регистрация требует большего числа шагов и заполнения полей формы для завершения покупки, что, естественно, требует больше времени.
Большинство клиентов уже хранит в памяти неисчислимое множество логинов и паролей, и они не желают плодить их дальше.
Создавая аккаунт, клиент чётче осознаёт, что информация о нём будет храниться у вас бесконечно долго. Большинство клиентов попросту не понимают, зачем для покупки товара им нужен аккаунт. Как точно выразилась во время тестов одна из испытуемых: «Я же не должна регистрироваться для покупки духов в обычном [физическом] магазине».
Nordstorm (шаг ), как и 76% крупнейших электронных магазинов, предлагает своим клиентам гораздо более привлекательный вариант «гостевой оплаты» наряду с простой регистрацией по желанию. .
Было бы правильно (по примеру 76% коммерческих сайтов) предложить клиентам более привлекательный вариант гостевой оплаты наряду с регистрацией по желанию во время или после покупки. Для этого достаточно графы с кратким описанием и поля ввода пароля, необязательного для заполнения. Во время исследования подобный подход не вызывал у испытуемых негативной реакции, и, если они не были заинтересованы в создании аккаунта на конкретном сайте, они просто оставляли опциональные поля пустыми. В то же время, они охотно регистрировались на сайтах, где рассчитывали и в дальнейшем совершать покупки.
Если посмотреть на группу сайтов, требующих регистрацию, можно заметить, что, как правило, это сайты с очень большим оборотом:
Слева: сайты с оборотом свыше 1 млрд долларов; справа: сайты с оборотом менее 1 млрд долларов Красный: требующие регистрацию; зеленый: не требующие
Из 23 сайтов с объёмом онлайн-продаж свыше 1 млрд долларов (по данным Internet Retailer на 2010 год), 35% требуют регистрацию аккаунта, в то время как среди сайтов с оборотом меньше 1 млрд долларов (вплоть до 148 млн долларов) лишь 21% требует регистрацию во время оформления заказа.
41% сайтов использует проверку адреса
Из 41% сайтов 12% не позволяют своим клиентам подтвердить заказ в случае, если система не может распознать их адрес (даже если клиент абсолютно уверен в правильности введённых данных).
Amway входит в число 12% (от 41), которые не позволяют клиентом продолжить оформление заказа в случае ошибки подтверждения адреса или давно не обновлявшейся базы данных. .
Проверка адреса может быть умным решением, позволяющим избежать опечаток, способных привести к проблемам с доставкой или задержке получения товара. Однако названия улиц, почтовые индексы и пр. не стандартизированы и не постоянны. Всегда есть вероятность сбоя в механизме проверки адресов или отсутствия его в базе данных, не только опечаток. Сайты, препятствующие продолжению оформления заказа из-за ошибки с подтверждением адреса (на момент исследования: Office Depot, ShopNBC, Amway Global, FreshDirect, и CafePress) не оставляют покупателям иного выхода, кроме как отказаться от покупки. Пользователи технически не могут продолжить оформление заказа.
Удачная решение Overstock (шаг ) – уведомление клиентов о том, что введенный ими адрес не опознан и, вероятно, содержит ошибку. Система, тем не менее, позволяет покупателю принудительно продолжить оформление заказа.
Наиболее разумный подход – применяемый большинством сайтов с проверкой адреса – информирование клиента о том, что введенный им адрес не найден, при сохранении функции принудительного продолжения для тех, кто полностью уверен в правильности данных.
50% сайтов запрашивают одну и ту же информацию дважды
Вместо того, чтобы автоматически вставлять данные, уже введенные пользователем, 50% коммерческих сайтов усложняют процесс оформления, требуя вводить определённую информацию более одного раза. Это редко случается в пределах одной страницы (хотя и такое бывает), но довольно часто – на разных этапах. Иногда это – имя клиента, не скопированное со страницы адреса на страницу с данными о кредитной карте. Иногда – индекс, который покупатель вводит при добавлении в корзину (для расчета стоимости доставки) и вынужден вписывать повторно на странице адреса доставки. Вероятность того, что пользователь рассчитал стоимость доставки для другого индекса, существует, но разумнее предположить, что он использует тот же индекс для места доставки заказа.
Apple – среди 50% электронных магазинов, запрашивающих одни и те же данные более одного раза. Нашаге оформления заказа поле электронной почты для доставки счета не заполняется автоматически – даже если нажать на ссылку «Тот же, что и в данных о заказе»..
Повторно ввести информацию на обычном компьютере очень легко, однако у большинства пользователей мобильных устройств это вызовет раздражение. Учитывая, что ежегодная прибыль всех изученных сайтов превышает 148 млн долларов, кажется странным, что лишь половина из них смогла выделить средства на упрощение оформления заказа и создание форм, не требующих от покупателей повторного ввода информации (на протяжении всего процесса).
Упрощая оформление покупки для клиентов, лишь 10% сайтов установили автоматическое заполнение полей региона и города на основе введенного почтового индекса. Hayneedle (шаг ) — один из таких сайтов. В результате число полей для заполнения уменьшилось на три, а расчетная дата доставки и стоимость стали видны уже при входе на страницу. .
Говоря об удобстве, отметим, что лишь 10% всех сайтов помогают своим клиентам, автоматически заполняя поля региона и/или города на основе предоставленного клиентом почтового индекса.
Влияние размера прибыли и сферы торговли на показатели юзабилити
Уровень удобства коммерческих сайтов с прибылью свыше 1 млрд долларов (для новых клиентов) на 44% меньше по сравнению с магазинами, чей годовой оборот ниже 1 млрд долларов. При более детальном рассмотрении 23 сайтов с доходом выше 1 млрд долларов выясняется, что причина разрыва кроется в стремлении этих компаний вовлечь в свою экосистему как можно большее число клиентов. Более того, верхушка отличается самыми сложными механизмами совершения покупок. Эти механизмы, как правило, намеренно усложнены в связи с транспортными и правовыми ограничениями, характерными для сайтов-посредников между производителями и покупателями. Для сравнения: некоторые более «мелкие» сайты, занимающие в нашем списке места ниже 24-ого, объединяет стремление сделать оформления заказа максимально быстрым.
Все 100 крупнейших коммерческих сайтов распределены по уровню удобства (ось Y) и объемам продаж (ось Х, логарифмическая шкала). Заметьте, что у большинства сайтов с высокими показателями юзабилити доходы от продаж не превышают 1 млрд долларов. .
Если рассматривать отдельные отрасли электронной коммерции, можно заметить, что магазины автозапчастей имеют более высокие показатели юзабилити по сравнению с другими сферами торговли (выше на 110%), в то время как магазины офисных товаров отличаются наименее удобным оформлением заказов (на 38% ниже среднего). Ступенькой выше стоят продуктовые интернет-магазины и аптеки.
Интересно, что в сферах как с высокими, так и с низкими показателями, внутри групп используется похожий порядок оформления заказа. Фактически, их формы почти идентичны: сравните хотя бы платежные системы , и. Не стану строить догадки, кто где «черпал вдохновение», это не имеет значения. Однако в секторе товаров для офиса подобные заимствования приводят к общим низким показателям юзабилити (на 38% ниже среднего). Хотя совершенно очевидно, что многие из ста крупнейших коммерческих сайтов используют похожие системы оплаты покупок (и, таким образом, имеют похожий порядок оформления заказа), копирование форм конкурентов не так широко распространено в других област! ях и� �дустрии (например, в электронике).
Общая характеристика электронных платёжных форм
Если посмотреть на общую картину оформления заказов в ста крупнейших интернет-магазинах, мы обнаружим, что в среднем каждый из них нарушает 21 правило платёжного юзабилити. Это служит свидетельством того, что платёжные формы по-прежнему нуждаются в значительной доработке, ведь средний показатель отказов от покупки составляет и может быть снижен (вспомнить хотя бы то, что «50% сайтов запрашивают одну и ту же информацию дважды»).
Общие недостатки платёжных форм – даже крупнейших электронных магазинов – едва ли можно объяснить простым нежеланием работать над ними. Вероятнее всего, причиной тому – влияние нескольких факторов, таких как:
Изменить порядок оформления заказа гораздо сложнее, чем переделать отдельные страницы.
Платежные формы требуют глубокой интеграции программных средств, а значит – и более сложных инструментов для модификации и последующих тестов.
Платёжные формы не являются приоритетным направлением для высшего руководства (хотя, надеюсь, в ближайшем будущем ситуация изменится к лучшему).
Большинству дизайнеров работа над платёжными формами кажется более скучной, нежели оформление страницы товара, главной страницы или работа над новой рекламной кампанией.
В некоторых случаях низкий уровень юзабилити может принести пользу бизнесу, по крайней мере – в краткосрочной перспективе (например, подписка на рассылки без ведома пользователей).
Нет чётких стандартов создания платёжной формы.
«Советов и рекомендаций» по созданию подобных форм не так много (существует всего два или три источника, опирающихся на фактические данные).
Обратная связь нарушена, так как дизайнеры и разработчики платёжных форм, как правило, лишены прямого контакта с пользователями.
Улучшение большинства средних и неплохих форм не подразумевает одно-два «крупных изменения», а, скорее, требует 10-30 мелких правок.
Если вы хотите продолжить изучение платёжных форм ста крупнейших интернет-магазинов самостоятельно – без необходимости заполнения 1300 полей, как это делали мы – можете ознакомиться с бесплатным фрагментом , которое мы решили выложить в свободный доступ.
Даже самому обычному пользователю известно, что WordPress позиционирует себя в первую очередь в качестве движка для блога. А что такое блог? Блог — это среда, где регулярно добавляемые записи и статьи стимулируют и побуждают к обсуждению и общению читателей не только с автором поста, но и друг с другом. Что нужно, чтобы организовать такое общение? Как раз это мы и попытаемся сейчас с вами выяснить. Представляем вашему вниманию обзор наиболее полезных плагинов WordPress для реализации комментирования на сайте.
Даже самому обычному пользователю известно, что WordPress позиционирует себя в первую очередь в качестве движка для блога. А что такое блог? Блог — это среда, где регулярно добавляемые записи и статьи стимулируют и побуждают к обсуждению и общению читателей не только с автором поста, но и друг с другом. Что нужно, чтобы организовать такое общение? Как раз это мы и попытаемся сейчас с вами выяснить. Представляем вашему вниманию обзор наиболее полезных плагинов WordPress для реализации комментирования на сайте.
«Разрабатывать дизайн означает нечто большее, нежели просто собирать, упорядочивать или даже редактировать; это значит придавать ценность и значимость, очерчивать, упрощать, прояснять, видоизменять, возвеличивать, сгущать краски, убеждать и, возможно, даже развлекать.»
- Пол Рэнд
1. Интерфейсы существуют для инициации взаимодействия
Интерфейсы служат для осуществления взаимодействия между людьми и окружающим миром. Они помогают разъяснять и освещать, инициировать и демонстрировать взаимоотношения, объединять нас и разлучать, они управляют нашими ожиданиями и предоставляют доступ к функциям. Процесс разработки интерфейсов отнюдь не искусство, ибо они не являются чем-то монументальным. Интерфейсы служат определенной цели, их эффективность может быть точно определена. Однако, они не утилитарны. Лучшие интерфейсы способны вдохновлять, пробуждать, мистифицировать и усиливать наше взаимодействие с миром.
Темы Drupal позволяют менять облик и эмоциональную составляющую вашего сайта. Сегодня Тим Миллвуд объяснит, как создать тему, которая будет выглядеть по-разному на экранах различных размеров.
Эта статья впервые появилась в журнала .net – всемирно известного издания для веб-дизайнеров и разработчиков.
Итак, вы пропустили DrupalCon в Лондоне или Денвере? Или, быть может, были, но так и не поняли, о каких таких темах все говорят. Это статья направит вас на верный путь.
В ходе эксперимента использовались псевдо-классы, чтобы создать 84 простых GUI иконки на чистом CSS и HTML. Это не готовый пак CSS иконок и я публикую его в качестве в качестве упражнения на креативное решение проблемы в условиях ограниченных возможностей.
Демо:
Поддержка браузерами: Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+.
Элемент используется повсеместно. Будь то WebGL игры или потрясающие браузерные эксперименты, веб-разработчики дружно садятся в вагончик canvas и наслаждаются поездкой.
Но всегда ли мы используем для работы нужный инструмент? Во многих случаях масштабируемая векторная графика () предоставляет лучшую альтернативу, но об этой технологии легко позабыть на фоне назойливой рекламы canvas. Если вы до сих пор не решались использовать SVG, возможно приведенные здесь факты смогут вас переубедить…
Благодаря интерактивной и видео-рекламе пользователи не только чаще кликают на нее, но и долгое время после просмотра продолжают посещать сайты этих брендов
Множество продавцов давно ушли от модели прямого отклика в онлайн рекламе, поняв, что, несмотря на низкие показатели переходов по ссылке, баннерная реклама также способствуют брендированию. Исследования показывают, что интерактивность и видеоэффекты в баннерах способны улучшить показатели откликов обоих типов, одновременно повышая вероятность того, что пользователь кликнет по баннеру, и стимулируя узнаваемость бренда в результате просмотра.
Если вы один из тех, кто задается вопросом, стоил ли перенос бренда в приложенных усилий, у меня для вас хорошие новости: исследователь докладывает, что с помощью Хроники вовлеченность бренда увеличивается в среднем на 46%.
Исследователь, , вывел результаты на основании относительно небольшой выборки – 15 Facebook-страниц различных брендов. Это могло бы создать ложное ощущение, особенно с учетом лучших показателей Livestrong и Toyota, продемонстрировавших прыжок посещаемости в 161% и 156% соответственно (полный список брендов приведен ниже).
Впрочем, Адам Шонфельд, исполнительный директор Simply Measured, сообщает, что при выведении результирующего показателя учитывалась вовлеченность каждого сообщения. «Это лишь предварительные результаты,» – сказал он. Simply Measured оценивали ранние показатели и сравнивали вовлеченность страниц с 1 января по 29 февраля, а затем с 29 февраля (дня, когда Facebook позволил брендированным страницам пользоваться профилем Хроника) по 26 марта, после чего сравнили результаты. (Если бренд запускал свою страницу Хроники уже после 29 февраля, Simply Measured начинал с этой даты). Были получены следующие результаты:
Причина безграничной любви брендов к социальным медиа сама по себе является одной из увлекатльных загадок современного бизнеса – особенно с учетом того, что большинство из них упускают из виду важнейший ингредиент, без которого все их тщательнейшим образом спланированные действия обращаются в социальный медиа-ад.
Когда речь заходит о брендинге и постоянно изменчивом феномене соцмедиа, не нужно вести себя как гриб. Я хочу сказать, не стоить сидеть в темноте, уплетая кучу… ну, вы поняли, о чем я.
С тех пор как Эллиот Джей Стокс довольно остро призвал , мы успели стать свидетелями дегламуризации Сети, включая исчезновение «стеклянных» кнопок, скошенных краев, отражений, значков рекламных спецпредложений, вульгарных градиентов кричащих цветов и диагональных фоновых заливок. Трансформация была легко принята всеми, за исключением самых ярых энтузиастов глянца. Однако эстетика и дизайн живут по странным законам, и едва умирает один дизайнерский тренд, на его смену тут же приходит другой.
jQuery – это удивительный инструмент, позволяющий разработчикам и дизайнерам работать с JavaScript без особых навыков . Однако, как учил нас Спайдермен, «с большой силой приходит большая ответственность». Главный недостаток jQuery в том, что несмотря на то, что он упрощает работу с JavaScript, все равно можно написать самый настоящий го#%!код. Скрипт, который будет тормозить загрузку страницы и увеличивать время отклика интерфейса, и будет запутан такими узлами спагетти, что следующему невезучему разработчику будет не обойтись без бутылки виски.
Задача становится еще сложнее для тех из нас, кто еще не переехал в волшебную сказочную страну чудес, где ни один из наших клиентов не использует для просмотра страниц Internet Explorer – скорость JavaScript движка IE сравнима со скоростью движения ледника, и не идет в сравнение с другими современными браузерами. Поэтому , а в частности производительности нашего кода становится делом еще более важным.
К счастью, существует несколько очень простых вещей, которые каждый может добавить в собственный рабочий процесс jQuery и решить множество базовых проблем. Анализируя различные образцы кода, я выделил три основных области, в которых мне постоянно встречаются самые серьезные проблемы: неэффективные селекторы, слабое делегирование событий и неуклюжая DOM манипуляция. Мы разберем каждую из них, и вы, я надеюсь, тоже извлечете пользу и сможете применить эти решения в своем следующем проекте.
Для того, чтобы заработать, главное — иметь желание. Для того, чтобы заработать много и при этом вложить мало, главное — иметь желание и доступ к Интернету (доказано индусами).
