it-swarm-eu.dev

Buon design per app Web con moduli di grandi dimensioni

Ho esplorato il Web alla ricerca di buoni modelli/temi, ma non ho mai visto un ottimo esempio per la tipica app aziendale con 20-40 campi per pagina e 2-5 schede in mezzo. La maggior parte dei WP, temi della pagina di amministrazione o persino alcuni temi CMS non sembrano adattarsi a ciò che la maggior parte degli utenti (o almeno quella che ho incontrato) si aspettano dalle loro app aziendali.

Alcune considerazioni come:

  • Avere un gran numero di campi in una singola pagina (come menzionato sopra)
  • Caratteri più piccoli per fare spazio a tutti quei campi rispetto a quelli grandi leggibili che sembrano un tema di spicco per la maggior parte degli altri temi
  • Tutte le informazioni rilevanti in un'unica schermata
  • Sensazione "professionale" (anche noiosa, opaca, cubicle XD seria)

Potete indicarmi qualche buon esempio o tema adatto alle app aziendali e qualche buon tutorial per la progettazione di app aziendali? Temi e tutorial meno orientati al marketing e più all'utilizzo funzionale. Puoi correggermi se la mia idea di usabilità per un'app aziendale è sbagliata.

15
Jonn

Ecco alcuni ottimi link per te ... forse troverai quello che stai cercando:

E da Lukew puoi imparare molto sulla progettazione dei moduli: http://www.lukew.com/ ed ecco una presentazione Lukew: http://videos.visitmix.com/MIX09/C17F

alcuni articoli aggiuntivi dal mio delizioso: http://www.delicious.com/rolficak/form

12
Roland Pokornyik

Al momento sto lavorando a qualcosa di simile, quindi ho pensato di condividere i miei pensieri.

Supponiamo che tu abbia 40 campi di input in una pagina "Modifica organizzazione".

Primo passo - schede: Possono essere suddivisi in segmenti discreti (ad esempio, ci sono alcuni campi che non si basano su altri nella pagina?) Forse ci sono campi che puoi inserire nella loro scheda/pagina: "Modifica indirizzo", "Modifica persona di contatto", "Modifica informazioni sulla sicurezza antincendio" ecc.?

Secondo passo - passi: È un processo graduale? Devi finire un set di input prima di un altro? Dividilo in pagine separate e fornisci un indicatore di progresso e collegamenti successivi/precedenti.

Terzo passaggio: divulgazione progressiva: Puoi nascondere alcuni campi fino a quando non sono necessari? ad esempio, se la scelta di un'opzione consente di selezionare più opzioni secondarie, nascondere le opzioni secondarie fino a quando non si è sicuri che siano necessarie sullo schermo.

Quarto passaggio - blocchi: Se non puoi fare quanto sopra, dividi la pagina in blocchi separati che contengono informazioni simili e fornisci un'intestazione. Esempio di Luca .

Quinto passaggio: navigazione: Pensa a come raggiungere ogni singola scheda/pagina. Arrivi sulla pagina Modifica organizzazione e fai clic su Modifica indirizzo? Puoi arrivare su Modifica indirizzo nella schermata prima? Assicurati di poter trovare e ottenere facilmente le informazioni separate.

Sarei molto riluttante a cambiare le dimensioni di qualcosa solo per adattarmi maggiormente. Meglio una forma lunga, ben strutturata, che un disordine confuso. Un altro principio di base da tenere a mente è quello di rendere i campi di input finché dovrebbero essere per i dati che entrano. Ad esempio, un campo di codice postale sarà più corto di un campo di indirizzo e-mail.

Spero che aiuti!

5
kerr

Non ho esempi brillanti di app Web aziendali con moduli di grandi dimensioni - in parte perché tale progettazione dell'interfaccia utente non è davvero una buona idea - in generale.

Credo che sarebbe un buon esercizio esaminare ogni campo e determinare se quel campo è davvero necessario? E in tal caso, considerare se i dati possono essere calcolati o dedotti da altri dati di input - o se è possibile utilizzare impostazioni predefinite ragionevoli? E invece di un campo di testo vuoto (potenzialmente spaventando l'utente), il campo può essere rappresentato in un modo più accessibile (vincolato/visivo)?

Ma di nuovo, dipende dal tipo di sistema e dal contesto d'uso. Puoi essere più specifico in termini di scopo dell'app Web?

3
agib

Credo che l'online banking sia la tua risposta. Se la tua banca fornisce un account online, troverai complicate navigazioni a più livelli, un tentativo di raggruppare quante più informazioni possibili in una schermata e probabilmente un aspetto piuttosto secco (anche se probabilmente sarà marchiato con i colori della banca, ma avrà comunque una solida sensazione di business - se è fatta bene).

Tuttavia, probabilmente non troverai molte forme lì. Per quelli, potresti provare ad aprire un'applicazione online a una scuola di business (ad es. Harvard ). O applicazioni online per un visto americano, per cose che hanno a che fare con le tasse, praticamente tutto ciò che riguarda la burocrazia del governo.

Google Analytics è anche un buon esempio di app Web complessa, "noiosa" e ad alta intensità di dati.

1

Essendo la stagione delle tasse ... Turbo Tax mi viene in mente. Concedi, la sua interfaccia utente non è una singola pagina, ma non ho mai trovato nulla che faccia così bene nel semplificare quella che è essenzialmente una forma gigante da lui.

Concordo anche con Agib, analizzo, valuta i campi e crea un'interfaccia utente e una buona UX. Se un modulo compilato o più probabilmente campi compilati del database sono ciò di cui hai bisogno alla fine, questo può essere gestito a livello di codice dopo l'invio dei dati. Non torturare il tuo utente.

1
JDS

Sto lavorando su un progetto UX per riorganizzare un modulo suddiviso in più passaggi in una procedura guidata. Una cosa che stiamo aggiungendo è un indicatore percentuale su ogni pagina. Questo sarà fondamentale per rispondere a una serie di domande "fa la situazione x si applica a te" e mostrare condizionalmente gli input del modulo. Queste domande sono una base per indicare la percentuale di completamento. La nostra ipotesi è che otterremo un utilizzo più completo del modulo se offriamo all'utente un modo per sapere quanto sono lontani.

0
Duane Gran

Ritengo che non otterrai il 100% in modelli di app facilmente disponibili. La cosa buona è che prendi ispirazione e, come ha detto il signor Roland, implementalo con la tua app. In questo modo ottieni due cose. 1.Personalizzazione della progettazione dell'interfaccia utente secondo il requisito 2. Progettazione dell'interfaccia utente prospettiva prospettica.

0
user4209