Содержание

Дизайн кнопок для сайта — руководство по кнопкам в веб дизайне

Как создать кнопку, на которую хочется нажать?

Кнопка — это интерактивный элемент цифрового продукта, позволяющий пользователю совершить действие, указанное на ней (например, оплатить).

Придай форму

Кнопка на сайте — это цифровой аналог клавиши на клавиатуре. Сделай так, чтобы люди идентифицировали его как кнопку:

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

Продумай элементы

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

  • Радиус закругления кнопки в углах
  • Размер тени
  • Безопасное пространство (расстояние от кнопки до других элементов страницы)
  • Внутренний отступ (расстояние от края кнопки до надписи на ней)
  • Стиль оформления, цвет, градиент
  • Характеристики шрифта для метки

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

Выравнивай иконки

Как правильно выравнивать иконки внутри кнопки:

  • В зависимости от радиуса угла создайте круг или квадрат размером с высоту нашей кнопки
  • Внутри него создай другую фигуру для размещения иконки
  • Внутри более крупной фигуры она должна иметь отступ, который соответствует высоте текста кнопки
  • Затем размести иконку в меньшую фигуру

Отцентрируй

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

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

Определи размер

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

Минимально допустимые размеры:

  • Для веб-кнопок и других интерактивных элементов на устройстве с курсором — 32×32 pt
  • Для мобильных кнопок и прочих элементов на мобильном устройстве — 44×44 pt (оптимально — около 50 pt)

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

Сбалансируй края

Следите за балансировкой внешнего края кнопок, чтобы они повторяли формы самой кнопки и не дополняли ее, а не перебивали.

Подбери эффекты

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

Принципы правильного создания кнопок для сайта

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

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

Очень легко и просто взять заранее заданные «пользовательские интерфейсы PSD», которые бесплатно выложила какая-то щедрая душа (и, несомненно, содержащие кнопки, навеянные духом Apple’а). Но почему не потратить минуту на размышления, подходит ли упомянутый стиль кнопок к контексту вашего замысла, и решить, возможно ли создать что-то более оригинальное?
Повторять чьи-то кнопки удобно, так экономится время, но невредно и потратить минуту на более детальное понимание замысла и структуры своих (или чужих) кнопок. Как создан их дизайн? Подходят ли они к интерфейсу/контексту/торговой марке? Есть ли возможность создать что-то уникальное? Достаточно ли выделяются мои кнопки? Нужны ли мне основные, второстепенные, третьестепенные кнопки? Достаточно ли они отличаются друг от друга? Симпатично ли смотрятся?! (Почему нет, все мы хотим создавать классные штучки, правильно?!).

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

1. Подгонка под бренд

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

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

2. Подгонка под контекстуальный стиль

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

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

3. Убедитесь, что кнопки достаточно контрастны

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

4. Рассмотрите закругленные или фигурные кнопки

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

5. Уберите выделение второстепенных элементов пользовательского интерфейса

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

6.

Согласующиеся по цвету края/границы

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

7. Поаккуратнее с размытыми тенями

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

8. Немного иконографии внесет свой вклад в юзабилити

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

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

9. Обдумайте главные, второстепенные и третьестепенные стили

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

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

10. Всегда делайте состояния обратной связи

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

Заключение статьи по созданию кнопок для сайта

У вас, дизайнеров, станет происходить все по-своему. Бьюсь об заклад, это будет длительное время, в течение которого вы станете часто отстраняться от экрана, слегка склоняя голову, щурясь и говоря: «Да-а-а, так почти хорошо!». Конечно, это – часть удовольствия, получаемого от процесса создания кнопок для сайтов и талантливые дизайнеры склоняются к тому, чтобы все делать именно так, но я думаю, что хорошо было бы произносить небольшой мысленный комментарий, диалог и размышлять над принимаемыми дизайнерскими решениями.

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

Автор: Pete Orme

Источник: //webdesign. tutsplus.com/

Редакция: Команда webformyself.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

Как создать фиксированную кнопку на сайте?

Поступил вопрос от одного из подписчиков: «Как создать фиксированную кнопку на сайте, похожую на эту?»

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

Чаще всего такие кнопки прикрепляют к одной из стенок (правой или левой) сайта.

Давайте сейчас рассмотрим тот код, который нужно добавить на свои веб-страницы, чтобы эта кнопка появилась и начала работать.

Вот тот код, который нужно разместить на свою веб-страницу:

<div>
<a href='//twitter. com' target='_blank'>
<img src='https://s5.postimg.org/5glnpd73r/1489642981_twitter.png'
border=0 alt='Следи за мной на
Twitter' title='Следи за мной на Twitter' /></a>
</div>

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Я разместил его перед закрывающим тэгом </body>. Если вы используете шаблон wordpress, то это можно сделать в файле footer.php вашей темы.

Что собой представляет этот код?

По сути, мы просто создали блок div с идентификатором follow. Содержанием этого блока является та самая картинка-ссылка, которую мы и хотим сделать фиксированной.

