Il mio primo articolo

http://www.uxmagazine.it/interface-interaction-design/il-ruolo-dei-moduli-nellinterazione-tra-utente-interfaccia-web/#more-865

breve guida all’usabilità – web design

1. le informazioni più importanti prima
2. fare buon uso delle “tagline” (La Tag-line è una frase breve e diretta che riassume in modo istantaneo la vocazione di una marca, di un prodotto o di un’azienda, nel nostro caso parliamo di un sito)
3. ripeti gli argomenti principali (repetita iuvant dicevano i latini e non fa mai male avere sempre il focus sotto controllo)
4. il contenuto informativo delle singole pagine deve essere compreso velocemente
5. fai visualizzare i numeri sotto forma di numeri! (100 e non cento)
6. tratta un argomento per volta
7. collega sempre le pagine correlate all’informazione che stai comunicando
8. affidati ai tuoi utenti e non alle statistiche generiche
9. aumenta il “padding“  dei collegamenti così aumenti la zona cliccabile
10. metti sempre le etichette associate ai controlli nei moduli
11. utilizza sempre gli stati dei collegamenti (hover, active, visited)
12. utilizza i sistemi per evitare spam (es. captcha)
13. genera pagine di errore che spieghino cosa sta accadendo all’utente (evita i soliti codici incomprensibili)
14. usa il testo piuttosto che le immagini quando possibile

la lista è stata rivista da questo articolo

24 ways: Don’t Lose Your :focus

a great article about accessibility troubles…

via 24 ways: Don’t Lose Your :focus.

addThis: come personalizzarlo

Gli strumenti di condivisione sono fondamentali per gestire il traffico sul nostro sito/blog, io utilizzo addthis, per diversi motivi ho dovuto modificarne il codice, per ottimizzarne la visualizzazione e l’usabilità.

ecco il codice prodotto:

Breadcrumb Navigation Examined: Best Practices & Examples | Graphics

who loves breadcumb?

Breadcrumb Best Practices

via Breadcrumb Navigation Examined: Best Practices & Examples | Graphics.

Yahoo’s interactive menu, un bell’esempio di design e usabilità

segnalo questo articolo molto interessante

On my previous job, when I was working for a big web portal, we got used to look up to Yahoo’s interaction design as one of the most insightful example of dealing with users’ experience on a large scale audience.

via Yahoo’s interactive menu | Web & Patterns: patterns for a better web..

i blog che leggo

stavo mettendo a posto i miei preferiti, dal conto degli rss mi sono accorto che, da qualche mese a questa parte, leggo blog in maggioranza scritti da donne.

Non so come valutare questo dato

• scrivono meglio?
• scrivono cose più interessanti
• aggiornano più frequentemente
• se aggiornano, vuol dire che hanno più cose da dire (credo di si!)
• sarà per le foto ammiccanti che pubblicano (non troppe a dire la verità)

ragionando meglio vedo che gli argomenti che trattano più frequentemente sono:

1. design (dopo qualche anno devo ammetterlo, sono più bravi i grafici donna)
2. stile (se non vuoi fare la figura del fesso leggi vanity fair e segui i blog delle sue giornaliste)
3. gossip (il chiacchiericcio spesso ben ragionato è nel loro dna)

Search Engine Optimization Is Part of Good Web Design – Webmonkey

Leggo questo articolo sull’argomento design vs SEO e mi rendo conto che spesso non si centra bene l’argomento. L’ottimizzazione delle pagine per le attività S.E.O. sono spesso attività a latere rispetto alla pubblicazione del sito.

Questo è un problema che solo in parte riguarda il webdesigner, poichè se la struttra dell’html e la gestione del css son corretti il rendering prodotto è gia SEOReady.
Se utilizziamo correttamente i marcatori html rendiamo più facile la vista agli spider dei motori di ricerca.
Se la produzione di contenuto informativo è correttamente veicolato dai fogli di stile non ci saranno grandi problemi di utilizzo e poi di share su altri siti.

Insomma dopo tutti questi se credo sia chiara la distinzione dei ruoli, e cioè chi pensa alla progettazione dell’interfaccia per la sua ottimizzaizone grafica e la sua capacità di utilizzo, e chi invece deve ottimizzare i contenuti gestire delle tecniche di marketing e trip and tips vari per far salire di posizione l’url nella pagina di google.

Insomma chi si occupa di SEO faccia bene il suo lavoro che noi designer abbiamo altro a cui pensare;)

Position:relative & position:absolute

Position:relative & position:absolute

oggi impazzivo con questi due attributi css, e nello specifico il mio problema era il solito della differente visualizzazione sui vari browser (explorer 7 e firefox si comportavano in maniera simile ma explorer 6 sbarellava del tutto).
Grazie all’aiuto del mitico collega Max il tutto si è risolto posizionando un div contenitore in maniera assoluta e quello che doveva spostarsi in maniera relativa, in questo modo sono riuscito a posizionare tutti gli elementi senza bisogno di hack e altri smadonnamenti, il codice è questo:

.divContenitore { width:50%; background-color:#FF0000; position:absolute; float:left}
.divContenitore2 { width:50%; background-color:#006600; position:relative; top:13px}
.divContenitore2 p { color:#FFF}

10 domande a cui un sito deve rispondere – domanda 1

la home page

la home page di un sito è l’elemento fondamentale per gestire e veicolare le informazioni, nella progettazione credo che il 60% del tempo è impiegato nella realizzazione del wireframe e della grafica della home.

Personalmente ritengo che il successo o meno di un sito sia il giusto mix di elementi che prendono vita nell’home page, come un ottimo negroni o uno sbalorditivo vodka martini, gli elementi devono essere pochi ma buoni e ben bilanciati tra di loro.

il design deve garantire:

1. l’immedita riconoscibilità degli elementi (es. il logo )
2. ottimizzazione dei processi di fruizione di tutto ciò che è presente nella hp (es. form di iscrizione o di ricerca nel sito)