버튼이 없는 미래의 UI 디자인

게시 됨: 2022-03-11

버튼이란 무엇이며 실제로 필요한가?

그래픽 사용자 인터페이스가 등장한 이후로 우리는 버튼을 사용해 왔습니다. Xerox PARC의 원래 GUI는 44년이지만 사용자 인터페이스는 여전히 매우 유사합니다. 저는 최근에 Dribbble 타임라인을 만들어 버튼 스타일의 역사를 추적했습니다. 버튼은 현재의 트렌드와 기술과 함께 진화했지만, 그 기원은 의심할 여지 없이 과거의 실제 물건에서 영감을 받았습니다.

Sears First Electric Buzzer 1897 가을 카탈로그의 스캔 이미지
오른쪽 하단 모서리 – Sears First Electric Buzzer 1897 가을 카탈로그.

우리는 10년 이상 물리적 인터페이스가 없는 장치를 만들어 왔습니다. 이 장치는 사람의 터치에 의존하지 않고 음성이나 제스처로 활성화할 수 있습니다. 왜 우리는 우리를 둘러싸고 있는 친숙한 대상을 기반으로 상호 작용할 수 있는 모양을 만드는 데 계속해서 노력합니까? 디지털 버튼의 모양은 19세기에 우리가 개발한 도구와 메커니즘을 여전히 모델로 삼고 있습니다!

우리는 완전히 새로운 스마트 전자 장치를 만들었습니다. 우리는 우리가 선택하는 거의 모든 방식으로 이를 처리할 수 있지만 게으름이나 습관의 힘으로 인해 사용자가 너비가 몇 픽셀에 불과한 까다로운 작은 영역을 계속 클릭하도록 강요합니다.

이제 그것에 대해 조치를 취해야 할 때입니다. 이제 버튼이 없는 생각을 해야 할 때입니다.

"버튼이 없는" UI – 모든 것이 상호 작용하는 곳

"버튼이 없는 유토피아"는 130년 이상 지속되어온 방식을 고수하려는 시도가 완전히 산산조각이 나는 개념입니다. 미래는 바로 지금입니다. 우리는 전임자의 구식 솔루션에서 벗어나야 합니다.

버튼이 전혀 없는 인터페이스를 상상할 수 있습니까? 보기만 해도 어떻게 행동해야 할지 알 수 있을 정도로 직관적인 것? 더 이상 상상 속에만 있을 필요가 없습니다. 이러한 인터페이스는 이미 존재합니다.

AR의 Microsoft HoloTour 앱
마이크로소프트 홀로렌즈: 홀로투어.

존경받는 버튼을 한 번에 완전히 없앨 수 있습니까? 마이크, 카메라, 터치 스크린, 진동, 가속도계, 자이로, GPS, 확장 현실, 가상 현실(목록은 계속됩니다), 이 모든 것이 스마트폰이나 PC에서 처리됩니다. 더 이상 사용자가 작은 사각형 하나를 누르도록 계속할 이유가 없습니다.

UI에서 버튼을 없애자

인터페이스에 그래픽 요소가 없고 콘텐츠만 중요한 Type Design을 읽었습니까? 많은 사람들이 "버튼은 어떻습니까?"라고 물었습니다. 더 이상 필요하지 않습니다. 완전히 제거합시다.

다음은 몇 가지 흥미로운 아이디어입니다.

페이스북은 “기분은 어떠세요?”라고 물었다. 응답하기 위해 버튼을 누를 필요 없이 음성을 사용하여 기분이 좋다는 말을 하고 해변으로 가십시오. 그런 다음 Facebook이 응답에서 인식하는 텍스트를 원하는 위치로 드래그하십시오.

음성 인터페이스의 애니메이션
음성으로 검색합니다.

미디엄의 기사가 마음에 드시나요? 얼마 전 Medium에서는 기사를 "추천"할 수 있었습니다. 오늘 우리는 "박수"를 클릭합니다. 그래서 "박수" 이 이상한 작은 버튼을 클릭할 필요 없이 말 그대로 박수 를 쳐주면 어떨까요?

Medium의 기사에 박수를 치는 남자
Wojciech Dobry의 버튼 없는 개념(...너무 심각하게 받아들이지 마십시오).

좀 더 복잡한 작업은 어떻습니까? 온라인 상점에서 계산하는 것과 같은 것입니다. 항목을 장바구니에 끌어다 놓고 스와이프하여 결제를 진행한 후 지문으로 확인하세요. 쉬워요.

UI 애니메이션
ASOS - Zachary Zhao의 장바구니에 추가 애니메이션.

콘텐츠와 전체 화면을 생각하십시오

작업을 수행하기 위해 현재 터치하는 표면부터 시작하겠습니다. 현대의 그래픽 사용자 인터페이스의 대다수가 종종 엄지손가락으로 처리되는 터치 스크린 디스플레이라는 점을 감안할 때 그러한 인터페이스는 오랫동안 우리와 함께할 것입니다. 터치는 결국 우리의 가장 중요한 감각입니다. 표면을 만지는 것은 우리에게 실제 행동과 통제감을 줍니다. 특정 지점을 클릭하는 대신 사용자가 전체 표면 과 상호 작용하도록 가르쳤다면 어떻게 될까요?

Instagram이 수행하는 방법을 살펴보겠습니다.

인스타그램 스토리 탐색
인스타그램 스토리 탐색.

Instagram 스토리를 탐색하고 이전 스토리로 돌아갈 수 있는 버튼을 본 적이 있습니까? 아마도 그렇지 않을 것입니다. 왜냐하면 당신이 해야 할 일은 화면의 왼쪽 가장자리를 터치하는 것뿐이기 때문입니다.

