it-swarm-eu.dev

Barra dei pulsanti: criteri e posizione

Io e il mio team stiamo (ri) pensando ad alcuni dettagli dell'interfaccia utente della nostra applicazione principale.

È un'applicazione desktop "tradizionale" per la piattaforma Windows. È un'applicazione mirata al business e i nostri clienti sono commercialisti, professionisti, avvocati e (nel complesso) i loro dipendenti.

Attualmente abbiamo una barra dei pulsanti posizionata nella parte inferiore di ogni finestra. Il problema principale è che a volte ci sono troppi pulsanti e non c'è modo di enfatizzare le azioni più importanti da quelle meno.

Così abbiamo deciso di dividere la barra dei pulsanti in due, ottenendo i "pulsanti di azione" (pulsanti sulle azioni che "fanno qualcosa con gli oggetti") a parte i "pulsanti di navigazione" (pulsanti che chiamano azioni che terminano chiudendo la finestra), dove :

  • I pulsanti di azione sono posizionati nella parte inferiore sinistra delle finestre: Nuovo elemento, Dettagli, Stampa, Elimina
  • I pulsanti di navigazione sono posizionati nella parte in basso a destra delle finestre: Chiudi, Indietro

  • È una buona idea?

  • Sarebbe chiaro agli utenti finali i criteri?

Ho preparato 2 immagini diverse:

Aggiornato - caricato sul mio account Dropbox:

Prima:

Before

After:

After

Grazie

11
franz976

In ambiente Windows, vedrei più la barra di navigazione in alto (a meno che non venga usata molto spesso..in quel caso potrebbe esserci un problema altrove). Posizionerò la barra dei pulsanti di azione come barra degli strumenti a sinistra o a destra. Preferisco leggermente il giusto perché è più naturale per i destrimani ed è quello che abbiamo sulle app più popolari come Office.

Per evidenziare alcune azioni, penso che l'uso delle combinazioni di colori per la differenziazione sia piuttosto efficace.

0
Marc D

È (separare l'azione dai pulsanti di navigazione) una buona idea?
Sì.

Sarebbe chiaro agli utenti finali i criteri?
Se ben eseguiti, non se ne accorgeranno ma agiranno come se.


Il tuo miglioramento viola una regola empirica, tuttavia:

I pulsanti di navigazione vanno prima cosa influenzano.
I pulsanti di conferma seguono cosa confermi.

Tuttavia, in quel caso particolare, direi che non è un grosso problema violarlo, dati i segnali di layout (ad es. Linea di separazione) che suggerisci.

Sarebbe comunque ok se li avessi in una riga, conferma a sinistra, "Seleziona azienda" a destra.

Se non si tratta di un popup/sottomaschera, è possibile prendere in considerazione la rimozione dell'espressione "Chiudi", poiché in genere si trova nel riquadro della finestra.

3
peterchen

Per me è più naturale posizionare i pulsanti di azione in alto. Questo mi sembra molto più intuitivo.

Alla prima scansione della pagina viene quindi chiarito direttamente cosa può fare l'utente.

Ci sono molte diverse azioni nella tua lista:

  • seleziona azienda: chiude la finestra, presumo di passare a una società; questa non è la visione dell'azienda allora? perché se lo fosse preferirei una finestra di dialogo che mi permetta di selezionare un'altra società, e alla chiusura aggiornare lo schermo con la società selezionata.
  • chiudi: perché non usare la finestra predefinita chiudi? o lascia questo pulsante in basso
  • nuovo: dovrebbe essere in alto, perché non voglio scorrere la pagina, ma creare immediatamente una nuova (azienda?).
  • stampa: idem dito, fammi stampare subito
  • i dettagli e l'eliminazione sono un po 'confusi, in quanto si applicano alla selezione

Quindi proporrei qualcosa del genere:

enter image description here

(l'immagine è stata realizzata con una versione di valutazione di WireframeSketcher, da cui l'orribile filigrana)

Piccola spiegazione:

  • penso select company e new sono le azioni che ti porteranno via dalla pagina senza dover scansionare il resto della pagina.
  • l'azione in blocco sarebbe details o delete per quelle righe che sono selezionate
  • print è vicino alla griglia/tabella, poiché tutto ciò che viene visto verrà stampato (potrebbe anche essere posizionato in fondo, accanto a close
  • close è nella parte inferiore, nella parte superiore dello schermo l'utente può utilizzare l'impostazione predefinita [x]; se le capita di aver scansionato l'intera pagina e si trova in fondo, può chiudere anche la finestra.

Una versione un po 'più compatta:

enter image description here

Spero sia utile.

3
nathanvda

Penso che la separazione logica dei pulsanti in due gruppi sia grande. Non capisco perché metti i due pulsanti in basso a destra rispetto agli altri? È possibile separare in due gruppi e disporne ancora sullo stesso livello. Inoltre, penso che sarebbe meglio avere tutti i pulsanti sopra la tabella invece che sotto.

1
Pasha Bitz

Beh non lo so. Mi piace avere tutti i pulsanti in basso a destra. Sono abituato a trovarli lì con maghi e simili. Se si tratta di enfatizzare alcuni e non altri pulsanti, suggerirei di pensare di offrire quelli più importanti come pulsanti e altre azioni come collegamenti. È qualcosa che molti siti web fanno al giorno d'oggi (Salva come pulsante, Annulla come link alla sua destra) e perfettamente utilizzabile nelle app desktop, così come il concetto di link cliccabili trasferisce abbastanza bene dalle app Web a quelle desktop.


Dopo aver dato un'occhiata alle immagini, penso che la tua idea potrebbe funzionare abbastanza bene e sarebbe chiaro per gli utenti finali a condizione che tu sia molto severo nel "categorizzare" le tue azioni e quindi selezionando su quale barra dovrebbero apparire. Invece di Azione contro Navigazione, forse una distinzione più facilmente applicata e quindi riconosciuta potrebbe essere "Azioni oggetto" rispetto a "Forma o azioni generali", dove le azioni oggetto si riferiscono sempre alle informazioni in una griglia (elenco, ...) e le azioni generali sempre si riferiscono all'intero elenco o al modulo (se non esiste un elenco).

0
Marjan Venema

I pulsanti per Nuovo, Dettagli, Stampa ed Elimina appartengono al di sopra della tabella, come una barra degli strumenti. Questo è abbastanza standard in ambiente desktop e anche in applicazioni web. Non esiste un precedente per metterli in basso a sinistra: non lo farei affatto.

I pulsanti nella parte inferiore dello schermo sono i pulsanti di navigazione: di solito Ok, Annulla o Ok, Applica, Annulla. Hai "Seleziona azienda" e "Chiudi". Non userei "Seleziona azienda" poiché sembra un'istruzione al computer. Direi invece qualcosa come "Usa azienda selezionata". Ti è stato di aiuto?

0
Hagan Rivers