Все. По HTML части мы закончили.

Теперь остается только с помощью средств CSS, сделать этот блок фиксированным.

Вот тот код, который для этого необходим.

#follow {
margin: 0px;
background: e6eeee;
z-index: 2;
position: fixed;
top: 0px;
left: 0px;
}

Его нужно добавить в файл стилей, который у вас используется. Например, style.css.

z-index: 2 – необходим для того, чтобы на небольших мониторах кнопка располагалась поверх основного текста.

Основной эффект достигается за счет применения свойства position: fixed, которое делает блок фиксированным и заданием точного местоположения блока (top: 0px; left: 0px;).

Вот и все. Как видите, используется минимальное количество кода.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Плавающая кнопка сбоку сайта на CSS + HTML

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

Итак, первое, что нужно сделать:

добавить данный участок кода сразу после открывающегося тега <body>. В WordPress это будет в файле header.php:

<a href="адрес сайта/путь ссылки"><img title="Кнопка палитра" src="адрес сайта/wp-content/ваш шабллон/путь к картинке" alt="buttons" /></a>

Как не сложно догадаться, мы добавляем картинку и оборачиваем ее в ссылку. При желании картинку можно заменить любым текстом, обернутым в <div>. Текст можно сделать вертикальным, добавить отступы (padding) и залить фон цветом. Будет похоже на кнопку.

Теперь осталось добавить подходящие стили для нашей плавающей кнопки:

.add_palitra {
display: block;

 
width: 80px;
height: 150px;
position: fixed;
right: 0;
top: 200px;
z-index: 99999;
}

Параметры width и height — это ширина и высота изображения. Корректируйте их под себя. Параметр top — это отступ от верхнего края экрана. Если хотите скорректировать разную высоту под разные разрешения экрана, то добавьте что-то такое:

@media screen and (max-width: 480px) {
.add_palitra {
top: 100px !important;
}
}

Элемент z-index задает расположения элемента поверх всех остальных.

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

right:0 — «прилепляет» картинку или текст к правой части экрана.

Это все. Мы создали кнопку поверх всех остальных элементов. Осталось придумать, куда она будет вести.

Если Вы хотите по кнопке выводить всплывающее окно с формой обратной связи, то можете воспользоваться плагинами Popup Maker иContact Form 7. Делается все достаточно просто:

Как разместить кнопку на сайте с помощью html/css



EDIT: фон-это просто изображение & раздел, где я помещаю изображение, — это тот, который я дал

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

Изображение страницы сайта:

Это мой код html, очень простой, просто нужно было добавить кнопку

<section>
  <div>
    <div>
      <div><p>
            
          </p></div>
      <div>
        <div>
          <!-- <h2>Messes Make Memories</h2> -->
          
        </div>
      </div>
    </div>
  </div>
  <img
    src="assets/img/background/flood2. png"
   
   
  ></img>
</section>
html css
Поделиться Источник CS-learner
    22 августа 2020 в 22:21

3 ответа

  • Как разместить md-файл на сайте Jekyll?

    Я хочу разместить md-файл на веб-сайте Jekyll, чтобы использовать его в качестве примера страницы. E.g. Я хочу, чтобы example.md присутствовал на веб-странице. Но, конечно, любой файл .md, который я помещаю в свой источник, превращается в страницу html. Я подумал, что, возможно, в файле…

  • Как поместить кнопку внутри поля ввода текста в форме на веб-сайте с помощью javascript, css, html

    Я хотел бы написать скрипт greasemonkey, который делает кнопку внутри формы ввода текста на некоторых веб-сайтах, чтобы формы ввода текста выглядели примерно так: ____________________ Username:|___________|BUTTON| ____________________ Password:|___________|BUTTON| Есть ли какой-нибудь способ. ..


1

Существует 2 типа кнопок Там настоящая кнопка. Он используется для запуска события для JavaScript. Он работает так же, как в приведенном ниже примере, и может быть стилизован, как показано ниже. Вы можете вставить его куда угодно.

button {
  background-color: blue;
  width: 200px;
  font-size: 20px;
  padding: 10px;
  border-radius: 5px;
  border: 3px solid yellow;
  color: white;
  cursor: pointer;
}
<button>I'm a Button</button>

Затем есть Псевдокнопка. Это не настоящая кнопка. Это просто div окно для стилизации ссылки как кнопки:

.button {
  background-color: blue;
  width: 200px;
  font-size: 20px;
  padding: 10px;
  border-radius: 5px;
  border: 3px solid yellow;
  color: white;
  text-align: center;
}
<a href=""><div>I'm a Button</div></a>

Поделиться tacoshy     22 августа 2020 в 22:37


1

  1. Вставьте тег <button> в тот же Родительский div, который имеет код для этого конкретного раздела

  1. Установите свойство css родительского элемента равным position: relative

  2. Установите свойство css для параметра <button> в значение position: absolute

Наконец, используйте

top : 40px;
right : 100px;

для свойства css тега button

