La ricerca di moduli Web più intelligenti

I moduli online sono una delle aree più difficili dello sviluppo del sito web per essere corrette, specialmente con tante cose che possono andare storte. La natura mutevole di come le persone accedono ai contenuti online ha anche avuto un impatto su una tecnologia che è stata sviluppata anni prima che la gente si aspettava di essere in grado di comunicare con un telefono cosa normalmente farebbero solo con un computer. È una tecnologia che ha subito pochissime evoluzioni.

La progettazione di moduli web dovrebbe essere una professione autonoma. I progettisti di siti dovrebbero impegnarsi nel servizio di progettisti di moduli web professionali a tempo pieno per aiutarli nel loro compito. Ma questo non è considerato abbastanza economico, e quindi la maggior parte delle volte il progettista del sito è anche responsabile della progettazione di qualsiasi modulo utilizzato sul sito.

Ma progettare forme è un'abilità altamente specializzata. Richiede la comprensione di come le persone interagiscono conformation e capire i modi migliori per raccogliere e presentareformatione. Laddove il web design generale è principalmente incentrato sulla presentazioneformationi e immagini in modi attraenti ma pratici, il design della forma richiede che focalizziamo la nostra attenzione sulla natura dell'information e quindi decidere il modo migliore per strutturarlo nella pagina in modo che funzioni come previsto. L'estetica è una considerazione meno importante in questo caso, ma non dovrebbe comunque esserlogotten.

In questo articolo daremo un'occhiata all'arte del design dei moduli web e vediamo se riusciamo a trovare un modo per rendere le nostre forme Web più intelligenti sia in termini di aspetto che di funzionamento.

Gli strumenti del web form building

Gli strumenti standard che gli sviluppatori di browser e W3C hanno fornito per mettere insieme i nostri moduli Web non sono esattamente l'ideale e, prima di applicare loro il CSS, sono in realtà piuttosto orribili. Ecco come sono:

C'è anche un altro controllo di input standard chiamato select, ma dovresti evitare di usarlo a meno che il risparmio di spazio non sia un problema serio. Esistono modi migliori per gestire l'attività eseguita dal controllo di selezione, come vedremo più avanti. I controlli della textarea dovrebbero essere evitati quando possibile, perché sono così problematici e antiquari.

Oltre a questi elementi di input standard, sono disponibili anche nuovi speciali creati per HTML5. Tranne quando un documento viene preparato rigorosamente per uso interno e in cui l'ambiente del browser è noto, devono essere utilizzati solo componenti che funzionano sia in Firefox che in Chrome. Va bene se un componente funziona anche in altri browser, ma non dovrebbe - esclusivamente. lavoro in altri browser. Ecco i componenti HTML5 così come appaiono in Firefox:

E il loro aspetto leggermente diverso in Chrome:

Ora, ovviamente, è molto importante essere consapevoli che i tuoi input HTML5 appariranno e funzioneranno in modo diverso tra Chrome e Firefox, ma funzioneranno comunque. Anche i controlli di input standard sono un po 'più belli in Chrome che in Firefox. Si noti che Chrome impone lo standard di data nordamericano, che gli utenti potrebbero non apprezzare. Anche la versione Chrome del controllo della data lo rende inadatto per la visualizzazione e dovrebbe essere utilizzato solo per l'input. L'aggiunta di un selezionatore di date è il miglioramento principale in Chrome, ma possiamo probabilmente aspettarci di vederlo nelle versioni future di Firefox.

Dato che Firefox è open source, puoi effettivamente rendere la tua versione personale di Firefox per rendere gli input allo stesso modo di Chrome, scaricando il codice sorgente del browser Chromium open source su cui è basato Chrome e trasferendo la relativa sezione di codice alla sorgente di Firefox codice (ma poi dovrai farlo ogni volta che aggiorni Firefox a una nuova versione).

Il punto principale è, tuttavia, che anche con i miglioramenti di Chrome, l'aspetto predefinito dei controlli di input è piccolo e poco attraente. Sono disponibili alcuni altri controlli, ma poiché non funzionano in Chrome e Firefox, non dovrebbero essere utilizzati su siti destinati al pubblico.

La risposta (quasi adeguata) di Bootstrap

