Post correlati

• 19 luglio 2010 -- Usare le webfont, i tanti modi per fare tipografia sul web.
• 24 giugno 2010 -- Come personalizzare la grafica di una pagina FaceBook
• 18 febbraio 2010 -- Chi sono i veri “guru” e chi i “falsi-positivi”?

Eccovi accontentati.

Per gli amanti della carta ecco delle basi cartacee da stampare per creare i vostri wireframe, e ringrazio Markdvl per la segnalazione.

Per chi invece ama essere più tecnologico e usare strumenti online ecco Mockflow: favoloso.

E ora la progettazione è nelle vostre mani!!

Buon lavoro!

Post correlati

• 2 novembre 2009 -- Lezioni da Naba I: xhtml, css e costruzione di un wireframe
• 30 luglio 2009 -- Come lavoriamo noi webdesigner? Che modelli o procedure seguire nella creazione dei siti?
• 16 giugno 2009 -- Dal wireframe alla pubblicazione – Sviluppo usabile di un sito parte 2

Da parte mia progetto a risoluzioni 800×600 solo se si tratta di siti per la Pubblica Amministrazione, Associazioni o Universitarie. Questo perchè nella mia bacata testolina ho ancora l’idea che in queste istituzioni esistono ancora pc con Windows 2000 e monitor a bassa risoluzione perchè di più “nun je la fanno”.

Per tutto il resto invece progetto a 1024×768 o meglio, ometterei la seconda misura perchè tanto i siti si sa che sono fatti per scorrere in verticale. E rigorosamente a layout fisso. Le regole di accessibilità dicono di usare quanto più possibile layout fluidi, ma il poco controllo che si ha sui contenuti mi portano a questa scelta, al massimo ad usare una soluzione mista.

E voi?

Post correlati

• 27 gennaio 2009 -- Che risoluzione minima usare per un sito?

Stanco dopo una giornata di lavoro che, ovviamente, ti ha riservato un numero così alto di imprevisti che “voi umani non potete neanche immaginare”, il tuo corpo inizia ad inviare impulsi verso il materasso del tuo letto, che mai come in quel momento è avvolto da un’aurea cosmica di benessere ed, in questi giorni, piacevolissimo calduccio!
Il tuo fisico, i tuoi occhi guardano direttamente il letto e parlano, avviando una specie di countdown all’impatto con il materasso.

… 3-2-1… e ti ritrovi schienato a mo’ di cetaceo, completamente in estasi mistica, in un turbine di godimento misto relax: in quel preciso momento, in quel determinato istante, sei, indiscutibilmente il Re incontrastato della iper-stra-mega-galassia.

Come per magia, in mezzo a seimila voli pindarici tendenti ovviamente all’irrealtà più impensabile, si palesa l’Idea, volutamente scritta con la “I” maiuscola: immediatamente, risolve e stravolge il lavoro che ti ha bloccato per tutta la giornata, facendoti letteralmente impazzire, abusando del comando “Annulla ultima operazione”.

Teorema: il Creativo è tale solo se è libero di fare il Creativo.
Questo non avviene sempre, anzi, spesso e volentieri, la figura del Creativo viene ovviamente cercata di inquadrare in un lavoro meccanico e contabile.

Quanto è importante per voi il contorno, l’atmosfera, l’ambiente, nel vostro lavoro?
Anche qualcuno di voi, come me, probabilmente trova “fecondo riparo” nella notte e, spesso e volentieri, ha veri e propri barlumi di genialità durante il rigirarsi nel piumone?

Che sia solo perché, la notte è in verità, l’unico momento in cui il Creativo, comunica con la sola persona che può capirlo, ovvero sé stesso?

Mi piaceva avere il vostro parere,
A voi ragazzi

Post correlati

• 9 agosto 2010 -- Ispirazione fra grafica e design
• 24 giugno 2010 -- Come personalizzare la grafica di una pagina FaceBook
• 19 gennaio 2010 -- Ispirazione: progress bar, step by step di ecommerce, wizard, etc

