Di quali competenze hai bisogno per una corretta progettazione dell'interfaccia utente/interazione/funzionale nelle app Web?

Question

Quando si sviluppano applicazioni web da zero, quali sono le competenze necessarie per produrre prodotti utilizzabili e ricchi di interazione?

• Realizzerai prima il prototipo dell'interfaccia utente?
• Utilizzi le User Story?
• Qualche metodologia agile o best practice che consiglieresti o sosterresti attivamente?

In breve: Quali competenze ti consentono di passare dalla raccolta dei requisiti ad AmazingWebApp™?

Finalmente:Qualche libro che consiglieresti?

Answer 1

Un buon senso del design.Questa è una cosa difficile da comprendere per un programmatore.A volte un programmatore avrà una buona idea di ciò che funziona, ma non di come creare ciò che effettivamente funziona meglio o bene.Principalmente richiede la capacità di prendere tutto ed essere disposti a spostarlo liberamente finché qualcosa non scatta e funziona.

Il modo in cui lo faccio è scoprire come, se qualcuno dove farlo, quale sarebbe l'idea più logica e comune di come un'attività verrebbe eseguita online o offline, quindi vedere come replicarla.Pensa in modo breve, conciso, chiaro, accessibile e logico.Se puoi consegnarlo a qualcuno senza alcuna indicazione e lui può fare tutto ciò che vuoi che faccia e anche di più, funziona.Se hanno bisogno di indicazioni per svolgere attività quotidiane sulla tua app, si tratta di un cattivo design.

Direi anche di dare un'occhiata ad altre app che ti attirano a un livello che potresti non realizzare nemmeno, ma che funzionano per qualche motivo e provano a replicarlo.

Answer 2

Penso che la cosa migliore che puoi fare sia usare semplicemente il software..

Quando lavoro sulle app, tendo a inviarle via email a casa alla fine della settimana (a volte prima), allontanarmi dalla "modalità lavoro", installarla normalmente (ad es.non eseguito dal tuo IDE) e quindi usarlo..

È difficile allontanarsi dalla "modalità test" e in realtà "dimenticare" di conoscere l'applicazione..Ma una volta che ne prendi il controllo, può esserlo VERAMENTE utile e molto illuminante (e sì, a volte straziante quando ti rendi conto che quella "piccola caratteristica interessante" in realtà fa schifo e deve essere reimplementata!).

Il mio capo dice che sono "anale" riguardo all'usabilità.Mi piace che :)

Answer 3

Penso che qualche tipo di prototipazione visiva (anche se fatta con HTML e CSS) sia la migliore.La mia tentazione è quella di iniziare a programmare e preoccuparmi dell'interfaccia in un secondo momento, e di solito è ciò che porta a qualcosa di veramente brutto (almeno per me).Sviluppo questo ©FUNZIONALITÀ MERAVIGLIOSA e finisco per affrettarmi a utilizzare l'interfaccia in modo da poter avere rapidamente gli strumenti per accedere al mio codice.

Non ricordo dove l'ho sentito, ma, per l'utente finale, la tua interfaccia È la tua applicazione.Se stai cercando di accontentare l'utente, dovresti iniziare con l'interfaccia e lasciare che sia lei a dettare le funzionalità che fornirai.

Answer 4

Le migliori pratiche dipendono dal talento dei membri del team.

Innanzitutto, scrivi sempre le storie degli utenti (rendilo un evento di squadra, se possibile), caricale su LighthouseApp.com o sul tuo sistema di biglietteria preferito: solo le prime 10-20 sono tutto ciò che ti serve per iniziare.

Se hai un progettista dell'interfaccia utente, un prototipo delle pagine può essere utile.Ma, se lo sviluppatore del software ha discrete competenze HTML/CSS, preferisco arrivare a un prototipo funzionante con UI/HTML/CSS puliti il ​​più rapidamente possibile.Questo output potrebbe essere consegnato a un "web designer moderno" che può rielaborare/decorare l'HTML/CSS.Il progettista dovrebbe lavorare sulla stessa base di codice dello sviluppatore tramite il sistema di controllo del codice sorgente.

Alcuni "designer della vecchia scuola" si offenderebbero al suggerimento di "decorare il sito" e insisterebbero per consegnare a un programmatore un file Photoshop.Questo potrebbe andare bene per un semplice sito web di marketing, ma non mi piace il processo di creazione di un'AmazingWebApp™

Answer 5

i ragazzi qui stanno dando ottimi consigli.

c'è una distinzione tra "visivamente carino" e "funzionale" (o facilità d'uso).puoi effettivamente averne uno senza l'altro.questo forum è un buon esempio, ha un'usabilità molto elevata ma francamente è orrendo - scusate, vi amo comunque :)

la realtà è che ne hai bisogno abilità per creare buone interfacce.questo arriva con anni di pratica.Di solito mi viene chiesto di entrare e progettare l'intera interfaccia utente per una nuova app.Raramente vedo programmatori o grafici con questo tipo di competenze (è un mercato ristretto).All'università ho scoperto di avere un acume naturale per l'HCI, la progettazione dell'interfaccia utente e l'analisi dell'usabilità.ho sviluppato ulteriormente queste capacità leggendo molte e facendo esperienza facendo molto design dell'interfaccia utente. quindi, tutto quello che sto dicendo è, preparati per un duro lavoro se sei seriamente intenzionato a diventare bravo nel design dell'interfaccia utente.puoi fare tutto ciò che ti viene in mente, ma se trascorri del tempo studiando il design dell'interfaccia utente, ciò significa che non stai trascorrendo tempo imparando in modo agile con Ruby on Rails o qualunque sia la tecnologia più alla moda.

