La progettazione di interfacce è in continua evoluzione e non si modifica unicamente seguendo i trend estetici del momento, ma anche e soprattutto per facilitare l'interazione dell'utente e ridurre le possibilità d'errore. In questo senso, negli ultimi anni sta avendo sempre più riscontro il cosiddetto approccio "One Thing Per Page", ovvero la definizione di una sola interazione, o di un solo elemento grafico, per ogni singola pagina. (more…)

Continua a leggere UX: vantaggi e svantaggi della progettazione One Thing Per Page

Categoria: Web Design

Tags: ,

Nel corso dell'ultimo biennio, la progettazione per il web è diventata sempre più organica, tanto che alle attività di codice e di webdesign si è affiancato lo studio dell'efficacia delle interfacce, anche in termini di risposta e appeal sull'utente. Il 2016 è stato certamente l'anno dell'esplosione dell'UI Design, con l'affermazione di alcuni trend ripresi dalla maggior parte degli attori mondiali in rete, e molti di questi sono destinati a sopravvivere anche nel 2017 appena incominciato. Altri invece, rappresenteranno vere e proprie scommesse rispetto al passato. Di conseguenza, quali sono le tendenze che maggiormente spopoleranno nei prossimi mesi sul fronte della progettazione delle interfacce? (more…)

Continua a leggere I 5 migliori trend UI per il 2017

Categoria: Web Design

di napolux

Il testing di applicazioni web a volte può risultare difficile. A volte si ricorre a tool come Selenium o altri simili, ma questi tool non coprono "decentemente" la parte di interfaccia. Su Ajaxian è stato pubblicato recentemente un articolo relativo a Syn una libreria che si propone di risolvere questo problema. Permette, attraverso una semplice sintassi "chainable" di simulare eventi del browser quali click, digitazione di testi, focus e persino il drag&drop. Syn.click( {},'hello' ) .type( 'Hello World' ) .drag( $('#trash') ); L'esempio mostra la simulazione di un click sull'elemento con id "hello", la digitazione del testo "Hello World" e il drag del mouse sull'elemento con id "trash". Più facile di così...

Continua a leggere Testare le interfacce in Javascript

Categoria: Scripting

Sul sito del New York Times hanno adottato un sistema particolare per notificare al lettore il suggerimento di articoli correlati a quello corrente. Potete vederlo in azione su qualunque pagina con lunghi articoli: basta scorrere la pagina fino in fondo e a quel punto vedrete apparire nell'angolo inferiore destro un box a comparsa con il link/suggerimento. Su Codrops viene fornita la soluzione per implementare l'effetto attraverso poche righe di codice CSS e Javascript (basato su jQuery). àˆ disponibile anche una demo. Di default, se l'utente chiude il box, esso non ricomparirà  più scrollando nuovamente la pagina verso il basso. Tra i commenti, però, l'autrice dello script segnala la piccola modifica da apportare al codice nel caso in cui si desideri far sempre ricomparire il box. Chiaro, comunque, che in questi casi l'attenzione non va posta tanto sul codice, quanto sull'impatto e sull'utilità  della soluzione a livello di progettazione dell'interfaccia e di interazione con l'utente. La trovate utile, ben concepita, interessante?

Continua a leggere Suggerire articoli correlati come sul New York Times

Categoria: Scripting

Ricorro al concetto di falso amico consapevole che non è in tutto sovrapponibile al caso di cui voglio parlare. Rimane però l'idea del trarre in inganno. Sul sito di Querious, un'applicazione Mac per la gestione di database MySQL, è presente sulla destra una serie di miniature che, ingrandite, propongono ottimi screenshot del programma. Ora, in questi casi è sempre lecito chiedersi "ma sono tonto io o c'è qualcosa di sbagliato?". Indovinate dove per ben tre volte ha puntato, istintivamente, il cursore del mio mouse. Indovinate qual è l'unica zona della miniatura che non fa ingrandire l'immagine.

Continua a leggere I ‘falsi amici’ nelle interfacce web

Categoria: Web Design

Tags: ,

Anche. Immaginate di trovarvi per la prima volta di fronte al più classico dei menu, che contiene le seguenti voci: File Modifica Visualizza Strumenti Aiuto (more…)

Continua a leggere Chi cerca trova… e chi modifica?

