Connect with us

Дизайн и прототипирование

Почему вам стоит бояться призрачных кнопок

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

Анна Гуляева

Опубликовано

/

     
     

Введение: что такое призрачные кнопки?

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

Призрачные кнопки – кнопки с контуром без цветной заливки – стали достаточно популярны. Они так называются из-за своей прозрачной природы — так как у кнопок нет заливки, они выглядят просто как фон (обычно это фотография). Каждый раз, когда я их вижу, я задаюсь вопросом: дизайнеры провели A/B-тестирование кнопок? Может быть дело в моем опыте в оптимизации конверсии, может быть в повсеместности этих кнопок. Но в любом случае, у меня с ними проблема.

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

Откуда появились призрачные кнопки?

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

1984 — Apple выпускает первый Macintosh

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

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

2001 — команда в Razorfish запускает первый сайт, который адаптируется под экран пользователя, audi.com

2004 — Кэмерон Адамс создает пример макета, зависимого от разрешения

2007 — выход первого iPhone

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

2008 — каждый второй человек в мире имел мобильный телефон

2010 — выход первого iPad

2010 — Итан Маркотт создал термин “адаптивный веб-дизайн” (Responsive Web Design)

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

Плоский дизайн

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

Когда мы начали видеть призрачные кнопки?

Мы начали видеть призрачные кнопки в 2014. Стал популярным Tumblr-блог под названием websiteswithghostbuttons, а Дэниел Клоппер впервые написал твит о призрачных кнопках.

Некоторые считают, что призрачные кнопки происходят из head-up display-дизайна (HUD-интерфейс должен давать информацию, не ограничивая поле обзора летчика или водителя). Сложно сказать, откуда именно появились призрачные кнопки, но мы можем рассмотреть некоторые из ранних примеров.

С релизом Windows Phone 7 и Windows 8 Microsoft представила дизайн-систему под названием Metro. Она включала в себя использование ярких цветов, простых шрифтов и призрачных кнопок.

Среди всех первопроходцев, самое большое влияние на тренд оказал релиз iOS 7. В этой статье Apple подчеркнула, что пользовательские интерфейсы должны быть “ненавязчивыми и уважительными” и они должны “отступать, выделяя ваш контент”, а не соревноваться с ним. Немногие люди сегодня поспорят с философией Apple: контент должен быть самым важным элементом, а интерфейс должен его поддерживать.

Как дизайнеры используют призрачные кнопки?

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

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

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

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

Последствия использования призрачных кнопок

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

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

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

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

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

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

Потенциальное влияние на конверсию может стоить компаниям денег. Существует несколько исследований о влиянии разных типов кнопок на конверсию. Elevated Third устроили тестирование в своей рассылке: одна версия письма содержала призрачную кнопку, а другая — цветную. Они обнаружили, что версия с цветной кнопкой превзошла второй вариант почти на 7%.

В другом тесте сайт ConversionXL обнаружил 20% снижение количества кликов (на основании 10 тысяч посещений), проверяя следующие изображения:

Nielsen Norman Group недавно выпустила исследование, в котором сделала вывод, что “плоские UI-элементы привлекают меньше внимание и создают неуверенность”. В исследовании NNG обнаружила, что пользователи проводили на 22% больше времени на сайтах со слабыми обозначениями – на сайтах, на которых не было понятных кнопок и ссылок. Так как предметом исследования была видимость элементов, пользователям надо было завершить задачу как можно быстрее. Больше времени на странице — больше когнитивной нагрузки для пользователя.

Уже появились реакции на публикацию исследования NNG, в которых говорится, что исследование было направлено не совсем на плоский дизайн. Шон Декстер из Cigna написал статью под названием “Плоский дизайн: почему вам стоит задать вопросы исследованию NNG о модном стиле”. В своем тексте он отмечает, что один из самых наглядных примеров в исследовании сравнивает кнопку с заливкой и призрачную кнопку – изучает контраст, а не плоский дизайн. Проблема с этим наблюдением заключается в предположении, что призрачные кнопки являются другой проблемой, не связанной настолько тесно с плоским дизайном. Аргумент о том, что исследование NNG было сосредоточено главным образом на слабых и сильных обозначениях, а не на плоском дизайне, не лишен смысла. Но я не думаю, что будет преувеличением сказать, что многие реализации плоского дизайна пострадали от недостатка контраста.

Пример из исследования NNG

Это все небольшие примеры, и результаты могут меняться в зависимости от таких факторов, как индустрия, аудитория, тип трафика на странице, позиция на странице, текст и так далее. Если вы постоянно используете призрачные кнопки на сайте или в рассылке, вам стоит провести A/B-тестирование.

Следующие шаги: Осмысленный дизайн

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

  1. Используйте призрачные кнопки как вторичные призывы к действию
  2. Подумайте о контрасте, ясности и разборчивости
  3. Больше постоянства
  4. Тестируйте, тестируйте, тестируйте!

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

Дизайн ориентированных на данные интерфейсов

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

 

Комментарии
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Дизайн и прототипирование

Hyperion

Hyperion – встраиваемый в iOS-приложения плагин, помогающий контролировать верстку.

