Mobil Tasarımlarda Ergonomi: Baş Parmağı Bölgesi

Mobil Tasarımlarda Ergonomi: Baş Parmağı Bölgesi


Eğer bilişim teknolojilerinde zaman testinden geçecek bir şey varsa, o da mobil cihazların üzerindeki baş parmak atamasıdır. Bahsedilen atama, mobil arayüz tasarımlarında önemli bir faktör olan başparmak bölgesini işaret etmektedir. 

Hiç başparmağınızla etkileşime girerken rahatsızlık yaşadığınız bir web sitesi ya da uygulamaya denk geldiniz mi? Bu durum, başınıza gelmiş olması muhtemel şeyler arasındadır. Önemli bir menüye girmek için parmağı iyice uzatmak zorunda kalmak ya da birden çok sağa sola kaydırmalı öge arasında kaybolmak gibi ölümcül kullanıcı etkileşimi hataları olabilir. Bu gibi örnekler, başparmak bölgesinin üzerinde yeteri kadar durulmadığını gösteren yanlışlardır.

Bu yazımızda, edindiğimiz deneyimler ışığında, başparmak bölgesinin navigasyon, kartlar ve kaydırma hareketleri gibi arayüz tasarımının en önemli ögeleri açısından nasıl tanımlanması gerektiğinden bahsedeceğiz.

Steven Hoober’dan öğreneceğimiz çok şey var.

Yazının başında kendisinden bahsettiğimiz Bay Hoober, başparmak bölgesine Designing in Mobile Interfaces adlı kitabında değinmiş. Uygulama geliştirirken başparmağın çok büyük bir önem arz ettiğine de bu sayede vakıf olduk. 

Hoober’la birlikte, Josh Clark da insanların cihazlarını nasıl tuttuklarına dair derin araştırmalarını Designing for Touch adlı kitabında derlemiş. Şuralara bi’ bakınabilirsiniz. 

Hoober ve Clark’ın, başparmağın cihazlarla olan etkileşimi üzerine yaptıkları araştırmaları kullanarak tasarım ögelerinin wireframe’ler üzerindeki yerleri hakkında kullanıcı testleri gerçekleştirdik. Navigasyon ögelerini ekranın en üst ve en altına yerleştirdik; düğmeli kartları farklı yerlerde denedik ve kaydırmalı ögeleri başparmak bölgesinin içinde ve dışında kullandık.  

Yaptığımız testler, Hoober ve Clark’ın araştırmalarını doğrularken, tasarımda neyin işe yarayıp neyin yaramadığını da bize göstermiş oldu. Aşağıda, test ettiğimiz tasarım ögelerini ve bundan çıkan sonuçları sizlerle paylaşıyoruz. 

Başparmaklar Dokunmatik Ekranlara Karşı

Efendim, “opposable thumb” da denilen, diğer parmakların karşısına gelecek biçimde bükülebilen başparmakların, evrimin bizlere vermiş olduğu en büyük hediyelerden biri olduğunu biliyorsunuz herhalde. Onlar sayesinde denizanalarından çok daha ekol varlıklar olabildik; dokunmatik ekranlarla çok daha rahat etkileşime geçiyoruz. Hoober’ın araştırmasına göre insanların %49’u akıllı telefonlarını tek elle kullanma eğilimi gösteriyorlar ve bu şekilde büyük yükü çeken de başparmaklar oluyor. Clark ise bu araştırmayı daha da ileri götürerek başparmağın, toplam etkileşimin %75’ini tek başına üstlendiğini bulmuş.

 Akıllı telefonlarımızı tutuşumuza ve onlarla etkileşime geçişimize dair yapılan bu araştırmalar sonrasında, ortalama bir ekran üzerinde başparmağın nasıl ve nerelerde hareket ettiğine dair çıkarımlar yapmak mümkündür. Biz bu bölgeleri, ulaşılması kolay, zor ulaşılan ve ikisinin arasında olacak şekilde üçe ayıralım.

sağ el sol el birlikte

