Кнопка или ссылка, правила оформление навигации на сайте
3 Августа 2018
Кнопка или ссылка, правила оформление навигации на сайте

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

Когда кнопка лучше, чем ссылка?

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

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

  • Их не должно быть много на ключевых страницах;
  • Кнопки сопровождаются емкими и короткими надписями.

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

Использование кнопки или ссылки в навигации сайта

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

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

Важные правила формирование изображений на кнопках

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

1. Правильно используйте градиенты;

Использование градиента в кнопке

2. Делайте кнопку убеждающей в чем то;

Оформление кнопки

3. Текст должен начинаться с заглавной буквы;

Правильное оформление кнопки

4. Располагайте кнопку в правой части страницы сайта;

Расположение кнопки справой стороны страницы

5. Выделяйте ее в зависимости от степени важности перехода;

Правила оформления кнопки

6. Используйте прозрачный фон и дополнительные символы;

Использование прозрачного фона в кнопке

7. Старайтесь делать вашу графику заметной для пользователя.

Оформление кнопки

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

Вогнутая и выпуклая кнопка на сайте

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

Оформление кнопки на сайте

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

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