Duyarlı tasarım nasıl kontrol edilir

Duyarlı tasarım kontrol listesi, kişinin farklı ekran boyutlarında bir görevi bitirip bitiremeyeceğini söylemelidir. Düzenli bir mobil ekran görüntüsü yararlı kanıttır; ancak menünün kapanıp kapanmadığını, karşılaştırmanın anlaşılır kalıp kalmadığını veya gönder düğmesinin klavyenin arkasında kaybolup kaybolmadığını söyleyemez.

Görevle başlayın, sonra onu yaparken düzeni inceleyin. Pazarlama sayfasında bu, teklifi anlamak, planları karşılaştırmak ve sonraki adımı bulmak olabilir. Ürün arayüzünde bir kaydı bulmak, tek değeri değiştirmek ve sonucu doğrulamak olabilir. Hangi değişikliklerin yardımcı olduğunu, hangilerinin sorunu başka yere taşıdığını anlayabilmek için genişlikler boyunca aynı görevi kullanın.

Sorunları ortaya çıkarabilecek tek sayfa hazırlayın

İncelemeyi anlamlı kılacak çeşitlilikte sayfa seçin. Neredeyse boş açılış sayfası kolayca geçerken fiyatlandırma sayfası başarısız olabilir. Gezinme, kapsamlı başlık, görsel, yinelenen içerik ve en az bir önemli eylem içeren sayfa seçin. Sitede form veya veri tablosu varsa o örüntüyü içeren sayfayı da ekleyin.

Kontrolden önce olağandışı derecede elverişli örnek içeriği değiştirin. “Ekip” adlı kartın, “Bölgesel operasyonlar ve müşteri desteği” ile aynı sorunları ortaya çıkarması olası değildir. Gerçekçi açıklamalar, olağan en uzun gezinme etiketi ve bir kenarına yakın belirgin konusu olan görsel kullanın. Bunlar test girdileridir; anlamsız içerikle sayfayı bozmaya çalışma değildir.

Nelerin mümkün kalması gerektiğini yazın. Kurgusal atölye rezervasyon sayfasında ziyaretçi tarihi okuyabilmeli, konumu anlamalı, oturum seçeneklerini karşılaştırmalı ve rezervasyon başlatabilmelidir. Dar düzen yer kazanmak için konumu gizliyorsa görsel kompozisyon daha temiz görünse bile görev için gereken bilgi kaybolmuştur.

Kontrol noktaları kullanın, sonra aralarını inceleyin

Masaüstü, tablet ve mobil önizlemeler pratik başlangıçtır. Sayfanızın karşılaşacağı bütün koşullar değildir. Boyutu değiştirilebilir tarayıcı penceresi, bölünmüş ekranlı tablet veya yakınlaştırılmış sayfa, düzeni hiçbir cihaz hazır ayarının kapsamadığı genişliklerde bırakabilir.

Dar, orta ve geniş birer kontrol noktası seçin. Belirli sayılardan daha önemli olan, kitlenizle ilgili koşulları kapsamaktır. İlk incelemede yaklaşık 360, 768 ve 1440 CSS pikselini inceleyip aralarında yavaşça boyut değiştirebilirsiniz.

Özellikle yapısal değişikliklerin yakınlarına bakın. Başlık geniş noktada rahat sığıp dar noktada doğru kapanabilir, ama geçişten hemen önce sıkışabilir. Üç sütunlu bölüm, ara genişlikte üst öğenin sağladığından daha fazla alana ihtiyaç duyabilir. Sorun çoğu zaman kırılma noktasının kendisinde değil öncesinde görünür.

web.dev’in duyarlı tasarım rehberi, düzen değişikliklerini cihaz adlarına değil içerik ihtiyaçlarına göre seçmeyi önerir. Bileşenin rahat çalışmayı bıraktığı ilk genişliği kaydederek bu ilkeyi uygulayın. Böylece değişikliğin nedeni ve sonrasında yeniden test edilecek yararlı nokta belli olur.

Yararlı bir referans: GOV.UK okuma görevini korur