Примечание: измените значение верхнего и правого свойства в соответствии с удобством.

Поделиться Sarthak Kuchhal     22 августа 2020 в 22:37


1

ну, попробуйте этот код

   <!DOCTYPE html>
   <html>
     <head>
       <style>

       .img { 
       width:100%;
       height: auto;
       top:0;
       left:0;
       position: relative; 
       z-index: 1;
       } 

       .anybutton {
       top:11%;
       left:55%;
       width:100px;
       height:40px;
       position: absolute;
       z-index: 2;
       background: orange; 
       }

      </style>
   </head>

     <body>

       <div>
          <img src="assets/img/background/flood2.png" />
          <input type="button" value="Right Here" />
       </div>
       
      </body>
</html>

Поделиться Anonymouse Lovecat     23 августа 2020 в 18:54

  • как разместить кнопку обзора в html

    Я работаю над своим первым проектом в PHP году. У меня есть форма в HTML, в которой у меня есть изображение поля. Теперь я хочу просмотреть свой компьютер, выбрать изображение и отправить его в свою таблицу в базе данных mysql с помощью php. Для этого мне нужно иметь кнопку обзора рядом с textbox….

  • Как разместить фоновую видеозапись на сайте HTML/CSS

    Я пытаюсь разместить видео в качестве фонового видео на своем сайте. Я много исследовал, но это не работает, и я не знаю почему. На моем html у меня есть: <video id=bgVideo controls preload=true autoplay loop muted> <source src=../images/Home_Page.mp4 type=video/mp4 > <source…

Похожие вопросы:


Нужна помощь с HTML/CSS/jQuery

У меня есть изображение, которое выглядит так. И я хочу разместить его на своем сайте, но я не хочу, чтобы это было изображение. Я хочу, чтобы только часть изображения была изображением, а все…


Как разместить текст, например, с помощью вкладки на веб-сайте?

Я только что получил еще одно задание по веб-дизайну. И мне было любопытно, как разместить такой текст в пространстве. Проблема здесь не в заголовке и не в тексте слева. У меня проблема со временем…


как разместить файл flv на сайте без плеера

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


Как разместить md-файл на сайте Jekyll?

Я хочу разместить md-файл на веб-сайте Jekyll, чтобы использовать его в качестве примера страницы. E.g. Я хочу, чтобы example.md присутствовал на веб-странице. Но, конечно, любой файл .md, который я…


Как поместить кнопку внутри поля ввода текста в форме на веб-сайте с помощью javascript, css, html

Я хотел бы написать скрипт greasemonkey, который делает кнопку внутри формы ввода текста на некоторых веб-сайтах, чтобы формы ввода текста выглядели примерно так: ____________________. ..


как разместить кнопку обзора в html

Я работаю над своим первым проектом в PHP году. У меня есть форма в HTML, в которой у меня есть изображение поля. Теперь я хочу просмотреть свой компьютер, выбрать изображение и отправить его в свою…


Как разместить фоновую видеозапись на сайте HTML/CSS

Я пытаюсь разместить видео в качестве фонового видео на своем сайте. Я много исследовал, но это не работает, и я не знаю почему. На моем html у меня есть: <video id=bgVideo controls preload=true…


Angular2: как разместить + перенаправить форму с действием на внешнем сайте

У меня есть форма на веб-странице Angular2. Когда я нажимаю кнопку отправить в форме, я бы хотел, чтобы произошел эквивалент method=post…..>. То есть сценарий действия для формы находится на…


Как связать my CSS с my HTML на размещенном сайте github

Моя проблема заключается в том, что мой сайт, который я пытаюсь разместить с Github страницами, не будет читать CSS, которые я связал с ним. Мой HTML выглядит так: <!DOCTYPE html> <link…


Как разместить кнопку над фигурой в CSS?

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

Дизайн кнопки для сайта: рекомендации веб-дизайнера

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

Пропорции кнопок для сайта

Одна из наиболее частых ошибок в кнопках это нарушение пропорций отступов внутри кнопки от надписи. Необходимо чтобы отступы сверху и снизу до надписи были равны. Справа и слева расстояние также должно быть одинаковым.

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

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

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

На мой взгляд, наиболее удачные пропорции:

  • Надпись на кнопке, к примеру: 16px;
  • Отступ сверху и снизу: 16px;
  • Отступ справа и слева: 16px или по 32px.

Выравнивание текста в кнопке

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

Как выровнять надпись в кнопке по центру?

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

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

Радиус скругления углов

Иногда встречаются кнопки с большим радиусом скругления у всех углов, кнопка в таком случае выглядит на мой взгляд не очень аккуратно. Лучше всего сделать радиус в 2-4px. по всем углам. Или как вариант сделать полностью скругленные углы. Пример показал ниже.

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

Надеюсь, этот небольшой материал по созданию кнопок для сайта будет вам полезен.

Как разместить на своем сайте кнопку оплаты? – Справочный центр Vigbo

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

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

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

