interfacce

WhyMCA 2010 live blogging (appunti): dall’idea al design dell’interfaccia mobile

0.00 avg. rating (0% score) - 0 votes

Dall’idea al design dell’interfaccia mobile step by step, Ilaria Mauric

Esercizio di stile personale, analisi di un servizio online che utilizza (non realizzato da lei) e progetto di porting su mobile.

Ilaria fa’ una breve analisi dell’interfaccia web del servizio Monthlyinfo.com, per monitorare il ciclo. Mostra lo stesso sito su mobile: uguale, ma molto piu’ piccolo e quindi impossibile da utilizzare con le dita (tap). Utilizza il sito come utente, ma vorrebbe un’esperienza utente su mobile piu’ comoda per cui decide di progettarla.

Confronto tra web e applicazione. L’applicazione deve offrire risposte piu’ velocemente, avere funzionalita’ minime e semplici da utilizzare (per gli sviluppatori e’ svantaggioso perche’ bisogna riscrivere molto). Context is king. Il porting di alcune funzionalita’ non ha piu’ senso sul mobile, ad esempio i reminders diventano push notification.

Inizia a progettare con i wireframe tutte le varie schermate. Sceglie la piattaforma di sviluppo e quindi consulta le guidelines e l’SDK per ottenere le specifiche di progettazione (schermo, risoluzione, colori, etc). Poi interfaccia via PhotoShop con librerie.

Dubbi e discussioni con gli sviluppatori: c’e’ spazio nella schermata, aggiungiamo informazioni e funzionalita’? La scelta e’ stata negativa per non complicare l’interfaccia. Piu’ si aggiunge piu’ servono test con utenti. Altro dubbio: i colori aiutano davvero? Se la funzionalita’ e’ simile e porta alla stessa sezione dell’applicazione conviene mantenere lo stesso colore per una questione di usabilita’. Dubbio sulla risoluzione: 72dpi e 8bit e’ quella corretta? iPad ad esempio accetta 180dpi con profondita’ colore 16bit, ma per gli smartphone non ha trovato risposta.

Nuovi dispositivi = nuovi scenari = nuovi contesti = nuove interfacce.

WhyMCA 2010 live blogging (appunti): design per iPad

0.00 avg. rating (0% score) - 0 votes

Design per iPad, Luca Mascaro La prima volta che hai in mano un iPad non capisci bene cosa ti ricorda come esperienza d’uso. Le regole di progettazione e di interfaccia dell’iPhone non funzionano sempre sull’iPad. Nel ciclo di vita giornaliero di un utente non c’e’ nulla che assomigli all’iPad. Approccio di scoperta. iPad viene utilizzato da un’utenza trasversale: sia vecchi che nuovi utenti. Non sono solo nativi digitali. Un computer e’ troppo complesso per leggere la posta e guardare due siti. L’iPad si utilizza in contesti relativamente nuovi: nessuno lo usa alla scrivania. Divano, bagno, in piedi, riunioni, etc. Chi fa ricerca con utenti ora dovra’ esplorare tutto… Per fare design delle interfacce bisogna pensare prima agli scenari che alla progettazione, ancora piu’ dell’iPhone. Sviluppare le interazioni sugli scenari: studi lo scenario e il contenuto e l’interfaccia viene da se’. Prototipare, prototipare, prototipare. Esempio reale: a livello di ipotesi/sketch/disegno un contenuto doveva essere navigato in verticale, quando si aggiungono le immagini vere nel mockup tutti gli utenti pensavano di doverle scorrere in orizzontale. iPad e iPhone sono due cose diverse, anche se le human interface guidelines di Apple dicono che si possono migrare facilmente, la percezione degli utenti non e’ la stessa (e non lo e’ nemmeno tecnicamente). Forse non si riusciranno a fare applicazioni perfettamente identiche sui due dispositivi. L’interfaccia delle schermate di iPad e’ un misto tra pattern classico della telefonia e un computer (iPhone e’ piu’ semplice da navigare e naturalmente sequenziale). Risoluzione dell’iPad: schermo iPad, iPhone e monitor sono cose diverse. Nell’emulatore le misure sono sbagliate e quindi per progettare su iPad bisogna avere un iPad. La rotazione dell’iPad viene usata poco dagli utenti a meno di motivi rilevanti come ad esempio la migliore navigazione. In verticale fruisci il contenuto, in orizzontale fai apparire altre informazioni/funzionalita’ a lato. SciencePlus: app editoriale per iPad che sfrutta l’interazione tra contenuti (su layer). Il contenuto definisce cosi’ l’interfaccia, rendendo invisibile l’interfaccia stessa (es. se il contenuto scorre da solo verso l’alto l’utente e’ portato a sfogliare in verticale). Su iPad hai dubbi su qual e’ la direzione di interazione, per sfogliare: slide o scroll? Tipografia densa e rendering dubbio: a certe dimensioni il carattere e’ illeggibile per via del sistema di antialias. Illustrator e Photoshop vengono usati per progettare/simulare, ma portando i contenuti su iPad non sempre la cosa funziona e rimane leggibile. Lo stesso problema si ha con l’emulatore di XCode. Sfondi, luminosita’ e colori: su iPad l’uso di colori pieni non funziona benissimo, ma funzionano meglio i colori con “rumore” perche’ rendono l’interazione piu’ naturale e aiutano la sensazione di scorrimento. La metafora e’ quella di spostare veramente un oggetto. Su iPad non si pensa piu’ in 2D, ma in tridimensionale: e’ un dispositivo esperienzialmente profondo verso la realta’. Un esempio di profondita’ e’ l’interfaccia dell’applicazione iBooks.

