Для лучшего дизайна UX: могу ли я нажать на это?

Как тонкие изменения могут увеличить ваш CTR

Все хотят больше кликов. Больше кранов. Больше пользователей говорят: «Да, я в восторге от того, что вы мне даете». Мы хотели рассмотреть несколько способов, которые на самом деле заставляют пользователей хотеть нажимать больше, и здесь на помощь приходит UX-дизайн !

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

Шрифты

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

Изображение через Vital Design

Продажи сразу упали на 20%.

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

Как правило, жирный шрифт без засечек с высокой контрастностью отлично подойдет.

Почему? Это легче всего читать. Примеры тому есть во всем интернете. Basecamp, BaseCRM, Evernote, mHelpDesk — все эти компании имеют одинаковые призывы к действию — высококонтрастный жирный шрифт без засечек. Это легко увидеть, это легко прочитать. Вот почему компании склонны использовать его вместо шрифтов с засечками. (То же самое касается плакатов — вы можете читать их с незапамятных времен). Кроме того, без засечек легче читать на компьютере, поэтому вы хотите использовать его, когда хотите, чтобы читатель щелкнул мышью — ему нужно знать, что вы говорите, прежде всего.

Тени + 3D-эффекты

Удивительно, как тени и создание чего-то 3D могут заставить людей щелкнуть по нему. Это действительно один из основных недостатков плоского дизайна. (В настоящее время. Другой заключается в том, что в конечном итоге это будет безумно устаревшим.) Когда вещи действительно плоские, они выглядят великолепно, но не так просто понять, что кликабельно, а что нет. Якоб Нильсен говорил об этом, когда оценивал Windows 8 в 2012 году.

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

(совет для профессионалов: они называются кнопками в стиле киоска).

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

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

Движение

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

С точки зрения UX

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

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

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

Еще один отличный пример — домашняя страница веб-сайта eTecc/Interactive. На самом деле они используют заливку, чтобы пользователь знал, что что-то можно щелкнуть.

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

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

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

С плоской точки зрения

Так что, хотя Apple и не добивается этого в 100% случаев, они довольно близки к этому. А движение позволяет дизайнерам создавать плоские интерфейсы, которые они хотят, и при этом сообщать пользователям, что кликабельно, а что нет. Заметили, что все примеры были исключительно плоскими? Полное раскрытие Я так и планировал. Это показывает, что плоский дизайн может работать для кнопки, если есть обратная связь.

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

Контраст + цвет

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

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

Такого рода проблема цвета и контраста чаще всего возникает с призывами к действию (CTA) и кнопками, и небольшое изменение цвета может привести к огромным изменениям в прибыли. Например, Vibethink написал о CTA и кнопках и сообщил, что изменение цвета и формы кнопки увеличило конверсию (читай: клики) на 35%. Они считали, что повышенная контрастность облегчает пользователям клики.

Но они изменили две вещи, так что это не совсем научно. Hubspot в 2011 году опубликовал результаты A/B-тестирования красных и зеленых кнопок и обнаружил, что красная кнопка превосходит зеленую на 21%.

Таким образом, цвет и контрастность могут сыграть огромную роль в том, чтобы пользователи кликали по материалам.

Заворачивать

Дьявол кроется в деталях. Как дизайнеры, разработчики, UX-специалисты и маркетологи, всякий раз, когда мы делаем что-то кликабельным, мы просим пользователя что-то сделать. Кликните сюда. Подать заявку. Свяжитесь с нами. Купи сейчас. Что бы это ни было, это то, что нам нужно. Так почему бы не упростить это? Лучший способ помочь вашим пользователям нажимать (и, таким образом, возможно, помочь вам) — сделать так, чтобы нажимать было легко. Создавая кнопки, соответствующие ожиданиям, с дизайном в стиле киоска, делая шрифты легко читаемыми на экране (даже если они маленькие) и предоставляя обратную связь по кнопкам и кликабельному содержимому, вы облегчаете жизнь своим пользователям.

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

Понравился этот пост? Вы также можете прочитать наш пост «Понимание ваших пользователей для улучшения UX-дизайна вашего веб-сайта» или наши замечательные продукты, которыми должен владеть каждый UX-дизайнер !