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

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

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

Текстовые кнопки труднее нажимать

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

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

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

Текстовые кнопки, написанные только заглавными буквами, труднее читать

Чтобы решить проблему с нажатием текстовых кнопок, некоторые дизайнеры делают их в верхнем регистре. Система Google Material Design поддерживает этот стиль кнопок, однако, он имеет свои недостатки.

Предстоящие воркшопы

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

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

Текстовые кнопки сложнее распознать

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

Что использовать вместо текстовых кнопок

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

Контурная кнопка

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

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

Светлые кнопки

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

Она имеет больший визуальный вес

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

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

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

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

Не злоупотребляйте текстовыми кнопками

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

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

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

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

Данный пост является переводом этой статьи от Tubik Studio.

Что такое кнопка в интерфейсе?

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

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

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

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

Кнопка призыва к действию CTA (Call-To-Action)

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

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

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

Текстовая кнопка

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

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

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

Этот изящный дизайн разработан для онлайн-магазина модной одежды. Как видите, интерактивная часть интерфейса основана на текстовых ссылках. Здесь лишь один объект с призывом к действию (Shop new arrivals) представлен легко распознаваемой кнопкой, а все остальные в хедере и вкладках — отличаются только текстом о предложениях магазина. Такой подход к оформлению поддерживает легкий и минималистский дизайн веб-страницы.

Кнопка с выпадающим списком

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

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

Кнопка «Гамбургер»

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

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

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

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

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

Кнопка-плюс

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

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

Кнопка с выбором вариантов

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

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

Кнопка «Поделиться»

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

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

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

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

Призрачная кнопка

Она на первый взгляд выглядит «пустой». В принципе, визуально хорошо узнаваема благодаря своей форме и тонкой обводке. В случае нескольких элементов призыва к действию этот вид кнопок помогает установить визуальную иерархию: основной CTA-объект представлен в виде заполненной кнопки, а вторичный (тоже активный) – в виде прозрачной.

В качестве примера представлена форма логина и регистрации приложения ресторана. Здесь вы видите 3 типа кнопок:

1. основная CTA-кнопка представлена заполненным элементом как наиболее простой способ быстрой регистрации;
2. призрачная — обеспечивает доступ к менее известному варианту;
3. текстовая — в виде ответа на вопрос выделена цветом и интегрирована в строку внизу экрана.

Подобный подход в дизайне помогает реализовать четкую иерархию интерактивных объектов/элементов на экране.

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

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

• выполнять обычное целевое действие (открывать новое письмо электронной почты; открывать экран для добавления фото или видео; выполнять поиск нужного контента в галерее и т. д.)
• показать дополнительные доступные действия
• трансформироваться в другие UI-элементы.

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

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

Факторы, определяющие эффективность дизайна кнопок UI

Размер

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

Лидеры рынка часто в своих руководствах дают рекомендации по размерам, например:

• Apple считают, что размер кнопок CTA в мобильном интерфейсе должен быть не менее 44х44 пикселей;
• Microsoft рекомендует значение = 34х26 пикселей.

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

Цвет

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

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

Форма

Если речь идет о Call To Action элементах, то они обычно имеют форму прямоугольника. Она помогает ясно понять, что кнопка является кликабельной и интерактивной + пользователи привыкли воспринимать объект прямоугольной формы как кнопку.

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

Местоположение

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

Текст

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

Например:

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

Рассмотрим все кнопки, используемые на странице:

• Основная Call To Action кнопка приглашает посетителей присоединиться, она мгновенно привлекает внимание: дизайнер использовал прямоугольную форму с закругленными краями. Яркий цвет кнопки контрастирует с фоном и визуально связывает ее с анимационным hero image изображением – самым заметным визуальным элементом на странице. Поддерживающий CTA-текст набран заглавными буквами и легко читаемым шрифтом.
• В хедере размещены 4 текстовые кнопки, которые помогают пользователям перейти к самым важным разделам контента на веб-сайте.
• В левой части хедера находится хорошо заметная дополнительная CTA-кнопка, которая позволяет уже зарегистрированным юзерам входить в свои учетные записи.
• Кнопки «Поделиться» имеют круглую форму и не слишком резко контрастируют с фоном – их легко увидеть, но при этом они не отвлекают внимание от основных объектов.

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

