Errori di grafica sui siti web – Improvvisare il Layout che compone il sito

L’utente che arriva nel tuo sito non deve essere solo attratto ma deve rimanere e leggere i tuoi contenuti. Per questo è importante progettare al meglio la composizione del layout della pagina.

Generalmente quando navighiamo sulla rete effettuiamo una scansione molto rapida con gli occhi alla ricerca di contenuti che ci possono interessare.

Puoi strutturare i tuoi contenuti principalmente in due modi:

F-Layout: Posizionare i contenuti seguendo la forma della lettera F, quindi posizionare il logo e le informazioni più importanti in alto (prima barra della lettera F). In secondo piano la descrizione di ciò che fate o ciò che vendete (seconda barra della F) e il restante sviluppato in colonne verticali.

Z-Layout: Posizionare i contenuti seguendo la forma della lettera Z, seguendo quindi il movimento standard dell’occhio umano. Per posizionare i contenuti basta seguire una Z immaginaria: logo in alto a sinistra, menu di navigazione e form di ricerca, lungo la diagonale è possibile inserire un’immagine e successivamente altri contenuti rilevanti nella seconda barra della Z.

Errori di Grafica sui siti web – Distrarre l’utente con le icone social

Le icone social non dovrebbero mai distrarre i tuoi visitatori, lettori, acquirenti o studenti. Se li portano al di fuori del sito – e non rientrano – questo è un bel problema. Ricordati di focalizzare sempre l’attenzione dell’utente sui contenuti che produci, e non su parti funzionali e/o accessorie alla loro visualizzazione. Se dai ai tuoi utenti troppi link che portano al di fuori del tuo sito, stai dando loro motivo di andarsene in fretta!

Errori di Grafica sui siti web – Puntare tutto sulla Bellezza

Si, lo so che vorresti fosse così, ma su questo punto devo deluderti: la bellezza di un sito web non ha nulla a che vedere con la sua qualità o bontà ai fini del business. Invece di strafare con gli effetti grafici ed abbellimenti visivi, il consiglio migliore che io posso darti in questo senso è: punta alla fruibilità e alla facilità di navigazione.

I tuoi contenuti devono essere facilmente accessibili da chiunque desideri conoscerti meglio – e magari entrare in contatto con te. Punta non ad essere originale, almeno all’inizio, e concentrati sul permettere a tutti gli utenti meno competenti di poter arrivare a te, ai tuoi servizi e prodotti.

Errori di Grafica sui siti web – Non scegliere i colori con attenzione

Nella realizzazione del tuo sito web devi tener conto dei colori che utilizzerai nelle pagine.
I vari colori suscitano differenti emozioni negli occhi di chi li osserva e generano un diverso indice di gradimento da parte degli utenti e sulla loro esperienza di navigazione.

Secondo la cromoterapia, i colori aiuterebbero il corpo e la psiche a ritrovare un loro equilibrio, e avrebbero effetti fisici e psichici in grado di stimolare il corpo e di guarirlo addirittura da alcune patologie. All’inizio della progettazione la scelta dei colori è legata anche al buon senso, cerca di armonizzare il tutto, assicurati di utilizzare un buon contrasto tra lo sfondo e i testi in modo da aiutare la navigazione.

Devi sempre considerare che l’occhio umano si affatica maggiormente davanti ad un monitor (desktop o mobile) rispetto ad un foglio di carta, quindi una buona scelta porterà vantaggi anche nel lato SEO perché un aumento di permanenza nel tuo sito si tradurrà in un contenuto di qualità per Google. Se hai già un logo attieniti alla palette colori che stanno bene con esso, non utilizzare più di 3-4 colori.

Secondo la cromoterapia, i colori aiuterebbero il corpo e la psiche a ritrovare un loro equilibrio, e avrebbero effetti fisici e psichici in grado di stimolare il corpo e di guarirlo addirittura da alcune patologie.

Errori di Grafica sui Siti Web – Ispirare poca fiducia

Il design del tuo sito web è l’elemento che l’utente analizza per farsi un’idea dell’autorevolezza del brand, quindi occhio all’immagine che trasmetti di te o della tua azienda e attenzione ai dettagli: per esempio, il logo aziendale deve essere sempre ben esposto e leggibile, non utilizzare “finte” foto stock.

