Дизайн для кнопок сайта: Правила дизайна хорошей кнопки — Дизайн на vc.ru

Трендовый дизайн: кнопки интерфейсов — Convertmonster

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

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

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

Градиент и цвет

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

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

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

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

Размер имеет значение

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

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

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

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

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

Если обратиться в руководство “Level AAA success”, то там указано, что размер  «целевых объектов указателя», требуется установить 44 на 44 пикселя, соответственно эти размеры нужно проставить в CSS. Существуют исключения, которые касаются внутренних ссылок проекта. Это связано с количеством слов и букв, которые используются в ссылке. Поэтому здесь разработчику придется использовать другие параметры и после каждого изменения тестировать полученный результат на смартфоне. Слишком большие слова влияют на внешний вид приложения, если просмотр ведется с телефона.

Визуальный дизайн со встроенными возможностями

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

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

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

• Подчеркивания. Заранее подобранные цвета, которые будут использоваться для выделения ссылки. 
• Выделение некоторых объектов тенями. Такой способ привлечет больше внимания.
• Придать блокам закругленность. Данная фишка будет эффектно смотреться на кнопках. Кроме того, вы можете придать объемности элементу, сделав его выпуклым. Для этого нужно применить определенные стили.
• Добавьте элементы и сделайте их активными, чтобы при посещении страницы клиент мог ими воспользоваться. Также не забудьте сделать пояснение, к примеру “Войти” и “Отправить”. Так клиенту будет понятно, какие возможности есть у интерфейса.
• Сделайте пространство, которое будет находиться по бокам от основной колонки, без других объектов.

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

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

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

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

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

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

Достаточная наполненность

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

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

Текст доступен для чтения и возможных действий

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

Когда дело касается оформления внешнего вида текста, то здесь наблюдается ряд тенденций.

• Текстовые названия в кнопках используют регистр верхнего уровня и прописываются названия, начиная с заглавной буквы. Следуют избегать составления названия полностью из верхнего или нижнего регистра. Лучше написать слово, начиная с заглавной, а все остальные буквы с маленькой. К примеру, вот так “Отправить”.
• Шрифты желательно использовать стандартные, которые применимы для многих проектов. Стиль оставьте обычный или средний. 

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

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

Добавление обводок вокруг ссылок 

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

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

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

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

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

Рекомендации WCAG включает в себя важный момент.

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

Кликабельные элементы должны иметь иерархию

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

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

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

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

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

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

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

Вывод 

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

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

Оригинал публикации

Шпаргалки UI дизайнера: создание кнопок – Сей-Хай

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

Итак, в этой статье мы рассмотрим:

1. Кнопки действия
2. Общие стили кнопок
3. Выбор цвета и стиля кнопки
4. Состояния кнопок и обратная связь
5. Надпись кнопки
6. Сенсорные цели
7. Размещение кнопок
8. Кнопка доски почета
9. Заключительные мысли

1. Кнопки действия

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

1. Кнопки призыва к действию (CTA/C2A)

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

 

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

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

2. Первичное действие

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

Кнопка первичного действия.

Для кнопок этого типа я использую простые прямоугольные кнопки с округлыми краями.

3. Вторичное действие

Вторичные кнопки – это кнопка «Назад» возле первичной кнопки «Далее». Или кнопка «Отмена» возле кнопки «Подтвердить». Вторичные кнопки – это альтернатива первичного действия, которое мы предоставляем пользователям.

Два варианта вторичных действий рядом с первичными.

Для данных кнопок рекомендуется использовать контурные кнопки или текстовые ссылки.

4. Третичное действие

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

Третичные кнопки в разных формах.

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

2. Общие стили кнопок

В этом разделе мы рассмотрим общие стили кнопок. Стиль – это просто эстетика кнопки, а не то как ее следует использовать.

Сплошные кнопки

Все просто, сплошные кнопки – это кнопки со сплошной заливкой.

Сплошная кнопка.

Контурные и призрачные кнопки

Контурные кнопки – это кнопки без заливки. Несмотря на то, что они часто используются взаимозаменяемо, контурные кнопки обычно светлого цвета (с темным контуром и текстом), а кнопки-призраки – темного цвета (со светлым контуром и текстом).

Контурная кнопка (слева) и призрачная кнопка (справа).

Закругленные кнопки

Закругленные кнопки – это кнопки, у которых радиус углов максимально скруглен.

Закругленная кнопка.

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

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

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

Кнопка FAB.

Текстовая ссылка

Текстовые ссылки – это очень простой тип кнопок. Есть несколько способов показать, что надпись является ссылкой. Это может быть цвет, подчеркивание, положение ссылки, или просто сам текст (например, «Читать дальше»).

Оформление текстовых ссылок.

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

Кнопка “значок с надписью”

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

