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 le forme è un'abilità altamente specializzata. Richiede la comprensione di come le persone interagiscono con le informazioni e capiscono i modi migliori per raccogliere e presentare le informazioni. Laddove il web design generale è incentrato principalmente sulla presentazione di informazioni e immagini in modi attraenti ma pratici, la progettazione della forma richiede che focalizziamo la nostra attenzione sulla natura delle informazioni e poi decidiamo il modo migliore per strutturarle sulla pagina in modo che funzioni come previsto. L'estetica è una considerazione meno importante in questo caso, ma non deve essere dimenticata.

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 e il 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 le forme possono essere costruite in modi più intelligenti. Per fare ciò, dobbiamo pensare bene oltre le impostazioni predefinite. Dobbiamo essere consapevoli delle radici legate al desktop dei controlli dei moduli e anche della necessità di compatibilità mobile. E dobbiamo preoccuparci di cose come usabilità e convalida (se il modulo sarà usato per la raccolta dei dati).

Quest'ultimo punto è buono, perché mentre i controlli del modulo vengono utilizzati per raccogliere l'input, vengono anche utilizzati per la visualizzazione dei dati memorizzati. L'utente medio web è (e dovrebbe essere) più interessato a ottenere informazioni da te che fornire informazioni all'utente.

La raccolta dei dati è facile. La gente riempirà qualsiasi cosa tu stia di fronte a loro, anche se è un disastro. Ma quando si tratta di visualizzazione dei dati, sono più esigenti. Di conseguenza qui ci concentreremo di più sull'uso dei moduli per visualizzare i dati piuttosto 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ò, le forme 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, allora i moduli sono una scelta migliore delle tabelle ... a volte!

2. Progetta il layout del desktop

È 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ù rapido per prendere in giro un design di un modulo è con InkScape. In questo esempio, costruiremo un sistema per la gestione dei record delle risorse umane. Ecco il mock up per il prototipo desktop:

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

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

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à display degli elementi label su "block", impostiamo i campi di First e Last alla classe "in40w" e assegniamo MI alla 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 fila di colonne nidificate all'interno della nostra colonna principale, che contribuirà a mantenere i controlli opportunamente distanziati. Il numero di colonne e le loro dimensioni cambia in base ai requisiti di ciascun set di controlli. Ricorda che tutto è reattivo, quindi quando una colonna viene ridimensionata, tutto all'interno della colonna tenterà di ridimensionare per corrispondere alla modifica. Questa è una buona notizia per gli utenti ipovedenti, poiché possono ingrandire l'ingrandimento sul loro 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 intorno alle sezioni speciali sono solo normali pozzetti Bootstrap. Per inserire i dati di religione, è necessario scegliere da un elenco fisso di religioni ufficiali predefinite (incluso "altro"). Lo sviluppo delle colonne sul lato destro era ancora più semplice e utilizzava le stesse tecniche dal primo set di controlli sulla colonna di sinistra, organizzando i controlli in un formato tabella, ma senza usare una tabella.

Perché questo progetto fosse un successo, doveva fornire una risposta perfetta su tutte le dimensioni di display ufficiali. Vediamo come si è rivelato il risultato. Innanzitutto con la versione a piena risoluzione:

Questo è abbastanza vicino al prototipo che possiamo essere soddisfatti. In effetti, è persino un miglioramento. Ora vediamo il layout reattivo in ciascuna delle diverse sezioni della pagina:

Bootstrap e HTML5 hanno reso lo sviluppo dei moduli più veloce e più semplice di prima, ma molti sviluppatori minano questo progresso rendendo le forme troppo complicate (usando gli speciali elementi del modulo HTML5 solo perché sono lì per essere usati invece che perché sono necessari per il progetto ), e creando forme interamente monodimensionali che non tentano nemmeno di sfruttare il design reattivo. Con un po 'di attenzione e un lavoro extra, qualsiasi dato può essere fatto per apparire 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

Bogdan Rancea

Bogdan è membro fondatore di Inspired Mag, avendo accumulato quasi 6 anni di esperienza in questo periodo. Nel tempo libero ama studiare musica classica ed esplorare le arti visive. È piuttosto ossessionato dai fissaggi. Possiede già 5.