Sağak ve solak kullanıcılar için başparmak kartografyası. Birlikte bölümü ise her iki tür kullanıcı için en iyi yerleştirmeyi gösteriyor.

 Burada olay, başparmağın hareket edişine uygun bir tasarım yapmak. Bu sayede daha iyi tasarım kararları alıp insan dostu deneyimler yaratarak baş ağrılarını en aza indirebilirsiniz. Günlük tasarım kararlarında kullanacak bu bilgileri kullanıcı testleri ve deneylerden edinebilirsiniz.

Navigasyonla İlgili Sorunlar

Mobil navigasyonun, drop down listede yer alan linklerden ibaret olduğu zamanları hatırlayanlarınız vardır. Pek hoş olmasa da iş görüyordu. Şimdiyse sonsuz navigasyon şablonlarıyla karşı karşıyayız. Ama hangisinin başparmaklarımız için en iyisi olduğunu nerden bileceğiz?

 Dikkat etmemiz gereken ilk nokta, kullanıcıların doğal eğilimleri olacaktır. Şöyle sorular sorabilirsiniz: 

 “Uygulamamdaki link listesi çok mu uzun?”

“Menüleri karıştırsam mı?”

“Web sitesi tasarımımla ne iyi gider?” 

 Bu soruların cevapları navigasyonel tetikçileri ve kancaları daha iyi yerleştirmeniz için size yardımcı olacaktır. 

Eğer uygulamanızda linklerin listesi uzunsa, bu sefer büyük ihtimalle bütün ekranı kaplayan bir overlay menü kullanmanız mantıklı olacaktır. Bu menü tipi size listenizi organize etmek, sosyal medya butonlarını yerleştirmek ve diğer mühim içeriği konumlandırmak için gerekli alanı sağlayacaktır. Bu şablon, masaüstü ve mobil cihazlarda iyi bir şekilde ölçeklenecektir. Ayrıca menü, başparmağınızla kolayca seçebileceğiniz ögeler tasarlamanıza da yardımcı olacaktır.

Aşağıda, Huge’un tam ekranlı overlay menülere örnek olabilecek menü listesini görmektesiniz.

huge uygulaması

Huge, tam ekranlı bir overlay menü kullanır.

Diğer taraftan linkler, uygulamanızda uzun bir liste oluşturmuyorsa, çakılı bir menü en iyi tercih olacaktır. Bu tarz menüler ekranın altında ya da üstünde sabitlenir ve tasarıma bağlı olarak birçok linke ev sahipliği yapar. 

 Airbnb’nin mobil uygulamasında bu tarz çakılı bir menü kullanılmaktadır. Aşağıda sabit olarak yer alan seçenekler, bazı önemli linklere kolay erişim sağlamaktadır.

 

airbnb mobile application

Airbnb’nin mobil uygulaması çakılı bir footer’a sahiptir.

Eğer bu iki örnektekinden daha büyük bir web sitesine sahipseniz karıştırılmış menüler işinize yarabilir. Çünkü menüleri karıştırmak işi karmaşıklaştırsa da, menüleri uygulama içinde önem bazında sıralamaya çalıştığınızda işe yarayan bir yönteme dönüşür. Örneğin çakılı menüler daha sık tıklanacak linklerden oluşabiliyorken tam ekranlı ya da yandan fırlayan menüler ise yine önemli olan ama yüksek öncelikli olmayan linklerle bezenebiliyor.

Burada Facebook’un mobil uygulamasını ele alalım:

facebook mobile application

Facebook’un uygulaması birden çok sabit menü ve link çekmecelerini barındırır.

Facebook, menülerini barındırdıkları içeriğe uygun şekilde karıştırmıştır. Yukarıdaki görselde iki adet çakılı menü görüyoruz; ikisi de kullanıcı için önemli linklerden oluşmakta. Üstteki çakılı menü, parmağınızın uzanması gereken bir bölgede ama yine de bu menü için doğal görünen bir konumlandırma yapılmış. Altta yer alan çakılı menüdeki maddeler ise kolayca tap’leyebileceğiniz popüler linklerle döşenmiştir.

