UX Tasarım Kontrol Listesi

Tasarım sürecinde ürününüzdeki bazı kusurlar fark edilmeyecektir. Bu küçük (veya bazen büyük) şeyler, kullanıcının yazılımınızı kullanırken yaşadığı deneyime zarar vermek için çok şey yapabilir. Tasarıma imza atmadan önce kontrol etmeniz için bir liste hazırladık.

Lütfen bu noktaların hepsinin tüm ürünler için geçerli olmadığını, ancak genel olarak bunların en alakalı olanları olduğunu unutmayın.

Etkileşim dizaynı

01 - Tekrarlayan eylemler veya sık faaliyetler zahmetsiz hissettiriyor

Neden önemlidir: Aynı çıktı için tekrarlanan eylemler (örneğin, farklı formları aynı bilgilerle doldurmak), kullanıcının hedeflerine daha hızlı veya daha iyi ulaşmasına yardımcı olmayan yorucu bir iştir. Kullanıcı muhtemelen bunu aşmanın bir yolunu bulmaya çalışır: örneğin, daha hızlı/daha iyi yapmalarına yardımcı olabilecek rakipler aramak.

Nasıl test edilir: Ürününüzün tüm akışlarını analiz ederek ve kullanıcının davranışını gözlemleyerek başlamalısınız. Tekrarlayan eylemler varsa, bunları kolaylaştırmanın bir yolu olduğundan emin olmak istersiniz: önceden girilmiş bilgileri kullanma seçeneği.

02 – Kullanıcılar hatalardan kolayca kurtulabilir

Neden önemlidir: Çoğu zaman, kullanıcılar istenen sonuçlara yol açmayan istenmeyen eylemler veya eylemler gerçekleştirir - ve geri dönüp tekrar denemelerine izin vermek, hüsrana uğramayacakları ve kolayca iyileşecekleri ve akışa devam edecekleri anlamına gelir.

Nasıl test edilir: İlk olarak, navigasyon sisteminizin geri dönmeye izin verdiğinden ve eylemlerin geri alınabileceğinden emin olun. Ardından, kullanılabilirlik testi yaparken, kullanıcının büyük olasılıkla yanlış eylemi gerçekleştireceği senaryolar oluşturun ve kolayca iyileşip iyileşmediğini kontrol edin.

03 – Kullanıcılar, uzmanlık seviyelerine göre yeterince desteklenir

Neden önemlidir: Ürününüzdeki acemi kullanıcıların sorunsuz bir öğrenme deneyimi yaşamasını sağlamak önemlidir. Ancak, ürüne bir kez aşina olduklarında, bu, akışlarda daha hızlı hareket etmelerine yardımcı olan araçlara yer vermelidir. Her iki senaryo da kullanılabilirliği ve kalıcılığı artırır. Örneğin, uzman kullanıcılar için kısayollar, acemi kullanıcılar için araç ipuçları vb.

Nasıl test edilir: İlk olarak, her iki izleyici için de araçlarınızın olup olmadığını kontrol edin. Ardından, bu araçların doğru şekilde kullanılıp kullanılmadığını görmek için acemi ve uzman kullanıcılarla kullanılabilirlik testleri yapın.

04 – Yardıma erişim, kullanıcının ilerlemesini engellemez

Neden önemlidir: Kullanıcılar, ürününüzün belirli bir bölümünde takılıp kaldıklarında yardım isterler. Yardımın - çevrimiçi veya çevrimdışı - ek olması ve kullanıcının işine kaldığı yerden devam etmesine izin vermesi önemlidir.

Nasıl test edilir: Kullanıcıların yardım isteyecekleri ve iş akışlarının ve ilerlemelerinin kesintiye uğrayıp uğramadığını görecekleri test senaryoları oluşturun.

Görsel Tasarım

05 – En fazla üç ana renk

Neden önemlidir: Bu sabit bir kural değildir ve bazen belirli durumlar için üçten fazla ana renk kullanılabilir. Ancak, üç rengi birleştirmenin zaten zor olduğunu unutmayın, bu nedenle çoğu durumda bundan daha fazla kaçınılmalıdır.

Nasıl test edilir: Ürünü tasarlarken kullandığınız renk paletinin üçten fazla ana renk içermediğinden emin olun.

06 – Hiyerarşi, içerik veya işlevsellik iletmek için tek başına renk kullanılmaz

