it-swarm.it

Gotchas comuni di usabilità delle app Web?

Quali sono alcuni errori comuni relativi all'usabilità per le applicazioni Web?

75
tobeannounced

Menu a discesa CSS/Javascript per i quali non è stato specificato un ritardo, pertanto si verifica il "problema diagonale" (tramite Jakob Nielsen )

alt text

81
jessegavin

Non mettere etichette cliccabili sulle caselle di controllo e altri campi del modulo.

È così facile da fare. Vedi il tag HTML <label> .

74

Progettazione di convalida del modulo scadente.

I lo odio quando invio un modulo che non supera la convalida e la domanda esegue una delle seguenti operazioni:

  • I campi sono VUOTI quando il modulo viene ricaricato. Mi è successo durante la registrazione di un'app Web sul mio iPhone. Ero incazzato regalmente perché c'erano oltre 8 campi.
  • Visualizza solo un errore di convalida per invio modulo.
  • Non presenta un riepilogo degli errori nella parte superiore del modulo.
  • Non evidenzia visivamente gli input di campo non validi.
74
jessegavin

Design scadente quando si tratta di pulsanti di azione primaria e secondaria sui moduli.

http://www.lukew.com/resources/articles/psactions.asp

alt text

55
jessegavin

Gli utenti utilizzano i pulsanti Indietro e Avanti nel browser (o con il mouse). E usano anche il pulsante di aggiornamento. Quindi fai attenzione con i post dei moduli sul tuo sito web.

A nessuno piace questo ...

enter image description here

Questa finestra di dialogo viene visualizzata quando si aggiorna la pagina in cui vengono registrati i dati. Fortunatamente, può essere evitato usando method = "get" quando possibile, oppure method = "post" seguito immediatamente da un reindirizzamento ove necessario. Se è necessario utilizzare un post per motivi di sicurezza o di lunghezza, il reindirizzamento dovrebbe passare a un URL diverso dall'azione del modulo per evitare questo messaggio.

52
Steve Wortham

Link JavaScript. Non puoi fare clic con il tasto centrale per aprire una nuova scheda per javascript:loadPage(34576).

43
Casey Chu

Chiedere informazioni personali obbligatorie nei moduli di registrazione quando non sono necessari.

Esempi:

  • chiedere un indirizzo su un sito Web in cui queste informazioni sono inutili
  • Costringere a inserire un nome "reale"
  • ...

Rendere queste informazioni obbligatorie è il modo migliore per ottenere un database veramente inquinato pieno di "dummy", "[email protected]", ecc. Perché alla maggior parte delle persone non piace fornire quel tipo di informazioni quando non è realmente necessario.

Inoltre, non essere in grado di modificare nessuna di queste informazioni è un progetto davvero male.

37
Julien N

target = "_ blank" sugli ancoraggi è uno dei più comuni e quello che odio di più. Ci sono alcuni casi che secondo me hanno senso.

Ecco un elenco piuttosto noto dei 10 errori principali sul Web Design: http://www.useit.com/alertbox/9605.html

30
Nacho

Quando la funzionalità di pulsante indietro è disabilitata o modificata rispetto alle aspettative dell'utente. Lo vedo molto sulle applicazioni che usano dialoghi/lightbox/iframe personalizzati.

30
jessegavin

Mi fa cacciare per "hai dimenticato la password?" link, quindi una volta cliccato, inviando la mia password in chiaro 1 una volta che lo trovo. Il nostro caro Jeff Atwood lo ha descritto abbastanza bene in " Probabilmente stai memorizzando le password in modo errato "

1 Certo, questa parte è più di un problema di programmazione , ma lo considero anche un problema di usabilità.

26
Jared Harley

Utilizzo delle caselle di controllo come pulsanti radio e viceversa.

24
Gelatin

Nessun posto per chiudere il tuo account o rendere difficile trovare dove chiudere il tuo account.

Idealmente, vuoi una sezione "Account" o qualcosa di simile in modo simile, e su quella pagina, a parte tutte le altre cose che vuoi lì, un link o un pulsante chiaramente etichettati che dice "chiudi il mio account". Puoi seguirlo con una pagina che chiede agli utenti perché stanno lasciando o li invita a fornire un feedback, ma tutte quelle cose dovrebbero essere depriorizzate rispetto all'effettivo invito all'azione "chiudi il mio account" (o elimina, rimuovi, ecc.) .

