Arayüz tasarımında kart ve liste arasında nasıl seçim yapılır?

Bir kişinin birbirinden farklı öğeleri tanıyıp keşfetmesi gerektiğinde kart seçin. Tutarlı nitelikleri taraması, bildiği bir öğeyi bulması veya bir sırayı işlemesi gerektiğinde liste seçin. Kayıtlar arasında çok sayıda değeri karşılaştırması gerekiyorsa tablo daha doğru bir seçim olabilir.

Arayüz tasarımında kartlarla listeleri karşılaştırmak için yararlı başlangıç budur. Bol görselli ürünlerin her zaman karta, iş uygulamalarının her zaman satıra ihtiyacı olduğu anlamına gelmez. Aynı koleksiyon birkaç görevi destekleyebilir; en iyi yerleşim, mevcut ekranın hangi görevi kolaylaştırması gerektiğine bağlıdır.

Web sitesi projelerinden oluşan bir arşiv düşünün. Görsel yön arayan tasarımcı, uygun projeyi küçük resminden tanıyabilir. Gecikmiş değerlendirme arayan proje yöneticisinin ise sorumlu, durum ve son tarihe ihtiyacı vardır. Aynı veriyi incelerler, fakat farklı sorular sorarlar. Kartın köşe yarıçapını değiştirmek bu farkı çözmez.

Kişinin ne aradığını belirleyin

Bileşenle değil eylemle başlayın. “Projeleri gezmek” çok fazla şeyi belirsiz bırakır. “Konaklama sektöründeki müşteriye uygun görsel stilde proje bulmak” ve “Bugün değerlendirilmesi gereken işi bulmak” farklı bilgi öncelikleri ve yerleşimi değerlendirecek bir ölçüt verir.

İlk görev tanınabilir önizlemeden yararlanır. Büyük başlık tek başına projenin fotoğraf, ölçülü tipografi veya renkli illüstrasyon kullanıp kullanmadığını göstermeyebilir. İkinci görev, tarih ve durumların öngörülebilir konumlarda olmasını ister. Dekoratif küçük resim karara katkı vermeden yer tüketebilir.

Kişinin önce kullanması muhtemel ipucunu yazın: görsel, ad, kategori, sorumlu veya tarih olabilir. Ardından eşleşmeyi doğrulayacak ikinci ipucunu belirleyin. Bu ipuçları öğeyi açmadan görünmelidir. Kullanıcı her adayı yalnızca tanımak için açmak zorundaysa koleksiyon görünümü yeterince iş yapmıyordur.

Nielsen Norman Group’un kart incelemesi, karma içeriği gruplama yetenekleriyle listenin öngörülebilir tarama yolunu ayırır. Kartların daha fazla alan kapladığını ve sıralamayı daha az belirgin kılabildiğini de belirtir. Bunları bir deseni evrensel kazanan saymak yerine incelenecek ödünleşimler olarak kullanın. Nielsen Norman Group’un arayüz kartları incelemesi.

Pinterest ve göz izleme örneği farklı maliyetleri gösteriyor

NN/G’nin kart yazısındaki Pinterest arayüzü; görselleri, başlıkları ve yardımcı bilgileri farklı yükseklikte kutularda toplar. Görselin tanıma ipucu olduğu, öğelerde farklı miktarlarda içerik bulunduğu bir koleksiyona uygundur. Aşağıdaki ekran görüntüsü o tarihî arayüzü kaydeder.

Aynı yazıda bir katılımcının kart yerleşiminde ilginç haber aradığı göz izleme oturumu da vardır. Bakış grafiği adaylar arasında tekrarlanan hareketleri gösterir. NN/G bu davranışı, belirgin sıralı akışı olmayan ve karşılaştırılabilir bilgileri tutarsız konumlara koyan yerleşimle ilişkilendirir.