2. Авторизуйтесь в своем аккаунте ЮMoney и перейдите в раздел Сбор денег.

3. Откроется окно, в котором представлены все возможные варианты для приема платежей. Нажмите на вариант Форма/кнопка на сайт.

4. Выберите конструктор кнопки.

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

ВАЖНО: сумма платежа будет фиксированной. Покупатель не сможет ее изменить.

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

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

7. Справа от конструктора вы всегда можете видеть вид создаваемой кнопки и, по завершению настройки, получите ее код. Скопируйте код.

8. В системе управления сайтом откройте редактор той страницы, где необходимо разместить кнопку. Добавьте виджет Встроенный код. Подробнее о том, как добавить такой виджет, описано в руководстве Виджет Встроенный код. Разместите скопированный ранее код кнопки и сохраните изменения.

На сайте кнопка будет отображаться таким образом.

ВАЖНО: информация об оплате не будет отображаться в системе управления. Когда и каким покупателем была произведена оплата, вы сможете просматривать только в вашем аккаунте ЮMoney.

Как заставить посетителей сайта нажимать ваши кнопки

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

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

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

Анатомия идеальной кнопки

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

Анатомия пуговицы

Чего следует избегать при разработке кнопки

Кнопки, не похожие на кнопки

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

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

  • Квадратная кнопка с заливкой
  • Круглая кнопка с заливкой
  • Круглая кнопка с заливкой и тенями
  • Кнопка с контуром / призраком

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

Примеры распространенных дизайнов кнопок

Расплывчатые или вводящие в заблуждение надписи на кнопках

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

Используйте ярлыки, которые четко объясняют, что делает кнопка, и подтверждают действие, которое пользователь собирается предпринять. Также важно учитывать контекст кнопки и соответствующим образом адаптировать метку.Избегайте меток «да» или «нет» и вместо этого используйте описательные метки, такие как «Удалить» или «отменить».

Очистить метку кнопки, подтверждающую действие, которое пользователь собирается предпринять

Кнопки, состояние которых не отображается на экране

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

— Якоб Нильсен

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

Дизайн кнопок с такими состояниями, как:

  • Основное состояние — кнопка интерактивна и готова к использованию
  • Активно — Пользователь нажал кнопку
  • Гувер — Курсор помещен над интерактивным элементом
  • Сфокусирован — Кнопка была выделена с помощью клавиатура
  • Выполняется — Действие обрабатывается
  • Отключено — Кнопка не интерактивна

Различные состояния кнопок

Неподходящий дизайн кнопок

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

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

Согласованный и несовместимый дизайн кнопок

Использование слишком большого количества кнопок

«Практическое правило для UX: больше возможностей, больше проблем.”

— Скотт Бельски, директор по продуктам

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

Иерархия кнопок и действия

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

CTA

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

Общие CTA включают кнопки веб-сайтов, такие как UXPin, у которых есть очень заметная кнопка CTA «Присоединяйтесь бесплатно» с высокой цветовой контрастностью.

Отличная кнопка CTA

Психология эффективной кнопки CTA Copy

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

Вот несколько советов, основанных на психологии, которые помогут укрепить вашу копию призыва к действию:

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

Используйте точный язык : Не допускайте ошибок в интерпретации или неправильном толковании. Не говорите «Удалить», если «Удалить» было бы гораздо лучше.

Используйте язык, подтверждающий действие пользователя. : Используйте слова, которые определяют действие, которое пользователь собирается предпринять, например «Опубликовать», а не просто «Отправить». Это устраняет неуверенность и дает пользователю уверенность в своих действиях.

Используйте императивы : Императивы превращают фразы в команды. Они уменьшают количество слов на копии кнопки, облегчая ее чтение. Вместо «Да, создать мою учетную запись» просто используйте «Создать учетную запись».

Основные действия

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

Вторичные действия

Вторичные действия — это альтернативы первичным действиям. Они включают кнопки «назад» и «отмена». Эти кнопки веб-сайта должны иметь меньшую визуальную заметность, чтобы снизить риск ошибки и побудить к положительным первичным действиям.

Разница в визуальной заметности между первичными и вторичными действиями

Третичные действия

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

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

Рекомендации по стилям, цвету и дизайну кнопок

Форма кнопки

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

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

Круглые кнопки : это кнопки с закругленными краями.

Пуговица круглая

Кнопки-призраки / линии : это кнопки без сплошной заливки. Их лучше всего использовать для второстепенных действий.

Кнопка линии

Плавающие кнопки действий (FAB) : Эта кнопка используется для основных действий.

Плавающая кнопка действия

Кнопки с пиктограммами и ярлыками : Эти кнопки имеют как пиктограмму, так и ярлык.

Значок и кнопка с надписью

Кнопки с пиктограммами : Поскольку эти кнопки не имеют ярлыков, их легко складывать друг с другом.

Значок кнопки

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

Цветовые палитры

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

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

Язык цвета

Размещение кнопок и макет страницы

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

