Zaman içerisinde test edilecek bir şey varsa oda mobil cihazlarda başparmak yerleştirmesidir.

Yani “dikkatli başparmak bölgesi “, Steven Hoober araştırmasına, mobil ara yüzlerin tasarımı ve geliştirilmesinde önemli bir faktör olarak icat edilmiş özel bir terim.

Hiç bir mobil web sitesi veya uygulama ile etkileşim yaparken sadece başparmak ile oynamak güzel olurdu değil mi? Belki önemli bir menüye ulaşmak için gezmek zorunda kalmıştım veya birden fazla swiping elemanları ile bir savaşa dönüştüğünde hızlıca kaydırmayı. Bu gibi aksilikler başparmak bölgenin yoksun olmasından ortaya çıkmaktadır.

Bu makalede, başparmak bölgesi navigasyonu nasıl kullanılır, başparmak kartları ve kaydırma hareketleri ve kurallarını uygulamak konusunda elde ettiğimiz bilgileri paylaşacağız

En Öğrenme Bağlantı

Belirtildiği gibi, Steven Hoober araştırmış ve başparmak bölge hakkında yazdığı Tasarımı Mobil arabirimleri,  ilk geliştirirken başparmak fikrinin önemli olabileceğine dikkat çekti.

Hoober ile birlikte, Josh Clark insanlar kitabında Touch Tasarımı ile kendi cihazlarını nasıl tutması gerektiğini anlattı.

Hoober ve Clark’ın çalışmasını kullanarak, başparmağın cihazlarda nasıl kullanıldığını, tasarım öğelerinin yerinin nasıl değiştiğini wireframes kullanıcı testleri ile uygulandı.

Benim testlerimin dışında navigasyon üstünde elemanlar ve ekranın alt ya da farklı yerlerdeki düğmeleri ile kartları ve jest alanları ile ve başparmak bölgesi içinde yer aldı

Hangisinin katı kanıt sağladığını ve tasarım yapar iken ortaya çıkan test sonuçları, Hoober ve Clark’ın araştırma konusu. Aşağıda, bulduğumuz test tasarım öğeleri üzerindeki bulguları paylaşacağız.

Başparmak Vs. Dokunmatik ekran Bağlantı

Opposable olarak başparmak olması güzel değil mi? başparmak da bizim dokunmatik ekranlı cihazlar ile etkileşim nasıl olur. Hoober araştırma insanların % 49’unu ağır kaldırma yapmak için başparmak uygulamasına dayanarak, tek elle tutuşun akıllı bir yöntem olduğunu göstermektedir. Clark daha da ileri gitti ve bu etkileşimlerin % 75’inin başparmak odaklı olduğu saptamıştır.

Bu anlayışla, El yerleştirme,  başparmak hareketi için belli bölgeleri en akıllı  uygulamalar içiin geçerli olduğu sonucuna varabiliriz.

Sol ve sağ elini kullanarak Thumb-zone haritalama.

Sağ ve sol-elli kullanıcılar için başparmak bölge haritalama. “Kombine” bölge, çoğu kullanıcı için mümkün olan en iyi yerleşim alanlarını göstermektedir.

Hile başparmak bölgenin akışı için tasarlamaktır. Bu, daha iyi tasarım kararları insan dostu deneyimler yaratmak ve daha az baş ağrısı almak için bir çerçeve sunmaktadır. Kullanıcı test ve deneylerle, ben günlük gelişiminde bu bilgiyi kullanmak için birkaç yol keşfettim.

NAVIGASYON İLE İLGILI PROBLEMLERE BAĞLANTI

Hepimiz Sadece mobil navigasyon bir bağlantı İLE açılan liste bir zamanı hatırlıyorum. Fazla olmasa da bir hayli iş vardı. navigasyon desenlerinde bugün sayısız örnek görebilmek mümkün.

. Başparmak bölgesi için en uygun nedir?

Kullanıcının doğal hareketi dikkate alındığında ilk öğrendiğim şey  “benim app bağlantıları uzun bir liste var mı?” “Do I menüleri karıştırmak gerekiyor” “Benim web sitesi tasarımı ile iyi giden ne olacak.

Bu soruların cevaplarını bulmak için en başta belirlemenize yardımcı olur? .

Uygulamanızın bağlantıları için uzunca bir liste varsa, o zaman muhtemelen tam ekran paylaşımlı menüsünü. Bir defa kullanmak isteyeceksiniz. Menü, bu tür listesi, sosyal düğmeleri ve diğer yararlı içeriği düzenlemek için yer verir. Desen de masaüstü ve mobil cihazlar arasında terazi ve menü başparmak bölgesi içinde tıklanabilir Öğeleri hizalamak için bir fırsat sağlar.

