Bu sayfada, yavaş ağlarda ve çevrimdışıyken mükemmel bir kullanıcı deneyimi oluşturmayla ilgili tasarım yönergeleri sağlanmaktadır.
Ağ bağlantısının kalitesi aşağıdakiler gibi çeşitli faktörlerden etkilenebilir:
- Ağ sağlayıcının kapsama alanı yetersiz.
- Aşırı hava koşulları
- Elektrik kesintileri
- Ağ bağlantılarını engelleyen duvarlara sahip binalar gibi kalıcı "ölü bölgelere" girme
- Trenle seyahat ederken veya tünelden geçerken geçici "ölü bölgelere" girme
- Havaalanları veya otellerdeki gibi zaman sınırı olan internet bağlantıları.
- Belirli zamanlarda veya belirli günlerde internet erişiminin sınırlı olmasını ya da hiç erişilememesini gerektiren kültürel uygulamalar
Geliştirici olarak hedefiniz, bağlantıdaki değişikliklerin etkisini azaltan iyi bir deneyim sunmaktır.
Kullanıcılarınızın ağ bağlantısı zayıf olduğunda onlara ne göstereceğinize karar verme
Sorulması gereken ilk soru, bir ağ bağlantısının başarılı ve başarısız olmasının uygulamanız için ne anlama geldiğidir. Başarılı bir bağlantı, uygulamanızın normal internet deneyimidir. Bağlantı hatası, uygulamanızın hem çevrimdışı hem de yavaş ağlarda nasıl davrandığını içerir.
Bağlantı hatasının nasıl ele alınacağını belirlemek için kendinize şu önemli kullanıcı deneyimi sorularını sorun:
- Bir bağlantının başarılı olup olmadığını belirlemek için ne kadar süre beklersiniz?
- Başarı veya başarısızlık belirlenirken ne yapabilirsiniz?
- Bağlantı kurulamazsa ne yapmalısınız?
- Kullanıcıya neler olduğunu nasıl bildirirsiniz?
Kullanıcıları mevcut durumları ve durum değişiklikleri hakkında bilgilendirme
Kullanıcıya hem uygulamanın durumunu hem de ağ hatası olduğunda yapabileceği işlemleri bildirin. Örneğin, bir bildirimde şunlar yer alabilir:
Ağ bağlantınız zayıf. Endişelenmeyin! İletiler, ağ geri yüklendiğinde gönderilir.
Ağ bağlantısı iyileştiğinde veya geri yüklendiğinde kullanıcıları bilgilendirme
Kullanıcıya ağ bağlantısının iyileştiğini nasıl bildireceğiniz uygulamanıza bağlıdır. Hava durumu veya borsa takipçileri gibi güncel bilgilere öncelik veren uygulamalar otomatik olarak güncellenmeli ve kullanıcıya en kısa sürede bilgi vermelidir.
Material Design bildirim öğesi gibi görsel bir ipucu kullanarak kullanıcıya web uygulamanızın "arka planda" güncellendiğini bildirmenizi öneririz. Bu, hem bir hizmet çalışanının varlığını hem de yönetilen içeriğindeki bir güncellemeyi algılamayı içerir. Bu işlev için kod örneğini burada bulabilirsiniz.
Buna örnek olarak, uygulama güncellendiğinde kullanıcıya bir not yayınlayan Chrome Platform Durumu verilebilir.
Bazı uygulamalar, son güncellenme zamanını her zaman gösterebilir. Örneğin, bu özellik özellikle para birimi dönüştürücü uygulamalar için yararlıdır.
Haber uygulamaları, kullanıcıyı yeni içerikler hakkında bilgilendiren basit bir dokunarak güncelleme bildirimi gösterebilir. Bir makalenin otomatik olarak güncellenmesi, kullanıcıların yer işaretlerini kaybetmesine neden olur.
Kullanıcı arayüzünü, mevcut bağlamsal durumu yansıtacak şekilde güncelleme
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. Örneğin, internete bağlı değilken gezinilebilen ancak bağlantı yeniden kurulana kadar fiyatlandırmayı ve Satın Al düğmesini devre dışı bırakan bir e-ticaret sitesi.
Bağlamsal durumların diğer biçimleri veri içerebilir. Örneğin, Robinhood finans uygulaması, kullanıcıya borsanın ne zaman açık olduğunu bildirmek için renk ve grafiklerden yararlanır. Pazar kapandığında arayüzün tamamı beyaza, ardından griye döner. Bir hissenin değeri yükseldiğinde veya düştüğünde, her hisse widget'ı durumuna bağlı olarak yeşile veya kırmızıya döner.
Kullanıcıya çevrimdışı modelin ne olduğunu anlaması için bilgi verin
Çoğu kullanıcı her zaman ağ bağlantısına sahip olmaya alışkındır. Bağlantıları olmadığında uygulamanızda hangi değişikliklerin yapıldığı konusunda onları bilgilendirmeniz gerekir. Büyük verilerin nereye kaydedildiğini belirtin ve varsayılan davranışı değiştirme ayarlarını gösterin. Hikayenin tamamını tek bir tasarım seçeneğiyle (ör. tek başına bir simge) anlatmak yerine, bu fikirleri iletmek için birden fazla kullanıcı arayüzü tasarım bileşenini (ör. bilgilendirici dil, simgeler, bildirimler, renk ve görseller) birlikte kullanın.
Varsayılan olarak çevrimdışı deneyim sunma
Uygulamanız çok fazla veri gerektirmiyorsa bu verileri varsayılan olarak önbelleğe alın. Kullanıcılar, verilerine yalnızca ağ bağlantısıyla erişebiliyorsa giderek daha fazla rahatsızlık duyabilir.
Deneyimi mümkün olduğunca kararlı hale getirmeye çalışın. Kararsız bağlantılar, kullanıcıların uygulamanıza güvenmemesine neden olur. Ağdaki bir hatanın etkisini azaltan uygulamalar, kullanıcılarını memnun eder.
Haber siteleri, en son haberleri otomatik olarak indirip kaydedebilir. Hatta yalnızca metni indirerek veri kaydedebilir. Böylece kullanıcılar internete bağlı olmadan günün haberlerini okuyabilir. Kullanıcının en çok görüntülediği haber kategorilerinin indirilmesine öncelik vererek bu davranışı kullanıcının davranışına uyarlayabilirsiniz.
Uygulama çevrimdışı kullanıma hazır olduğunda kullanıcıyı bilgilendirme
Bir web uygulaması ilk kez yüklendiğinde, çevrimdışı kullanıma hazır olup olmadığını kullanıcıya bildirmelidir. Bunu, ekranın alt kısmındaki bir mesaj aracılığıyla bir işlem hakkında kısa geri bildirim sağlayan bir widget ile yapabilirsiniz. Örneğin, bir bölüm senkronize edildiğinde veya bir dosya indirildiğinde.
Kullandığınız dilin kitlenize uygun olduğundan emin olun ve geçerli olduğu tüm durumlarda aynı ifadeyi kullanın. Teknik bilgisi olmayan kitleler genellikle "çevrimdışı" kelimesini yanlış anlar. Bu nedenle, kitlenizin anlayabileceği, işleme dayalı bir dil kullanın.
"Çevrimdışı kullanım için kaydet" seçeneğini arayüzde belirgin hale getirme
Bir uygulama çok fazla veri kullanıyorsa çevrimdışı kullanım için öğe eklemek üzere bir anahtar veya raptiye bulunduğundan emin olun. Dosyaları yalnızca kullanıcı bir ayar menüsünden bu davranışı özellikle talep ederse otomatik olarak indirin. Sabitleme veya indirme kullanıcı arayüzünün kullanıcı tarafından kolayca görülebildiğinden ve diğer kullanıcı arayüzü öğelerinin arkasına gizlenmediğinden emin olun.
Büyük dosyalar gerektiren bir müzik çalar buna örnek gösterilebilir. Kullanıcı, ilişkili veri maliyetinin farkındadır ancak oynatıcıyı çevrimdışı olarak da kullanmak isteyebilir. Daha sonra kullanmak için müzik indirmek, kullanıcının önceden plan yapmasını gerektirir. Bu nedenle, ilk katılım sırasında kullanıcıyı bu konuda bilgilendirmeniz önerilir.
Çevrimdışı olarak kullanılabilen içerikleri netleştirme
Sunduğunuz seçenekleri açıkça belirtin. Kullanıcının cihazında nelerin depolandığını ve nelerin kaydedilmesi gerektiğini görebilmesi için "çevrimdışı kitaplık" veya içerik dizini için bir sekme ya da ayar göstermeniz gerekebilir. Ayarların kısa ve net olduğundan, verilerin nerede depolandığı ve kimlerin bunlara erişebildiğinden emin olun.
Bir işlemin gerçek maliyetini gösterme
Birçok kullanıcı, çevrimdışı özelliği "indirme" ile eşdeğer tutuyor. Ağ bağlantılarının düzenli olarak başarısız olduğu veya kullanılamadığı ülkelerdeki kullanıcılar genellikle içerikleri diğer kullanıcılarla paylaşır ya da bağlantıları olduğunda içerikleri çevrimdışı kullanım için kaydeder.
Veri planı kullanan kullanıcılar bazen maliyet korkusuyla büyük dosyaları indirmekten kaçınabilir. Bu nedenle, kullanıcıların belirli bir dosya veya görevle ilgili etkin bir karşılaştırma yapabilmesi için ilişkili maliyeti de göstermek isteyebilirsiniz. Örneğin, yukarıda bahsedilen müzik uygulaması, kullanıcının veri planı kullanıp kullanmadığını algılayabilir ve kullanıcının dosyanın maliyetini görebilmesi için dosya boyutunu gösterebilir.
Saldırıya uğramış deneyimleri önlemeye yardımcı olma
Kullanıcılar genellikle bir deneyimi, bunu yaptıklarını fark etmeden hackler. Örneğin, bulut tabanlı dosya paylaşımı web uygulamaları bulunmadan önce kullanıcıların büyük dosyaları kaydedip farklı bir cihazdan düzenlemeye devam edebilmeleri için e-postalara eklemesi yaygın bir uygulamaydı. İyi bir kullanıcı arayüzü, kullanıcıların çözmeye çalıştığı sorunu, saldırıya uğramış deneyime çekilmeden çözer. Örneğin, büyük dosyaları e-postalara eklemeyi daha kullanıcı dostu hale getirmek yerine büyük dosyaları cihazlar arasında paylaşmanın bir yolunu sağlayın.
Deneyimlerin bir cihazdan diğerine aktarılabilir olmasını sağlama
Bağlantısı zayıf olan ağlar için içerik oluştururken, deneyimin aktarılabilmesi için bağlantı iyileşir iyileşmez senkronizasyon yapmayı deneyin. Örneğin, bir seyahat uygulamasının rezervasyonun ortasında ağ bağlantısını kaybettiğini varsayalım. Bağlantı yeniden kurulduğunda uygulama, kullanıcının hesabıyla senkronize olur. Böylece kullanıcı, masaüstü cihazında rezervasyonuna devam edebilir ve sorunsuz bir deneyim yaşar.
Kullanıcıya verilerinin hangi durumda olduğunu bildirin. Örneğin, uygulamanın senkronize edilip edilmediğini gösterebilirsiniz. Mümkün olduğunda onları bilgilendirin ancak çok fazla mesaj göndererek boğmamaya çalışın.
Kapsayıcı tasarım deneyimleri oluşturma
Kullanıcı deneyiminizi tasarlarken, kullanıcının yolunu kapatmadan işlemi veya görevi tamamlamasına rehberlik edecek anlamlı tasarım öğeleri, basit dil, standart simge ve anlamlı görseller sunarak kapsayıcı olmaya çalışın.
Basit ve net bir dil kullanın
İyi bir kullanıcı deneyimi, yalnızca arayüzünüzü tasarlamakla ilgili değildir. Kullanıcının uygulamanızda izlediği yolu ve uygulamanın bu yolculuğu tanımlamak için kullandığı dil de dahil olmak üzere yolda karşılaştığı her şeyi içerir. Kullanıcı arayüzü bileşenlerini veya uygulamanın durumunu açıklarken teknik jargon 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 aracından yararlanma
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 durumu fark etmesini zorlaştırabilir veya görme engelli kullanıcılar için tamamen erişilemez olabilir. Ayrıca, web tasarımında devre dışı öğeler için genellikle gri renk kullanıldığı için uygulamanızın çevrimdışı olduğunu göstermek amacıyla gri renkte kullanıcı arayüzü kullanmak, özellikle de durumu göstermek için yalnızca rengi kullanıyorsanız uygulamanızın çevrimdışıyken neler yapabileceği konusunda kafa karışıklığına neden olabilir.
Yanlış anlaşılmaları önlemek için uygulama durumlarını kullanıcıya renk, etiket ve kullanıcı arayüzü bileşenleri gibi birden fazla şekilde gösterin.
Anlamlı simgeler kullanın
Simgelerinizin yanında anlamlı metin etiketleri kullandığınızdan emin olun. Özellikle web'de "çevrimdışı" kavramının nispeten yeni olması nedeniyle, simgeler tek başına kafa karıştırıcı olabilir. "Kaydet"i temsil etmek için disket kullanılması da kafa karıştırıcı simge örnekleri arasındadır. Disketi hiç görmemiş olan genç kullanıcılar için bu simge anlamsız olabilir. "Hamburger" menü simgesi de kafa karıştırıcı simgeler arasındadır.
Çevrimdışı simgesi kullanıma sunarken, varsa endüstri standardı görsellerle tutarlı olun ve bir metin etiketi ile açıklama sağlayın. Örneğin, çevrimdışı olarak kaydetme işlemi için indirme simgesi, senkronizasyon içeren bir işlem için senkronizasyon simgesi kullanabilirsiniz. Durumu göstermek için simgeler kullanırken, bunun yerine kaydetme veya indirme işlemi olarak yorumlanabilecek simgeler kullanmamaya dikkat edin.
Daha fazla ilham almak için Materyal Tasarım simge grubuna göz atın.
İskelet düzenleri ve diğer geri bildirim mekanizmalarını kullanma
Uygulamanız içerik yüklerken kullanıcının uygulamanın bozuk olduğunu düşünmemesi için yükleme işleminin devam ettiğini gösterin. Bunu yapmanın bir yolu, iskelet düzeni kullanmaktır. Bu, içeriğin yüklenmesi sırasında gösterilen uygulamanızın bir taslak sürümüdür. Kullanıcıya uygulamanın yüklendiğini belirten bir metin etiketi içeren bir önyükleyici kullanıcı arayüzü veya canlı ve yüklenmekteymiş hissi vermek için ana hatlarda hafifçe titreyen bir animasyon da kullanabilirsiniz. Bu sayede kullanıcı, bir işlem yapıldığını anlayabilir ve yeniden gönderme veya gereksiz yenileme işlemlerini önleyebilirsiniz.
Geri bildirimde bulunarak bir işlemin durumunu gösterin. Örneğin, bir kullanıcı çevrimdışıyken bir belgeyi düzenliyorsa geri bildirim tasarımını, internete bağlıyken olduğundan görünür şekilde farklı olacak ancak yine de dosyanın "kaydedildiğini" ve ağ bağlantısı olduğunda senkronize edileceğini gösterecek şekilde değiştirebilirsiniz. Bu sayede kullanıcı, uygulamanızın işleyiş şekli hakkında bilgi edinir ve görevinin veya işleminin depolandığından emin olur. Bu da kullanıcının uygulamanızı kullanma konusunda daha rahat olmasını sağlayabilir.
İçerikleri engellemeyin
Bazı uygulamalarda kullanıcılar yeni doküman oluşturma gibi işlemleri 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 müdahaleci bir yükleme modu iletişim kutusu gösterir. Bu yöntem, kullanıcının istikrarlı bir ağ bağlantısı varsa işe yarayabilir ancak ağ kararsızsa kullanıcı bu işlemden kaçamaz. Bu nedenle kullanıcı arayüzü, başka bir işlem yapmasını engeller.
İçeriği engelleyen ağ isteklerinden kaçının. Kullanıcının uygulamanıza göz atmaya devam etmesine ve bağlantı iyileştiğinde gerçekleştirilecek ve senkronize edilecek görevleri sıraya eklemesine izin verin.
Gelecek milyar kullanıcı için tasarım yapma
Birçok bölgede düşük kaliteli cihazlar yaygındır, bağlantı güvenilir değildir ve birçok kullanıcı için veri son derece pahalıdır. Verilerle ilgili şeffaf ve tutumlu davranarak kullanıcılarınızın güvenini kazanın. Zayıf bağlantısı olan kullanıcılara yardımcı olmanın yollarını düşünün ve görevleri hızlandırmak için arayüzü basitleştirin. Verileri yoğun olan içerikleri indirmeden önce kullanıcılardan izin almayı unutmayın.
Bağlantısı gecikmeli kullanıcılar için düşük bant genişliği seçenekleri sunun. Daha yavaş ağ bağlantılarında daha küçük öğeler sağlayın veya yüksek ya da düşük kaliteli öğeler seçme seçeneği sunun.
Sonuç
Kullanıcılar bu deneyime aşina olmadığından eğitim, çevrimdışı kullanıcı deneyimi için çok önemlidir. Öğrenmelerine yardımcı olmak için, daha sonra kullanmak üzere indirmenin verileri çevrimdışı modda tutmakla aynı olduğunu açıklamak gibi, aşina oldukları kavramlarla ilişkilendirmeler yapmaya çalışın.
Kararsız ağ bağlantıları için tasarım yaparken aşağıdaki yönergeleri göz önünde bulundurun:
- Ağ bağlantısının başarılı, başarısız ve kararsız olması için tasarım yapın.
- Veriler pahalı olabilir. Bu nedenle, kullanıcıyı göz önünde bulundurun.
- Dünyadaki çoğu kullanıcı için teknoloji ortamı neredeyse tamamen mobildir.
- Depolama alanı, bellek ve işlem gücü sınırlı, ekranı küçük ve dokunmatik ekran kalitesi düşük olan düşük kaliteli cihazlar yaygındır. Performansın tasarım sürecinizin bir parçası olduğundan emin olun.
- Kullanıcıların internete bağlı değilken uygulamanıza göz atmasına izin verin.
- Kullanıcıları mevcut durumları ve durum değişiklikleri hakkında bilgilendirin.
- Uygulamanız çok fazla veri gerektirmiyorsa varsayılan olarak çevrimdışı olarak sunmayı deneyin.
- Uygulama çok fazla veri kullanıyorsa kullanıcılara, uygulamayı çevrimdışı kullanım için nasıl indirebilecekleri hakkında bilgi verin.
- Deneyimleri cihazlar arasında aktarılabilir hale getirin.
- Kullanıcıya fikirlerinizi ifade etmek için dil, simge, görsel, yazı tipi ve rengi birlikte kullanın.
- Kullanıcıya yardımcı olmak için güvence verin ve geri bildirimde bulunun.