La mancanza di semplicità rende i siti inaccessibili dalla maggior parte delle persone di una certa età. Ricordati che le persone anziane sono in rapida crescita degli utenti della rete. Prima di surfare la rete, fai un check e ricontrolla tutte questi piccoli dettagli e scopri se hai le carte in regola per presentarti al meglio ai tuoi clienti. E se verificando ti accorgi che c’è margine di miglioramento, metti subito in pratica quanto prima tutte le indicazioni che ti ho fornito!

Errori di Grafica sui Siti Web – Sottovalutare l’importanza dell’aspetto visivo (con Jennifer Chen)

Uno studio accademico molto interessante che Jennifer Chen scrisse nel luglio 2009: riguarda il modo in cui l’estetica influisce sull’atteggiamento delle persone che visitano i siti web. Ti invito a dargli un’occhiata e, se mastichi l’inglese, a leggertelo tutto.

Ne emerge che i potenziali clienti giudicano l’azienda dalle connotazioni visive con cui essa si comunica in rete. Ecco perché il lavoro deve essere bello e piacevole da guardare oltre che, naturalmente, usabile e tecnicamente rispettoso di alcuni standard importanti.

Ecco il testo integrale. Se ti interessa consultare la fonte, eccola:

The Impact of Aesthetics on Attitudes Towards Websites
Jennifer Chen – Wednesday, July 1, 2009

A user’s perception of a Web site can evoke a wide range of emotions and attitudes. These emotions and perceptions impact the user’s attitude towards the Web site’s content, advertised products, company, credibility and site usability.
The design and presentation of a Web site is strongly visual and users are known to make aesthetic judgments of a site very quickly. As the Web site likeability and credibility increases so does the likelihood of purchasing from the site. Since the site’s aesthetics can influence brand perception and credibility, the importance of design and color treatments must be considered.
Research by Khuang, et al., (2001) and Park and Jung (2001) demonstrated that emotion can increase the value of physical products such as houses and cars. Emotion can also influence a user’s memories of products and their purchasing decision processes (Kim, Lee & Choi, 2002). The history of traditional media’s use of emotions to build brand equity and loyal customers is well known. Marketers know that their most loyal customers are those with an emotional connection to their brand.

Defining Aesthetics and Emotion
Aesthetics is commonly known as the study of the mind and emotions in relation to the sense of beauty. More broadly, scholars in the field define aesthetics as a critical reflection on art, culture and nature. Aesthetics deals with notions such as the beautiful, the ugly, the sublime, or the comic, as applicable to the fine arts.

Aesthetic judgments involve many issues. They can be culturally conditioned, linked to emotions, and at least partly intellectual and interpretative. It is difficult to measure the relationship between aesthetics and emotions because of their abstract nature and creating a metric for aesthetics has been difficult.

Cognitively, it is unclear whether the concept of beauty is due to pre-attentive processing or to cognitive judgments. Pre-attentive processing is the awareness of an item before the person thinks about or focuses any real attention on the item (i.e., awareness preceding user’s focused attention). Cognitive judgments are evaluations of an item based on a person’s previous experiences with other similar items. The resulting judgments may have nothing to do with the item (i.e., user’s current evaluation is based on previous experience).

Users make judgments of the visual appearance of a Web site very quickly and those judgments are very consistent over time. Lindgaard, et al., (2006) found that Web site impressions were reliably formed within 50 seconds, were reliably consistent between people, and were held consistent over time.
Lindgaard asked participants to view 100 Web sites presented in a randomized order and then to rate each site for visual appeal. Lindgaard had the participants view and rate the same 100 sites in two separate sessions. Participants viewed each page for 50 seconds and then rated the visual appeal of the page.
Results showed that the participants’ rating scores were highly correlated between sessions. That is, participants’ visual appeal ratings were reliably consistent across both sessions. Since impressions were made in a short exposure time (less than a minute/page), it is likely that participants were making aesthetic judgments with minimal information and little conscious reflection or thought.
Effects of User Motivation and Interest
Consumer product involvement is widely recognized as an important variable that is taken into consideration in advertising. This product involvement influences the buyers/user’s decisions and information-seeking processes (Dahlén, Rasch, & Rosengren, 2003). Successful Web site design is influenced by the product type and the viewer’s motivation level.
The type of product a viewer is interested in influences the type of information-gathering processes the individual uses. High-involvement products are subject to a large amount of information-seeking and conscious, rational decisions. For example, a car is an example of high-involvement because of its high cost, high utility, and the number of similar models that are available. Buyers will research the cars of interest and take a long time to make a decision.
Low-involvement products are usually inexpressive products characterized by affective purchase motives, for example, gum. Gum is inexpensive, has low utility, and little differentiation within the market. The buyer spends little time researching gum and will use gut feelings toward the brand of choice.
The Elaboration Likelihood Model of persuasion describes how a consumer’s interest level affects message elaboration and brand perception. The model suggests that consumers engage in one of two decision-making routes, either low- or highly-motivation.
Differences in preference for low- vs. highly-motivated users suggest that Web sites should address the motivation and interest levels of their users. Highly-motivated individuals will evaluate the information content of a product using a rational, conscious approach (Dahlén, Rasch, & Rosengren, 2003).
Low-motivated individuals will pay less attention to the core informational content and are swayed by peripheral cues such as the quantity of information. Kang and Kim (2006) demonstrated that the quantity of content was an indicator of informativeness only for low-interest individuals. The low-interest users considered entertainment and informativeness as equally important. Whereas, the high-interest individuals did not compare informativeness to entertainment.
Aesthetics may be less important for high-interest than for low-interest individuals. Emotion type would also differ. Low-interest individuals would favor a heuristic, ‘feel good’ Web site while high-interest individuals would favor a site that stimulates positive emotions only after rational consideration.