WhyMCA 2010 live blogging (appunti): HTML5 come strumento per lo sviluppo mobile

0.00 avg. rating (0% score) - 0 votes

HTML5 come strumento per lo sviluppo mobile, Sandro Paganotti e Marco Moscaritolo

I big dicono che l’HTML5 e’ uno strumento valido e puntano su quello. La timeline e’ un po’ lunga: 2022 per completare la definizione ufficiale degli standard (con una serie di step intermedi).

Il supporto per l’HTML5 e’ in gran parte gia’ presente su tutti i principali browser (Opera, Safari, Firefox, Chrome) ad eccezione di Explorer che ha un basso supporto al momento. Sul mobile il supporto all’HTML5 e’ anche maggiore.

Nuovi tag semantici in HTML5, nuove funzionalita’ per gli elementi di input (es. definendo l’attributo Type=”number” si abilita, su mobile, solo una tastiera virtuale con numeri), possibilita’ di definire alcuni tag/attributi secondo le proprie esigenze (meno formale dell’XHTML).

Web Cache: l’utente puo’ disporre dell’applicazione anche nel caso in cui non fosse connesso alla rete. Nel tag HTML si definisce l’attributo “manifest”. Il file con estensione .manifest definisce l’elenco degli asset (css, immagini, js, video, etc) che devono essere disponibili anche per la funzione offline e li scarica sul device dell’utente, in cache. Nuove API ApplicationCache che permettono di gestire e interagire nei casi on/offline con la cache manifest.

Web Storage: sempre per l’utilizzo offline, simile al concetto HTTP di cookie e sessione esistono sessionStorage e localStorage.

Web DataBase: esistono API che permettono di lavorare con logica e sintassi SQL, anche quando l’utente e’ offline. Ora tutti i mobile device utilizzano sqlite (anche se il W3C parla di SQL, quindi a tendere situazioni troppo specifiche per SQL potrebbero non funzionare piu’). La sincronizzazione tra DB offline e DB online deve essere manuale e a carico dello sviluppatore, non esistono API che la fanno.

Canvas: spazio da usare come elemento per rappresentare graficamente le informazioni (modificabile e gestibile con javascript). Vantaggi rispetto ad ora: carico sulla macchina molto basso in caso di operazione grafica.

Video: marcatore che permette di inserire un video nell’applicazione web senza plugin esterni (niente Flash, SilverLight, etc). Il supporto e’ nativo nel browser e quindi l’uso delle risorse e’ piu’ basso e meglio gestito. Si puo’ interagire con javascript, disegnare il player con CSS, etc. Due grossi contro: non esiste la modalita’ full-screen, problemi nella scelta del codec (h264 per Apple, Theora per Firefox, VP8 etc) e quindi costi di licenza.

API potenti per il mobile e le necessita’ mobile. Non ci sono framework (Sproutcore sta muovendo i primi passi rispetto HTML5) e tutto e’ in carico al developer.