GOV.UK düzen rehberi, küçük ekranlarda tek sütunla başlar ve birçok geniş sayfa için üçte iki genişliğinde okuma sütunu önerir. Resmî üçte iki/üçte bir örneği, alan daraldığında aynı içeriğin dikey diziye dönüşmesini gösterir.

Alınacak yararlı şey kesir değil ilişkidir. Ana açıklama önce kalır, destekleyici malzeme onu izler. Kendi sayfanızda ödeme öncesi gereken hukuki koşul, yan sütuna güzel sığıyor diye ikincil değildir. Ona daha düşük öncelik veren düzeni kopyalamadan önce rolüne karar verin.

Bu, “sütunlar alt alta geliyor”dan daha keskin bir test üretir. Destek sütunundaki bir cümleyi seçin ve hangi eylemi nitelediğini belirleyin. Alt alta geldikten sonra okur o cümleyi hiç görmeden eylemle karşılaşabiliyor mu? Öyleyse duyarlı uygulama geometrik olarak doğru, editoryal olarak yanlış olabilir. Koşulu eylemle birlikte taşıyın veya bağımlılığı açık kılın.

İkinci yararlı test, sayfayı klavyeyle izlemektir. Görsel yeniden sıralama kaynak sırasını değiştirmeyebilir. Ekran kontrolü açıklamadan sonra gösterirken odak ona açıklamadan önce ulaşıyorsa incelemede hem düzen hem okuma sırası kanıtı gerekir. Tek ekran görüntüsü bu uyuşmazlığı çözemez.

Duyarlı tasarım testini göreve dayandırın

Aşağıdaki kontrolleri başlangıç kaydı olarak kullanın; sayfanızda bulunmayan satırları kaldırın. Beklenen sonucu incelemeden önce yazın, yoksa kusuru gördükten sonra mazur görmek kolaylaşır. Aşağıdaki örnekler test koşullarıdır; evrensel kırılma noktası ayarları değildir.

Bu gözlemlerin tümünü tek geçme yüzdesinde birleştirmeyin. Kırpılan dekoratif açıklama ile erişilemeyen ödeme eylemi eşdeğer başarısızlıklar değildir. Önce engellenen görevleri, sonra yanlış veya eksik bilgileri, ardından okuma rahatlığını ve görsel ayrıntıları düzeltin. Bu sıra, eksik incelemenin her cihaz desteğini kanıtladığını varsaymadan küçük ekibe uygulanabilir yayın kararı verir.

Sayfayı kullanım sırasında adım adım inceleyin

Gezinme: açın, seçin, kapatın, yeniden açın

Düzenle değişen her gezinme kontrolünü açın. Menü simgesi kusursuz hizalı görünüp kullanılamayan panel açabilir. Açık durumu inceleyin, hedef seçin, paneli kapatın ve yeniden açın. İç içe gezinme varsa ilk düzeyde durmak yerine daha derin bir öğeyi test edin.

Atölye örneğinde geniş başlık Oturumlar, Konuşmacılar, Mekân ve Yer ayırt bağlantılarını gösterebilir. Dar sürüm ilk üçünü panele taşıyabilir. Mekân’ın hâlâ bulunduğunu, etiketinin okunabildiğini ve paneli kapatmanın arada saydam kaplama bırakmadan ziyaretçiyi sayfaya döndürdüğünü kontrol edin.

Menü ile ekranın kalanı arasındaki ilişkiye dikkat edin. Uzun panelin kendi kaydırması gerekebilir veya sayfanın kaymasına izin vermesi gerekebilir. Hangi yaklaşımı seçerseniz seçin, ziyaretçi son öğeye ve kapatma kontrolüne ulaşabilmelidir. Yalnızca görünüm alanı yeterince uzunsa çalışan panel de duyarlı tasarım sorunudur.

Görevi klavyeyle tekrarlayın. Düzen değişiminin kontrolü ulaşılamaz bırakıp bırakmadığını veya geçerli odağı gizleyip gizlemediğini inceliyorsunuz. Düzeltmenin hedeflenebilmesi için soruna yol açan tam diziyi kaydedin.

Okuma sırası: mobil diziyi izleyin