Anche guardando però dove gli utenti mettono maggiormente gli occhi a nessuno (o quasi) viene il sospetto o il dubbio di creare un flusso scorrevole per presentare il sito e le informazioni rilevanti in maniera da non appesantire la persona senza fargli fare su e giù con gli occhi.

Quando guardiamo una pagina, partiamo dalle cose più in alte (di solito il logo), e poi ci spostiamo sulle cose più colorate e sulle immagini, saltando da una sezione all’altra, dando una veloce lettura alle intestazioni per capire di cosa parla quel blocco e poi continuare nella nostra ricerca. Se quello che si cerca è in alto e magari in una posizione poco evidenziata, ci costringe a risalire con gli occhi e cercarlo, provocando uno sforzo che a lungo andare può aumentare il nostro stress, specie dopo molte ore e non si è più freschissimi.

Questo sito usa caratteri grandi e colori accesi per attirare l’attenzione, e infatti, nonostante i diversi passaggi, riusciamo a capire ben presto di cosa parla il sito, e quali cose possiamo fare, senza doverlo andare a cercare. Siamo guidati. I gestori del sito hanno messo infatti il pulsante “buy now” e “learn more” in diversi punti strategici nel sito. Se avessero lasciato il “buy now” solo nella parte alta del sito a destra, nessuno l’avrebbe visto e cliccato. Sarebbe rimasto invisibile ai più.

Questo sito fa uso dei colori per evidenziare un percorso, ma ovviamente non è l’unica via possibile, e ovviamente dipende da come si usa, a volte i colori possono distoglierci dal nostro obiettivo.

Youtube ad esempio usa i box con i video per attirare la nostra attenzione. Se fate caso, sul sito di youtube l’annuncio pubblicitario di Chrome è ripetuto due volte, nella sidebar e sotto tutti i video. Secondo voi quale potrebbe essere quello più cliccato? E ancora, pensate che mettere il form di ricerca così vicino al logo sia stato un caso?

Quando progettate un sito, in fase di design (progettazione, non disegno), pensate a come organizzare gli elementi in maniera sequenziale oppure distinguendoli in maniera lampante, facendo seguire un percorso “forzato” ai vostri utenti, così da poter migliorare la loro esperienza di navigazione nel sito (trovare quello che cercano senza sforzi) e aumentare le conversioni ai vostri prodotti o servizi.

Post correlati

• Nessun post correlato

In questo articolo sono illustrate le best practise per utilizzarli e una gallery di esempio

Quando webdesign e user experience diventano anche webmarketing

Post correlati

• 22 settembre 2009 -- Tantissimi tutorial Photoshop per grafici e webdesigners!
• 22 luglio 2009 -- Abbiamo il vincitore, anzi vincitrice!!
• 19 maggio 2008 -- Grafica web di Simona De Robertis

Molto importante sono i passaggi che prevedono la creazione dei personaggi e degli scenari e quello dello schema di navigazione.

Infatti i contenuti (o quantomeno un’idea degli stessi) sono una delle prime cose che il cliente ci fornisce e viene naturale organizzarli in maniera logica per poi provare a navigarli con i personaggi attraverso gli scenari per vedere se sono corretti.

Solo che in questa maniera si tenderà, inconsciamente, a creare degli scenari che rispecchiano lo schema dei contenuti per farli combaciare, e quindi risulteranno falsamente corretti. Uno schema del genere è dannoso perché vi renderete conto che le cose non vanno solo quando farete altri test con gli utenti, e questi non troveranno ciò che cercano, oppure le informazioni sono state messe troppo in profondità oppure troppo superficialmente, con il solo risultato di dover rifare daccapo a partire dai personaggi e dagli scenari, cosa che come potete immaginare, costituisce un notevole dispendio di tempo e anche denaro.

