Duyarlı Tasarım: En İyi Uygulamalar ve Hususlar

Duyarlı web siteleri, yalnızca masaüstünde değil, mobilde, tablette ve hatta bazen TV'de de tüm ekran boyutlarına ve çözünürlüklerine uyum sağlayan web siteleridir.

Statista'ya göre, 2017'deki tüm küresel trafiğin %52,64'ünden mobil trafik sorumluydu, bu da mobil cihazlar için iyi optimize edilmemiş bir web sitesinin trafiğinin yaklaşık yarısını kaybettiği anlamına geliyor. 2018'in sonunda, mobil cihazlar için küresel trafik payının olağanüstü bir artışla %79'a çıkması bekleniyor.

Mobil web sitesi olmayan işletmeler endişe verici bir oranda geride kalıyor çünkü 10 ziyaretçiden 8'i cihazlarında iyi görüntülenmeyen bir web sitesiyle etkileşime girmeyi bırakacak. Kullanıcıların geri düğmesine basması ve bunun yerine rakip bir işletmeyi denemesi çok kolay ve Google, yanıt vermeyen web sitelerini aramalarında daha alt sıralarda sıralıyor .

Google'ın mobil uyumluluk testini buradan yapabilirsiniz.

Bunlardan herhangi biri, mobilin masaüstünden daha önemli olduğu anlamına mı geliyor? Hayır. Mobil kullanıcıların %83'ü, isterlerse deneyime masaüstünde devam edebilmeleri gerektiğini söylüyor.

eBay'in mobil cihazlar için optimize edilmiş bu sürümünün, mobil cihazlar için optimize edilmemiş olsaydı nasıl görüneceğini karşılaştırmasına bir göz atın. Optimize edilmemiş versiyonu da düşünür müsünüz?

Günümüz internetinde rekabet edebilecek web siteleri tasarlamak için web tasarımcılarının duyarlı web tasarımı (RWD) konusunda uzman olması gerekir . Nereden başlamalılar?

Duyarlı Web Tasarımına Öncelikli Mobil Yaklaşım

Mobil öncelikli web tasarımı, önce mobil web sitesini tasarlamak ve masaüstü sürümüne kadar çalışmak anlamına gelir. Bu yaklaşımın iyi çalışmasının birkaç nedeni vardır.

1. Mobil web siteleri daha fazla kullanılabilirlik kaygısına sahiptir (bu çoğunlukla ekran gayrimenkulünün olmamasından kaynaklanır), bu nedenle birincil odak noktasının mobil tasarım olması pratik ve daha verimlidir.
2. Mobil sürümü büyütmek, masaüstü sürümünü küçültmekten daha kolaydır (yine, mobil web sitelerinde yer olmaması nedeniyle).
3. Mobil öncelikli web tasarımı, görsel ve işlevsel olarak gerekli olanı yeniden değerlendirmeye yardımcı olur.

Bir web sitesini mobil öncelikli yanıt veren bir site olarak tasarlamak, tasarımcıları bir dizi önemli soru sormaya zorlar çünkü üzerinde çalışacak daha az ekran alanı vardır. İşte sorulması gereken sorular:

• Bu özellik/işlev gerçekten gerekli mi?
• Önce mobil cihazlar için minimalist olan ve daha sonra masaüstü bilgisayarlar için iyi ölçeklenecek bir şeyi nasıl tasarlayabiliriz?
• Bu görsel efekt, mobil cihaza yüklenmesi için geçen süreye değer mi?
• Birincil amaç nedir ve hangi görsel öğeler kullanıcıların bunu başarmasına yardımcı olur?

Birazdan bazı duyarlı web tasarım örneklerine göz atacağız. Şimdilik, bugün hangi cihazların, ekran boyutlarının ve web tarayıcılarının alakalı olduğundan bahsedelim.

Duyarlı Web Tasarımı için Hangi Ekran Çözünürlükleri Önemlidir?