Kullanıcı deneyimini ön planda tutması, iyi tasarım için mücadele vermesi ve başparmak bölgesini önemsenmesiyle Facebook’un çakılı menülerde mükemmele yakın bir iş çıkardığını söyleyebiliriz. Uygulamayı bir sonraki kullanışınızda yaşadığınız deneyimi gözlemleyin, bize hak vereceksiniz.

 Unutmayın, navigasyon maddelerini başparmağın uzanabileceği bölgelerde konumlandırmak çok önemli olsa da zor ulaşılan yerlere linkler koymak da zaman zaman kabul edilebilir bir tercihtir. Önemli olan, sık kullanılan linkleri kabul edilebilir mesafede tutmak ve gerekli linkleri zor erişilen bölgelere nadiren atamak, hepsi bu.

Dostane kartlar tasarlamak

Şimdi sırada, uygulamanızdaki kart şablonlarını nasıl kullanıcı dostu bir şekilde tasarlayacağımız ve konumlandıracağımıza değinelim. Kartlar, günümüzde yaygın şekilde kullanılan ögeler olarak göze çarpmakta. Hızlı, kolay ve tahmin edilebilir şekilde az miktarda veri aktarımı yaparken doğru içeriği de doğru zamanda sunmamıza yarıyorlar.

 Genellikle gönder, kaydet, tamamla ve kapat gibi action’lar için kullanılıyorlar.

poncho hava durumu uygulaması

Poncho: Wake Up Weather’ın kart şablonu

Bu noktada Poncho: Wake Up Weather uygulamasını inceleyelim. Bize action imkanlı linkleri bir kartta sunan bu örnekte hava durumu, bir başparmak tap’ine gerek duymuyor; bu yüzden de ulaşılamayacak bir bölgede konumlandırılmış. Action burada paylaş olarak seçilmiş ve doğal bölgede başparmağınızı bekliyor.

Diğer tarafta Poncho lokasyon arama ve var olduğun lokasyonu kullanma linklerini en zor ulaşılan bölümde konumlandırmış. Bu da kabul edilebilir bir tercih; çünkü uygulama, kullanıcı tarafından yapılan ayarları bir kez kaydedecek ve kullanıcı bir daha bu linklere uğramak zorunda kalmayacaktır.

Bazen de kullandığımız kartlar başparmak bölgesine hizmet edecek şekilde tasarlanmamış olabilir. Buna verilebilecek en iyi örneklerden biri Etsy’nin mobil uygulamasıdır. Siparişi tamamlama esnasında karşımıza çıkan bu kartta gönderim bilgilerinizi girmeniz istenir.

etsy mobile app mobil uygulama

Etsy’nin checkout kartındaki hatalar

İlk bakışta bu tarz bir kart kullanmak uygun ve tasarım açısından tutarlı gözüküyor. Derine indiğimizde hataları görüyoruz. İlki, sol üst köşedeki “cancel” linki. Bu link kartı mı kapatıyor yoksa checkout sürecine mi etki ediyor? Biz şüpheye düştüysek herkes düşecektir. Ayrıca “x” de başparmak bölgesinin dışında ve o noktaya uzanmak için efor gerekiyor.

İşte karşımızda güzelim bir açmaz duruyor. Kartın üst köşelerinden birine kapatma düğmesi koyarak şablonlara uygun hareket ederiz. Ama başparmak bölgesine de ihanet etmiş oluruz. Eğer kullanıcınızın beklentilerini karşılamak için başparmak bölgesinden çıkacaksanız alternatiflerinizi gözden geçirin. Belki de düğmeyi aşağıya koymalıyız. Ya da kartlar özet niteliğinde içerik gösterdikleri için belki de kartın içeriğini ve dolayısıyla boyunu kısaltmayı deneyebiliriz.

Bu kart modası geçtiğinde, her ögenin kolayca erişilebilmesi için tasarımları düzenlemek en doğrusu olacak. Siz de trendlere kapılmak yerine insani faydaya dayalı kararlar verin ve uygulamanızı buna göre hazırlayın.

Hareketler ve Devinim

Gesture’lardan bahsedelim: iki kere tap’leme, kaydırma, çekme, bastırma ve çimdikleme gibi örnekler tanıdık geldi mi? Bu gesture’lar, bir akıllı telefonun akla ilk gelen özellikleri arasında. Gesture’lar sayesinde parmaklarımızı kullanarak teknolojiyle iç içe geçebiliyoruz. Ne kadar da önemliler.