her zaman mobil cihazlarda tam ekran paylaşımlı menüler büyük kullanım yapmıştır:

Dev tam ekran paylaşımlı menüsü

Kocaman bir tam ekran paylaşımlı menüsünü kullanır.

Kapak tarafında uygulamanızın bağlantıları uzun bir liste yoksa daha sonra bir yapışkan menü iyi olabilir. Menüsünün Bu tip ekranın üstüne veya altına bağlanır ve tasarımına bağlı olarak birçok bağlantılar için gayrimenkul sağlar.

Airbnb mobil uygulama önemli rezervasyon, mesajlaşma ve listeleme bilgilere kolay erişim sağlayan, ekranın alt bağlı bir yapışkan bir menü vardır:

Airbnb mobil uygulaması sabit altbilgi menüsü vardır.

Büyük bir web siteniz varsa, karıştırma menüleri işe yarayabilir. Karıştırma menüleri karmaşık bulabilirsiniz, çünkü app dönemlerine dayalı menü bağlantıları öncelikle yararlı olur. Tam ekran ve çekmece menüleri önemli değil yüksek öncelikli bağlantıları için ise yapışkan menüler, sık ziyaret edilen bağlantılar için mükemmeldir.

Düşünün Facebook’un mobil uygulamayı:

Sol ve sağ elini kullanıcıların Thumb bölge haritalama.

Facebook’un mobil uygulaması birden sabit menüler ve çekmeceleri birleştirir.

Facebook içlerinde içeriğin boyutuna göre menüler karıştırır. Yukarıdaki ekran görüntüsünde, iki yapışkan menüler, kullanıcı için her içeren değerli bağlantılar bakın. Üst yapışkan menü streç diliminde olduğu halde ancak doğal hissediyor. sayfada sadece yeterince düşük. Alt yapışkan menü öğeleri popüler bağlantılar rahat vurma sağlamak için düzenlenmektedir.

Kullanıcı veri toplayarak iyi tasarım, uygulama ve başparmak bölgesinden yararlanarak, Facebook yapışkan menüleri sahip olmaktadır. Eğer arkadaşınızın mesajları trolling ise bir dahaki sefere, trolling deneyiminin çok daha iyi olduğunu hatırlıyorum.

Dost bölgenin dışında bağlantıları, başparmak bölgesi içinde önemli navigasyon öğeleri tutmak yerleştirerek ek olarak zaman zaman kabul edilebilir olduğunu unutmayın. Genel kural kolay ulaşılabilecek bölgesinde sık sık kullanılan bağlantıları tutmak ve zor ulaşılabilecek bölgesinde sık kullanılmayan bağlantıları tutmaktır.

KARTLAR DOSTU TUTULMASI LINKI

Sonra, iyi tasarlanmış bir kart desen uygulaması için nasıl çalıştığını gözden geçiriyoruz. Kart deseni yaygın bir süre için şimdi kullanılmaktadır. Kartlar, hızlı, kolay ve öngörülebilir; onlar kolay ve doğru zamanda doğru içeriği sunmak için yapılmış, küçük dozlarda bilgi patlamaları sağlamaktadır.

Çoğu zaman, eylem çift kartlar ile kaydetmek, göndermek işlemleri yapılır

Eylemleri ile panço hava uygulaması kartı

Ponch: Uyandırma Hava Durumu kart deseni:

Bu örnekte gördüğümüz Uyandırma Hava Durumu: Panço uygulaması. Bu kart içinde eylem bağlantılarını yerleştirmek için büyük bir örnektir: hava raporu başparmak musluk gerektirmez, bu nedenle ulaşılmaz alanı içinde yol yerleştirilir. Eylem öğesi – bu durumda, bir pay düğmesi – Doğal bölgeye doğrudan yerleştirilir.

Diğer taraftan, Panço onun “konum arama” ve uzaklara zor ulaşılabilme bölgesi içinde bağlantılara “Geçerli konum kullanın” yerleştirir. Bu kabul edilebilir: app açık son kez bulunduğunuz yeri hatırlar çünkü bir kullanıcı, nadiren bu özellikleri kullanabilirsiniz.

Kapak tarafında, kart desenleri başparmak bölgesini kullanmak için zaman yoktur.

Bu bir örnektir Etsy mobil uygulama. Ödeme sırasında, Etsy kendi nakliye bilgilerini girmek için kullanıcı için bir pop-up kartında bir form sağlar:

