Дизайн кнопок. Все, что вы хотели узнать
Советы
Стиль кнопок, цвет, состояние и их расположение на странице
Читайте наc в Telegram
Разбираемся, что происходит в мире рассылок и digital-маркетинга. Публикуем анонсы статей, обзоры, подборки, мнения экспертов.
Смотреть канал
Станьте email-рокером 🤘
Пройдите бесплатный курс и запустите свою первую рассылку
Подробнее
Мы перевели статью UX-специалиста компании Windmill Тараса Бакусевича. Он раскрывает основные принципы дизайна кнопок и показывает на примерах, как с их помощью построить эффективную коммуникацию с пользователями.
Можно ли представить нашу жизнь без кнопок? Скорее всего, нет. Мы используем их как в реальной жизни — открываем двери, фотографируем, разогреваем еду, так и в digital-пространстве — оплачиваем покупки в интернете, оставляем данные на сайтах, ставим лайки и реакции в социальных сетях.
Кнопки восхитительны. Касание пальца запускает приложение, машину или приводит систему в движение. При этом пользователь может не догадываться о механизмах или алгоритмах, которые за этим стоят. «Вы нажимаете кнопку — мы делаем остальное», — благодаря этому привлекательному слогану потенциальные покупатели заинтересовались камерами Kodak.
Кнопки и ссылки. В чём разницаКнопки сообщают о действиях, которые можно сделать на странице. Обычно они расположены в чатах, формах, панелях инструментов.
Ссылки используются, когда пользователю предлагают перейти на другую страницу (или её часть). Например, в личный профиль человека или в каталог товаров. Кнопки же просят совершить действие: «Отправить», «Создать новый документ», «Загрузить».
Вид кнопки. О чем он говорит пользователюОт внешнего вида кнопки зависит, насколько ей удобно пользоваться. Каждое состояние кнопки должно иметь особенности, которые отличают его от других состояний и окружающего макета.
При этом кардинально изменять вид и создавать дополнительный визуальный шум нежелательно.
Всего существует 6 состояний кнопки:
- Нормальное состояние — этот компонент интерфейса интерактивен и готов к использованию.
- В фокусе — «ответ» элемента на действие: пользователь выделил кнопку с помощью клавиатуры или другого инструмента ввода.
- Наведение мыши — состояние интерактивного элемента, когда пользователь наводит на него курсор.
- Активное состояние (или нажатая кнопка) — состояние, когда пользователь нажимает на кнопку.
- Загрузка — Состояние, которое сообщает, что этот элемент завершает какое-либо действие (например, сохраняет данные в личном кабинете).
- Неактивное состояние — этот компонент интерфейса не интерактивен сейчас, но может быть включён в будущем.
Самый популярный вид кнопок — прямоугольные с закруглёнными углами.
Их легко идентифицировать и они хорошо смотрятся рядом с полем ввода. Выбор стиля кнопки будет зависеть от цели, платформы и брендбука.
Стили используют, чтобы отличать более важные действия от не таких важных. Если визуально выстроить иерархию, то пользователь не будет чувствовать себя потерянным в большом количестве вариантов. Обычно, может быть одна заметная кнопка (этот стиль называется «основной»), а также несколько «второстепенных» и побочных, «третичных» действий.
«Правильную» кнопку не всегда нужно выделятьИногда хочется сделать «правильную» кнопку действием по умолчанию (используя «основной» стиль) и дополнительно выделить её. Большую часть пользователей это ведёт в нужном направлении и помогает им завершать свои дела быстрее.
Исключение: если варианты выбора равны, или действие может быть потенциально опасным (например, согласие о передаче личных данных). В таких случаях лучше давать пользователям возможность выбирать осознанно, а не случайно.
«Не заставляйте меня думать» — название книги юзабилити-инженера Стива Круга. Среди многих пунктов, которые он затрагивает — насколько важно создавать очевидный для пользователя интерфейс без головоломок. Долгое пользование различными устройствами сформировали в наших головах то, как кнопки должны выглядеть и функционировать. Сильное отклонение от этого «стандарта» вызовет замешательство у пользователей.
Лучше не использовать один и тот же цвет для интерактивных и неинтерактивных элементов интерфейса — в противном случае люди не поймут, куда нужно нажимать.
Придерживайтесь единого стиляЕдинство стиля улучшает скорость и точность взаимодействия, помогает избежать ошибок. Лучше создавать предсказуемые элементы. Это поможет пользователям почувствовать, что они контролируют ситуацию и могут получить желаемый результат. Продумывая основные, вторичные и третичные элементы, постарайтесь найти для них что-то общее — например, цвет, форму или что-то ещё.
Если пользователь не может нажать на кнопку или случайно попадает при этом на другой элемент, это вызывает раздражение и негативный опыт.
Для интерактивных элементов на большинстве платформ подойдут размеры от 48×48 dp. Dp (Density-independent Pixels) — абстрактная единица измерения размера, которая позволяет элементам выглядеть одинаково в различных разрешениях. Обычные пиксели (px) на разных экранах могут отображаться по разному.
Подробнее о разнице между dp и px
Для кнопок с иконками лучше убедиться, что интерактивная часть будет больше, чем сама иконка (кнопка Edit на примере выше). Это применимо не только для смартфонов или планшетов, но и для web-страниц, где указатель — компьютерная мышь.
Делайте дизайн доступнымЭтот совет нужно применять к каждому компоненту интерфейса. Размер интерактивной области элемента — один из факторов, который влияет на доступность. Среди других — размер шрифта, цвет и контраст.
Существует большое количество инструментов, которые оценят, насколько легко взаимодействовать с элементами дизайна.
Дизайнерам лучше тесно взаимодействовать с командой разработчиков, чтобы убедиться, что кнопки работают с экранным считывающим устройством. Это встроенное в ОС приложение, которое помогает людям с нарушениями зрения считывать информацию с экранов. Роль «кнопка» должна использоваться для всех интерактивных элементов, которые отвечают на действия пользователя. Атрибут role=”button” превратит элемент в кнопку для любого экранного считывающего устройства.
Рассмотрите не только касания, но и жестовое взаимодействие пользователя с интерфейсомЖесты позволяют пользователям взаимодействовать с приложением касаниями. Это экономит время и дает чувство тактильного контроля. Некоторые виды касаний входят в нашу жизнь всё больше. Например, свайп (смахивание) для работы с контентом или двойное касание экрана, чтобы поставить лайк.
Хорошее название для кнопки поможет пользователю совершить нужное действиеТо, какой посыл несут кнопки, также важно, как и то, как они выглядят.
Пользователи могут не понять, чего от них хотят, потерять время и даже совершить ошибку, если на кнопке отображено непонятное действие.
Хорошее название кнопки предлагает пользователю совершить какое-либо действие. Лучше использовать глаголы и отображать на кнопке то, что она делает. Как будто кнопка спрашивает пользователя — «Хотите (Добавить в корзину)?» или «Хотите (Подтвердить заказ)?»
Лучше избегать слов «Да», «Нет» или общих слов — например, «Подтвердить/Отправить».
OК/Отмена or Отмена/OК? Любой вариант подходитДизайнеры могут часами спорить о том, как правильно располагать кнопки, но на самом деле разницы никакой нет.
- Действие «OK» в начале соответствует привычному порядку прочтения для большой части людей – слева направо. У Windows кнопка OK идёт сначала.
- «OK» в конце улучшает концентрацию и восприятие – пользователи лучше оценивают все варианты перед тем, как принять решение. Также такой порядок помогает избежать ошибок. У продуктов Apple кнопка OK стоит второй.
Каждый из нас был в этой ситуации. Застревал на странице с неактивной кнопкой, пытаясь понять, почему она не работает и что нужно сделать, чтобы вернуть её к жизни. Неактивное состояние используется, чтобы показать, что этот элемент не активен, но может заработать в будущем. Так поступают, потому что временное исчезновение кнопки может запутать пользователя.
Лучше при возможности избегать неактивных кнопок – пусть они всегда будут активны. Если пользователи не ввели нужную информацию, просто подсветите пустые строки или покажите предупреждение.
12 советов о дизайне кнопок в интерфейсе1. Различайте кнопки и ссылки. У них разное предназначение. Их схожесть в интерфейсе будет путать пользователя.
2. Продумайте варианты состояния кнопок. Активна ли она, будет ли подсвечиваться при наведении? Поймёт ли пользователь, что кнопка сработала? – это те вопросы, на которые стоит ответить заранее.
3. Подберите стиль своим кнопкам. Популярных вариантов не так мало сейчас, есть из чего выбрать. Продумайте, как кнопки будут сочетаться с другими элементами.
4. Соблюдайте иерархию кнопок. Кнопки делятся на основные, вторичные и третичные и поэтому оформляются по-разному.
5. Решите, точно ли нужно пользователям действие «по умолчанию». Иногда такой вариант может привести к ошибкам пользователей и, как следствие, негативу в сторону продукта.
6. Применяйте стандарты при проектировании элементов. Таким образом пользователю не нужно сильно задумываться над взаимодействием и терять время (и нервы).
7. Проработайте единый стиль для элементов. Это увеличит скорость работы с платформой и будет приятнее для пользователей.
8. Сделайте достаточно большие кнопки. Лучший вариант – от 48х48 dp, что обеспечит в реальных параметрах оптимальный размер – 9 мм.
9.
Позаботьтесь о доступности дизайна. Чем более понятный к восприятию будет ваш продукт, тем легче будет пользователям с ним взаимодействовать. К тому же, существуют платформы, которые помогают понять, хорошо устроена страница или нет.
10. Придумайте понятное название для кнопки. В таком случае пользователи будут исполнять указанное там действие.
11. Не беспокойтесь о порядке размещения кнопок «Оk» и «Отмена». В любом случае они будут работать одинаково.
12. Избегайте неактивных кнопок. Лучше скажите пользователю, что что-то идёт не так с помощью уведомлений.
Другие материалы по теме
Поделиться
СВЕЖИЕ СТАТЬИ
Другие материалы из этой рубрики
Не пропускайте новые статьи
Подписывайтесь на соцсети
Делимся новостями и свежими статьями, рассказываем о новинках сервиса
Статьи почтой
Раз в неделю присылаем подборку свежих статей и новостей из блога.
Пытаемся
шутить, но получается не всегда
Наш юрист будет ругаться, если вы не примете 🙁
Как запустить email-маркетинг с нуля?
В бесплатном курсе «Rock-email» мы за 15 писем расскажем, как настроить email-маркетинг в компании. В конце каждого письма даем отбитые татуировки об email ⚡️
*Вместе с курсом вы будете получать рассылку блога Unisender
Оставляя свой email, я принимаю Политику конфиденциальностиНаш юрист будет ругаться, если вы не примете 🙁
Трендовый дизайн: кнопки интерфейсов — Convertmonster
При разработке интерфейса проекта важно задавать оптимальный размер кнопок, чтобы они помещались в рабочую область приложения или веб-сайта.
Если нарушить соотношение высоты и ширины кнопок, можно сломать верстку сайта, и некоторые дизайнерские блоки сайта будут смещены.
Кроме того, проверьте, как пользователь взаимодействует с кнопками. Это важно на этапе проектирования веб-проекта, если кнопки некликабельные, то пользователь может застрять, и доступ к следующим страницам будет перекрыт. В таком случае клиент покинет приложение, и это же касается и веб-ресурса. Нажимаемые элементы должны выделяться, чтобы посетитель мог определить, какие элементы можно прокликать.
Современные кнопки серьезно выделяются на общем фоне. Становится, очевидно, с какими блоками можно взаимодействовать, а какие – просто элементы дизайна. Сегодня мы рассмотрим, как разрабатывать кнопки, какие шрифты рекомендуется использовать и как сделать их эффективными в плане призыва к действию.
Градиент и цвет
Одной из тенденций, наблюдаемой сегодня является то, что многие интернет-ресурсы применяют для этого цвет. Это относится к кнопкам и другим нажимаемым частям сайта.
Чтобы сделать элементы кликабельными и выделить их на общем фоне применяют особые цвета и шрифт. Так же важную роль играет надпись. Нужно придумать, что написать на кнопке. Основная цель, которую стоит преследовать, это получить конверсию от пользователя, а это значит, что нужно сделать графическое оформление так, чтобы посетитель захотел перейти и выполнить действие.
Стоит также обращать внимания на цвета, которые подбираются при создании проекта. Популярными сегодня являются сочетания красок состоящих из оттенков синего, зеленого и фиолетового. Они выделяются на общем фоне и становятся более заметными для пользователей. Кроме того дизайн может быть украшен дополнительными стилями, например, добавлением теней. Это придает кнопке ощущение, что она находится за границей страницы.
Все эти параметры помогают выделить важные части страницы и сделать их более заметными. Пользователь видит цель касания и сможет осуществить переход или включить некоторые функции, к примеру, окно “popup”.
В свое время были популярны оранжевые и красные кнопки. Тенденция изменилась, и в моде теперь другие цвета, это относиться и к градиентам. Теперь для нажимаемых элементов рекомендуется использовать окрас фиолетовый, зеленый и синий, они отлично смотрятся на светлом или затемненном фоне. Есть еще вариант, который считается жизнеспособным, это тот, где пользователи сами могут контролировать цветовую схему.
Размер имеет значение
Кнопки определенного размера – это не просто правило, которого следует придерживаться. Устанавливая ширину и высоту, вы тем самым обеспечиваете доступ к контенту. Посещая страницу, пользователь оценит удобство взаимодействия с кнопочной панелью управления.
Основная рекомендация, которой следует придерживаться для кликабельного объекта, это 44 пикселя. Данный показатель – это размер подушечки пальца, соответственно этого хватит, чтобы пользователь смог попасть по кнопке.
Указанный размер в 44 пикселя для кнопки, это условный параметр.
Вам не обязательно для кликабельного элемента проставлять такие размеры, вы можете указать другие параметры. Это минимальное значение, которое обязательно должно соблюдаться для комфортной работы с приложением или веб-сайтом.
Представьте, как раздражает пользователя, когда он пытается взаимодействовать с мелкими деталями в приложении. Допустим, выскочил блок рекламы и наш клиент пытается нажать на крошечный крестик, чтобы закрыть popup окно, а вместо этого промахивается и случайно переходит на объявление. Разрабатывая уникальный дизайн для сайта, нужно учитывать то, что посетители буду просматривать статьи и с мобильных устройств, где иконки маленького размера, соответственно, нужно соблюдать дистанцию.
Ошибочно полагать, что разработка сайта ведется исключительно для браузеров. Чтобы создать проект для телефонов, вам придется с нуля сделать таблицу стилей.
Если обратиться в руководство “Level AAA success”, то там указано, что размер «целевых объектов указателя», требуется установить 44 на 44 пикселя, соответственно эти размеры нужно проставить в CSS.
Существуют исключения, которые касаются внутренних ссылок проекта. Это связано с количеством слов и букв, которые используются в ссылке. Поэтому здесь разработчику придется использовать другие параметры и после каждого изменения тестировать полученный результат на смартфоне. Слишком большие слова влияют на внешний вид приложения, если просмотр ведется с телефона.
Визуальный дизайн со встроенными возможностями
Проверьте, как расположен, нажимаемый объект. Понятен ли он пользователю, сможет ли посетитель с первого захода понять, на что нажимать? Все это юзабилити, которое нужно учитывать при составлении концепции проекта.
Возможности проекта – это включение названий подсказок, указателей и т.д. Они дают сходу понять, какие действия следует предпринять с интерактивными элементами.
Отдельно взятые части дизайна, призваны выступать не только как элементы графики, они также предназначены для быстрого нахождения контента или своего профиля. При разработке рекомендуется учесть следующие пункты.
- Подчеркивания. Заранее подобранные цвета, которые будут использоваться для выделения ссылки.
- Выделение некоторых объектов тенями. Такой способ привлечет больше внимания.
- Придать блокам закругленность. Данная фишка будет эффектно смотреться на кнопках. Кроме того, вы можете придать объемности элементу, сделав его выпуклым. Для этого нужно применить определенные стили.
- Добавьте элементы и сделайте их активными, чтобы при посещении страницы клиент мог ими воспользоваться. Также не забудьте сделать пояснение, к примеру “Войти” и “Отправить”. Так клиенту будет понятно, какие возможности есть у интерфейса.
- Сделайте пространство, которое будет находиться по бокам от основной колонки, без других объектов.
Создание состояний наведения и фокусировки
Изменения при наведении мышкой – это когда при указании курсором на объекте меняется цвет. Данный эффект позволяет пользователю понять, какой объект считается кликабельным.
Кроме того, при наведении мышкой, действия могут происходить совершенно разные – смена цвета, перемещение или изменение формы блока.
Действия наведения не работают на мобильных устройствах, так как там отсутствует мышка, но это не значит, что нужно игнорировать стили, которые будут применяться при наведении. Основная часть целевой аудитории, возможно, будет формироваться на компьютере. Поэтому рекомендуется это сделать для ПК версии. Для смартфонов можно скрыть все лишние элементы и оставить только основные, таким образом, клиент поймет, на что нажимать.
Состояния, которые меняются при наведении, важны для настольного оборудования, к которым относятся ПК. Что касается смартфонов, то там внешний вид блоков меняется при нажатии, таким образом, интуитивно можно разобраться какие блоки считаются кликабельными. К примеру, при щелчке на странице, кнопка становится активной и выделяется на общем фоне, это происходит в момент касания дисплея.
Изменения, которые происходят при наведении, важны при показе ресурса для настольного оборудования.
Это также относится и к фокусу, когда при нажатии объект выделяется и с помощью клавиатуры можно переключаться между внутренними элементами. Состояние фокуса указывает, что сейчас выбрано. К примеру, активное поле, в которое можно вписать текст. После переключения, фокус перемещается на другую строку или поле и таким образом происходит заполнение. С другой стороны с помощью фокуса происходит запуск некоторых действий, например открытие и закрытие клавиатуры.
Достаточная наполненность
Разрабатывая темный дизайн, вы наверняка хотите убедиться, что клиент щелкает по намеченной цели, а не по соседнему блоку. В данном варианте это проблему легко решить, если при разработке проекта делать отступы между кнопками.
Кроме того, если размер касания должен быть не меньше 44 пикселей, рекомендуется добавить еще 8 пикселей отступа по всем кроям элемента. Другой вариант, как можно улучшить платформу, это добавить отступы равные половине размера кнопки. К примеру, если объект нажатия 50 пикселей, окружающее пустота пространства желательно установить 25 пикселей.
Текст доступен для чтения и возможных действий
На нажимаемых элементах текст должен призывать юзеров к действиям.
Когда дело касается оформления внешнего вида текста, то здесь наблюдается ряд тенденций.
- Текстовые названия в кнопках используют регистр верхнего уровня и прописываются названия, начиная с заглавной буквы. Следуют избегать составления названия полностью из верхнего или нижнего регистра. Лучше написать слово, начиная с заглавной, а все остальные буквы с маленькой. К примеру, вот так “Отправить”.
- Шрифты желательно использовать стандартные, которые применимы для многих проектов. Стиль оставьте обычный или средний.
Существуют некоторое мнение, касающееся пользовательского интерфейса при составлении текстового дизайна.
- Текст на кнопке имеет прямое значение, где сообщает клиенту, что будет дальше при щелчке. Даже если число букв составляет значительно больше, чем просто “Нажмите здесь”, рекомендуется убедиться, что они не выходят за рамки кликабельной области, и не оказываются на территории соседнего блока.
- Исключайте слова, у которых отсутствует смысловая нагрузка. Например, используются слишком много предлогов. Подумайте, как можно написать, чтобы получилось понятно и коротко. В итоге, вы сэкономите место и сделаете кнопку понятной для клиента.
- Старайтесь избегать жаргонных слов и сокращений, иначе, при посещении страницы посетитель не поймет, для чего предназначена эта кнопка.
- Придерживайтесь единого стиля написания текста. Если сайт создан на профессиональную тематику, то используйте одни и те же термины во всем проекте, чтобы посетителям было легче разобраться в теме.
Добавление обводок вокруг ссылок
Текстовые ссылки отличаются от аналогичных нажимаемых элементов. Однако следует и им уделить внимание, делая дизайнерское оформление. Чтобы при заходе пользователь видел новые ссылки и хотел по ним перейти.
В первую очередь рекомендуется подумать, как часто будут использоваться элементы ссылок в интерфейсе.
Основная проблема заключается в том, что из-за длины ссылок, они могут пересекаться с некоторыми блоками, что затруднит переходы по ресурсам. Особенно это относится к тому, когда количество ссылок слишком большое на странице.
Лучший совет: из-за слишком маленького дисплея на смартфоне, можно столкнуться с проблемами пересечения частей интерфейса, из-за чего затруднятся переходы внутри проекта. Есть решение это исправить, размещайте ссылки экономно, также применяйте кнопочные варианты для экономии места.
Чтобы исправить проблему с перекрытием, можно составить раскрывающееся меню, где будут расположены важные пункты, по которым люди смогут делать переходы. При нажатии на кнопке-меню, откроется список, там можно выбрать и перейти на другую страницу. Само меню рекомендуется расположить под шапкой, на виду у пользователей. Остальные маловажные элементы убрать, чтобы не возникала путаница.
Следующий совет: это сделать обширный ореол области касания, то есть вокруг нажимаемого блока должно располагаться открытое пространство, чтобы отсутствовали помехи.
Это упростит работу приложения и минимизирует риски щелкнуть не туда. Данный вариант подходит к меню навигации или другим кликабельным объектам сайта, но когда дело касается статьи, то в тексте нужно обойтись без отступов.
Рекомендации WCAG включает в себя важный момент.
Блок может расположиться в любом месте проекта и меняться в зависимости от масштабирования области. Поскольку части ресурса могут располагаться где угодно, то контейнер, на котором написан текст, не должен быть меньше абзаца, иначе произойдет пересечение текстовых полей. Кроме того следует соблюдать интервал, между строками, иначе при изменении экрана, текст начнет наезжать друг на друга.
Кликабельные элементы должны иметь иерархию
Дизайн, который вы разрабатываете, будет включать несколько вариантов оформления кнопочных шаблонов. Разумеется, каждый из них будет включать уникальный внешний вид.
Этот вариант считается распространенным при выборе разных кнопок или уровней нажимаемых блоков.
Применяется он на веб-сайтах и в бизнес-моделях.
Как будет выглядеть многоуровневая архитектура. Сначала определимся, сколько уровней понадобиться. Для большинства проектов подойдет два варианта основной и дополнительный, однако встречаются и третий, и четвертый уровень.
Следует настроить стиль для каждой кнопки. Начнем с первой, она должна выделяться среди остальных кликабельных элементов. Здесь подразумевается выбор специального цвета. Второй уровень, так же можно сделать как основную кнопку, но есть отличительные особенности, это меньший размер, установка стиля прозрачности и придание меньшей контрастности. Кнопки третьего и четвертого уровня могут использовать те же стили, что и второго уровня.
Кнопки верхнего уровня должно быть более контрастными и обладать большим размером. При масштабировании экрана, они соответственно должны меняться в высоту и ширину.
В проекте присутсвуют элементы касания, которые должны быть замечены людьми в первую очередь? Тогда следует использовать четкую иерархию и важные нажимаемые блоки выделять среди остальных объектов.
Они должны быть большего размера и выделяться. Пример можно увидеть на картинке выше, посмотреть на массивную оранжевую кнопку, которая дает понять, что сюда можно нажать. Размер нажимаемых областей играет ключевую роль. Здесь можно предугадать намерения пользователя.
Небольшое предостережение, хотя разработанная иерархия кнопок, помогает быстро ориентироваться в системе, слишком большое обилие нажимаемых элементов может вызвать возмущение у целевой аудитории. Поэтому, нужно придерживаться правила, все хорошее в меру, иначе хрупкое равновесие может быть нарушено.
Вывод
Разработка проектов, для сенсорных экранов предназначенных кликать пальцами, до сих пор актуальна. Это остается верным решением, независимо от ширины и высоты экрана смартфона. Нажимаемые элементы могут быть чем угодно, кнопками или текстовыми ссылками, с которыми станет взаимодействовать посетитель, таким образом, делая интерфейс рабочим, мы заставляем приложение функционировать как задумано.
Хорошая кнопка, прежде всего, выглядит как детализированный графический фрагмент, по которому хочется прикоснуться, перейти на страницу, выполнить действие.
К сожалению, во время разработки многие веб-мастера про это забывают. Делайте свои макеты с высокой детализацией, ведь дизайн проекта так же важен, как и опубликованный на нем материал.
Оригинал публикации
Дизайн кнопок — серия компонентов пользовательского интерфейса
Все, что вам нужно знать о дизайне кнопок, одном из основных интерактивных строительных блоков для создания пользовательского интерфейса.
Чтобы спроектировать правильное взаимодействие, нам нужно оглянуться на историю и происхождение физических кнопок, прямых предшественников компонента пользовательского интерфейса, который сегодня так активно используется во всех цифровых продуктах. Кнопки потрясающие. Прикосновение пальца приводит в движение прибор, автомобиль или систему, даже если пользователь не понимает основных механизмов или алгоритмов. В Кнопка питания Рэйчел Плотник прослеживает истоки сегодняшней кнопочной культуры и описывает, как нажатие кнопки стало средством цифрового управления, которое обещало легкое, незаметное и надежное управление.
«Вы нажимаете кнопку, мы делаем все остальное», — камеры Kodak обращались к потенциальным потребителям с помощью броского и прямого слогана.
Это то, что привлекает пользователей и сегодня. Мгновенное удовлетворение от того, что все происходит простым прикосновением. Несмотря на то, что множество новых бытовых приборов и других устройств переходят на управление с помощью сенсорного экрана, физические кнопки никуда не исчезнут, и поведенческие привычки, формируемые ими, влияют на то, насколько интуитивно понятным и простым в использовании является дизайн кнопок.
Кнопки сообщают о действиях, которые могут выполнять пользователи. Обычно они размещаются по всему пользовательскому интерфейсу, в таких местах, как диалоги, формы, панели инструментов и т. д. Различие между кнопками и ссылками имеет значение:
- Ссылки используются, когда вы переходите в другое место, например: страница «просмотреть все», профиль «Роджер Райт» и т. д.
- Кнопки используются, когда вы выполняете действие , например: «отправить», «объединить», «создать новый», «загрузить», и т. д.
д.Создание правильных взаимодействий и стилей для кнопок — одна из самых важных частей процесса. Каждое состояние должно иметь четкие возможности, которые отличают его от других состояний и окружающего макета, но не должны радикально изменять компонент или создавать много визуального шума.
Обычный — сообщает, что компонент интерактивен и включен.
Фокус — сообщает, что пользователь выделил элемент с помощью клавиатуры или другого метода ввода.
Hover — сообщает, когда пользователь поместил курсор над интерактивным элементом.
Активно — или состояние нажатия сообщает, что пользователь нажал на кнопку.
Выполнение/Загрузка — используется, когда действие не выполняется немедленно и сообщает, что компонент находится в процессе завершения действия.
Отключено — сообщает, что компонент в настоящее время не интерактивен, но может быть включен в будущем.
Наиболее распространены прямоугольные кнопки со скругленными углами, которые легко идентифицировать и хорошо смотреться рядом с полем ввода. Выбор правильного стиля для кнопки будет зависеть от цели, платформы и рекомендаций. Вот некоторые из наиболее популярных вариантов стилей:
Стили, в основном используемые для различения более важных действий от менее важных. Создайте иерархию действий, которая будет направлять пользователя при наличии множества вариантов. Обычно у вас может быть одна заметная кнопка (этот стиль часто называют «первичным») и несколько средних «вторичных» и малозначительных «третичных» действий.
Как правило, вы хотите сделать наиболее часто выбираемую кнопку «по умолчанию» (использовать основные стили) и перевести ее в активное состояние. Это помогает большинству пользователей быстрее выполнять свои задачи и направляет их в правильном направлении.
Исключением являются случаи, когда все варианты равны или действие особенно опасно. В этих случаях вы хотите, чтобы пользователи явно нажимали кнопку, а не случайно.
Не заставляйте меня думать — это название книги инженера по юзабилити Стива Круга. Один из многих моментов, которые он затрагивает, заключается в том, насколько важно сделать интерфейс понятным для пользователей, а не создавать головоломки или лабиринты. Основываясь на многолетнем использовании различных устройств и других продуктов, мы сформировали определенные ожидания относительно того, как выглядят и работают кнопки. Большое отклонение от того, что считается «стандартом», создаст задержку и путаницу для пользователей.
Избегайте использования одного цвета для интерактивных и неинтерактивных элементов. Если интерактивные и неинтерактивные элементы имеют одинаковый цвет, людям трудно понять, куда нажимать.
«Согласованность — один из самых мощных принципов удобства использования: когда вещи всегда ведут себя одинаково, пользователям не нужно беспокоиться о том, что произойдет».
— Якоб НильсенСогласованность повышает скорость и точность, помогает избежать ошибок. Обеспечьте предсказуемость, которая поможет пользователям почувствовать, что они контролируют ситуацию и способны достичь своих целей в вашем продукте. Когда вы создаете первичный, вторичный и третичный стили, постарайтесь найти некоторые общие элементы, такие как цвет, форма и т. д. Старайтесь не только быть последовательными внутри вашей системы дизайна, но и осознавать платформу, для которой вы разрабатываете.
Нажатие кнопки должно быть простой задачей, и если пользователь не может успешно нажать на кнопку или в процессе по ошибке нажать на соседний элемент, это приведет к негативному опыту и потере времени.
Для большинства платформ рассмотрите возможность создания сенсорных целей размером не менее 48 x 48 dp. Сенсорная цель такого размера приводит к физическому размеру около 9 мм, независимо от размера экрана. Рекомендуемый целевой размер элементов сенсорного экрана составляет не менее 7–10 мм.
Для кнопок со значками убедитесь, что цель касания выходит за визуальные границы элемента. Это относится не только к мобильным устройствам или планшетам, но и к таким же указателям в Интернете, как мышь.
Эту рекомендацию следует повторить для каждого компонента. Размер целевой области был одним из факторов, влияющих на доступность. Другие размер шрифта, цвет и контрастность. Существует множество инструментов, которые помогут вам легко проверить, как работают ваши компоненты.
Дизайнеры должны тесно сотрудничать с командами разработчиков, чтобы убедиться, что кнопки работают со средствами чтения с экрана. Роль кнопки следует использовать для интерактивных элементов, которые вызывают реакцию при активации пользователем. Добавление role=»button» заставит элемент отображаться как элемент управления «кнопка» в средстве чтения с экрана.
Жесты позволяют пользователям взаимодействовать с приложением с помощью касания. Использование прикосновения как еще одного способа выполнения задачи может сэкономить время и дать тактильный контроль.
Поскольку некоторые жесты, такие как смахивание для запуска контекстных действий, двойное касание для лайка или длительное нажатие, используются все шире с каждым днем, они все еще не очень очевидны для обычного пользователя. Я бы предложил использовать их как альтернативный способ выполнения действия для более продвинутых пользователей.
То, о чем говорят ваши кнопки, так же важно, как и то, как они выглядят. Использование неправильного ярлыка может привести к путанице пользователей, потере времени и, возможно, к серьезным ошибкам.
Хорошая метка кнопки побуждает пользователей к действию. Лучше всего использовать глаголы и маркировать кнопку тем, что она на самом деле делает. Как будто кнопка спрашивает пользователя — «Хотели бы вы ( Добавить в корзину )?» или «Вы хотите ( Подтвердить заказ )?».
Избегайте использования Да , Нет или слишком общих ярлыков , таких как Отправьте .
И то, и другое — просто выбор, и дизайнеры могут часами спорить о своих предпочтениях.
- Наличие OK действие сначала поддерживает естественный порядок чтения. Это может помочь сэкономить некоторое время, если мы знаем, что, скорее всего, это то, что выберет использование. Windows помещает OK первым
- Листинг OK последним улучшает поток. Некоторые могут возразить «ОК», так как кнопка «Далее» переместит пользователя вперед. Ставьте «ОК» последним, чтобы помочь пользователям оценить все варианты, прежде чем действовать, и помочь избежать ошибок и поспешных решений. Apple ставит OK последний
Любой выбор имеет веские аргументы в свою пользу, и ни один из вариантов не приведет к катастрофическим последствиям для удобства использования. Лично я чаще всего ставлю OK последним в списке действий, в чем-то вроде диалогового окна (Возможно, потому что я в основном пользователь Mac.)
Все были в такой ситуации раньше.
Зависнуть на экране на несколько секунд или минут, пытаясь понять, почему ваш прогресс блокируется неактивной кнопкой и что нужно сделать, чтобы вернуть эту штуку к жизни). Отключенные элементы управления используются для указания того, что компонент в настоящее время не интерактивен, но может быть включен в будущем. Отключенные кнопки используются, потому что удаление кнопки из ее исходного местоположения и ее отображение в более позднем контексте может запутать пользователей.
Я предлагаю по возможности избегать отключенных кнопок. Лучше, чтобы он всегда был включен, и если пользователи не предоставили необходимую информацию, просто выделите пустые поля или вызовите уведомление.
Серия компонентов — подробный обзор компонентов, которые мы используем каждый день, и способов их наилучшего проектирования.
Дизайн текстовых полей и форм — серия компонентов пользовательского интерфейса
Простые правила, которые помогут вам создавать формы, которые пользователи захотят заполнять
uxdesign.
cc
Элементы управления выбором — серия компонентов пользовательского интерфейса
Делать выбор никогда не было так приятно. Подробный обзор дизайна флажков, переключателей и переключателей.
uxdesign.cc
7 основных правил дизайна кнопок. Ник Бабич | by Nick Babich
Изображение: Gal ShirКнопки являются важным элементом интерактивного дизайна. Они играют основную роль в диалоге между пользователем и системой. В этой статье я рассмотрю семь основных принципов, которые вам необходимо знать для создания эффективных кнопок.
Когда дело доходит до взаимодействия с пользовательским интерфейсом, пользователи должны мгновенно знать, что «кликабельно», а что нет. Каждый элемент дизайна требует усилий пользователя для декодирования. Как правило, чем больше времени требуется пользователям для декодирования пользовательского интерфейса, тем менее полезным он становится для них.
Но как пользователи узнают, является ли тот или иной элемент интерактивным или нет? Они используют предыдущий опыт и визуальные обозначения, чтобы прояснить значение объекта пользовательского интерфейса.
Вот почему так важно использовать соответствующие визуальные обозначения (такие как размер, форма, цвет, тень и т. д.), чтобы элемент выглядел как кнопка. Визуальные обозначения обладают важной информационной ценностью — они помогают создавать аффордансов в интерфейсе.
К сожалению, во многих интерфейсах признаки интерактивности слабы и требуют взаимодействия; в результате они эффективно снижают обнаруживаемость.
Если отсутствуют четкие возможности взаимодействия, а пользователи борются с тем, что «кликабельно», а что нет, не имеет значения, насколько крутым будет дизайн. Если им будет трудно им пользоваться, они найдут его разочаровывающим и, в конечном счете, не очень полезным.
Слабые указатели — еще более серьезная проблема для мобильных пользователей. Пытаясь понять, является ли отдельный элемент интерактивным, пользователи настольных компьютеров могут навести курсор на элемент и проверить, меняет ли курсор свое состояние. У мобильных пользователей такой возможности нет.
Чтобы понять, интерактивен элемент или нет, нужно тапнуть по нему — другого способа проверить интерактивность нет.
Не думайте, что что-то в вашем пользовательском интерфейсе очевидно для ваших пользователей.
Во многих случаях дизайнеры намеренно не определяют кнопки как интерактивные элементы, поскольку предполагают, что интерактивные элементы очевидны для пользователей. При разработке интерфейса вы всегда должны помнить следующее правило:
Ваша способность интерпретировать признаки кликабельности отличается от способности ваших пользователей, потому что вы знаете, для чего предназначен каждый элемент вашего собственного дизайна.
Используйте привычный дизайн кнопок
Вот несколько примеров кнопок, знакомых большинству пользователей:
- Кнопка с заливкой и квадратными рамками
- Кнопка с заливкой и закругленными углами
- Кнопка с заливкой и тенями
- Кнопка-призрак
Среди всех этих примеров дизайн «Заполненная кнопка с тенями» является наиболее понятным для пользователей.
Когда пользователи видят размер объекта, они сразу понимают, что это то, что они могут нажать.
Не забывайте о пробелах
Важны не только визуальные свойства самой кнопки. Количество пробелов рядом с кнопкой облегчает (или усложняет) пользователям понимание того, интерактивный это элемент или нет. В приведенном ниже примере некоторые пользователи могут спутать призрачную кнопку с информационным окном.
Как пользователь, вы не можете сказать, коробка это или кнопка.Кнопки должны быть расположены в местах, где пользователи могут легко их найти или ожидать увидеть. Не заставляйте пользователей искать кнопки. Если пользователи не могут найти кнопку, они не узнают о ее существовании.
Максимально используйте традиционные макеты и стандартные шаблоны пользовательского интерфейса Традиционное расположение кнопок повышает удобство обнаружения. Со стандартным макетом пользователи легко поймут назначение каждого элемента — даже кнопки без явных обозначений.
Сочетание стандартного макета с чистым визуальным дизайном и достаточным количеством пробелов делает макет более понятным.
Не играйте с пользователями в «охоту за кнопкой»
Совет: Проверьте свой дизайн на возможность обнаружения Когда пользователи впервые переходят на страницу, содержащую некоторые действия, которые вы хотите, чтобы они предприняли, должно быть легко определить подходящую кнопку для пользователя.
Кнопки с общими или вводящими в заблуждение надписями могут сильно раздражать пользователей. Напишите метки кнопок, которые четко объясняют, что делает каждая кнопка. В идеале метка кнопки должна четко описывать ее действие.
Пользователи должны четко понимать, что происходит, когда они нажимают кнопку. Позвольте мне привести вам простой пример. Представьте, что вы случайно запустили действие удаления и теперь видите следующее сообщение об ошибке.
Расплывчатая метка «ОК» не слишком много говорит о том, что делает кнопка действия.
Непонятно, что представляют собой «ОК» и «Отмена» в этом диалоговом окне. Большинство пользователей задают себе вопрос: «Что происходит, когда я нажимаю «Отмена»?»
Никогда не проектировал диалоговое окно или форму, состоящую исключительно из двух кнопок «ОК» и «Отмена».
Вместо метки «ОК» лучше использовать «Удалить». Так будет понятно, что эта кнопка делает для пользователя. Кроме того, если «Удалить» является потенциально опасной операцией, вы можете указать этот факт красным цветом.
«Удалить» дает понять, что кнопка делает для пользователей. Потенциально опасное действие «Отключить карту» выделено в этом интерфейсе красным цветом. Изображение: RamotionРазмер кнопки должен отражать приоритет этого элемента на экране. Большая кнопка означает более важное действие.
Приоритет кнопок
Сделать самую важную кнопку самой важной. Всегда старайтесь сделать основную кнопку действия более заметной. Увеличьте ее размер (увеличив размер кнопки, вы сделаете ее более важной для пользователей) и используйте контрастный цвет, чтобы привлечь внимание пользователя.
Сделать кнопки удобными для мобильных пользователей
Во многих мобильных приложениях кнопки слишком маленькие. Это часто приводит к тому, что пользователи опечатываются.
Слева: кнопка правильного размера. Справа: кнопки слишком маленькие. Изображение: AppleИсследование MIT Touch Lab показало, что средний размер подушечек пальцев составляет 10–14 мм, а кончиков пальцев — 8–10 мм. Это делает 10 мм x 10 мм хорошим минимальным размером сенсорной мишени.
Источник изображения: uxmagПорядок кнопок должен отражать характер диалога между пользователем и системой. Спросите себя, какой порядок пользователи ожидают увидеть на этом экране, и создайте соответствующий дизайн.
Пользовательский интерфейс — это диалог с вашими пользователями
Например, как расположить кнопки «Предыдущий/Следующий» в нумерации страниц? Логично, что кнопка, которая перемещает вас вперед, должна быть справа, а кнопка, которая перемещает вас назад, должна быть слева.
Это распространенная проблема для многих приложений и веб-сайтов. Когда вы предоставляете слишком много вариантов, ваши пользователи ничего не делают. При разработке страниц в приложении или на веб-сайте подумайте о наиболее важных действиях, которые должны выполнять ваши пользователи.
Слишком много кнопок.Когда пользователи нажимают или касаются кнопки, они ожидают, что пользовательский интерфейс отреагирует соответствующей обратной связью. В зависимости от типа операции это может быть визуальная или звуковая обратная связь. Когда у пользователей нет обратной связи, они могут подумать, что система не получила их команду, и повторит действие. Такое поведение часто приводит к множеству ненужных операций.
Почему это происходит? Как люди, мы ожидаем некоторую обратную связь после взаимодействия с объектом. Это может быть визуальная, звуковая или тактильная обратная связь — все, что подтверждает тот факт, что взаимодействие было зарегистрировано.
Пользовательский интерфейс обеспечивает визуальную обратную связь о том, что печатная машина зарегистрирована.