22
Rahul
  • Campi con validazione super rigorosa. Ad esempio, se hai digitato un codice postale e "V5X4O4" funziona ma "V5X 4O4" non funziona.

  • Icone senza etichetta testuale o titolo (al passaggio del mouse o meno).

  • Se un titolo viene troncato, penso che dovresti essere in grado di vedere una descrizione comandi con il titolo completo al passaggio del mouse.

  • Quando i pulsanti importanti vengono offuscati dagli utenti finali a favore di pubblicità o materiale promozionale. Pensa al pulsante "Continua senza account" di Paypal.

    • AUDIO CHE GIOCA SENZA PERMESSO! Lol - Inoltre, nessun pulsante di silenziamento.
21
Motolix

Non avere il tuo sito degradare con grazia quando JavaScript è disabilitato.

19
GSto

La domanda è un po 'troppo generale e in realtà più di una discussione.

Posso contribuire con una cosa che ho visto più volte:

Moduli con un pulsante "cancella tutto"

  • Alcuni di questi progettano anche i pulsanti "Invia" e "Cancella tutto" allo stesso modo, dando loro lo stesso peso.
  • Per non parlare del fatto che ho visto degli esempi (non ho in mente un link specifico in questo momento ...) in cui il "clear" è sulla sinistra e il "submit" sulla destra, facendo sì che alcuni utenti premano il primo pulsante più vicino al loro cursore quando si lascia l'ultimo campo.

Non vedo alcuna ragione per un pulsante "cancella", ma se insisti assolutamente usa un link molto sottile, che consenta all'utente solo un'azione semplice e ovvia.

18
Dan Barak

Dover registrarsi per eseguire alcune operazioni di base che non richiedono realmente la registrazione. O consentire un metodo di registrazione "one-click".
L'utente dovrebbe avere il diritto di decidere. Finisco con molti account "usa e getta" su così tanti siti Web!

Alcuni esempi in cui non dovrebbe essere necessario:

  • download di file (quanti siti Web "code" ti chiedono di registrarti per consentirti di scaricare un file di esempio?)
  • ricerca (sì, alcuni forum disabilitano la ricerca di utenti non registrati)
  • accesso a un articolo (quando il suo accesso è gratuito)
  • ...
17
Julien N

Siti con barre di stato mobili

Come Meebo Bar . Questi sono odiosi e raramente forniscono funzionalità utili. Occupano spazio non necessario e fanno apparire palloncini che distraggono.

16
Gelatin

Essere "creativi" e infilare la barra di ricerca dietro una scheda/collegamento/ecc. Se offri la ricerca, rendi disponibile solo una casella, anziché cercarla!

16
agartzke

La mia più grande pipì per animali domestici sono i siti che per uno o più motivi non supportano correttamente i segni più negli indirizzi e-mail . Molte volte, i siti Web non convalidano un indirizzo e-mail con un "+" prima di "@". Il peggio è quando un sito accetta l'indirizzo, ma poi non sfugge e/o annulla la cancellazione dei dati in modo corretto e tenta di inviare e-mail a un indirizzo con uno spazio al suo interno o con i due lati del '+' fracassati insieme .

Questo validatore gratuito scritto in PHP presumibilmente segue tutti gli RFC e i loro errori associati.

15
waymost

Molti siti non usano colori diversi per collegamenti visitati .

Jakob Nielsen: Cambia il colore dei link visitati

12
Marc Dong

App Web eseguite su una connessione HTTPS protetta, ma che caricano contenuto da una connessione HTTP. Da un lato questo è del tutto perfetto, ma per IE utenti in particolare (non io in genere) l'avviso di sicurezza è imbarazzante e confuso per gli utenti ...

Non solo è molto aggravante respingere su ogni pagina, ma la formulazione è scomoda e le azioni dei pulsanti sono diverse per IE (6 e 7) rispetto a IE8 +

Vecchio IE finestra di dialogo:

alt text

Nuovo IE:

alt text

