it-swarm.it

Perché questo design è considerato disordinato o travolgente?

Sto sviluppando un'app Web per browser desktop e tablet. Tutta la mia conoscenza della UX deriva dall'esperienza personale e dall'iterazione: non sono mai stato addestrato formalmente. Mi sono preso molta cura nel presentare le informazioni su questo sito Web per mantenerle il più organizzate possibile, ma molte persone che mi hanno dato un feedback lo descrivono come "disordinato" e "travolgente". Sto lottando per scoprire come posso presentare le stesse informazioni migliorandole.

my website

Quali elementi di questo design a doppio menu e barra laterale basato su scheda stanno attivando questa risposta?

167
Jack Guy

Questo è dove UX diventa difficile

Non c'è nulla di intrinsecamente sbagliato nella tua interfaccia. Sembra che stia gestendo una grande quantità di informazioni in modo ragionevolmente chiaro e standardizzato.
Ma c'è qualcosa che non va nella tua interfaccia: Gli utenti non si sentono a proprio agio.

Questo è un problema complicato da risolvere, ma è il cuore di ogni progetto di design UX. Dipende totalmente dal pubblico che servi e dal contesto in cui useranno la tua app.

Dove iniziare

  1. Assicurati di non sopravvalutare le opinioni di un piccolo sottoinsieme di utenti. Questo è l'intero problema della "ruota cigolante". Potrebbero avere alcuni dubbi validi, ma devi essere sicuro che siano rappresentativi della più ampia popolazione di utenti.
  2. Siediti con utenti reali facendo cose reali con la tua app. Guarda cosa succede, quali compiti cercano di completare, dove rimangono bloccati, confusi o frustrati.
  3. Prova una soluzione alla volta. Quanto più atomico può essere ragionevolmente apportato alle modifiche, tanto più è possibile rimuovere con precisione il test.
  4. Fai un giro di ritorno con i tuoi utenti quando pensi di aver risolto qualcosa. Raccogli molti feedback e assicurati di aver risolto ciò che pensavi di aver risolto.

tl; dr

  1. Comprendi esattamente ciò che il tuo utente vuole realizzare.
  2. Elimina ogni
    [azione, parola, immagine, icona, colore, forma, pixel]
    che ciò non li rende migliori al n. 1.

Osservazioni generali

Dichiarazione di non responsabilità: non sono un utente e potrei non esserlo mai. Prendi le mie osservazioni per le ipotesi non qualificate che sono.

Gerarchia

I titoli delle carte attirano sicuramente la mia prima attenzione, grazie al piccolo triangolo d'angolo. Sembra un elemento importante. Quindi dove andrò dopo?

Il pulsante Create Game Sembra importante una volta trovato. La localizzazione sembra troppo impegnativa poiché si nasconde sul bordo dello schermo e utilizza l'unico colore di evidenziazione che hai, che è già utilizzato altrove.

Che ne dici delle cose Games e Users verso l'alto che sembrano nav? Attualmente, non sono sicuro di quale sia attivo o cosa farebbero.

In generale, c'è molto da chiedere per la mia attenzione. Questo mi porta a ...

Rumore visivo

Prova a ridurre il numero di cose discrete perfezionando le cose che ci sono. Ad esempio, l'indicatore Online potrebbe perdere il cerchio ed essere semplificato in questo modo:
Online indicator in text only.

Un'altra opportunità è nei dettagli della carta. Quante di queste informazioni sono necessarie a livello di panoramica? Potresti espanderne un po 'su hover/tap? E le icone dei dettagli non aggiungono alcuna informazione utile, ma aggiungono molto rumore visivo alla pagina a causa della loro frequenza. Perché non solo etichette di testo:
Details table without icons.

Anche nelle carte da gioco, non ho alcun contesto per la linea giallo-arancione. A prima vista, sembra un indicatore a forma di scheda sotto l'icona delle persone e potrebbe esserci un'altra scheda per Private. Non appena lo penso, mi rendo conto che non ha alcun senso. Attenzione più sprecata.

Monotonia