Bootstrap applica lo stile ai controlli standard che ne migliorano l'aspetto in una certa misura. Tuttavia, a causa della filosofia di progettazione mobile-centrica di Bootstrap, provoca alcuni effetti indesiderati su moduli che non devono essere visualizzati come una singola colonna e rende i campi di input brevi un aspetto divertente quando si estendono su un'intera colonna per impostazione predefinita. Il mondo potrebbe essere diventato mobile, ma le forme non sono state inventate pensando agli utenti di dispositivi mobili.

Bootstrap espande i controlli per riempire la larghezza orizzontale del loro contenitore, il che significa che tutti i controlli avranno la stessa larghezza, che ti piaccia o meno (a meno che tu non superi manualmente questo comportamento) e ti permetta di mascherare alcuni tipi di controllo con bling aggiuntivo. La soluzione Bootstrap è elegante e supera alcuni dei problemi dei controlli che hanno aspetti diversi nei vari browser, ma funziona solo con i controlli standard. I controlli HTML5 non sono implementati nelle versioni correnti di Bootstrap, quindi dovrai personalizzarli da soli.

Bootstrap ti consente anche di combinare i controlli insieme. A volte questo è buono e talvolta non è così buono. La combinazione di un input di testo con un pulsante e una casella di controllo può sembrare buona, ma potrebbe confondere l'utente su come dovrebbero interagire con un controllo così poco familiare.

Quello che Bootstrap fornisce sono due dei miei dispositivi di creazione di moduli preferiti, il pannello di eventi e bene. Questi sono molto utili per raggruppare i dati del modulo per fornire un'indicazione visiva di quali dati sono correlati a quali altri dati e anche per segregare i dati.

Smart Form Building 101

Ora siamo pronti a pensare a come costruire i moduli in modi più intelligenti. Per fare ciò, dobbiamo pensare ben oltre le impostazioni predefinite. Dobbiamo essere consapevoli del desktopradici vincolate dei controlli dei moduli e anche la necessità di compatibilità mobile. E dobbiamo preoccuparci di cose come l'usabilità e la convalida (se il modulo verrà utilizzato per la raccolta dei dati).

Quest'ultimo punto è positivo, perché mentre i controlli dei moduli vengono utilizzati per raccogliere l'input, vengono utilizzati anche per visualizzare i dati archiviati. L'utente medio del web è (e dovrebbe essere) più interessato ad entrareformatione da te che cedereformatione a te.

La raccolta dei dati è facile. Le persone riempiranno qualsiasi cosa gli metti di fronte, anche se è un disastro. Ma quando si tratta di visualizzare i dati, sono più pignoli. Di conseguenza qui ci concentreremo più sull'uso dei moduli per visualizzare i dati che per raccoglierli, poiché la visualizzazione richiede più cura e più "intelligenza".

1. Abbiamo bisogno di un modulo?

Prima di compilare un modulo, dovremmo verificare che ne abbiamo effettivamente bisogno. Se i dati possono essere rappresentati in modo adeguato e inconfondibile come una tabella, in genere una tabella sarà più efficiente e pratica.

Un modulo è necessario se:

• Stiamo raccogliendo input dall'utente
• Abbiamo molti dati da mostrare
• I dati devono essere chiaramente segmentati
• È probabile che l'utente acceda ai dati da un dispositivo mobile

Se uno qualsiasi degli elementi precedenti non è vero, non è necessario utilizzare un modulo e una tabella sarà sufficiente. La sfida che dobbiamo affrontare con la compatibilità mobile è che né le tabelle né i moduli sono realmente adatti a un display mobile. Il fatto che i designer di smartphone abbiano dato ai propri utenti la possibilità di utilizzare un browser con orientamento verticale e che la maggior parte degli utenti preferisca tenere i loro telefoni in quel modo causa la maggior parte dei problemi di compatibilità dei dispositivi mobili che i progettisti del sito devono affrontare.

Indipendentemente da ciò, i moduli sono più adattabili a un display mobile rispetto alle tabelle. Quindi, se davvero devi assicurarti che tutti i dati possano essere facilmente visualizzati su un display mobile, i moduli sono una scelta migliore delle tabelle ... a volte!

