Düğmesiz Geleceğin Kullanıcı Arayüzü Tasarımı

Yayınlanan: 2022-03-11

Düğmeler Nedir ve Onlara Gerçekten İhtiyacımız Var mı?

Grafik kullanıcı arayüzlerinin başlangıcından beri butonları kullanıyoruz. Xerox PARC'ın orijinal GUI'sinin 44 yaşında olduğunu düşünün, ancak kullanıcı arayüzlerimiz hala buna oldukça benziyor. Geçenlerde, Dribbble Zaman Çizelgesi'ni oluşturarak düğme stillerinin geçmişini takip ettim. Düğmeler, mevcut trendlerle senkronize olarak ve teknolojinin yanı sıra evrimleşmiş olsa da, kökenleri kuşkusuz geçmişin gerçek nesnelerinden esinlenmiştir.

Sears First Electric Buzzer 1897 Sonbahar Kataloğundan taranan görüntü
Sağ alt köşe – Sears First Electric Buzzer 1897 Sonbahar Kataloğu.

On yıldan fazla bir süredir, fiziksel arayüzü olmayan, insan dokunuşuna bağlı olmayan, ancak sesle veya hareketle etkinleştirilebilen cihazlar yaratıyoruz. Neden bizi çevreleyen tanıdık nesnelere dayanan etkileşim kurabileceğimiz şekiller yaratmaya devam ediyoruz? Dijital düğmenin şekli hala 19. yüzyılda geliştirdiğimiz araçlar ve mekanizmalar üzerine modellenmiştir!

Tamamen yeni, akıllı elektronik cihazlar yarattık - onları neredeyse istediğimiz herhangi bir şekilde idare edebiliyoruz, ancak tembellik veya alışkanlıktan dolayı, kullanıcılarımızı sadece birkaç piksel genişliğinde zor bir küçük alana tıklamaya zorlamaya devam ediyoruz.

Bu konuda bir şeyler yapmanın zamanı geldi - düğmesiz düşünmenin zamanı geldi.

"Düğmesiz" Kullanıcı Arayüzü - Her Şeyin Etkileşimde Bulunduğu Yer

“Düğmesiz bir ütopya”, 130 yılı aşkın bir süredir işlerin her zaman yapılma şeklini sürdürme girişiminin tamamen paramparça olduğu bir kavramdır. Gelecek şimdi - devam etmeli ve kendimizi öncekilerin modası geçmiş çözümlerinden vazgeçmeliyiz.

Düğmelerden tamamen arınmış bir arayüz hayal etmemiz mümkün mü? Öyle sezgisel bir şey ki, sadece ona bakarak nasıl davranacağını bileceksin? Artık sadece hayal gücümüzde olması gerekmiyor - bu arayüzler zaten var.

AR'de Microsoft HoloTour uygulaması
Microsoft HoloLens: HoloTour.

Bir kez ve herkes için saygı duyulan düğmeyi ortadan kaldırabilir miyiz? Mikrofonlar, kameralar, dokunmatik ekranlar, titreşim, ivmeölçerler, jiroskoplar, GPS, genişletilmiş gerçeklik, sanal gerçeklik - liste uzayıp gidiyor - ve bunların tümü akıllı telefonunuzdan veya PC'nizden halledilir. Kullanıcılarınızı bu küçük dikdörtgene basmaya zorlamaya devam etmek için artık hiçbir neden yok.

Kullanıcı Arayüzlerindeki Düğmeleri Ortadan Kaldıralım

Arayüzlerin herhangi bir grafik öğesinden yoksun olduğu ve önemli olan tek şeyin içerik olduğu Type Design'ı okudunuz mu? Birçoğunuz sordu: “Peki ya düğmeler?” Artık onlara ihtiyacımız yok - hadi onları tamamen ortadan kaldıralım.

İşte birkaç ilginç fikir:

Facebook az önce "Ruh haliniz nedir?" diye sordu. Cevap vermek için bir düğmeye basmanıza gerek yok - sesinizi kullanın - ona harika hissettiğinizi söyleyin ve sahile gidin. Ardından, Facebook'un yanıtınızdan tanıdığı metni görünmesini istediğiniz yere sürükleyin.

Ses arayüzünün animasyonu
Sesle arama yapın.

Medium'daki bir makale gibi mi? Medium'da bir süre önce, bir makaleyi basitçe "tavsiye edebilirsiniz". Bugün “alkışlar”a tıklıyoruz. Yani "alkış". Ya bu tuhaf küçük düğmeye tıklamaya gerek olmasaydı, kelimenin tam anlamıyla alkışlar mıydı?

Medium'da bir makaleyi alkışlayan adam
Wojciech Dobry'den düğmesiz konsept (…Onu fazla ciddiye almayın).

Peki ya daha karmaşık eylemler? Bir çevrimiçi mağazada ödeme yapmak gibi. Bir ürünü alışveriş sepetine sürükleyip bırakın, ödeme işlemine geçmek için kaydırın ve ardından parmak izinizle onaylayın. Tereyağından kıl çeker gibi.

kullanıcı arayüzü animasyonu
ASOS - Zachary Zhao tarafından sepete ekle animasyonu.

İçeriği ve Tüm Ekranı Düşünün

Bir eylemi gerçekleştirmek için şu anda dokunduğumuz yüzeylerle başlayalım. Günümüzün grafik kullanıcı arayüzlerinin büyük çoğunluğunun dokunmatik ekranlar olduğu düşünüldüğünde - genellikle başparmaklarımızla ele alınır - bu tür arayüzlerin uzun süre bizimle olacağı mantıklıdır. Ve kesinlikle dokunmak için karşı konulmaz bir dürtüye sahip olacağız - dokunma, her şeyden önce en önemli duygumuz. Yüzeye dokunmak bize gerçek bir eylem, kontrol duygusu verir. Kullanıcılarımıza belirli bir noktaya tıklamak yerine tüm yüzeyle etkileşim kurmayı öğretsek nasıl olur?

Bakalım Instagram bunu nasıl yapıyor:

Instagram Hikayesi navigasyonu
Instagram Hikaye navigasyonu.

Hiç bir Instagram Hikayesine göz atmanızı ve önceki Hikayeye dönmenizi sağlayan bir düğme gördünüz mü? Muhtemelen hayır, çünkü tek yapmanız gereken bunu gerçekleştirmek için ekranın sol kenarına dokunmak.

Kullanıcılar, dijital ürünlerimizle etkileşim kurmanın yeni yollarını beklemeye başladılar ve genellikle bir düğme içermiyor. Kartlar tüm yüzeylerinde duyarlıdır; herhangi bir kelimeye tıklayarak tanımını bulmayı umuyoruz; resimlere dokunarak biraz hareket bekliyoruz. Kullanıcılar, tüm alanların dokunmaya tepki verdiği gerçeğine zaten alışmış durumda.

Mimik tanıma

Hareketleri çok iyi anlarız çünkü onlar bizim için doğaldır ve fiziksel eylemlerimize yansır. Şu anda, hemen hemen her uygulama, gezinmeyi hızlandırmak için bunları kullanıyor; bir düğmeye basmak yerine bir fotoğrafa iki kez dokunabiliriz; galeriye göz atmak için kaydırabiliriz; veya herhangi bir içeriği yakınlaştırmak için sıkıştırın.

UI animasyonu dokunmatik ekranda kalp çiziyor
Virgil Pana.

kullanıcı arayüzükullanıcı arayüzü

Ramotion & Jarek Berecki'nin kullanıcı arayüzleri.


Hareketleri yalnızca düz dokunmatik ekranlarda yapmıyoruz, aynı zamanda tüm vücudumuzla gezinebileceğimiz AR ve VR alanlarında da hareketler yapıyoruz.

Artırılmış gerçeklikte jestleri kullanan adam
Microsoft tarafından HoloLens üzerinde hareketler.


IoT'yi kontrol etmek için jest tanıma kullanan adamIoT'yi kontrol etmek için jest tanıma kullanan adam