Web site Complexity
The complexity and amount of information presented on a Web site can influence the effectiveness of the site’s communication and the user’s perceptions of the site. Too much content or too little content can drive users away.
Berlyne (1960) described complexity as “the amount of variety or diversity in a stimulus pattern.” Complexity increases with the number of distinguishable elements, how dissimilar the elements are, and the number of elements that do not appear as a unit.
A medium level of complexity affords optimal communication effectiveness (Geissler, Zinkhan, & Watson, 2006). Low to moderate complexity facilitates feelings of pleasantness whereas high complexity stimulates feelings of interest (Stevenson, Bruner, & Kumar, 2000).
Stevenson, et al., (2000) asked participants to rate Web sites varying in complexity by:
Attitude toward the commercial
Attitude toward the company
Purchase intention
Attitude toward the Web site
Participants rated complex sites low in attitudes toward the commercial, company, and the site, and also purchase intention. It seems that visual complexity affects the viewer’s attitude toward the company, advertisement and Web site, and whether they will purchase an item.
The primary elements that Web designers use to communicate with users include home page length, graphics, links, text, and animation. Geissler, et al., (2006) demonstrated that home page length, number of graphics and links, amount of text, and use of animation impacted perceptions of complexity.

Perceptions of Credibility
Web site design influences perceptions of trust, and lack of trust has been shown to impact online sales. Karvonen (2000) reported that Internet users admit to making intuitive, emotional, on-the-spot judgments when shopping online based on perceptions of the merchant’s Web site. Research by Kim and Moon (1998) demonstrated that clipart and overall color layout impacted Web site trustworthiness. They found that three-dimensional, dynamic pastel colored clipart covering at least half the screen enhanced trustworthiness.
Karvonen and Parkkinen (2001) suggest that using high-quality, well-chosen photographs generate consumer confidence.
Photographs of people can induce trustworthiness by adding a ‘human touch’ but viewers with pre-existing low levels of general trust may see these as a manipulative ploy. Geissler, et al., (2006) found that both Web designers and Web user focus groups agreed that a Web site appeared incomplete and less credible and less complex if the site did not provide information about who they are, what they did, and a way to contact them.

Other variables impacting perceptions of credibility include the following research results: Lightner (2003) found that overuse of graphics damages perceptions of professionalism. Wang & Emurian (2005) found that simplicity and consistency facilitate accessibility and navigation and these are characteristics of a trustworthy site. Flanagin & Metzger (2007) found that offering information and news relevant to advertised products may enhance perceptions of credibility.

The Impact of Usability on Aesthetics
Social psychology has shown that physical attractiveness is associated with a wide range of socially desirable characteristics. Perceptions of usability are also affected by perceptions of aesthetics.
Unfortunately, research has demonstrated mixed results for the relationship between perceptions of aesthetics and usability. Tractinsky et al., (2000) found that post-use perceptions of both aesthetics and usability were affected by pre-use perceptions of aesthetics.
Thüring and Mahike (2007) found that although aesthetics had a main effect on emotional valence and physiological arousal, there was no interaction between usability and aesthetics. But they did find that usability is more important than aesthetics when comparing satisfaction ratings for the use of product.