Quindi, se come utente "vuoi solo caricare l'intera pagina" (ad es. Stai cercando il pulsante "vai via") ... è l'impostazione predefinita Yes in IE6 e IE7, ma non predefinito No in IE8 +.

Nota: Sono pienamente consapevole come sviluppatore quale sia lo scopo della finestra di dialogo e anche perché Microsoft l'abbia modificata, ma per gli utenti finali li confonde soprattutto in IE8. Gli utenti finali visualizzano una finestra di dialogo che chiede "permesso", "conferma", ecc. E si aspettano di fare clic sull'opzione "ok" o "sì" perché non leggono la finestra di dialogo. Si può sostenere che gli utenti dovrebbero leggerlo, ma è più semplice se gli sviluppatori si assicurano di non avere contenuti misti se si può assolutamente evitare.

12
scunliffe

Dover cercare il collegamento di logout. Accedo a una pagina e in alcuni, quando ho finito, devo cercare il pulsante o il collegamento di logout.

12
thursdaysgeek

Di recente ho notato qualcosa che non ho mai considerato un problema di usabilità:

Passa con il mouse per rendere disponibili le azioni. Come ad esempio su Twitter.com in cui, passando il mouse su un Tweet, vengono visualizzati i comandi di retweet e risposta.

Questo semplicemente non funziona su dispositivi touch-based. Non c'è hover!

Un altro dei miei animali domestici sono i siti Web che non aprono collegamenti esterni in una nuova scheda. Senti, sto sfogliando un albero. Mi aspetto che ogni dominio in cui mi trovo rappresenti un ramo, quando avrò finito chiuderò la scheda. Di certo non voglio fare clic su "indietro" dieci volte per viaggiare lungo il ramo.

11
Swizec

Nascondere ciò che gli utenti vogliono e invece dare loro ciò che TU vuoi che desiderino.

Un esempio è l'assistenza clienti. Invece di elencare una grande scatola di grasso con numero di telefono/posta ecc., Alcune aziende mostrano un FAQ come mezzo per ottenere aiuto e non hanno alcuna informazione di contatto su quella pagina.

11
googletorp

I siti che hanno strutture di menu che "fluttuano" su e giù su entrambi i lati dello schermo mentre scorri. Posso vedere perché l'hanno fatto, ma è spesso molto distratto e più spesso non "liscio" come il designer aveva ovviamente sperato.

Un esempio a cui mi riferisco può essere visto qui: http://www.deluxe-menu.com/floatable-menu-sample.html

9
Sk93

Siti di QA che visualizzano due volte la risposta accettata.

8
Gelatin

A List Apart ha un articolo di Aza Raskin: "Non usare mai un avvertimento quando intendi annullare".

http://www.alistapart.com/articles/neveruseawarning/

Gli utenti tendono a ignorare o non apprezzare i popup di "avviso", ma offrire a un utente la possibilità di "annullare" è molto più intuitivo.

7
mg1075

Captcha

anche se sono abbastanza popolari in questi giorni, sono anche considerati un problema di accessibilità, specialmente per le persone che non riconoscono le parole che non conoscono (o non hanno nemmeno caratteri speciali come ýáěíč sulla tastiera)

personalmente, preferisco usare semplici domande razionali per servire questa funzionalità

esempio: per favore scrivi il prossimo numero intero che viene dopo il numero undici

6
user3409

Siti che utilizzano molta CPU e memoria

Di solito ho un sacco di schede aperte con domande/risposte di programmazione da varie mailinglist e molti di questi siti hanno alcuni javascript in corso (l'installazione di adblock ha aiutato, ma ci sono ancora siti pesanti). Con Chrome posso finalmente vedere quali schede lo stanno causando.

La nuova ricerca di immagini di Google migliorata mette la mia cpu in un lavoro pesante e occupa diverse centinaia di megabyte. Molta fame di risorse.

5
neoneye

Avere elementi statici sulla tua pagina che cambiano colore se metti il ​​cursore del mouse su di essi, ma non fai nulla se fai clic su di essi. Nella stessa lega: collegamenti ipertestuali o pulsanti in cui l'area selezionabile è limitata al testo.

4
Tommy Carlier

Reindirizzamento dall'URI radice a una sottodirectory o sottodominio (non rimuovere/aggiungere il www).

0
Gelatin