Neden önemlidir: Erişilebilir bir ürüne sahip olmak bir artı değil, bir zorunluluktur. Renk körlüğü gibi görme engelli kişiler, hiyerarşi, içerik veya işlevsellik iletmek için yalnızca renge güvenirler. Bu, ürününüzü kullanamayacakları ve hariç tutulan bir demografi olacakları anlamına gelir.

Nasıl test edilir: colorfilter.wickline.org, web sayfanızın üstüne bir renk filtresi koymanıza ve farklı renk körlüğü türleri için test etmenize izin verir. Ayrıca ürününüzü ekran görüntüsü alarak görüntü düzenleyicide gri tonlamaya dönüştürebilir ve renkleri kolayca ayırt edip edemeyeceğinizi görebilirsiniz.

07 – Görsel hiyerarşi, kullanıcıyı gerekli eyleme yönlendirir

Neden önemlidir: Kullanıcılar, ne yapacaklarını ve nereye gideceklerini bilmek için ürünün hiyerarşisine ve ipuçlarına güvenirler – bunu anlamak ve bu hiyerarşiyi kullanırken onlara doğru şekilde rehberlik etmek çok önemlidir.

Nasıl test edilir: Ürününüzün içindeki akışların nasıl çalıştığını ve temel eylemlerinin görsel hiyerarşi tarafından teşvik edilip edilmediğini anlayın.

08 – Görsel hiyerarşinin en üstündeki öğeler en önemlileridir

Neden önemlidir: görsel hiyerarşi, kullanıcıların, acil ihtiyaçlarına göre içeriğe öncelik vererek bilgileri hızlı bir şekilde taramasına olanak tanır. Görsel hiyerarşinin en üstüne yakın olan öğeler, işletme için en önemli ve kullanıcılar için en alakalı olmalıdır.

Nasıl test edilir: Dijital ürününüzün ekran görüntüsünü alın, ardından bu ekran görüntüsünü yaklaşık 5 piksellik bir yarıçapa Gauss bulanıklaştırın. Sonuca bakarken, hiyerarşiyi anında görselleştirecek ve hangi öğelerin öne çıktığını fark edeceksiniz. Bunlar işletme ve kullanıcı için en önemlileri mi?

09 – Birincil eylem, ikincil eylemlerden görsel olarak farklıdır

Neden önemlidir: Farklı birincil ve ikincil eylemlere sahip olmak, kullanıcının ürününüzle etkileşime girerken kafasının karışmaması ve hata yapmaya daha az eğilimli olması anlamına gelir. Örneğin, "Gönder" ve "İptal" açıkça farklı olmalıdır.

Nasıl test edilir: Kullanılabilirlik testi yürütürken, kullanıcının niyetinden değil, ancak yetersiz şekilde farklı birincil ve ikincil eylemlerden kaynaklanan yaygın hataları gözlemleyin. Ayrıca tasarımı incelerken renk, boyut, konumlandırma ve diğer unsurların eylemleri farklılaştırdığından emin olun.

10 – Etkileşimli öğeler soyutlanmaz

Neden önemlidir: Yeni bir ürün kullanırken, kullanıcılar diğer dijital ürünleri kullanma önceki deneyimlerinden oluşan bir dizi beklentiyle gelirler - örneğin, düğmelerin nasıl görünmesi ve nasıl çalışması gerektiği. Bu beklentileri yerine getirmek, gereksiz sürtüşme yaratmadığınız anlamına gelir.

Nasıl test edilir: İlk olarak, ortak kalıpların kullanılmadığı alanları arayarak ürününüzü gözden geçirin. Örneğin, bağlantılara benzemeyen bağlantılar.

11 – Form gönderimi görsel olarak belirgin bir şekilde onaylanır

Neden önemlidir: Bir işlemin başarıyla gerçekleştirilip gerçekleştirilmediğine dair kullanıcıya onay vermek önemlidir. Örneğin, bir formu gönderdikten sonra, renkli bir başlık şeklinde net bir onay mesajı, kullanıcının bir sonraki göreve geçebileceği anlamına gelir.

Nasıl test edilir: Ürününüzün, kullanıcının bilgi girdiği tüm alanlarını kontrol edin. Kullanıcı girişi tamamlandıktan sonra, bu eylemin başarılı olup olmadığına ilişkin bir onay tetikleyin. Son durumla ilgili geri bildirimin net olduğundan emin olun.

