Yavaş ağlar ve çevrimdışı için web deneyimleri tasarlama kılavuzu.
Bu makalede, hem yavaş ağlarda hem de çevrimdışı ortamlarda mükemmel bir deneyimin 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:
- Sağlayıcının kapsamı yetersizdir.
- Şiddetli hava koşulları.
- Elektrik kesintileri.
- Duvarları ağ bağlantılarını engelleyen binalar gibi kalıcı "ölü alanlara" girme
- Trende yolculuk veya 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 veya hiç olmadığı kültürel uygulamalar
Amacınız, 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
Sorulması gereken ilk soru, bir ağ bağlantısının başarısı veya başarısızlığının neye benzediğidir. Başarılı bir bağlantı, uygulamanızın normal çevrimiçi deneyimidir. Bununla birlikte, bir bağlantının başarısız olması, hem uygulamanızın çevrimdışı durumu hem de bir ağdaki gecikme nedeniyle uygulamanın nasıl davrandığı olabilir.
Bir ağ bağlantısının başarılı olup olmadığını düşünürken, kendinize kullanıcı deneyimiyle ilgili şu önemli soruları sormanız gerekir:
- 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?
- Hata durumunda ne yapmanız gerekir?
- Kullanıcıyı yukarıdakiler konusunda nasıl bilgilendiriyorsunuz?
Kullanıcıları o anki durum ve durum değişikliği hakkında bilgilendirin
Kullanıcıya, ağ hatası olduğunda da yapabileceği işlemler ve uygulamanın geçerli durumu hakkında bilgi verin. Ö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
Ağ bağlantısının düzeldiğini kullanıcıya nasıl bildireceğiniz uygulamanıza bağlı olarak değişir. Borsa uygulaması gibi güncel bilgilere öncelik veren uygulamalar en kısa sürede otomatik güncelleme yapıp kullanıcıyı bilgilendirmelidir.
Materyal tasarıma sahip kısa mesaj öğesi gibi görsel bir işaret kullanarak, web uygulamanızın "arka planda" güncellendiğini kullanıcıya bildirmeniz önerilir. Bu, hem bir hizmet çalışanının varlığının hem de yönetilen içerikte yapılan bir güncellemenin tespit edilmesini içerir. 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.
Ayrıca, uygulamanın en son güncellenme zamanını da göze çarpan bir alanda gösterebilirsiniz. Bu, örneğin bir para birimi dönüştürme uygulaması için faydalı olacaktır.
Haber uygulamaları gibi uygulamalar, kullanıcıyı yeni içerik konusunda bilgilendiren basit bir dokunarak güncelleme bildirimi gösterebilir. Otomatik güncelleme 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ü bitinin, başarılı bir bağlantı gerektirip gerektirmediğine bağlı olarak değişen kendi bağlamı ve işlevleri olabilir. Çevrimdışı göz atılabilen bir e-ticaret sitesi buna örnek olarak gösterilebilir. Bağlantı yeniden kurulana kadar Satın al düğmesi ve fiyatlandırma devre dışı bırakılır.
Diğer bağlamsal durum biçimleri veriler içerebilir. Örneğin, Robinhood adlı finansal uygulama, kullanıcıların hisse senedi satın almasına olanak tanıyor ve renk ile grafikler kullanarak piyasanın açık olduğunu kullanıcılara bildiriyor. Tüm arayüz beyaz renge döner ve piyasa kapandığında devre dışı kalır. Hisse senedinin değeri arttığında ya da azaldığında her bir hisse senedi widget'ı, durumuna bağlı olarak yeşil veya kırmızıya dönüşür.
Çevrimdışı modelin ne olduğunu anlamaları için kullanıcıya bilgi verin
Çevrimdışı, herkes için yeni bir zihinsel modeldir. Kullanıcılarınızı, bağlantıları olmadığında ne gibi değişiklikler yapılacağı konusunda eğitmeniz gerekir. Onlara büyük verilerin kaydedildiği yerler hakkında bilgi verin ve varsayılan davranışı değiştirmelerini sağlayacak ayarlar yapın. Hikayenin tamamını anlatmak için tek bir tasarım seçeneğine (ör. tek bir simge) bağlı kalmak yerine, bu fikirleri toplu olarak iletmek için bilgilendirici dil, simgeler, bildirimler, renk ve görüntüler gibi birden çok kullanıcı arayüzü tasarım bileşeni kullandığınızdan emin olun.
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 giderek daha fazla hayal kırıklığına uğrayabilir. Deneyimi mümkün olduğunca stabil hale getirmeye çalışın. İstikrarsız bir bağlantı, uygulamanızın güvenilmez hissetmesine neden olur. Bu durumda, ağ arızasının etkisini azaltan bir uygulama kullanıcıya sihir gibi gelir.
Haber siteleri, en son haberleri otomatik olarak indirme ve otomatik kaydetme özelliğinden yararlanabilir. Böylece, bir kullanıcı bugünün haberlerini bağlantı olmadan okuyabilir, belki de makale resimleri olmadan metni indirebilir. Ayrıca, kullanıcının davranışına uyum sağlayın. Örneğin, izleyicilerin spor bölümü genellikle görüntülediği bölümse bunu öncelikli indirme yapın.
Uygulama çevrimdışı kullanıma hazır olduğunda kullanıcıyı bilgilendirin
Bir web uygulaması ilk kez yüklendiğinde çevrimdışı kullanıma hazır olup olmadığını kullanıcıya bildirmeniz gerekir. Örneğin, bir bölüm senkronize edildiğinde veya bir veri dosyası 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 bunu yapabilirsiniz.
Kitlenize uygun olduğundan emin olmak için kullandığınız dili tekrar düşünün. Mesajın, kullanıldığı tüm durumlarda aynı olduğundan emin olun. Çevrimdışı terimi, teknik bilgisi olmayan bir kitle tarafından genellikle yanlış anlaşılır. Bu nedenle, kitlenizin bağ kurabileceği, harekete dayalı bir dil kullanın.
"Çevrimdışı kullanım için kaydet" özelliğini, yoğun veri kullanan uygulamalarda arayüzün göze çarpan bir parçası haline getirin
Bir uygulama büyük miktarlarda veri kullanıyorsa, kullanıcı ayarlar menüsü aracılığıyla bunu talep etmediği sürece, bir öğeyi otomatik indirme yerine çevrimdışı kullanıma yönelik olarak eklemek için bir anahtar veya raptiye bulunduğundan emin olun. Raptiyenin veya indirme kullanıcı arayüzünün diğer kullanıcı arayüzü öğeleri tarafından gizlenmediğinden ve özelliğin kullanıcı tarafından kolayca görülebildiğinden emin olun.
Büyük veri dosyaları gerektiren bir müzik çalar buna örnek olarak gösterilebilir. Kullanıcı, ilişkili veri maliyetinin farkındadır ancak oynatıcıyı çevrimdışı kullanmak da 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 bu konuda bilgi edinmek gerekebilir.
Çevrimdışı kullanılabilecekleri açıklayın
Sunduğunuz seçenek konusunda net olun. "Çevrimdışı kitaplık" veya içerik dizini gösteren bir sekme veya ayar göstermeniz gerekebilir. Böylece kullanıcı, telefonunda nelerin depolandığını ve nelerin kaydedilmesi gerektiğini kolayca görebilir. Ayarların kısa ve öz olduğundan, verilerin nerede depolanacağını ve verilere kimlerin erişebileceğini açıkça belirtin.
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 kesildiği 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 maliyetten korktuğu için büyük dosyaları indirmekten kaçınabilir. 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, yukarıdaki müzik uygulaması, kullanıcının veri planı kullanıp kullanmadığını algılayıp dosya boyutunu gösterebildiğinde kullanıcıların dosyanın maliyetini görebilmesini sağlar.
Deneyimlerin saldırıya uğramasını önlemeye yardımcı olma
Genellikle kullanıcılar farkında olmadan bir deneyime saldırırlar. Örneğin, bulut tabanlı dosya paylaşımı web uygulamalarından önce, kullanıcıların büyük dosyaları kaydedip e-postalara eklemesi, aynı zamanda farklı bir cihazdan düzenlemeye devam edebilmeleri için yaygın bir durumdu. Saldırıya uğrayan deneyimin içine dalmak değil, başarmaya çalıştıkları şeylere bakmak önemlidir. Diğer bir deyişle, büyük bir dosyayı eklemeyi nasıl daha kullanıcı dostu hale getirebileceğinizi düşünmek yerine, büyük dosyaları birden çok cihazda paylaşma sorununu çözün.
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 rezervasyon sürecinin 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 edilir ve böylece kullanıcının rezervasyona masaüstü cihazında devam etmesi sağlanır. Deneyimleri aktaramamak, kullanıcılar için son derece rahatsız edici olabilir.
Kullanıcıyı verilerinin güncel durumu hakkında bilgilendirin. Örneğin, uygulamanın senkronize olup olmadığını gösterebilirsiniz. Mümkün olduğunda onları eğitin ama mesajlarla aşırıya kaçmamaya çalışın.
Kapsayıcı tasarım deneyimleri oluşturun
Tasarım aşamasında anlamlı tasarım cihazları, basit bir dil, standart ikonlar ve ilerlemesini engellemek yerine kullanıcıyı eylemi veya görevi tamamlamaya yönlendirecek anlamlı görüntüler sağlayarak kapsayıcı olmayı hedefleyin.
Basit, kısa ve öz bir dil kullanın
İyi bir kullanıcı deneyimi yalnızca iyi tasarlanmış bir arayüzden ibaret değildir. Burada kullanıcının izlediği yol ve uygulamada kullanılan kelimeler bulunur. Uygulamanın durumunu veya tek tek kullanıcı arayüzü bileşenlerini açıklarken teknoloji jargonu kullanmaktan kaçının. "Çevrimdışı uygulama" ifadesi, kullanıcıya uygulamanın mevcut durumunu aktarmayabilir.
Erişilebilir kullanıcı deneyimleri oluşturmak için birden fazla tasarım cihazı kullanın
Durum değişikliğini veya mevcut durumu 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 tarafından fark edilmeyebilir ve görsel engelli kullanıcılar tarafından erişilemeyebilir. Ayrıca tasarımcıların amacı, gri renkli kullanıcı arayüzünü çevrimdışı olarak göstermektir, ancak bunun web'de önemli bir anlamı olabilir. Bir formdaki giriş öğeleri gibi gri renkli kullanıcı arayüzü, öğelerin de devre dışı bırakıldığı anlamına gelir. Durumu göstermek için yalnızca renk kullanırsanız bu durum karışıklığa neden olabilir.
Yanlış anlaşılmaları önlemek için farklı durumları kullanıcıya çeşitli yollarla (ör. renk, etiketler ve kullanıcı arayüzü bileşenleri) ifade edin.
Anlam ifade eden simgeler kullanma
Bilginin anlamlı metin etiketleri ve simgelerle doğru bir şekilde iletildiğinden emin olun. Web'de çevrimdışı kavramı nispeten yeni olduğundan simgeler tek başına sorunlu olabilir. Kullanıcılar kendi başlarına kullandıkları simgeleri yanlış anlayabilir. Örneğin, kaydetme amacıyla disket kullanmak daha büyük bir nesil için mantıklı olsa da, hiç disket görmemiş genç kullanıcılar bu metaforla kafa karışıklığına neden olabilir. Benzer şekilde, "hamburger" menü simgesinin etiketsiz sunulduğunda kullanıcıların kafasını karıştırdığı bilinmektedir.
Çevrimdışı simge kullanırken metin etiketi ve açıklama sağlamanın yanı sıra, sektör standardı görsellerle (mevcutlarsa) tutarlı olmaya çalışın. Örneğin, çevrimdışına kaydetme işlemi tipik bir indirme simgesi olabilir veya işlem senkronizasyon içeriyorsa bir senkronizasyon simgesi olabilir. Bazı işlemler, bir ağın durumunu göstermek yerine çevrimdışına kaydetme olarak yorumlanabilir. Kullanıcıya soyut bir kavram sunmak yerine aktarmaya çalıştığınız işlemi düşünün. Örneğin, veri kaydetme veya indirme işlemleri işleme dayalı olur.
Çevrimdışı, bağlama bağlı olarak indirme, dışa aktarma, sabitleme gibi çeşitli anlamlara gelebilir. Daha fazla fikir edinmek için Materyal Tasarım simge grubu bölümüne bakın.
İskelet düzenleri diğer geri bildirim mekanizmalarıyla birlikte kullanın
İskelet düzen, temelde uygulamanızın içerik yüklenirken görüntülenen tel çerçeve sürümüdür. Bu, kullanıcıya içeriğin yüklenmek üzere olduğunu göstermeye yardımcı olur. Kullanıcıyı uygulamanın yüklendiğini bildiren bir metin etiketiyle birlikte bir ön yükleyici kullanıcı arayüzü de kullanmayı düşünebilirsiniz. Örneğin, tel çerçeve içeriğini titreterek uygulamaya canlı olduğu ve yüklendiği hissini verebilir. Bu, kullanıcıya bir şey olduğundan emin olmalarını sağlar ve uygulamanızın yeniden gönderilmesini veya yenilenmesini önlemeye yardımcı olur.
İçeriği engelleme
Bazı uygulamalarda, kullanıcı, yeni doküman oluşturma gibi bir işlemi tetikleyebilir. Bazı uygulamalar, yeni dokümanı senkronize etmek ve bunu göstermek için ekranın tamamını kaplayan araya giren bir yükleme kalıcı iletişim kutusu görüntülemek üzere bir sunucuya bağlanmayı dener. Kullanıcının stabil bir ağ bağlantısı varsa bu işlem iyi sonuç verebilir. Ancak ağ kararsızsa kullanıcı bu işlemden kaçamaz ve kullanıcı arayüzü, kullanıcının başka bir şey yapmasını engeller. İçeriği engelleyen ağ isteklerinden kaçınılmalıdır. Kullanıcının uygulamanıza göz atmaya devam etmesine ve bağlantı iyileştikten sonra gerçekleştirilen ve senkronize edilecek görevleri sıraya sokmasına izin verin.
Kullanıcılarınıza geri bildirim sağlayarak bir işlemin durumunu gösterin. Örneğin, kullanıcı bir dokümanı düzenliyorsa geri bildirim tasarımını, kullanıcının çevrimiçi olduğu zamana göre görsel olarak farklı olacak, ancak yine de dosyasının "kaydedildiği" ve bir ağ bağlantısına sahip olduğunda senkronize edileceğini gösterecek şekilde değiştirmeyi düşünün. Bu, kullanıcıyı mevcut farklı durumlar hakkında eğitir ve görevinin veya eylemlerinin kaydedildiğine dair güvence verir. Bu, kullanıcının uygulamanızı kullanırken kendine daha fazla güvenmesi gibi ek bir faydası da vardır.
Milyarlarca kullanıcı için tasarlayın
Çoğu bölgede düşük teknolojiye sahip cihazlar yaygındır, bağlantı güvenilir değildir ve birçok kullanıcı için veriler uygun değildir. Veriler konusunda şeffaf ve tutumlu davranarak kullanıcıların güvenini kazanmanız gerekir. Zayıf bağlantıları olan kullanıcılara yardımcı olmanın ve görevleri hızlandırmaya yardımcı olacak arayüzü basitleştirmenin yollarını düşünün. Çok fazla veri içeren 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. Bu nedenle, ağ bağlantısı yavaşsa küçük öğeler gönderin. Yüksek veya düşük kaliteli öğeleri seçme seçeneği sunun.
Sonuç
Kullanıcılar bu kavramlara aşina olmadığından eğitim, çevrimdışı kullanıcı deneyiminin anahtarıdır. Bilindik öğelerle ilişkilendirmeler oluşturmaya çalışın.Örneğin, daha sonra kullanmak üzere indirmek verileri çevrimdışı kullanmakla aynı şeydir.
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.
- Veriler pahalı olabilir, bu nedenle kullanıcılara dikkat edin.
- Dünya genelindeki çoğu kullanıcı için teknolojik ortam neredeyse tamamen mobildir.
- Depolama alanı, hafızası ve işlem gücünün sınırlı olması, küçük ekranlara ve daha düşük dokunmatik ekran kalitesine sahip düşük kaliteye sahip cihazlar yaygın olarak kullanı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 indirebilecekleri 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.