Кнопка “значок с надписью”

Самое сложное в работе с такими кнопками – найти правильное соотношение иконки и шрифта.

• Вариант 1: размер иконки соответствует высоте заглавных букв.
• Вариант 2: размер иконки намного больше высоты строки.

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

Кнопка-значок

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

Кнопки-значки в разных стилях.

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

Иконка рядом с текстовой ссылкой

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

Кнопки ссылки с иконками.

3. Выбор цвета и стиля кнопки

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

1. Цвет

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

Разноцветные кнопки.

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

Кнопки «Удалить», «Просмотреть предупреждения», «Сохранить» и «Еще».

Например, зеленая кнопка «Удалить» собьет с толку любого пользователя, как и красная «Сохранить».

2. Закругление углов

Закругление углов, а именно свойство border-radius – это то, что придает кнопкам индивидуальность. Кнопки с острыми краями выглядят более серьезно, а с закруглением более непринужденно.

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

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

3. Тень

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

Кнопки с разными настройками тени.

4. Стиль надписи

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

Кнопки с разными стилями надписей.

Вот несколько простых способов сделать шрифт читабельным:

1. Лучше использовать заглавные буквы в начале каждого предложения или капитализировать начальные буквы всех слов в предложении, чем делать все буквы заглавными. (Хотя Material Design использует кнопки со всеми заглавными буквами).
2. Убедитесь, что цвет надписи выделяется на фоне кнопки. В этом поможет этот инструмент.
3. Выбирая шрифт убедитесь, что он разборчивый и достаточно большой. Также шрифт должен быть средней плотности.

5. Вертикальный отступ

Размер кнопки играет большую роль в доступности интерфейса. Большинство неопытных дизайнеров скажут что-то вроде «Кнопки должны иметь высоту 36 пикселей». Это не лучшее решение, особенно для веб-дизайна. Всегда нужно учитывать высоту строки используемого вами шрифта и добавлять к нему единицу измерения. Например: «Надпись моей кнопки имеет высоту строки 20 пикселей, а отступ по вертикали 8 пикселей».

Кнопки с разным вертикальным отступом.

Спросите зачем? Существует две причины:

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

6. Горизонтальный отступ

Первый вариант:

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

Кнопки, ширина которых определяется сеткой.

Второй вариант:

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

Кнопки, ширина которых определяется отступом и длиной надписи.

4. Состояния кнопок и обратная связь

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

1. Активное и неактивное состояние

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

Активная и неактивная кнопка.

2. Hover & hover off (навести курсор/убрать курсор)

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

Кнопка, реагирующая на наведение курсора.

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

3. Фокус внимания

Состояние фокуса довольно сложно для понимания. Так что самый простой способ объяснить – показать его в действии.

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

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

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

4. Нажатие кнопки

Нажатие кнопки – это состояние, когда курсор или палец пользователя удерживает кнопку. Когда пользователь отпускает свой палец или курсор, кнопка выглядит как нажатая.

Кнопка, демонстрирующая состояние нажатия.

5. Нажатая кнопка

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

Кнопка, демонстрирующая состояние нажатой.

5. Надпись кнопки

1. Использование глаголов

Большинство кнопок содержат глаголы для указания того, что кнопка будет делать, например, «Сохранить», «Опубликовать», «Редактировать». Хотя «Назад» и «Далее» не являются глаголами, в контексте интерфейса они работают одинаково. Мне нравится использовать структуру “глагол” + “существительное”. Так действие звучит более инструктивно, например, «Сохранить сообщение», «Следующий шаг» и так далее.

2. Шрифт

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

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

3. Последовательность

При выборе надписей для кнопок убедитесь, что вы сохраняете последовательность. Вот несколько вещей, которые следует сделать в начале проекта:

1. Выберите количество слов: Одно, два или более слов на кнопку;
2. Выберите регистр: Капитализация начальной буквы только первого слова в предложении, капитализация начальных букв всех слов в предложении, все буквы заглавные, или все буквы строчные;
3. Структура надписи: Например, «глагол» + «существительное» или просто «глагол» и так далее.

6. Сенсорные цели

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

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

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

Размер кнопки для сенсорного экрана

Исследование MIT Touch Lab показало, что часть пальца, используемая для прикосновения к экрану, составляет 8–10 мм, поэтому минимальный целевой размер должен быть 10 мм или больше.

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

Material Design считает, что цель касания должна быть 48dp x 48dp с 8dp между точками касания.

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

Спорное положение первичной кнопки

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

Две позиции для первичных и вторичных кнопок.

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

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

8. Кнопка доски почета

В том разделе я хочу отметить некоторые крутые принципы дизайна и систем. Мне нравятся кнопки Material Design System именно потому, что их принципы действительно хорошо продуманы.