사용자는 우리의 디지털 제품과 상호 작용하는 새로운 방법을 기대하게 되었으며 종종 버튼이 필요하지 않습니다. 카드는 모든 표면에서 반응합니다. 단어를 클릭하면 해당 정의를 찾을 수 있습니다. 사진을 만짐으로써 우리는 어떤 행동을 기대합니다. 사용자는 이미 전체 영역이 터치에 반응한다는 사실에 익숙합니다.

제스처 인식

제스처는 우리에게 자연스럽고 신체 행동에 반영되기 때문에 제스처를 매우 잘 이해합니다. 현재 거의 모든 애플리케이션에서 탐색 속도를 높이기 위해 이를 사용합니다. 버튼처럼 누르는 대신 사진을 두 번 탭할 수 있습니다. 스와이프하여 갤러리를 탐색할 수 있습니다. 콘텐츠를 확대/축소하려면 손가락을 모으십시오.

터치 스크린에 마음을 그리는 UI 애니메이션
버질 파나.

UI 인터페이스UI 인터페이스

Ramotion & Jarek Berecki의 사용자 인터페이스.


우리는 평면 터치스크린에서만 제스처를 취하는 것이 아니라 몸 전체로 탐색할 수 있는 AR 및 VR 공간에서도 제스처를 수행합니다.

증강 현실에서 제스처를 사용하는 남자
Microsoft의 HoloLens에 대한 제스처.


제스처 인식을 사용하여 IoT를 제어하는 ​​남자제스처 인식을 사용하여 IoT를 제어하는 ​​남자

iPhone의 클레이 VR 제스처 인식.

음성 인터페이스

Siri, Cortana, Alexa 및 Google Assistant가 모두 실행 중입니다. 많은 사람들이 음성 인터페이스가 미래라고 주장합니다. 음성 인터페이스의 잠재적 용도는 무궁무진하기 때문에 동의하기 어렵습니다. 실제 사람과 대화하는 것처럼 차량, 스마트 빌딩 및 기계와 대화하는 것만으로도 제어할 수 있습니다. 인공 지능과 기계 학습을 통해 기계는 이제 우리의 언어를 점점 더 정확하게 이해할 수 있습니다. 우리는 더 이상 주의 깊게 스크립트된 "마법의 주문"을 발음하는 데 국한되지 않습니다. 우리는 완전한 문장으로 말할 수 있습니다.

오케이 구글 광고
알았어, 구글…

말을 사용함으로써 우리는 송금의 세계를 자유롭게 움직일 수 있습니다. 현재 Siri를 사용하면 "Siri, PayPal을 사용하여 XYZ에 200달러를 보내주세요"라는 간단한 요청을 통해 PayPal을 통해 다른 사람에게 돈을 이체할 수 있습니다. 버튼 없음—Touch ID만 확인 및 보안 확인이 필요합니다.

iPhone에서 PayPal 송금에 사용되는 Siri

물리적 동작, 연결된 장치 및 비디오 인식

웃으면서 지불하시겠습니까? 여기있다! 알리바바와 KFC는 버튼을 누르지 않고 카메라를 바라보기만 하면 결제할 수 있는 시스템을 공동 출시했습니다. 이 시스템은 얼굴 인식에서 작동하며 현재 중국에서 사용할 수 있습니다.

KFC와 알리바바 미소 지불 시스템

이것은 잠재적인 용도 중 하나일 뿐입니다. 당사의 장치에는 이미 수많은 센서가 장착되어 있으며 전신을 모니터링할 수 있습니다. 스마트폰에서 한 손가락으로 작업을 수행하는 데 방해가 되는 것은 없습니다.

MacBook Pro를 잠금 해제하는 데 사용되는 iWatch

버튼의 소멸을 앞당기는 물리적 행동의 또 다른 예는 단순히 장치에 가까이 있는 것입니다. 예를 들어 iWatch를 살펴보겠습니다. 노트북과 페어링하고 MacBook의 잠금을 해제할 때까지 기다리기만 하면 됩니다. 웨어러블 기기는 우리의 신원을 확인하고 위치 및 센서 데이터를 기반으로 우리의 요구를 지능적으로 예측하는 데 사용할 수 있습니다. 덕분에 우리는 이미 많은 인터페이스에서 버튼 사용을 피할 수 있습니다.

장치를 제어하는 ​​데 사용되는 자이로스코프장치를 제어하는 ​​데 사용되는 자이로스코프

몇 년 동안 널리 사용되어 온 기술을 잊지 말자. 하나는 자이로스코프입니다. 거의 모든 스마트폰에서 사용할 수 있지만 인터페이스에서는 거의 사용되지 않습니다. 위에서 Patryk Adas가 만든 실험적인 인터페이스를 볼 수 있습니다.

UI 디자인 미래

다양한 옵션을 사용할 수 있으므로 이제 사용자가 상호 작용할 수 있는 일반적인 직사각형 버튼을 사용하는 것을 잊어버릴 수 있습니다. 오늘날의 기술을 통해 다음과 같은 완전히 새로운 인터페이스를 만들 수 있습니다.

  • 사용자 시간 절약
  • 오류, 미끄러짐 및 실수 방지
  • 우발적인 행동에 대한 보상

UI 개념UI 개념

Cosmin Capitan과 Ramotion의 컨셉 인터페이스.


기술이 우리를 따라잡을 때가 되었습니다. 우리 디자이너들은 반드시 그것을 추구해야 합니다... 그리고 반드시 따라잡아야 합니다!