Vantaggi HTML5 su applicativi mobile ad oggi:
– non serve alcuna approvazione per la nostra applicazione (vedi Apple Store)
– e’ cross-device, anche se bisogna personalizzare i presentation layer per i device e rispettare le singole guide lines
– e’ una tecnologia standard

Svantaggi HTML5 su applicativi mobile ad oggi:
– accesso limitato ad informazioni gia’ presenti sul device ed eventuali sensori particolari (es. giroscopio dell’iPhone)
– il layer di presentazione e’ difficile da rendere uguale alle applicazioni native
– alcune API cambieranno nel tempo quando ci sara’ il rilascio definitivo

Fattori limitanti di un ecosistema di applicazioni HTML5: non c’e’ uno store, quindi la scoperta delle app dev’essere manuale e sulla spinta del singolo, inoltre allo stesso modo non c’e’ un sistema di pagamento fluido e comodo come quelli degli store piu’ famosi e centralizzati. Difficolta’ nel rendere profittabili le nostre applicazioni. Anche se esiste un appstore di terze parti con una sezione web per HTML5, si chiama AppStoreHQ, e probabilmente cresceranno.

CSS3 nuove funzionalita’ per web designer: gradienti, ombreggiature, font diversi da quelli presenti sul client, sfondi, trasparenze, animazioni senza javascript, etc.

Nota: per la presentazione hanno usato prezi.com , bella modalita’ di transizione tra le singole slide.

Zzub: analisi sito Telecom Italia

0.00 avg. rating (0% score) - 0 votes

Disclaimer: pippone più noioso del solito, se si può. 😀 Ho partecipato ad una campagna di Zzub nella quale si richiedeva di navigare il nuovo sito di Telecom Italia per dare un giudizio personale, qualche feedback, suggerimenti e segnalare eventuali errori o imprecisioni (dannato fiscalino!). Oggi sono usciti i nomi dei vincitori: purtroppo per me non sono tra questi, ma complimenti a loro. Condivido con voi una parte degli appunti che avevo preso durante la navigazione del sito Telecom Italia ed inviato a Zzub… considerata l’entità del soggetto e la superficialità della mia analisi direi che non sono pochi, no?

Menu network

Il menu per l’accesso ai siti del network inizia con “TI Network” dove “TI” non sono puntate e quindi non identificano l’acronimo. Tuttavia, anche se lo fossero, potrebbero non essere chiari per chiunque e, in ogni caso, sarebbe necessario un piccolo sforzo di ragionamento. Dato che c’è spazio converrebbe includere la dicitura completa “Telecom Italia Network”, cosa che agevola anche l’identificazione e l’indicizzazione sui motori, essendo questa la prima parola valida della pagina (per posizione nel codice HTML).

Sempre in questo menu, ma questa volta a livello concettuale-grafico, la linguetta/tab che identifica il sito sul quale stiamo navigando è incoerente rispetto alla dimensione del menu stesso. Lo sfondo nero infatti dovrebbe essere largo tanto quanto la larghezza del browser in uso, pur lasciando centrati i contenuti, questo per rendere credibile la metafora della linguetta/tab.

Cambio lingua

Il menu in alto a destra per lo switch tra le lingue potrebbe essere più chiaro: “EN” e “IT” potrebbero diventare “ENG” e ITA”, oppure “English” e “Italiano” o, meglio ancora, essere sostituiti da una bandierina. Quest’ultima soluzione manterrebbe gli spazi e garantirebbe la comprensione a chiunque, compresi gli utilizzatori di tecnologie assistive grazie all’attributo ALT. Nel caso rimanessero testuali il carattere pipe “|”, utilizzato per separare le due lingue, trae in inganno la vista somigliando ad una lettera L minuscola o I  maiuscola: conviene quindi utilizzare un trattino “-“, un altro espediente grafico o nulla.

Dimensione caratteri

L’etichetta del link per variare la dimensione dei caratteri è sempre in inglese “text size” anche quando la lingua selezionata è l’italiano. Considerato poi il suo scopo, ovvero agevolare la visione dei caratteri per chi ha problemi di vista, non dovrebbe essere di colore grigio su sfondo bianco in quanto il basso contrasto la rende invisibile a questa tipologia di persone.

Cliccando sulle varie “A” per modificare la dimensione dei caratteri del sito succede che i testi nell’animazione Flash ed i menu non cambiano dimensione.

Modulo di ricerca