Кнопка питания не работает? Используйте эти приложения для включения и выключения экрана

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

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

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

1. Автоматизация функции включения/выключения с Gravity Screen.

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

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

2. Moto display

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

Moto dispay не блокирует телефон, это нужно делать вручную. Но так как кнопка питания не работает, мы рекомендуем установить время режима сна телефона к минимуму, то есть 15 секунд.

3. Перевести Вкл/Выкл питания на кнопку громкости

Да, вы правильно прочитали, есть приложение и для этого тоже, и самое лучшее, что оно работает, даже если телефон не рутирован. Это приложение называется Volume Unlock Power Button Fix, то есть “громкость разблокировать, клавишу питания пофиксить”. Это очень и очень длинное имя, но оно полностью определяет цель приложения.

Прежде всего, установите его на телефоне. Теперь откройте приложение и предоставьте ему права администратора. Это необходимо, в противном случае, приложение не будет работать. Откройте приложение и включите «Enable Volume Unlock» и «Screen off», используя переключатели справа. Если вы включили оба варианта, то вы сможете выключить экран на панели уведомлений и включить его с помощью кнопки громкости.
В настройках приложения, вы также можете включить такие функции, как автоматический запуск при загрузке и авто включение/отключение, которое будет работать в установленном временном интервале. Например, установив время с 06:00 до 04:00,  приложение будет функционировать только в течение этого времени.
Мы использовали его в течение 2 дней, и не нашли каких-либо ненужных разрядов батареи. Это удивительное приложение.

Добавление кнопки для мобильного приложения

Важно: эта опция доступна только для Pro сайтов.

Добавление кнопки для мобильного приложения

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

В новом всплывающем окне выберите элемент Кнопки приложений:

Подсказка: если вам нужна только одна кнопка, наведите на ненужную и кликните на троеточие, чтобы удалить её:

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

Во вкладке Действие вставьте ссылку на страницу приложения в соответствующее поле:

Вы также можете сделать так, чтобы при нажатии на кнопку ссылка открывалась в новой вкладке вашего браузера, или добавить к ссылке атрибут «nofollow», чтобы не передавать ссылочную массу на сторонние сайты:

Подсказка: узнайте о теге «nofollow» детальнее в статье «Nofollow» для ссылок.

Настройки кнопки для мобильного приложения

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

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

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

В зависимости от того, для пользователей какой именно платформы разработано ваше мобильное приложение, вы можете выбрать тип кнопки — App Store или Google Play:

В опциях ниже вы можете выбрать подходящий вам размер этого элемента:

Опубликуйте свой сайт, чтобы изменения вступили в силу.

Примечание: если вы хотите получать статистику кликов на кнопку в свой аккаунт Google Аналитики, обратитесь к статье Отслеживание нажатий кнопки.

5 лучших приложений для Android для быстрого доступа ко всему

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

К счастью, в Android мы можем вносить изменения, которые ускоряют взаимодействие с нашими телефонами — без необходимости рутирования или перепрошивки. Разработчики придумали несколько довольно креативных ярлыков для совершения звонка, отправки текста и быстрого доступа к другим распространенным задачам. Многие из них решили подражать Assistive Touch для iOS. Эй, все работает.

Вот пять, которые привлекли мое внимание.

1. EasyTouch

Assistive Touch помещает кнопку на экране вашего iPhone, которая плавает над всем остальным

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

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

EasyTouch является одним из тех приложений

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

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

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

Скачать: EasyTouch для Android [Ссылка удалена]

2. Коротышка

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

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

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

Скачать: Коротышка для Android [Ссылка удалена]

3. Плавающая панель инструментов

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

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

Скачать: Плавающая панель инструментов для Android (бесплатно | $ 2.03)

4. Простые ярлыки

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

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

Скачать: Простые ярлыки для Android (бесплатно, покупка в приложении за 1 доллар, чтобы разблокировать)

