Suggerimenti per layout applicativo

[daniele_dll]

Sto realizzando la UI per uno smartclient che dovrò sviluppare per un applicativo web che sto scrivendo. Nel tentativo di fare qualcosa di usabile stavo tentanto di costruire un layout che fosse user-friendly ma soprattutto che fosse "veloce" per l'utente.

In fondo c'è il link ad un immagine abbastanza esplicativa, volevo sapere cosa e dove posso sistemare, sia per la composizione grafica, sia per le accoppiate di colori e cosi via.

L'immagine non l'ho potuta allegare perché era grandicella e non volevo metterla visibile onde evitare di disintegrare il layout del forum L'ho realizzata con fireworks, ma quella online non contiene i vari livelli. Se vi serve ovviamente la uploado!

Considerate che tutto sono tranne un grafico

Ultima cosa: nell'immagine ci sono 3 aree chiamate Bottoni, UI Modulo, Operazioni eseguite spesso.
Queste tre voci stanno ad indicare che quelle aree sono variabili, infatti lo smartclient carica la grafica dall'applicativo web quindi attualmente quelle aree sono cosi giusto per indicare che li ci starà qualcosa.

gracias

------

Il link:
http://www.phpsoft.it/mystuff/upload...no-levels).png

[rebelia]

Originariamente inviato da daniele_dll
Nel tentativo di fare qualcosa di usabile...

l'unico sistema serio per valutare l'usabilita' di un'interfaccia e' farla testare a degli utenti e chieder loro di commentare nel modo piu' critico possibile

la parte grafica intesa come estetica - e so gia' che finiro' sbranata, considerando il luogo - e' del tutto secondaria rispetto al passaggio precedente, secondo me

edit: a ogni modo guardando l'immagine che hai postato la prima domanda che mi viene in mente e': l'orologio serve? magari si e forse me lo puoi spiegare, ma cosi' senza saperne di piu' mi sembra piuttosto gratuito

[daniele_dll]

Originariamente inviato da rebelia
l'unico sistema serio per valutare l'usabilita' di un'interfaccia e' farla testare a degli utenti e chieder loro di commentare nel modo piu' critico possibile

la parte grafica intesa come estetica - e so gia' che finiro' sbranata, considerando il luogo - e' del tutto secondaria rispetto al passaggio precedente, secondo me

edit: a ogni modo guardando l'immagine che hai postato la prima domanda che mi viene in mente e': l'orologio serve? magari si e forse me lo puoi spiegare, ma cosi' senza saperne di piu' mi sembra piuttosto gratuito

Eh lo so, il problema che realizzare la GUI per poi cestinarla totalmente mi farebbe perdere un sacco di tempo :| Infatti ho intenzione di trovare una linea generale da seguire per il layout, poi realizzarlo e farlo testare agli utenti tramite feedback

L'orologio l'ho inserito per 2 motivi:
1° L'angolo in alto a destra sarebbe rimasto parzialmente vuoto
2° L'ora del server spesso differisce da quella del sistema locale, l'orologio serve a questo

Anche se comunque l'ho messo più per il punto uno che per il punto due ... altrimenti l'interfaccia sta troppo scarna. Non che ora come ora sia un granché, però ho provato a toglierlo ed è ancora più brutta Se lo tolgo dovrei metterci qualche altra cosa li su

Per esempio una piccola variante è il mettere i bottoni previous e next accanto, sulla stessa riga, nella testata e poi allungare la toolbar delle operazioni preferite per tutta la larghezza disponibile.

[rebelia]

Originariamente inviato da daniele_dll
Se lo tolgo dovrei metterci qualche altra cosa li su

non sono d'accordo, personalmente lo trovo un elemento di disturbo: "rumore" inutile se non ha un'utilita' pratica

concentrati sulle cose essenziali, guarda che ci siano tutti i pulsanti per andare e tornare, che i testi siano chiari e che sia chiaro come uscire/tornare alla schermata precedente, come trovare l'help, che non ci siano pulsanti troppo piccoli ne' contrasto troppo poco accentuato e lascia perdere i riempimenti forzati

hai modo di "intervistare" persone che lavorano a programmi concettualmente simili e chiedere loro quali sono i punti di forza e quali i punti deboli di tali programmi? potrebbe tornarti utile... anche intervistare persone che lavorano a programmi completamente diversi, ma che per esempio non sono molto esperti di computer, cose simili

ah! e attieniti alle best practices: file e' ormai uno standard cosi' come il disegnino del carrello e la scritta home ed e' inutile inventare alternative o traduzioni che spiazzano e basta (ammesso che sia attinente, cmq e' giusto un esempio)

la parte puramente estetica (colori, pulsanti, extra etc) dev'essere coadiuvante a un sistema di navigazione gia' ben progettato e non un disturbo visivo che crea confusione, secondo me

[daniele_dll]

diciamo che il linea generale sono d'accordo, per quanto riguarda l'orologio un minimo di utilità pratica la ha, ovvero mostrare l'orario del server, però è l'ultima cosa di quelle che effettivamente servono

Questo smartclient serve per un pannello di amministrazione, di conseguenza tante funzionalità necessarie normali per un sito qui non devono finirci

Per quanto riguarda gli spostamenti avevo previsto sia l'avanti/indietro, sia il breadcrumbs, sia la possibilità, come accade ora con vista (credo che lo faccia anche mac os x), di premere su una freccettina che compare magari a destra del nome quando si ci sposta su per scegliere eventualmente un'altra opzione del modulo disponibile in quel livello, in modo da facilitare la navigazione

Per quanto riguarda i contrasti, avevo pensato apposta questi boxini con i bordi tondi per poter mettere un sfondo più chiaro in modo da far risaltare di più le scritte. Pensavo di metterli pure nel breadcrumb

Inoltre avevo pensato di mettere ai bordi del breadcrumb delle frecce di scorrimento che permettevano di scorrere tra i vari bottoni del breadcrumb avanti ed indietro se questo risultava più lungo dello spazio disponibile, cosi da facilitare ancora di più lo spostamento

Poi c'è anche il problema secondario, ovvero uno stile grafico moderno ma essenziale ... non troppo pesante o complesso perché deve essere si esteticamente bello ma non deve appesantire la lettura quindi colori non forti e abbastanza chiari per gli sfondi e per i testi colori più scuri che contrastino bene. Pensavo di cestinare l'impostazione grafica che avevo utilizzato e mettere più qualcosa stile plastic sia per la finestra di sfondo sia per i vari bottoni all'interno ... però rimanendo sempre su un'interfaccia grafica leggera

[cyberman]

Originariamente inviato da daniele_dll
Poi c'è anche il problema secondario, ovvero uno stile grafico moderno ma essenziale ... non troppo pesante o complesso perché deve essere si esteticamente bello ma non deve appesantire la lettura quindi colori non forti e abbastanza chiari per gli sfondi e per i testi colori più scuri che contrastino bene. Pensavo di cestinare l'impostazione grafica che avevo utilizzato e mettere più qualcosa stile plastic sia per la finestra di sfondo sia per i vari bottoni all'interno ... però rimanendo sempre su un'interfaccia grafica leggera

a me un po' pesantuccio pare :master:
I bordi, sia quelli contenenti il box che quelli che circondano i pulsanti avanti/dietro hanno uno spessore eccessivo. Mi muoverei tenendo un bordo più esile possibile (per capirci quello dei pulsanti sulla sinistra va più che bene).