Cliccando subito sull’icona per avviare la ricerca, senza inserire alcun termine, il sistema effettua una ricerca per la keyword “cerca”. Dovrebbe invece generare un errore con una descrizione utile, in grado di guidare l’utente verso il corretto uso della ricerca.

Quando poi il sistema non trova risultati per una determinata chiave di ricerca mostra l’errore “Nessun risultato $keyword” che è decisamente migliorabile. Anche solo a livello di sintassi italiana con un “Non ho trovato risultati per la tua ricerca su ‘$keyword’, prova ad inserire un altro termine”.

Quando il sistema non trova risultati la colonna di sinistra sembra più corta in quanto non c’è testo nella colonna di destra (che ha grossomodo lo stesso colore di sfondo del sito).

Nella pagina che mostra i risultati della ricerca compare un altro form, identico a quello posizionato in alto a destra in ogni pagina del sito e con le stesse funzionalità: questo crea un dubbio nell’utente su quale sia giusto usare. Tra l’altro, nel caso non ci fossero risultati, solo il secondo contiene la chiave ricerca appena effettuata.

Nella colonna di destra, sotto la voce “Lingue”, compare “italian” invece di “italiano”.

Nella colonna di destra credo sia meglio scrivere “PDF – Portable Document Format” in quanto l’acronimo “PDF” è più conosciuto del suo significato.

Nella colonna di destra i numeri degli elementi risultati potrebbero essere allineati a destra evitando quindi la parentesi e rendendo più chiara la lettura di tutte le opzioni.

Nella colonna di destra l’attributo title dei link “filter results” è sempre in inglese anche navigando il sito in italiano.

Nella colonna di destra nell’etichetta “Tipo Documento” la “d” dovrebbe essere minuscola.

La paginazione dei risultati, in fondo alla pagina, è sempre in inglese anche navigando il sito in italiano.

Tra i risultati della ricerca si trovano anche risultati in lingua inglese pur navigando il sito in italiano.

Il permalink della ricerca ha un indirizzo URL poco comprensibile o indicizzabile, in questo senso se ci fossero degli URL tipo http://www.telecomitalia.it/tiportal/it/cerca/$keyword si potrebbe pensare anche ad un elenco delle parole più cercate in quanto identificherebbero un preciso bisogno degli utenti (e quindi anche degli utenti a venire).

Manca una funzionalità per la ricerca avanzata, ad esempio solo in una sezione del sito o per uno specifico contenuto.

La ricerca non offre i risultati ordinati per rilevanza e se lo fa non lo indica chiaramente, infatti cercando “offerte” non ottengo quello che mi aspetto. L’etichetta a sinistra di ogni risultato “HTML” non è comprensibile a molte persone, potrebbe invece essere modificata in “pagina”.

Animazione Flash

Nell’animazione principale mancano i “call-to-action”: non ci sono pulsanti nè messaggi che invitino all’azione (ad esempio un pulsante sulla foto tipo “Acquista ora” oppure “Scopri di più”). Anche se le immagini in generale sono sempre portatrici di clic in questo caso visitatori non sanno che cliccando sulla foto entreranno nella sezione apposita nè cosa succederà al loro clic.

Una delle slide previste nell’animazione Flash è un video che a sua volta contiene dell’audio che parte in automatico. Credo che la cosa possa spaventare alcuni visitatori del sito TI in quanto si trovano a visitare delle pagine all’inizio “silenziose”, ma dopo manciata di secondi, di colpo e senza preavviso “parlanti”. E’ vero che molti siti oggigiorno contengono elementi multimediali e che siamo abituati a situazioni simili, tuttavia in un sito corporate non mi aspetto per famigliarità di trovare una caratteristica del genere. Se si verifica che il maggior numero di accessi avviene in orario di ufficio è facile supporre che la cosa possa generare imbarazzo per alcuni utenti (ad esempio gli impiegati con le casse accese per altri motivi).

Link

Spesso mancano gli attributi title sui link, utili sia in ambito SEO che per i navigatori che possono sapere dove arriveranno cliccando su un determinato collegamento.

I titoli in home page, quelli neri nei 4 box, non sono cliccabili. Il link dell’ultimo box in home page è preceduto dal carattere “>” a differenza degli altri.

Il colore dei link non è omogeneo: a volte sono rossi e a volte sono azzurri anche per funzionalità identiche (cfr “Approfondisci” nei 4 box principali e “Approfondisci” nel CSR Online Award 2009).