Esty ödeme kusurları

Kart desen Etsy en ödeme kusurları.

İlk bakışta, bir kart kullanımı uygun ve tasarımı oldukça anlayışlı görünüyor. Derin bir kazma ile biz tüm kusurlarını görüyoruz. İlk sorun sol üst köşedeki “Cancel” bağlantısıdır. Bağlantı kartını kapatmak veya çıkış işlemini iptal etmek için (Kafam karıştı eğer, diğerleri kesinlikle çok olacaktır). Ayrıca, “x” ‘e ulaşmak için ve kullanıcı zorlamamak için, başparmak bölgenin kenarında yer almaktadır.

İşte bir ikilem var: bir kart bir üst köşesine yakın bir düğme ekleme ortak desen, ancak başparmak bölge başlığı aykırıdır. Bir kullanıcının beklentilerini karşılamak için başparmak bölgesinden çıkmayı istiyorsanız alternatif bir çözüm aramak gerekmektedir. Biz kartın altına bir kapatma düğmesi ekleyerek deneme yapılabilir.

Kart tasarımının tuhaflığından tutun da çoğu elemanları kolay erişilebilir ve kafa karıştırıcı olduğundan emin olmak için başparmak bölge haritası üzerinden tasarım çalıştırmak için iyi bir fikirdir. Trendleri takipten kaçının; Bunun yerine, uygulamanızın tasarımı ve gelişimi boyunca insan odaklı kararlar alın

HAREKETLERI VE HAREKET BAĞLANTI

Jest: musluk, çift dokunun, tokatlamak, sürükle, çimdik ve tuşuna basın. Bunlar akıllı telefon üzerinde kremalı kek vardır. Dokunma Hareketleri bizim duygumuz ile teknoloji sağlıyor.

Bunu nereye gittiğini tahmin etmek mümkün olabilir. Başparmak bölge içinde hareketlerini tutun. Daha da önemlisi, kullanıcı doğal hareketler yapmasına izin verin. Bu bariz görünüyor, ama gerçekten rahat bir deneyim sağlamak için jest gerçekleşmesi gereken yerleri doğru hesaplamak önemlidir.

En çok tokatlama etkileşimine odaklanalım. Tokatlamak Aracılığıyla komut dosyalarını izlediğimizde, gerçekten bazı ilginç hareket verileri bulundu.

Tokatlamak hareketleri Haritası

Kullanıcı test sırasında bulunan tokatlamak-jest veri görselleştirmesi

Yukarıdaki haritada, daire musluklar temsil eder ve oklar ucuz bira temsil etmektedir. Ben testlerden elde edilen verileri kullanıcıların genellikle çapraz aşağı, ortasına doğru cihazın kenarından yere kaydırıldığını göstermektedir. Kullanıcılar genellikle başparmak bölgenin doğal alanda tokatlamak bulundu.

Başlangıçta, tokatlamak hareketleri için başparmak alanlarını ölçerken sorun yaratmıştır. kullanıcılar yatay karşısında tokatlamak konusunda yanlış kanı vardı. Benim tasarım özellikleri aynı anda başka bir tokatlamak alanı tetikleme olmadan tokatlamak için yeterli yer vermedi. Çoğu cep tasarım öğeleri olduğu gibi, Kaydırma için gerekli başparmak alanı düşünün. Ben tokatlama alanlarının uygun bir boyutu en az 45 piksel yüksekliğinde ve genişliğinde olduğu tespit ettim.

Tüm bu bilgileri, biz de yanlışlıkla girişleri önlemek için yeterli yer verirken, kolay ulaşılabilecek yerlerde tokatlamak-jest eylemleri yerleştirmek için daha iyi olduğu sonucuna varabiliriz.

Tokatlamak jest büyük bir örnektir Google’ın Inbox uygulaması.

Google Gelen Kutusu tokatlamak alanları

Google Gelen Kutusu alan doğru miktarda, doğru yerde tokatlamak hareketlerini destekliyor.

Burada akıllı kararlar şunlardır:

Zor ulaşılabilecek alanları dışına tokatlamak hareketlerini tutmak;

Yeterli dokunarak alanı sağlamak;

Kaydırmalar her yerde, her e-posta blok elemanı başlamasını sağlamak.

Tüm bu, jest daha hızlı ve daha az karmaşık bir e-posta yönetimini yapmak, doğal ve rahat hissediyorum.

Bir kişinin başparmak cam perde önünde ucuz bira nasıl dikkate alındığında tokatlamak jest alanlarının belirlenmesi basit hale gelir.