Design viitor UI fără butoane

Publicat: 2022-03-11

Ce sunt butoanele și avem cu adevărat nevoie de ele?

De la începuturile interfețelor grafice cu utilizatorul, am folosit butoane. Luați în considerare că GUI-ul original al Xerox PARC are 44 de ani, dar interfețele noastre cu utilizatorul încă arată remarcabil la fel. Am urmărit recent istoria stilurilor de butoane creând cronologia Dribbble. Deși butoanele au evoluat în sincronizare cu tendințele actuale și alături de tehnologie, originea lor este, fără îndoială, inspirată de obiecte reale din trecut.

Imagine scanată din catalogul de toamnă Sears First Electric Buzzer 1897
Colțul din dreapta jos – Catalogul de toamnă Sears First Electric Buzzer 1897.

De mai bine de un deceniu, creăm dispozitive fără interfață fizică – care nu depind de atingerea umană, dar pot fi activate prin voce sau gest. De ce persistăm în a crea forme cu care să interacționăm care se bazează pe obiectele familiare care ne înconjoară? Forma unui buton digital este încă modelată pe unelte și mecanisme pe care le-am dezvoltat în secolul al XIX-lea!

Am creat dispozitive electronice complet noi, inteligente – le putem gestiona aproape în orice mod alegem, dar din lene sau forță de obișnuință, continuăm să ne forțăm utilizatorii să facă clic pe o zonă mică și complicată de doar câțiva pixeli lățime.

Este timpul să faceți ceva în privința asta - este timpul să gândiți fără butoane.

Interfața de utilizare „fără butoane” – Unde interacționează totul

O „utopie fără butoane” este un concept în care orice încercare de a ține peste 130 de ani din modul în care lucrurile au fost întotdeauna făcute este complet spulberată. Viitorul este acum – trebuie să mergem mai departe și să ne renunțăm la soluțiile depășite ale predecesorilor noștri.

Este posibil să ne imaginăm o interfață complet lipsită de butoane? Ceva atât de intuitiv, încât doar privindu-l, vei ști cum să acționezi? Nu mai trebuie să fie doar în imaginația noastră – aceste interfețe există deja.

Aplicația Microsoft HoloTour în AR
Microsoft HoloLens: HoloTour.

Putem, odată pentru totdeauna, să eliminăm veneratul nasture? Microfoane, camere foto, ecrane tactile, vibrații, accelerometre, giroscopii, GPS, realitate extinsă, realitate virtuală — lista continuă — și toate acestea sunt gestionate de pe smartphone sau PC. Nu mai există niciun motiv pentru a continua să-ți forțezi utilizatorii să apese pe acel dreptunghi minuscul.

Să eliminăm butoanele din UI

Ați citit Type Design unde interfețele sunt lipsite de orice element grafic și unde singurul lucru care contează este conținutul? Mulți dintre voi au întrebat: „Ce zici de butoane?” Nu mai avem nevoie de ele – să le eliminăm complet.

Iată câteva idei interesante:

Facebook tocmai a întrebat: „Care este starea ta?” Nu este nevoie să apăsați un buton pentru a răspunde - folosiți-vă vocea - spuneți-i că vă simțiți grozav și mergeți spre plajă. Apoi trageți textul pe care Facebook îl recunoaște din răspunsul dvs. până unde doriți să apară.

Animație a interfeței vocale
Căutați după voce.

Vă place un articol pe Medium? Cu ceva timp în urmă pe Medium, ați putea pur și simplu „recomanda” un articol. Astăzi facem clic pe „claps”. Așa că „aplaudă”. Ce se întâmplă dacă nu ar fi fost nevoie să apeși pe acest buton ciudat, doar să aplaui literalmente ?

Bărbat care aplaudă la un articol pe Medium
Concept fără butoane de Wojciech Dobry (…Nu-l lua prea în serios).

Dar unele acțiuni mai complexe? Cum ar fi o casă într-un magazin online. Trageți și plasați un articol în coșul de cumpărături, glisați pentru a trece la finalizarea comenzii, apoi confirmați-l cu amprenta. Ușor de gălăgie.

Animație UI
ASOS - Adaugă în coș animație de Zachary Zhao.

Gândiți-vă la conținut și la întregul ecran

Să începem cu suprafețele pe care le atingem în prezent pentru a efectua o acțiune. Având în vedere că marea majoritate a interfețelor grafice moderne de utilizator sunt afișaje cu ecran tactil – adesea manipulate cu degetele noastre mari – este de înțeles că astfel de interfețe vor fi cu noi pentru o lungă perioadă de timp. Și cu siguranță vom avea acel impuls irezistibil de a atinge - atingerea este cea mai importantă senzație a noastră până la urmă. Atingerea suprafeței ne dă un sentiment de acțiune reală, de control. Cum ar fi că, în loc să facem clic pe un anumit punct, am învățat utilizatorii noștri să interacționeze cu întreaga suprafață ?

Să vedem cum face Instagram:

Navigare în poveștile Instagram
Navigare în poveștile Instagram.

Ați văzut vreodată un buton care vă permite să răsfoiți o poveste Instagram și să reveniți la povestea anterioară? Probabil că nu, pentru că tot ce trebuie să faceți este să atingeți marginea din stânga a ecranului pentru a face acest lucru.

Utilizatorii au ajuns să se aștepte la noi moduri de a interacționa cu produsele noastre digitale și adesea nu implică un buton. Cardurile sunt receptive pe toate suprafețele lor; făcând clic pe orice cuvânt, ne așteptăm să găsim definiția acestuia; prin atingerea imaginilor, ne așteptăm la ceva acțiune. Utilizatorii sunt deja obișnuiți cu faptul că zone întregi răspund la atingere.

Recunoașterea gesturilor

Înțelegem foarte bine gesturile pentru că sunt naturale pentru noi și reflectate în acțiunile noastre fizice. În prezent, aproape fiecare aplicație le folosește pentru a accelera navigarea; putem atinge de două ori o fotografie în loc să o apăsăm ca pe un buton; putem glisa pentru a naviga prin galerie; sau ciupiți pentru a mări orice conținut.

Animație UI desenând inima pe ecranul tactil
Virgil Pana.

interfață UIinterfață UI

Interfețele utilizator de către Ramotion și Jarek Berecki.


Facem gesturi nu numai pe ecrane tactile plate, ci și în spații AR și VR, unde putem naviga cu întregul nostru corp.

Bărbat folosind gesturi în realitate augmentată
Gesturi pe HoloLens de la Microsoft.


Bărbat care folosește recunoașterea gesturilor pentru a controla IoTBărbat care folosește recunoașterea gesturilor pentru a controla IoT

Clay VR Gesture Recognition pe iPhone.

Interfețe vocale

Siri, Cortana, Alexa și Asistentul Google sunt toate în funcțiune. Mulți susțin că interfețele vocale sunt viitorul - este greu să fiți de acord, deoarece utilizările lor potențiale sunt peste număr. Putem controla vehiculele, clădirile inteligente și mașinile pur și simplu vorbind cu ele, la fel cum vorbim cu o persoană reală. Cu inteligența artificială și învățarea automată, mașinile sunt acum capabile să înțeleagă limba noastră din ce în ce mai precis. Nu ne mai limităm să pronunțăm „vrăji magice” scrise cu atenție; putem vorbi în propoziții complete.

OK reclamă Google
OK, Google...

Folosind vorbirea, ne putem mișca liber în lumea transferurilor de bani. În prezent, Siri vă permite să transferați bani prin PayPal către o altă persoană folosind o singură cerere rapidă: „Siri, trimiteți 200 USD către XYZ folosind PayPal”. Fără butoane — singura confirmare și verificare de securitate necesară este Touch ID.

Siri folosit pentru transferul PayPal pe iPhone

Acțiuni fizice, dispozitive conectate și recunoaștere video

Zâmbește să plătești? E aici! Alibaba și KFC au lansat împreună un sistem care vă permite să plătiți pur și simplu zâmbind camerei - fără butoane de apăsat. Sistemul funcționează pe recunoașterea facială și este acum disponibil în China.

KFC și Alibaba zâmbesc pentru a plăti sistemul

Aceasta este doar una dintre posibilele utilizări. Dispozitivele noastre sunt deja echipate cu o mulțime de senzori și vă pot monitoriza întregul corp. Nimic nu vă împiedică să folosiți un deget pentru a efectua orice acțiune pe smartphone.

iWatch este folosit pentru a debloca MacBook Pro

Un alt exemplu de acțiune fizică care va grăbi dispariția butoanelor este pur și simplu să fii aproape de dispozitiv. Să ne uităm la iWatch, de exemplu, doar asociați-l cu laptopul și așteptați pentru a vă debloca MacBook-ul. Dispozitivele portabile pot fi folosite pentru a ne confirma identitatea, precum și pentru a ne prezice în mod inteligent nevoile pe baza locației și a datelor senzorilor. Datorită lor, putem evita deja folosirea butoanelor pe multe interfețe.

Giroscop folosit pentru a controla dispozitivulGiroscop folosit pentru a controla dispozitivul

Să nu uităm de tehnologiile care au fost disponibile pe scară largă de câțiva ani. Unul este giroscopul - disponibil în aproape orice smartphone, dar rar folosit în interfețe. Mai sus, puteți vedea interfețele experimentale create de Patryk Adas.

UI Designs Future

Având la dispoziție atât de multe opțiuni diferite, acum este posibil să uităm de utilizarea butoanelor dreptunghiulare tipice cu care utilizatorii pot interacționa. Cu tehnologia actuală, avem capacitatea de a crea interfețe complet noi care pot:

  • Economisiți timp utilizatorilor
  • Preveniți erorile, alunecările și greșelile
  • Compensați orice acțiuni accidentale

Concepte de UIConcepte de UI

Concept interfețe de Cosmin Capitan și Ramotion.


A sosit momentul — tehnologia ne depășește. Noi, designerii, TREBUIE să urmăm asta... și asigurați-vă că ne prindem din urmă!