2. Progetta il desktop disposizione

È vero che in generale si suppone di progettare prima un layout mobile, ma quando si tratta di moduli, non è il modo migliore, perché abbiamo bisogno di sapere come i dati verranno raggruppati, e possiamo farlo solo se puoi vedere tutti i campi contemporaneamente, cosa che non può essere eseguita su un dispositivo mobile a meno che tu non mostri così pochi dati che non dobbiamo preoccuparci di progettare il modulo.

Il modo più veloce per simulare la progettazione di un modulo è con InkScape. In questo esempio creeremo un sistema per la gestione dei record delle risorse umane. Ecco il mock up per il desktop prototipo:

Il rettangolo esterno rappresenta l'intero spazio di un display da 1024 x 768 px. Su qualsiasi desktop browser, non abbiamo accesso a così tanti pixel a meno che l'utente non sia in modalità a schermo intero (cosa che accade raramente). Quindi il nostro

il design è 900 x 600px, che dovrebbe rientrare nell'area disponibile della maggior parte desktop schermi.

Quando l'area disponibile è inferiore a 900px, le nostre colonne 2 x 450px si interromperanno e appariranno come una colonna 450px continua. Questo risolve il problema della compatibilità mobile, almeno finché Google non esige che tutti i nostri siti siano in grado di adattarsi a uno schermo da polso.

Noterai che la maggior parte del display è composta solo da normali caselle di input, che possono sembrare noiose, ma in realtà è quasi sempre il modo migliore per farlo. Notare anche l'uso di un font a larghezza fissa. Ciò aiuta a mantenere l'uniformità nella progettazione della forma.

Le nostre colonne saranno in realtà leggermente superiori a 450px, più simili a 600px ciascuna, ma se volessimo forzare la larghezza della colonna in 450px, ridurremmo la dimensione della colonna da 6 a 5. Ma una colonna 600px dovrebbe adattarsi su uno schermo mobile in modalità verticale senza avvolgere, comunque.

Testeremo il nostro layout con questo codice:

E possiamo vedere che tutto sembra a posto (perché temporaneamente abbiamo aggiunto dei confini per mostrarci).

Il widget del righello dello schermo di Linux ovviamente non fa parte della pagina web, ma è lì per mostrarci che le nostre colonne non si romperanno male su un display più piccolo. Vediamo cosa succede a diverse larghezze dello schermo comuni:

3. Creazione di formati di input personalizzati e posizione dell'etichetta

Se lasciamo tutto in modo predefinito, senza aggiungere alcun CSS personalizzato, questo è ciò che accadrà quando aggiungiamo la nostra prima riga di controlli di input:

Ciò accade perché l'etichetta per ogni input è impostata a sinistra dell'input e poiché non abbiamo impostato una larghezza personalizzata per i controlli di input. Possiamo risolvere entrambi i problemi con i CSS.

Ora impostiamo la proprietà di visualizzazione degli elementi dell'etichetta su "block", impostiamo i campi First e Last sulla classe "in40w" e il campo MI sulla classe "in10w", e tutto dovrebbe apparire molto più bello.

Come puoi vedere, ha un aspetto migliore, ma il layout non è più corretto. Ora le scatole sono impilate. Quindi, come risolveremo eliminando l'idea dell'utilizzo dell'elemento etichetta, perché non ne abbiamo davvero bisogno. Applicheremo semplicemente il nostro in40w e in10w classi, oltre a creare una nuova classe chiamata inLeftOf.

Che, una volta applicato, risolve il problema che abbiamo visto in precedenza, in questo modo:

Ma questo non lascia abbastanza spazio per il campo SSN. Questo perché la nostra colonna di sinistra è più grande del previsto, quindi 40% è in realtà più spazio del necessario per questi campi, quindi possiamo ridurli in in30we il campo medio è più grande di quello che deve essere, quindi possiamo farlo in5w. Ecco cosa succede:

Quindi ora c'è spazio più che sufficiente per aggiungere il campo SSN, che completa la prima riga del nostro modulo di input. Dopo aver appianato tutti questi dettagli, la costruzione del resto della colonna di sinistra dovrebbe essere molto semplice. Ora possiamo sbarazzarci del confine temporaneo e applicare anche lo sfondo corretto alla colonna. Ecco la metà superiore del pannello, prima di arrivare a aree speciali del modulo:

Alcune cose sono successe in questa fase. La prima è stata la parte più semplice dell'impostazione del colore di sfondo per la colonna (rgb (235,235,246)) e sebbene non sia possibile vederlo qui, il colore del testo per tutti gli input è stato impostato su #427DB4 e il peso del carattere è stato impostato su grassetto in modo da ridurre l'affaticamento degli occhi. Il testo è stato impostato per la trasformazione automatica in maiuscolo utilizzando la proprietà di trasformazione del testo CSS, in modo da velocizzare l'immissione dei dati e ridurre gli errori.

La questione più complessa di allineare i controlli e assicurarsi che avrebbero mantenuto un allineamento decente su qualsiasi tipo di display richiedeva più riflessione. Hai già visto la tecnica utilizzata per la prima riga di input e le loro etichette. Questa tecnica funzionerà quando non ci sarà bisogno di alcuna spaziatura aggiuntiva tra gli input, ma se abbiamo bisogno di aggiungere spazio, allora è meglio usare un'altra tecnica.

Quest'altra tecnica prevede la creazione di una riga nidificata di colonne all'interno della nostra colonna principale, che aiuterà a mantenere i controlli correttamente distanziati. Il numero di colonne e le relative dimensioni cambia a seconda dei requisiti di ciascuna serie di controlli. Ricorda che tutto è responsive, quindi quando una colonna viene ridimensionata, tutto all'interno della colonna tenterà di ridimensionarsi per corrispondere alla modifica. Questa è una buona notizia per gli utenti ipovedenti, poiché possono ingrandire l'ingrandimento sul display e tutto sarà allineato correttamente come per qualsiasi altro utente.

Passando alla parte più complessa della colonna di sinistra, il concetto originale delineato nel mock-up richiedeva una struttura che sarebbe stata difficile da implementare. Fortunatamente mi sono reso conto che i dati sul pannello delle autorizzazioni potevano essere raddoppiati se venivano utilizzate caselle di controllo standard, e questo risolveva bene il problema di complessità del layout:

I pannelli più leggeri attorno alle sezioni speciali sono solo normali pozzetti Bootstrap. Per inserire i dati sulla religione, è necessario scegliere da un elenco prestabilito di religioni ufficiali predefinite (incluso “altro”). Lo sviluppo delle colonne sul lato destro è stato ancora più semplice e si sono utilizzate le stesse tecniche del primo set di controlli sulla colonna di sinistra, organizzando i controlli in una tabella format, ma senza utilizzare una tabella.

Affinché questo progetto avesse successo, doveva essere perfetto responsiveness su tutte le dimensioni ufficiali del display. Vediamo come è venuto il risultato. Innanzitutto con la versione a piena risoluzione:

Questo è abbastanza vicino al prototipo da poterne essere soddisfatti. In effetti, è anche un miglioramento. Ora vediamo il responsive layout in ciascuna delle diverse sezioni della pagina:

Bootstrap e HTML5 hanno reso lo sviluppo dei moduli più rapido e semplice rispetto a prima, ma molti sviluppatori minano questo progresso rendendo i moduli troppo complicati (usando gli elementi speciali del modulo HTML5 solo perché sono lì per essere usati invece che perché sono necessari per il progetto ), e creando forme del tutto unidimensionali che non tentano nemmeno di sfruttare responsive disegno. Con solo un po' di attenzione e lavoro extra, qualsiasi dato può essere reso più presentabile su qualsiasi dimensione dello schermo.

Potresti ottenere alcuni piccoli inconvenienti sulla dimensione dello schermo più piccola in formato verticale sulle dimensioni dello schermo più piccole (nel caso di questo progetto, il campo Medio iniziale sulla prima riga è un po 'più piccolo di quello che sarebbe l'ideale), ma gli utenti mobili generalmente accetta che questo è il compromesso che devono fare per non tenere i loro telefoni correttamente.

Fallo bene, e i tuoi moduli dati possono assomigliare a questo:

Invece di, uh, questo:

immagine di cortesia per gentile concessione di Timo Kuilder