12 – Uyarı mesajları tutarlı

Nedir: Uyarı mesajları aynı görsel stile sahiptir ve aynı yerde aynı şekilde görünür.

Neden önemlidir: Tutarlı uyarı mesajlarına sahip olmak, kullanıcının her zaman neyin hemen dikkati hak ettiğini anlayacağı anlamına gelir. Uyarılarla tutarlı olmamak, her yeni uyarı açıldığında ekstra zihinsel yük anlamına gelir.

Nasıl test edilir: Uyarı mesajlarının aynı görsel stile sahip olduğundan ve konumlarının benzer veya aynı olduğundan emin olun.

13 – Uyarı mesajları görsel olarak farklıdır

Neden önemlidir: Kullanıcı, uyarı mesajlarının diğer ekran öğelerinden açıkça farklı olduğundan emin olarak, bunları gerçekten fark edebilir ve/veya eylemde bulunabilir.

Nasıl test edilir: Görsel farklılaşmayı kendiniz kontrol ettikten sonra, kullanılabilirlik testinde kullanıcıların uyarı mesajlarına nasıl tepki verdiğini görün.

Bilgi Mimarisi

14 – Navigasyon tutarlı

Neden önemlidir: Kullanıcıların ürününüzü yönlendirme ve daha sonra ürününüzde gezinme şekli, mevcut sayfalarından bağımsız olarak hedeflerini tamamlayıp tamamlayamayacaklarını doğrudan etkiler.

Nasıl test edilir: Bilgi mimarisi belgelerinizi kontrol edin ve navigasyonun her sayfada erişilebilir olduğundan ve değişmediğinden veya kaybolmadığından emin olun. Görsel tasarıma dalmadan önce, bilgi mimarisi yollarınızın olabildiğince sezgisel olduğundan emin olmak için kart sıralamayı veya ağaç testini deneyin.

15 – Büyüme için yer

Neden önemlidir: Her yeni özellik veya içerik ortaya çıktığında bir ürünün navigasyon ve bilgi sistemini yeniden tasarlayamazsınız. Gezinme menüleri ve genel düzen, bozulmadan daha fazla kategoriyi/konuyu desteklemelidir. Büyümeye yer bırakan tasarım, büyük tasarım ve geliştirme çabalarının arayüz boyunca kolayca ölçeklenmesi anlamına gelir.

Nasıl test edilir: Tüm paydaşlara, içeriğin üründe zaman içinde nasıl gelişebileceğini sorun. Daha statik içeriği destekleyecek misiniz? Mimarinin videoları desteklemesi gerekecek mi?

tipografi

16 – İkiden fazla farklı tip aile kullanılmaz

Neden önemli: Bu sabit bir kural değildir: bazen ikiden fazlasını çıkarmak mümkündür. Ancak genel olarak konuşursak, ikiden fazlasını eşleştirmek kolay bir iş değildir. Kullanılabilirlik ve görsel amaçlar için ikiye bağlı kalmak, tipografik hiyerarşinizi basitleştirir ve bu da anlamayı geliştirir.

Nasıl test edilir: Tasarımınızın ikiden fazla tip aileyi karıştırmadığından emin olun. Seçtiğiniz ailelerin uygun şekilde eşleştiğinden de emin olmanız yardımcı olacaktır (buradan daha fazla bilgi edinin).

17 – Metin içeriği için kullanılan yazı tipleri en az 12 piksel boyutundadır

Neden önemlidir: Yine, bu sabit bir kural değildir – teorik olarak belirli amaçlar için daha küçük boyutlar kullanabilirsiniz – ancak genel olarak konuşursak, 12 pikselin altındaki boyutlar için okunabilirlik ciddi şekilde azalır.

Nasıl test edilir: Tüm içeriğinizi kontrol edin ve onlar için kullanılan yazı tiplerinin en az 12 piksel boyutunda olduğundan emin olun.

18 – Etiketler, başlıklar veya kısaltmalar için büyük harfli sözcükleri ayırın

Neden önemlidir: Büyük harf kullanımının sınırlandırılmasının anlamayı kolaylaştırdığı bilinmektedir - görsel olarak daha az ağırdır ve kullanıcı için daha kolay sindirilir. Özellikle vurgu veya çok kısıtlı durumlar için kullanılmalıdır - örneğin kısaltmalar.

