web-gelistirme-sc.com

Bu tasarım neden karmaşık veya bunaltıcı olarak kabul ediliyor?

Masaüstü ve Tablet tarayıcılar için bir web uygulaması geliştiriyorum. Tüm UX bilgilerim kişisel deneyim ve yinelemeden kaynaklanıyor - Hiç resmi eğitim almadım. Bu web sitesindeki bilgileri mümkün olduğunca düzenli tutmak için büyük özen gösterdim, ancak bana geri bildirimde bulunan birçok kişi bunu "karmaşık" ve "ezici" olarak nitelendiriyor. Aynı bilgiyi geliştirirken nasıl sunabileceğimi bulmak için uğraşıyorum.

my website

Bu kart tabanlı, çift menü, yan çubuk tasarımının hangi öğeleri bu yanıtı tetikliyor?

167
Jack Guy

Burası UX zorlaşıyor

Arayüzünüzde doğal olarak yanlış bir şey yok. Büyük miktarda bilgiyi makul ve net bir şekilde ele alıyor gibi görünüyor.
Ancak arayüzünüzde bir sorun var: Kullanıcılar bu konuda rahat hissetmiyor.

Bu çözülmesi karmaşık bir sorundur, ancak her UX tasarım projesinin kalbidir. Bu tamamen hizmet verdiğiniz kitleye ve uygulamanızı kullanacakları içeriğe bağlıdır.

Nereden başlamalı

  1. Küçük bir kullanıcı alt grubunun görüşlerine fazla değer vermediğinizden emin olun. Bütün bu "gıcırtılı tekerlek" sorunu. Bazı geçerli endişeleri olabilir, ancak daha büyük kullanıcı popülasyonunu temsil ettiklerinden emin olmanız gerekir.
  2. Uygulamanızla gerçek şeyler yapan gerçek kullanıcılarla oturun. Ne olduğunu, hangi görevleri tamamlamaya çalıştıklarını, nerede takıldıklarını, şaşkına döndüklerini veya sinirlendiklerini görün.
  3. Her seferinde bir çözümü test edin. Değişiklikleriniz ne kadar atomik olursa, testten o kadar doğru bir şekilde uzaklaşabilirsiniz.
  4. Bir şeyi düzelttiğinizi düşündüğünüzde kullanıcılarınızla geri dönün. Çok fazla geri bildirim toplayın ve çözdüğünüzü düşündüğünüz şeyi çözdüğünüzden emin olun.

tl; Dr.

  1. Tam olarak Kullanıcınızın neyi başarmak istediğini anlayın.
  2. Her şeyi yok et
    [aksiyon, Kelime, resim, ikon, renk, şekil, piksel]
    bu onları 1 numarada daha iyi yapmaz.

Genel gözlemler

Feragatname: Ben sizin kullanıcınız değilim ve asla olmayabilirim. Olmadıkları tahmin edilmemiş tahminler için gözlemlerimi alın.

Hiyerarşi

Küçük köşe üçgeni sayesinde kart başlıkları kesinlikle gözümün önüne geçti. Bu önemli bir unsur gibi görünüyor. Şimdi nereye gideceğim?

Create Game düğmesi bulduğumda önemli geliyor. Ekranın kenarında gizlendiğinden ve başka bir yerde kullanılan tek vurgu rengini kullandığından, konumlandırma çok fazla iş gibi görünüyor.

Nav'a benzeyen Games ve Users şeylere ne dersiniz? Şu anda hangisinin aktif olduğundan veya ne yapacaklarından emin değilim.

Genel olarak, dikkatimi çeken çok şey var. Bu beni ...

Görsel gürültü

Orada olan şeyleri düzelterek ayrık şeylerin sayısını azaltmayı deneyin. Örneğin, Online göstergeniz daireyi kaybedebilir ve şöyle basitleştirilebilir:
Online indicator in text only.