Что касается кнопок основных действий для веб-сайтов, то все еще не решено, как лучше всего разместить их. Вариант A — это когда кнопка основного действия идет первой, а в варианте B — последней.Лучше всего спросить себя, что пользователь ожидает увидеть первым в вашем конкретном контексте.

Размещение кнопок

Дизайн кнопок с лучшими инструментами пользовательского интерфейса

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

Da Button Factory — Бесплатный генератор кнопок CTA

Что случилось со старой «фабрикой Da Button Factory»?

Da Button Factory была приобретена ClickMinded! Инструмент был обновлен и останется бесплатным. Теперь это генератор кнопки с призывом к действию для наших студентов, изучающих цифровой маркетинг, которые учатся писать в блоге, способствующие конверсии.

Мы рекомендуем вам использовать последние версии Chrome, Firefox, Edge или Safari для использования этого инструмента. У вас могут возникнуть проблемы, если вы используете Internet Explorer — в этом случае просто загрузите один из рекомендуемых браузеров.

Как добавить кнопку на веб-сайт, в сообщение электронной почты или в сообщение в социальных сетях

Есть несколько способов сделать это.

Вариант №1: Загрузить файл изображения кнопки

Это самый простой способ. Просто выберите нужный тип файла и нажмите кнопку загрузки.

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

Вариант № 2: реализовать кнопку как HTML + CSS

Da Button Factory также является бесплатным генератором кнопок CSS.Для этого варианта требуется немного больше знаний HTML и CSS, но в результате веб-страница или электронное письмо будут работать быстрее (поскольку нет необходимости загружать изображение).

Для этого создайте элемент HTML, например «div» или «button», напишите копию с призывом к действию и назначьте ей класс. В этом примере мы назовем класс my-cta-button.

Затем скопируйте код CSS, предоставленный инструментом в разделе «Встроить», и добавьте его либо в свой файл CSS, либо на страницу с помощью тегов «style».

Вот и все! Теперь вы разработали и реализовали свою собственную кнопку HTML.

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

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

  1. Используйте выделяющийся дизайн кнопок. Убедитесь, что между текстом кнопки и фоном, а также между кнопкой и фоном страницы достаточно контраста.
  2. Сообщите своим пользователям, что они получают, нажав на ваш CTA. Вместо того, чтобы использовать что-то общее, например «Щелкните здесь», сделайте описательный текст, например «Купить сейчас» или «Загрузить».
  3. При написании CTA-копии используйте от первого лица. Лучше использовать «Просмотреть мою учетную запись» вместо «Просмотреть свою учетную запись».
  4. Сделайте свой CTA-текст кратким и по существу. Избегайте создания излишне многословных призывов к действию.
  5. Сделайте свое предложение более привлекательным, включив такие термины, как «Сейчас», «Бесплатно» или «Сохранить». Например, «Загрузите СЕЙЧАС», «Получите БЕСПЛАТНУЮ электронную книгу» или «Сэкономьте 10 $».

Ваша очередь

Da Button Factory от ClickMinded — это онлайн-производитель кнопок, который позволяет быстро и бесплатно создавать красивые кнопки с призывом к действию с высокой конверсией для веб-сайтов, почтовых кампаний или публикаций в социальных сетях.

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

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

Дизайн кнопок для веб-сайтов и мобильных приложений

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

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

Дизайн кнопок, которые помогают пользователям с небольшой помощью Justinmind

Загрузите бесплатно

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

Основные правила дизайна кнопок

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

1. Сделайте его интерактивным

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

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

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

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

2. Упростите поиск и прогнозирование

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

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

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

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

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

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

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

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

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

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

4. Размер имеет значение: есть кнопки, на которые люди могут нажимать

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

Размер вашей кнопки особенно важен для мобильного дизайна. Слишком большая кнопка приведет к визуально заряженному экрану, в то время как слишком маленькая кнопка не может быть нажата обычным пальцем. В 2003 году Touch Lab Массачусетского технологического института опубликовала исследование, которое показало, что большинство кончиков пальцев имеют ширину 8–10 мм.

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

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

5. Не используйте кнопку для всего.

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

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

Дизайн кнопок

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

6. Всегда предоставляйте обратную связь или рискуйте гневом пользователя

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

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

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

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

Дизайн мобильных кнопок в приложениях для Android и iOS

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

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

1. Придерживайтесь основных принципов дизайна пользовательского интерфейса

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

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

Когда «касание» является основным методом ввода для вашего мобильного приложения, принципы материального дизайна Android рекомендуют, чтобы цели касания были не менее 48 x 48 точек на дюйм и не менее 8 точек на дюйм (или более) между ними. Это необходимо для обеспечения сбалансированной плотности информации и удобства использования.

С точки зрения формы, это действительно зависит от того, для чего вы проектируете. Например, в дизайне пользовательского интерфейса Android плоские и выпуклые кнопки материала должны иметь высоту 36dp, минимальную ширину 88dp и радиус угла 2dp (плоский) / иметь высоту по умолчанию 2dp (поднятый).

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