İşte dünya çapında mobil, tablet ve masaüstü kullanıcıları arasında en yaygın ekran çözünürlükleri. Gördüğünüz gibi, çok çeşitli çözünürlükler var, bu nedenle ne mobil, ne tablet ne de masaüstü şu anda pazar payına hakim değil - bu bize tasarımcıların duyarlı web tasarımı hakkında düşünürken hepsini göz önünde bulundurmaları gerektiğini söylüyor.

• 360x640 (küçük mobil): %22,64
• 1366x768 (ortalama dizüstü bilgisayar): %11,98
• 1920x1080 (büyük masaüstü): %7,35
• 375x667 (ortalama mobil): %5
• 1440x900 (ortalama masaüstü): %3.17
• 720x1280 (büyük mobil): %2.74

Cihaz dökümünde olduğu gibi, hedef kitlemizin kullanıcı demografisi (veya beklenen kullanıcı demografisi) ile eşleşmesi için verileri konuma göre bölümlere ayırmalıyız. Ayrıca, popülerlik kazanan çözünürlüklere hitap etmeye değer, çünkü bazı ekran boyutları şu anda o kadar yaygın olmasa da gelecekte olabilir. Bu, duyarlı tasarımcıların pazar payı değiştiğinde bile çalışacak geleceğe yönelik UX oluşturmasına yardımcı olacaktır.

Örneğin, 360x640 çözünürlükler (çoğunlukla Android kullanan Samsung cihazlarına karşılık gelir) geçen yıl %5,43 arttı. Tasarımcılar, bir web sitesi tasarımına başlamadan önce önemli duyarlı kesme noktalarına karar vermek için bunun gibi değerli bilgileri kullanabilir.

Bugün Hangi Web Tarayıcıları Popüler?

Duyarlı web tasarımı, herhangi bir cihazda sorunsuz bir deneyim sunmakla ilgilidir ve farklı web tarayıcıları web sayfalarını farklı şekillerde oluşturduğundan, web sitelerinin çeşitli mobil ve masaüstü web tarayıcılarıyla uyumlu olduklarından emin olmak için test edilmesi gerekir.

Bir web sitesini doğru duyarlı kesme noktalarına göre ölçeklendirmek öncelikle bir web geliştiricisinin sorumluluğu olsa da, duyarlı bir web sitesinin en uygun kullanıcı deneyimini oluşturmak için çeşitli ekran boyutlarına nasıl uyum sağlayacağına tam olarak web tasarımcısı karar verir.

İşte mobil ve masaüstü için web tarayıcısı pazar payının dünya çapındaki dağılımı.

• Krom: 55.04%
• Safari: %14,86
• UC Tarayıcı: %8,69
• Firefox: %5,72
• Opera: %4.03
• Internet Explorer: %3.35

Duyarlı tasarım sadece "her şeyi uygun hale getirmek" ile ilgili değildir - aynı zamanda cihaz donanımının ve web tarayıcısının yeteneklerine ve ayrıca cihaz çözünürlüğüne uyum sağlamakla ilgilidir. Bunun bir örneği, Google Chrome'un CSS özelliği overscroll-behavior: (kullanıcı görünümün kenarına doğru çok fazla kaydırdığında ne olacağını tanımlar) desteklerken, başka hiçbir web tarayıcısında desteklenmemesi olabilir.

Duyarlı Tasarım En İyi Uygulamaları

Sürtünmeyi ortadan kaldırın

Daha önce de belirtildiği gibi, duyarlı web tasarımına mobil öncelikli bir yaklaşım, tasarımcıların, kullanıcının ana hedeflerine ulaşması için gerçekten gerekli olanı değerlendirmesine yardımcı olacaktır.

Tablet sürümünü (ve daha sonra masaüstü sürümünü) oluştururken, ikincil hedefler ve bu kullanıcı hedeflerine ulaşılabilir kılan mikro etkileşimler, kullanıcı akışları ve CTA'lar (harekete geçirici mesajlar) hakkında düşünmeye başlayabiliriz. Daha da önemlisi, önce kullanıcının birincil hedeflerine odaklanmamız ve ne birincil ne de ikincil hedeflere yardımcı olan gereksiz sürtünmeleri ortadan kaldırmamızdır .

