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

32 User interface элементов для UI дизайнеров

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

UI элементы:

1. Input Controls
2. Navigation Components
3. Informational Components
4. Containers

Input Controls

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

Navigation Components

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

Informational Components

Informational Components делятся информацией с пользователями.

Containers

Containers содержат связанный контент вместе.

Словарь UI элементов:

Аккордеоны (Accordion)

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

Bento Menu, Döner Menu, Hamburger Menu, Kebab Menu, Alt-burger, meatball

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

Хлебные крошки (Breadcrumb)

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

Кнопка (Button)

Кнопки позволяют пользователю взаимодействовать с формами на сайте.

Карточка (Card)

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

Карусель (Carousel)

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

Checkbox

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

Комментарий (Comment)

Dropdown

Лента (Feed)

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

Форма (Form)

Иконки (Icon)

Поле ввода (Input Field)

Loader

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

Модальное окно (popup)

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

Уведомления

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

Пагинация (Pagination)

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

Picker

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

Progress Bar

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

Radio Buttons

Radio Buttons похожи на чекбоксы, но отличаются тем, что можно 1 из нескольких вариантов.

Поле поиска (Search Field)

Боковая панель (Sidebar)

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

Ползунок (Slider Controls)

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

Stepper

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

Тэг (Tag)

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

Tab Bar

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

Tooltip

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

Toggle

Toggle это флаг который позволяет выбрать между Да или Нет.

Барабан

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

Все, что вам нужно знать о дизайне кнопок в интерфейсе

Усе, що вам потрібно знати про дизайн кнопок в інтерфейсі

Редакція ・ Серп 2

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

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

«Вы нажимаете кнопку, а мы делаем все остальное», – так, посредством броского и четкого слогана, Kodak обратились к потенциальным покупателям своих фотоаппаратов.

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

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

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

Состояние кнопки сообщает ее статус пользователю

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

Normal — сообщает, что компонент интерактивен и включен.

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

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

Active — Активное или нажатое состояние сообщает о том, что пользователь нажал на кнопку.

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

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

Кнопки бывают разных цветов, форм и размеров

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

Стили сообщают о важности действия

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

Иногда нет кнопки «по умолчанию»

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

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

Не заставляйте меня думать

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

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

Согласованность повышает скорость и точность

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

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

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

Сделайте кнопки достаточно большими для надежного взаимодействия

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

Для большинства платформ рассмотрите возможность создания сенсорных целей как минимум 48 x 48 dp. Сенсорная цель такого размера дает физический размер около 9 мм, независимо от размера экрана. Рекомендуемый целевой размер для сенсорных элементов составляет не менее 7–10 мм.

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

Проектируйте для доступности

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

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

Жесты становятся достаточно широко распространенными

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

Хорошая метка кнопки приглашает пользователей действовать

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

Хорошая метка кнопки приглашает пользователей действовать. Лучше всего использовать глаголы и пометить кнопку тем, что она на самом деле делает. Как будто кнопка спрашивает пользователя: «Вы хотите (добавить в корзину)?» или «Хотите (подтвердить заказ)?».

Избегайте использования «Да», «Нет» или слишком общих меток, таких как «Отправить».

Ok/Cancel или Cancel/Ok? Оба варианта хороши

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

• Размещая на первом месте действие OK, вы поддерживаете естественный порядок чтения. Это может помочь сэкономить время, если мы знаем, что, скорее всего, именно это и выберет пользователь. Windows ставит ОК на первое место.
• Размещая кнопку OK в конце, вы улучшаете юзерфлоу. Кто-то может поспорить, что OK, как кнопка «Следующий», переместит пользователя вперед. Если поставите OK в конце, вы поможете пользователям оценить все варианты, прежде чем предпринимать действия, и поможете избежать ошибок и поспешных решений. Apple ставит ОК на последнее место

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

Отключенные кнопки — отстой

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

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

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

Про главные кнопки в интернет-магазине

Обсудим «насущные» вопросы про кнопки оформления заказа в интернет-магазине.

Оглавление

• Что лучше писать на кнопке «купить» в интернет-магазине?
• Какой цвет лучше использовать для кнопки «Купить»?
• Когда нужна (и когда не нужна) кнопка «Быстрый заказ» / «Заказ в один клик»?
• Когда в списке товаров нужна кнопка «В корзину», а когда только на карточке товара?
• Что писать на кнопках в корзине?
• Кнопка «Добавить драматизма».

Что лучше писать на кнопке «Купить»?

Совет, который сэкономит вам массу времени — не заморачивайтесь. Если 4-5 лет назад еще было сколько-то важно, что написано на этой кнопке, то сейчас вы можете на ней вообще ничего не писать, только показать пиктограммку с корзиной и этого будет достаточно.

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

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

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

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

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

Можно писать просто «В корзину», убрав слово «добавить». Найдутся противники такого упрощения, скажут, что без глагола хуже call to action (призыв к действию). Выбор за вами.

Кнопка «Заказать», не будет вызывать вопросов, если в интернет-магазине товары есть как в наличии, так и под заказ. Тогда на товарах «в наличии», ставим кнопку «Купить», а на тех что только под заказ — «Заказать».

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

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

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

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

«Положить в корзину», «Добавить в корзину», «Отправить в корзину», просто «В корзину», «Купить», «Заказать» — один хрен (растение семейства Капустные).