2. Используйте цвет, чтобы сделать дизайн кнопок пользовательского интерфейса действенным.

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

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

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

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

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

3. Помогите пользователям расставить приоритеты, устраняя трение на экране.

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

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

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

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

4. Поощряйте пользователей визуальной обратной связью в дизайне кнопок пользовательского интерфейса

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

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

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

Тестирование дизайна кнопок

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

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

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

  • Могут ли пользователи найти все основные функции?
  • Сколько времени в среднем у них уходит на каждую функцию?
  • Понимают ли пользователи, как каждая функция соотносится с другими в важных вопросах?
  • Логична ли навигация для пользователей?

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

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

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

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

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

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

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

Этот набор пользовательского интерфейса уже предустановлен в Justinmind, но если хотите, обратите внимание на компоненты библиотеки Web Wireframing.

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

Вы можете узнать больше о наборе пользовательского интерфейса Bootstrap во всей его красе в нашем специальном посте.

Kendo UI kit — это забавный инструмент, который всегда в вашем распоряжении. Поставляется с кнопками всех размеров, как основных, так и дополнительных.Благодаря нескольким вариантам размера создание вашего следующего UX-дизайна будет намного проще и быстрее с Kendo. Не говоря уже о том, что нам просто нравится дизайн кнопок на группе кнопок!

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

Как создать эффективные кнопки CTA для вашего веб-сайта

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

Что такое кнопки CTA?

Кнопки с призывом к действию служат для различных целей веб-сайта, но их основная функция — побудить посетителей вашего веб-сайта что-то сделать (вдохновить на конкретное действие). Вы уже видели их раньше: «Нажмите, чтобы загрузить», «Отправить», «Свяжитесь с нами»… список можно продолжать и продолжать. Эти призывы к действию довольно распространены и могут легко потеряться в беспорядке, будучи такими же, как почти любой другой веб-сайт.Чтобы люди заметили и начали действовать, ваши кнопки с призывом к действию должны выделяться на вашей странице и среди других, которые ваши посетители, несомненно, увидят и на других веб-сайтах.

Еще одна особенность кнопок CTA — это то, что они всего лишь кнопки . Если вы хотите, чтобы люди обратили внимание на призывы к действию на вашем веб-сайте, они должны выделяться! Если на вашей странице есть только выделенный текст с надписью «Нажмите здесь», это не вызовет большого количества трафика. С другой стороны, создание кнопки CTA выделяется и привлекает читателя.

Нет единого способа создать кнопку CTA для веб-сайта, на самом деле все как раз наоборот! Будьте изобретательны и оригинальны в своих призывах к действию. Вся цель призывов к действию — привлечь внимание вашего веб-посетителя, заинтересовать его и побудить его совершить действие на вашем веб-сайте (например, отправить контактную форму, загрузить электронную книгу или посетить определенную страницу). Вы должны создавать свои кнопки вместе с посетителями и с учетом действия, которое вы хотите, чтобы они выполняли.Скоро вы увидите, что чем больше у вас будет продвинутых, привлекательных и интересных кнопок с призывом к действию, тем больше будет достигнутых целей в Google Analytics.

Как гласит старая пословица, «презентация — ключ к успеху »! Человеческий глаз способен обнаруживать отклонения в пределах общего рисунка, а также остеклять объекты, которые все выглядят одинаково. Сделайте кнопки CTA очевидными и разместите их в фокусе своей веб-страницы, чтобы повысить вероятность действий посетителей.

Советы по созданию лучших кнопок CTA для вашего веб-сайта

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

Ниже приведены 4 обязательных элемента при создании новой кнопки с призывом к действию:

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

Здесь текст, который вы используете, инструктирует посетителей что-то делать.Использование таких слов, как «Откройте для себя», «Запрос», «Загрузить» и «Узнать», предоставляет посетителям простое, но описательное действие, которое нужно предпринять, чтобы перейти к следующему шагу. Это ваш шанс использовать творческие глаголы! Исследования показали, что чем сложнее кнопка, тем больше вероятность, что ваш посетитель нажмет на нее. Итак, вы захотите использовать что-то еще, кроме «Щелкните здесь», чтобы побудить к немедленным действиям.

2. Составьте четкое ценностное предложение

Перед тем, как нажать любую кнопку с призывом к действию, любой посетитель веб-сайта может взвесить ценность того, что он получает в обмен на то, что вы позволите ему сказать ему, что делать.Таким образом, вы хотите убедиться, что в вашем призыве к действию четко указаны преимущества продолжения. Как только этот критерий будет соблюден, посетитель должен иметь лучшее представление о том, чего ожидать в будущем. Будьте на связи с посетителем вашего веб-сайта и используйте текст вроде «Бесплатная загрузка» или «Бесплатная 30-дневная подписка». Чем честнее вы будете в своих призывах к действию, тем комфортнее будет вашим посетителям в вашей компании.

3. Создайте чувство срочности

