Büyüyen Küçük Sanal Evcil Hayvan Koleksiyonu Nasıl Sergilenir?

Küçük evcil hayvanlar öncelikli olarak görsel öğelerdir; bu nedenle düzenli bir ızgara iyi bir başlangıç noktasıdır. Eşit boyutta hücreler kullanın ve soldan sağa, ardından yukarıdan aşağıya doğru düzenli bir okuma sırası izleyin. Bu, yeni eklenen her evcil hayvanın öngörülebilir bir yer kaplamasını sağlar ve geri dönen koleksiyoncuların galeriyi gözden geçirmesine yardımcı olur. Apple, görsel koleksiyonlar için tanıdık satır veya ızgara düzenlerini önerirken Material Design, hafif ızgara karolarının görsel galerileri için uygun olduğunu belirtir. (Apple İnsan Arayüzü Yönergeleri: Koleksiyonlar; Material Design: Kartlar)

Her hücreye evcil hayvan görseli ve adı için yeterli alan tanıyın. İsim, tür veya kısa bir durumun her evcil hayvanın yanında görünmesi gerekiyorsa kenarlıklar, butonlar ve dekoratif ayrıntılar içeren tam bir kart eklemek yerine net bir hiyerarşiye sahip sade bir karo kullanın. Material'ın yönergeleri, görsel galerilerini kartlardan ayırır; kartlar, öğelerin farklı içerik veya eylemlere sahip olduğu durumlarda daha kullanışlıdır. Çoğunlukla tek tip olan bir evcil hayvan grubu için fazladan kart detayları dikkati koleksiyondan uzaklaştırır.

Koleksiyon mevcut ekran alanının ötesinde büyüdüğünde, bir ızgara tüm evcil hayvanları aynı anda gösteremez. Birincil bir hedef seçin: bir bakışta mümkün olan en fazla sayıyı görmek, adı bilinen bir evcil hayvanı hızlıca bulmak veya öne çıkan bir sergilemenin keyfini çıkarmak. Bu hedefler farklı düzenlere yol açar.

Ana hedef	Kullanışlı sergileme seçeneği	Ödün verilen durum
Birçok evcil hayvanı taramak	Kompakt, düzenli ızgara	Tek tek evcil hayvanlara daha az yer kalır
Bilinen bir evcil hayvanı bulmak	Izgaraya ek olarak arama veya alfabetik sıralama	Denetimler bir miktar ekran alanı kaplar
Öne çıkan birkaç favoriyi göstermek	Izgaranın üzerinde öne çıkanlar satırı veya daha büyük bir sergileme alanı	Tüm koleksiyonun daha büyük bir kısmı daha aşağıda yer alır
Evcil hayvan ayrıntılarını karşılaştırmak	Liste veya ayrıntı görünümü	İlk görünüme daha az evcil hayvan sığar

Öne çıkanlar alanını koleksiyonun yerine geçen bir şey olarak değil, ona açılan küçük bir pencere olarak değerlendirin. Örneğin, üstte favorilerden birkaç tanesini gösterin, ardından tüm ızgarayı altta tutun. Android'in uyarlanabilir evcil hayvan galerisi örneği, belirgin bir evcil hayvan alanı ile düzende daha fazla yer açıldıkça daha fazla evcil hayvan gösterebilen bir ızgara kullanır. Bu durum, altta göz atılabilir bir galeri tutarken öne çıkan bir alana görsel öncelik verme şeklindeki genel tasarım tercihini destekler. (Android Developers: Tüylü dostlar ve uyarlanabilir API'ler)

Izgara uzadığında, koleksiyoncuların evcil hayvanlar hakkında nasıl düşündüğüne uygun kategoriler kullanarak ızgarayı bölün. Olası seçenekler arasında tür veya evren, koleksiyon seti, renk ailesi veya edinilme dönemi yer alır; yalnızca koleksiyonda gerçekten var olan kategorileri kullanın. Az sayıda grupla başlayın. Çok fazla küçük bölüm olması, gezinirken birbirinden ayrı koleksiyonlar arasında hareket ediliyormuş hissi uyandırabilir.

"Tüm evcil hayvanlar" gibi belirgin bir varsayılan görünüm belirleyin ve etkin grubu görünür kılın. Evcil hayvanlar birden fazla gruba ait olabiliyorsa bir filtre kullanmak, aynı evcil hayvanı birden çok bölümde yinelemekten genellikle daha nettir. Her bir evcil hayvan yalnızca tek bir sabit gruba aitse etiketli bölümler tüm koleksiyonu taramayı kolaylaştırabilir. Bunlar, içeriği kendi yapısına göre düzenlemenin pratik uygulamalarıdır; en iyi gruplandırma, evrensel bir kategori şemasına değil, koleksiyonun gerçek niteliklerine bağlıdır.

Bir evcil hayvan görseli sahibi tarafından tanınabilir, ancak isimler büyüyen bir listenin yönetilmesine ve benzer görünen varyantların ayırt edilmesine yardımcı olur. Her küçük resmin hemen altına kısa bir isim yerleştirin. İki evcil hayvan aynı adı taşıyabiliyorsa setleri veya formları gibi kısa ve öz bir ikincil tanımlayıcı ekleyin. Her karoya çok sayıda istatistik, rozet ve denetim koymaktan kaçının: Bu ayrıntılar görselle yarışır ve ızgarayı daha kalabalık hale getirir.

