Создание кнопок для удобный интерфейсов

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

Атрибуты ссылок

1. Самый распространенный и простой способ выделить ссылку- сделать ее синим цветом. Вообще, синий цвет шрифта — весьма неудачный и трудно читаем, но для небольшого текста (2-3 слова), вполне подойдет. Можно использовать и другой цвет (зависит от фона сайта), но главная особенность — этот цвет должен отличаться от обычного текста.
2. Следующая подсказка может заключаться в виде какого-то символа, означающего переход, например стрелочка, или просто значок >>

3. Подчеркивание ссылки — еще одна отличительная особенность. Есть варианты подчеркивать ссылку всегда, или только если подвести к ней мышку (при этом указатель курсора обязательно должен меняться).
4. Поставьте рядом с текстовой ссылкой картинку, которая бы ассоциировалась с текстом ссылки и подсказывала, куда именно она ведет.
5. Сделать текстовую ссылку с фоном, так что она будет немного похоже на кнопку.
6. Поставить ссылку вверху или слева/справа страницы. Такое расположение ссылок понятно и привычно в качестве навигационного меню, так что пользователь догадается, что это ссылка.
И еще совет. Когда используете ссылки — не складывайте их просто друг за другом. Делайте список, лучше маркированный. Это значительно упрощает чтение и сканирование взглядом страницы.
 

Ссылки и кнопки

Споры вокруг кнопок и ссылок бушуют уже давно. Одни говорят, что лучше ставить кнопки для активных действий, другие, что ссылки более эффективные. И те и другие по-своему правы, следует учитывать контекст, при котором пользователь должен нажать на кнопку/ссылок.
На большинстве сайтов мы ссылок видим больше чем кнопок. Это объясняется тем, что:
— ссылку легче создать;
— ссылки просты и понятны для пользователя;
— ссылка не затмевает содержание страницы;
— ну и конечно, ссылки передают больше веса для SEO.
Кнопки же, в свою очередь, наоборот, занимают значительно больше времени и сил для создания, бывают разных типов, размеров, стилей и цветов, и иногда перетягивают внимание с контента на себя.
С другой стороны, различия кнопок и является их главным преимуществом. Вы можете создать трехмерную кнопку, выделить ее красным, подогнать под размер. Все это делает кнопку намного более заметной и привлекательной для нажатия. Кроме того, кнопка может заинтриговать пользователя, что повысит конверсию.
Но поскольку кнопка — более «яркий» элемент интерфейса, чем ссылка, использовать ее следует более осторожно. Использование большого количества кнопок может привести к обратному действию: пользователь просто расстроится, потеряется, что именно нажимать и просто уйдет со страницы.
Поэтому важные кнопки должны отличаться от других. Например, кнопка РЕГИСТРАЦИЯ должна быть больше и ярче, чем кнопка Очистить форму.
Кроме того, играет роль место размещения кнопки и ее окружения. Если поставить ее рядом с большим количеством контента, она просто потеряется и не будет выполнять своей функции призыва к действию. Считается, что кнопка должна быть отделена от основной части.
Не забывайте использовать градиент для кнопок. Чаще всего его используют для придания эффекта выпуклости и вогнутости. Выпуклая кнопка показывает, что на нее можно нажать, а вогнутая — что она уже нажата.
 

Кнопки призыва к действию

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

Люди ежедневно сталкиваются с массой кнопок в своей повседневной жизни. Поэтому, если они увидят на вашем сайте кнопку точно такую же, как уже видели, у них не возникнет вопросов, что с ней делать.
Используйте контрастность цветов
Цвета нужны не только для украшения вашего сайта. Они играют огромную роль для выполнения тех или иных действий. Нужные вам кнопки выделяйте яркими, контрастными с фоном сайта и другими кнопками цветами. Пользователь должен сразу заметить эту кнопку и понять, что она предлагает.
Сделайте ее большой, но не очень большой
Цвет не единственный параметр, который обращает на себя внимание. Размер так же имеет значение. Чем больше ваша кнопка, тем легче ее заметить. Кроме того, когда вы увеличиваете размер кнопки, вы так же должны увеличить и текст внутри нее. Это не только сделает ее более заметной, но и упростит чтение. Тем ни менее, не делайте ее слишком большой. Если она затмит собой контент, пользователь потеряет нить и не поймет, зачем де ему что-то покупать.
Используйте слова, которые создадут ощущение важности и срочности
Слова, которые создадут ощущение срочности и важности могут стать тем самым толчком, который заставит пользователя действовать. Добавление таких слов, как «сейчас», «сегодня», «быстро», «немедленно» и т.п. являются хорошими словами для увеличения конверсии. Это создаст определенное беспокойство и волнение в сознании пользователя, что, возможно, завтра уже будет поздно и он упустил выгоду, если не купит сейчас.

Смягчайте ваши призывы к действию

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

Добавьте стрелочки или другие икноки для убеждения
Есть несколько способов, с помощью которых вы можете проиллюстрировать ваш призыв к действию, чтоб сделать его более убедительным. Один из способов — добавить стрелку, типа «play», чтоб пользователь сразу знал, что эта кнопка что-то «запускает». Можно использовать другой значок, который будет показывать, что эта кнопка означает (обновление, вызов справки, очистка формы).

Добавить эффект при наведении
Визуальные изменения кнопки, когда пользователь подводит к ней курсор может заставить его щелкнуть по ней. Изменения яркости, цвета, градиента являются хорошими способами призыва к действию. По крайне мере, курсор мыши должен измениться.
Поместите кнопку в верхней части страницы и во втором экране
Если ваша страница подразумевает прокрутку экрана, позаботьтесь о том, чтоб кнопка с призывом к действию была в обоих экранах: и вверху, и ниже линии прокрутки. Пользователи, как правило, проводят большую часть времени в первом экране, но все же часто заканчивают просмотр страницы в нижней части экрана. Не дайте ему забыть, что он что-то должен сделать, пусть в любом случае кнопка будет видна и доступна.
И последний совет — используйте A/B тестирование, чтоб определить, какой вариант страницы и кнопки лучше всего подходит для вашего сайта.
Кнопки «ОК»
Изначально, когда графические пользовательские интерфейсы только появились, по стандарту на любое действие пользователя, система требовала подтверждение. Кнопка ОК — выполнение, кнопка ОТМЕНА — возврат в предыдущее состояние. Сейчас системы стали более умными и сложными. А потому, ОК больше ничего не означает (особенно, когда в диалоговом окне несколько кнопок.
Делайте кнопку более понятной, помещая надпись, полностью раскрывающую смысл. Что конкретно произойдет после того, как пользователь нажмет на кнопку? Вместо ОК поставьте: КУПИТЬ, СОХРАНИТЬ ИЗМЕНЕНИЯ, ПОЛОЖИТЬ В КОРЗИНУ и т.п.
Надеюсь, эти простые советы помогут вам при создании удобных интерфейсов.