Nasıl test edilir: Kapsamlı bir içerik kontrolü yapın ve büyük harflerin yalnızca başlıklar, etiketler veya kısaltmalarla sınırlı olduğundan emin olun.

19 – İçeriği kontrollerden ayırmak için farklı yazı tipi stilleri veya aileleri kullanılıyor

Neden önemlidir: İçeriğin ne olduğu ve kontrollerin ne olduğu, yani kullanıcının neyle etkileşime geçebileceği konusunda net göstergeler olması gerekir. Bu göstergeler boyut, renk, konumlandırma, yazı tipi vb. olabilir. Yazı tipi önemlidir: farklı stiller veya aileler kullanmak, kullanıcının kafasının karışmaması ve neyle etkileşime geçebileceğini kolayca belirlemesi anlamına gelir.

Nasıl test edilir: Ürününüzdeki tüm kontrolleri tanımlayın ve içerikten farklı olduklarından emin olun. Kullanılabilirlik testleri çalıştırırken, kullanıcıların kontrollerle etkileşimde zorluk yaşayıp yaşamadığına dikkat edin.

20 – Yazı tipi boyutu/ağırlığı içerik türleri arasında farklılık gösterir

Neden önemli: Okunabilirliği ve anlamayı büyük ölçüde etkiler. Başlıklar, alt başlıklar ve paragraflar arasında net bir ayrım yapmak, bu içeriği sindirmedeki zihinsel aşırı yükü azaltır. Aynı zamanda görsel faydaları da vardır – daha iyi görünür ve hissettirir.

Nasıl test edilir: Ürününüzün içeriğini incelerken başlıkların, alt başlıkların ve paragrafların farklı yazı tipi boyutları ve ağırlıkları kullandığından emin olun.

Kullanıcı arayüzü

21 – Yakınlık ve hizalama

Neden önemlidir: Kullanıcının - işlevsel veya bağlamsal olarak - birbirine yakın öğeleri gruplandırma eğilimi vardır. Bir gezinme çubuğu buna iyi bir örnektir. Bu kalıbı takip etmek ve bağlı olan öğeleri gruplamak, kullanıcının arayüzünüzü anında anladığı anlamına gelir.

Nasıl test edilir: İşlevsel olarak benzer öğeleri arayın ve (mümkün olduğunda) birlikte gruplanıp gruplanmadıklarını kontrol edin.

22 – Çok adımlı iş akışları için ilerleme göstergesi

Neden önemlidir: Özellikle çok adımlı iş akışları için, kullanıcı kolayca bunalmış hissedebilir veya sonunda ne kadar sürede tamamlandığını merak edebilir. İlerleme göstergesi, kendilerini bulmalarına yardımcı olur, ancak daha da önemlisi, bir başarı hissi yaratır ve düşme oranlarını azaltır.

Nasıl test edilir: Bir şeyi başarmak için farklı adımların olduğu ürününüzün içindeki tüm akışları kontrol edin, ardından ilerlemenin bir gösterge aracılığıyla gösterildiğinden emin olun.

23 – Ön plan öğeleri (içerik ve kontroller gibi) arka plandan kolayca ayırt edilir

Neden önemlidir: Görme engelli kişiler için önemlidir. Aynı zamanda, kullanıcının öğrenme eğrisini ve kavrayışını geliştirir. Net ayrım, gezinmeyi kolaylaştırır, düğmelere daha fazla dikkat çeker ve genel olarak kullanılabilirliği artırır.

Nasıl test edilir: Ürününüzü ekran görüntüsü alarak yakalayın ve bu ekran görüntüsünü yaklaşık 3 piksel ila 5 piksel arasında bir Yarıçapta Gauss bulanıklaştırın. Sonuca baktığınızda neyin ön planda, neyin arka planda olduğunu kolayca söyleyebiliyor musunuz?

Listeyi gözden geçirdiğin için tebrikler! Ancak, bu son değil.

Ürününüz artık daha sağlam ve birkaç alanda gelişme göstermiş olabilirsiniz - örneğin şimdi daha erişilebilir olabilir - ancak her zaman test etmeye, kullanıcı geri bildirimi toplamaya ve yinelemeye devam etmeyi unutmayın.