Nascita di una UX - ASafaWeb ottiene una parte identità 1

Con la fase di beta testing privata di ASafaWeb essere andato abbastanza bene e una buona legnata di tempo poi dedicati sia roba di fissaggio e l'attuazione di nuove funzionalità, è il momento di fare qualcosa per questo brutto anatroccolo. Credo veramente che l'esperienza degli utenti è un fattore assolutamente fondamentale per il successo di un sito e che merita davvero una certa attenzione in modo serio e non solo a farcela fuori, ho intenzione di approccio abbastanza metodicamente e scrivere su di esso come vado.
Ecco la storia di emergere dalla mediocrità ASafaWeb UX a ciò che si spera diventare un coeso, design accattivante.

Io so quello che mi piace

Un bel po 'di lavoro era già andato in funzione di ASafaWeb prima che ho avuto intorno al design. Questo mi ha dato un sacco di tempo per pensare a quello che mi piaceva e ho iniziato a catturare queste idee in Evernote praticamente dal primo giorno. Spesso questo è stato piccole cose, per esempio, mi piace il modo in cui Burton ha una discreta navigazione:

Mi piace anche come Vinomofo dà profondità e carattere a caselle di input altrimenti mi annoia:

E io veramente piace il modo in Gantry utilizza in scala di grigi a contrasto contro il contenuto colorati:

Ci sono molti altri esempi simili di questo, il punto che sto facendo è che ho avuto qualche senso di dove volevo prendere questo disegno.

Non è un punto negativo di partenza

ASafaWeb è stato costruito da zero come un marchio nuovo progetto MVC 3. Questo significava che un sacco di bontà dell'interfaccia utente a destra, fuori dalla scatola, layout di pagina, gli stili CSS, convalida - è tutto lì dal get-go. Questo è un punto davvero buona base di partenza per un progetto come ASafaWeb perché significa che si può alzare e la costruzione reale funzionalità subito senza doversi preoccupare delle basi del layout.
Sono sicuro che molte persone lamentano il template di default, ma in realtà ha una partita in corso per esso:

1. E 'basata interamente layout CSS (nessun layout di tabella male base qui!)
2. Si tratta bene contro i servizi di validazione del W3C (alcuni problemi minori CSS).
3. Si gioca bene in varie risoluzioni.
4. Funziona bene su altri dispositivi (almeno lo fa su dispositivi IOS).

Che cosa tutto questo significa è che pur non essendo visivamente elegante, ASafaWeb era funzionale senza alcun apporto di progettazione di sorta da parte mia:

Photoshop-primo contro markup-primo

Sembra che ci sia un po 'di dibattito - oserei dire dibattito "religioso" - in cui il design deve iniziare. Prendi il progettista-centric approccio tradizionalista e tutto Photoshop fino allora fetta e rimontare in formato HTML o si comincia con l'essere markup-centrica e costruire il vostro disegno direttamente tramite HTML e CSS?
Dibattiti religiosi non generalmente tendono ad essere molto oggettivi o produttiva e certamente ho sceso due percorsi sopra molte volte in precedenza. Essi hanno i loro punti di forza e di debolezza e francamente penso che sia molto un fattore che ha coinvolto nel progetto e dove i loro punti di forza. Se avessi avuto accesso a un super-designer che conoscevano la loro roba Photoshop ma non riusciva a tradurre markup allora sarei molto felice di portare il loro lavoro e si taglia a me stesso.
Sono abbastanza bene con entrambi i modelli, ma ASafaWeb dato è già basato sul modello MVC 3 che ha la disposizione fondamentale al posto già più comprende centinaia di linee esistenti di CSS, sarà markup prima volta per me. Photoshop ancora caratteristica, ma è per pezzi 'di lavoro su misura rispetto alla posa il tutto fuori da zero.

CSS cortesia ripristino di Eric Meyer

Un buon primo porto di scalo prima di approfondire la complessità dei comportamenti del browser diversi è quello di applicare un reset CSS. L'idea è che i vari browser mostrerà diverse incongruenze nel modo in cui rendere elementi e il ruolo del reset CSS è quello di portare tutti verso il basso per una base comune prima di iniziare a scherzare con le cose. Ci sono un paio di reset diverso là fuori, ma opinioni popolari favorisce versione di Eric Meyer .
Che questo si riduce a un blocco di CSS potete Chuck nel vostro foglio di stile esistente fino in cima prima di tutto più in basso si avvia cose ridefinendo. Questo sarà il cambiamento dei comportamenti di default e dopo le cose ripristino sembrava un po 'diverso:

In questo caso, il reset ha mischiato la navigazione su due righe e ho cambiato anche l'altezza e il peso delle voci. Non disperatevi, questi possono essere ottimizzato ulteriormente nel CSS direttamente sugli elementi interessati dal ripristino, cioè le definizioni h2 e li. La cosa importante è che ora c'è una buona base su cui lavorare.

Un punto di partenza

Può essere un po 'difficile sapere nemmeno da dove iniziare con questo genere di cose, ma io in realtà aveva un chiaro obiettivo in mente, volevo casella di testo URL di essere il punto focale della pagina. Questo è il punto di ingresso ad ogni scansione quindi bisogno di essere forte e chiaro. Volevo anche dare profondità . I controlli dei moduli tendono ad essere molto bidimensionale e un po 'noioso e loro non hanno bisogno di essere.
Ma prima ancora di cominciare a pensare a caselle di testo e pulsanti, ho già avuto un tema generale in mente. Volevo qualcosa di oscuro e texture contrastanti in cui gli elementi della pagina con i colori più ricchi potrebbe saltare fuori dalla pagina e davvero spiccano, quasi come se i risultati sono stati che emergono dal ventre oscuro del mondo della sicurezza (va bene, iniziando a fare un po 'di marketing, parlare qui !)
Così ho reso a sfondi per la casella di testo e il pulsante poi creato una immagine di sedersi contro la sinistra di tutto per dargli una finitura curva. Questo significa che la casella di testo si possono scalare orizzontalmente a seconda della risoluzione disponibile (ne riparleremo più avanti). Tutte le immagini sono PNG trasparenti in modo qualunque colore di sfondo o dei modelli che possono decidere tranquillamente sedere in queste senza funky anti-aliasing problemi.
L'altra cosa che ho fatto è stato quello di ignorare alcuni di questi azzera i CSS, ovvero per ottenere un certo margine di nuovo intorno al intestazioni. Il NAV può attendere - che sta per essere posizionato in modo diverso in ogni caso. Ecco come sta cercando:

Con l'emergere di nuovi browser così tanti cellulari e altri dispositivi che ora sono web-browser abilitato, ho voluto mantenere il markup come vera l'intenzione semantica dei controlli il più possibile. Prendere il pulsante "Scan" come esempio: sarebbe stato facile da usare solo un'immagine di tutta la faccenda ma, invece, il markup è proprio come ci si aspetterebbe da un pulsante di invio:

< ingresso tipo = "submit" value = "Scan" />

Il CSS è ereditato dal contenitore che si trova all'interno di (un tag fieldset con una classe CSS personalizzata) e il testo "Scan" è il testo effettivo dal controllo, non è parte della bitmap.
Ecco dove si iniziano ad avere anche la lotta di potere tra i browser e le loro rispettive implementazioni di CSS. Prendete le due immagini qui sotto che ho preso da schermo-Cromo 14 a sinistra e IE 9 a destra poi fatto saltare in aria a circa 250%. Ci sono due differenze interessanti qui:
 
In primo luogo, IE 9 ha fatto un lavoro decisamente migliore di anti-aliasing. La ringrazio molto ClearType , bel lavoro! Questo è anche visibile con le dimensioni originali, ma è necessario guardare consapevolmente per esso. Per inciso, l' ultimo episodio della vita di questo sviluppatore ha alcuni retroscena molto interessanti sul ClearType.
L'altra cosa è che Chrome ha implementato un po 'di bel drop-ombra sotto il testo, mentre IE non ha. Ciò è stato ottenuto dalla proprietà text-shadow CSS come segue:

text-shadow : 2px 2px 3px # 2f6b1e ;

Il problema è che IE 9 non sa cosa è così non lo implementa. Ora, naturalmente, questo non è esattamente una modifica sostanziale, ma non dimostrano che siamo ancora a che fare con le idiosincrasie del browser. Questo è solo uno di quei comportamenti CSS, dove alcuni browser è implementato sei anni fa, altri ancora si rifiutano ancora di. In parte è inevitabile che essa non faceva parte della 2.x specifiche CSS, un fatto che Visual Studio è lieta di ricordare:

In teoria, questo dovrebbe far parte delle specifiche CSS 3 , ma poi anche dopo l'installazione del 3 dello schema Intellisense CSS non era ancora contento reale:

La situazione è resa ancora più strana dal default MVC 3 del presente modello di proprietà del tag h1:

Così Microsoft implementa una proprietà CSS nel template di default del loro framework MVC, ma non all'interno del proprio browser! Come ho detto prima, siamo ancora a che fare con le idiosincrasie del browser dopo tutti questi anni.

Continuo cross-browser e la compatibilità della piattaforma di controllo

L'esempio della proprietà text-shadow sopra è solo uno dei molti casi in cui un particolare browser o piattaforma sta per fare il suo dovere proprio in ossequio a quello che tutti gli altri stanno facendo. Per questo motivo ho voluto fare in modo che ogni caratteristica poco viene controllato tutti i browser e le piattaforme prima di passare.
Intendiamoci, ho intenzione di essere selettivi. Se si comporta bene su tutte le versioni correnti del browser su Windows 7 e su dispositivi IOS (certamente predominante il browser mobile troyhunt.com), che è un buon punto di partenza. Il mio pubblico è generalmente sia la capacità e il senso comune per mantenere il loro browser attuale! Se la gente mi fanno consapevoli delle questioni su altri browser o piattaforme in seguito poi posso affrontare tali a tempo debito. Il fatto è però, almeno per quanto CSS va, se un sito gioca bella da questi criteri, allora è improbabile che sia spezzato in qualsiasi tipo di modo funzionale su tutti i browser principali e la combinazione della piattaforma. Forse alcuni problemi di allineamento o la formattazione, ma che di solito è la misura di esso.
Quindi, ecco un buon esempio: in Safari in esecuzione su Windows 7, ottengo questo:

In Safari su IOS, ottengo questo:

In realtà sono per lo più bene con questo, non mi dispiace che il pulsante si separa dalla casella di testo da un pixel e arrotonda gli angoli, in modo isolato sembra davvero ok. Quello che mi fanno ricordare è che l'immagine poco bombato sulla sinistra della casella di testo spicca come, beh, lo fa proprio. E poi il testo colpisce il bordo sinistro della casella di testo perché l'immagine non ha fornito una estensione visiva ad esso. Non fresco.
Quindi il modo migliore per affrontare questo era lasciarsi andare ad uno sfondo ripetendo che mi permette di scalare la larghezza della casella a tempo indeterminato e invece basta usare una singola immagine con l'estremità ricurva poi il pad a sinistra della finestra. Il problema è che questo significa altri compromessi. Per esempio, lo sfondo ripetendo più fine curva pari a meno di 1 KB, ma nel suo complesso non ripetere l'immagine per lo sfondo soffia verso 8.6KB.
Sul flipside, è solo una richiesta HTTP in modo da risparmiare un po 'di tempo di attesa lì (anche se le due immagini sarebbe stato un buon candidato sprite). Più esso uccide un tag esplicito immagine che ero lì solo per fini estetici in modo che il markup è più pulita. Ecco, mi ha parlato in esso:)
Il risultato finale è UX identica a prima sul PC e una rappresentazione piacevole in IOS:

Per inciso, anche Safari su IOS possono ottenere quelle proprietà text-shadow destra - andiamo IE!
Tutti i test IOS sopra è stato il iPad, ma è anche lavorando abbastanza bene su iPhone, in quanto è funzionale, anche se, ovviamente, di piccole dimensioni (non leggere troppo in la mia scelta di porto!):

Io davvero non vogliamo essere costretti a creare una versione mobile. Può accadere e il più dipendenti sono su CSS, più facile sarà. Ma voglio che la scelta , voglio essere in grado di scegliere tra una perfettamente funzionante anche se l'esperienza di seconda classe al telefono e un'esperienza più dedicata al fattore di forma più piccola.

Riassunto

Si tratta di un inizio di base, ma trovo sempre il design è una di quelle cose in cui basta un punto di partenza allora tutto comincia ad evolversi da lì. Partendo con il reset CSS è un bel po 'di assicurazione, è fare in modo tutto suona ancora bello con gli altri browser e piattaforme dopo ogni nuova caratteristica è costruito. Prendendo poco progettazione morsi in un momento all'interno di tale modello predefinito si sta dimostrando di lavorare bene come tutto si comporta ancora bene tutto lo sviluppo.
Corso Visual Studio - Corsi Visual Studio
Corso .Net- Corso Dot.Net - Corso Vb.net
Corso C# - Corso PHP - Corso Joomla