Sütunlar tek yığına dönüştüğünde okuma sırası yeniden incelenmelidir. Masaüstü sürümü artık var olmayan mekânsal ilişkilere dayanıyor olabilir. Açıklamanın yanındaki fiyat, ondan birkaç ekran uzağa gidebilir. Görsel açıklaması önceki yerine sonraki görseli anlatıyor gibi görünebilir.

Masaüstü düzenine bakmadan dar sayfayı aşağı doğru okuyun. Her bölümün sizi sonra neyi anlamaya hazırladığını sorun. Rezervasyon sayfasında ziyaretçiden oturum seçmesi beklenmeden oturum ayrıntıları gelmelidir. Seçim ile açıklaması arasına büyük dekoratif görsel koymak eylemi kopuk hissettirebilir.

Dönüşümlü masaüstü bölümlerine dikkat edin. Solda görsel/sağda metin bölümünü sağda görsel/solda metin bölümü izliyorsa uygulama kaynak öğeleri doğrudan üst üste koyduğunda mobil sıra tutarsız olabilir. Her görselin metni tanıtıp tanıtmadığına veya ardından örnekleyip örneklemediğine karar verin; içerik aynı amaca hizmet ediyorsa ilişkiyi tutarlı kılın.

Taşma: gizlemeden önce nedeni bulun

Bütün sayfayı kaydırın ve kapsayıcısından taşan içeriği arayın. Kırpılan düğme etiketi, ekrandan çıkan kart kenarı ve komşu içeriği yerinden iten altbilgi bağlantısı yaygın ipuçlarıdır. Kaplamaları ve genişletilmiş içeriği de kontrol edin; durağan sayfa sığarken açık kontrol sığmayabilir.

Kazara taşmayı bilinçli kaydırma bölgesinden ayırın. Geniş karşılaştırma tablosunun kendi alanında yatay kayması makul olabilir. Tek büyük çizim nedeniyle bütün sayfanın yana hareket etmesi farklı sorundur. Yatay kaydırma bilinçliyse ziyaretçinin daha fazla içerik olduğunu fark etmesi ve ne okuduğunu takip etmesi gerekir.

Genel bir taşmayı gizleme kuralını tamamlanmış onarım saymayın. Dış kenarı temiz gösterirken soruna yol açan öğeyi kesebilir. Önce sorumlu öğeyi bulun; sonra genişliğin, satır kaymasının, konumun veya kapsayıcının değişip değişmeyeceğine karar verin. Değişiklikten sonra yararlı içeriğin yalnızca kaybolmadığını doğrulayın.

Atölye sayfasında uzun mekân adlı bilet kartını düşünün. Yararlı çözüm adın satıra kaymasına ve kartın büyümesine izin vermek olabilir. Karttaki bütün metinleri küçültmek de sığdırır, ancak soruna yol açmayan bilgiye okunabilirlik bedeli yükler.

Her kırpmada görselin anlamını kontrol edin

Görsel teknik olarak sınırlar içinde kalıp yine de iletişim kuramayabilir. Şekli değiştiğinde neyin kaldığına bakın. Girişi göstermesi amaçlanıyorsa giriş görünür kalmalıdır. Bir özelliği açıklıyorsa arayüzün ilgili kısmı ayırt edilemeyecek kadar küçülmemelidir.

Editoryal fotoğrafta konuyu koruyarak kırpmayı değiştirebilirsiniz. Öğretici ekran görüntüsünde etiketleri kırpmak açıklamayı kaldırabilir. Bu iki varlık farklı kararlar gerektirir. Daha sıkı kırpma, farklı varlık veya daha büyük özel bölüm arasında seçim yapmadan görselin amacını inceleyin.

Çevresindeki metni kontrol olarak kullanın. Cümle “Vurgulanan oturumu seçin” diyorsa ama gösterilen boyutta vurgu görünmüyorsa çizim artık cümleyi desteklemiyordur. İlgili kontrolün yakın planı, sığdırılmak için küçültülmüş tam ekran görüntüsünden daha yararlı olabilir.

Yalnızca kaynak boyutlarına bakmak yerine gerçekten sunulan varlığı inceleyin. Yüksek çözünürlüklü dosya çok küçük gösterildiğinde okunamaz olabilir; doğru boyutlu görsel ise yanlış sürüm yüklendiğinde bulanık görünebilir. Hangi koşulu gözlediğinizi not edin. Bu ayrım, düzeltmeyi yapan kişinin düzen mi varlık mı değiştireceğini seçmesine yardım eder.

