it-swarm-eu.dev

Pulsanti HTML e collegamenti ipertestuali per la navigazione

Quando si crea una guida generale allo stile del sito, come si determina quando un pulsante o un collegamento ipertestuale dovrebbe essere per qualcosa di diverso dalla navigazione?

Vedo molte volte con il pesante utilizzo di jQuery e AJAX, i collegamenti ipertestuali fanno molto di più della semplice navigazione. È un cattivo design usarli per qualcosa di diverso dalla navigazione?

16
rick schott

In generale, gli utenti si aspettano collegamenti da collegare e pulsanti di comando da comandare. Cioè, i collegamenti navigano, presentando nuovi contenuti senza cambiare gli oggetti dati sottostanti o le loro relazioni o posizioni. I pulsanti cambiano queste cose, eseguendo creazione, cancellazione, associazione, conversione, duplicazione, ecc. Una semplice regola empirica è se la didascalia più concisa per il controllo è un sostantivo (ad esempio, Home, Prodotti, Mappa del sito), quindi usa un collegamento. Se la didascalia è un verbo (ad esempio Aggiorna, Invia, Elimina, Acquista), utilizza un pulsante.

Tuttavia, hai ragione nel dire che recentemente sono stati utilizzati collegamenti al posto dei pulsanti di comando in vari siti Web e anche alcune guide di stile lo confermano. In effetti, i collegamenti sono stati utilizzati al posto di quasi tutti gli altri controlli (ad esempio pulsanti di opzione, schede, caselle di controllo). Inoltre, nelle app desktop per client spessi, i pulsanti possono navigare, in particolare nelle app più vecchie che hanno avuto origine prima che il web (e i collegamenti) fossero comunemente usati. Credo che questo confonda gli utenti e dovremmo davvero usare controlli dall'aspetto distinto per funzioni distinte. Sia le app Web che quelle desktop dovrebbero distinguere chiaramente tra navigazione e comandi utilizzando rispettivamente collegamenti e pulsanti. La navigazione è significativamente distinta dai comandi perché:

  • Gli utenti ripristinano facilmente la navigazione facendo clic su Indietro o chiudendo la finestra. È sempre un'azione "sicura". I comandi spesso non possono essere ripristinati in un'app Web. Se i comandi possono essere ripristinati, è tramite una funzione Annulla, che comporta una risposta dell'utente diversa da Indietro o Chiudi.

  • Nelle app desktop, gli utenti non devono salvare dopo la navigazione. Il salvataggio è spesso necessario dopo un comando.

  • I comandi forniscono un feedback diverso che è spesso più sottile della navigazione. È generalmente evidente quando all'utente vengono presentati nuovi contenuti. I comandi possono mostrare la modifica del contenuto, ma spesso non è evidente alcuna modifica (ad esempio, per Copia o Salva). Le app Web ricorrono spesso a pagine di conferma (che non vengono considerate come navigazione nel mio libro).

Per questi motivi, aiuta l'utente ad avere controlli distinti per la navigazione e i comandi, e fortunatamente le aspettative dell'utente per pulsanti e collegamenti lo rendono facile. Tuttavia, l'uso continuato di collegamenti per comandi (e pulsanti per la navigazione) mina queste aspettative e presto perderemo questa opportunità.