Başka bir fırsat kart detaylarında. Genel bakış düzeyinde bu bilgilerin ne kadarına ihtiyaç vardır? Fareyle üzerine gelindiğinde/dokunduğunda bazılarını genişletebilir misin? Ve ayrıntı simgeleri hiçbir yararlı bilgi eklemez, ancak sıklıkları nedeniyle sayfaya çok fazla görsel parazit ekler. Neden sadece metin etiketleri değil:
Details table without icons.

Ayrıca oyun kartlarında sarı-turuncu çizgi için bağlamım yok. İlk bakışta, kişiler simgesinin altında bir sekme göstergesi gibi görünüyor ve Private için başka bir sekme olabilir. Bunu düşündüğüm anda bunun bir anlamı olmadığını anlıyorum. Daha fazla boşa dikkat.

Monotonluk

Karmaşıklık endişelerine rağmen, monotonluğu kırmak için bir şeyler eklemek için yer olabilir. Oyunlar için kapak görüntülerine izin vermenin bir anlamı var mı? Ya da muhtemelen mavi L köşesini tam başlık rengi olarak kullanın (hepsinin aynı olmayacağını varsayarsak)?

165
plainclothes

Her oyun kutusu için bu tablo satırı etiketlerini tekrarlamak, algılanan dağınıklık IMO'suna çok katkıda bulunur. Ayrıca tüm bu bilgiler gerekli mi? Belki basitleştirmeyi deneyebilirsiniz, ancak gerekirse genişletme özelliğini ekleyebilirsiniz.

enter image description here

72
Paul LeBeau

İyi bir kullanıcı arayüzünüz var, ancak belki de geliştirilebilecek birkaç şey var:

  • Çok fazla satır (inandığım çoğunu kaldırabilirsiniz)
  • Tasarımınızın farklı bölümleri arasında çok az kontrast (gözlerinizi bulanıklaştırmayı deneyin ve tasarımınızın farklı bölümlerini hala fark edip edemeyeceğinizi görün). Kartlar özellikle sorunlu. Onları patlat.

Bazı çizgileri kaldırdım ve kartları biraz daha öne çıkardım ve bence bu tasarımınızı biraz daha az karmaşık hale getiriyor. Kendinizi yargılayın.

enter image description here

33
filip

Kartlar tarafından görüntülenen veriler bir listede veya tabloda çok daha anlamlı olacaktır. Her kart farklı değerlerle aynı alanlara sahiptir ve her seferinde alanların etiketlerini görüntülersiniz. Başlıkları olan bir tablo yalnızca "Zaman", "Dil" vb. Etiketlerini bir kez görüntüler.

Kartlarla ilgili bir not olarak, her kartın benzersiz içeriği için uyarlanmış benzersiz bir kullanıcı arayüzü sunduğu karma veya serbest biçimli içerik için daha uygun görünüyorlar. İçeriğiniz kullanılabilir oyunların bir listesidir, bu nedenle kullanıcı arayüzünde bir listenin temsil edilmesi mantıklıdır.

17
Harrison Paine

kişisel olarak, bunun dağınık olduğunu düşünmüyorum, ama evet, biraz ezici.

Temel olarak, ekranınızı görüyorum ve nereye bakacağımı ve ne yapacağımı bilmiyorum. En önemli yönler bir köşede L ve birisinin çevrimiçi olması (bu, renk kullanımınız nedeniyle) gibi görünüyor, o zaman her şeye aynı hiyerarşi seviyesini veren bilgileri karıştırıyorsunuz. CTA s grileşir (!!!!), ekmek kırıntısı verilen ekrana göre gariptir (oyunları görüntülüyorsunuz, ancak ekmek kırıntı ekranınız var Kullanıcılar ve bu, Oyunlar altında bir düzeydir ve bu demek istemediğiniz sürece Oyuncular ), bir şekilde ana içerikle ilgili gibi görünen bir mesaj/sohbet kenar çubuğunuz var, ancak bir bağlantı bulmak gerçekten zor ... biraz kafa karıştırıcı. İyi haber şu ki, tüm bu yönler kolayca değiştirilebilir, asıl sorununuz hiyerarşilere odaklanmak, neyin önemli ve neyin olmadığıdır. Sadece birkaç rengi (özellikle CTA) değiştirin ve test edin. Eminim sonuçları hemen göreceksin