Un trucco (che potremmo meglio definire metodo) potrebbe essere quello di far creare gli scenari ad altre persone, colleghi o familiari, in modo da inserire una o più menti (escluso noi) nel progetto, che è sempre positivo, e poi incrociare i risultati ottenuti.

Se invece abbiamo già gli schemi di navigazione pronti per essere testati, potrebbe essere utile fare un sondaggio tra amici e colleghi (gli stessi di prima), chiedendo loro di inventarsi o ricordare situazioni in cui si sono trovati, facendoli diventare essi stessi dei personaggi, e poi fargli testare lo schema di navigazione. I risultati in questo caso saranno sicuramente più veritieri che non invece fare tutto da voi. In questo modo potreste però comunque ottenere un risultato fuorviante, specie nel caso che le situazioni in cui si sono trovati loro sono diverse dal genere di sito che state creando voi.

Post correlati

• 16 giugno 2009 -- Dal wireframe alla pubblicazione – Sviluppo usabile di un sito parte 2
• 9 giugno 2009 -- Dal wireframe alla pubblicazione – Sviluppo usabile di un sito parte 1

Proprio pensando a questa frase, e alla rigida logica vulcaniana mi è venuta in mente una domanda: “Come possiamo progettare interfacce di successo se l’essere umano è per sua natura impulsivo?”. Ovvero, come possiamo invogliare gli utenti a compiere determinate azioni se comunque si comportano in modo imprevedibile?

Dopo attente riflessioni ho concluso che l’unico modo per invogliare l’utente a fare quello che vogliamo è costringerlo. Proprio così, costringerlo, limitando la sua navigazione, senza ovviamente che se ne renda conto, altrimenti avremmo perso un visitatore, che abbandonerà il nostro sito perché troppo difficile da usare.

Fare limitazioni di questo tipo è molto difficile, dobbiamo innanzitutto capire noi che cosa vogliamo che facciano i nostri utenti. Questo non è da sottovalutare perché molto spesso non si ha idea di cosa si vuole realmente che gli utenti facciano. Se non siamo sicuri della cosa forse è meglio non porre limitazioni di alcun genere, potrebbe molto facilmente sortire l’effetto contrario.

Se effettivamente abbiamo compreso quello che vogliamo gli utenti facciano (compilare un form, accedere a una sezione del sito…), iniziamo a porgli dei freni nell’esperienza d’uso del sito, ovvero ponendo loro una scelta univoca: “vai a questa pagina e compila il dato form ricevi le nostre news gratis”, in modo non troppo ambiguo e che li faccia riflettere (vai, al posto di se vai), ma dandogli sempre una sola scelta univoca. Porli davanti a un bivio sarebbe compromettere l’efficacia di qualsiasi altra azione. L’utente non pensa, e non dobbiamo metterlo nella condizione di pensare (vedi “Don’t make me think” di Steve Krug).

Un’altra azione utile è ripetere in diverse parti del sito e in diversi modi quello che vogliamo l’utente faccia, sempre in maniera naturale, una scritta nel testo, un banner a lato (stando attenti che in quel dato punto cada l’occhio del visitatore), un video, dipendentemente dai contenuti del vostro sito.

Ricordate quindi queste semplici regole:

• Non forzate l’utente, ma guidatelo e consigliatelo.
• Il messaggio deve essere semplice.
• Il messaggio deve essere ripetuto (anche in diversi formati).
• Non porre bivi ai nostri utenti.

Post correlati

• 20 agosto 2009 -- I dieci errori più comuni di un webdesigner
• 6 febbraio 2009 -- Breadcrumb no grazie!
• 16 ottobre 2008 -- Usabilità a servizio del cliente o viceversa?

Quante volte vi e’ capitato di dover saltare furiosamente tra Google e il vostro editor di testo, perché non vi ricordate con quanti parametri si passa un certo metodo? O quante volte avreste voluto avere una tabella di colori con i codici esadecimali sempre visibile?