Categoria: Software e Servizi

Volete un buon motivo per installare, se non l'avete fatto, la versione 3.0 di Silverlight? Io uno l'ho trovato ieri, quando ho scoperto Quince, un'eccellente collezione commentata ed esplorabile in base a vari criteri di pattern per le interfacce web. C'è una versione HTML della lista, ma è buona solo come anteprima di quello che è possibile trovare nella versione per Silverlight.

Continua a leggere Quince: una libreria di pattern in salsa Silverlight

Categoria: Web Design

Ho trovato divertente e illuminante la lettura dell'articolo Realism in UI Design di Lukas Mathis. Attraverso una serie di esempi (ne riportiamo uno in fondo al post), l'autore espone quello che dovrebbe essere un principio guida da tenere sempre presente nella progettazione di elementi di interfaccia, specie quando essi sono rappresentati da simboli che riportano a idee e concetti (si pensi alla 'casa' che rappresenta il concetto di 'ritorno alla home page o alla pagina principale'): le persone sono confuse dai simboli nelle interfacce se essi hanno troppi o troppo pochi dettagli, un elemento di interfaccia dovrebbe collocarsi a metà  strada tra il realismo spinto e l'astrazione totale. Non c'è bisogno di evidenziare, in effetti, quale di questi tre elementi funziona di più per rappresentare un pulsante :)

Continua a leggere Attenzione all’eccesso di realismo!

Categoria: Web Design

Trovo che alcune soluzioni Javascript in cui mi imbatto quasi quotidianamente siano molto simili ai celebri sei personaggi di Pirandello eternamente alla ricerca del loro autore. Nel caso che ci riguarda da vicino la ricerca potrebbe essere quella di uno scenario di utilizzo. Lo script in questione è questa select editabile che è possibile realizzare grazie a un apposito plugin per jQuery. Ecco la demo. In buona sostanza, il plugin fa sì che una normale select con le sue belle opzioni venga sostituita da un input di testo editabile che però continua ad emulare il funzionamento della select. Di fatto, è possibile a questo punto selezionare un valore tra quelli predefiniti o modificarne uno o crearne uno ex novo e poi passare all'invio del modulo. Non mi soffermo qui nei dettagli su quelli che non so se definire bug o limiti (che magari più che dello script sono della mia capacità  di coglierne la logica di funzionamento). Una buona sintesi delle possibili osservazioni è presente tra i commenti al post di presentazione. Il punto è: in che contesto d'uso una simile soluzione potrebbe essere utile, accettabile, consigliata, etc.? Quali accorgimenti trovare per rendere manifesta all'utente la duplice funzione di select/campo di testo modificabile? L'unico appiglio che trovo tra il già  visto è l'ibrido select/box di ricerca del sito Giraffe Restaurants di cui parlammo in questo post. In quel caso, almeno, mi pare che a livello di comunicazione della funzione il problema sia stato affrontato brillantemente.cialis next day delivery

Continua a leggere Una select editabile

Categoria: Web Design

Intendiamoci, niente di rivoluzionario, ma può tornare utile come spunto in situazioni analoghe. Il riferimento è al widget per la ricerca implementato sul sito della catena di ristoranti inglese Giraffe Restaurants. Un ibrido, appunto. Un unico elemento che in prima istanza propone all'utente una serie di opzioni da cui scegliere (quartieri/zone di Londra o altre città  inglesi), ma che consente anche l'inserimento di testo per cercare località  non presenti nella lista in cui poter trovare un ristorante della catena. Fadeyev, commentando, cita il caso dei campi di ricerca con i suggerimenti automatici come possibile modello per questo tipo di componente ibrido. E in effetti mi viene da dire che si tratta di una sorta di auto-suggest statico invece che dinamico. A prescindere dalla bontà  della scelta come salvaspazio, a me è piaciuto il modo in cui viene fornita assistenza nell'uso del widget. La scritta evidente sul campo, il messaggio di aiuto che compare sull'hover, quello di errore restituito in caso di ricerca non andate a buon fine (anche se in quest'ultimo caso si poteva fare decisamente meglio con il tooltip che compare passando con il mouse sulla voce su cui vogliamo dei chiarimenti).

Continua a leggere Un po’ select, un po’ box di ricerca

Categoria: Web Design

Tags: