08/11/2016
Quando progettiamo per il web design lo facciamo per un cliente che deve fruire un messaggio ad altre persone.
Il design pattern è il modo formale di descrivere una soluzione a una problematica, in un determinato campo di applicazione. Abbiamo delle necessità e produciamo una soluzione visiva, è l'elemento grazie al quale l'azione viene svolta. Forniamo una soluzione visiva per risolvere la problematica con cui deve interagire.
Applicati al web si possono classificare come:
- navigation pattern (navigazione o orientamento): dobbiamo sempre far capire dove sta andando l'utente.
- action pattern (azioni): che tipo di azione sto compiendo all'interno della mia piattaforma? a seconda della tipologia si dà una forma specifica per l'azione.
- social pattern (interazioni): pattern che servono per mettere in comunicazione l'utente con la piattaforma, come le zone di commento, chat live ecc...
Top navigation: è la navigazione solitamente posta all'interno dell'header nella massima posizione raggiungibile in termini di elevazione. Contiene le pagine principali e tramite animazione può veicolare altri contenuti utili a fini della navigazione.
Sub-header: si affianca alla navigazione principale (top navigation). Inoltre nella top navigation si aggiunge il search che aiuta nella ricerca del contenuto del sito.
Left-navigation: navigazione che ci consente di fare azioni in maniera fissa all'interno della nostra piattaforma. Possiamo accorpare questo termine con la site bar, ma è un errore perchè abbiamo una site bar di destra dove vengono aggiunti widget e a volte abbiamo una site bar che contenga il menù e altre voci. La funzionalità deve essere visibile.
Tab navigation: ci consente di avere all'interno di un dato spazio tanti elementi che vengono attivati solo se presi in causa. Tutte le informazioni sono già presenti nel sito, non sono utilizzate per siti che non si spostano e che non prevedono tante voci. Deve essere una navigazione abbastanza sintetica. Può essere elemento di navigazione ma anche approfondimento di tale elemento, es. in un sito universitario è presente la sezione dei diversi anni con le diverse materie divise per primo, secondo o terzo anno.
Dropdown menù: porta avanti il secondo livello o meno del menù principale. É simile a una lista che ci permette di scegliere un valore da una lista.
Pagination: non è una funzione basilare, è quell'elemento che ci permette di spostarci una volta che abbiamo visualizzato una lista di contenuti e dove ne sono presenti altri. Consentono all'utente di proseguire e di trovare il contenuto, le pagine sono accomunate da qualcosa. La paginazione va utilizzata solo in alcuni casi, l'utente vuole scorrere la pagina, creiamo questo elemento solo in casi dove il contenuto è molto.
Breadcrumbs zone: area dove viene mostrato all'utente il percorso svolto per arrivare alla pagina attuale. Consente di ripercorrere i miei passi. L'utente deve essere in grado di tornare indietro, è importante mantenere l'interazione tra le decisioni fatte prima ma è importante anche mostrare che si può tornare indietro di uno o più passi. Se un sito è ben strutturato non c'è bisogno di utilizzare le freccine del browser. Fornire differenti modalità per compiere un'azione che l'utente vuole portare a compimento.
Hamburger menù: il menù a hotdog o hamburger è un bottone in un'interfaccia grafica che ha un'icona che consiste in 3 linee parallele orizzontali. Ci consente di visualizzare il menù, che sia posto in diverse posizioni, ci apre sempre il menù tramite il quale possiamo navigare nel sito. Ci sono differenti modi di progettare un sito, a partire dal menù.
All page menù: viene utilizzato nei casi in cui il menù non deve interferire nella pagina, quando poi viene cliccata la voce menù esso appare a tutta pagina.
Complex load screens: quello che si sta facendo ora è che il caricamento della pagina non diventi noioso, l'utente durante questa attesta vede già qualcosa. Questa load screen consentono una volta che l'esperienza di caricamento sia finita, di fruire tutto il contenuto del sito. Questo elemento permette di iniziare a capire con cosa sto per avere a che fare senza diventare noioso.
Altri esempi:
- skinny menù: grande predominanza della pagina e con lo scroll diminuisce.
- front-page carousels: è una serie di immagini che scorrono in sequenza, sono o animate o che possono essere chiamate in azione dall'utente;
- parallax scrolling
Individuare ogni scopo e ogni funzione dei pattern ci aiuta a focalizzarci sul contenuto e sulla modalità. É indispensabile riconoscere le parti del sito per ridisegnare un sito, analizzare l'homepage, ricordarsi che l'utente interagisce con molti elementi.