Her neyse, bence bazı KAPSAMLI testler yapmalı, davranışları ve etkileşimleri incelemeli ve meslektaşlara değil arkadaşlara değil, gerçek kullanıcılara sorular sormalısınız.

11
Devin

Burada verilen cevaplar harika, ancak birkaç gözlem:

  1. Kullanıcının avatarını gri bir daireye koyun (birden fazla gri daire dağınık görünüyor), aynı şekilde tüm oyun kartlarına anlamlı bilgiler koyun.

  2. Çevrimiçi kullanıcılar için yalnızca yeşil çemberi bir kavram olarak saklayın, metni arkadaş listesinden 'Çevrimiçi' olarak kaldırın, ancak yeşil = çevrimiçi gibi çeşitli renkli çevrelerin anlamını anlamalarına yardımcı olacağından, giriş yapmış kullanıcı durumlarındaki metni saklayın. , kırmızı = çevrimdışı, turuncu = boşta vb.

  3. Posta simgesini 'Arkadaşlar | Hepsi 'başlığı, uygulama başlığınıza zaten yerleştirildiği için. Bu 3 nokta için aşağıdaki resme bakın.

  4. Oyunlar ve Kullanıcılar menüsünü gezinme sekmesine böyle yerleştirin.

  5. Sağ üst köşenin boyutunu ve bunun gibi harfi büyütün.

8
IT ppl

Tüm UX için geçerli olan ve burada özellikle önemli olan bazı temel kılavuzlarım var:

Kolaylık, açıklıkla rekabet etmek zorunda değildir.

Bir tasarımcının, kullanıcıyı şaşırtmayan veya bunaltıcı olmayan bilgiler sunarken ekran alanından maksimum fayda sağlaması beklenir. Ancak bu yapmaz, tasarımcıların sunulduğu netlik için mevcut miktarda bilgi alışverişi yapmamız gerektiği anlamına gelir. Kullanıcı etkileşimi ile dinamik tasarımdan yararlanın.

Akışkan tasarım ortamı ile rahat ederek ...

Biz tasarımcılar, genellikle bir grup animasyon, geçiş ve dönüşümleri birleştirmediğimiz bir vektör düzen düzenleyicide arayüzler tasarlamayı doğal buluyoruz. Bu, birçoğumuzu, kullanıcı etkileşimi yoluyla bilgileri ortaya çıkaran (ve gizleyen) yenilikçi mizanpajlar tasarlama yeteneğimizde sınırlandırır. Bu nedenle, önce hareketli, animasyonlu, dönüştürücü arayüzler oluşturabileceğiniz bir ortamda tasarım yapmayı öğrenin. Kişisel olarak sadece HTML, JS ve CSS ile arayüzlerimi tasarlıyorum - bir süre sonra doğal bir tasarım ortamı haline geliyor.

... kullanıcının dikkatini çekerken bilgileri ortaya çıkaran ve gizleyen ortamlar oluşturabiliriz.

Ardından, kullanıcının odağını istediğiniz öğeden öğeye veya ihtiyaç duydukları sırayla "çeken" ve ipuçlarıyla etkileşime giren bilgi ipuçlarını görüntülemek için arabiriminizi tasarlarken sahip olduğunuz akışkan özgürlükten yararlanın farklı bilgi gruplarına erişmek için.

Dinamik kullanıcı etkileşimine odaklanarak, kullanıcıyı istedikleri zaman, ihtiyaç duydukları bilgilere yönlendirmek için basit bir arayüz hiyerarşisi kullanabiliriz.

Kullanıcıya çok fazla bilgi vermek istiyorsunuz, ancak insanların bir kerede rahat hissettikleri miktarın bir sınırı var. Özellikle bu durum gibi yinelenen bilgi tablolarıyla uğraşırken, düzgün ve basit animasyona bağlı kullanıcı etkileşimine dayanarak ortaya çıkan ayrıntıların sayısını sınırlayın.

