Il prossimo passo dopo aver creato gli schermi mock-up

1

Ho creato alcune schermate di mockup per la mia app in HTML / CSS. Ho 4 schermi in totale.
Non contengono alcuna codifica sul lato client, ad esempio Javascript o jQuery.

Gli schermi stessi sono piuttosto insignificanti al momento, e mi rendo conto che richiedono un ulteriore lavoro. Alcuni dei miei piani per l'app in futuro sono: -

  • Introduzione ai modelli sul lato client: ad es. Mustache / Dust.js
  • Aggiungi effetti e transizioni usando jQuery
  • Migliora l'aspetto visivo degli schermi (attraverso css e immagini)

Sono indeciso sul modo migliore di procedere. Il mio obiettivo principale è che voglio che i cambiamenti siano facili da gestire, ed è per questo che ho creato schermate di mockup come da raccomandazione nel libro Getting Real di 37Signals.

Attualmente sto raccogliendo feedback per le schermate di mockup.

Da un punto di vista della programmazione, quale dei 3 passaggi precedenti sarebbe un buon passo avanti logico considerando la mia esigenza di rendere le modifiche facili da gestire?

Devo sottolineare che sono molto nuovo alla programmazione e allo sviluppo, e questa è la prima volta che sto imparando la programmazione. Alcuni termini potrebbero non avere senso per me e potresti doverli elaborare.

    
posta Khuram Malik 25.07.2012 - 17:16
fonte

3 risposte

3

Cosa dicono gli altri: non trattare prima la tecnologia, assicurati che funzioni in teoria.

Ad esempio, per migliorare la navigazione, crea un flusso di utenti.

Un flusso di utenti nei termini dei programmatori è una macchina a stati finiti, con alcune transizioni etichettate come "la" transizione principale (chiamata anche percorso felice). È ben definito e deterministico, cioè per ogni azione che può essere intrapresa nei rispettivi stati, esiste un output definito e le condizioni che decidono cosa può accadere sono complete (ad esempio, se c'è un "se l'utente ha qualcosa nel cestino ", c'è un accompagnamento" se l'utente non ha nulla nel cestino ").

Ogni schermo è uno stato e ogni clic che fa qualcosa è una transizione (anche se l'utente potrebbe rimanere sullo stesso schermo). La transizione ha sempre qualche condizione su quando può accadere. Solitamente tali schermate sono chiamate Key Screens, sebbene aggiungo un tipo speciale di schermo chiamato "Error Screen" per le situazioni di "whoopsie".

C'è uno stato di partenza astratto (dal quale ci sono condizioni che fanno arrivare l'utente sulla pagina, ad esempio ricerca di google), e uno o più stati finali astratti (ad esempio alcuni potrebbero essere felici stati finali, alcuni potrebbero essere stati finali falliti). L'abbandono semplice del sito non è menzionato come stato finale.

Il flusso principale di solito è organizzato orizzontalmente, mentre i flussi laterali (ad es. errori e gestione delle eccezioni) sono organizzati verticalmente, a partire dalla prima schermata dove possono andare male. Solitamente evidenzia il flusso principale avendo una linea molto più audace tra di loro.

Il problema principale che i progettisti lasciano fuori è che non si preoccupano dei problemi non felici, o ci vogliono troppo passi per raggiungere un obiettivo.

Ricorda che un utente ha sempre un obiettivo che vuole raggiungere con il sito. Può essere che quell'obiettivo sia emotivo, ma a volte è razionale - es. Google Maps può aiutarti a raggiungere l'obiettivo di sapere come andare da A a B, Facebook può aiutare il tuo obiettivo emotivo di sentirti vicino ai tuoi amici, ecc.

La facilità con cui questo obiettivo può essere raggiunto è un problema chiave, è coperto dal modello GOMS (su cui puoi leggere nell'interfaccia Humane di Raskin)

Ma, ahimè, non si tratta di tecnologia, in quanto la tecnologia non ha molta importanza. Puoi utilizzare una vasta gamma di tecnologie di template (per template master, significano avere un template 'layout' e solo modificare alcune parti del contenuto in base alla situazione).

Per quanto riguarda la tecnologia, prova a risolvere le transizioni con transizioni CSS invece di jQuery.

Un passo successivo tecnologico potrebbe essere quello di far funzionare le schermate mock-up con i dati del mock-up, cioè per renderle "live". Utilizza qualsiasi tecnologia adatta.

    
risposta data 25.07.2012 - 21:09
fonte
0

Passaggio 4, lavorare sulla navigazione e sull'usabilità, in questa fase è molto semplice lavorare su idee alternative di navigazione e flusso. Suppongo che il passaggio 3 possa far parte di questo, dipende da quanto visivamente pesante deve essere la tua app o se hai solo poche icone ecc.

    
risposta data 25.07.2012 - 18:25
fonte
0

Lavora sull'usabilità e sulla manutenibilità dei tuoi modelli e pagine. Include la navigazione e la facilità di aggiornamento.

Sicuramente potresti voler considerare benefits of master template technique . Ciò consentirà anche di fornire coerenza tra le pagine , aspetto grafico e facilità di manutenzione.

    
risposta data 25.07.2012 - 19:00
fonte