Altro elemento che non mi sconfinfera è la scelta dei colori per l'interno del box: il rosa accesso lo vedo un po' troppo forte ed eventualmente un testo nero potrebbe peggiorrare la situazione (lo si vede anche adesso confrontando il testo che è sul rosa e il testo che sull'azzurro .."bottoni").
Proverei a giocare sul calssico tono-su-tono: hai usato azzurro e celeste per il resto del box, potresti usare qualcosa di azzurrino chiaro (tendente al bianco) oppuire direttamente il bianco per l'interno. In ogni caso molto dipende da quanto testo dovrai far comparire all'interno del riquadro, da quale grandezza avrà questo testo e da quanto tempo ci si impiega a leggerlo.
Eviterei infine di dare uno sfondo diverso al titolo (operazioni più usate): stesso problema del box e eccessivo rislato ripsetto al resto. Lascierei il test osenza sfondo magari dandogli un colore di risalto (al testo stesso), ad esempio usando l'azzurro dei bordi.

Per il resto c'è una discordanza di stili grafici che disturba un po'. Da un lato hai pulsanti in stile 2.0 dall'altro hai elementi alquanto spartani. Anche l'orologio potrebbe essere più aggraziato eliminando il bordo e lo sfondo, lasciando solo le lancette e i minuti la situazione potrebbe migliorare: cosi cattura troppo l'attenzione, distoglie dal resto perché è troppo in risalto rispetto agli altri elementi. Magari anche una ridimensionatina di qualche pixel potrebbe starci.

[daniele_dll]

Originariamente inviato da cyberman
a me un po' pesantuccio pare :master:
I bordi, sia quelli contenenti il box che quelli che circondano i pulsanti avanti/dietro hanno uno spessore eccessivo. Mi muoverei tenendo un bordo più esile possibile (per capirci quello dei pulsanti sulla sinistra va più che bene).

k

Altro elemento che non mi sconfinfera è la scelta dei colori per l'interno del box: il rosa accesso lo vedo un po' troppo forte ed eventualmente un testo nero potrebbe peggiorrare la situazione (lo si vede anche adesso confrontando il testo che è sul rosa e il testo che sull'azzurro .."bottoni").......

quelle aree stanno li solo per indicare che quello spazio sarà riempito da qualcosa dopo

Per il resto c'è una discordanza di stili grafici che disturba un po'. Da un lato hai pulsanti in stile 2.0 dall'altro hai elementi alquanto spartani. Anche l'orologio potrebbe essere più aggraziato eliminando il bordo e lo sfondo, lasciando solo le lancette e i minuti la situazione potrebbe migliorare: cosi cattura troppo l'attenzione, distoglie dal resto perché è troppo in risalto rispetto agli altri elementi. Magari anche una ridimensionatina di qualche pixel potrebbe starci.

si infatti, pensavo di fare il breadcrumb come i bottoni a sinistra, uno per parola, senza freccettina nel mezzo, e quando si ci sposta su il bottone dello spezzone del breadcrumb si allarga e fa comparire una freccettina che cliccandoci su mostra un menu per spostarsi all'interno della sequenza dei moduli con celerità

gracias :smak:

A dire la verità stavo vedendo di ristrutturare un po tutta l'interfaccia grafica, mantenendomi però, come toni, sempre sull'azzurro/celestino et simili

Oggi pome posto il nuovo layout. L'ho un po rivoluzionato, l'ho fatto un po più simile ad un browser, anche se comunque un browser molto semplice, per non far impazzire chi lo usa.

L'orologio lo lascio, ma lo metto in fondo a destra, piccolino, sulla barra dello stato

[daniele_dll]

Nel frangente pausa pranzo, correndo assai, oggi ho ultimato il layout

http://www.phpsoft.it/mystuff/upload...no-layers).png

Come ho detto prima ho cercato di mantenere il layout di un browser, seguendo un po il consiglio di rebelia, in modo di fornire un interfaccia già conosciuta all'utente che utilizza lo smartclient (l'applicativo)

Le icone in alto a sinistra, cosi come la seconda barra che è la barra dei preferiti, avranno un ombra di sotto che quando si ci sposta su sparisce e compare l'effetto luminoso di sotto

Ho usato le icone di nuvola, uno dei temi per gnome [linux].

Sicuramente può essere notevolmente migliorato:
- nel footer i boxini contenenti il testo e le icone sono troppo pesanti
- il testo nel footer non si intona molto bene
- i box di ricerca e del breadcrumb mi sembrano troppo scarni
- il font, in generale, a parte le iconcine in alto a sinistra, non credo si adatti molto bene al layout
- infine il colore del testo ... per adesso è un blu oceano scuro, ma non mi piace molto, anche perché in alcuni punti uso pure il grassetto [dashboard/preferiti/messaggi di stato] ma stona abbastanza

Queste sono un po le cose che ho visto che stonano ... altro da sistemare secondo voi? ovviamente i consigli sono ben accetti

La prima cosa che devo sicuramente fare è ridurre la dimensione delle icone, da 16 a 12, e ridurre quindi i box, cosi come anche il testo va ridotto, in modo da mostrare il footer di più

Se volete fare qualche prova, ho la png di fireworks che posso convertire anche in psd :P

[rebelia]

gia' mejo

[daniele_dll]

Originariamente inviato da rebelia
gia' mejo

immagginavo

quella ... riguardandola ora ... faceva estremamente schifo, per essere educati

http://www.phpsoft.it/mystuff/upload...no-layers).png

qui ho sistemato le dimensioni dei font, qualche colore, i boxini del footer, la dimensione delle icone e l'altezza del footer stesso

devo solo trovare ora, a parte magari un font migliore, come sistemare i box di ricerca e breadcrumb

per il resto, tutto sommato, credo che vada bene, no?

edit:

ho notato solo ora di aver lasciato la scritta dashboard al posto della scritta preferiti

Ah, e mi sono dimenticato che devo disegnare la barra di scorrimento