Birincil amaç bir ürünün satın alınması olabilirken, ikincil amaç bir haber bültenine kaydolmak olabilir (bu daha sonra bir satın almayla sonuçlanabilir).

Sürtünmeyi ortadan kaldırmak için harika bir örnek: Mobil kullanıcı arayüzlerinde gezinmek genellikle daha zor olduğundan, mobil e-ticaret mağazaları için tek sayfalık ödemeye geçmek ve yalnızca masaüstü e-ticaret mağazaları için çok adımlı ödemeyi etkinleştirmek en iyisidir.

Başparmak için Tasarım

Duyarlı web tasarımı, kullanıcıların masaüstü web sitesiyle tıklamalar, mobil sürüm ise dokunma ve kaydırma yoluyla etkileşime girmesi anlamında zordur. Fiziksel farklılıklar da var. Masaüstü kullanıcıları genellikle bilgisayarlarını bir yüzeyde tutarken, mobil kullanıcılar cihazlarını ellerinde tutar. Bu farklılıklar, mobil UI tasarımcılarının hafifçe vurma hedeflerini ve kullanıcıların etkileşimde bulunduğu diğer önemli UI öğelerini tasarlama biçimini önemli ölçüde değiştirir.

Bazı örneklere bir göz atalım:

• İnsanlar genellikle ana masaüstü navigasyonunun en üstte olmasını bekler; ancak, mobil cihazlarda en altta olmalıdır. Başparmaklar tepeye rahat ulaşmıyor.
• Diğer etkileşimli öğelere de ulaşmak kolay olmalıdır. Bu, başparmakların cihaz ekranlarının kenarlarına ve köşelerine ulaşması daha zor olduğu için onları ekranın ortasında tutmak anlamına gelir.
• Kolayca dokunulabilmeleri için önemli bağlantılar ve CTA'ların yüksekliği en az 44 piksel olmalıdır (daha küçük hafifçe vurma hedefleri kullanılabilirlik açısından kötüdür).

Önerilen okuma: Mobil Kullanılabilirlik için Temel Kılavuz.

Mobil Cihazların Yerel Donanımından Yararlanın

Mobil donanım (cihaz kamerası veya GPS hizmetleri gibi) yerel uygulamalar için özel olarak ayrılmamıştır ve daha önce belirtildiği gibi, duyarlı web tasarımı yalnızca "her şeyi uygun hale getirmek" ile ilgili değildir. Aynı zamanda cihazın özelliklerine uyum sağlamakla da ilgilidir. Mobil web tasarımı söz konusu olduğunda, mobil cihazların kullanımı kolay kameralara sahip olduğundan, web siteleri mevcut yerel donanımdan yararlandığı sürece, veri girişi gibi bazı mikro etkileşimler aslında daha küçük ekranlarda daha kolaydır.

Bazı örneklere bir göz atalım:

• Kredi/kontör kartı taraması (çünkü formlar mobil cihazlarda genellikle zorlayıcıdır)
• Medya zaten cihazınızda olduğu için sosyal medyada fotoğraf paylaşımı
• İki faktörlü kimlik doğrulama (çünkü zaten mobil cihazınızdasınız)
• Stokları/analitiği hızla kontrol edin (çünkü mobil uygulamalar bilgiyi basitleştirir)
• Sesli web araması yapma (çünkü eller serbest yazmaktan daha kolaydır)

Varsayılan Olarak Düzenleri Akışkan/Uyarlanabilir Yap

Her kullanıcı masaüstü tarayıcısını en üst düzeye çıkarmaz. Bu, tasarımcıların, kullanıcıların bugün kullandığı cihazların duyarlı kesme noktalarını dikkate almaları gerekirken, bu kesme noktaları arasında neler olduğunu da hesaba katmaları gerektiği anlamına gelir.