iPhone'da Kil VR Hareket Tanıma.

Ses Arayüzleri

Siri, Cortana, Alexa ve Google Asistan, hepsi çalışır durumda. Birçoğu, ses arayüzlerinin geleceği olduğunu iddia ediyor - potansiyel kullanımları sayıların ötesinde olduğu için aynı fikirde olmak zor. Tıpkı gerçek bir insanla konuştuğumuz gibi, sadece onlarla konuşarak araçları, akıllı binaları ve makineleri kontrol edebiliriz. Yapay zeka ve makine öğrenimi ile makineler artık dilimizi daha doğru bir şekilde anlayabiliyor. Artık dikkatli bir şekilde yazılmış “büyülü büyüleri” telaffuz etmekle sınırlı değiliz; tam cümlelerle konuşabiliriz.

tamam Google reklamı
Tamam Google…

Para transferleri dünyasında konuşmayı kullanarak özgürce hareket edebiliriz. Şu anda Siri, yalnızca bir hızlı istek kullanarak PayPal aracılığıyla başka bir kişiye para aktarmanıza olanak tanır: "Siri, PayPal'ı kullanarak XYZ'ye 200 ABD doları gönderin." Düğme yok—gereken tek onay ve güvenlik kontrolü Touch ID'dir.

Siri, iPhone'da PayPal transferi için kullanıldı

Fiziksel Eylemler, Bağlı Cihazlar ve Video Tanıma

Ödemek için gülümse? Burada! Alibaba ve KFC ortaklaşa, sadece kameraya gülümseyerek ödeme yapmanıza olanak tanıyan bir sistem başlattı - düğmeye basmak yok. Sistem yüz tanıma üzerinde çalışıyor ve şu anda Çin'de mevcut.

KFC ve Alibaba ödeme sistemine gülümsüyor

Bu, potansiyel kullanımlardan sadece bir tanesidir. Cihazlarımız zaten bir dizi sensörle donatılmıştır ve tüm vücudunuzu izleyebilir. Akıllı telefonunuzda herhangi bir işlem yapmak için tek parmağınızı kullanmanızı engelleyen hiçbir şey yok.

MacBook Pro'nun kilidini açmak için kullanılan iWatch

Düğmelerin ölümünü hızlandıracak bir başka fiziksel eylem örneği, cihaza yakın olmaktır. Örneğin, iWatch'a bakalım; dizüstü bilgisayarınızla eşleştirin ve MacBook'unuzun kilidini açmak için bekleyin. Giyilebilir cihazlar, kimliğimizi doğrulamak ve konum ve sensör verilerine dayalı olarak ihtiyaçlarımızı akıllıca tahmin etmek için kullanılabilir. Onlar sayesinde zaten birçok arayüzde buton kullanmaktan kurtulabiliyoruz.

Cihazı kontrol etmek için kullanılan jiroskopCihazı kontrol etmek için kullanılan jiroskop

Birkaç yıldır yaygın olarak kullanılan teknolojileri unutmayalım. Bunlardan biri jiroskoptur; hemen hemen her akıllı telefonda bulunur, ancak nadiren arayüzlerde kullanılır. Yukarıda Patryk Adas tarafından oluşturulan deneysel arayüzleri görebilirsiniz.

UI Tasarımları Geleceği

Kullanabileceğimiz pek çok farklı seçenekle, kullanıcıların etkileşim kurması için tipik dikdörtgen düğmeleri kullanmayı artık unutmak mümkün. Günümüz teknolojisiyle, aşağıdakileri yapabilen tamamen yeni arayüzler oluşturma yeteneğine sahibiz:

  • Kullanıcılara zaman kazandırın
  • Hataları, kaymaları ve hataları önleyin
  • Herhangi bir kazara eylemi telafi edin

kullanıcı arayüzü kavramlarıkullanıcı arayüzü kavramları

Cosmin Capitan ve Ramotion'dan konsept arayüzler.


Zamanı geldi - teknoloji bizi solluyor. Biz tasarımcılar bunun peşinden gitmeli… ve mutlaka yetişmeliyiz!