Örneğin, sizin durumunuzda, tüm bu oyun bloklarını yinelenen bilgilerle göstermek yerine, yalnızca oyunu tanımlayan bir etikete sahip bloklar göstermeyi deneyin ve ardından kullanıcı onunla etkileşime girdiğinde (örneğin dokunulduğunda veya üzerine geldiğinde) ayrıntıları gösterin Oyunun Bu değişiklik tek başına arayüzünüzü büyük ölçüde basitleştirecek ve kullanıcının bir kerede çok fazla açıklanmış bilgiyi emmesi için daha az baskı hissetmesini sağlayacaktır.

7
Viziionary

Peki, iyi cevaplar ama "Monotony" dışında neden size yardımcı değil - bu harika bir terim değil, yakın.

Dergi, Afiş ve Kullanıcı Arayüzlerindeki mükemmel tasarım font, font boyutu ve boşluk, daha da geliştirildi renk ile değil zarar görmüş ile satır.

Bu özellikler: Yazı Tipi, Yazı Tipi Boyutu, Boşluk ve Renk tren kullanıcı (a) neyin önemli olduğunu, (b) bilgi için nasıl tarama yapılacağını ve (c) verileri doğrudan düşünmek yerine bir bakışta.

Okuma, insanlar için çok maliyetli bir çabadır, bu nedenle tarama, "bunlardan hangisinin diğerleri gibi görünmediğini" veya prensibin bazı varyantlarını bulmak istediğiniz şeyleri belirlemek için tarama yapar.

Uzamsal konum, kullanıcı bilinçsizce kullanıcı arayüzünü ezberledikten sonra zamanla uzmanlıkla gelişir. (Deneyimli kullanıcılar Excel tarzı bir arayüz gibi ve yeni kullanıcılar bunu sevmez.)

Başka bir deyişle bir giriş tasarlarken bir giriş düzeyi veya deneyimli bir kullanıcı için 'test' edip etmediğinizi bilmiyorsanız, introspection'a güvenemezsiniz.

Kullanıcıya, yazı tipi boyutu (öncelik), yazı tipi stili (yazı tipleri göreli anlamı taşır) kullanarak bilgilere nasıl bakılacağını 'eğitirsiniz'. Yazı tiplerinden sonra şekiller (başkasının önerdiği köşe sekmesi gibi) kullanın. Şekiller sonra renk kullanın. Renk son olmalıdır.

Renk ya tür ya da 'bu şey diğerleri gibi' anlamına gelmelidir. Renkle 'süslemeniz' gerekiyorsa (renkli bir çubuk veya arka plan), bu genellikle bir başarısızlığı temsil eder, çünkü 'anlamı' yoktur.

'Katmanlar'da ayrı öğeler yaparak tasarımınızı test edin ve ardından katmanları açın ve kapatın. Gözün sana söylemeli.

Kart arayüzü

Şimdi, 'kartları' (uzamsal düzen) birleştirdiniz, ancak bir 'tablo' yazı tipleri ve renkleri kullanın.

Kartların çözümünüz için iyi bir UI modeli olduğu kesinlikle görünmüyor, bu yüzden önce kullanıcıya yardım ettiğinizden emin olun. Kartlar öncelikle görüntüleri tutarlarsa çalışırlar ve sürekli olarak yeniden düzenlenmeleri gerekir. Aksi takdirde tablolar genellikle daha iyidir, çünkü taranması daha kolaydır.

Örneğin, bir paket oyun kartı alıp onları yere atarsanız, yönleri ne olursa olsun onları birbirinden ayırabilirsiniz. Eğer 'kartlarınızı' yere atarsanız, hepsi aynı görünür.

Bu nedenle, kullanıcı tarafından konum endekslemesine güveniyorsunuz, o zaman yanlış modeli kullanıyorsunuz veya oyun kartı metaforunu çözmelisiniz.

Yardımcı ipuçları

İnsanlara çalışmak için bir dergi sayfası düzeni bulmalarını tavsiye etmeye çalışıyorum. Tabii ki, altın standart NYT kağıt ve web sitesidir. Her tür ve beyaz boşluk.

