UI будущего: никаких кнопок

Дизайн 4 235 просмотров 0
future-UI
Поделиться:

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

future-UI-1

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

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

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

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

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

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

future-ui-2

Microsoft HoloLens: HoloTour

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

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

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

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

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

future-ui-3

Search by voice Neel Raj

Нравится статья на Medium? Какое-то время назад вы могли просто «порекомендовать» — теперь мы «хлопаем». А что, если мы может действительно хлопать?

future-ui-4

Button-less concept by Wojciech Dobry

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

future-ui-5

ASOS — Add to cart animation by Zachary Zhao

Думайте о контенте и ВСЁМ экране

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

Посмотрим, как это работает в  Instagram:

future-UI-6

Instagram Story navigation

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

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

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

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

future-ui-7

Virgil Pana

future-ui-8

User interfaces by Ramotion & Jarek Berecki

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

future-ui-9

Gestures on HoloLens by Microsoft

future-ui-10

Clay VR Gesture Recognition On iPhone

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

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

future-ui-11

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

future-UI-12

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

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

future-ui-13

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

future-ui-14

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

future-ui-15

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

UI-дизайны будущего

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

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

future-ui-16

future-ui-17

Concept interfaces by Cosmin Capitan and Ramotion

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

Перевод статьи Войцеха Доброго

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

7 практических хитростей в дизайне

MIT предсказал 10 передовых технологий 2018 года

Подборка крутого UI контента за прошедшую неделю #7

<p style="text-align: center">Нашли ошибку?  Выделите текст и нажмите <em>Ctrl+Enter</em>.</p>
Поделиться:

Теги

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Яндекс.Метрика