Kartlar ve listeler, UX'leri nasıl etkiler?

Bugünlerde web sitesi içeriğini düzenlemenin en yaygın iki yolu, kartlar ve listeler kullanmaktır. Her birinin kendi artıları ve eksileri vardır. Web'in ilk günlerinden beri listeler dolaşırken, kart tabanlı tasarım sadece son zamanlarda dikkate alınması gereken bir güç haline geldi ve içerik organizasyonu için gittikçe popüler bir seçim haline geldi.

Kartlar ve listeler, içeriği görüntülemek için benzersiz yollardır; yani, belirli durumlar için sırasıyla, daha iyi ve daha kötüdür. Web tasarımcıları için anahtar, elbette, her birinin tam olarak ne zaman kullanıldığını daha iyi bir kullanıcı deneyimi sağladığını anlamaktır. Cevaplar sizi şaşırtabilir ve tasarım prensiplerine biraz farklı bakmanıza neden olabilir.

Burada, web tasarımında kartların listelere karşı kullanılmasının uygun olduğunu ve tersini araştırıyoruz.

Kart nedir? Liste nedir?

Bir kart veya liste kullanırken UX amaçları için daha uygun olduğunu anlamamıza yardımcı olmak için, her birinin ne olduğunu ve her birinin ne yaptığını (veya yapması gerektiğini) anlamamıza yardımcı oluruz.

Bir kart, kullanıcıların daha fazla bilgi alabilecekleri çeşitli ilgili bilgileri görüntüleyen bir kapsayıcıdır. Hala bir düz tasarım ürünü olmakla birlikte, Flat Design 2.0 olarak sınıflandırılır, çünkü genellikle tıklanabilirlik belirtmek için alt gölgeler gibi ışık 3D efektleri vardır. Bu görsel derinlik gibi 3B efektler, kullanıcılara gösterici olarak işlev görür ve daha fazla bilgi için tıklayabileceğini söyler.

İlginç bir şekilde, bir kart ile ikiye bölünmüş bir şey var, çünkü genellikle hem şekil hem de boyutta gerçek bir oyun kartına benziyor. Bu, grafiksel unsurların asıl öğeleri andıran güncel olmayan skeuomorfizmi düşündürmektedir.

Liste, kullanıcının arama ölçütlerinin veya tarama alışkanlıklarının bunları aldığı bir sayfadır. Giriş sayfası aslında çeşitli aday öğeleri veya girişleri içerir. Bu nedenle, bir liste uygun UX için etkili ve hızlı göz taramasını kolaylaştırmak zorundadır. Bu, bir liste bir karttan daha uygun olduğunda, kullanılabilirlik açısından farklılaşmamıza yardımcı olan önemli bir ayrımdır.

Kartlar ne zaman kullanılır?

Artık kartlar ve listeler arasındaki önemli farkları bildiğimiz için, her birinin web tasarımında uygun olduğu zaman güvenle bilmemiz daha kolay.

Bilgi taranması için (aramak yerine)

Kartlar, kullanıcıların içeriğin sıralamanın önemini kolayca ayırt edebilmelerini zorlaştırıyor veya imkansız hale getiriyor. Örneğin, kartlar, sayfaların anahat / kenarlıklarının benzer göründüğünden, içeriğin bir sayfada görülmesi gereken sırayla ilgili hiçbir açık bilgi sağlamamaktadır. Temel göz izleme araştırması her zaman kullanıcıların ilk önce bir sayfanın üstünde ve solundaki içerikle başladığını, ancak listelerin, kullanıcıların çevrimiçi içeriği bu temel emici yolla takip etmelerini daha sezgisel hale getirdiğini öne sürmektedir.

Bu nedenle, örneğin, Pinterest'teki gibi büyük koleksiyonlara göz atmak için kartlar kullanmak idealdir. Sadece Pinterest'te arama sonuçlarına göz attığınızda, hangi sırayla görüntüleneceğini belirlemek yerine, kart tabanlı sonuçların sonsuz kaydırması, göz atmayı çekici, eğlenceli ve kolay hale getirir. İlginç bir şey gördüğünüzde, daha fazla bilgi için hemen kartın üzerine tıklayabilirsiniz. Anında tatmin edici.

Farklı öğelerin gruplandırılması için

Kullandığınız uygulamaya veya uygulamaya bağlı olarak, çeşitli içerik türleri arasında ayrım yapmayı kolaylaştırmak için kart tabanlı tasarıma sahip bir gösterge panosuna sahip olacaksınız. Bu, kullanıcıların yönetmekte oldukları farklı içerik türlerini tanımlamasına olanak tanıyan kartların gücünün bir örneğidir.

Kartlar görsel sınırlar oluşturmak için sınırlar kullandıklarından, farklı unsurları gruplamak söz konusu olduğunda idealdirler.

Listeler ne zaman kullanılır?

Listeler, belki de web tasarımında daha uzun süredir olduğundan, kartlardan biraz daha kolay olabilir. Sonuç olarak, bunları ne zaman kullanacaklarını belirlemek daha kolay olur.

Verimli göz taraması için

Listeler, kullanıcıların arama terimlerini girdikten sonra arama sonuçları sayfasını kullanıyor olmaları nedeniyle bir sitede istedikleri şeyi hızlı bir şekilde aramaya ihtiyaç duyduklarında tercih edilir. Dikey olan ve bir öğenin, kullanıcının gözlerini kartlara göre daha iyi odaklamak için bir sonraki yardımın üstündeki bir öğenin üzerinde durduğu listeler listelenirken, listelerde satırlar sabit konumlarda durmazlar.

Küçük ekranlar için

Basitçe söylemek gerekirse, kartlar ekranda daha fazla gayrimenkul alırlar. Bu, kullanıcıların mobil cihazlarda ve bazı tabletlerde sorunlu hale getirilmelerini sağlar; çünkü, kullanıcılar listelere göre daha fazla seçenek görmek için sayfayı aşağı kaydırmaya zorlar. Bir listenin öğeleri bir sayfanın uzunluğundaki kısa satırlarda oturduğundan, kullanıcılar kısa süreli belleğe güvenmek zorunda kalmadan daha fazla seçenek görebilirler (kart tabanlı bir tasarıma sahip olanlar, daha fazla öğeye bakınız).

Tasarımınız kullanıcıların seçimleri ekranda daha fazla hatırlamasını talep ettiği anda, karşılaşmaya başlayacaklar. bilişsel yük UX'e zarar veriyor. Bilişsel yük, beyninizin hala yeni, ek bilgi işlerken bir şeyi hatırlamak için daha fazla çalışması gerektiğini gösterir. Bu da, görevlerin hızını yavaşlatmaya ve potansiyel olarak, bir kullanıcı görevinden tamamen vazgeçmeye yol açar.

Akıllı telefonumun App store uygulamasında, uygulama kategorileri, bir sayfada sekiz öğe görüntüleyen, daha fazla görmek ve daha önceki seçenekleri hatırlamak için kaygılanmak zorunda kalmadan endişelenmeden, temiz, dikey bir liste halinde düzenlenir. Bu daha büyük kartlarla bir düzende yapılmış olsaydı, en azından birkaç seçeneğimi görebiliyordum ve UX'imi engelliyordum.