В современном быстро меняющемся мире, управляемом технологиями, люди постоянно выполняют несколько задач одновременно, и их легко отвлечь.Пункты, которые привлекают их внимание, постоянно добавляются в их списки дел. Тем не менее, как только призыв к действию вызвал интерес у посетителя, он должен создать представление о том, что он должен действовать немедленно, чтобы действие не было сохранено и забыто. Добавление «Поторопитесь», «Ограниченное время», «Сейчас» или «Сегодня» к призыву к действию может создать ощущение срочности и побудить посетителей оставаться сосредоточенными и действовать немедленно.

4. Обеспечьте согласованность между CTA и целевой страницей

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

В заключение

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

Нужна ли вашему сайту кнопка HOME?

18 июня 2018 г.

Автор: Джоэл Хьюз

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

Деталь

Главное меню вашего веб-сайта (или « основная навигация », если вы предпочитаете немного более изящный язык) — это очень заметный список интерактивных ссылок, который является одним из самых первых вещей, которые посетитель увидит, когда впервые попадет на Веб-сайт. Например, наш:

Рис.1 — пример главного меню

Указатели

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

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

Рис. 2 — пример меню стола / смартфона

(* Почему «гамбургер»? Думаю, это потому, что три горизонтальные линии немного похожи на бургер между двумя батончиками — ну, вроде того!)

Так или иначе, значок гамбургера быстро стал довольно распространенным явлением на большинстве современных веб-сайтов.Подобно более широким экранным меню (рис. 1), гамбургер-меню является отличной отправной точкой для посетителей веб-сайта, которые могут быстро сканировать, чтобы они могли ознакомиться с ключевыми разделами вашего сайта. Обратите внимание на рис.2. (взято с нашего текущего веб-сайта Glass Mountains) мы всегда предпочитаем включать слово « Menu » рядом с кусочком гамбургера — полагаться только на значок обычно никогда не бывает хорошей идеей с точки зрения удобства использования.

Психическая модель

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

* да, я знаю, что людей не было в то же время динозавров, но, если бы мы были, я уверен, что все мы выглядели бы так же хорошо, как Ракель Уэлш в «Миллионе лет до нашей эры» ( подсказка ложная ссылка на наш заголовок изображение для этого сообщения в блоге ).

Так или иначе, в наши дни, чтобы резюмировать: главное меню содержит ключевые ссылки, чтобы указывать вашим посетителям на важные области на вашем веб-сайте. Традиционно первая опция в этом главном меню — « Домашняя страница » или « Домашняя страница ». Эта опция делает именно то, что вы ожидаете, возвращает вас на главную страницу — это очевидно.

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

Все дороги ведут в Рим

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

Поисковые системы, такие как Google и т. Д., Могут найти (или « index » на своем модном языке) практически любую стандартную страницу на вашем сайте; это означает, что всех страниц вашего веб-сайта (если только вы не сбросили массовый SEO-шум) являются потенциальными кандидатами для отображения в результатах по запросам поисковых систем и, следовательно, являются первой страницей, на которую люди попадают, когда попадают на ваш веб-сайт. .

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

Кликабельные логотипы

На многих веб-сайтах основной логотип (который во многих случаях находится в верхнем левом углу дизайна веб-сайта) представляет собой обратную ссылку на главную страницу.Значительный процент пользователей веб-сайта хорошо знаком с этим соглашением и инстинктивно знает, что они могут щелкнуть ваш логотип, чтобы вернуться на главную страницу, однако ключевое слово там — « процента, »!

Взгляните на этот отрывок из отличного отчета об удобстве использования веб-сайта за 2015 год.

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

Главный вывод заключается в том, что, хотя многие посетители веб-сайтов знают, что они могут нажать на логотип, чтобы вернуться домой, многие люди не знают этого; такие люди вместо этого будут смотреть в главное меню. Хотя этот отчет сделан за 2015 год, это не миллиард лет назад *, и даже если мы немного уменьшим 50%, исходя из предположения, что со временем все больше людей понимают соглашение click-logo-go-home , то это все равно число, которое нельзя игнорировать.

(* Неустойчивая ссылка № 2 назад на изображение заголовка блога)

Следовательно (там, где это имеет смысл для вашего проекта):

  • Сделайте основной логотип кликабельным и укажите ссылку на вашу домашнюю страницу
  • Добавьте «Дом» в качестве первого основного варианта навигации.

Спасибо

Иоиль

шт. это тоже стоит прочитать https://www.nngroup.com/articles/homepage-links/#contentBody

Нет комментариев

Как добавить стиль кнопки на вашу веб-страницу

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

Когда вы создаете свои новые веб-страницы, вам, скорее всего, понадобится выделяющаяся кнопка. Выделенные кнопки призыва к действию (CTA) позволяют вашим клиентам узнать, какое действие вы хотите, чтобы они предприняли. Это не позволяет им отвлекаться от всех других ссылок, представленных на вашем веб-сайте.