С текстом кнопки разобрались, переходим к цвету.

Идеальный цвет кнопки «Купить»

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

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

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

Как вы думаете, много ваших потенциальных клиентов не заметят синюю кнопку «В корзину» на белом фоне? А если вы сделаете ее зеленой, сколько из тех кто не купили с синей кнопкой подумают:

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

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

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

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

Если серьезно, то красная кнопка будет работать хуже, когда рядом с ней есть зеленая кнопка. Думаю, не надо объяснять почему.

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

То же самое, если одна кнопка, например, красная, а другая рядом серая и называние кнопки написано серым – серая будет выглядеть как «Disable» — неактивная, неработающая, соответственно кликать на нее будут меньше.

Пример серой кнопки. Стали бы вы на нее нажимать?

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

Некоторые животные притворяются мертвыми, чтобы их не заметили и не съели. Точно так же серые кнопки с серым текстом притворяются неактивными, чтобы по ним никто не кликал.

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

Недоступная для нажатия кнопка в ОС, к которой все привыкли

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

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

Когда нужна кнопка «Заказ в один клик» или «Быстрый заказ»?

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

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

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

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

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

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

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

Когда кнопка «В корзину» нужна только на карточке товара, а когда еще и в списке товаров?

Это еще один популярный вопрос про кнопку «купить» .Тут примерно так же как в случае с кнопкой «Быстрый заказ» — зависит от товаров, которые продает магазин. Если перед покупкой, у товара нужно выбирать несколько параметров, которые не получается выводить в списке товаров (размер, цвет, вес и т. п.), то кнопку «В корзину» в список товаров не добавляют.

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

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

Кнопка «Оформления заказа» в корзине

Раз начали про главные кнопки интернет-магазина, давайте затронем и корзину.

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

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

Разные по функционалу кнопки называются одинаково — это неправильно.

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

Шаг в корзине

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

UX-дизайн кнопки: советы по созданию, типы и состояния

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

Советы по созданию кнопок

Кнопки должны выглядеть как кнопки

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

Очень тщательно продумайте размер зоны прикосновения и внутреннего поля. Размер кнопок также помогает пользователю понять, что это за элемент. Каждая платформа дает свои рекомендации в отношении минимального размера зоны прикосновения. Результаты исследования, проведенного MIT Touch Lab, показали, что средний размер для прикосновения подушечками пальцев составляет 10-14 мм, а для кончиков пальцев — от 8 до 10 мм, при этом наиболее оптимальный минимальный размер зоны прикосновения будет 10Х10 мм.

Расположение и порядок

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

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

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

Надписи

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

Точно такие же кнопки, как и вверху, но без соответствующей надписи. Чувствуете разницу?

Призыв к действию (CTA)

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

Форма кнопки

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

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

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

Типы кнопок и поведение

1. Объемная кнопка

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

Применение

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

Поведение

Объемные кнопки приподнимаются и заполняются цветом при нажатии.

Пример

Объемные кнопки выделяются на фоне плоских. Пример приведен для приложения Android.

2. Плоские кнопки

Плоские кнопки не приподнимаются, но также заполняются цветом. Основное преимущество плоских кнопок в том, что они не отвлекают внимание от контента.

Применение

В диалоговых окнах (чтобы соблюсти единство действия кнопки и контента)

На панели инструментов

Расположение снизу, чтобы пользователь быстрее их нашел

Пример

Плоская кнопка в диалоговом окне приложения на Android.

3. Переключатель

Кнопка-переключатель позволяет пользователю переключаться между двумя или (более) состояниями.

Почти все переключатели применяются в качестве кнопок Вкл\Выкл.

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

· В группе должно быть не менее трех кнопок

· На кнопках должен быть текст, иконка или и то, и другое.

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

Очень важно выбрать правильную иконку для кнопки. Я рассказывал об этом в статье «Иконки как фактор удачного пользовательского опыта».

В Apple iOS переключатели использованы в разделе «Настройки».

4. Контурные кнопки

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

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

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

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

На сайте AirBnB есть контурные кнопки для действия «Стать хозяином».

5. Плавающая кнопка с выпадающим меню

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

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

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

Выбор типа кнопки.

Выбор стиля кнопки зависит от ее важности, количества контейнеров на экране, и от разметки экрана.

Функция: Достаточно ли важна и уникальна кнопка, чтобы сделать ее плавающей?

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

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

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

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

Главное правило этого состояния – кнопка должна выглядеть как кнопка в нормальном состоянии. Windows 8 это показательный пример неудачного дизайна кнопки. Пользователю сложно понять кликабельны или нет объекты в меню настроек.

Состояние в фокусе

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

Нажатое состояние

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

Неактивное состояние

Есть два варианта – спрятать кнопку, либо отобразить ее в неактивном состоянии.

Преимущества скрытой кнопки:

• · Ясность. Отображается только то, что необходимо для текущей задачи.
• · Сохранение пространства. Это позволит вам менять управление, используя одно пространство для разных целей. Что очень удобно, если присутствует очень много элементов управления. Gmail применяет этот способ.

Преимущества использования неактивного состояния:

• Показать возможность действия. Даже если кнопка не используется, пользователь знает, что действие возможно. Можно даже сделать подсказку и объяснить критерии использования.

Заключение

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

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

• Веб-дизайн
• Интерфейсы
• Usability
• Дизайн мобильных приложений
• Графический дизайн