it-swarm-eu.dev

Esiste un modo "piacevole" per mostrare le icone di navigazione in modo che non ingombrino l'interfaccia utente?

Ho una piccola applicazione desktop che analizza le cartelle musicali e sceglie casualmente un album da riprodurre. La prima versione è WinForms e ha i pulsanti "precedente" e "successivo" su entrambi i lati della copertina dell'album che vengono attivati ​​quando ci sono più album dello stesso artista.

enter image description here

Non sono contento di questa UI poiché i pulsanti occupano troppo spazio.

Sto riscrivendo l'applicazione usando WPF e sto cercando un modo migliore per indicare che ci sono altri album dello stesso artista. Ho sperimentato con la visualizzazione dei pulsanti in cima alla copertina e mostrandoli solo quando il mouse si sposta sulla loro posizione, ma non sono contento del risultato principalmente perché non vi sono indicazioni che ci siano opzioni.

Ho trovato un trucco accurato su Brian Stevens Photography sito in cui il cursore cambia in "+" e "-" su ogni metà dell'immagine per indicare la navigazione, ma utilizzo anche un clic sull'immagine per giocare quell'album quindi dovrei adattare questo approccio se volessi usarlo da solo.

C'è un modo migliore o una giostra o un flusso di copertura controlla la strada da percorrere?

Per ulteriori informazioni leggi questo post di blog mio.

10
ChrisF

Fondamentalmente 2 idee qui, la prima mostra piccoli cerchi, quella evidenziata al centro è la pagina/album corrente che viene mostrata, quando si fa clic sulle frecce si evidenzierebbe la prossima/precedente. Questo dà agli utenti un'idea di quanti album sono disponibili per il dato artista.

(ri-proposizione di Matt Lutze eccellente ASCII)

[Settings]  [Random album]  [Info]

 {                              }
 {                              }
 {            Cover             } 
 {                              }
 {                              }

 <<       o o o * o o o        >>

Il prossimo potrebbe essere mostrato quando ci sono più di 6 album per un artista, che mostra solo l'album 1 degli album totali.

[Settings]  [Random album]  [Info]

 {                              }
 {                              }
 {            Cover             } 
 {                              }
 {                              }

 <<          1 of 10           >>

In questo modo gli elementi sono ancora presenti e mostrano una coda visiva (o letterale) che c'è di più da visualizzare/ascoltare.

Random Idea: Naturalmente mi piace molto l'idea di fare clic sulla copertina e di poter guardare all'interno, che in questo caso mostrerebbe semplicemente un elenco delle canzoni disponibili in quell'album. Questa sarebbe loro l'opzione di suonare una canzone specifica.

[Settings]  [Random album]  [Info]

 {   1. Song Names here       ^ }
 {   2. Song Names here         }
 {   3. Song Names here         }
 {   4. Song Names here         }
 {   5. Song Names here       v }

 <<           1 of 10          >>
9
Drofnas

I pulsanti di navigazione sembrano difettosi a causa di dissonanza visiva

  • Sono rotondi e l'immagine è quadrata.
  • Sono fortemente luminosi in 3D e l'immagine è piatta

e

  • Lo spazio che sprecano sopra e sotto è in grigio piatto inutilizzato, non usando una decorazione simile ai pulsanti, quindi non si armonizza nemmeno con i pulsanti.

Stretto piatto rettangolare pulsanti tutta l'altezza della copertina dell'album, usando ">" in pila (o "<") al centro risolverebbe questi tre problemi, ma la copertina sarebbe ancora separando i controlli di navigazione. Funzionerà meglio con i controlli di navigazione in un blocco visivo.


Ecco una soluzione vecchio stile (a sinistra) e una na soluzione più moderna (a destra).

Lo stile dei pulsanti (smussatura/arrotondamento/ombreggiatura/what-have-you) dovrebbe corrispondere allo stile per la cornice della copertina.

enter image description here

Quello di sinistra ha il vantaggio di poter facilmente aumentare le dimensioni dei pulsanti sinistro/destro in base alla quantità di immobili che si desidera assegnare e alla facilità con cui si desidera che vengano colpiti.

Quello di destra ha una mini giostra fish-eye sotto di essa. Dovresti scattare una vecchia foto delle miniature quando non sono attivate per non distrarre dalla copertina e hai poca scelta sulle dimensioni.

La sinistra è semplice ed efficace, la destra ha più complimenti per gli occhi. Preferisco la sinistra. Probabilmente puoi immaginare da quale epoca provengono i miei gusti musicali.

5
James Crook

Come altro suggerimento, CoverFlow di Apple utilizza una barra di scorrimento orizzontale sotto la copertina per consentire all'utente di sfogliare le copertine.