Ancak görsel bir modelle (örneğin tekel masa oyunu) başlamak genellikle tasarımcıların vebaların amatörlerin 'kutular sorunundan' kaçınmasına yardımcı olacaktır.

6
Curt Doolittle

İnsanlar UI gibi biraz yapılandırılmış bir şeye baktığımızda zihinsel model oluşturma eğilimindeyiz.
Bu hedefe ulaşmak için, kullanıcı arayüzünü bilinçsizce anında tararız ve bahsedilen kullanıcı arayüzündeki her bir öğeyi not ederiz.
Bu süreçte, kullanıcı arayüzündeki elemanların sayısına bağlı olarak bir miktar olan “zihinsel güç” tüketiyoruz. Bu bilişsel yük ile ilgilidir.
Bunu yaptıktan sonra, tüketilen bilişsel yüke bağlı olarak birkaç kez "yoruluyoruz".

Kullanıcı arayüzünüzde çok sayıda öğe vardır ve kullanıcılarınızın şikayet ettiği şey, her tarama için gereken bilişsel yük miktarıdır.
Eleman sayısı "Hey millet" panelleri değil, ikonların, metin parçalarının, çizgilerin, her şeyin sayısı!
Bu iyi bir haber çünkü gelişmek için çok fazla boşluk var.

Önerimi anlamanız için birkaç örnek vereceğim:

  • her "Hey çocuklar ...", kaldırılırsa, kullanıcı anlayışını engellemeden bilişsel yükü hafifletecek bir dizi dahili çizgiye sahiptir.
  • "Jack tarafından oluşturuldu" altındaki satır
  • tablonun "DETAYLAR" altındaki hücre sınırları
  • "DETAYLAR" Kelimesinin kendisi
  • "Arkadaşlar | Tümü | ✉5" yapay çizgiler (fareyle üzerine gelindiğinde düğme gibi göster)
  • altındaki zebra çizgileri | Tüm eserler
  • "Çevrimiçi ●" yalnızca renkli kısım olabilir, bunun yerine yeşil ✓ ve kırmızı çarpı işareti olabilir
  • sırala/Filtreler/Tüm oyunlar, tek bir şey haline gelmeleri için açılır oku metne yakınlaştırmayı deneyin
  • yuvarlak resimler yerine her üç kenara ulaşan kare resimleri kullanın
  • vb ...

İlk test olarak, "DETAILS" tablosunu dört sınırına da dokunacak şekilde genişletmeyi deneyin (Nice yuvarlak köşelerini ve "DETAILS" başlığını kaybederek) ve göreceksiniz.
Bakmak daha basit ve daha kolay olacak.
O zaman inanabilir ve görsel eleman silme çılgınlığına başlayabilirsiniz.

5
Juan Lanus

Fikirler:

Oyun Oluştur

Belki de ilk kart, büyük bir oyun oluştur düğmeniz olabilir! Düzenlemek istediğiniz metni tıklayabileceğiniz ve oraya doldurabileceğiniz bu tür girdilere sahip olmasını gerçekten istiyorum. Ben de duyarlı hale getirmeyi düşünürdüm, belki de gördüğünüzde, çok basit, sadece bir "+" ve "Oyun Oluştur" var ve daha sonra bu otomatik giriş alanlarında sorunsuz bir şekilde canlandırıyor. (Diyelim ki kartın 3 boyutlu bir çevirmesi var. Burada yaratıcılık için sonsuz seçenekler var!)

Oyun Kartları

Duyarlılık için benzer fikir: oyuna katıl düğmesini kaldırın ve fareyle üzerine gelindiğinde bu yarı saydam yer paylaşımı efektlerinden biri olarak görünmesini sağlayın. Ekran görüntüleri/oyun-sanat fikrini duvar kağıdı olarak seviyorum.

İşte bu kartlar hakkında az önce fark ettiğim şey: Aslında bu tür veriler için en iyi yaklaşım olmayabilir. Her kartta sunulan bilgiler ve bilgiler aynıdır. Neden sadece bir çeşit masa değil? Sonra oyuncular sahaya göre sıralayabilir.