Kararlarla kontrolleri birlikte tutun

Duyarlı düzen, bilgiyle onun yönlendirdiği eylem arasındaki bağı korumalıdır. Fiyatlandırma bölümünde plan adı, ilgili sınırlar, fiyat ve eylem tek seçim olarak tanınabilir kalmalıdır. Rezervasyon formunda ziyaretçi son eyleme ulaştığında seçili oturum açık kalmalıdır.

Tekrarlanan düğmeleri dikkatle kontrol edin. Üst kartları görsel olarak parçalanırsa üç aynı “Devam” etiketi kolay karışır. Daha güçlü gruplama, daha açık plan etiketleri veya daha açıklayıcı eylem gerekebilir. Her öğeye ağır süs eklemek yerine ilişkiyi geri getiren en az müdahaleli değişiklikle başlayın.

Etiketler satıra kaydığında kontrolleri test edin. Dolgusu, hizası ve komşu kontrolleri tutarlıysa iki satırlı düğme kabul edilebilir. Önemli olan kullanıcının eylemi hâlâ ayırt edip rahatça etkinleştirebilmesidir. İlk sözcüğünden sonra kırpılan etiket, düğmenin biraz uzamasından daha ciddi başarısızlıktır.

Bu incelemeye sabit öğeleri katın. Sabit rezervasyon çubuğu ana eylemi erişilebilir tutabilir, ama fiyat notunu veya son form alanını örtebilir. En alta kaydırın, genişletilebilir bölümü açın ve bir alana odaklanın. Öğe yalnızca özenli açılış görüntüsünde değil bu durumlarda da alanını hak etmelidir.

Formları durumları değiştikten sonra test edin

Etkileşim içerik miktarını değiştirdiği için formlar ayrı geçişi hak eder. Hata mesajı, seçili seçenek veya onay bildirimi yükseklik ekleyip alanlar arasındaki ilişkiyi değiştirebilir. Yalnızca boş kutuları kontrol etmek yerine gerçekçi girdilerle ve en az bir düzeltilebilir hatayla inceleyin.

Dar ekranda mümkünse gerçek cihazda ekran klavyesini açın. Etkin alanın görünür kalıp kalmadığını ve sonraki eyleme ulaşılıp ulaşılamadığını kontrol edin. Masaüstü önizlemesi düzene yardım eder; tek başına her mobil tarayıcının klavye ve görünüm alanı davranışını doğrulayamaz.

Normalde izin verilen alanda daha uzun değer kullanın. Tam kuruluş adı, birden çok parçalı soyadı veya uzun e-posta adresi, kısa örneğin kaçırdığı kırpmayı gösterebilir. Amaç görsel incelemede uygulamanın doğrulama politikasını değiştirmek değildir. Kabul edilen girdinin arayüzde anlaşılır kalmasını sağlamaktır.

Hatadan sonra sayfanın neyin düzeltileceğini hâlâ ilettiğini doğrulayın. Başka bölüm taşındı diye hata alanından ayrılmamalıdır. Form özet kullanıyorsa özetle tekil alan arasındaki bağı inceleyin. Doğru sorumlunun çözebilmesi için sorunun düzen, ifade, odak davranışı veya gerçek doğrulama olup olmadığını not edin.

Sayfaya sığma sorunlarını içerik sorunlarından ayırın

Bazı duyarlı tasarım kusurları alan yetersizliğinden değil, belirsiz içerikten kaynaklanır. Başlığı tekrarlayan paragraf mobil sayfayı gereksiz uzatabilir. Altı eylemlik sıra çözülmemiş öncelik kararını yansıtabilir. Tasarımı sıkıştırmadan içeriğin açık rolü olup olmadığını sorun.

Diğer başarısızlıklar kesinlikle düzen sorunudur. Önemli koşullar, mevcut bileşen fazla katı diye silinmemelidir. Rezervasyon sayfasındaki iptal koşulu kompozisyonu karmaşıklaştırsa bile temel olabilir. Doğru yanıt, ziyaretçinin ne zaman ihtiyaç duyduğuna bağlı olarak daha iyi konum, genişletilebilir açıklama veya daha fazla dikey alan olabilir.

