ELEMENTI. dell'interfaccia utente. Contenitori Contenuti Patterns

Transcript

1 ELEMENTI dell'interfaccia utente Contenitori Contenuti Patterns

2 Aree di una pagina web Il layout di un interfaccia è generalmente suddiviso in tre aree principali: 1. intestazione (header) 2. area principale suddivisibile in contenuto principale e barra laterale (sidebar) 3. piè di pagina (footer)

3 Aree di una pagina web

4 Contenitori Tabelle Accordion Tabs

5 Contenitori tabelle

6 Contenitori tabs

7 Contenitori accordion

8 Contenuti Contenuti testuali Titoli Paragrafi Liste Links Contenuti multimediali Background video Slider Gallery Lightbox Carousel Mappe Hero images

9 Contenuti contenuti testuali: titoli, paragrafi, liste, link

10 Contenuti mappe

11 Contenuti Multimedia: hero images

12 Contenuti Multimedia: background video

13 Contenuti Multimedia: sliders

14 Contenuti Multimedia: gallery

15 Contenuti Multimedia: lightbox

16 Contenuti Multimedia: carousel

17 Interazione Checkbox Radio button Button Dropdown list Switch Toggle Campi testo Trackbar Campi data/ora

18 Interazione Checkbox elemento che permette all utente di indicare una scelta multipla

19 Interazione Radio button elemento che permette all utente di indicare una scelta univoca

20 Interazione Switch elemento che permette all utente di scegliere un settaggio on/off

21 Interazione Toggle famiglia di elementi che permette all utente di impostare un settaggio

22 Interazione Button elemento che permette all utente di compiere o completare un azione

23 Interazione Dropdown list elemento che mostra all utente una lista di opzioni in forma compatta e gli permette di indicare una o più scelte

24 Interazione Campi testo elementi che permettono all utente di inserire un testo

25 Interazione Track bar elemento che permette all utente di impostare un valore (es. audio)

26 Interazione Date picker elemento che permette l utilizzo e delle funzioni calendario e orologio

27 Navigazione Barre di navigazione Campi di ricerca Filo di Arianna (breadcrumbs) Paginazione Tag Icone

28 Navigazione Barre di navigazione Elementi strutturali che permettono all'utente di muoversi nell'interfaccia

29 Navigazione Campi di ricerca elemento che permette l utente di compiere una ricerca utilizzando parole chiave (query)

30 Navigazione Icone strumenti di navigazione universali e immediati

31 Navigazione Icone strumenti di navigazione universali e immediati

32 Navigazione Filo di Arianna (breadcrumbs) elemento che rende noto all utente la posizione di un contenuto all interno di un sito

33 Navigazione Paginazione elemento che suddivide il contenuto in più pagine e agevola la navigazione dell utente

34 Navigazione Tag attributo associabile ad un contenuto che ne arricchisce il signifi cato e ne facilita la reperibilità

35 Informazione Notifi che Barre di avanzamento Pop-up (modal window) Tooltip

36 Informazione Notifi che messaggio che comunica un aggiornamento o una novità

37 Informazione Barre di avanzamento elemento che indica lo stadio in cui l utente si trova durante un l esecuzione di un comando

38 Informazione Pop-up (modal window) elemento che richiede l attenzione dell utente bloccando momentaneamente l accesso alle normali funzionalità di un sistema

39 Informazione Tooltip Piccola fi nestra di aiuto che compare passando con il mouse su un elemento, per indicarne la funzione