Yaratıcı olabilir ve alan etiketlerini sol veya sağda tutabilir ve yine de duvar kağıdı ile geniş bir kart benzeri yönlendirmeye sahip olabilirsiniz. Burada da sonsuz fikirler var! Belki soldan sağa kaydırabilirler, VE yukarı ve aşağı kaydırmak kart grubunu sınıflandırma, belki de oyun türü olarak kaydırabilir. (Ok tuşları artık devreye girebilir!)

Oyuncu Listesi

Bu (ve belki de başlık) biraz dağınık görünen kısımdır. Bence bu çevre biriminde çok fazla görsel bilgi. Peki bunu nasıl düzeltebiliriz? Yine, birçok seçenek var, sadece yaratıcı olmalıyız! Yine, duvar kağıtları ile başlayalım. Ve sonra belki akordiyen bir arayüz? Belki "çevrimiçi o" yerine, dolu veya boş bir daireyle dolu bir daireniz olabilir. Ya da bir kurdele gibi diğer tematik göstergeler! (veya içi boş bir simgeye sahip yarı saydam bir degrade kullanın.)

Bir fikir, belki de sadece çevrimiçi kişileri dahil etmektir, ancak çevrimdışı, aşağıda forumlarda gördüğünüz gibi virgülle ayrılmış bağlantılar olarak listelenir:

Qwerty Uiop , Plok Min Juhby , Wes X Qwaz , Kip HG Jolumny , . Ferd , Chasbyn Q Jon Klimp-Werdguft ZCXV , Guy T. Fred , Ty Hug

(BTW, annem ve ben klavyenin bölgeleriyle neler yapabileceğimizi görmek için bir oyun oynarken bu isimleri bulduk.)


Bu öneriler sadece başlamak için. Umarım yardımcı olur!

4
HTDE
  • Örneğin daha koyu bir arka plan rengi ekleyerek, önemli içeriğin daha fazla öne çıkmasını sağlamak için daha fazla kontrast ekleyin.

  • Şu anda odada bulunan oyuncuların yüzdesini artırarak sarı konturu daha anlamlı yapın yapın. Örneğin, dolu bir odada kırmızı bir vuruş elde edilir.

  • Mavi "L" nin yazı tipi, başka bir yazı tipi gibi görünüyor, bu da gerçekten garip.

  • Tartışmalı: "Yuvarlak", "Zaman", "Dil" ve "Kelimeler" den önce simgeleri kaldırın. Eğlenceli ama aynı zamanda dikkat dağıtıcı ve metnin kendisi yeterli olduğu için herhangi bir mantık eklemiyor gibi görünüyorlar.


Sadece ilk 2 kutuyu% 100 değiştirdiğimi unutmayın (2. kutuda hala eski L var, sadece gösterge olarak gösterilecekti).

New design

3
Daan

Apple'dan Jonathan Ive'ye göre, iyi bir arayüz sadece kullanıcı ile HEMEN ilgili bilgiler sunar . Kontrol edin https://www.youtube.com/watch?v=3q6ULOT9Q4M

Bu biraz küçük bir nokta olabilir, aynı sorun vardı. Müvekkilim ile sorun arayüzde çok fazla BEYAZ ALAN oluyor. Sizinki gibi CARD tabanlı bir düzen için şunları deneyin:

  1. Ana içerik bölümüne #EEE Gibi bir arka plan rengi ekleme

  2. Kenar çubuğu sohbeti için ekstra satırı gri renkte kaldırın

  3. Kartları katlanabilir hale getirme seçeneğiniz var, sayısal verileri karşılaştırma olarak sunmanız gerekiyorsa, grafikleri/grafikleri deneyin

2
William

Hiyerarşi eksikliği ve sayfadaki öğelerin tanımlanması temel sorundur. Vurgu renklerini, ölçeği ve kullanıcının onlara sunduğunuz bilgileri nasıl yorumlamasını ve sindirmesini istediğinizi anlamak size yardımcı olacaktır.

2
David Sheridan