Vantaggi:

  • Può scorrere rapidamente attraverso l'arte. Potrebbe non essere un requisito per la tua app.
  • Scale squisite con un gran numero di opere d'arte.
  • Consente una buona ricerca casuale sfogliando avanti e indietro.

Svantaggi:

  • Non ovvio quanti articoli ci sono.
3
ICR

Solo perché un elemento dell'interfaccia utente non è immediatamente evidente, non significa che sia una cattiva scelta. Andrei sicuramente con qualcosa in cui il clic sul lato destro della copertina avanza di un passo e il clic sul lato sinistro torna indietro. (Supponendo che questo verrà utilizzato solo con le lingue da sinistra a destra?)

Invece dei segni + e - del sito Web di foto, suggerirei solo <e>. E non vorrei che li trasformassero o seguissi il cursore, li posizionerei solo in mezzo a destra e in mezzo a sinistra.

Puoi provare a fare clic nel mezzo per riprodurre/mettere in pausa l'album.

Questo tipo di interfaccia utente quasi invisibile è altrettanto facile da usare una volta che l'hai trovata, e sembra molto più bello che avere pulsanti separati appesi attorno che (come al solito) sembrano pulsanti. L'estremo estetico di questo sarebbe incorporare tutti gli elementi dell'interfaccia utente in elementi invisibili nell'anteprima della copertina. In modo da vedere solo la copertina (e forse il titolo della canzone) quando il mouse non è sospeso su di essa. Forse questo funzionerebbe per la tua app, e forse no.

3
Scott Newson

Domanda interessante e alcuni punti positivi con entrambe le risposte esistenti.

Per quanto riguarda i controlli onnipresenti e nascosti: consiglierei di inclinarmi verso i controlli che sono sempre visibili, ma che non distraggono visivamente. Verde, blu, fantasia; tutti hanno il potenziale per essere almeno un po 'fonte di distrazione. In genere sono d'accordo con Nir qui sull'uso di semplici frecce o simboli "maggiori di"

<< {Immagine} >>

vs. icone/pulsanti.

Estenderei il suggerimento anche alle tue icone principali e forse suggerirei di lasciare che il concetto colmi visivamente il confine dell'app desktop/web app:

[Settings]  [Random album]  [Info]
              Title
   {                          }
   {                          }
<< {          Cover           } >>
   {                          }
   {                          }

Generalmente tendo a rendere la copertina l'oggetto dominante nell'interfaccia. Fila sottile di pulsanti di collegamento testo nella parte superiore, il titolo, quindi una grande immagine della copertina, con barre strette avanti-indietro su entrambi i lati. O qualcosa di simile.

Comunque tu lo muova, almeno suggerisco di non usare nuovi indicatori dinamici come cambiare l'icona del puntatore del mouse. Molte persone si spaventano o si innervosiscono quando il loro indicatore cambia; dalla mia esperienza, l'utente si aspetta che il proprio puntatore faccia cose prevedibili dopo azioni prevedibili e non li sorprenda.

Progetto accurato e grazie per la discussione. Sono curioso di sentire cosa pensano gli altri.

2
Matt

Come qualcuno che risponde alle e-mail di supporto, posso dirti che se un elemento dell'interfaccia utente non è immediatamente evidente, una buona percentuale della tua base di utenti non lo troverà mai.

Inoltre non leggeranno mai i documenti o alcun messaggio popup.

Una funzione dovrebbe essere ovvia (e spesso anche avere un pulsante non è abbastanza ovvio) o semplicemente funzionare senza disturbare l'utente (il quadratino rosso sottolinea il controllo ortografico è un buon esempio, non devi trovarlo - è solo lì ).

Puoi ridisegnare i pulsanti in modo che non siano così grandi e quindi si fondano di più con lo sfondo, ad esempio se sostituisci i pulsanti con due piccole frecce che non hanno quel telaio pesante che non sporgerebbero molto mentre ancora segnali all'utente c'è qualcosa di più disponibile.

2
Nir

Consulta il Web per assistenza. È dove vivono la maggior parte degli utenti e guida le loro aspettative sull'interfaccia utente. Guarda i siti popolari per il tuo target demografico e scopri come gestiscono la navigazione. La navigazione della musica è simile alla navigazione delle foto, quindi consulta i siti di giornali e riviste per una guida.

La navigazione di questo tipo è spesso eseguita da piccoli pulsanti sopra la grafica o da pulsanti trasparenti che appaiono al passaggio del mouse. Se l'interfaccia utente è progettata in modo tale che l'utente faccia clic sulla copertina di un album per ascoltarla, scoprirà i pulsanti trasparenti abbastanza rapidamente.

1
David Veeneman