Yararlı ayrım, bilginin bütün genişliklerde bulunup bulunmaması gerektiğidir. Gerekiyorsa sunum üzerinde çalışın. İlgisi gerçekten geçerli görev veya duruma bağlıysa koşullu gösterim uygun olabilir. Her cihazda aynı kararı destekleyen bilgiyi kaldırmak için yalnızca genişlik zayıf gerekçedir.

MDN’nin duyarlı tasarım genel bakışı, duyarlılığı esnek düzen, medya, tipografi ve görünüm alanı davranışının birleşimi olarak çerçeveler. Düzeltmeleri atarken yararlı bir hatırlatmadır: küçük ekrandaki tek başarısızlık bütün sayfanın yeniden üretilmesi gerektiği anlamına gelmez.

Gözlemleri küçük, test edilebilir düzeltmelere dönüştürün

Her sorunu tek başarısızlığa odaklayın. Bileşeni, koşulu ve beklenen davranışı tanımlayın. Örneğin: “Orta önizleme genişliğinde Mekân, Yer ayırt ile çakışıyor. Öğeler temas etmeden başlığı kapalı düzene geçirin; etiketleri ve rezervasyon hedefini koruyun.” Bu, “Tablet düzenini iyileştirin”den daha yararlı bir düzeltme isteğidir.

OpenDesign’da çalışıyorsanız masaüstü, tablet ve mobil önizlemeler başlangıç karşılaştırmasını sağlayabilir. Yorum kullanabilir veya gözlemi sohbete gönderebilir, sonra güncellenmiş HTML’i inceleyebilirsiniz. Gereken değişiklik somutsa desteklenen metin, bağlantı, görsel ve stillerin elle düzenlenmesi yararlıdır.

Yapısal değişikliklerde sabit kalması gerekenleri belirleyin. Başlık farklı düzen istiyorsa o düzeltmede içeriği ve hedefleri sabit tutun. Görselin daha iyi kırpılması gerekiyorsa çevre metni aynı anda değiştirmeyin. Bu değişkenleri sabit tutmak, değişikliğin kaydedilen sorunu çözüp çözmediğini değerlendirmeyi kolaylaştırır.

Önce başarısız koşulu, ardından komşu genişlikleri ve ilgili durumları yeniden test edin. Menüyü bir genişlikte sığdıran düzeltme başka yerde gereksiz sıkışık başlık yaratabilir. Daha uzun düğme sabit yükseklikli kartı ortaya çıkarabilir. Bu kısa gerileme kontrolü, isteğe bağlı cilalama turu değil asıl düzeltmenin parçasıdır.

Başkasının kullanabileceği inceleme kaydıyla bitirin

Duyarlı tasarım incelemesine tamamlandı demeden önce her kontrol noktasında ana görevi baştan sona tekrarlayın. İçeriği okuyun, kontrolleri açın ve sonuca ulaşın. Sonra kontrol noktaları arasında düzenin değiştiği en az bir genişliği inceleyin. Yalnızca üç güzel durağan görünümü değil, önemli açık veya genişletilmiş durumların kanıtlarını kaydedin.

Son notunuz kısa olabilir: hangi sayfalar kontrol edildi, hangi genişlikler ve tarayıcılar kullanıldı, hangi görevler başarıldı, hangi koşullar test edilmedi. Gerçek mobil cihaz yoksa belirtin. Tablo bilinçli olarak yana kayıyorsa sonraki inceleyen bunu gözden kaçmış kusur sanmasın diye kararı kaydedin.

Çözülmemiş sorunları neyi engellediklerine göre önceliklendirin. Gizli eylem veya okunamayan gereklilik görevi engelleyebilir. Tuhaf ama okunabilir başlık genellikle daha düşük önceliklidir. Bu, görsel kaliteyi önemsiz saymadan sonraki düzeltmeye mantıklı sıra verir. Küçük cilaların, insanların sayfayı kullanmasını durduran sorunları gölgelemesini önler.