Bu uygulama ayrıntıları sizi yakaladı, henüz bulmadınız mı? İlham verici sabah okuması
İyi ürünler, belki çok şey görmüşsünüzdür. Ancak pek çok insan iyi ürünlerin arkasındaki keşif ve düşünceyi bilmiyor.
Bir mobil uygulamanın başarısı, en önemlisi kullanıcı deneyimi olan bir dizi faktöre bağlıdır. Piyasadaki daha başarılı uygulamaların kullanıcı deneyimi çok iyi. Mobil istemci kullanıcı deneyiminin tasarımı söz konusu olduğunda, en iyi uygulamaları takip etmek güvenlidir, ancak genel tasarım oluşturma ortamı açısından, iyi hissettiren bazı gereksiz tasarım öğelerinden vazgeçmek zahmetsiz görünmektedir.
Ancak tasarım açısından, Kullanıcı deneyimini iyi hissettirmek ile kullanıcı deneyimini şaşırtıcı kılmak arasındaki fark, küçük unsurlar (küçük detaylar) tasarımının titizliğinde yatmaktadır. Bu makaleyi okuduktan sonra nedenini anlayacaksınız Bu küçük unsurlar Aynı zamanda büyük bir bilgelik içerir, neden diğer temel tasarım öğeleri kadar önemlidir. Ek olarak, bu küçük öğelerin mobil uygulamanızın başarılı olmasına nasıl yardımcı olabileceğini de anlayacaksınız.
Başlangıç sayfası
Bir kullanıcı bir uygulamayı açtığında, kimse bekleyerek vakit geçirmek istemez. Ancak ilk başlatma aşaması çok zaman alıyorsa, Olmaz Optimize edersek ne yapmalıyız? Bu Sadece olabilir Kullanıcı beklesin. Kullanıcıların beklemesini gerçekten istiyorsanız, bulmalısınız. Onları çekin Yöntemler. Başlangıç sayfasının tasarımı bu sorunu çözebilir ve bu basit ve önemli unsur aracılığıyla kullanıcıları başarılı bir şekilde çekebilir.
Resim kaynağı: mobil desenler
Aşağıda, bir başlangıç sayfası tasarlamak için bazı ipuçları verilmiştir:
1) Daha hızlı yükleme süresi ve dikkat dağıtıcı unsurlar oluşturun Hem Google hem de Apple, bir etkinleştirme sayfasının kullanılmasını önerir. Daha hızlı yükleme süreleri oluşturun , Böylece kullanıcı deneyimini iyileştirir. Başlatma sayfası, kullanıcılara uygulamanın açık ve yüklenme durumunda olduğunu söyleyen doğrudan geri bildirim sağlayabilir. Kullanıcıların beklerken sıkılmamalarını sağlamak için, bazılarını da eklemeleri gerekir. Dikkat dağıtıcı öğe : Örneğin, uygulamayı yüklemek için yeterli zaman sağlamak üzere olabildiğince uzun süre kullanıcının dikkatini çekebilecek komik öğeler, beklenmedik öğeler veya herhangi bir öğe.
Resim kaynağı: Cuberto
2) İlerleme çubuğunu ayarlayın Uygulamanızın on saniyeden uzun bir başlangıç aşaması varsa, yükleme işlemini görüntülemek için bir ilerleme çubuğu kullanmayı düşünebilirsiniz. Bir şey hiç yoktan iyidir. Bir ilerleme çubuğuyla beklemek, sonsuza kadar beklemekten uzun olmayacaktır. Bu nedenle, kullanıcılara ne kadar beklemeleri gerektiğini açıkça bildirmelisiniz.
İlerleme çubuğu, yükleme sürecini daha entegre ve doğal hale getirir. Resim kaynağı: de martin
Boş durum (boş sayfa)
Normalde, kullanıcılar tarafından sevilen arayüz tasarımı, düzgün bir şekilde düzenlenmiş arayüz öğelerine sahiptir ve daha rahat görünür. Kullanıcı tarafından daha fazla işlem gerektiren arayüze gelince, nasıl tasarlanmalı? Buradaki en önemli şey Boş durum . Boş halin tasarımı çok önemlidir.Boş hal sadece geçici bir aşama olsa da, aynı zamanda Uygulamanın vazgeçilmez bir parçası Ve ayrıca kullanıcılar için çok kullanışlı .
Boş durumun tasarımı sadece arayüzün daha iyi görünmesini sağlamak değildir. Kullanıcının yaklaşan arayüz içeriğini tahmin etmenin yanı sıra, boş durum bir Giriş yapmak Yol (uygulamayı tanıtmak ve kullanıcıların yapmasına yardımcı olabilecekleri göstermek), aynı zamanda kullanıcının yardımcı (Özellikle arayüzde bir hata mesajı göründüğünde). Her iki durumda da, arayüzün artık boş bir durumda kalmaması için kullanıcıların mümkün olan en kısa sürede eylemler gerçekleştirmesini istersiniz.
Resim kaynağı: Inspired-ui
Boş durumları tasarlamak için bazı ipuçları:
1) İlk kez oturum açan kullanıcıların boş durumu için tasarlanmıştır.
Unutma, yapmalıyız Değer Kullanıcının ilk kez oturum açma deneyimi. Onlar için boş durumlar tasarlarken, Tasarım ne kadar basitse o kadar iyidir . Ana kullanıcı hedeflerine dikkat edin ve etkileşimli davranışı en üst düzeye çıkarmaya dayalı tasarım yapın Mesajı temizle , Doğru görüntü ,Hem de Bir işlem düğmesi yeterlidir .
Khaylo Workout, uygun şekilde tasarlanmış boş duruma bir örnektir. Boş durum, kullanıcıya bu arayüzün neden göründüğünü bildirir (Çünkü henüz hiçbir arkadaşa meydan okumamışlar) ve aynı zamanda Ayrıca kullanıcıları bu sorunun nasıl çözüleceği konusunda bilgilendirin ("+" Düğmesine dokunun).
2) Hata istemi.
Sistem veya kullanıcı işleminde bir hata nedeniyle boş bir durum varsa, "kolaylık" ve "kullanışlılık" arasındaki ilişki dengelenmelidir.
Kullanıcıların hata istemlerinden kaynaklanan hayal kırıklıklarını azaltmak için bazı kısa mizah unsurları eklemeniz önerilir. , Ancak kullanıcılara hata sorununu nasıl çözeceklerini bildirmek daha önemlidir.
Issız bir adada olduğunuz için bağlantınız mı koptu? Azendoo'nun tavsiyesine uy, sakin ol, bir meşale yak ve tazelenmeye devam et. Resim kaynağı: emptystat.es
Ekranı çerçeveleyin
Genellikle aynı arayüz içeriği için farklı yükleme hızları belirlemiyoruz - her zaman yüklendiğine (veya en azından çok hızlı yüklendiğine) inanıyoruz. Bu nedenle, normal şartlar altında, tasarıma kullanıcıları içeriğin yüklenmesini bekleten rahatsız edici unsurlar eklemiyoruz.
Bununla birlikte, hiç kimse internet hızını garanti edemez ve işlem süresi, özellikle büyük miktarda içerik (resimler gibi) yüklendiğinde beklenenden daha uzun olabilir. İçeriği azaltmanın bir yolu yoksa, en azından kullanıcının rahatça beklemesine izin verin. kullanarak Geçici Bilgi Kutusu , Çerçeveli ekranlar ve görüntü yer tutucular gibi, kullanıcıları büyük ölçüde tutmaya devam edebilir. "Yükleniyor" resmine kıyasla, Çerçeveli ekranlar, kullanıcıların bilişsel yüklerini azaltırken bir sonraki ekranda ne görüneceğini tahmin etmelerini sağlar .
Ekran tasarımını yapılandırmak için bazı ipuçları:
1) Ekranı oluşturmanın dikkat çekici olması gerekmez.
Yapısının belirli bir kısmı gibi sadece gerekli bilgileri vurgulamanız gerekir. Facebookun gri yer tutucuları buna bir örnektir - kullanıcıların yüklenecek içeriğin genel yapısını bilmesini sağlamak için sayfa içeriğini yüklerken öğe şablonlarını kullanır. Çerçeveli ekranda kullanılan resim ve tel kafes arasındaki farkın açık olmadığını unutmayın.
2) Yer tutucular yüklenen resimler için de kullanılabilir.Yer tutucuların dolgu rengi yüklenecek resmin ana rengini kullanmalıdır. Orta, çok iyi bir resim yükleme etkisine sahiptir. Önce küçük bir bulanık görüntü yükleyin ve ardından net bir büyük görüntüye geçin.
Son görüntü görüntülenmeden önce, bulanık görüntülerle dolu yer tutucular görebilirsiniz. Resim kaynağı: jmperezperez
Animasyon geri bildirimi
Dostça etkileşim tasarımı geri bildirim sağlayacaktır. Fiziksel dünyada, düğmeler gibi nesneler kullanıcı etkileşimi hakkında geri bildirim verir. Kullanıcılar ayrıca uygulama öğesinden de benzer geri bildirimler bekliyorlar. Görsel geri bildirim, kullanıcıların Kontrol algısı .
-
Herhangi bir etkileşimin sonuçlarını göstererek görsel ve anlaşılması kolay hale getirir.
-
Kullanıcıya kendisinin (veya uygulamanın) belirli bir görevi yerine getirmede başarılı veya başarısız olduğunu hatırlatır.
Animasyon geri bildirimi, kullanıcıların artık sıkılmamaları veya dikkatlerinin dağılmaması için bilgileri kullanıcılara anında iletmelidir. Animasyon geri bildirimini en çok kullananlar Geçişte :
Kullanıcı, tıklama / dokunma işlemiyle animasyon geri bildirimini tetiklediğinde, işlemin gerçekleştirildiğini hemen anlar. Resim Kredisi: Ryan Duffy
Kullanıcı, görevin tamamlandığını belirtmek için kutuyu işaretlediğinde, görevi içeren kartın boyutu küçüldü ve rengi yeşile döndü. Resim kaynağı: Vitaly Rubtsov
Animasyon kullanımı sadece sıradan işlemler için değilse, bu uygulama kullanıcılar tarafından sevilmelidir.
İşte animasyon geri bildirim tasarımı için bazı ipuçları:
Animasyon geri bildirimi, uzun bir kullanıcı deneyimine dayanmalıdır. İlk başta daha ilginç olan bir şey 100. seferden sonra can sıkıcı hale gelebilir.
Resim kredisi: Rachel Nabors
Animasyon, kullanıcıların dikkatini dağıtabilir ve uzun yükleme sürelerini görmezden gelmelerine neden olabilir.
Resim kaynağı: xjw
Resim kaynağı: xjw
Animasyon, kullanıcı deneyimini gerçekten dostça ve oyalayıcı hale getirebilir.
Resim kaynağı: Tubik
son sözler
Tasarım sürecinde dikkatli olun. Uygulama kullanıcı arayüzünün her küçük öğesi büyük ilgiyi hak ediyor çünkü kullanıcı deneyimi, tüm küçük öğelerin birlikte ve uyumlu bir şekilde çalışmasına izin vermektir. Bu nedenle, kullanıcı arayüzünü baştan sona optimize edin ve harika bir kullanıcı deneyimi tasarlayın.
Teşekkür ederim!
Yazılım mühendisi yazar Nick Babich, UI ve UX'e odaklanıyor.
Çevirmen Jorri
Bu makale adresinden tercüme edilmeye yetkilidir.
Başlık resmi Zhankuhailuo Creative'den geliyor
Bu makale, cep telefonlarını daha kullanışlı hale getiren AppSo tarafından çevrildi ve üretildi. WeChat hesap çözümüne dikkat edin ve göze çarpmayan uygulamanın "boş" boş sayfasına yanıt verin. Bizi nasıl şaşırtabilirsiniz?
İlk başta Facebook'un hayali olduğunu bilmiyordum ve hala herkesin durumunun neden aynı uzunlukta olduğunu merak ediyordum.