Кнопка Material Design SystemКнопка изображения от Material Design.

Ни один разговор о кнопках не будет полным без упоминания Material Design. Их работа над кнопками и то, как они взаимодействуют с другими компонентами в системе, заслуживает внимания.

Просмотрите их раздел о кнопках здесь.

А также информацию о плавающих кнопках действий можно просмотреть тут.

9. Заключительные мысли

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

Источник: UXDesign

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

Почему для презентации UX всегда нужно использовать интерактивные прототипы

Концепция дизайна UX: разделение ленты Instagram на группы

10 примеров по-настоящему качественного UX, который помогает изучать пользователей

Дизайн кнопок: лучшие практики и примеры

Узнайте о важности дизайна кнопок в UI/UX и используйте эти пять уникальных кнопок для клонирования, копирования и вставки в свой следующий проект веб-дизайна.

Команда Webflow

Элементы не найдены.

Отличный дизайн — это внимание к деталям, и дизайн кнопок не исключение.

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

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

Давайте разберем рекомендации по созданию великолепного дизайна кнопок — вместе с пятью примерами для вдохновения.

Рекомендации по дизайну кнопок

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

Сделать кнопки очевидными

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

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

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

Используйте разные стили для разных функций

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

Радиокнопки из набора пользовательского интерфейса Finsweet Filter

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

Флажки из комплекта пользовательского интерфейса Filter от Finsweet

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

Используйте цвета и формы для создания иерархии 

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

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

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

Приоритет доступности

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

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

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

Изменение внешнего вида в зависимости от состояния

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

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

Визуализация Красивая кнопка изменение цвета при наведении курсора

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

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

Бесплатная электронная книга: Современный процесс веб-дизайна

Узнайте о процессах и инструментах, лежащих в основе высокоэффективных веб-сайтов.

Начать чтение

Подпишитесь на участие в программе предварительной оценки Webflow

Спасибо! Теперь вы подписаны!

Ой! Что-то пошло не так при подписке.

Начать чтение

5 дизайнов пуговиц, которые вдохновят вас на следующий проект

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

1. Социальная кнопка Бена Паркера

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

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

2. Простая и элегантная кнопка Марко

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

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

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

3. Всплывающая кнопка «Купить» и «Скачать» Стью

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

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

Помимо зеленого цвета, вверху и внизу кнопки появляются два небольших всплывающих окна. Эти дополнительные элементы дают посетителю больше информации и заставляют его читать — кнопка «КУПИТЬ ФРУКТЫ» расширяется, чтобы сказать «Еще несколько кликов отправляют Владу банан», а кнопка «СКАЧАТЬ» расширяется до «Нажмите, чтобы загрузить руководство по стилю Серджи: 1.4 МБ». Это не настоящие люди и не загружаемые ресурсы, но они достаточно забавны, чтобы держать вас на крючке.

Предварительный просмотр расширяемой кнопки Стью или клонирование проекта для вашего сайта.

4. Великолепно минималистичная кнопка Digital Bake

Одна из самых популярных кнопок на веб-сайте Digital Bake — это простая, сдержанная кнопка, которая обладает неожиданным эффектом наведения. Неактивная кнопка — это красная кнопка «ПОСМОТРЕТЬ БОЛЬШЕ» со стрелкой вправо. Однако при взаимодействии прямоугольная кнопка с закругленными углами оживает, а стрелка оживляется с тонкой анимацией.

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

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

5. Замечательная кнопка возврата WebDev наверх

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

У WebDev For You есть портфолио дизайна на Webflow с сотнями примеров кнопок возврата наверх. Эта, например, называется Daily Interaction #23, и это одна из многих веб-страниц, которые WebDev предлагает для кнопок возврата наверх и других интерактивных функций дизайна. Если вы хотите перейти к ежедневному взаимодействию № 22, вы можете нажать кнопку со стрелкой влево. Если вы хотите перейти к ежедневному взаимодействию № 24, вы можете нажать кнопку со стрелкой вправо.

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

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

Просмотрите ежедневное взаимодействие #23 или скопируйте его здесь.

Кнопки с эффектным дизайном 

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

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

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

Опубликовано

13 февраля 2023 г.

Категория

Ресурсы

Поделиться

Рекомендуемое чтение

Ресурсы 900 03 Ресурсы

Ресурсы

Подпишитесь на Webflow Inspo

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

Электронная почта

Вы можете отказаться от подписки в любое время, никаких обид. Политика конфиденциальности

Все готово, следите за нашей следующей рассылкой!

К сожалению, адрес электронной почты недействителен. Попробуйте еще раз!

Подробнее о Designer

Designer

Сила CSS, HTML и JavaScript в визуальном холсте.

Взаимодействия

Визуально создавайте взаимодействия и анимацию веб-сайта.

