Mobil Uygulama Tasarımında Mikroekstraksiyonları Anlamak

Kullanılabilirlik, anahtar bileşenlerinden biridir mobil UI tasarımı. Yüksek kullanılabilirlik genellikle içerir mikro etkileşimler hangileri arayüzden küçük tepkiler ve davranışlar Kullanıcı Arayüzünün nasıl kullanılması gerektiğini dikte etmek. Bu mikro etkileşimler davranışları tanımlar, etkileşimi teşvik eder ve kullanıcıların bir arayüzün nasıl çalışması gerektiğini görselleştirmelerine yardımcı olur.

Dijital arayüzler kullanıcılar ve istenen hedefleri arasındaki aracılardır. Arayüz tasarımcıları, kullanıcılara yardımcı olacak deneyimler yaratır belirli görevleri yerine getirmek. Örneğin, yapılacaklar listesi uygulaması, kullanıcıların görevlerini düzenlemelerine yardımcı olan bir arayüze sahiptir. Tıpkı bir Facebook uygulaması gibi, kullanıcılara Facebook hesaplarıyla etkileşim kurmaları için bir arayüz sağlar.

Bu rehberde daha ileriye gideceğim mobil uygulamalar için mikro etkileşimler. Küçük etkileşimler önemsiz görünebilir, ancak bir büyük etki Bir kullanıcının deneyiminin kalitesine Doğru yapıldığında, mikro etkileşimler, genel mobil kullanıcı deneyiminin orijinal bir parçası gibi hisseder.

Mikrointeraksiyonların Gücü

Çoğu durumda bir mikro-etkileşimin amacı; geribildirim sağlamak kullanıcının eylemine dayanarak. Bu kullanıcılara yardımcı olabilir Arayüzün nasıl hareket ettiğini veya davrandığını görselleştirin, tamamen düz bir ekranda dijital olmasına rağmen.

Mikrointegrasyonların gücü vardır çünkü onlar hayali bir deneyim yaratmak. Açma / kapama kaydırıcıları gerçekten fiziksel anahtarlar gibi hareket etmez, ancak animasyonlar arasında bu şekilde hareket ettiği görünebilir.

Bu yazıda, mobil uygulamalar için mikro bileşimlerin muazzam değerini tartışan inanılmaz bir teklif buldum:

“En iyi ürünler iki şeyi iyi yapıyor: özellikler ve detaylar. İnsanları ürününüze çeken özellikler şunlardır. Detaylar onları orada tutan şey. Ve detaylar aslında bizim uygulamamızı rakiplerimizden farklı kılan şeylerdir..”

küçük detaylar gelişim açısından önemsiz görünebilir, ancak kullanıcı deneyimi açısından gerçekten fark yarat Tamam uygulama arayüzü ile olağanüstü uygulama arayüzü arasında.

Mükemmel mikro etkileşimler kullanıcıyı yapar ödüllendirilmiş hissetmek harekete geçmek için. Bu işlemler olabilir tekrarlanan ve kullanıcının davranışına yerleşmiş. Bu küçük mikro-etkileşimlere dayanarak bir uygulamanın nasıl kullanılacağını öğrenebilirler. Kullanıcı bir davranış sergilediğinde, bu küçük etkileşimler "evet, benimle etkileşime geçebilirsin!"

Google’ın malzeme tasarım özelliklerinde bulunan örneklere bir göz atın. Belgeler aslında maddi harekete adanmış bütün bir bölüme sahip. Mekansal ilişkiler bu denklemin büyük bir parçası, ancak hareket, mekansal ilişkilerden daha fazlasını dikte edebilir.

Burada animasyon ve hareketin en yaygın kullanım alanları mobil UI / UX tasarımında:

• Kullanıcıları farklı sayfalar arasında yönlendirmek
• Kullanıcılara arayüz üzerinden bazı davranışları öğretmek için rehberlik etmek
• Herhangi bir sayfada gerçekleştirilebilecek eylem / davranış önermek

Mobil uygulamalar var çok daha az ekran alanı web sitelerinden daha. Bu, kullanıcılara bir uygulamayı nasıl kullanacaklarını öğretmede bazı zorluklara yol açabilir. Ancak mikrointegrasyonların nasıl düzgün bir şekilde uygulandığını biliyorsanız, şaşırtıcı derecede basit olabilir..

Mikro Etkileşim Nasıl Çalışır?

Kullanıcı bir arayüzün bir parçasını ne zaman devreye soksa, tek bir mikro entegrasyon patlar. Çoğu mikro etkileşimler kullanıcının jestine animasyonlu cevaplar. Böylece bir kaydırma hareketi bir dokunuştan veya bir vuruştan farklı bir şekilde yanıt verir.