Bu örnekler iki farklı işi açığa çıkarır. Ziyaretçi uygun hissettiren bir görsel seçiyorsa keşif görevin parçasıdır. Çalışan en son geciken kaydı buluyorsa her kartın tarihini yeniden aramak ek yüktür. İkisine de “gezinme” demek, yerleşimi belirlemesi gereken ayrımı gizler.

Stil testinden önce bilgi testi yapın. Önerdiğiniz ızgaradaki küçük resimleri kapatın. Ana görev imkânsız oluyorsa görseller muhtemelen gerekli kanıtı taşıyordur. Tarih ve durumlar belirginleştiği için kolaylaşıyorsa görseller işle yarışıyor olabilir.

Öğeyi açmadan önce nelerin görünmesi gerektiğine karar verin

Alternatifleri karşılaştırırken aynı kayıtları, filtreleri ve eylemleri kullanın. Birinden gecikmiş işi bulmasını, diğerinden görsel yönü tanımasını isteyin; hangi yerleşimin önce göründüğünü değiştirin. Yanlış seçimleri, gereksiz ayrıntı sayfası ziyaretlerini ve dönüşte kaybolan konumu kaydedin. Daha güzel ekranı tercih etmek dış görünüşe ilişkin yararlı geri bildirimdir, fakat görevi hangi yerleşimin desteklediğini yanıtlamaz.

Kutusunu seçmeden içeriği okuyun

Gerçek kayıtlardan küçük bir örneklem alın; elverişsiz olanları da katın. Proje arşivinde kısa başlık, uzun başlık, eksik küçük resim, arşivlenmiş proje ve sorumlusuz proje olabilir. İçerik, doğru yerleşim hakkında birbirinin aynı yer tutucu dikdörtgenlerle dolu ekrandan fazlasını söyler.

Çok değişken içerikli koleksiyon kartlardan yararlanabilir, çünkü her öğe tutarlı bir özet oluşturabilir. Aynı alanları her öğede tekrarlayan koleksiyon liste için daha güçlü gerekçe verir. İki gözlem de tek başına kararı bitirmez; tasarımın neyi karşılaması gerektiğini söyler.

Eksik medyaya özellikle bakın. Kayıtların çoğunda anlamlı görsel yoksa kart ızgarası tekrarlanan yer tutucular galerisine dönüşür. Yerleşim görsel tanıma vaat ederken içerik metinle bulma görevi sunar. Dekoratif çeşitlilik üretmek yerine metin öncelikli listeyi veya daha küçük, isteğe bağlı küçük resimleri düşünün.

Tersine, görsel portföyü dosya adlarına indirgeyen liste gerekli bilgiyi kaldırabilir. “Project 14” ve “Project 15” doğru adlar, ama zayıf tanıma ipuçları olabilir. Yararlı önizleme eklemek, ekrana daha fazla satır sığdırmaktan önemli olabilir.

Uygulamalı örnek: bir arşiv, iki başlangıç görünümü

Altı kurgusal proje düşünün: Cedar Lodge, Harbor Rooms, Studio North, Maple Clinic, Archive House ve Lumen Shop. Her kayıtta küçük resim, sorumlu, değerlendirme durumu ve değerlendirme son tarihi bulunur. Sunum değişince bu alanların hiçbiri değişmez.

Görsel keşif için küçük resmi öne çıkarın; proje adını hemen altına koyun. Kısa kategori ve ölçülü durum etiketi ekleyin. Kiminle iletişime geçileceğini seçmeye yardımcıysa sorumlu daha düşük vurguyla görünür kalabilir. Veri var diye kartı bütün meta verilerle doldurmayın.

Değerlendirme yönetiminde kısa bir satırla başlayın. Proje adı ve belki küçük resim başta, durum ve son tarih sabit yerlerde olsun. Değerlendirmeyi açmak gibi belirli eylem görünür olabilir. Görsel stili anlatan dekoratif açıklama bu bağlamda daha az yararlıdır.