Nonostante i problemi di complessità, potrebbe esserci spazio per aggiungere qualcosa per spezzare la monotonia. Ci sarebbe significato consentire le immagini di copertina per i giochi? O forse usa quell'angolo blu L come colore di intestazione completo (supponendo che non sarebbero tutti uguali)?

165
plainclothes

La ripetizione di quelle etichette delle righe dei tavoli per ogni scatola di gioco sta contribuendo molto al disordine percepito dell'IMO. Inoltre sono necessarie tutte queste informazioni? Potresti forse provare a semplificare, ma aggiungi la possibilità di espandere se necessario.

enter image description here

72
Paul LeBeau

Hai una buona interfaccia utente ma alcune cose mi colpiscono e forse possono essere migliorate:

  • Troppe righe (puoi rimuoverne la maggior parte credo)
  • Troppo poco contrasto tra le diverse parti del tuo disegno (prova a offuscare gli occhi e vedi se riesci ancora a discernere le diverse parti del tuo disegno). Le carte sono particolarmente problematiche. Falli scoppiare.

Ho rimosso alcune linee e ho fatto risaltare un po 'di più le carte e penso che questo renda il tuo design un po' meno ingombrante. Giudica per te stesso.

enter image description here

33
filip

I dati visualizzati dalle carte avrebbero molto più senso in un elenco o in una tabella. Ogni carta ha gli stessi campi esatti con valori diversi e ogni volta vengono visualizzate le etichette per i campi. Una tabella con intestazioni visualizzerà le etichette "Time", "Language", ecc. Una sola volta.

Come nota sulle carte, sembrano più adatte a contenuti misti o in formato libero, in cui ogni carta presenta un'interfaccia utente unica su misura per il suo contenuto unico. Il tuo contenuto è un elenco di giochi disponibili, quindi rappresentarlo nell'interfaccia utente con un elenco ha senso.

17
Harrison Paine

personalmente, non penso che sia ingombra, ma sì, è un po 'travolgente.

Fondamentalmente, vedo il tuo schermo e non ho idea di dove cercare e cosa fare. Gli aspetti più importanti sembrano essere una L in un angolo e il fatto che qualcuno sia online (questo è dovuto al tuo uso dei colori), quindi mescoli le informazioni dando a tutto lo stesso livello di gerarchia. CTA s sono in grigio (!!!!), il tuo breadcrumb è strano in base allo schermo dato (stai mostrando giochi ma il tuo breadcrumb display Utenti e questo è un livello in Giochi , che è anche strano, a meno che tu non intenda Giocatori ), hai una barra laterale messaggio/chat che in qualche modo sembra essere correlata al contenuto principale, ma è davvero difficile trovare una connessione ... beh, è un po 'confuso. La buona notizia è che tutti questi aspetti potrebbero essere facilmente cambiati, il tuo problema principale sembra essere il focus sulle gerarchie, ciò che è importante e cosa no. Basta cambiare un paio di colori (principalmente il CTA) e testare. Sono sicuro che vedrai immediatamente i risultati

Ad ogni modo, penso che dovresti fare alcuni test ESTENSIVI, studiare comportamenti e interazioni e porre domande a utenti reali, non amici, non colleghi

11
Devin

Le risposte fornite qui sono fantastiche, ma alcune osservazioni:

  1. Metti l'avatar dell'utente in un cerchio grigio (più cerchi grigi sembrano ingombra), allo stesso modo metti informazioni significative in tutte le carte da gioco.

  2. Mantieni solo il cerchio verde come nozione per gli utenti online, rimuovi il testo, ad esempio "Online" dall'elenco degli amici, ma mantieni il testo negli stati degli utenti registrati in quanto li aiuterà a capire il significato di vari cerchi colorati come verde = online , rosso = offline, arancione = inattivo ecc.

  3. Rimuovi l'icona della posta da "Amici | Intestazione all 'come è già posizionata nell'intestazione della tua app. Fare riferimento alla seguente immagine per questi 3 punti.

  4. Inserisci il tuo menu Giochi e utenti nella scheda di navigazione in questo modo.

  5. Aumenta le dimensioni dell'angolo in alto a destra e la lettera in questo modo.

8
IT ppl

Ho alcune guide fondamentali da offrire, che dovrebbero applicarsi a tutte le UX, ed è particolarmente importante qui:

La convenienza non deve competere con la chiarezza.

Un designer dovrebbe sfruttare al massimo lo spazio dello schermo mentre presenta informazioni che non confondono o travolgono l'utente. Ma questo non significa che noi designer dobbiamo scambiare la quantità di informazioni disponibili per la chiarezza in cui sono presentate. Approfitta del design dinamico, con l'interazione dell'utente.

Accomodandosi con un fluido design fluido ...

In genere, i progettisti trovano naturale progettare interfacce in un editor di layout vettoriale, in cui non è possibile cablare un sacco di animazioni, transizioni e trasformazioni. Questo è ciò che limita molti di noi nella nostra capacità di progettare layout innovativi che espongono (e nascondono) informazioni attraverso l'interazione dell'utente. Quindi, prima impara a progettare in un ambiente in cui puoi costruire interfacce in movimento, animate e trasformanti. Personalmente progetto solo le mie interfacce con HTML, JS e CSS - dopo un po 'diventa un mezzo di progettazione naturale.

... possiamo creare ambienti che espongono e nascondono informazioni, attirando l'attenzione dell'utente.

Quindi, approfitta della fluida libertà che hai nel progettare la tua interfaccia per visualizzare suggerimenti di informazioni che "attirano" l'attenzione dell'utente da elemento a elemento nell'ordine desiderato o nell'ordine di cui hanno bisogno e interagiscono con l'interfaccia per accedere a diversi gruppi di informazioni.

Concentrandoci sull'interazione dinamica con l'utente, possiamo usare una semplice gerarchia di interfaccia per guidare l'utente alle informazioni di cui hanno bisogno, quando lo desiderano.

Vuoi esporre molte informazioni all'utente, ma c'è un limite alla quantità di persone che si sentono subito a proprio agio. Limitare il numero di dettagli esposti facendo affidamento sull'interazione dell'utente collegata ad animazioni fluide e semplici, soprattutto quando si ha a che fare con tabelle di informazioni duplicate come questo caso.

Ad esempio, nel tuo caso, invece di mostrare tutti quei blocchi di gioco con informazioni duplicate, prova a mostrare i blocchi con solo un'etichetta che identifica il gioco, quindi quando l'utente interagisce con esso (toccando o passa con il mouse per esempio), mostra i dettagli Del gioco. Solo questo cambiamento semplificherebbe drasticamente la tua interfaccia e renderebbe l'utente meno pressato ad assorbire così tante informazioni esposte contemporaneamente.

7
Viziionary

Bene, buone risposte ma non ti aiutano con una causa diversa da "Monotonia" - che non è un grande termine, ma vicino.

Il design eccezionale di riviste, poster e interfacce utente è il prodotto di font , dimensione del font e spazio bianco , ulteriormente migliorato con colore e non danneggiato con linea .

Queste proprietà: Carattere, Dimensione carattere, Spazio bianco e Colore addestrano l'utente a comprendere (a) ciò che è importante, (b) come cercare informazioni, e (c) come vedere i modelli nei dati a colpo d'occhio piuttosto che pensarci direttamente.

Leggere è uno sforzo molto costoso per le persone, quindi scansionare per identificare "quale di queste cose non assomiglia alle altre" o una variante del principio è ciò che vuoi trovare.

La posizione spaziale si sviluppa nel tempo con competenza, una volta che l'utente ha inconsciamente memorizzato l'interfaccia utente. (Gli utenti esperti come un'interfaccia in stile Excel e il nuovo utente no.)

In altre parole non è possibile fare affidamento sull'introspezione quando si progetta un'interfaccia a meno che non si sappia se si sta "testando" la progettazione per un utente entry level o esperto.

Si 'istruisce' l'utente su come guardare le informazioni usando la dimensione del carattere (priorità), lo stile del carattere (i caratteri trasmettono un significato relativo). Dopo che i caratteri usano forme (come la scheda d'angolo consigliata da qualcun altro). Dopo le forme usa colore . Il colore dovrebbe essere l'ultimo.

Il colore dovrebbe indicare tipo , oppure dovrebbe indicare "questa cosa è come le altre". Se devi "decorare" con il colore, (una barra colorata o uno sfondo) questo di solito rappresenta un fallimento, dal momento che non ha "significato".