Conclusion
A user’s perception of a Web site can evoke a wide range of emotions and attitudes. There is no question that aesthetics can influence important factors related to online purchasing decisions such as attitude toward the company, credibility, and motivation. Emotion has played an important role in capturing and keeping the public’s attention in traditional marketing, and it will continue to play an important role for online companies that want to build a personable and trustworthy face on the internet.

References
Dahlén, M., Rasch, A., Rosengren, S. (2003). Love at first site? A study of Web site advertising effectiveness. Journal of Advertising Research, 43, 1: 25-33.
Flanagin, A.J. and Metzger, M.J. (2007). The role of site features, user attributes, and information verification behaviors on the perceived credibility of web-based information. New Media & Society 9, 2: 319-342.
Geissler, G.L., Zinkhan, G.M., and Watson, R.T. (2006). The influence of home page complexity on consumer attention, attitudes, and purchase intent.Journal of Advertising, 35, 2: 69-80.
Kang, Y., and Kim, Y.J. (2006). Do visitors’ interest level and perceived quantity of web page content matter in shaping the attitude toward a Web site?Decision Support Systems, 42: 1187-1202.
Kim, J., Lee, J., and Choi, D. (2003). Designing emotionally evocative homepages: an empirical study of the quantitative relations between design factors and emotional dimensions. International Journal of Human-Computer Studies, 59: 899-940.
Lindgaard, G., Fernandes, G., Dudek, C., and Brown, J. (2006). Attention web designers: You have 50 milliseconds to make a good first impression!Behaviour & Information Technology, 25, 2: 115-126.
Stevenson, J.E., Bruner II, G.C., & Kumar, A. (2000). Journal of Advertising Research 20, 1: 29-34.
Thüring, M. and Mahike, S. (2007). Usability, aesthetics and emotions in human-technology interaction. International Journal of Psychology, 42(4): 253-264.

Errori di Grafica sui Siti Web – Scegliere un tema grafico solo “perché è bellissimo”!

Prima di scegliere un template solo perché graficamente ti sembra bellissimo non è mai un’ottima scelta per un sito web di successo. Prima di tutto definisci su un foglio di carta quali sono i tuoi scopi e quale sarà l’architettura base che conterrà le principali pagine web del tuo sito.

Per riuscire al meglio ed esaltare le caratteristiche che rendono unico il tuo servizio o prodotto e tutto ciò che vuoi far emergere con il tuo sito web al tuo potenziale pubblico, devi abbozzare la struttura a tavolino e di conseguenza le pagine del menù di navigazione. Prendi un foglio e una matita e prova a cimentarti con una struttura basica, ti aiuterà a capire come potrà essere il tuo sito.

Non agire d’impulso a scaricare il primo template che trovi affascinante. Il tuo sito merita molto di più di una semplice e veloce analisi estetica. Non lasciarti fuorviare da temi accattivanti che sono adatti magari ad un’attività di shooting fotografico se il tuo scopo è quello di creare un sito web per il tuo agriturismo biologico; oltre alla tipologia di tema diverso, non considerare la particolare formattazione sarebbe un grave errore per quello che è la sua finalità.

Aggiungeremo inoltre ulteriori problemi legati allo sviluppo e integrazioni con i vari plug-in e codici sorgente.

Errori di Grafica sui Siti Web – Realizzare una Grafica Disarmonica tra Sito e Pagine

L’armonia degli elementi in una pagina web è uno degli elementi fondamentali che determinano la permanenza di un utente nel sito. Il design professionale del sito web deve deliziare e rendere piacevole la vista del lettore, mettendo in equilibrio gli elementi presenti e combinandoli con gli spazi vuoti che compongono il layout. Già, proprio gli spazi vuoti!

Grazie alla nostra esperienza abbiamo imparato che gli spazi vuoti all’interno di una pagina web hanno uguale importanza e capacità di “riempire” la pagina tanto quanto può fare un’immagine a colori.

Gli spazi vuoti devono creare aria ed armonia con il resto del contenuto testuale. Anche le immagini devono essere a loro volta ben distanziate dal testo in modo da offrire chiarezza di esposizione e ordine rispetto la struttura e la parte dedicata ai contenuti da leggere. Evitare quindi di scrivere tutto il contenuto testuale di fila senza dare i giusti interspazi e le precise interlinee.

Lasciare al contrario ampiezza fra i vari elementi significa guidare il tuo visitatore alla fine della tua pagina in modo chiaro e comprensibile senza rendere la lettura un gesto innaturale e illeggibile nell’insieme. L’eleganza e l’ordine accompagnano sempre il lettore nella call to action in modo naturale (come vedrai nel punto successivo) e fanno si che il tuo visitatore approfondisca la conoscenza del tuo sito web, desiderando di essere sempre aggiornato e coinvolto nelle tue pubblicazioni.