İki görünümün tam olarak aynı alanları göstermesi gerekmez. Aynı nesneleri tutarlı tanımlaması gerekir. Birinde durum “Değerlendirmeye hazır”, diğerinde “Bekliyor” ise insanlar görünüm değiştirmenin proje durumunu değiştirdiğini düşünebilir.

İlk görünüm ekranın amacına uymalıdır. Keşif sayfası kartla, değerlendirme kuyruğu satırla başlayabilir. Geçiş sunmak makul varsayılan seçme sorumluluğunu kaldırmaz; çoğu kişi karşılaştığı ilk sunumu kullanacaktır.

Her görünümün görevini desteklemesini sağlayın

Kartlar: açık bir iç sıra kurun

Kartın okuma yolu olmalıdır. Hangi öğenin tanıttığını, hangisinin açıkladığını, hangisinin eylem başlattığını seçin. Küçük resim, başlık, rozet, yazar, etiketler ve düğme eşit dikkat istiyorsa kart yararlı özet değil küçük gösterge paneli olur.

Keşif sürümünde küçük resim ve başlık kimliği kurmalıdır. Kategori yorumu destekler; durum ve sorumlu yardımcı bilgilerdir. Her alana ayrı renk vermeden boyut, ağırlık, yakınlık ve ölçülülükle bu sırayı gösterebilirsiniz.

Karşılaştırılabilir bilgileri benzer konumlara koyun. Kartlar keşif için olsa da kullanıcı birkaç adayın aynı ayrıntısını kontrol edebilir. Durumu aynı bölgede tutup etiket biçimini sabitleyin. Açıklamayı biraz kısaltmak, önemli meta verinin öngörülemez biçimde kaymasından genellikle daha iyi ödünleşimdir.

Görsel alanını hak etsin. Yerleşimi göstermeyecek kadar küçük bir ekran görüntüsü, hiç görsel kullanmamaktan mutlaka daha yararlı değildir. Tanımlayıcı özellik etrafında kırpın, uygunsa sabit oran kullanın; rastgele kırpmaların ızgarayı projelerden daha kalabalık göstermesine izin vermeyin.

Eksik görsel desteklenen durum olmalıdır. Başlık ve kategoriyle kimliği koruyan sakin bir yedek kullanın. Onu, görselsiz kayıtlar koleksiyonda en belirgin öğeler olacak kadar baskın yapmayın.

Kartın sınırı da gerekir; ancak hepsine kalın çerçeve ve derin gölge gerekmeyebilir. Amaç bilgiyi öğesiyle ilişkilendirmektir. Daha fazla süsleme eklemeden önce bu ilişkiyi boşluklarla ve sade bir yüzey uygulamasıyla kurun. Bir kartta iyi duran işlem yirmisinde tekrarcı olabileceğinden koleksiyonu bütün olarak inceleyin.

Listeler: güvenilir tarama yolu koruyun

Her satırın yapısı değişirse listenin avantajı kolay kaybolur. Tanımlayıcı içeriği sabit yere koyup yardımcı alan sırasını belirleyin. Kullanıcı koleksiyonda aşağı ilerlerken her satırı yeniden öğrenmek zorunda kalmamalıdır.

Kuyrukta proje adını önce koyun. Durum ve son tarihi tekrar tekrar bulunacak konuma yerleştirin. Sıralama son tarihe göreyse o tarih görünsün. Gizli alana göre sıralama, okuyucuya göremediği örüntüyü aratır.

Yoğunluk, ekrana en çok kaydı sığdırma yarışması değil, okuma ve etkileşim kararıdır. Adların ayırt edilip kontrollerin rahat kullanılacağı yer gerekir. Yoğunluk sorumlu ve durumu tek gri çizgiye birleştiriyorsa fazla kayıt yararlı olmayabilir.

İkinci satırı bilinçli kullanın. Kısa açıklama veya çalışma alanı gibi ayrıştırıcı bilgi taşıyabilir. Başlığı farklı sözcüklerle tekrarlamayın. “Cedar Lodge web sitesi” altında “Cedar Lodge için web sitesi projesi” uzunluk ekler, tanımaya az katkı verir.

