Share
Disegni strabilianti e utili accadono perché l'interfaccia utente è stata lavorata instancabilmente. Ci vuole un vero UI Master per capire come fare un'esperienza utente formidabile su un sito web. Ecco 10 principi estremamente utili da parte di alcune delle menti più brillanti nel campo dell'interfaccia utente.
Le interfacce utente (UI) sono ciò che separa i siti Web di prim'ordine dai siti Web scadenti. L'assenza di un'interfaccia utente utile può rendere inutilizzabile un'utilità web estremamente utile. Perché? Perché l'interfaccia utente non è stata pensata e testata a fondo. Se un utente non può navigare facilmente in un sito Web, salterà felicemente su un altro sito simile che offre un'esperienza utente migliore.
Quasi tutti gli sviluppatori web hanno sentito parlare di 37 segnali. Sono campioni schietti di pratiche di sviluppo agili, ma soprattutto, fanno alcune applicazioni web davvero fantastiche. Così fantastico, in effetti, che sono generalmente considerati come alcune delle persone più intelligenti quando si tratta di entrare nelle teste degli utenti.
Il CEO di 37 segnali, Jason Fried, è un grande sostenitore di dedicare meno tempo ai dettagli nitidi e alla creazione
interfacce più utili, con in mente l'utente.
"Si parla troppo di CSS e XHTML, di standard e accessibilità e non si parla abbastanza di gente, il codice conforme CSS e standard è solo uno strumento. Devi sapere cosa costruire con questi strumenti. Usiamo le tabelle, quindi che cosa importa se non lo fa, lascia che le persone raggiungano i loro obiettivi. Gli standard Web sono grandiosi, ma gli standard delle persone includono le cose da fare (ed è ancora troppo difficile da fare online) ".
I progettisti dell'interfaccia utente stanno facendo gli stessi vecchi errori fondamentali e dimenticano l'essere umano dall'altra parte, così il loro codice sembra migliore. Gli umani, non i validatori di codice, usano le interfacce. "
Quando si lavora con livelli di codice per settimane, è difficile a volte fare un passo indietro e ricordare che i nostri siti vengono utilizzati da esseri umani, senza robot. Ciò non significa che non dovremmo preoccuparci del tutto degli standard. Gli standard sono fantastici e dovrebbero essere rispettato Non possiamo semplicemente presumere che la conformità agli standard sia tutto ciò che è necessario per creare una buona interfaccia utente.
Le pagine di errore sono il genere di cose che la maggior parte degli sviluppatori web (incluso me stesso) preferiscono semplicemente spazzare sotto il tappeto. È un piccolo dettaglio che riguarda solo una piccola parte dei visitatori del nostro sito, giusto?
L'esperto di usabilità Jakob Nielsen afferma che forse stiamo visualizzando 404 pagine di errore nella luce sbagliata. Forse dovremmo visualizzare la pagina di errore come strumento didattico.
La violazione delle linee guida più comune è quando un messaggio di errore dice semplicemente che qualcosa non va, senza spiegare perché e come l'utente può risolvere il problema. Questi messaggi lasciano gli utenti bloccati.
I messaggi informativi di errore non solo aiutano gli utenti a risolvere i loro problemi attuali, ma possono anche servire da momento di apprendimento. In genere, gli utenti non investono tempo nella lettura e nell'apprendimento delle funzionalità, ma passeranno il tempo a capire una situazione di errore se la spieghi chiaramente, perché vogliono superare l'errore.
Jeffrey Zeldman è il fondatore della società di design web Happy Cog, un autore, e ha anche avviato A List Apart, una risorsa formidabile per gli sviluppatori web. Se qualcuno sa come creare un'interfaccia utente corretta, è Zeldman.
Jeffrey sottolinea che un bit del codice in gran parte trascurato nello sviluppo web è l'assenza di un colore di sfondo.
È sbalorditivo quanti progettisti di siti web si dimentichino di specificare un colore di sfondo sul loro sito. Trascorreranno mesi a scorrere wireframe e composizioni di progettazione; scrivere hack CSS per i browser che precedono questo secolo; prova il loro lavoro su tutto, dai Blackberry ai vecchi Mac con sistema 7; e naturalmente convalideranno il loro markup e fogli di stile. Ma dopotutto, si dimenticheranno di applicare un colore di sfondo al loro sito e non penseranno di controllarlo.
L'accessibilità è una cosa fantastica per gli sviluppatori quando si costruisce un'applicazione web. Tuttavia, sembra che a volte possiamo ottenere un po 'portato a rendere accessibili i nostri siti e le nostre forme. Il guru del design Roger Johansson sottolinea che l'eccessiva accessibilità a volte può essere costosa per le nostre UI.
A volte, quando le persone imparano per la prima volta sull'accessibilità del Web, cercano modi rapidi per migliorare i siti che costruiscono. Questo spesso porta a un uso improprio o eccessivo di alcune funzionalità HTML che sono utili per facilitare l'accessibilità, ma se utilizzate in modo errato non hanno alcun effetto e possono effettivamente avere l'effetto opposto rendendo la pagina meno accessibile e meno utilizzabile.
Molte delle funzioni di accessibilità comunemente utilizzate in modo errato sono attributi HTML. Ho la sensazione che vengano maltrattati dagli sviluppatori che intendono bene, ma non capiscono come gli attributi possano aiutare gli utenti finali, o dagli sviluppatori che li aggiungono semplicemente per essere in grado di spuntare "Accessibilità" dalla lista delle cose da fare e chiudere il loro manager, il cliente o chiunque li stia preoccupando di rendere il sito più accessibile.
Mr. Fried of 37 Signals fa un'altra apparizione sulla nostra lista, grazie ai suoi eccellenti consigli su come garantire che l'aspetto più importante del design sia sempre progettato per primo. Ha coniato questo metodo come "Epicenter Design".
L'epicentro del design coinvolge l'attenzione sulla vera essenza della pagina (l''Epicentro') e quindi verso l'esterno. Ciò significa non iniziare con la navigazione / schede, o il piè di pagina, oi colori, o la barra laterale, o il logo, ecc. Significa iniziare con la parte della pagina che, se modificata o rimossa, cambierebbe l'intero scopo di la pagina. Questo è l'epicentro.
L'uso del metodo di progettazione di Epicenter mantiene le nostre interfacce utente focalizzate e assicura che non "manchiamo il punto" della pagina.
Il Collis Ta'eed di NETTUTS ha un eccellente consiglio per gli sviluppatori web di tutto il mondo: utilizza i test degli utenti. Quando trascorri innumerevoli ore guardando lo stesso design sul monitor, a volte è facile dimenticare come l'utente possa utilizzare il sito web. In effetti, l'utente medio potrebbe utilizzare la tua applicazione in modo molto diverso da come potrebbe mai immaginare.
La prima cosa che devi riconoscere è che quando esegui qualsiasi tipo di test utente, ti renderà un web designer migliore. Vedrai esattamente come le persone usano i tuoi progetti web e ci sono buone probabilità che sarai sorpreso di come lo fanno. Le cose che pensi siano ovvie spesso non lo sono, il testo che hai pensato ha spiegato qualcosa che non viene nemmeno letto e, in generale, gli utenti fanno cose che non dovrebbero fare. Anche se l'unico test utente che fai mai è chiedere ad alcuni amici di usare un sito mentre li osservi, starai già meglio per questo, indipendentemente dal progetto stesso.
Sapere in che modo gli utenti interagiscono e utilizzano il tuo sito Web sono informazioni incredibilmente preziose e, se utilizzate correttamente, possono cambiare notevolmente le tue interfacce utente per adattarle meglio ai tuoi utenti.
Quello che può sembrare un concetto sciocco, è facile dimenticare che gli utenti del sito hanno bisogno di incentivi per fare cose come compilare moduli e interagire sul tuo sito web. Nessuno lo capisce meglio di un Internet marketer di successo. Jim Kukral sottolinea che, al fine di avere un'interfaccia utente di successo, gli utenti devono trarre vantaggio in qualche modo dalla compilazione di elementi come feedback o moduli di registrazione.
L'utente deve sentire che il valore o il risultato supera il costo (o il tempo) di dover compilare il modulo. Pertanto, a meno che tu non fornisca agli utenti qualcosa di valore in cambio, è molto probabile che l'utente finisca l'attività.
Gli incentivi possono essere qualsiasi cosa tu sia disposto a fornire. Ecco alcuni esempi di possibili incentivi:
- Dare via un buono regalo per alcuni dei tuoi prodotti in cambio delle informazioni di contatto dell'utente.
- Fornire all'utente la possibilità di partecipare a un concorso oa un altro tipo di concorso.
- Offri gratuitamente il download di alcuni contenuti o informazioni pertinenti per il business in questione.
Jakob Nielsen ha studiato gli utenti del web per oltre un decennio. Ha fornito innumerevoli suggerimenti sull'argomento di rendere le interfacce utente più user-friendly, ma uno dei suoi consigli migliori è quello di mantenere gli elementi di design coerenti.
La coerenza è uno dei principi di usabilità più potenti: quando le cose si comportano sempre allo stesso modo, gli utenti non devono preoccuparsi di cosa accadrà. Invece, sanno cosa accadrà in base all'esperienza precedente. Ogni volta che rilasci una mela su Sir Isaac Newton, cadrà sulla sua testa. Quello è buono.
Più aspettative degli utenti si dimostreranno giuste, più si sentiranno in controllo del sistema e più lo apprezzeranno. E più il sistema rompe le aspettative degli utenti, più si sentiranno insicuri. Oops, forse se lascio andare questa mela, si trasformerà in un pomodoro e salterà un miglio nel cielo.
È troppo facile far cadere qualche parola d'ordine o un pizzico di gergo nella tua copia dell'interfaccia utente. Perché? Perché noi conoscere cosa significa quel po 'di gergo. Tuttavia, potremmo essere estranei all'utente medio utilizzando termini che potrebbero non sapere. La stratega del Web Erin Kissane ci consiglia di mantenere il gergo al minimo per questa stessa ragione.
C'è un tempo per il gergo professionale: quando sai che stai parlando a un pubblico che ti capisce, e hai bisogno della specificità e della precisione in più che il gergo può fornire. Se lo stai utilizzando al di fuori di questa situazione, probabilmente non stai comunicando in modo chiaro, onesto o efficace.
Il gergo non è davvero il problema qui, però. Il problema con la copia in questa pagina - e in tanti altri che promuovono prodotti informativi - è che non sta dicendo nulla. Il gergo fuori posto, le parole d'ordine e altri tipi di lanugine irrompono perché la mancanza di significato trasmissibile crea un vuoto.
Quando si tratta di costruire effettivamente la nostra interfaccia utente, molti sviluppatori iniziano con un wireframe di come sarà il sito. Tuttavia, dal momento che le ricche applicazioni Internet basate su Ajax (RIA) stanno diventando sempre più comuni, non ha senso creare un sito web dinamico e dinamico con un semplice wireframe. A volte è solo più efficace costruire un prototipo.
David Verba, responsabile del percorso adattativo, sostiene che il wireframe potrebbe non essere la soluzione migliore per progettare le interfacce utente, in quanto non tagliano la senape per realizzare una complessa applicazione.
La prototipazione ci consente di vedere i problemi più chiaramente - e spesso prima - nel processo di progettazione e sviluppo. Man mano che ci muoviamo oltre i siti di contenuti aziendali e in applicazioni con funzionalità complesse e ricche, la nostra capacità di sederci all'inizio del progetto e prevedere potenziali interazioni e problemi è diminuita. Lo spazio del problema è troppo complesso. Questo è il motivo per cui abbiamo iniziato a utilizzare i wireframe in primo luogo. Spesso l'unico modo per capire veramente dove si presenteranno i problemi o per trovare le possibili soluzioni è di tracciarli. Usiamo wireframe per disegnare il contenuto e il layout, ma man mano che ci spostiamo verso interfacce più interattive, i wireframe non sono altrettanto efficaci. Dobbiamo abbozzare con le funzionalità effettive: schizzo nel codice, per così dire, così possiamo vedere come si comporterà realmente l'applicazione.
Glen Stansberry è uno sviluppatore web e blogger che ha faticato più volte di quanto avrebbe voluto ammettere con i CSS. Puoi leggere altri suggerimenti sullo sviluppo web sul suo blog Web Jackalope.
Accentsconagua