Metti alla prova il tuo progetto eseguendo elementi separati in "livelli", quindi attiva e disattiva i livelli. Il tuo occhio dovrebbe dirtelo.

Interfaccia della carta

Ora, hai combinato "carte" (layout spaziale), ma usa caratteri e colori di un "tavolo".

Certamente non sembra che le carte siano un buon modello di interfaccia utente per la tua soluzione, quindi prima assicurati di aiutare l'utente. Le carte funzionano principalmente se contengono immagini e devono essere costantemente riorganizzate. Altrimenti le tabelle sono generalmente migliori, perché sono più facili da scansionare.

Ad esempio, se prendi un mazzo di carte da gioco e le lanci sul pavimento, puoi comunque distinguerle indipendentemente dalla loro direzione. Se lanci le tue "carte" sul pavimento, sembreranno tutte uguali.

Quindi fai affidamento sull'indicizzazione della posizione da parte del tuo utente, quindi stai utilizzando il modello sbagliato o devi risolvere la metafora della carta da gioco.

Suggerimenti utili

Cerco di consigliare alle persone di trovare un layout di pagina di una rivista su cui lavorare. Certo, il gold standard è la carta e il sito web della NYT. Tutto il tipo e lo spazio bianco.

Ma iniziare con un modello visivo (ad esempio il gioco da tavolo monopolistico) di solito aiuterà i progettisti a evitare il "problema delle scatole" che affligge i dilettanti.

6
Curt Doolittle

Quando noi umani osserviamo qualcosa di un po 'strutturato, come un'interfaccia utente, tendiamo a costruire un modello mentale.
Al fine di raggiungere tale obiettivo, eseguiamo la scansione dell'interfaccia utente in un istante, inconsciamente, e prendiamo nota di ogni singolo elemento dell'interfaccia utente.
In questo processo consumiamo "potere mentale", un importo che dipende dal numero di elementi nell'interfaccia utente. Ciò è correlato a carico cognitivo.
Dopo averlo fatto più volte ci stanchiamo, a seconda del carico cognitivo consumato.

Bene, la tua IU ha parecchi elementi e ciò di cui i tuoi utenti si lamentano è la quantità di carico cognitivo richiesto per ogni scansione.
Il numero di elementi non è il pannello "Hey ragazzi", ma il numero di icone, pezzi di testo, linee, tutto!
Questa è una buona notizia perché c'è molto margine per migliorare.

Elencherò alcuni esempi per farti capire il mio suggerimento:

  • ogni "Ehi ragazzi ..." ha un numero di linee interne che, se rimosse, alleggerirebbero il carico cognitivo senza ostacolare la comprensione dell'utente
  • la riga in "Creato da Jack"
  • i limiti di cella della tabella in "DETTAGLI"
  • la stessa parola "DETTAGLI"
  • le linee di artefatto "Amici | Tutti | ✉5" (mostra come un pulsante al passaggio del mouse)
  • le strisce zebrate sotto il manufatto Friends | All
  • "Online ●" potrebbe essere solo la parte di colore ma con una ✓ verde invece e una croce rossa altro
  • in Ordina/Filtri/Tutti i giochi prova ad impostare la freccia del menu a discesa più vicino al testo in modo che diventino una cosa sola
  • invece di immagini rotonde usa quelle quadrate che raggiungono tutti e tre i bordi
  • eccetera ...