Подробнее о взаимодействиях

CMS

Определите собственную структуру контента и создавайте дизайн с использованием реальных данных.

Подробнее о CMS

Электронная торговля

Прощайте, шаблоны и код — визуально оформите свой магазин.

Подробнее об электронной торговле

Редактор

Редактируйте и обновляйте содержимое сайта прямо на странице.

Подробнее о Редакторе

Хостинг

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

Подробнее о хостинге

Начните бесплатно

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

Начните — это бесплатно

Преобразование процесса проектирования по адресу

Передовой опыт создания оптимальных кнопок пользовательского интерфейса — Baymard Institute

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

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

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

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

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

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

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

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

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

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

Вот несколько основных компонентов эффективных кнопок и то, как каждый из них влияет на взаимодействие с пользователем.

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

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

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

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

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

Цвет кнопки

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

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

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

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

Назначение кнопки

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

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

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

Количество кнопок

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

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

Бесплатный отчет: 7 быстрых исправлений UX для вашего сайта электронной коммерции

Получите подборку лучших практик электронной коммерции из нашего более чем 110 000 часов исследований.

Мгновенное получение отчета и результатов исследования UX от Baymard по электронной почте

Состояние кнопок

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

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

Вот 6 распространенных состояний кнопок:

• Обычное : это состояние кнопки по умолчанию, которое сообщает, включена ли кнопка и доступна ли она для взаимодействия.
• Фокус : Состояние фокуса имеет решающее значение для доступности. Кнопка в этом состоянии будет выделена, когда посетитель использует «вкладку» или другой метод ввода для навигации по пользовательскому интерфейсу. Во многих случаях состояние фокуса будет отображаться в виде голубого контура вокруг кнопки, но оно зависит от разных браузеров.
• Наведение : Когда пользователь наводит курсор на кнопку на экране, эта кнопка переходит в состояние наведения. Состояние наведения специфично для веб-дизайна, поскольку мобильные устройства обычно не поддерживают функцию наведения.
• Активный : Активное состояние используется для «щелчка» или нажатия кнопки. Он показывает, что пользователь нажал на кнопку, и может напоминать вид «нажатой» кнопки.
• Выполнение/загрузка : когда действие не выполняется немедленно, состояние выполнения/загрузки сообщает, что веб-сайт или приложение работает над выполнением желаемого действия.
• Отключено : Отключенное состояние сообщает, что кнопка в настоящее время недоступна для взаимодействия. Если процесс загружается, он может заблокировать действие и отключить кнопку. Отключенное состояние кнопки также может указывать на действие на вашем сайте, для использования которого требуется членство, учетная запись или обновление. Это состояние должно сопровождаться всплывающей подсказкой, объясняющей, почему кнопка отключена.

Рекомендации по UX для кнопок электронной коммерции

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

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

1. Уточнить, завершают ли заказ основные кнопки (рекомендация № 586)

Crate & Barrel выбрала как обнадеживающий текст под кнопками («У вас будет возможность просмотреть свой заказ на следующей странице»), так и более длинную и описательную основную кнопку («Продолжить просмотр страницы»).

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

Это особенно важно на этапах оплаты, когда они ввели свою платежную информацию и стали осторожны при нажатии любых основных кнопок.

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

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

2. Избегайте кнопок «Применить» в кассе, вместо этого используйте автоматическое обновление и выделение изменений (рекомендация № 727)

В Best Buy пользователи могут указать «заборщика», чтобы получить заказ, как только он будет готов. Нет кнопки «Применить»; изменения регистрируются, когда пользователи продвигаются вперед в оформлении заказа, нажимая основную кнопку «Продолжить» внизу страницы.

Некоторые пользователи не замечают кнопки «Применить» в форме во время оформления заказа или неправильно понимают назначение кнопки. Это может вызвать трения во время оформления заказа или даже привести к потере данных.

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

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

3. Всегда располагайте кнопку «Отправить» рядом с полем поиска на мобильных устройствах (рекомендация № 944)

После ввода запроса «офисное кресло» участник теста на Amazon ищет кнопку отправки поиска (значок увеличительного стекла) и находит ее в ожидаемом месте. Нажатие этой кнопки помогает ему быстро приступить к изучению продуктов.

Существует три основных способа отправки мобильного поискового запроса:

• Нажатие кнопки отправки поиска, которую сайт разместил в пользовательском интерфейсе рядом с полем поиска
• Использование кнопки отправки на сенсорной клавиатуре (обеспечиваемой мобильной ОС)
• Выбор слова или фразы автозаполнения

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

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

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

4. Всегда предоставляйте залипающие кнопки «Применить» в интерфейсе мобильной фильтрации (рекомендация № 1125)

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

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

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

Начиная с дизайна кнопок для улучшения UX

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