Статьи
#KrupaNotes:
Виталий Фридман о редизайне
Smashing Magazine
26 февраля, 2018
avatar
Катя Павлевич
Редактор в Telegraf.design
Мы любим тексты без ошибок. Если вы все же их обнаружили, выделите фрагмент и нажмите Ctrl+Enter.

10 февраля состоялась 2-я UI/UX конференция Krupa. Telegraf записал самые интересные мысли нескольких спикеров в свой конспект #KrupaNotes. Сегодня мы делимся второй из лекций.

Виталий Фридман — основатель и главный редактор культового журнала о дизайне и разработке Smashing Magazine. В своей лекции он поделился опытом редизайна сайта журнала и рассказал, как эмоциональная связь влияет на лояльность пользователей.

Часто редизайн — это плохая идея. Но нам он был просто необходим.

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

Эти 2 года стали мучительным и долгим для меня процессом. Мы нарисовали очень много котов. Только я их терпеть не могу. Процесс создания сайта состоял из следующих этапов.

Personality

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

На самом деле креативный процесс выглядит как разветвленное дерево из веток и тупиков.

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

Весь веб — это 2 шаблона. Вот хедер, вот карусель, внизу футер, иконка рядом, чтобы все было ясно. Мы смотрим локально на то, чем занимаемся. Концентрируемся на toolbar с классным градиентом. А что, если придумать что-то совершенно другое?

Мы любим A/B-тесты. Красная кнопка или зеленая — где конверсия выше? Доказано, что красные работают хуже, но важно ли это в конечном итоге? Считаю, что A/B тесты нужно совмещать с A/Z-тестами, где мы проверяем что-то совершенно новое. Если мы оптимизируем кнопку 100 лет подряд, то она получится классной. Но нужна ли она нам в принципе? Давайте разберемся в трендах и шаблонах на примере статистики.

Сколько споров идет насчет «челки» iPhone X? Все дизайнеры в панике, все бросились решать эту проблему. Но если посмотреть статистику, то 98% людей считывают информацию с айфона в portrait режиме. Получается, что проблема «челки» влияет всего на 2% пользователей.

90% запросов на уведомления на сайте отклоняются или игнорируются.

Всего 2 человека из 1000 пользуются share buttons на сайте. Это меньше 1%. Лично мы их даже не добавляли в Smashing Magazine.

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

Сторителлинг

Возьмем, например, такой интерфейс: есть в нем какой-то сторителлинг? Нет. Но, может, он и не нужен здесь?

C другой стороны, есть сервис MailChimp. У меня с ним настолько сильная эмоциональная связь, что я в жизни не смогу уйти от него. У них есть personality. Хотя емейл — самая скучная в мире вещь. И даже ее можно сделать интересной.

MailChimp раздает на улице детские книги с обезьянкой, а не интерфейсы с кнопкой «Купи». И это работает.

Их маркетинг в деталях. В таких, как вот эта.

Вы тоже испытываете похожие эмоции, когда собираетесь послать письмо тысячам получателям?

Любой скучной вещи можно добавить personality. Взять, к примеру, title. Ну что может быть скучнее тайтла? Ты просто выбираешь, кто ты — Ms, Mrs или Mr. Но почему бы не предложить больше? Может быть, вы лорд? Или принцесса?

Или почему элементы UI должны быть либо круглыми, либо квадратными? Может, попробовать другую форму? Их же миллионы.

Уважение

Во время проектирования интерфейсов важно проявлять уважение к пользователям. Интересно, задумывались ли об уважении создатели такого интерфейса?

Является ли проявлением уважения ход, когда вы прячете опцию отказа от страховки в… выпадающем списке стран?!

Или о чем думали дизайнеры, когда создавали такой интерфейс? Возможно, о трафике, но не об уважении.

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

Проблема

66% наших пользователей используют Ad blocker. Что говорить, я сам его использую и вам советую.

Каждый год мы теряли 50% дохода, основанного на рекламе. В итоге, взялись за другие форматы. Один из них — приобретение членства (membership). Но для этого нам нужно было создать реальную ценность для комьюнити. Проект начали со сбора команды, а дизайн — с текста.

Мы задумались над компонентами с точки зрения копирайтинга. То есть, сначала прописывали элементы, а потом создавали их. Например, мне важно было прописать надпись для error message. Что можно сделать, когда у человека проблема? Успокоить его и заставить улыбнуться.

Потом мы начали выбирать типографику. Остановились на шрифтах Elena и Mija. Я их терпеть не могу, особенно, в большом размере.

Но неважно, что думаю я. Важно, что думают пользователи. Когда мы проводили ресерч, как люди нас воспринимают, то хотели услышать “respected”, “professional”, “serious”. Но услышали другое: “open minded”, “friendly”, “quirky”, “cats”.

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

В один момент передо мной возник вопрос: куда дальше двигаться? В направлении серьезности или нет? Когда мы работаем над UI-продуктом, то либо делаем абсолютно правильно, либо абсолютно неправильно. Может так получиться, что кнопка окажется на 5 пикселей дальше, чем должна быть. Нет. Она должна быть или точно на месте, или там, где никто ее не ожидает увидеть. Так и с котами: мы решили, что либо ни одного, либо завалим ими все.

Одна из наших фич — поворот компонента на 11 градусов. А началось все с эксперимента.

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

Мы подумали, как внедрить его в другие компоненты. С течением времени мы все больше подходили к повернутости. Она сохранилась даже в формуляре, но уходит в свое время, чтобы не мешать.

Очень важно рассказывать истории, люди их любят. Например, знаете, какая одна из самых нажимаемых кнопок на сайте? С надписью “This button does nothing”. Но в обратную сторону такой ход не работает, люди неохотно нажимают “This button does something”.

Что я терпеть не могу, так это отсутствие у дизайнеров уважения к пользователям.

На Facebook перед удалением аккаунта тебе показывают аватарки друзей, сопровождаемые надписью: «Вы уверены? Эти люди будут скучать по вам». Не делайте так.

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

Off-boarding процесс тоже проходит гладко. Если люди от нас уходят и удаляют аккаунт, мы их подбадриваем. Напоминаем, что они могут возобновить членство в течении 7 дней, а также сохранить себе список заказов.

Из интервью с пользователями мы поняли, что те, кто ушел, потом настоятельно нас рекомендуют друзьям.

Эмоциональная связь — это хорошо, но надо же как-то и продавать, получать трафик и доходы. Мы решили использовать этот же фреймворк для e-commerce.

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

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

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

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

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

Читайте также:

#KrupaNotes: Павел Грозян о роли дизайнера в стартапе и разнице между дизайнерами в Украине и США

#Krupanotes: Алан Купер о том, как стать хорошим предком и почему это важно для дизайнеров

 

Изображения: UI/UX conference Krupa, лекция Виталия Фридмана

avatar
Катя Павлевич
Редактор в Telegraf.design
Колонка

У нас есть еще кое-что для вас

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: