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

Опубликовано: 2022-03-11

Что такое кнопки и нужны ли они нам?

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

Отсканированное изображение из осеннего каталога Sears First Electric Buzzer 1897 г.
В правом нижнем углу — осенний каталог Sears First Electric Buzzer 1897 года.

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

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

Пришло время что-то с этим сделать — пришло время думать без кнопок.

«Безкнопочный» пользовательский интерфейс — где все взаимодействует

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

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

Приложение Microsoft HoloTour в дополненной реальности
Microsoft HoloLens: HoloTour.

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

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

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

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

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

Анимация голосового интерфейса
Поиск по голосу.

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

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

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

Анимация пользовательского интерфейса
ASOS — анимация добавления в корзину от Zachary Zhao.

Думайте о контенте и о всем экране

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

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

Навигация по историям в Instagram
Навигация по истории Instagram.

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

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

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

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

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

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

Пользовательские интерфейсы от Ramotion & Jarek Berecki.


Мы делаем жесты не только на плоских сенсорных экранах — жесты выполняются и в AR- и VR-пространствах, где мы можем перемещаться всем телом.

Человек, использующий жесты в дополненной реальности
Жесты на HoloLens от Microsoft.


Человек, использующий распознавание жестов для управления IoTЧеловек, использующий распознавание жестов для управления IoT

Распознавание жестов Clay VR на iPhone.

Голосовые интерфейсы

Siri, Cortana, Alexa и Google Assistant работают. Многие утверждают, что будущее за голосовыми интерфейсами — с этим трудно не согласиться, так как их потенциальное использование неисчислимо. Мы можем управлять транспортными средствами, умными зданиями и машинами, просто разговаривая с ними — точно так же, как мы разговариваем с реальным человеком. Благодаря искусственному интеллекту и машинному обучению машины теперь могут все точнее понимать наш язык. Мы больше не ограничиваемся произношением тщательно продуманных «магических заклинаний»; мы можем говорить полными предложениями.

ок Google реклама
Хорошо, Гугл…

Используя речь, мы можем свободно перемещаться в мире денежных переводов. В настоящее время Siri позволяет перевести деньги через PayPal другому человеку, используя только один быстрый запрос: «Siri, отправьте 200 долларов на XYZ с помощью PayPal». Кнопок нет — требуется только подтверждение и проверка безопасности — Touch ID.

Siri используется для перевода PayPal на iPhone

Физические действия, подключенные устройства и распознавание видео

Улыбнуться, чтобы заплатить? Это здесь! Alibaba и KFC совместно запустили систему, которая позволяет вам платить, просто улыбаясь в камеру — не нажимая никаких кнопок. Система работает на распознавании лиц и теперь доступна в Китае.

KFC и Alibaba улыбаются платежной системе

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

iWatch используется для разблокировки MacBook Pro

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

Гироскоп, используемый для управления устройствомГироскоп, используемый для управления устройством

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

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

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

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

Концепции пользовательского интерфейсаКонцепции пользовательского интерфейса

Концептуальные интерфейсы от Cosmin Capitan и Ramotion.


Время пришло — технологии обгоняют нас. Мы, дизайнеры, ДОЛЖНЫ его добиваться… и обязательно догонять!