Architettura e Architettura dell’Informazione: dal rappresentare all’informare

Ognuno di noi, come architetto dell’informazione, al pari di un vero architetto, non parliamo di “verità” dei nostri progetti, ma ci focalizziamo su quante strade un progetto può aprire, su quale funzionalità e utilità il nostro lavoro può ricoprire per le persone che usufruiranno di un nostro progetto.

A muovere le nostre scelte sono le parole “funzionamento” e “utilità”, termini che ci permettono di ponderare al meglio la qualità delle nostre idee e la loro applicabilità-implementabilità.

L’architettura dell’Informazione determina rapporti di forza, l’esistenza di sovrastrutture nel complesso dell’opera che stiamo realizzando; l’architettura dell’Informazione è un motore di relazioni, strutturante nella società.

Il grande Louis Kahn, un architetto di fama mondiale, ha proposto un semplice ragionamento estetico che ci dimostra quanto la rivoluzione informatica da cui siamo permeati oggi estenda concettualmente il suo campo all’architettura.

“Se chiediamo all’architettura Che cosa vuoi essere?
lei ci risponderà:
“Esisto in quanto rappresento,
Esisto in quanto funziono,
Esisto in quanto informo”

Con l’epoca moderna e la diffusione dell’informatica nelle nostre vite, è avvenuto un passaggio nella coscienza collettiva e nelle forme rappresentazionali con cui ci esprimiamo: dal rappresentare siamo passati all’informare.

Produttività nel Business: Come testare un’idea con il metodo Google Ventures

Questo modello fu ideato da Jake Knapp con il nome di “Sprint”. Il lavoro di testing dura 40 ore, ovvero 5 giorni, e si svolge nel seguente modo:

Giorno 0
0 – Allestire il palcoscenico:
1 – Scegliere un grosso problema che ha ancora soluzioni scarse sul mercato.
2 – Trovare le persone giuste (tra quattro e otto, il numero perfetto. Designer, product manager, ingegneri, esperti di user experience e di marketing) e dividerle in team rispetto ad area di competenze.
3 – Stabilire il calendario con le date degli incontri.
4 – Eleggere un moderatore delle riunioni.
5 – Reperire matite, post-it, matite, lavagna, un timer.

Giorno 1
È il giorno del primo confronto. Gli esperti in ognuno dei campi offrono la loro opinione sul problema che è stato scelto. Qui è importante lo scambio e il dialogo. Il reparto vendite saprà cose che gli ingegneri non conoscono, chi si occupa di servizi al cliente conoscerà aspetti che sfuggono al designer. Una volta finito il primo incontro il moderatore elabora una bozza con una sintesi degli aspetti più rilevanti venuti fuori dal primo incontro. Qui per dettagli.

Giorno 2
È lo “sketch day”. I team lavoreranno individualmente per disegnare su un foglio le soluzioni al problema. È importante che ogni team descriva la sua idea usando molto dettagli. Dopodiché si procede alla fase delle votazioni, in cui sarà scelta e votata la migliore. Qui puoi leggere altro su questa fase.

Giorno 3
È un giorno decisivo dove dovrai scegliere tra una dozzina di soluzioni. Ovviamente non puoi pensare di testarle tutte. Devi limitare al massimo le scelte e prendere decisioni dolorose.

Giorno 4
Immagina di essere George Clooney quando in Ocean’s Eleven stabilisce ruoli e compiti per il suo piano. Hai le idee, hai il team. Non devi fare altro che distribuire i ruoli e realizzare ciò che hai in mente. Le caratteristiche di un buon prototipo? È veloce, bello da vedere, ognuno può usarlo senza grossi problemi, costa poco, non è perfetto

Giorno 5
Sei giunto quasi alla fine del tuo percorso. Ora devi mostrare il prototipo/i a utenti reali con colloqui individuali (trovane almeno sei). Ascolta ciò che dicono, prendi nota dei loro dubbi/perplessità. Scrivi alla lavagna. Fai una colonna per ogni partecipante e riporta le loro impressioni per ogni prototipo. Sii umile. Se non riescono a usare il prodotto, non significa che sono stupidi. Ma che c’è qualcosa che hai sbagliato. E devi rivedere tutto. È un rischio, ma devi correrlo.