Bu sayfada, yavaş ağlarda ve çevrimdışı olarak mükemmel bir kullanıcı deneyiminin nasıl oluşturulacağıyla ilgili tasarım yönergeleri sağlanmaktadır.
Ağ bağlantısının kalitesi, aşağıdakiler gibi birçok faktörden etkilenebilir:
- Ağ sağlayıcı kapsamının yetersiz olması.
- Şiddetli hava koşulları.
- Elektrik kesintileri.
- Ağ bağlantılarını engelleyen duvarlara sahip binalar gibi kalıcı "ölü alanlara" girmek.
- Trende seyahat ederken ve tünelden geçerken olduğu gibi geçici "ölü alanlara" girmek.
- Havaalanları veya otellerdekiler gibi zaman sınırlamalı internet bağlantıları.
- Belirli saatlerde veya günlerde internet erişiminin sınırlı olduğu ya da hiç olmadığı kültürel uygulamalar.
Bir geliştirici olarak hedefiniz, bağlantıdaki değişikliklerin etkisini azaltan iyi bir deneyim sunmaktır.
Kullanıcılarınıza ağ bağlantıları kötü olduğunda ne göstereceğinize karar verin
Sorulacak ilk soru, bir ağ bağlantısının uygulamanız için ne kadar başarılı veya başarısız olduğudur. Başarılı bir bağlantı, uygulamanızın normal çevrimiçi deneyimidir. Bağlantı hatası, uygulamanızın hem çevrimdışı hem de geciken ağlarda nasıl davrandığını içerir.
Bağlantı hatasını nasıl ele alacağınızı belirlemek için kendinize kullanıcı deneyimiyle ilgili şu önemli soruları sorun:
- Bir bağlantının başarılı olup olmadığını belirlemek için ne kadar süre bekliyorsunuz?
- Başarı veya başarısızlık belirlenirken ne yapabilirsiniz?
- Bağlantı kurulamazsa ne yapmanız gerekir?
- Kullanıcıya neler olduğunu nasıl açıklıyorsunuz?
Kullanıcıları o anki durum ve durum değişikliği hakkında bilgilendirin
Kullanıcıya uygulamanın durumunu ve bir ağ hatası olduğunda yine yapabileceği işlemleri bildirin. Örneğin, bir bildirimde şöyle bir mesaj bulunabilir:
Ağ bağlantınızın kötü olduğu anlaşılıyor. Endişelenmeyin! Mesajlar, ağ tekrar kurulduğunda gönderilir.
Ağ bağlantısı iyileştiğinde veya geri geldiğinde kullanıcıları bilgilendirir
Kullanıcıya ağ bağlantısının düzeldiğini nasıl bildireceğiniz uygulamanıza bağlı olarak değişir. Hava durumu veya borsa takip cihazları gibi güncel bilgilere öncelik veren uygulamalar en kısa sürede otomatik olarak güncellenip kullanıcıya bilgi vermelidir.
Materyal Tasarım durum mesajı öğesi gibi görsel bir işaret kullanarak, web uygulamanızın "arka planda" güncellendiğini kullanıcıya bildirmenizi öneririz. Bu, hem bir Service Worker'ın varlığının hem de yönetilen içerikte yapılan bir güncellemenin tespit edilmesini kapsar. Bu işlevin kod örneğini iş yerinde görebilirsiniz.
Bunun bir örneği, uygulama güncellendiğinde kullanıcıya bir not gönderen Chrome Platform Durumu'dur.
Bazı uygulamalar her zaman en son ne zaman güncellendiklerini gösterebilir. Örneğin, bu özellikle para birimi dönüştürme uygulamaları için yararlıdır.
Haber uygulamaları, kullanıcıyı yeni içerik konusunda bilgilendiren basit bir dokunarak güncelleme bildirimi gösterebilir. Bir makalenin otomatik olarak güncellenmesi kullanıcıların yerlerini kaybetmelerine neden olur.
Kullanıcı arayüzünü, bağlamsal mevcut durumu yansıtacak şekilde güncelleyin
Her kullanıcı arayüzü öğesinin, başarılı bir bağlantıya ihtiyaç duyup duymadığına bağlı olarak değişen kendi bağlamı ve davranışı olabilir. Çevrimdışına göz atılabilen ancak bağlantı kurulana kadar fiyatlandırmayı ve Satın al düğmesini devre dışı bırakan bir e-ticaret sitesi buna örnek gösterilebilir.
Diğer bağlamsal durum biçimleri veriler içerebilir. Örneğin, finans uygulaması Robinhood, menkul kıymetler piyasasının ne zaman açık olduğunu kullanıcıya bildirmek için renk ve grafiklerden yararlanıyor. Arayüz tamamen beyaz olur ve piyasa kapandığında devre dışı bırakılır. Bir hisse senedinin değeri arttığında veya azaldığında her bir hisse senedi widget'ı, durumuna bağlı olarak yeşil veya kırmızıya döner.
Çevrimdışı modelin ne olduğunu anlamaları için kullanıcıya bilgi verin
Çoğu kullanıcı sürekli bir ağ bağlantısına sahip olmaya alışkındır. Bağlantıları olmadığında uygulamanızda yapılacak değişiklikler konusunda onları eğitmeniz gerekir. Onlara büyük verilerin nereye kaydedildiğini söyleyin ve varsayılan davranışı değiştirmelerini sağlayacak ayarlar verin. Hikayenin tamamını anlatmak için tek bir tasarım seçeneğine (ör. tek bir simge) bağlı kalmak yerine, bu fikirleri aktarmak için birden fazla kullanıcı arayüzü tasarım bileşenini (ör. bilgilendirici dil, simgeler, bildirimler, renk ve görüntüler) birlikte kullanın.
Varsayılan olarak çevrimdışı deneyim sunun
Uygulamanız çok fazla veri gerektirmiyorsa varsayılan olarak bu verileri önbelleğe alın. Verilerine yalnızca bir ağ bağlantısıyla erişebilen kullanıcılar daha fazla hayal kırıklığına uğrayabilir.
Deneyimi mümkün olduğunca tutarlı hale getirmeye çalışın. İstikrarsız bir bağlantı, uygulamanızı güvenilmez bırakır. Ağ arızasının etkisini azaltan bir uygulama, kullanıcılarını memnun eder.
Haber siteleri, en son haberleri otomatik olarak indirme ve otomatik kaydetme özelliğinden yararlanabilir ve hatta yalnızca metin indirerek veri tasarrufu sağlayabilir. Böylece, kullanıcı bugünün haberlerini bağlantı olmadan okuyabilir. Kullanıcının en çok görüntülediği haber kategorilerini indirmeye öncelik vererek bu davranışı kullanıcının davranışına uyarlayabilirsiniz.
Uygulama çevrimdışı kullanıma hazır olduğunda kullanıcıyı bilgilendirin
Bir web uygulaması ilk olarak yüklendiğinde, kullanıcıya çevrimdışı kullanıma hazır olup olmadığını bildirmelidir. Bu işlemi, örneğin bir bölüm senkronize edildiğinde veya bir dosya indirildiğinde olduğu gibi, ekranın alt kısmındaki bir ileti aracılığıyla kısa geri bildirim sağlayan bir widget ile yapın.
Kullandığınız dilin kitlenize uygun olduğundan emin olun ve geçerli olduğu her durumda aynı ifadeyi kullanın. Teknik bilgisi olmayan kitleler "çevrimdışı" kelimesini genellikle yanlış anladığından, bunun yerine kitlenizin ilişki kurabileceği, işleme dayalı bir dil kullanın.
"Çevrimdışı kullanım için kaydet" seçeneğinin arayüzde açıkça görünmesini sağlayın
Bir uygulama çok fazla veri kullanıyorsa, çevrimdışı kullanıma yönelik bir öğe eklemek için bir anahtar veya raptiye bulunduğundan emin olun. Yalnızca bir kullanıcı ayarlar menüsünden özel olarak bu davranışı sorduysa dosyaları otomatik olarak indir. Raptiye veya indirme kullanıcı arayüzünün, kullanıcı tarafından açıkça görülebildiğinden ve diğer kullanıcı arayüzü öğeleri tarafından gizlenmediğinden emin olun.
Buna örnek olarak büyük dosyalar gerektiren bir müzik çalar verilebilir. Kullanıcı, ilişkili veri maliyetinin farkındadır ancak oynatıcıyı çevrimdışı olarak da kullanmak isteyebilir. Müziği daha sonra kullanmak üzere indirmek için kullanıcının önceden plan yapması gerekir. Bu nedenle, ilk katılım sırasında kullanıcıyı bu konuda eğitmek isteyebilirsiniz.
Çevrimdışı kullanılabilecekleri açıklayın
Sunduğunuz seçenekleri açıkça belirtin. Kullanıcının cihazında ne depoladığını ve neyin kaydedilmesi gerektiğini görebilmesi için bir "çevrimdışı kitaplık" veya içerik dizini için bir sekme veya ayar göstermeniz gerekebilir. Ayarların kısa ve öz olduğundan emin olun, ayrıca verilerin nerede saklandığı ve verilere kimin erişebildiği konusunda net olun.
Bir işlemin gerçek maliyetini göster
Birçok kullanıcı "indirme" ile çevrimdışı kapasitenin denk geldiğini belirtir. Ağ bağlantılarının düzenli olarak başarısız olduğu veya kullanılamadığı ülkelerdeki kullanıcılar, genellikle diğer kullanıcılarla içerik paylaşır veya bağlantıları olduğunda içeriği çevrimdışı kullanım için kaydeder.
Veri planlarını kullananlar bazen maliyet korkusu nedeniyle büyük dosyaları indirmekten kaçınırlar. Bu nedenle, kullanıcıların belirli bir dosya veya görev için etkin bir karşılaştırma yapabilmesi için ilişkili maliyeti de göstermek isteyebilirsiniz. Örneğin, bahsi geçen müzik uygulaması kullanıcının veri planı kullanıp kullanmadığını algılayabilir ve dosyanın maliyetini görebilmesi için dosya boyutunu gösterebilir.
Deneyimlerin saldırıya uğramasını önlemeye yardımcı olma
Kullanıcılar genellikle farkında olmadan bir deneyime saldırırlar. Örneğin, bulut tabanlı dosya paylaşımı web uygulamaları mevcut olmadan önce, kullanıcıların büyük dosyaları kaydedip e-postalara eklemesi, bu dosyaları farklı bir cihazdan düzenlemeye devam edebilmeleriydi. İyi bir kullanıcı arayüzü, kullanıcıların bilgisayar korsanlığı deneyiminin içine düşmeden çözmeye çalıştıkları sorunu çözer. Örneğin, büyük boyutlu dosyaları e-postalara eklemeyi daha kullanıcı dostu hale getirmek yerine büyük boyutlu dosyaları cihazlar arasında paylaşmak için bir yöntem sunun.
Deneyimleri bir cihazdan diğerine aktarılabilir hale getirin
Kesintili ağlar için kurulum yaparken, deneyimin aktarılabilir olması için bağlantı iyileştikten hemen sonra senkronizasyon yapmayı deneyin. Örneğin bir seyahat uygulamasının rezervasyonun ortasında bağlantıyı kaybettiğini düşünün. Bağlantı yeniden kurulduğunda, uygulama kullanıcının hesabıyla senkronize olarak kullanıcıların masaüstü cihazlarında rezervasyonlarına devam etmelerine olanak tanır ve sorunsuz bir deneyim sunar.
Kullanıcıya verilerinin durumunu anlatın. Örneğin, uygulamanın senkronize olup olmadığını gösterebilirsiniz. Mümkün olduğunda onları bilgilendirin ama çok fazla mesajla boğulmamaya çalışın.
Kapsayıcı tasarım deneyimleri oluşturun
Kullanıcı deneyiminizi tasarlarken anlamlı tasarım cihazları, basit bir dil, standart ikonlar ve kullanıcıyı rahatsız etmeden eylemi veya görevi tamamlamaya yönlendiren anlamlı görüntüler sağlayarak kapsayıcı olmaya çalışın.
Basit ve net bir dil kullanın
İyi bir kullanıcı deneyimi yalnızca arayüzünüzü tasarlamaktan ibaret değildir. Kullanıcının uygulamanızda izlediği yol ve bu yolculuğu açıklamak için kullandığı dil de dahil olmak üzere bu süreçte karşılaştığı her şey, buna dahildir. Kullanıcı arayüzü bileşenlerini veya uygulamanın durumunu açıklarken teknoloji jargonu kullanmaktan kaçının. "Çevrimdışı" kelimesi genellikle kullanıcıya uygulamanızın ne yaptığını anlatacak kadar net değildir.
Erişilebilir kullanıcı deneyimleri oluşturmak için birden fazla tasarım cihazı kullanın
Bir durumu veya durum değişikliğini göstermek için dil, renk ve görsel bileşenleri kullanın. Durumu göstermek için yalnızca renk kullanmak, kullanıcıların fark etmekte zorlanabilir, hatta görme engelli kullanıcılar için hiçbir şekilde erişilemez olabilir. Ayrıca, web tasarımı, devre dışı bırakılmış öğeler için gri renk kullanımı eğiliminde olduğundan, uygulamanızın çevrimdışı olduğunu göstermek için gri kullanıcı arayüzünü kullanmak, özellikle durumu göstermek için yalnızca renk kullanıyorsanız uygulamanızın çevrimdışıyken yapabilecekleri konusunda kafa karışıklığına yol açabilir.
Yanlış anlaşılmaları önlemek için uygulama durumlarını kullanıcıya farklı şekillerde, örneğin renk, etiketler ve kullanıcı arayüzü bileşenleri ile ifade edin.
Anlam ifade eden simgeler kullanma
Simgelerinizin yanında anlamlı metin etiketleri kullandığınızdan emin olun. Özellikle web'de "çevrimdışı" kavramı nispeten yeni olduğu için simgeler tek başına kafa karıştırıcı olabilir. Diğer kafa karıştırıcı simgeler arasında, hiç disket görmemiş genç kullanıcılar için anlamsız olabilecek, "kaydet"i temsil etmek üzere bir disketin kullanılması ve "hamburger" menü simgesi yer alır.
Çevrimdışı simge kullanırken, var olan endüstri standardı görsellerle tutarlı olun. Metin etiketi ve açıklama ekleyin. Örneğin, çevrimdışına kaydetme anlamına gelen bir indirme simgesi, senkronizasyon içeren bir işlem içinse bir senkronizasyon simgesi kullanabilirsiniz. Kaydetme veya indirme işlemi olarak yorumlanabilecek durumları göstermek için simgeleri kullanırken dikkatli olun.
Daha fazla ilham almak için Materyal Tasarım simge grubuna bakın.
İskelet düzenleri ve diğer geri bildirim mekanizmalarını kullanın
Uygulamanız içerik yüklerken, bozuk olduğunu düşünmemeleri için kullanıcıya uygulamanızın yüklendiğini gösterin. Bunu yapmanın bir yolu, iskelet düzeni kullanmaktır. Bu, uygulamanızın içerik yüklenirken görüntülenen tel çerçeve versiyonudur. Kullanıcıya uygulamanın yüklendiğini bildiren metin etiketine sahip bir ön yükleyici kullanıcı arayüzü veya uygulamanın canlı ve yükleniyormuş gibi hissetmesi için tel çerçevenin yavaşça titreşimli bir animasyonunu da kullanabilirsiniz. Bu, kullanıcıyı bir şeylerin olduğu konusunda rahatlatır ve yeniden gönderimlerin veya gereksiz yenilemelerin önlenmesine yardımcı olur.
Bir işlemin durumunu geri bildirimde bulunarak gösterin. Örneğin, kullanıcı bir dokümanı çevrimdışı olarak düzenliyorsa geri bildirim tasarımını, kullanıcının çevrimiçi olduğu zamandan farklı olacak şekilde değiştirmeyi düşünün, ancak yine de dosyasının "kaydedilmiş" olduğunu ve bir ağ bağlantısı olduğunda senkronize edileceğini gösterin. Bu, kullanıcıyı uygulamanızın çalışma şekli konusunda eğitir ve görevlerinin veya eylemlerinin kaydedildiğine dair onları rahatlatarak uygulamanızı kullanma konusunda daha rahat olmalarını sağlar.
İçeriği engelleme
Bazı uygulamalarda kullanıcı, yeni doküman oluşturma gibi bir işlemi tetikleyebilir. Bazı uygulamalar yeni dokümanı senkronize etmek için bir sunucuya bağlanmaya çalışır ve bunu göstermek için ekranın tamamını kaplayan araya giren bir yükleme kalıcı iletişim kutusu görüntüler. Kullanıcının stabil bir ağ bağlantısı varsa bu işlem işe yarayabilir ancak ağ kararsızsa bu işlemden çıkamaz. Bu nedenle, kullanıcı arayüzü kullanıcının başka bir şey yapmasını engeller.
İçeriği engelleyen ağ isteklerinden kaçının. Kullanıcının uygulamanıza göz atmaya devam etmesine izin verin ve bağlantı iyileştiğinde gerçekleştirilip senkronize edilecek görevleri sıraya ekleyin.
Milyarlarca kullanıcı için tasarlayın
Birçok bölgede düşük teknolojiye sahip cihazlar olağandır, bağlantı güvenilir değildir ve birçok kullanıcı için veri kullanımı son derece pahalıdır. Veriler konusunda şeffaf ve tutumlu davranarak kullanıcılarınızın güvenini kazanın. Zayıf bağlantıları olan kullanıcılara nasıl yardımcı olabileceğinizi düşünün ve görevleri hızlandırmak için arayüzü basitleştirin. Veri ağırlıklı içerikleri indirmeden önce her zaman kullanıcılara sormayı deneyin.
Gecikmeli bağlantılara sahip kullanıcılara düşük bant genişliği seçenekleri sunun. Yavaş ağ bağlantılarında daha küçük öğeler sağlayın veya yüksek ya da düşük kaliteli öğeleri seçme seçeneği sunun.
Sonuç
Eğitim, çevrimdışı kullanıcı deneyiminin anahtarıdır. Çünkü kullanıcılar çevrimdışı deneyime aşina değildir. Öğrenmelerine yardımcı olmak için bildik kavramlarla ilişkilendirmeler yapmaya çalışın. Örneğin, daha sonra kullanmak üzere indirmenin verileri çevrimdışı kullanmakla aynı olduğunu açıklamak gibi.
Kararsız ağ bağlantıları tasarımı yaparken aşağıdaki yönergeleri göz önünde bulundurun:
- Ağ bağlantısının başarılı, arızalı ve dengesiz olmasına göre tasarlayın.
- Veri pahalı olabilir, bu nedenle kullanıcıya dikkat edin.
- Dünya genelindeki çoğu kullanıcı için teknolojik ortam neredeyse tamamen mobildir.
- Düşük depolama alanı, bellek, işlem gücü, küçük ekranlar ve daha düşük dokunmatik ekran kalitesine sahip düşük kalite cihazlar yaygın olarak görülür. Performansın tasarım sürecinizin bir parçası olduğundan emin olun.
- Kullanıcıların çevrimdışı olduklarında uygulamanıza göz atmalarına izin verin.
- Kullanıcıları o anki durumları ve eyaletlerdeki değişiklikler hakkında bilgilendirin.
- Uygulamanız çok fazla veri gerektirmiyorsa varsayılan olarak çevrimdışı erişim sağlamayı deneyin.
- Uygulama çok fazla veri içeriyorsa kullanıcıları çevrimdışı kullanım için nasıl indirecekleri konusunda bilgilendirin.
- Deneyimleri cihazlar arasında aktarılabilir hale getirin.
- Kullanıcıya fikirleri ifade etmek için dil, simgeler, görüntüler, yazı tipi ve rengi birlikte kullanın.
- Kullanıcıya yardımcı olmak için güvence ve geri bildirim sağlayın.