Леонид Боголюбов

Опубликовано

/

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

  

 

 

Комментарии
Продолжить чтение

Дизайн и прототипирование

Flawless

Леонид Боголюбов

Опубликовано

/

Flawless – система для сравнения макета и получившегося iOS-приложения.

Фактически это плагин для эмулятора iOS, в котором запускается ваше приложение. Он берет внешний sketch, jpeg, png, tiff или gif и накладывает его (прозрачно поверх или разделяя экран) на реальное приложение.

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

Комментарии
Продолжить чтение

Дизайн и прототипирование

Google исправил бургер и пиво в Android 8.1

В Android 8.1 действительно станет с едой получше – теперь эмодзи бургера в нем соответствует всем канонам.

Леонид Боголюбов

Опубликовано

/

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

В Android 8.1 с едой действительно станет получше – теперь эмодзи бургера в нем соответствует всем канонам:

Заодно поправят и пиво – раньше оно выглядело как минимум странно:

Теперь заживем!

Emoji: больше, чем смайлики

Комментарии
Продолжить чтение

Дизайн и прототипирование

Как потерять доверие пользователей к продукту и чем это чревато?

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

AppTractor

Опубликовано

/

Автор:

Изображение с сайта Kayako.com

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

Доверие – либо полное, либо его нет. Ощущением доверия измеряется человеческое счастье. Громко звучит? Тем не менее, так и есть. Человек не может чувствовать себя счастливым, если тревожится, что дверь могла не закрыться, утюг не выключился, будильник не прозвенит, календарь не сообщит о мероприятии, изменения не сохранятся и др.

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

Кривизна, кустарщина

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

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

Страница статистики сервиса товарных рекомендаций Retail Rocket

– Оля, ты – дизайнер, ты это видишь, а нормальным людям на такое плевать!

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

God is in the detail, – народная мудрость

Непонятный нейминг

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

Пример ниже – кусочек «Настроек поведения» CallbackHunter – сервиса колл-трекинга. Не поняла, что означают загадочные цифры и что будет, если я их поменяю. При наведении на знаки вопроса всплывают подсказки, но ясности они не добавляют.

Фрагмент настроек сервиса колл-трекинга CallbackHunter

Например, подсказка у первого пункта Mouse motion speed гласит Average mouse motion speed analysis. Почему оно равно 9.8, осталось для меня тайной, в чем это 9.8 измеряется – тоже. Если вы понимаете что это все значит – напишите в комментариях, пожалуйста.

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

Сообщения об ошибках

Хотела тут недавно купить биткоины через приложение Coinbase. Вместо того, чтобы провести транзакцию оно сообщило мне «It looks like an unknown error occurred while processing the buy…». Гайз, если вы сами не знаете, что за ошибка у вас произошла – как мне вам доверять свои деньги и криптовалютный кошелек? В поддержку они мне, кстати, тоже не ответили :(

Сообщение об ошибке в мобильном клиенте криптовалютной биржи Coinbase

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

Попап ошибки в системе аренды недвижимости RentLinx

Отображение состояний

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

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

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

Интерфейс PlayStation. Иконки с обозначениями кнопок в самом низу экрана.

Экран «Спасибо за заказ» в приложении доставки еды Just Eat

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

Интерфейс PlayStation. Иконки с обозначениями кнопок в самом низу экрана.

Статусы заказа и интерактивная карта сервиса доставки Glovo

Защита от дурака

Часто слышу от программистов «А зачем пользователь туда полез? Сам виноват». А вот и не так! Если продукт разрешил пользователю «туда полезть» и накосячить, то виноват продукт, вернее, команда, которая его сделала.

Есть масса способов защитить пользователя от ошибок – от масок ввода и принципа «не набирай, а выбирай» до возможности отмены.

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

Функция отмены отправки письма в Gmail

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

Раньше у меня был ноутбук Sharp, у него тоже была кнопка на клавиатуре и она работала мгновенно. Поверьте мне, когда в процессе работы ты случайно промахиваешься мимо Backspace, тыкаешь в Power и теряешь контроль над ноутбуком минут на 10 – это боль.

Платежи и все, что с ними связано

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

На скрине выше форма оплаты в сервисе покупки авиабилетов Southwest Airlines. Выбран радиобатон Credit Card. Но над формой мы видим пункт PayPal, да еще такой заметный с суммой и иконкой. Зачем? К чему он относится? Ну и вообще всего много и как-то кривовато.

Итого

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

Дальше у сервиса есть два пути – либо оправдать ожидания, либо разочаровать пользователя. Каждая нестыковка съедает часть доверия. Если их много – клиент раздражается, начинает чувствовать себя неуверенно, ждать подвоха и сомневаться во всем.

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

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

Источник: https://olgashavrina.com/.

Комментарии
Продолжить чтение

Наша рассылка

Каждому подписавшемуся - "1 час на UI аудит": бесплатный ускоренный курс для разработчиков веб и мобильных приложений!

Нажимая на кнопку "Подписаться" вы даете согласие на обработку персональных данных.

Популярное

X

Спасибо!

Теперь редакторы в курсе.