Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

mercoledì 6 novembre 2013

Web design nel dettaglio

costruttivismo metodo web design
E pensare che all'inizio quando ho deciso di inaugurare la nuova categoria Web design pensavo che per descrivere il mio metodo sarebbe stato sufficiente un solo post....e ho fatto persino una cernita in cui ho deciso di riportare solo l'attività senza essere troppo pernicioso....comunque questo post dovrebbe essere quello che fa da chiusa a questo topic e che se tutto va bene dovrebbe assolvere allo scopo di andare a focalizzare la parte pratica.

Quindi rock and roll!

Nel precedente post parlavamo di come il web design ponga delle sfide continue tra rompicapo vari perciò se nel dettaglio dobbiamo entrare tocca spiegare in cosa consistono analizzandole più da vicino queste tipologie di sfide.

Eh ehe la lente d'ingrandimento l'ho appoggiata apposta sull'immagine di questo post... vediamo cosa succede nel momento in cui la puntiamo su un qualsiasi elemento di una pagina/layout web. Anche se può sembrare un back to the future dopo quattro post sull'argomento perdonatemi se recupero il layout di Blogger per esemplificare.

Potrei anche adoperare uno dei siti web che potete trovare Qui-nel-mio-Portfolio per fare i raffronti e quindi avete l'occasione giusta anche per sbugiardarmi o per approfondire....decidete voi.

Bene finita la neanche tanto sottile arte della delega se vi ricordate avevo definito il metodo Domino scalabile sotto intendendo la duplice attività di costruzione e di analisi durante la fase di de-costruzione parallela allo scrolling della pagina emulando come l'occhio legge la pagina in tutt'2 i versi ovvero prima dall'alto verso il basso che poi viceversa.

Senza star ad enucleare le ultime novità relative la facilitazione della navigazione con la relativa snellezza del design che ne deriva (come i menù che seguono lo scrolling della pagina posti in cima ed altre soluzioni da farsi con poche righe di codice) questo post tratta un banalissimo metodo da intraprendere nel momento in cui vi trovate ad affrontare due fasi progettuali: una in cui dovrete fare una cernita tra un numero tot di Widget al fine di stabilire quali sono quelli più confacenti per conseguire gli obiettivi/finalità prefissati e l'altra in cui vi troverete a posizionarli in una posizione ben precisa all'interno del layout.

Mentre per la prima avete una maggiore libertà di scelta la seconda presenta sia posizionamenti conformisti/convenzionali come ad esempio dove posizionare un'intestazione
(header) o un footer in cui la scelta da fare è obbligata sia altri che invece lasciano spazio ad un'attività di progettazione.

Quest'ultima proprio perché libera da scelte obbligate è creativa e da non sottovalutare in quanto sarà proprio la differenza tra le scelte deputate al caos quelle conformi e quelle originali/creative a fare la differenza tra avere un design che non serve ad un bel niente ad uno che sviluppa servizi standard ed ad un altro funzionale/personalizzato.

Riprendendo il discorso/percorso che ho tracciato nei precedenti post sul web design se non vi ho creato confusione spero di non farvi compiere un salto se vi chiedo di immaginarvi già nella fase in cui dopo aver de-costruito vari Siti Web e Blog e aver fatto sufficiente auto-formazione per maneggiare e manipolare anche se pur ad un livello basico qualche riga di codice HTML ed aver fatto la cernita/selezione degli widget e quindi aver stabilito quali eleggere a prediletti vi trovate ad affrontare la successiva(fase) in cui non vi resta che....posizionare il tutto sul vostro foglio bianco che poi nel caso di Blogger in verità consiste nel lavorare sul modello attraverso il drag e drop.

Nel momento in cui vi trovate a posizionare gli elementi il dualismo funzionalità-accettabilità estetica è il primo comandamento a cui assolvere e che ci pone la prima sfida non indifferente nella progettazione poi dopo aver svicolato e preso fiato con le scelte conformi/convenzionali siamo investiti da una successione di altre sfide che di norma sono date dalle scelte che sono basate sulla funzionalità data dal posizionamento.

In altri termini scusandomi per le eventuali imprecisioni/ripetizioni data la difficoltà dell'argomento intendo quali problematicità si verificano nel momento in cui decisi gli widget ed aver affrontato la prima risoluzione delle tensioni dovute all'equilibrio dato dalla somma degli elementi dal punto di vista estetico si passa alla risoluzione di quello strumentale/funzionale.

Per evitare il solito elenco puntato ho pensato di usare un'immagine per aiutarmi nella spiegazione e spero a sua volta di riuscire ad aiutarvi nella comprensione:

Attività di Problem solving dei processi decisionali relativi al posizionamento:

sfide web design compromesso estetico funzionale
Dallo schema sovrastante che rappresenta il ventaglio di scelte possibili nel momento in cui si posizionano più elementi sulla pagina web e la tipologia di problematiche che deriva dai rapporti di interdipendenza il designer deve far derivare infine una scelta che può centrare un solo punto di quelli citati/raffigurati come il contemplarne anche più di uno.

Gli equilibri alle volte possono essere concomitanti altre rafforzativi altri perfino esclusivi le scelte pur derivando da un impegno riflessivo da parte del progettista non hanno limiti creativi se non quelli dettati dall'usabilità e l'accessibilità(ricordandosi la precedenza data al target)

Analizziamo con il solito elenco puntato le scelte riportate dallo schema dell'immagine in senso orario partendo dalle ore 00:

  • Ripetizione: Trattasi dello spiacevole caso in cui un elemento(barra widget nel caso di Blogger o zona convenzionale tipo Header e Footer) è la ripetizione di uno già presente. Non è detto che sia un errore a seconda dei casi adoperarlo a livello strategico ma solitamente se l'attenzione dell'occhio atterra su vari punti per volta perché sprecare l'attenzione per una ripetizione?
  • Sostituzione: la funzionalità strumentale di un determinato elemento potrebbe essere sostituito da un altro elemento che svolge lo stesso compito ma con un media differente per esempio uno slide show con una scritta testuale scorrevole ma potrebbero anche sussistere entrambe e canalizzare l'attenzione con due scopi differenti e quindi essere sia compatibili che entrambi sostenibili.
  • Comunanza: due elementi possono stare bene vicino insieme come generare interferenza Estetico/Funzionale per esempio se un elemento è fortemente visivo potrebbe distogliere l'attenzione da uno testuale o semplicemente possono risultare distonici a livello estetico o disarmonici.
  • Delega: valutare bene gli elementi può far trapelare più similitudini di quante se ne pensi possibili per esempio alcuni widget ne integrano altri ma la loro funzionalità/usabilità può essere considerata alla pari? Inoltre alcuni elementi possono fare funzioni per le cui non sono nati ma assumere la delega di altri esistenti un esempio può essere aver usato come ho fatto in Blogger le categorie come pagine.
  • Rafforzamento: alcuni elementi possono rafforzare l'azione di altri; creare dei percorsi e manipolare l'attenzione attraverso il loro uso congiunto come ho fatto usando la scritta scorrevole che guida all'ascolto dell'avatar finalizzato alla riduzione dei tempi di navigazione.

  • Scalabilità: pensare ad alcuni elementi che siano scalabili nella pagina e che perciò consentano una navigazione più facile e più agile come per esempio le icone ripetute nel footer o il menù che scende contemporaneamente con lo scrolling della pagina o come usi ritenuti attigui ad altri elementi e perciò che seguono l'andamento scalabile o dall'alto verso il basso post caricamento che viceversa durante la navigazione a seguito del primo click.
  • Cross-mediale: usare più media rispettando i limiti dell'overload cognitivo sempre che non si tratti di arte o di siti sensazionalisti per assolvere il punto della delega o della sostituzione.
  • Manipolazione: gli elementi possono essere progettati sia singolarmente ma soprattutto attraverso un prodotto derivato dalla visione d'insieme oltre a generare servizi strumentali per creare veri e propri percorsi con cui manipolare l'attenzione per conseguire meta-finalità anche non convenzionali.

 CONCLUSIONI 
Sicuramente ho tralasciato alcuni punti ed altri non hanno la giusta definizione e devo ammettere che non mi sono impegnato più di tanto in questo senso...lo scopo del post era enucleare un tot di scelte-problem-solving che si presentano anche nel momento in cui si devono assemblare o personalizzare dei prodotti con il drag e drop o con widget già realizzati....certo è vero talune volte ci sono i plugin ma non è detto che siano poi la strada più semplice da percorrere pur se divertente come spesso accade a chi sceglie il famigerato WordPress anziché Blogger.

In questo Post abbiamo comunque trattato le casistiche in cui vengono montati/assemblati più prodotti già realizzati per raggiungere un unico prodotto con funzionalità diverse e personalizzate attraverso una visione d'insieme mentre il discorso cambia quando nonostante la progettazione si creano degli ostacoli realizzativi dati dai più disparati fattori che possono essere di natura informatica o per compromessi estetici non equilibrati che detto in parole più semplici equivale al momento in cui volete perseguire un certo obiettivo estetico/funzionale ma le soluzioni che adottate non vi soddisfano.

Nel momento in cui vi trovate in queste situazioni vi trovate a sostenere delle autentiche SFIDE in un percorso fatto di prove e tentativi in cui l'unico santo a cui votarsi è la creatività;

 alle volte si riesce ad essere originali altre ad accettare il compromesso e forse il bello di fare questo tipo di progettazioni è proprio questo che spinge continuamente ad esplorare nuovi orizzonti..

...si okkei da come suona potrebbe sembrare ma non è una roba esotica!