Yayınlanma tarihi: 10 Kasım 2016
Ağ bağlantısının kalitesi çeşitli faktörlerden etkilenebilir. Örneğin:
- Ağ sağlayıcının yetersiz kapsama alanı.
- 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 tünelden geçme gibi geçici "ölü bölgelere" girme
- Havaalanları veya otellerdeki gibi sınırlı süreli internet bağlantıları
- Belirli zamanlarda veya belirli günlerde sınırlı internet erişimi ya da internet erişimi gerektirmeyen kültürel uygulamalar.
Geliştirici olarak hedefiniz, bağlantı değişikliklerinin 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, ağ bağlantısının başarılı veya 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 çevrimiçi deneyimidir. Bağlantı hatası, uygulamanızın hem çevrimdışı hem de yavaş ağlarda nasıl davrandığını kapsar.
Bağlantı hatasının nasıl ele alınacağını belirlemek için kendinize aşağıdaki önemli kullanıcı deneyimi sorularını sorun:
- Bir bağlantının başarılı mı yoksa başarısız mı olduğunu belirlemek için ne kadar beklersiniz?
- Başarı veya başarısızlık belirlenirken neler yapabilirsiniz?
- Bağlantı başarısız olursa ne yapmalısınız?
- Kullanıcıya neler olduğunu nasıl söylersiniz?
Kullanıcıları durum hakkında bilgilendirme
Kullanıcıya hem uygulamanın durumunu hem de ağ hatası olduğunda yapabileceği işlemleri söyle. Örneğin, bir bildirimde şunlar yazabilir:
Ağ bağlantınızın zayıf olduğu anlaşılıyor. Endişelenmeyin! İletiler, ağ geri yüklendiğinde gönderilir.
Kullanıcıları bağlantı iyileştirmeleri hakkında bilgilendirme
Kullanıcıya ağ bağlantısının iyileştiğini bildirme şekliniz 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 toast öğesi gibi görsel bir ipucu kullanarak kullanıcılara 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ğinde yapılan güncellemeyi tespit etmeyi içerir. Bu işlevin kullanımına ilişkin bir kod örneğini burada görebilirsiniz.
Buna bir örnek olarak, uygulama güncellendiğinde kullanıcıya not gönderen Chrome Platform Status verilebilir.
Bazı uygulamalar, son güncellendikleri zamanı 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çeriklerden haberdar eden, güncellemek için dokunma bildirimi gösterebilir. Bir makalenin otomatik olarak güncellenmesi, kullanıcıların kaldıkları yeri 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. Çevrimdışı olarak göz atılabilen ancak bağlantı yeniden kurulana kadar fiyatlandırmayı ve satın alma düğmesini devre dışı bırakan bir e-ticaret sitesi buna örnek verilebilir.
Diğer bağlamsal durum biçimleri veri içerebilir. Örneğin, finans uygulaması Robinhood, borsa açıkken kullanıcıya bildirmek için renk ve grafik kullanır. Pazar kapandığında tüm arayüz önce beyaza döner, ardından grileşir. Bir hissenin değeri arttığında veya azaldığında, her bir hisse senedi widget'ı durumuna bağlı olarak yeşil veya kırmızı renge döner.
Kullanıcıya çevrimdışı modelin ne olduğunu anlatma
Çoğu kullanıcı her zaman ağ bağlantısı olmasını bekler. Kullanıcıları, bağlantı olmadığında uygulamanızda hangi değişikliklerin yapıldığı konusunda bilgilendirmeniz gerekir. Büyük verilerin nereye kaydedildiğini bildirin ve varsayılan davranışı değiştirmeleri için ayarlar sunun. Tüm hikayeyi anlatmak için tek bir tasarım seçeneğine (ör. tek başına bir simge) güvenmek 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 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ı üzerinden erişebildiklerinde giderek daha fazla hayal kırıklığına uğrayabilir.
Deneyimi olabildiğince kararlı hale getirmeye çalışın. Kararsız bir bağlantı, uygulamanızın güvenilirliğini azaltır. Ağ arızasının etkisini azaltan bir uygulama, kullanıcılarını memnun eder.
Haber siteleri, en son haberleri otomatik olarak indirip kaydederek avantaj elde edebilir. Örneğin, yalnızca metni indirerek veri tasarrufu sağlayabilir ve böylece kullanıcılar bugünün haberlerini bağlantı olmadan 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ışı olduğunda kullanıcıyı bilgilendirme
Bir web uygulaması ilk kez yüklendiğinde, kullanıcılara çevrimdışı kullanıma hazır olup olmadığını bildirmelidir. Bunu, ekranın alt kısmındaki bir mesajla işlem hakkında kısa geri bildirim sağlayan bir widget ile yapın. Örneğin, bir bölüm senkronize edildiğinde veya bir dosya indirildiğinde bu widget'ı kullanabilirsiniz.
Kullandığınız dilin kitlenize uygun olduğundan emin olun ve geçerli olan 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.
Arayüzde "çevrimdışı kaydet" seçeneğini belirgin hale getirin.
Bir uygulama çok fazla veri kullanıyorsa çevrimdışı kullanım için öğe eklemeye yönelik bir anahtar veya sabitleme seçeneği olduğundan emin olun. Dosyaları yalnızca kullanıcı bir ayarlar menüsünden bu davranışı özellikle isterse 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ü öğ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 bilgilendirmeniz iyi olur.
Çevrimdışı kullanılabilen içerikleri netleştirme
Sunduğunuz seçenekler konusunda net olun. Kullanıcının cihazında depolananları ve kaydedilmesi gerekenleri 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 öz olduğundan, verilerin nerede depolandığı ve verilere kimlerin erişebildiği konusunda net olduğunuzdan emin olun.
Bir işlemin gerçek maliyetini gösterme
Birçok kullanıcı, çevrimdışı özelliği "indirme" ile eş tutuyor. 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 ya da bağlantı olduğunda içerikleri çevrimdışı kullanım için kaydeder.
Veri planı kullananlar bazen maliyet korkusuyla büyük dosyaları indirmekten kaçınır. Bu nedenle, kullanıcıların belirli bir dosya veya görev için aktif bir karşılaştırma yapabilmesi amacıyla 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 dosya boyutunu gösterebilir. Böylece kullanıcı, dosyanın maliyetini görebilir.
Saldırıya uğramış deneyimleri önlemeye yardımcı olma
Kullanıcılar genellikle farkında olmadan bir deneyimi hackler. Örneğin, bulut tabanlı dosya paylaşımı web uygulamaları yokken kullanıcıların büyük dosyaları kaydedip e-postalara ekleyerek farklı bir cihazdan düzenlemeye devam etmesi yaygın bir durumdu. İyi bir kullanıcı arayüzü, kullanıcıların çözmeye çalıştığı sorunu, saldırıya uğramış deneyime dahil olmadan çözmelerini sağlar. Ö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 sunun.
Deneyimleri bir cihazdan diğerine aktarılabilir hale getirme
Kararsız ağlar için geliştirme yaparken deneyimin aktarılabilir olması amacıyla bağlantı iyileşir iyileşmez senkronize etmeye çalışın. Örneğin, bir seyahat uygulamasının rezervasyonun ortasında ağ bağlantısını kaybettiğini düşünün. Bağlantı yeniden kurulduğunda uygulama, kullanıcının hesabıyla senkronize olur. Böylece kullanıcı, rezervasyonuna masaüstü cihazında devam edebilir ve deneyim sorunsuz bir şekilde tamamlanır.
Kullanıcıya verilerinin hangi durumda olduğunu söyleyin. Örneğin, uygulamanın senkronize edilip edilmediğini gösterebilirsiniz. Mümkün olduğunda onları bilgilendirin ancak çok fazla mesaj göndererek bunaltmamaya çalışın.
Kapsayıcı tasarım deneyimleri oluşturma
Kullanıcı deneyiminizi tasarlarken, kullanıcıyı engellemeden işlemi veya görevi tamamlamaya yönlendiren anlamlı tasarım öğeleri, sade dil, standart simgeler ve anlamlı görüntüler sunarak kapsayıcı olmaya çalışın.
Sade ve net bir dil kullanın
İyi bir kullanıcı deneyimi yalnızca arayüzünüzü tasarlamakla ilgili değildir. Bir kullanıcının uygulamanızda izlediği yolu ve bu yol boyunca karşılaştığı her şeyi (uygulamanın bu yolculuğu açıklamak için kullandığı dil dahil) içerir. Kullanıcı arayüzü bileşenlerini veya uygulamanın durumunu açıklarken teknik jargon kullanmayın. "Çevrimdışı" kelimesi, uygulamanızın ne yaptığını kullanıcıya bildirmek için genellikle yeterince net değildir.
Erişilebilir kullanıcı deneyimleri oluşturmak için birden fazla tasarım cihazı kullanma
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 ve hatta görme engelli kullanıcılar için tamamen erişilemez olabilir. Ayrıca, web tasarımında devre dışı bırakılmış öğeler için genellikle gri renk kullanıldığından, uygulamanızın çevrimdışı olduğunu göstermek için gri renkli kullanıcı arayüzü kullanmak, özellikle durumu göstermek için yalnızca renk 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 birden fazla şekilde (ör. renk, etiket ve kullanıcı arayüzü bileşenleriyle) ifade edin.
Anlam ifade eden simgeler kullanma
Simgelerinizin yanında anlamlı metin etiketleri kullandığınızdan emin olun. Tek başına simgeler, özellikle web'deki "çevrimdışı" kavramı nispeten yeni olduğundan kafa karıştırıcı olabilir. Kafası karıştıran simgelerle ilgili diğer örnekler arasında "kaydet"i temsil etmek için disket kullanılması (disket görmemiş genç kullanıcılar için anlamsız olabilir) ve "hamburger" menü simgesi yer alır.
Çevrimdışı simge kullanırken sektör standardı görseller varsa bunlarla tutarlı olun, metin etiketi ve açıklama ekleyin. Örneğin, çevrimdışı kaydetme için indirme simgesi, senkronizasyon işlemi için senkronizasyon simgesi kullanabilirsiniz. Durumu göstermek için simge kullanırken dikkatli olun. Bu simgeler, kaydetme veya indirme işlemi olarak yorumlanabilir.
Daha fazla ilham almak için Material Design simge setine göz atın.
İskelet düzenleri ve diğer geri bildirim mekanizmalarını kullanma
Uygulamanız içerik yüklerken kullanıcılara yükleme işleminin devam ettiğini gösterin. Böylece, uygulamanın bozulduğunu düşünmezler. Bunu yapmanın bir yolu, içerik yüklenirken gösterilen uygulamanızın tel çerçeve sürümü olan iskelet düzenini kullanmaktır. Ayrıca, kullanıcıya uygulamanın yüklendiğini bildiren bir metin etiketi içeren bir önyükleyici kullanıcı arayüzü veya tel çerçeve için hafifçe titreşen bir animasyon kullanarak tel çerçeveyi canlı ve yükleniyor gibi gösterebilirsiniz. Bu, kullanıcıya bir şeylerin gerçekleştiğini bildirir ve yeniden göndermeleri veya gereksiz yenilemeleri önlemeye yardımcı olur.
Geri bildirim vererek bir işlemin durumunu gösterin. Örneğin, bir kullanıcı belgeyi çevrimdışı olarak düzenliyorsa geri bildirim tasarımını, çevrimiçi durumdaki tasarımdan görünür şekilde farklı olacak ancak dosyasının "kaydedildiğini" gösterecek ve ağ bağlantısı olduğunda senkronize edilecek şekilde değiştirebilirsiniz. Bu mesaj, kullanıcıyı uygulamanızın işleyiş şekli hakkında bilgilendirir ve görev veya işleminin kaydedildiğine dair güvence vererek uygulamanızı kullanma konusunda daha rahat olmasını sağlar.
İçerik engelleme
Bazı uygulamalarda kullanıcılar yeni doküman oluşturma gibi bir işlemi tetikleyebilir. Bazı uygulamalar, yeni belgeyi senkronize etmek için bir sunucuya bağlanmaya çalışır ve bunu göstermek için ekranın tamamını kaplayan rahatsız edici bir yükleme modal iletişim kutusu gösterir. Bu yöntem, kullanıcının kararlı bir ağ bağlantısı varsa işe yarayabilir. Ancak ağ kararsızsa kullanıcı bu işlemden kaçamaz ve 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ştirilip senkronize edilecek görevleri sıraya almasına izin verin.
Yeni milyarlarca kullanıcı için tasarım
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. Veriler konusunda şeffaf ve tutumlu davranarak kullanıcılarınızın güvenini kazanın. Kötü bağlantı kullanan kullanıcılara yardımcı olmanın ve görevleri hızlandırmak için arayüzü basitleştirmenin yollarını düşünün. Veri yoğun içerikleri indirmeden önce her zaman kullanıcılara sormaya çalışın.
Bağlantısı yavaş olan kullanıcılara düşük bant genişliği seçenekleri sunun. Daha yavaş ağ bağlantılarında daha küçük öğeler sunun veya yüksek ya da düşük kaliteli öğeleri seçme seçeneği sunun.
Sonuç
Kullanıcılar çevrimdışı kullanıcı deneyimine aşina olmadığından bu deneyimin temelinde eğitim yer alır. Öğrenmelerine yardımcı olmak için tanıdık kavramlarla ilişkilendirmeye çalışın. Örneğin, daha sonra kullanmak üzere indirme işleminin verileri çevrimdışı hale getirmekle aynı şey olduğunu açıklayın.
Kararsız ağ bağlantıları için tasarım yaparken aşağıdaki yönergeleri unutmayın:
- Ağ bağlantısının başarısı, başarısızlığı ve kararsızlığı için tasarım yapın.
- Veri pahalı olabilir. Bu nedenle, kullanıcıyı düşünerek hareket edin.
- Dünya genelindeki çoğu kullanıcı için teknoloji ortamı neredeyse tamamen mobil cihazlardan oluşuyor.
- Düşük kaliteli cihazlar yaygındır. Bu cihazlarda depolama alanı, bellek ve işlem gücü sınırlıdır. Ayrıca küçük ekranlar ve daha düşük kaliteli dokunmatik ekranlar bulunur. Performansın tasarım sürecinizin bir parçası olduğundan emin olun.
- Kullanıcıların internet bağlantısı yokken uygulamanıza göz atmaları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ışı hizmet sunmaya çalışın.
- Uygulama çok fazla veri kullanıyorsa kullanıcıları, çevrimdışı kullanım için nasıl indirebilecekleri konusunda bilgilendirin.
- Deneyimleri cihazlar arasında aktarılabilir hale getirin.
- Kullanıcıya fikirleri aktarmak için dili, simgeleri, görselleri, tipografiyi ve rengi birlikte kullanın.
- Kullanıcıya yardımcı olmak için güvence ver ve geri bildirimde bulun.