Listelerde görsel olabilir. Küçük ve anlamlı önizleme, düzenli satırı korurken tanımayı destekler. Soru listenin görsel içermesine izin olup olmadığı değil, görselin öğeye hâkim olması gerekip gerekmediğidir.

Kullanıcıların karşılaştırdığı birkaç hizalı alan birikiyorsa tablo tasarlayıp tasarlamadığınızı düşünün. Başarısızlık değildir. Tablo ilişkilere açık başlık verip karşılaştırmayı doğrudan destekler. Liste demek sütun ilişkilerini yok etmez.

Her şeyi tıklanabilir yapmadan davranışı tanımlayın

Kart öğe açabilir, menü gösterebilir, favori kontrolü veya kategori bağlantısı içerebilir. Her ek eylem yüzeyi karmaşıklaştırır. Görsel, başlık, boş alan ve yardımcı kontrol seçildiğinde ne olduğunu tasarımcının açıklaması gerekir.

Tek açık ana hedef kullanın. Başlık proje, küçük resim görsel görüntüleyici açıyorsa farkın gerekçesi ve anlaşılır işareti olmalıdır. Yoksa görsel olarak bağlı iki öğe ilgisiz bağlantı gibi davranır. Adı ve arka planı ayrı ekranlara giden satırda da aynı sorun çıkar.

W3C tasarım sistemi hem ayrı bağlantılı hem tüm yüzeyi bağlantılı kartları belgeliyor; başlık düzeylerinin sayfaya uymasını da belirtiyor. Görsel kartın tek zorunlu etkileşim modeli olmadığını hatırlatır. W3C kart bileşeni örüntüleri.

Proje örneğinde bağlantılı başlık ve ayrı menü anlaşılır başlangıçtır. Uygulama ana tıklama alanını büyütürse menünün bağımsız çalıştığını ve gerektiğinde metnin seçilebildiğini doğrulayın. İç içe bağlantı kurmayın veya her metin parçasını ayrı klavye durağına çevirmeyin.

Seçmek, açmaktan farklıdır. Birkaç projeye işlem yapacak kişinin görünür seçime ve açık çıkış yoluna ihtiyacı vardır. Açık mod değişmeden ilk tıklama bir görünümde seçip diğerinde açmamalıdır. Geçiş sunumu değiştirir, temel davranışı sessizce yeniden tanımlamaz.

Klavye beklentilerini işaretçi davranışıyla yazın. Odak nereye gider, hangi öğe açar, ikincil menüye nasıl gidilir? Ekran görüntüsü yanıtlayamaz; görsel hiyerarşinin kontrol yapısını da açık kıldığını varsaymak yerine etkileşim incelemesine katın.

İki görünüm de yerini hak ediyorsa geçiş sunun

Aynı kitle tanıma ve tarama arasında gerçekten gidip geliyorsa kart/liste geçişi değerlidir. Biri diğerinin zayıf sürümüyse katkısı azdır. İki görünüm desteklemek, incelenecek içerik durumları ve etkileşim ayrıntılarını da iki katına çıkarır.

Geçiş varsa filtreleri, sıralamayı ve seçilen koleksiyonu koruyun. Arşivi değerlendirme bekleyen projelere daraltan kullanıcı listeye geçince tüm projeleri görmemelidir. Geçiş sonuçların nasıl sunulduğunu değiştirir, hangi sonuçların koşullara uyduğunu değil.

Anlamlı yerde seçimi koruyun; sınırları açık söyleyin. Toplu işlemler yalnızca listedeyse seçimi habersiz düşürmek yerine açıklayın. Daha iyisi, eylemin iki sunumda tutarlı kalıp kalamayacağını değerlendirin.