Blink UX, mikro-etkileşimlerin küçük ayrıntılarını tartışan harika bir görev yaptı. Bu küçük animasyonlar bir öngörülebilir süreç kullanıcının öğrenebileceği uygulamadaki her etkileşim için.

Mikro etkileşimler, kullanıcıları bir arabirim aracılığıyla yönlendirir. davranışlara cevap vermek. Kullanıcı bir açma / kapama kaydırıcısının hareket edebileceğini bildiğinde, etkileşimli olduğunu bilir. Yanıtı temel alarak, bir ayarın açılıp açılmadığını da bilirler. Bir düğme göründüğünde kullanıcı tıklanabilir içgüdüsel olarak bilir onunla etkileşime girebilirler.

UXPin’e göre, her temel mikro etkileşimi dört aşamaya ayırabilir, ancak süreci özetledim. üç adım.

1. Aksiyon - kullanıcı bir şey yapar fiske vurma, kaydırma, dokunma ve basılı tutma veya başka bir etkileşim gibi.
2. Reaksiyon - arayüz yanıt verir ne olması gerektiğine göre. Bir ekranın kaydırılması tarayıcı geçmişinde geri hareket edebilir veya bir AÇMA / KAPATMA kaydırıcısına dokunmak bir ayarı kapatabilir.
3. geri bildirim - bu ne kullanıcı aslında görür etkileşimin sonucu olarak. Kullanıcı bir mobil tarayıcıda geri kaydırdığında, önceki sayfayı ekranın "üstünde" görünmek üzere yukarı çekebilir. Açma / kapama kaydırıcısı ekrana basınç uygulandığında düzgün kayabilir veya daha büyük büyüyebilir.

Bu çok küçük eylemler animasyon olmadan gerçekleştirilebilir, ancak harika mikro etkileşimler bir gerçekçi duygu çoğunlukla şeklinde olan düz dijital arabirime gerçekçi animasyon efektleri. Bunlar ara yüzü canlandırır ve daha fazla kullanıcı etkileşimini teşvik eder.

Ayrıntıları Arayın

Bir tasarımın daha küçük parçalarına bakarak, bir uygulamanın belirli bir davranışa nasıl yanıt vermesi gerektiğini anlayacaksınız.

Tazelemek için çek popüler bir mikro-etkileşime iyi bir örnektir. İlk başladığında iOS'un ayrılmaz bir parçası değildi, ancak birçok uygulama bu fikri kullandı ve onunla birlikte çalışmaya başladı. Şimdi yenilemek için çekin, çoğu kullanıcının yalnızca bir yayın kullanıcı arayüzüne göz atarken kullanabileceği bilinen bir davranış biçimidir. Aynı popülerlik çılgınca büyüdü mobil hamburger menüleri hakkında söylenebilir.

Her mikro etkileşimi yapın gerçekçi ve basit. Canlandırmaları aşırıya kaçmayın çünkü onlar sıkıcı olmak çok detaylı ise ve sık sık kullanıldıysa. Kullanıcı, bir menü simgesine her dokunduğunda pırıltıların görünmesini istemiyor. Bir denge grev iletişim kuran gerçek değer arayüz nasıl çalışması gerekir denize düşmeden.

Bazı Örneklere Bakmak

Bence bir şeyi öğrenmenin en iyi yolu bunu yapmaktır ve ikinci en iyi yol başkalarının çalışmalarını çalışmaktır. Küçük bir avuç topladım UI / UX mikro etkileşimi animasyonları yetenekli Dribbble kullanıcılarından size bunların gerçek bir makette nasıl göründüğünü göstermek için.

Her uygulama farklı olacaktır ve uygulamanın ne yaptığına bağlı olarak farklı ihtiyaçlara sahip olacaktır. Sonunda çoğu kullanıcı aynı şeyi ister: sezgisel ve kaliteli bir kullanıcı deneyimi sunar kullanıcı davranışlarına göre mikro etkileşimler ile.

1. Hareketli Etkinlik Uygulama Arayüzü

İlk örnek Ivan Martynenko tarafından oluşturulan şık bir kart animasyon özelliğidir. Farkedeceksin bir avuç mikrointelasyon Bu tasarımda, özellikle kart kaydırma ve ayrıntılar arasında gezinme.

Karta dokunduğunuzda boyut büyür. Abone Ol düğmesine dokunduğunuzda, kullanıcının profil fotoğrafı abone listesine kayar. Her şey sezgisel ve arayüz için oldukça doğal hissediyor.