Если вам нужно больше приложений, чтобы заполнить Floating Toolbox или Simple Shortcuts, вот несколько музыкальных плееров, которые отлично смотрятся на новых телефонах Android

, У нас также есть коллекция читателей аудиокниг

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

также.

5. Вспомогательное прикосновение 2

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

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

На самом деле, это приложение заслуживает упоминания. Assistive Touch 2 сжимает плавающую кнопку в меньшую, менее навязчивую цель. Всплывающее окно запуска состоит из кольца кругов вместо одного прозрачного квадрата. Функциональность в основном та же, но это отличительный визуальный поворот, который все еще отлично смотрится на леденце или зефире

устройство.

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

Assistive Touch 1 позволяет удалять рекламу за 1,98 долл. США, но удаление их из Assistive Touch 2 составляет примерно половину цены в 99 центов.

Скачать: Assistive Touch для Android (бесплатно, $ 1,98 за удаление рекламы), Assistive Touch 2 для Android (бесплатно [больше не доступно], $ 0,99 за удаление рекламы)

Как вы работаете с Android?

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

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

Для людей, которые влюблены в Assistive Touch для iOS, действительно нет недостатка в дополнительных опциях. Есть довольно много вариантов на выбор, которые просто называются Вспомогательное прикосновение [Больше не доступно], точно так же, как указано выше. Вы также можете рассмотреть QuickTouch [Больше не доступен].

Почему вы используете ярлыки, чтобы обойти? Какие изменения в интерфейсе вы бы хотели внедрить в Google или других производителей телефонов Android? Дайте нам знать об этом в комментариях!

Кредиты Изображения: Ярлыки бизнесмена от jumpe через Shutterstock

Переключение между приложениями в iOS 9 и кнопка Back-to-App

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

Как показало недавнее исследование, людям, занятым поиском информации на своих мобильных устройствах, приходится взаимодействовать со множеством приложений. И в среднем число приложений, с которыми каждый пользователь регулярно имеет дело, составляет 4.6. Запускают они их 10.8 раз за один период времени, в течение которого что-то ищется (для сравнения, в других случаях, например, во время интернет-серфинга, эта статистика выглядит менее внушительно, а именно: 2.6 приложений на 3.9 запусков в течение одной сессии).

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

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

1. Перейти к списку недавних приложений, найти искомое приложение и нажать на него. (В iOS это делается двойным кликом по кнопке Home, в Android — нажатием физической кнопки).
2. Кнопка Back (Назад).

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

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

В iOS 9 разработчики Apple внесли некоторые изменения относительно того, как пользователи могут переключаться между приложениями: не только подвергся редизайну список недавних приложений, но также добавилась новая кнопка Back-to-app. Новый список недавних приложений в iOS представляет разные приложения в виде карточной колоды (так же, как и в Android). Но разработчики Android использовали ограниченное пространство экрана целесообразнее — колода карт тасуется вертикально, а не горизонтально.

Рис. 1

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

Но одно из наиболее заметных изменений в iOS 9 это, пожалуй, не новый список, а кнопка Back-to-app. В отличие от физической кнопки Back в Android, функционал Back-to-app в iOS весьма ограничен: с ее помощью пользователи могут вернуться к прежнему приложению, но только при определенных обстоятельствах.

Сложности с кнопкой Back-To-App 

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

1. Размер. Во-первых, возникает ощущение, что появление кнопки Back-to-app изначально не планировалось, и что появилась она в последний момент. Кнопка в целом выглядит как временное решение в прекрасно скроенном продукте. Она крошечная, и из-за расположения в верхней части экрана возможны случайные нажатия на другие кнопки, которые в приложениях традиционно располагаются в том же верхнем правом углу (меню «гамбургер» или кнопка Back в приложении). То, что в силу небольшого размера кнопка не сразу бросается в глаза, едва ли можно посчитать существенным недостатком. Поскольку дело касается операционной системы (а не случайного приложения или веб-сайта). У пользователей будет достаточно времени, чтобы в конце концов заметить ее и научиться пользоваться.

Рис. 2

Когда Yelp запускается непосредственно из App Store, кнопка «Назад» (или Back) в iTunes Store появляется в верхнем левом углу экрана. 

2. Умозрительная модель

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

Иначе говоря, если в Pandora вы слушаете какую-то песню и дважды нажимаете на кнопку Home на смартфоне (после чего появляется список недавних приложений), а затем выбираете iTunes из этого списка, чтобы прослушать ту же песню, — вы не увидите в iTunes кнопки возврата к приложению Pandora. Но если вы нажимаете на корзину в Pandora, и следует перенаправление в iTunes, кнопка Back to Pandora все-таки высветится. Очень вероятно, что многим пользователям сложно понять причины такого «странного» поведения кнопки. В силу этого явления, которое на первый взгляд кажется ни чем не мотивированным, пользователи могут предпочесть кнопкам опробованный и надежный способ переключения между приложениями — двойной клик по кнопке Home на смартфоне, влекущий за собой появление списка недавних приложений. Дизайнерскую умозрительную модель не так-то просто донести до конечного пользователя. То, что работает всегда, выглядит более предпочтительным по сравнению с вариантами, которые срабатывают через раз. Люди не любят разочаровываться, и, разочаровавшись однажды, будут искать другие способы.

Если вы кликаете по ссылке в приложении Mail, и она перенаправляет на App Store для загрузки, скажем, IMDb, то, открыв IMDb, с помощью Back-to-app вы сможете перейти только обратно в App Store, а не в приложение Mail.

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

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

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

Рис. 3

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

Рис. 4

Когда приложение Messenger запускается из Facebook,  в верхнем левом углу появляется кнопка Recent.

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

Несколько слов о лаунчерах

С помощью iOS 9 разработчики Apple упростили контроль приложения посредством другого приложения. Однако потенциальная опасность кроется в том, что пользователи могут быть дезориентированы. В некоторых приложениях присутствует опция запуска других приложений, но тем не менее у людей может сложиться впечатление, что они включили что-то не то. К примеру, клик по ссылке в Pandora перенаправляет в iTunes, но по той причине, что ни на странице, ни в навигационной панели iTunes не высвечивается логотип, может показаться, что запущено другое приложение.

Рис. 5

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

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

И в заключение…

Возможность непосредственного запуска приложения из интерфейса другого не выглядит таким уж новшеством для разработчиков iOS. Но кнопка Back-to-app предоставляет больший уровень удобства и позволяет без каких-либо сложностей переключиться между двумя приложениями.

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

1. У кнопки Back соответствующее название, которое служит подсказкой.
2. На внутренних страницах приложения значится логотип приложения.

Как переназначить кнопки приложений на пультах Fire TV

Хотя пульты Android TV и Amazon Fire TV стали минимальными, также верно и то, что они теперь раздуты специальными кнопками для потоковых сервисов, таких как Netflix, HBO и других. Некоторым людям не нравятся эти кнопки, поэтому мы написали руководство о том, как переназначить пульт Android TV. В той же строке мы представляем вам это руководство, в котором мы объясняем, как переназначить кнопки приложений на пультах Fire TV. Так что, если вам интересно, можете переназначить кнопки пульта дистанционного управления Fire TV.

Переназначение кнопок приложений на пультах дистанционного управления Fire TV (2021 г.)

1. Прежде всего, загрузите APK-файл переназначения кнопок для определенных приложений. AFTV создал APK-файлы для Netflix, HBO, PS Vue и Hulu. Ты можешь кликните сюда и загрузите APK на основе кнопки на пульте дистанционного управления.

2. Теперь нажмите и удерживайте кнопку «Alexa» на пульте дистанционного управления и произнесите «Total Commander app». Вы попадете на страницу установки. Нажмите «Получить», чтобы установить его.

3. Затем нажмите и удерживайте кнопку «Alexa» и произнесите «отправить файлы в приложение TV». Нажмите «Получить», чтобы установить приложение.

4. Аналогичным образом установите приложение SFTV (Свободный, предлагает покупки в приложении) на вашем смартфоне.