Düzeni ve içeriği yeni bir cihaza "yeniden akıtmak" için duyarlı kesme noktaları kullanılmalıdır, ancak aradaki tüm boyutları hesaba katmak için (her ihtimale karşı), düzenlerin aksi takdirde akıcı olması gerekir (yani, doğal olarak uyarlanırlar/gerilirler). tarayıcı yeniden boyutlandırılır).

Değişken/uyarlanabilir düzenler tasarlarken bu ipuçlarını aklınızda bulundurun:

• Yüzde birimleri, elemanların akışkan olmasına izin verecektir.
• Minimum ve maksimum genişliklerin ayarlanması “ancak bundan daha küçük/daha büyük gitme” senaryosunu etkinleştirebilir.
• SVG görüntü biçimleri, kalite kaybı olmadan yukarı ve aşağı ölçeklenebilir ve çözünürlükten bağımsızdır (olmayan JPG ve PNG'lerin aksine).

Peyzaj Yönlendirmeyi Unutmayın

Daha önce belirli duyarlı kesme noktalarından bahsetmiştik, ancak bu mobil görünüm pencerelerinin yatay yönde de görüntülenebileceğini düşünmemiz gerekiyor. Akışkan bir düzen uygulamak, içeriği teknik olarak uyarlanabilir hale getirirken, portre görünüm alanının önemli bir bölümünü kaybetmek, kullanılabilirlik ve erişilebilirlik açısından bir engel olabilir.

Gezinmeler genellikle güvenlidir (bazen daha iyidir, çünkü kullanıcılar genellikle iki başparmak ile yatay yönde gezinirler), ancak kaydırma önemli ölçüde zorlaşır, bu da kullanıcının yatay üzerinde daha fazla kaydırma yapması gerektiğinden optimalden daha azdır.

Tasarımcılar peyzaj kırılma noktaları için de tasarım yapmayı düşünmek isteyebilirler; örneğin, mobil cihazlarda dikey olarak yığılan döşemeli öğeler, kullanıcının kaydırma yapması gerekmediği anlamına gelen sol ve sağ gezinme düğmeleriyle bir kaydırıcı olarak görüntülenebilir.

Tipografinin Duyarlı Olabileceğini Unutmayın

UX tasarımcıları web sitelerini tasarlamak için tipik olarak piksel birimlerini kullansalar da, gerçek web'de bir noktanın artık bir piksele eşit olması gerekmez, çünkü farklı cihazların farklı çözünürlükleri vardır. Örneğin iPhone X, 458 PPI'ye (İnç Başına Piksel) sahiptir, bu nedenle piksel boyutları küçülürken, aynı fiziksel alanda daha net grafikler elde edebiliyoruz (Apple buna “Retina” teknolojisi diyor ve Android buna diyor "hDPI").

Bu, örneğin 16 piksellik bir yazı tipi boyutunun, çözünürlüğüne bağlı olarak bazı cihazlarda daha büyük veya daha küçük görüneceği anlamına gelir. Web geliştiricileri, genellikle 1em'in 1 puntoya eşit olduğu bir duyarlı birim türü olan yazı tipi boyutlarını tanımlamak için em birimlerini kullanır.

Zeplin, Sympli, Marvel ve InVision gibi tasarım aktarma araçları, tasarımcıların ortak sorumluluk gerektiren konularda geliştiricilerle işbirliği yapmasına yardımcı olabilir. Tasarımcılar tasarımı, geliştiriciler ise kodu yürütürken, bir bütün olarak ürün tasarımı iş akışı, sağlam iletişim gerektiren bir ekip çalışmasıdır.

Duyarlı Tasarım Performans Optimizasyonu İpuçları ve En İyi Uygulamalar

Duyarlı web tasarımı sadece nasıl göründüğü ile değil, aynı zamanda nasıl davrandığı ve hissettirdiği ile de ilgilidir. Web sitelerini, amaçlanan cihazda daha hızlı yüklenecek şekilde uyarlamak da aynı derecede önemlidir.

Tembel Yük Hayati Olmayan Resim ve Videolar

Görüntüler ve videolar, bir web sitesinin toplam indirme boyutunun büyük bir bölümünü oluşturur, ancak hepsini bir kerede yüklemeniz gerekmez. Medyanın oluşturulmasının geciktirilebileceği iki senaryo vardır: Ekranın altındaki içerik, kullanıcı ekranın altına kaydırdıkça yüklenebilir ve oluşturmayı engelleyen medyanın indirilmesi, yalnızca düzen ve içerik indirildikten sonra yapılmalıdır. Bu uygulamaya, sayfa performansını artırmak için ağır, önemli olmayan öğelerin yüklenmesinin geciktirildiği tembel yükleme denir.

Koşullu Yükleme

Bazı web sitesi öğeleri, mobil kullanıcılar için tasarlanmamıştır veya en azından ekstra bilişsel yüke değmez. Mobil web sitelerimizin basit olmasını istiyoruz, bu nedenle belirli senaryolarda öğeleri gizlemek mantıklı. Bununla birlikte, gizlenmiş olsalar bile bu öğeleri yükleyerek tarayıcı kaynaklarını ve bant genişliğini boşa harcamadığımızdan emin olmalıyız; bu nedenle, bu öğeleri yalnızca belirli koşullarda dahil etmek en iyi uygulamadır.

Bir kez daha, bir geliştirici bunu kodla başarabilir; ancak tasarımcılar, belirli öğelerin ne zaman ve nerede olması ve olmaması gerektiğine ilişkin koşulları ileterek sayfa performansını iyileştirebilir.

Duyarlı Görüntüler

Daha önce de belirtildiği gibi, bazı cihazlar inç başına daha fazla piksel görüntüler, bu da doğru çözünürlükte dışa aktarılmazsa görüntülerin bulanıklaşmasına neden olabilir. Cihazın çözünürlüğüne bağlı olarak, bazıları iki katı (@2x), üçlü (@3x) ve hatta dörtlü (@4x) boyutta görüntüler gerektirir. Web tarayıcıları artık cihaza bağlı olarak doğru görüntü çözünürlüğünü seçen <picture> öğesini desteklemektedir.

Duyarlı web siteleri hazırlayan tasarımcılar, günümüzün cihazlarında kullanılan tüm çözünürlüklerde dışa aktardığınızdan emin olarak görüntüleri doğru cihaza uyarlayabilir (emin değilseniz geliştiricinize sorun - duyarlı web tasarımı söz konusu olduğunda iletişim çok önemlidir).

Çözüm

Tel çerçeveleme, tasarım sürecinin başlarında kırışıklıkları gidermeye yardımcı olabilir ve bu, duyarlı web tasarımına mobil öncelikli bir yaklaşım benimsendiğinde iyi sonuç verir. Belki biraz daha fazla dikkat gerektiren duyarlı bir kesme noktası vardır veya belki de mobil yanıt verme açısından etkili olmayan bir kavram vardır. Yoldaki tümsekleri gecikmeden (yani görsel estetik eklemeden önce) bulmak daha iyidir.

Adobe XD, Marvel ve InVision gibi modern tasarım araçları, ekiplerin prototipleri gerçek cihazlarda test etmesine, geri bildirimi bağlam içinde tartışmasına ve genellikle tüm senaryolarda düzen çalışana kadar ekip olarak işbirliği yapmasına olanak tanır.

Duyarlı tasarımın dahili testler ve geri bildirimlerle yönlendirildiği yalın bir UX iş akışı kullanmak, kullanıcı deneyiminin ilk kez gerçek bir kullanıcıya sunulmadan önce tüm platformlarda ve ekran çözünürlüklerinde sorunsuz çalışmasını sağlayacaktır.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

• eCommerce UX – En İyi Uygulamalara Genel Bir Bakış (Infografik ile)
• Ürün Tasarımında İnsan Merkezli Tasarımın Önemi
• En İyi UX Tasarımcı Portföyleri – İlham Veren Vaka Çalışmaları ve Örnekler
• Mobil Arayüzler için Sezgisel İlkeler
• Öngörülü Tasarım: Büyülü Kullanıcı Deneyimleri Nasıl Yaratılır