Etiketli, etkin durumu görünür kontrol kullanın. Izgara ve satır simgeleri yardımcıdır, fakat şekil her yerleşimi açıklamaz. “Kartlar” veya “Liste” gibi kısa etiket özellikle dar ekranda görünümler benzerken seçimi netleştirir.

Dönen ziyaretçileri düşünün. Tercihi hatırlamak yararlı olabilir; ancak görevin değiştiği bağlamı geçersiz kılmamalıdır. Değerlendirme kuyruğu ve açık ilham galerisi aynı küresel tercihi paylaşmak zorunda değildir. Kalıcılığın kazara davranışa dönüşmemesi için kapsamı tanımlayın.

Dar ekranda görevi koruyun

Izgara telefonda sıklıkla tek sütuna iner. Otomatik olarak yararlı liste olmaz. Görsel ekranın çoğunu kaplarken gereken alan aşağıda kalabilir. Yerleşim değiştikten sonra hiyerarşiyi inceleyin.

Keşifte büyük önizleme hâlâ uygun olabilir. Kuyrukta okunur tarihle kısa özet daha yararlı olabilir. Belirleyici alanı masaüstünde en sağa koyduğunuz için gizlemeyin.

Yardımcı alanları belirli sırayla satır kaydırın veya ikinci satıra alın. Yer açmak için durumu açıklamasız renkli noktaya çevirmeyin. Açılır ayrıntıya taşınacaksa her öğeyi açmadan görevin tamamlanıp tamamlanamayacağını belirleyin.

Uzun adlar açıklayıcıdır. Aynı sözcüklerle başlayıp sonda ayrılan iki gerçekçi ad kullanın. İkisi aynı metne kesiliyorsa dar yerleşim tanımlama yetisini kaybetmiştir. Yazıyı küçültmeden satır kaydırma, genişlik veya görünür tanımlayıcı alanı değiştirin.

Eylem alanını ayrı kontrol edin. Geniş satırın rahat menüsü başlık veya onay kutusuna sıkışabilir. Üç küçük kontrollü kart daralınca özellikle zorlaşır. Görevi sadeleştiriyorsa isteğe bağlı eylemleri yüzeyden kaldırın, fakat açık erişim bırakın.

Liste ve ızgarayı gerçek bulma görevleriyle karşılaştırın

İnceleyenlere yalnızca hangi yerleşimi tercih ettiklerini sormayın; sonucu gözlemlenebilen bir görev verin. Proje arşivinde görsel keşif için konaklama sektörüne yönelik, ölçülü bir görsel stile sahip bir proje bulmalarını isteyebilirsiniz. Bilinen bir öğeyi bulma görevinde Archive House’u, yönetim amaçlı taramada ise belirli bir kişiye atanmış en erken tarihli değerlendirmeyi bulmalarını isteyebilirsiniz.

İki yerleşimde eşdeğer içerik kullanın. Birinin görseli, metni veya filtresi daha iyiyse yerleşimden fazlasını karşılaştırırsınız. İyileştirme değerli olabilir; fakat kart veya listenin özünde iyi olduğuna kanıt sayılmamalıdır.

Duraksamalara bakın. Eksik durum için tekrar açmak içerik, dönüşte kaybolmak gezinme, ızgaranın ikinci sırasını atlamak görsel akış sorunu olabilir. Her gözlem başka değişimi gösterir.

Tercih ettiğiniz tasarımı zorlayan görev de koyun. Kart seviyorsanız tekrarlanan alan aramasını, liste seviyorsanız benzer adlarda görsel tanımayı sınayın. Amaç ilk çizime onay toplamak değil, seçimin maliyetini kabul edilebilirliğine karar verecek kadar görünür kılmaktır.

OpenDesign’da HTML alternatifleri oluşturup inceleyebilir, görünüm önayarlarını kullanabilir, karta veya satıra yorum ekleyebilirsiniz. Kayıt ve gereksinimleri bağlamda tutun ki düzeltmenin temeli sabit olsun. Arama, kaydedilen tercih ve kalıcı seçimi çalışan akışta test edin.