Distinguere graficamente la navigazione e i comandi ci offre modi potenti per comunicare con i nostri utenti. Ad esempio, se Contattaci è un collegamento, verrà visualizzato un elenco di indirizzi e numeri di telefono (lo chiamerei "Contattaci" piuttosto che i "Contatti" più concisi poiché "Contattaci" è una convenzione così comune, gli utenti scansionano per questo in particolare nei menu). Al contrario, se Contattaci è un pulsante, porta gli utenti in un modulo in cui possono inviare direttamente domande o commenti (la didascalia del pulsante dovrebbe avere un'ellissi per indicare che sono necessarie ulteriori informazioni per il comando).

Sono d'accordo sul fatto che i pulsanti di comando tendono ad essere più grandi e più brutti dei collegamenti, soprattutto quando devi averne molti nella stessa finestra, che è tipico delle app Web prive di un'interfaccia di selezione degli oggetti o menu di comando a discesa . Tuttavia, la soluzione è sviluppare una versione leggera dei controlli appropriati, non assumere un altro controllo con aspettative dell'utente completamente diverse. Tali controlli leggeri possono tecnicamente essere collegamenti, ma dovrebbero apparire come il controllo che stanno imitando. Ad esempio, un "pulsante" leggero può essere un'immagine collegata di un piccolo rettangolo ombreggiato con una didascalia allineata al centro.

C'è una zona grigia nella distinzione di navigazione/comando che dovremmo risolvere. Raccomando quanto segue fino a quando non sarà possibile condurre le ricerche appropriate:

Usa collegamenti per:

  • Caricamento di una pagina di contenuti

  • Caricamento di contenuti generati dinamicamente.

  • Caricamento del contenuto in una parte di una pagina se non è possibile sostenere altre opzioni (ad esempio una scheda).

  • Navigazione tra le pagine di una procedura guidata (in contrasto con le procedure guidate desktop tradizionali che utilizzano i pulsanti).

Utilizzare i pulsanti di comando per:

  • Azioni che modificano o applicano il contenuto o gli oggetti dati sottostanti.

  • Azioni che influiscono sulla visualizzazione del contenuto se non è sostenibile alcuna altra opzione.

  • Esecuzione dei comandi di una finestra di dialogo, inclusa l'azione Fine di una procedura guidata.

  • L'annullamento di una finestra di dialogo, supponendo che l'annullamento reimposti i parametri della finestra di dialogo sui valori predefiniti o precedenti.

Utilizzare un pulsante di comando con un'ellissi alla fine della didascalia per accedere a una finestra di dialogo.

Ancora più dettagli, se ci credete, a http://www.zuschlogin.com/?p=18 .

17

In generale, se sembra un collegamento, mi aspetto che carichi una nuova pagina di contenuto da un URL diverso. A volte cambierà la mia attenzione all'interno del documento corrente (cioè href = "# frammento") che non è un problema eccessivo, a condizione che sia ovvio.

Se sembra un pulsante standard (ovvero lo stesso pulsante standard del mio sistema operativo), mi aspetto che abbia lo stesso effetto, ma con un effetto collaterale che alcune informazioni che ho inserito influenzeranno la pagina risultante.

Secondo me, qualsiasi altro comportamento significativamente diverso dovrebbe essere segnalato, principalmente attraverso lo stile. Questa è l'opinione purista. Da un punto di vista pragmatico, si potrebbe sostenere che, se un utente fa clic su qualcosa che assomiglia a un collegamento e, anziché navigare verso un URL diverso, parte della pagina cambia in qualche modo (il collegamento "aggiungi un commento" su questo sito è un buon esempio), l'utente perderà molto di conseguenza.

Nota che questo sito ha moltissimi stili/comportamenti di link diversi (ne conto almeno 8) ma questo è un problema minore poiché il pubblico principale è probabilmente molto esperto di web.

3
Bobby Jack

Il Web è diventato più di una raccolta di pagine HTML statiche in cui i collegamenti ipertestuali vengono utilizzati esclusivamente per la navigazione dei documenti. Non credo sia un cattivo design usare i collegamenti ipertestuali per eseguire i comandi. Se dovessimo usare i pulsanti per tutto ciò che è possibile fare clic e che non è la navigazione, le applicazioni Web sembrerebbero brutte e molto occupate.

1
Tommy Carlier

Una cosa molto importante da notare nelle differenze tra link e pulsanti è che i crawler (sia per i siti di ricerca come Google che per molti motori di ricerca a livello di sito) non andranno alla destinazione di un pulsante; seguono solo i collegamenti.

1
Charles Boyung