5. Теперь откройте приложение SFTV на обоих ваших устройствах. На вашем смартфоне нажмите «Отправить» и выберите файл APK. Он будет немедленно отправлен на ваш Fire TV Stick. Помните, что для работы SFTV оба ваших устройства должны быть подключены к общей сети Wi-Fi.

6. После переноса APK откройте Total Commander и найдите APK. Например, я перенес APK переназначения кнопок Netflix, чтобы он был доступен в папке Download.

7. Теперь щелкните по нему и установите приложение.

8. На следующей странице вам нужно будет разрешить Total Commander «Установить неизвестные приложения».

9. Наконец, откройте его и выберите приложение, которое вы хотите открывать при нажатии кнопки Netflix. Вуаля, готово. С этого момента кнопка Netflix будет открывать пользовательское приложение, которое вы установили на пульте дистанционного управления Fire TV Stick. Вот как вы можете переназначить кнопки приложений на Fire TV Stick.

Измените кнопки Netflix, Hulu, HBO на пультах Fire TV

Так что это один из простых способов переназначить кнопки приложений на пультах Fire TV Remote. В отличие от переназначения кнопок Android TV, здесь вам нужно настроить кнопки индивидуально через их APK. К вашему сведению, я попытался загрузить приложение Button Remapper из Play Store на Fire TV Stick, но это не сработало. Во всяком случае, это все от нас. В случае, если вы потеряли свой пульт Fire TV, просмотрите наше руководство, чтобы найти умный взлом. А если у вас возникнут какие-либо проблемы, оставьте комментарий ниже и сообщите нам.

Поделиться ссылкой:

Дизайн к действию: лучшие практики для эффективных кнопок | Академия каркасного моделирования

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

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

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

Внешний вид

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

1. Сделайте кнопки похожими на кнопки

Пользователи знают, что такое кнопка и как она выглядит. Не проявляйте «креативность» и стилизуйте кнопку во что-то, что не кажется пользователям действенным. Кроме того, ссылки не являются кнопками (мы вернемся к этому чуть позже).

2. Визуально различать основные и второстепенные действия

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

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

3. Кнопки не ссылки

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

4. На экране не должно быть более одной кнопки основного действия одновременно.

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

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

Размещение

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

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

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

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

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

Формулировка

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

7. Слова должны быть простыми и по существу.

Быть лаконичными.

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

8. Избегайте общих команд, таких как

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

9. Используйте слова, относящиеся к задаче

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

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

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

11. Будьте ясны в отношении того, что будет дальше.

Вот пример запутанных слов, помещенных в кнопку. Я не часто пишу на Medium, поэтому я хотел проверить UX от начала статьи до ее публикации.Их кнопка с призывом к действию во время написания сообщения в блоге напугала меня! Я не уверен, что произойдет, когда я нажму «Готовы опубликовать?» 😰

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

Деструктивные действия

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

12. Если пользователь хочет выполнить критическую операцию, сконцентрируйте свое внимание на ней.

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

В Balsamiq удаление одного из ваших проектов — огромное дело. Мы заставляем пользователей сделать дополнительный шаг и написать слово УДАЛИТЬ, чтобы убедиться, что они действительно хотят удалить проект. Это дает пользователям дополнительное время, чтобы обдумать свои действия и избежать ошибок.

13. Разрешить пользователям восстанавливаться после несчастных случаев

Если вы не можете выполнить дополнительный шаг, заставив пользователя написать слово УДАЛИТЬ, добавление простой команды Отменить после удаления будет иметь большое значение, чтобы избежать расплаты за поспешную ошибку. .

Заключение

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

Дизайн пользовательского интерфейса будущего без кнопок

Что такое кнопки и действительно ли они нужны?

С момента появления графических пользовательских интерфейсов мы использовали кнопки. Учтите, что оригинальному графическому интерфейсу Xerox PARC уже 44 года, но наши пользовательские интерфейсы по-прежнему выглядят очень похоже. Недавно я проследил историю стилей кнопок, создав временную шкалу Dribbble. Хотя кнопки развивались синхронно с современными тенденциями и наряду с технологиями, их происхождение, несомненно, навеяно реальными объектами прошлого.

В правом нижнем углу — каталог Sears First Electric Buzzer 1897, осень.