2. İnteraktif Egzersiz Ekranı

Bu yaratıcı mobil egzersiz animasyonu tasarımcı Vitaly Rubtsov'dan geliyor. Bir kullanıcının egzersizlerini bir grup ağız kavgası için kaydetmesini sağlar.

Her animasyonun aynı olduğuna dikkat edin elastik sıçrama etkisi menüler açıldığında ve kapatıldığında. Bu, etkinlik "Tamamlandı" olarak işaretlendiğinde de geçerlidir.. Tutarlılık Mikro etkileşimler için anahtardır çünkü hepsinin hissetmesi gerekir aynı arayüze bağlı.

3. Arama App Microinteractions

Kısa, tatlı ve anlamlı. Bunun en iyi Lukas Horak tarafından tasarlanan bu arama uygulaması mikro etkileşimlerini tanımladığını düşünüyorum. Her animasyon Çabuk ama yine de dikkat çeken.

Bu şekilde mikro etkileşimleri tasarlamanız gerekir. aşırı karmaşıklığı önlemek. Arabirim, animasyon olmadan daha hızlı yüklenirse neden ekleme zahmetine giriyor?? Hızlı animasyonlar Kullanıcı deneyimini boğmadan aşağı ilerlemeye devam et.

4. Zindelik Amaç Microinteraction

Bence Jakub Antalà ??  ?? Ã'Â-k gerçekten fitness hedefi mikro-etkileşimi ile parkın dışına çıktı. Ekranların hepsi bu jiggly jell-o hissi var çünkü şekiller çok akıcı hareket eder.

Yine de arayüz de hissediyor sağlam ve kullanışlı. Bir amaç için hazırlanmış mikro etkileşimlerin hala eğlenceli ve eğlenceli olabileceğini ama aynı zamanda işlevsel ve pragmatik olabileceğini göstermektedir..

5. Canlandırmayı Yenile

İşte Ramotion ekibinin yarattığı en sevdiğim ve yenileştirmeye başla animasyonlarımdan biri. Bu sadece bir sıvı taklit eder çekme eylemiyle birlikte, ancak yanıt animasyonu sorunsuz bağlanır bir sıvı sıçramasından yükleme çemberine.

Bu detaylara çok dikkat mobil uygulama mikro etkileşimlerinde gerçek güzelliği ortaya çıkaran şey.

6. Sekme Mikrointeraksiyon

Sekmeli widget'lar Küçük ekranlar nedeniyle mobil uygulamalar için oldukça yaygındır. John Noussis'in yarattığı bu mikro-etkileşimi çok seviyorum, ancak daha hızlı bir şekilde daha etkili olacağını düşünüyorum, ancak animasyonun kendisi görkemli ve iyi düşünülmüş.

Sekmeli bağlantı oku, yeni içerik sağdan sekerken sağa doğru kayar. Bu yanılsama verir tüm ekran fiziksel olarak hareket ediyor sağa. Animasyon mükemmel, ama çok yavaş olduğu için çoğu kullanıcının birkaç gün sonra rahatsız olacağını düşünüyorum..

7. Animasyonun Ön Yüklenmesi

Hakkında fazla bir şey söylemedim yükleme çubukları Bu yazıda, ancak genel deneyim için aynı derecede değerli. Çoğu kullanıcı verinin yüklenmesini beklemek istemez, ancak yüklenirken kesinlikle boş bir ekrana bakmak istemezler.

Bret Kurtz, hem eğlenceli hem de bilgilendirici olan bu şaşırtıcı önyükleme ekranını yaptı. Kullanıcı aslında olabilir ağırladı Bu küçük animasyonu tekrar izliyorum. Onlar da olabilir güvence bu uygulama hala verilerini yüklüyor ve çökmedi.

Kaydırma

Bu örneklerin tümü zekice olarak mikro etkileşimlerin değerini göstermektedir. Mobil uygulamalar mikro entegrasyonlardan çok daha fazla değer alır, çünkü kullanıcılar ekranlara fiziksel olarak dokunma parmaklarıyla. Kullanıcılar masaüstü monitörlerine veya dizüstü bilgisayar ekranlarına dokunmaz, ancak herkes akıllı telefonlarına dokunur; varsayılan etkileşim durumu.

Bu bir çok daha fazla kişisel deneyim, bu yüzden mobil uygulama tasarımı böyle olabilir farklı süreç. Doğru yapıldığında, büyük mobil mikro etkileşimlerinin eklenmesi bir güçlü yanıltıcı kullanıcı deneyimi piksel ve hareketten başka bir şey yok.