UI Tasarımı için Hareketleri Anlama

Dokunma, kaydırma, sürükleme, uzun basma – bunlar dijital deneyimlerimize hakim olan hareketlerden sadece birkaçı. Dokunmatik ekranlı iPhone'lar, mobil hareketleri yıllar önce yaygınlaştırdı ve o zamandan beri geriye bakmadık.

Hareketler, telefonlar, dizüstü bilgisayarlar ve iPad'ler de dahil olmak üzere arayüzlerle nasıl etkileşim kurduğumuzu etkiler. Ancak iş ve eğlence cihazlarımızın ötesinde bir jestsel arayüz bulmak için çok uzağa bakmamıza gerek yok. Araba ekranları veya banyo lavabolarıyla etkileşime girerken jestleri kullanmak artık alışılmadık bir durum değil.

Doğal Kullanıcı Arayüzleri (NUI'ler) kullanıcılar için o kadar doğaldır ki, arayüz dokunmatik ekran arayüzü gibi hissettirir ve bazen görünmezdir. Bazı NUI'ler, kullanıcıların doğrudan fiziksel temas olmadan arayüzle etkileşime girmesine izin veren hareket kontrolünü bile kullanır. BMW kısa süre önce kullanıcılara araba ses seviyesi, çağrılar ve daha fazlası üzerinde temassız kontrol sağlayan bir hareketle kontrol özelliği yayınladı.

Hareketler, kullanıcı arayüzü tasarımında daha yaygın hale geliyor ve günlük hayatımızda giderek daha karmaşık roller oynuyor.

Teknoloji ilerledikçe, UX ve UI tasarımcılarının ve işletmelerinin uyum sağlaması gerekecek. Tüm teknolojik incelikleri bilmek veya bilgisayar zekası hakkında derinlemesine bilgi sahibi olmak zorunda değilsiniz. Yine de, jest teknolojisi için yetenekler, işlevler ve en iyi tasarım uygulamaları hakkında temel bir anlayışa sahip olmalısınız.

İyi Bir Jest Yapan Nedir?

Peki jestler nedir?

Hareketler iletişim kurmanın bir yoludur. Anlamı iletmeye yardımcı olmak için uzun zamandır el ve baş sallamaları kullandık ve şimdi jestler kullanıcı arayüzleriyle iletişimde rol oynuyor.

İyi jestler, düşünme şeklimizle uyumlu, etkili ve verimli iletişim sağlar. Düşüncelerimiz ve bilgimiz nasıl konuştuğumuzu etkiler ve özellikle UI tasarımında jest kullanımımızı etkiler. Modern teknolojinin etrafında büyüyen genç nesiller için jestleri algılamanın ne kadar kolay olduğunu veya kaydırma eyleminin bir şeyi itme veya silmeyi nasıl taklit ettiğini düşünün. Bu nedenle, jest tasarımında bile kullanıcılarınızı anlamak çok önemlidir.

Hareketler, fiziksel ve dijital alemler arasındaki engeli aşarak, dijital medya ile bedenlerimizle etkileşime girmemizi sağlar. Bazı yönlerden dijital uygulamaları kullanmayı daha eğlenceli hale getiriyor, ancak bu bir jesti iyi yapmak için yeterli değil.

İyi bir hareket hareketi, uygulamaların tüm bağlamlarda kullanımını kolaylaştırarak kullanılabilirliği artırır. İyi tasarlanmış hareketler daha kısa bir öğrenme eğrisine sahiptir çünkü doğal hissettirirler ve kolayca kavranırlar. Bill Gates'den alıntı yapmak için:

“Şimdiye kadar, her zaman teknolojinin sınırlarına uyum sağlamak ve bilgisayarlarla çalışma şeklimizi bir dizi keyfi gelenek ve prosedüre uydurmak zorundaydık. NUI ile bilgi işlem cihazları ilk kez ihtiyaçlarımıza ve tercihlerimize uyum sağlayacak ve insanlar teknolojiyi bizim için en rahat ve doğal olan şekilde kullanmaya başlayacak.”

Hareket Teknolojisinin Faydaları

Hareketli arayüzlerin geniş kullanımı, onlarla birlikte gelen birçok faydadan kaynaklanmaktadır. Hareketlerin en önemli avantajlarından üçü daha temiz arayüzler, kullanım kolaylığı ve gelişmiş görev tamamlamadır.

1. Daha Temiz Arayüzler

İnsanlar her zamankinden daha fazla içerik tüketiyor, işletmeler daha fazla veri kullanıyor ve teknoloji daha fazla hizmet sunmaya devam ediyor. İçerikteki bu artışla, arayüzlerin ve ekranların dağınık görünmesi kolaydır. Tasarımcılar, yer kaplayan düğmeler gibi görsel öğelerin sayısını azaltmak için hareketleri kullanabilir.

2. Kullanım Kolaylığı

Yukarıda tartışıldığı gibi, etkileşimler, jest tabanlı bir arayüzle daha doğal hale gelir. Basit el hareketlerinin kolaylığı, teknolojiyi minimum çabayla maksimum hızda kullanmamızı sağlar.

3. Geliştirilmiş Görev Tamamlama

Kullanıcının bir görevi tamamlamak için yapması gereken daha az şey olduğunda, görev tamamlama oranları ve dönüşüm oranları artar. Daha az çaba gerektiren bir görevi bitirme olasılığınız daha yüksektir. Harekete dayalı bir kullanıcı arayüzü, görevleri basit ve hızlı hale getirerek bundan yararlanır. Bir görevi tamamlamak için atılan adımların sayısını bile azaltabilirler.

UI Tasarımında Hareket Türleri

Dokunma için tasarım, en yaygın olanları dokunma ve kaydırma olan birçok hareket türünün geliştirilmesine yol açmıştır. Üç jest kategorisi vardır:

1. Navigasyon hareketleri (gezinmek için)
2. Eylem hareketleri (harekete geçmek için)
3. Hareketleri dönüştürme (içeriği değiştirmek için)

Aşağıdakiler, bilinçli olarak olmasa bile, tüm (veya neredeyse tüm) kullanıcıların aşina olduğu, arayüzler arasında en yaygın hareketlerden bazılarıdır. Ekranlardan bahsediyoruz, ancak ekranı dokunmatik yüzey veya başka herhangi bir hareket arayüzü ile değiştirebilirsiniz.

Musluk

Dokunma hareketi, bir uygulama veya sayfa gibi bir şeyi açmak veya seçmek için tek parmağınızla ekrana dokunmanızdır. İşte bir ipucu: Tıklanabilir arabirim öğeleri tasarlayın, böylece yalnızca metin değil, kutunun veya satırın tamamı tıklanabilir. Kullanıcılara daha fazla alan vermek, kullanılabilirliği artırır.

Çift Dokunma

Çift dokunma, ekrana arka arkaya iki kez arka arkaya dokunmanızdır. Birçok uygulama bu hareketi yakınlaştırmak için kullanır, ancak Instagram'da kullanıcılar bir fotoğrafı beğenmek için iki kez dokunabilir.

Tokatlamak

Kaydırma, parmağınızı ekranda bir yönde hareket ettirmeyi, bir taraftan aşağı dokunmayı ve diğer taraftan parmağınızı kaldırmayı içerir. Kaydırma hareketleri genellikle sayfalar arasında gezinmek veya geçiş yapmak için kullanılır. Tinder, bir profille eşleştirmek için sağa kaydırmayı ve birini geçmek için sola kaydırmayı kullanır.

Çoklu Parmak Kaydırma

Ayrıca iki veya üç parmakla kaydırma hareketi de yapabilirsiniz. Bu, farklı eylemler için iki ve üç parmakla kaydırma kullanan dizüstü bilgisayar dokunmatik yüzeylerinde yaygın bir özelliktir.

Sürüklemek

Sürükleme, kaydırma ile aynı genel hareketi kullanır, yalnızca parmağınızı daha yavaş hareket ettirirsiniz ve nesneyi olmasını istediğiniz yere çekene kadar kaldırmayın. Örneğin, telefon uygulamalarınızı yeniden düzenlerken olduğu gibi, bir öğeyi yeni bir konuma taşımak için sürüklemeyi kullanırsınız.

kaçmak

Kaydırma gibi, bir kaçma hareketi, parmağınızı ekranda yüksek hızda hareket ettirdiğinizde gerçekleşir. Sürüklemeden farklı olarak, parmağınız bir öğeyle temas halinde kalmaz. Flings genellikle bir şeyi görünümden kaldırmak için kullanılır.

Uzun basma

Uzun basış, ekrana dokunduğunuzda ancak parmağınızı normalden daha uzun süre basılı tuttuğunuzda gerçekleşir. Uzun basışlar, kopyalamak için metni basılı tuttuğunuzda veya silmek için bir uygulamayı basılı tuttuğunuzda olduğu gibi menü seçeneklerini açar.

Tutam

Birçok iki parmak hareketinden biri olan kıstırma, ekranda iki parmağınızı birbirinden ayırıp kıstırma hareketiyle birbirine doğru sürüklemenizdir. Kıstırma hareketleri genellikle yakınlaştırmadan sonra uzaklaştırmak için kullanılır. Bazen gezinme amacıyla tüm açık ekranlarınızın bir görünümünü sunarlar.

Kıstırarak Aç veya Yay

Kıstırma-açma veya yayma hareketi, bir tutamın tersidir. İki parmağınızı birbirine yakın tutun ve sonra birbirinden ayırın. Yayma, çift dokunma gibi, genellikle yakınlaştırmak için kullanılır.

döndürme

Döndürmek için ekrana iki parmağınızla basın ve dairesel hareketlerle döndürün. Döndürmenin en iyi örneği, etrafınızda ne olduğunu görmek için haritayı Google Haritalar'da çevirmenizdir.

Hareketleri Tasarlamak 101

İnsanların Bildiklerini Kullanın

Hareketler bir süredir var, bu nedenle çoğu hareket için genel kurallar var.

Ve çoğu durumda, bir arayüz için hareketler tasarlarken takip etmek isteyeceğiniz kurallar vardır. Örneğin, bir uygulama oluştururken, kullanıcıların uygulamanızı hangi arayüzlerde kullanacağını düşünmeniz gerekir. Kullanıcıların uygulamanızı, her ikisi de ürüne özel hareketler kullanan Android ve Apple telefonlarına indirme olasılığı vardır. Ürününüzün arayüzlerinin hareketlerini değerlendirmeniz ve bunlardan nasıl yararlanacağınıza veya kullanıcıların aşina olmadığı hareketleri eklemeye değip değmeyeceğine karar vermeniz gerekecek.

İşte popüler ürün arayüzleri için bazı kullanışlı hareket ve hareket yönergeleri.

• Google Hareket Yönergeleri
• Microsoft Hareket Yönergeleri
• Apple Hareket Yönergeleri
• Android Hareket Yönergeleri

Harekete dayalı kullanıcı arayüzleri tasarlarken, kullanıcıların bildiklerine bağlı kalmak iyi bir uygulamadır. Gerektiğinde yaratıcı olabilirsiniz, ancak hareketler ve arayüzler arasındaki tutarlılık düzeyi, kullanıcıların sezgisel olmasını sağlayarak ürününüzün kullanılabilirliğini artırır.

Mağazada yeni bir hareket olduğunu düşünüyorsanız, uygulamadan önce kapsamlı bir şekilde test etmeniz gerekir. Kullanılabilirliği, etkililiği, öğrenme eğrilerini ve kullanıcı memnuniyetini bir jest ile test etmek için bir dizi kullanıcı araştırma yöntemi yürütecek ve bunu herkese açık hale getireceksiniz.

Bilinen bir hareketi farklı bir amaç için yeniden kullanma seçeneğiniz var, ancak yine, bu stratejinin etkinliğini önceden test etmelisiniz. Buradaki fayda, kullanıcıların en azından harekete aşina olmalarıdır.

Örneğin, Instagram'ın bir gönderiyi beğenmek veya bir gönderiyi "kalplemek" için çift dokunmayı kullanmasını ele alalım. Yakınlaştırmak için genellikle çift dokunma kullanılır, ancak Instagram'ın amacı için iyi çalışır. Aynı zamanda verimlilik konusunda da harika bir çalışma: Bir gönderinin altındaki kalbe dokunmak, bir kez daha az, ancak daha fazla nişan almayı gerektirir. Alternatif çift dokunma yöntemi, hedeflenecek tüm görüntüye sahip oldukları için kullanıcıların daha hızlı kaydırmalarına olanak tanır ve beğendiğiniz nesneye dokunmak sezgiseldir.

Tasarımcılar, jest niyetini ürün geliştiricilere ve stratejistlere iletmek için eller, daireler ve oklardan oluşan bir tasarım dili geliştirmeye başladılar. Bu dil, minimum sapma ile neredeyse evrenseldir.

Ekranın Dışında Düşünün

Hareketler, telefon ve dizüstü bilgisayar kullanımı dışındaki günlük senaryolarda bulunur. Giderek artan sayıda umumi tuvalet, harekete duyarlı lavabolar, hava kurutucuları ve kağıt havlu dispenseri kurdu. Bu cihazlar aynı zamanda mikropların yayılmasını da önler - grip mevsiminde çok hoş bir özellik. Bu arada, kendi kendini süren arabalar, etkinliklerini ve güvenliklerini artırmak için jest tanıma teknolojisiyle zorunlu kılınıyor.

Ancak ekranın dışında düşünürken telefon hareketleriyle yine de yaratıcı olabilirsiniz. Cihazlar, yıllardır etkileşim yöntemleri olarak döndürme ve sallama kullanıyor. Örneğin, Apple'ın "Geri Almak İçin Salla" özelliği, kullanıcılara telefonlarını sallayarak bir işlemi geri alma seçeneği sunar. Ve şimdiye kadar, muhtemelen bir videoyu tam ekranda izlemek için ekranları yatay olarak döndürmeye alışmışsınızdır.

Yaratıcı jest teknolojileri, önce test edildikleri sürece ürünleri daha ileriye götürebilir ve kullanılabilirliği artırabilir.

Hareketler ve Erişilebilirlik

Hareketler, her şey gibi erişilebilir olmalıdır. Erişilebilirlik, bir ürünü engelliler de dahil olmak üzere tüm bağlamlarda tüm insanlar için erişilebilir ve kullanılabilir hale getirmek anlamına gelir. Hareketler, eşit bir çevreye katkıda bulunmak için erişilebilir tasarım en iyi uygulamalarına bağlı kalmalı, Engelli Amerikalılar Yasası'na (ADA) uymalı ve ürününüzden yararlanabilecek herkesin onu kullanmasına izin vermelidir.

Arayüz hareketlerinin erişilebilir olduğundan emin olmanın dışında, erişilebilirliği iyileştirmek için hareketleri nasıl kullanabileceğinizi düşünmeye değer. Apple, iPhone'un düz, dokusuz ekranlarının görme engelli kullanıcılar için bir engel oluşturduğunu fark etti. Bu nedenle, görme engellilerin ürünlerini kullanmasına yardımcı olan ek erişilebilirlik tabanlı hareketler oluşturmak için hareket tabanlı arayüzlerini kullandılar.

UX'i Unutma

UX ve UI terimlerini birbirinin yerine kullanmak yaygındır, ancak bu yanlış bir uygulamadır. UX, kullanıcı deneyimi anlamına gelir ve bir ürünle etkileşime girerken kullanıcının algıları ve duygularıyla ilgilenir. UI, kullanıcı arayüzü anlamına gelir ve bir kullanıcının etkileşimde bulunduğu bir ürünün öğelerini içerir. UI, UX tasarımının önemli bir unsurudur. Her biri ve farklılıkları hakkında daha fazla bilgi edinmek istiyorsanız, UX ve UI Design hakkındaki kılavuzumuza göz atın.

Buradaki nokta, UX ve UI'nin farklı olduğudur, ancak arayüzleri tasarlarken kullanıcı deneyimini dikkate almak çok önemlidir. Eğlenceli ama yararsız veya ilginç olan ancak kullanılabilirliği zayıf olan UI hareketleri, UX'i unutan tasarımcıların ve geliştiricilerin bir sonucudur.

Ne kadar test yapmış olursanız olun, kullanıcılara belirli hareket özelliklerini kaldırma seçeneği sunun. Dokunma, herkesin aşina olduğu hayati bir dokunmatik ekran hareketidir, ancak bazı hareketler bir ürünün çalışması için çok önemli değildir ve yalnızca onu daha kullanışlı hale getirmek için vardır. Bazen, bu gibi hareketler, onlara aşina olmayan veya istemeden hareketi tetikleyen kullanıcıları rahatsız eder.

Örneğin, bir Mac'te, dokunmatik yüzeyde iki parmağınızı sola veya sağa kaydırmak, bir web tarayıcısını bir sayfayı geri veya ileri gönderir. Birçok kullanıcı bu hareketi yanlışlıkla yapar ve sayfa değişmeye devam ettiğinde hayal kırıklığına uğrar. Böylece Apple, kullanıcılara bu özelliği ve diğer birçok özelliği devre dışı bırakma seçeneği sunar.

Kullanıcı Katılımını İyileştirin

Kullanıcı katılımı, kullanıcılara ürünün nasıl kullanılacağını öğreterek ürünün başarılı kullanımını geliştirir. İlk kez açıldığında, onu kullanmak için tüm işlevler veya adımlar boyunca size rehberlik eden yeni bir program düşünün.

Kullanıcının katılımı, dokunma hareketleri için önemlidir, çünkü bunlar genellikle gizlidir ve özellikle bir kullanıcı bir harekete aşina değilse veya bu bağlamda onunla deneyimi yoksa, gözden kaçırılması kolaydır. Kullanabileceklerini veya nasıl kullanacaklarını bilmiyorlarsa, kullanmayacaklar.

Bir kullanıcıyı işe alırken, kısa olmak, her seferinde bir şey öğretmek ve testte en iyi sonucu verdiği kanıtlanmış öğrenme eğrisini takip etmek istersiniz. Uzun öğreticiler ve adım adım listeler sıkıcıdır, daha az etkileşimlidir ve genellikle atlanır.

Hareket Arayüzlerinin Geleceğini Kucaklayın

Hareketler zaten burada. Şimdiki zamanda var olurlar ve kendilerini günlük hayatımızda faydalı kılarlar. Kullanıcılar için, bu hareketler, hiç düşünmeden hızlıca kaydırıp çift tıkladıkça bilinçaltında yaşayabilir. Ürün tasarımcıları, geliştiriciler ve stratejistler, hareketleri daha samimi bir düzeyde anlamalıdır.

Dokunma için tasarım, alanın büyüyen bir parçasıdır. Banyolarda ve arabalarda hareketler var - sırada ne olduğunu kim bilebilir? Kucakla. Daha kullanışlı bir ürün, etkili bir üründür.

Sorularınız mı var veya ürünlerinizin UX ve UI'sini yükseltmek mi istiyorsunuz? Konuştuğumuz için mutluyuz. Sadece ulaşın.