Come primo test, prova ad espandere la tabella "DETTAGLI" in modo che tocchi tutti i suoi quattro confini (perdendo i suoi angoli arrotondati di Nizza e l'intestazione "DETTAGLI") e vedrai.
Sarà più semplice e quindi più facile da grok.
Quindi potresti credere e imbarcarti in una frenesia di cancellazione dell'elemento visivo.

5
Juan Lanus

Idee:

Crea gioco

Forse la prima carta potrebbe essere il tuo grande pulsante di creazione del gioco! Mi piacerebbe davvero avere quel tipo di input in cui puoi semplicemente fare clic sul testo che desideri modificare e compilarlo proprio lì. Penserei di renderlo anche reattivo, quindi forse quando lo vedi, è molto semplice, ha solo un "+" e "Crea gioco" e quindi su clic si anima senza problemi in quei campi di input automatici. (Supponiamo che la carta si capovolga in 3d. Ci sono infinite opzioni per la creatività qui!)

Carte da gioco

Idea simile per reattività: rimuovi il pulsante Unisci gioco e fallo apparire al passaggio del mouse come uno di quegli effetti di sovrapposizione semitrasparente. Mi piace l'idea di screenshot/game-art come sfondo.

Ecco cosa ho appena realizzato su queste schede, tuttavia: in realtà non è necessariamente l'approccio migliore per questo tipo di dati. Ogni carta ha gli stessi dettagli e le stesse informazioni presentate. Perché non solo un tavolo di qualche tipo? Quindi i giocatori potrebbero ordinarli per campo.

Potresti essere creativo e avere le etichette dei campi a sinistra o a destra, e quindi avere ancora un ampio orientamento simile a una carta con lo sfondo. Idee infinite anche qui! Forse allora possono scorrere da sinistra a destra, e scorrere su e giù potrebbe spostare il gruppo di carte in base alla classificazione, forse al tipo di gioco. (I tasti freccia ora possono essere coinvolti!)

Elenco giocatori

Questa (e forse l'intestazione) è la parte che sembra un po 'ingombra. Penso che siano solo molte informazioni visive nella periferia. Quindi, come possiamo risolvere questo? Ancora una volta, ci sono molte opzioni, dobbiamo solo essere creativi! Ancora una volta, iniziamo andando con gli sfondi. E poi forse un'interfaccia fisarmonica? Forse invece di "online o" potresti avere un cerchio pieno contro un cerchio mezzo pieno o vuoto. O qualsiasi altro indicatore tematico, come un nastro! (o usa un gradiente semitrasparente con un'icona scavata).

Un'idea è forse di includere anche solo le persone online, mentre quelle offline sono elencate di seguito come collegamenti separati da virgola, un po 'come quello che vedi nei forum:

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

(A proposito, io e mia madre abbiamo inventato questi nomi mentre giocavamo per vedere cosa potevamo fare con le regioni della tastiera.)


Quei suggerimenti sono solo per iniziare. Spero che sia d'aiuto!

4
HTDE
  • Aggiungi più contrasto per far risaltare maggiormente i contenuti importanti (i giochi di carte), ad esempio aggiungendo un colore di sfondo più scuro.

  • Rendi il tratto giallo più significativo aumentando le dimensioni della percentuale di giocatori che sono attualmente nella stanza. Una stanza piena otterrebbe un colpo rosso per esempio.

  • Il carattere della "L" blu sembra un altro carattere, il che lo rende davvero strano.

  • Probabilmente: Rimuovi le icone prima di "Round", "Time", "Language" e "Words". Sono divertenti ma anche fonte di distrazione e non sembrano aggiungere alcuna logica poiché il testo stesso è sufficiente.


Nota che ho cambiato solo le prime 2 caselle al 100% (la seconda casella ha ancora la vecchia L però, era solo per mostrare come indicazione).

New design

3
Daan

Secondo Jonathan Ive di Apple, una buona interfaccia presenta solo informazioni IMMEDIATAMENTE pertinenti per l'utente . Dai un'occhiata https://www.youtube.com/watch?v=3q6ULOT9Q4M

Questo potrebbe essere un po 'un aspetto secondario, ho avuto lo stesso problema. Con il mio cliente il problema sta avendo troppo spazio bianco nell'interfaccia. Per un layout basato su CARD come il tuo prova:

  1. Aggiunta di un colore di sfondo come #EEE alla sezione principale del contenuto

  2. Per la chat della barra laterale, rimuovere la linea aggiuntiva in grigio

  3. Hai la possibilità di rendere le carte pieghevoli, se devi presentare dati numerici come confronto, prova i grafici/grafici

2
William

La mancanza di gerarchia e la definizione di elementi nella pagina è il problema principale. L'uso dei colori di evidenziazione, la scala e la comprensione di come desideri che l'utente interpreti e digerisca le informazioni che gli presenti ti aiuteranno

2
David Sheridan