Sergileme bir web sitesinin veya uygulamanın parçasıysa evcil hayvanın kimliğinin görselin yanı sıra metin olarak da sunulduğundan emin olun. W3C kılavuzu, bilgilendirici görsellerin ilgili bilgileri aktaran metin alternatiflerine ihtiyaç duyduğunu; bitişikteki bir etiketin zaten aynı bilgiyi sağlaması durumunda bu bilgiyi görselin alternatif metninde tekrarlamanın gereksiz olabileceğini belirtir. Pratikte, görünür bir ismi uygun bir erişilebilirlik etiketiyle eşleştirin ve kendine has bir evcil hayvanın yalnızca renk veya görselle tanımlanabilmesi durumundan kaçının. (W3C WAI: Görseller Eğitimi)

Her ekranda sabit bir sütun sayısını zorunlu kılmak yerine sütun sayısını değiştirmek için mevcut genişliği kullanın. Kompakt bir telefon iki sütun gösterebilir; her görsel ve isim okunaklı kaldığı sürece daha geniş bir ekran daha fazlasını gösterebilir. Boşlukları tutarlı tutun ve düzen yeniden akarken aynı temel sırayı koruyun. Android'in uyarlanabilir tasarım örneği, kompakt ekranlarda iki sütunlu bir galeri sunup daha fazla alan olduğunda daha fazla içeriği ortaya çıkarmayı açıklar. (Android Developers: Tüylü dostlar ve uyarlanabilir API'ler)

Sergilemeyi insanların kullanması muhtemel en dar boyutta ve geniş masaüstü boyutunda kontrol edin. Kesilen isimleri, tanımlayıcı ayrıntılarını kaybeden görselleri, eşit olmayan karo yüksekliklerini veya uygunsuz şekilde alt satıra kayan denetimleri arayın. Bir evcil hayvanın daha uzun bir isme ihtiyacı varsa kontrollü bir ikinci satıra izin verin veya tam adı görmenin bir yolu olacak şekilde tutarlı bir biçimde kısaltın; tek bir sıra dışı girdinin tüm ızgarayı fark ettirmeden bozmasına izin vermeyin.

Kısa bir koleksiyon için tek bir ızgarada gezinmek yeterli olabilir. İnsanların daha uzun bir listeden bilinen bir evcil hayvanı bulması gerektiğinde arama ekleyin. Sıralama önemli olduğunda (örneğin alfabetik olarak veya bir evcil hayvanın ne zaman eklendiğine göre) sıralama ekleyin. Yalnızca öğeleri ayırt etmeye yardımcı olan özellikler için filtreler ekleyin. Mevcut görünümün anlaşılır olması için bu denetimleri sonuçların üzerinde tutun ve seçilen sıralamayı veya filtreyi gösterin. Material'ın koleksiyon kılavuzu, filtreleme ve sıralamayı kartların dışına yerleştirir; bu da öğelerin kendi içeriklerine odaklanmasını sağlar. (Material Design: Kartlar)

Hiçbir ilerleme hissi sunmayan sonsuz kaydırmaya bel bağlamaktan kaçının. Görünür bir koleksiyon sayısı, bölüm başlıkları veya net bir "daha fazla göster" eylemi, geriye ne kadar kaldığını açıklamaya yardımcı olabilir. Bunlar zorunluluktan ziyade isteğe bağlı işaretlerdir; görsel karmaşa yaratmadan birinin yönünü bulmasına yardımcı olan en sade seçeneği tercih edin.

Benzer görünenler ve en uzun isme sahip olan da dahil olmak üzere birkaç temsili evcil hayvan ekleyin, ardından koleksiyonu telefon ve masaüstü genişliklerinde inceleyin. Şunları sorun: Birisi her evcil hayvanı tanıyabiliyor, adını okuyabiliyor, mevcut grubu veya sıralamayı anlayabiliyor ve tahmin yürütmek zorunda kalmadan tüm koleksiyona ulaşabiliyor mu? Her öğeyi taramak zorunda kalmadan tanıdık bir evcil hayvanı bulabiliyor mu? Görseller odak noktası olmaya devam ediyor mu?

Tanımak zorsa karoları büyütün veya görünür ayrıntıları azaltın. Öğeleri bulmak zorsa isimle arama veya mantıklı bir sıralama ekleyin. İlk ekran kalabalık görünüyorsa öne çıkanlar için küçük bir alan ayırın ve koleksiyonun tamamını aşağıda tutun. Her seferinde tek bir değişiklik yapın ve koleksiyon büyüdükçe kontrolü tekrarlayın; doğru sergileme, okuyucunun gerçek görevini kullandığı boyut ve yoğunlukta desteklemeye devam eden sergilemedir.

• Apple Developer, “Collections” — https://developer.apple.com/design/human-interface-guidelines/collections
• Material Design, “Cards” — https://m1.material.io/components/cards.html
• Android Developers, “Furry friends and adaptive APIs” — https://developer.android.com/design/ui/gallery/social/pawparazzi
• W3C Web Accessibility Initiative, “Images Tutorial” — https://www.w3.org/WAI/tutorials/images/