Le due immagini “Network scuola impresa” e “Working Capital” non sono cliccabili a differenza di quelle presenti negli altri riquadri.

Menu footer

Il menu sembra essere dedicato al network invece che al sito del network che si sta visitando. I vari elementi delle liste menu non sono ben separati da spazi o elementi visivi, pertanto sembrano una frase unica piuttosto che un elenco di link.

Nella parte inferiore “Sitemap” e “Website Info” sono in lingua inglese invece che in italiano e in ogni caso la “I” di “Info” dovrebbe essere minuscola.

Sitemap

Alcune zone sono vuote, tipo “parla con noi”.

L’elenco non è ben indentato. Non si capisce come sono organizzate gerarchicamente gli elementi separati da pipe (alcuni poi sono addirittura su 2 righe quindi mancando l’indentazione complicano ulteriormente).

Metterei una riga di info sotto ogni link.

Javascript e Flash

Non è previsto un contenuto alternativo per i browser senza plug-in Flash, questo obbliga l’utente al download del plug-in per accedere ai contenuti relativi. Credo sia meglio permettere la visione delle informazioni e spingere all’aggiornamento. In ogni caso il messaggio che invita al download di Flash è in inglese nonostante stia navigando il sito in italiano ed il testo è piuttosto sterile e privo di informazioni per i non tecnici (ad esempio non viene detto che installare il plug-in è gratuito, semplice, etc).

Senza JavaScript non è possibile cambiare la dimensione dei caratteri del sito.

Navigazione

La maggior parte dei contenuti sono esterni al sito, pertanto potrebbe aver senso rendere più chiara l’icona presente a sinistra dei link, con l’aggiunta di un attributo title o in altro modo.

I link contestuali breadcrumbs non sono molto chiari, manca davanti la radice “Sei in”, e sono poco in vista. Inoltre in alcune sezioni non vengono riportate (es. Rassegna stampa), creando un problema per l’utente che ne ha fatto uso in tutte le altre pagine del sito.

Nella colonna di sinistra credo che abbia poco senso evidenziare il titolo della pagina in cui ci si trova a meno di, scelta più agevole, mostrare anche il resto del sottomenu allo stesso livello (es. in Privati – Fisso compare a sinistra solo il menu “Fisso” evidenziato in rosso, mentre avrebbe senso che ci fossero tutti gli altri figli gerarchici di “Privati”, ovviamente non evidenziati).

Varie (SEO, usabilità, etc)

La maggior parte degli URL del sito non sono SEO friendly e potrebbero invece essere ottimizzati (come anche gli URL delle ricerche). La cartella “tiportal” potrebbe essere evitata e comunque è diversa rispetto alla cartella in cui viene caricata la home page.

La favicon ha lo sfondo bianco invece che trasparente, su alcuni browser (come Firefox su Mac) si vede quindi un quadratino bianco in quanto lo sfondo del browser è grigio.

Il riquadro di Teleborsa in home page non ha titolo nè descrizione nè un suo riquadro che lo integri nell’interfaccia, risulta quindi estemporaneo, poco comprensibile e poco gradevole.

Nelle barre di scorrimento verticale, presenti in alcuni riquadri in home page, potrebbe non essere chiaro a tutto qual è la parte della barra da trascinare (io ad esempio mi sono posto la domanda ed ho usato la rotellina del mouse).

Non è stata pensata una pagina apposita per l’errore HTTP 404 che ora risulta essere quello generico di Apache.

Non esistono i documenti predefiniti per le cartelle, quindi richiamando ad esempio http://www.telecomitalia.it/content/tiportal/ ricevo un errore HTTP 403 non gestito.

Suppongo quindi che anche gli errori HTTP 500 etc non siano stati gestiti.

Manca il meta tag description in ogni pagina.

I title delle pagine non sono ottimizzati per i motori di ricerca nè per gli utenti, ad esempio – in quest’ultimo caso – quando entro in una sotto sezione nel titolo vedo solo il titolo di quella pagina, non anche quello dell’elemento padre (vedo ad esempio “Privati” invece di “Info & Assistenza – Privati”).

Il sito non risponde a telecomitalia.it, cioè senza il www davanti.

La validazione W3C per la sola home page genera 38 errori e 15 warning per l’HTML.

 Torna su