alcuni consigli generali:

• se stai creando app software Web (al contrario dei siti Web di presenza di piccole imprese), la prototipazione lo-fi è eccellente.riunisci un gruppo di persone, una risma di carta da macellaio e pennarelli colorati, e rimarrai stupito di quante schermate potrai disegnare in pochi giorni.

• il tuo software dovrebbe essere auto-evidente.il tuo software non dovrebbe aver bisogno di un manuale utente.il CMS che ho sviluppato non ha un manuale utente, ho qualche decina di clienti che lo utilizzano e nessuno di loro mi ha mai chiesto un manuale.

• guarda cosa fanno i "grandi ragazzi".se eBay ha la casella di ricerca in questo modo:'[......] (Cerca)' allora fai anche il tuo così (invece del non standard ma ok:'Ricerca:[......] (Andare)'.).questo è noto come affordance.stai sfruttando la familiarità delle persone con altri sistemi per dare loro un'idea di come funziona il tuo sistema.

Consiglierei questo libro:

• Non farmi pensare all'usabilità

Ho anche alcuni articoli del blog che dovrebbero aiutare:

• wireframe e mockup
• analisi delle esigenze per i siti Web aziendali

Answer 6

Alcune delle cose che facciamo:

1. Molti prototipi, esplorando concetti diversi sia su carta, in Photoshop e talvolta implementazioni reali
2. Riduci le cose, sii iterativo.Non provare a completare e perfezionare l'intera app la prima volta (perché sai nel tuo cuore che questo non accadrà)
3. Chiarezza anziché intelligenza, questa è una delle ultime cose che mi ritrovo a chiedermi quando lavoro sull'esperienza utente, sicuramente le icone e gli elementi spinosi potrebbero sembrare fantastici, ma sono chiari e concisi
4. Concentrarsi sugli obiettivi dell'utente: è una tendenza abbastanza comune per gli sviluppatori concentrarsi su uno schermo alla volta, un'attività alla volta.Ricorda che non è così che pensa chi usa la tua applicazione, ha un obiettivo in mente, quindi cerca di entrare in quella testa il più possibile
5. Usa il software che stai costruendo il più possibile, non c'è modo migliore per vedere i suoi difetti, i suoi difetti e i suoi problemi piuttosto che sperimentarli tu stesso.

Answer 7

@Brian Warshaw - penso che provenisse da un discorso fatto da Aza Raskin, questo video penso

Answer 8

Progettare un'interfaccia utente completamente innovativa è piuttosto difficile per la maggior parte dei programmatori (sono solo io?).Ciò che trovo utile nella creazione/progettazione dell'interfaccia utente per le app Web è cercare sempre interfacce utente piacevoli, facili da usare ed eleganti che trovi durante la navigazione in Internet o l'utilizzo di qualsiasi altra app desktop.Se trovi l'interfaccia utente più efficiente (progettata da qualcun altro, in qualche altro posto) per l'attività da svolgere, puoi fare un buon lavoro implementando e creando un'esperienza utente migliore per la tua app.Ad esempio, mentre scrivo questa risposta, mi piace il modo in cui mostra un'anteprima in tempo reale della risposta, con un'opzione per "nascondere l'anteprima": vorrei sicuramente utilizzare un tipo di interazione simile durante la creazione di un'interfaccia del forum utente .

Answer 9

Capire cosa stai creando e cosa rappresenta il tuo prodotto è una chiave enorme per creare un'applicazione di successo.Recentemente ho scritto un post sul blog sulla raccolta dei requisiti che parla un po' di questo.Potete leggerlo qui:Come migliorare le tue capacità di raccolta dei requisiti.

Inoltre, ecco alcuni principi di alto livello che seguo per assicurarmi di costruire il prodotto giusto con un'esperienza piacevole:

Conoscere la differenza tra utente e cliente.Gli imprenditori che approvano il brillante progetto sono solitamente i clienti.Tuttavia, un errore devastante è la tendenza a confonderli con l’utente.Il cliente è solitamente la persona che riconosce la necessità del tuo prodotto, ma l'utente è la persona che utilizzerà effettivamente la soluzione (e molto probabilmente si lamenterà in seguito di un requisito che il tuo prodotto non ha soddisfatto).Vai da più di una persona

Perché siamo tutti umani e tendiamo a non ricordare ogni dettaglio straziante.Aumenta la probabilità di trovare requisiti mancati mentre parli con più persone e fai controlli incrociati.

Evita le offerte specialiQuando un utente chiede qualcosa di molto specifico, fai attenzione.Metti sempre in discussione i pregiudizi e vedi se questo migliorerà davvero il tuo prodotto.

PrototipoNon aspettare fino al lancio per mostrare ciò che hai all'utente.Realizza prototipi frequenti (puoi anche chiamarli versioni beta) e ottieni feedback costante durante tutto il processo di sviluppo.Probabilmente troverai più requisiti mentre lo fai.