Tahmin ettiniz değil mi? Evet, gesture’lar da başparmak bölgesinden uzak olmamalılar. Daha da önemlisi, kullanıcı bunları yaparken abidik gubidik hareketlere girişmesin, her şey doğal olsun. Kullanıcıyı maymun etmeyin yani. Çok kolay bir kural gibi gözüküyor ama gerçekten konforlu bir deneyim yaratmak için gesture’ın tam olarak nerede konumlanması gerektiğine karar vermeniz gerekiyor.

Gelin birlikte bir kaydırma etkileşiminden bahsedelim. Kullanıcı eğilimleri hakkında yaptığımız araştırma bize çok ilginç bilgiler kazandırdı.

kaydırma hareketleri gesture


Kullanıcı testleri sonucunda ortaya çıkan kaydırma gesture’ı verileri.

Yukarıdaki haritada yer alan daireler tap’leri, oklar da kaydırmaları simgeliyor. Testler sonucunda kullanıcıların genellikle ekranı bir ucundan ortasına kadar kaydırdıklarını görüyoruz. Ayrıca bu işlemin de başparmak bölgesi içinde gerçekleştiğini söyleyebiliriz.

Eskiden, kullanıcıların yatay yönde kaydırdıklarına dair yanlış bir yargımız bulunuyordu. Bu da kaydırma gesture’larını tasarlarken başparmak bölgelerini atamada bize sorunlar yaratıyordu. Tasarım özelliklerini göz önüne aldığımızda başka bir kaydırma gesture alanını harekete geçirmeden yeni bir kaydırma gesture’ı alanı bulmak çok zordu. Sık rastlanan tasarım ögelerini düşündüğümüzde, kaydırma hareketini yapabilmek için 45 piksel büyüklüğünde kare bir alana ihtiyacımız olduğu ortaya çıktı. 

Tüm bu bilgiler sonucunda, gesture’ları kolay ulaşılabilir bölgelere yerleştirmeyi ve yanlışlıkla başka etkileşimleri harekete geçirmemeye dikkat etmemiz gerektiğini öğrendik. 

Kaydırma gesture’ının mükemmele yakın bir kullanımına örnek olarak Google’ın Inbox uygulamasına bir göz atalım:

google inbox mail client

Google Inbox, doğru yerde ve doğru bölgede kaydırma gesture’ları kullanmaktadır.

Google Inbox, doğru yerde ve doğru bölgede kaydırma gesture’ları kullanmaktadır.

Bu örnekteki doğru kararlar şunlardır:

  • Kaydırma gesture’larını zor ulaşılabilen bölgelerden uzağa yerleştirmek
  • Yeterli tap alanı sağlamak
  • Her e-posta şeridinde kaydırmayı etkin kılmak

Bütün bu şartlar sağlandığında, kaydırma doğal ve konforlu bir hale gelecek; böylece bizler de e-postalarımızın yönetimini hızlı ve daha az karmaşık şekilde yapabileceğiz. Aynen devam Google!

Özet olarak

Neler öğrendik? Umarız başparmak bölgesinin önemini daha iyi kavramanıza yardımcı olmuşuzdur. Şunları aklınızdan çıkarmayın:

  • Mobil cihazlar ve onların dilleri değişecek ama ortada dokunmatik ekranlar olduğu sürece başparmak bölgesi her zaman dikkat etmeniz gereken bir konu olacaktır.
  • Eğer linkleri doğru yerlere koyarsanız navigasyonel tasarım da başparmak dostu olabilir. Yeşil ve kırmızı bölgeler yani.
  • Eğer içerik ve hareketler başparmak bölgesiyle uyumluysa kartlar çok güçlü birer tasarım değeridir.
  • Bir parmağın, cam ekran üzerindeki hareketlerini düşünerek ilerlediğimizde kaydırma gesture’ının yerleşimi gibi kararları daha sağlıklı şekilde verebiliriz.

 

7
like
0
love
0
haha
0
wow
0
sad
0
angry

+ Henüz yorum yapılmamış

Yorum yap