Ci sono alcuni programmi, chiamati IDE (Integrated Developement Environment) che si occupano di fornire ai programmatori tutti gli strumenti e tutto il supporto possibile, dalle descrizioni dei metodi delle librerie, fino al supporto per SVN, passando per i plugins piu o meno usati.

Proprio per questo motivo, gli IDE sono orientati ad un solo linguaggio o ambito di sviluppo.

Con questo articolo, voglio provare a darvi una panoramica delle IDE (gratuite e non) che ci sono in circolazione, elencandovi se riesco anche i pro e i contro.

Iniziamo da APTANA (WIN | LINUX | MAC) :

Aptana è un IDE professionale per lo sviluppo di applicazioni web e siti. E’un prodotto Open Source, ed è disponibile per Linux, Mac e Windows, sia come applicazione stand-alone, che come plug-in per Eclipse. Si tratta di una soluzione molto completa che affianca strumenti per lo sviluppo di applicazioni Web 2.0 a servizi online di collaborazione ed hosting. Di base, supporta Html, CSS e javascript, ma il supporto può essere esteso, grazie ad una serie di plug-in gratuiti, ad altri linguaggi come: Ruby On Rayls, Python e PHP (compresi i piu usati frameworks, quali Zend, Cake, Scriptaculous, JQuery, Dojo, e quelli installati personalmente). Sempre tramite plug-in si può abilitare una serie di strumenti per la creazione di applicazioni per iPhone, Nokia ed Adobe AIR. Le funzioni messe a disposizione da Aptana Studio sono veramente tante, per visionarle tutte vi rimando a http://www.aptana.com/studio

PRO:gratuito, supporto per i piu importanti linguaggi e loro frameworks, mantenuto da una community molto attiva, sul blog presenti molte guide e video tutorials, ottimo il servizio Aptana Cloud (hosting)

CONTRO: rischia di intasare i sistemi meno dotati

BLUEFISH (LINUX) :

E’ un editor di testo Open Source, potente e molto flessibile. Con quest’applicazione infatti, sviluppatori e webdesigner, hanno la possibilità di creare sia siti web dinamici, che script in diversi linguaggi di programmazione (Python, HTML, PHP, C, Java, JavaScript, JSP, SQL, XML, Perl, CSS, ColdFusion, Pascal, R ed Octave/MATLAB). Bluefish è multi-piattaforma e può girare su tutti i sistemi Posix compatibili (Linux, FreeBSD, MacOS-X, OpenBSD e Solaris). Attualmente la versione Windows non è supportata: per usarlo con i sistemi operativi di casa Microsoft, infatti, è necessario compilarne i sorgenti da cygwin o mingw, operazione non alla portata di tutti. In definitiva, la scelta migliore per chi usa Linux.

PRO: veloce e leggero (meno del 35% di memoria usata), WYSIWYN (what you see is what you need), supporta la maggior parte dei linguaggi, supporto nativo per espressioni regolari di Perl e POSIX nel “search and replace”, comando “undo” infinito, completamente personalizzabile, possibilità di usarlo direttamente per compilare

CONTRO: mancanza di supporto nativo per Windows, mancanza di manuale o di una wiki, scarso supporto a plugins

DREAMWEAVER (WINDOWS | MAC)

Tra gli IDE a pagamento piu usati, il piu conosciuto di sicuro è Dreamweaver di Adobe, giunto ormai alla versione CS4. E’ un software molto potente, che rappresenta lo strumento adatto a tutti i professionisti per la sua completezza e complessità. E’ stato progettato per progetti di grosse dimensioni, e per questo offre funzionalità come il controllo incrociato delle pagine per evitare errori, oppure il supporto agli snippets, ossia “scatolette” di codice che si possono richiamare velocemente all’interno del progetto all’occorrenza. Inoltre si integra perfettamente con i vari Fireworks, Photoshop e Flash.