Более десяти лет мы создаем устройства без физического интерфейса, которые не зависят от человеческого прикосновения, но могут быть активированы голосом или жестом. Почему мы упорно в создании форм, с которыми можно взаимодействовать, которые основаны на знакомые предметы, которые нас окружают? Форма цифровой кнопки по-прежнему основана на инструментах и ​​механизмах, разработанных нами в 19 веке!

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

Пора что-то с этим делать — пора думать без пуговиц.

Пользовательский интерфейс «без кнопок» — все взаимодействует

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

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

Microsoft HoloLens: HoloTour.

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

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

Читали ли вы о шрифтовом дизайне, где интерфейсы лишены каких-либо графических элементов, а единственное, что имеет значение, — это контент? Многие из вас спрашивали: «А как насчет кнопок?» Они нам больше не нужны — давайте полностью их устраним.

Вот парочка интересных идей:

Facebook просто спросил: «Какое у вас настроение?» Не нужно нажимать кнопку , чтобы ответить. Используйте свой голос. Просто скажите, что чувствуете себя прекрасно, и отправляйтесь на пляж. Затем перетащите текст, который Facebook распознает из вашего ответа, туда, где вы хотите, чтобы он появился.

Голосовой поиск.

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

Концепция без пуговиц Войцеха Доброго (… Не воспринимайте это слишком серьезно).

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

ASOS — Добавить в корзину анимацию Захари Чжао.

Думайте, содержание и весь экран

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

Давайте посмотрим, как это делает Instagram:

Instagram Story navigation.

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

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

Распознавание жестов

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

Вирджил Пана.

  .application-fill {fill: fb-yellow; }
.foreground-fill {заливка: fb-white; }
.background-fill {заливка: fb-черный; }
  

  #myButton #text {
  текстовый буфер: «КНОПКА»;
}
  

  импорт документа из «документа»;
const myButton = document.getElementById ("myButton");
myButton.text = "КНОПКА";
  

  импортировать документ из «документа»;
const myButton = document.getElementById ("myButton");

myButton.addEventListener ("клик", (evt) => {
  console.log («НАЖАТИЕ»);
})
  

 .приложение-заполнение {заполнение: fb-желтый; }
.foreground-fill {заливка: fb-white; }
.background-fill {заливка: fb-черный; }

#myButton #text {
  текстовый буфер: «КНОПКА»;
}
  

  .application-fill {fill: fb-mint; }
.foreground-fill {заливка: fb-white; }
.фон-заливка {заливка: fb-черный; }

# button-1 #text {
  текстовый буфер: "ПЕРВИЧНЫЙ";
}
# button-2 #text {
  текстовый буфер: «ВТОРИЧНЫЙ»;
}
  

  .application-fill {fill: fb-pink; }
.передний план-заливка {заливка: fb-белый; }
.background-fill {заливка: fb-черный; }

# button-1 #text {
  текстовый буфер: «ЛЕВЫЙ»;
}

# button-2 #text {
  текстовый буфер: "ПРАВО";
}
  

 .приложение-заполнение {заполнение: fb-зеленый; }
.foreground-fill {заливка: fb-white; }
.background-fill {заливка: fb-черный; }

# button-1 #text {
  текстовый буфер: «КНОПКА МНОГОЛИНЕЙНОГО ТЕКСТА»;
}
  

  .application-fill {fill: fb-blue; }
.foreground-fill {заливка: fb-white; }
.background-fill {заливка: fb-черный; }

# button-1 #text {
  текстовый буфер: «ЗНАЧОК КНОПКИ»;
}

# button-1 #image {
  href: "имя файла.png ";
}
  

  .application-fill {fill: fb-orange; }
.foreground-fill {заливка: fb-white; }
.background-fill {заливка: fb-черный; }

.plus-button #image {
  href: «filename.png»;
}

// Позиционирование для демонстрации:
# button-1 {
  х: 30;
  y: 30;
}

# button-2 {
  х: 180;
  y: 45;
}

# button-3 {
  х: 60;
  y: 200;
}

# button-4 {
  х: 200;
  y: 225;
}