Но как Virteom добавил эту стильную БОЛЬШУЮ кнопку с призывом к действию (CTA), которая разбросана по всему вашему сайту? И, кроме того, как я могу использовать тот же стиль?

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

Как найти свой стиль кнопки

Первым шагом в этом процессе является поиск стиля кнопки, который вы хотите воспроизвести. Где эта кнопка живет? Вы видите это на другой странице сайта? Если да, перейдите на эту страницу своего сайта.

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

Если у вас возникли проблемы, просто отправьте нам URL-адрес страницы с понравившейся вам кнопкой со следующим запросом в нашу службу поддержки:

Привет, команда,

Подскажите, пожалуйста, какой класс кнопки на этой странице? (Вставьте сюда URL).

Спасибо,

Если вы используете Google Chrome, вы можете использовать инструменты разработчика, чтобы определить класс кнопки. Щелкните правой кнопкой мыши по кнопке и выберите «Проверить». В инструментах проверки вы увидите класс кнопки. Это то, что вы будете использовать для добавления к вашей новой кнопке.

В приведенном ниже примере мы хотим запомнить класс orbitButton

.

Добавление стиля кнопки к ссылке

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

  1. Выделите текст, который хотите сделать кнопкой.
  2. Щелкните кнопку ссылки.
  3. (Убедитесь, что ваша ссылка введена в поле URL или ваш документ загружен)
  4. Перейдите на вкладку Advanced.
  5. В поле «Классы таблицы стилей» вставьте класс кнопки, который вы скопировали из понравившегося стиля кнопки.
  6. Нажмите «ОК»
  7. Нажмите «Сохранить» вверху страницы
  8. Нажмите «Предварительный просмотр», чтобы увидеть изменения.

Теперь у вас есть кнопка!

Когда у вас есть стиль кнопки, все остальное становится довольно простым.Вы просто включаете и пьете.

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

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

Как добавить плавающую кнопку «Связаться с нами» на свой веб-сайт

Наличие кнопки «Связаться с нами» важно для любого веб-сайта, поскольку она позволяет вашей аудитории задавать вопросы и показывает, что вам небезразлично, что они думают.Лучше всего добавить такую, которая выглядит компактной и ненавязчивой, но всегда остается на виду. В этом посте мы покажем вам, как это сделать с помощью конструктора всплывающих окон Getsitecontrol.

Когда посетители нажимают на кнопку, на той же странице появляется контактная форма, подобная этой:

Как только кто-то заполняет ее, сообщение может попасть прямо в ваш почтовый ящик, вашу CRM, службу поддержки, Google Диск — или любое другое приложение по вашему выбору. Отправленные материалы также хранятся в вашей панели управления Getsitecontrol.

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

Создайте свою собственную контактную форму

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

Начните сегодня →

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

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

Шаг 1. Выберите шаблон контактной формы

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

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

Чтобы изменить изображение, цветовую тему или стиль формы, используйте вкладку Внешний вид .

Когда все будет готово, откройте вкладку Targeting , перейдите к Start, чтобы отобразить раздел виджетов и удалите условие по умолчанию «сразу».Остальные настройки по умолчанию оставьте без изменений.

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

Шаг 2. Выберите шаблон плавающей кнопки

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

Липкая боковая контактная кнопка

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

Чтобы добавить больше индивидуальности, вы можете изменить призыв к действию и использовать что-то вроде «Есть вопросы?» или «Нужна помощь?» вместо стандартной копии «Свяжитесь с нами».

Прикрепленная нижняя кнопка

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

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

Плавающая кнопка «Свяжитесь с нами» с изображением

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

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

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

Шаг 3. Подключите кнопку к форме

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

Для этого откройте меню редактирования кнопок и выберите свою контактную форму в раскрывающемся меню Фон щелкните , как показано ниже.

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

Наконец, следуйте подсказкам на панели инструментов, чтобы активировать кнопку и форму.После того, как вы подключите Getsitecontrol к своему веб-сайту, плавающая кнопка «Связаться с нами» мгновенно станет активной.

Подключиться к Getsitecontrol легко и не требует знания программирования. Вы можете следовать инструкциям на панели инструментов или читать инструкции для платформы своего веб-сайта.

Советы по настройке

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

  • 💡 Вы можете использовать плавающую кнопку для запуска любого всплывающего окна, а не только контактной формы.В качестве примеров рассмотрим форму технического запроса, форму обратного вызова или форму заказа.
  • 💡 Вы можете точно установить время и условия для появления и исчезновения кнопки «Связаться с нами» со страницы — на случай, если вы не хотите, чтобы она отображалась постоянно. Для этого используйте вкладку Таргетинг .
  • 💡 Вы также можете настроить автоответчик и отправить индивидуальное электронное письмо тем, кто заполнил форму — при условии, что в нем есть поле для захвата электронной почты. Для этого воспользуйтесь вкладкой Уведомления .

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

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

Получите кнопку «Связаться с нами»

Создайте учетную запись Getsitecontrol, чтобы добавить контактную форму на свой веб-сайт.

No related posts.