Il suo neo piu grande? Il prezzo: la versione CS4 costa, attualmente, 399 euro.

PRO: adatto a tutti i professionisti, molte funzionalità non offerte dagli altri, ottima gestione degli ftp, controllo della compatibilità con i browser

CONTRO: prezzo elevato, non adatto ai principianti, non sempre produce codice che rispetta gli standard del w3

VISUAL STUDIO .NET (WINDOWS):

Visual Studio, di Microsoft, e’ lo strumento adatto (direi quasi obbligato) a chi vuole programmare usando il framework .NET. Oltre a supportare i linguaggi C++, C# e Visual Basic, offre anche un debugger ed un compilatore interno per velocizzare e facilitare il lavoro degli sviluppatori. Altri strumenti utili sono l’editor grafico per i form ed il layout dei siti; la funzione di completamento automatico, che evita ai programmatori la perdita di tempo dovuta alla ricerca nella documentazione esterna.

PRO: il migliore in circolazione per sviluppare .NET, sistema IntelliSense

CONTRO: utile solo a chi sviluppa .NET, a pagamento

ALTERNATIVA: in alternativa a VS, e’ stata creata una suite open source denominata “Mono Project”, che permette di compilare applicazioni .NET anche su Linux.

Spero di esservi stato abbastanza d’aiuto nella vostra ricerca dell’IDE adatto al vostro scopo. Alcuni indirizzi utili sono (oltre ai soliti Google e Wikipedia, dove potete trovare un sacco di informazioni):

http://www.aptana.com/studio (APTANA)

http://bluefish.openoffice.nl/ (BLUEFISH)

http://www.adobe.com/it/products/dreamweaver (DREAMWEAVER)

http://www.microsoft.com/VisualStudio2008 (VISUAL STUDIO)

http://mono-project.com/Main_Page (MONO)

Ciao a tutti, e alla prossima!

Post correlati

• 24 agosto 2009 -- I migliori plugin di jQuery in circolazione sono qui
• 3 luglio 2009 -- Trucchetti per Wordpress da Webdesignerwall
• 29 marzo 2009 -- Uluru vince l’Iwd award di questo mese!

Adobe sta sviluppando un servizio per testare velocemente la compatibilità browser di una pagina web.

Questo è il link: https://browserlab.adobe.com/

Fondamentalmente fa degli screenshot come browsershots.org, solo che, a differenza di browsershots:

- funziona bene

- interfaccia molto bella (anche l’occhio vuole la sua parte.. io tutte le pubblicità su browsershots non le potevo più vedere!)

- è velocissimo e non ti fa aspettare mezz’ora

- non taglia gli screenshot

Gli screenshot possono essere visti 1 alla volta, 2 affiancati, o sovrapposti in trasparenza (variabile).

E’ inoltre possibile crearsi dei gruppi personalizzati di browser da testare.

Un’altra cosa positiva è che è disponibile l’estensione per dreamweaver CS4, quindi puoi testare direttamente da dreamweaver.

Essendo ancora in fase di sviluppo però ha qualche pecca, ossia:

- anteprima gratuita ma limitata ad un numero chiuso di utenti (non si sa quanti ma x ora è disponibile basta crearsi un account adobe e sperare che in futuro non diventi a pagamento.. adobe x ora non si sbilancia e non dice nulla in merito)

- non testa su tutti i browser ma solo su:

• Firefox 2.X e 3.X (Windows XP e Mac OSX)
• Internet Explorer 6.X e 7.X (Windows XP)

Safari 3.X (Mac OS X)

Post correlati

• 25 febbraio 2010 -- Youtube dice basta a IE6 dal 13 marzo
• 28 dicembre 2009 -- Microsoft sarà obbligato a permettere la scelta del browser dal 2010
• 1 ottobre 2009 -- Io, essere umano