The next thing …
Posted by Nicola
At the moment I’m quite busy organizing the IV Italian IA Summit in Pisa and preapering my speech. But there’s a new project under the hood. A new site completely devoted to UX and IA with interviews, news and resource. So … stay tuned.
Maps: a new metaphor for user interaction
Posted by Nicola
During the last year we read more and more discussions about cellphones and how they’ll earn a dominant position in our digital life. The iPhone and the new smart phones are certainly both a confirmation and a push toward that direction. Personally my preferred way to access the information is still a wide monitor (the next one could be a 32″!) and that’s why I’m always been sceptical about forecasts predicting everybody will be using cellphones to access the Web. For how long can you read on a small low resolution display? You can read or write a small post but you can’t spend a couple of hours on a 3″, you have to keep on scrolling and zooming and images are very little or you have to pan to see them entirely.
Today I found on the New York Times an interesting article which doesn’t make predictions but focuses instead
on the new emerging metaphor for user interaction on mobiles: the map. One of the designer of the early Macintosh said we’re facing a revolution similar to the introduction of the window metaphor (initially developed by Xerox). This is interesting news, this changes perspective and scope. The map metaphor means the mobile is not used to access large amount of general information but only small, specific, localized pieces of data while we’re on the go. There are also studies showing how our brain has developed very good skills for map interaction so this could benefit users but for interfaces designers I think this arises a lot of new challenges since we’re all still so accustomed to the old window metaphor. But you know: new challenges new possibilities. So I’m very curious about what this new metaphor will bring us. And the giants are already working on it with Google going to launch its Android which will make large use of Google Maps and the brand new service “Google Latitude“. Nokia is also working hard on maps as I’ve had the chance to see at the last “Web 2.0 Expo” in Berlin.
There’s another important aspect underlined in this article: the concept of privacy and how different generations perceive it. It’s not a typical user experience factor but I think it will greatly impact on the success of this new metaphor. Because it will depend on how much of our personal information we’re ready to share with friends, with companies and with … who knows who is tracing our walk down town or our summer journey? Google? Nokia? The government? A spy satellite? Your ex girlfriend or your boss?
Have you already developed something using the map metaphor? Are you planning about it? Will it be a success? And could we import it on the desktops? Let me know.
Nicola
P.s. I suggest you to read the full NYT article: http://www.nytimes.com/2009/02/17/science/17map.html
We want to touch
Posted by Nicola
The idea for this article started when I saw this video showing an application for the iPhone. It’s an application for tracking your weight and BMI. You’re probably thinking it’s an useless application unless you’re a top model or more than 400 pounds. Well I’m surely neither, I just found it Stumbling.
The application is simple and does just a couple of things but it does them in a very easy and pleasant way and since a person on a diet could be quite stressed I think this is even more important.
What impressed me is the completely new way to interact with the application, no keyboard nor keypad emulators, just turn wheels and other knobs with such a good response time you could think you’re interacting with a real device. The confidence is also improved by proper sounds feedback, not the usual “ding” “bing”. I don’t know about studies on visual and sound signals but I think that sound signals are elaborated faster by our brain because they’re simpler.
But I want to go further, during the last months we’ve all been exposed to many videos, tv ads and direct experience with touch enabled devices that has aroused the global desire to interact differently with our phones, multimediaplayers and PCs. Personally when working with the PC I often feel the will to grab a whole window with my hand and throw it away instead of clicking the close button, it would be much more fun! So what I would like to understand is: should the new applications consumed by PC users be rethinked and provide a touchscreen interface? Would the users prefer it? And since we’re in business could a touchscreen interface be more productive?
While preparing this post a first important answer to the first question arrived, the new Windows (code named Windows 7, expected to retail by 2009) will natively use the touchscreen technology, all the videos I’ve seen shows the user interaction this way. That means we’re going to see a huge explosion of new applications touch enabled.
Here are some of the most intereseting videos showing Windows 7 touchscreen applications:
Since two giants as Apple and Microsoft are moving in this direction we could answer yes, let’s rethink our applications in therms of touch interaction but I want to find better reasons or if you prefer less commercial reasons. Let’s think about what people usually do with a PC: enter letters and contracts, enter data into spreadsheets or management applications, read and write e-mails, surf the web, manipulate images and videos, play video games, create content for the web. When entering data and specially text I think the better thing to touch is a keyboard but when entering numbers there could be cases in which a different interface for example an on screen wheel or a knob could help the user to concentrate on his task and give him more awareness about what he’s adjusting. Except text and numbers when the user is interacting with an object I think that giving him the ability to interact with hands would make him feel immediately more confident with the application. Here the crucial thing is the choice of the metaphor. Think about zooming an image. Some touchscreen applications require you to use 2 fingers moving together outwards or inwards, other applications require the use of 4 fingers (2 per hand), other require to make a circle with a single finger, the radius and center of the circle define the direction of the zoom and the portion of the picture.
Another common situation in which touching could be a good solution is the interaction with a list of data. A rich list (with pictures, title and main details) give the user the idea he’s interacting with an object and touching on it should result in the most common action: open a new screen with details or just select it to enable further actions. This way we could simplify the view as in this example showing a list of videos.
Independently on the situation a crucial factor is the feedback and the response the user gets in reply to his input. With iPhone apps everything moves, every interaction seems to move something as a result: the whole screen scrolls, an item flips, another icon gets larger, … this gives an immediate feeling of really modifing something, it’s not just a screen change! Fluidity and continuity are the keywords.
So did you find cool touch applications? Are you rethinking the interaction for your users in a “touch way”?
Write a comment below and let me know.
Nicola
Google Chrome review
Posted by Nicola
Google browser is here!
I downloaded it the same day it was available even if it’s not been easy since the link initially didn’t work so I read the beautiful comics drawn by Scott McCloud introducing Google Chrome. The first page was very promising, they said the Web has completely changed during the last years transforming pages and sites into applications we use everyday, so “Wouldn’t it be great to start from scratch?”. When you read things like these from giant of innovation as Google you start imaging any sort of things. To tell the truth after my test I can safely say Chrome won’t change our interaction with the web but it surely has many interesting innovation. Here we go.
Installation
Installation is simple and even if Chrome is installed in a non default folder you can still uninstall it via control panel as for the other Windows applications.
General interface
The first thing you’ll notice is how fast it is to start, just as launching notepad or other minimal applications. And minimal is absolutely the right word for the interface, they did a really great job in reducing the browser interface to the essential leaving all of the space to what really matters to you as user not of the browser but of a site or web based application. This is a solution that lets you concentrate on the content you’re reading and you have a really different feeling especially if you use Firefox with 3 or 4 toolbars as I do. How did they get this? Well they started frowning the title bar where you usually find the page title, after all they thought: you can find this information in the tab title, even if the tab is not so wide and when the title is quite long you need to move the mouse over it to see the complete title.
Then they got rid of the menu bar and this is a more questionable choice since a lot of user and mostly beginners tend to rely on “File” and “Edit” menus. It took me a while to find the print command under the “Control the current page” icon which happens to be a blank document icon so it reminds things such “new window” or “new tab” which indeed are the first voices. Maybe just adding 3 thin lines in the icon would better suggest that it relates also to the current page. Another missing feature is a print preview command and at the moment it seems impossible to print just a selection instead of the whole page.
Another peculiar solution is not having an icon nor the name of the application in the application bar, it just reads “Google” on the top right, and when the window is in full screen mode even that tag disappears. In a sense this helps the user to concentrate on its job on the other it makes think “what is this”, “what application am I using” but it perfectly fits to Chrome philosophy, I’m using a browser but what I’m really using is a web site, a web application and I think that when I get used to that I’ll appreciate it. To complete the slimming course they also dropped the status bar which now is visible only while downloading a page or when you move your mouse over a link. A very simple and good solution, same functionality with more space for the main content.
Navigation bar
The navigation bar together with the bookmarks bar is the only bar you have in Chrome. It has a Web 2.0 style so very simple and light colors. The first thing I noticed is the URL field since when you visit a site only the name of the domain remains in black while the rest of the URL included the “http://” becomes light gray. This is a good solution for 2 reasons: 1) it acts as a sort of title bar so you always know where you are; 2) is very useful against phishing since your eyes get caught mainly by the name of the domain.
The URL box is now called Omnibox, since you can use it even to search Google, by default, or a different search engine or search on sites such Amazon and EBay but this last functionality is not immediate so the user needs to be trained about it. The Omnibox is smart so when you start typing it try to guess what you want suggesting recent websites containing those letters in the domain name or in the title of the page. If you visited a site containing “go” it suggests … “google” but also “go.com”. So it helps you find what you need and saves your tired fingers. A very similar functionality is available in Firefox since version 3 the plus here with Chrome is that when you start typing the more appropriate URL is already highlighted and written in the URL box so you just need to hit enter. I find this incredibly useful since for my most visited sites I just need to type the first letter followed by enter et voilà I’m there.
There’s no homepage icon by default but you can enable it through options.
The favicon is displayed only in the tab not near the URL, I would prefer to see it there, that gives more comfort about being on the right site but it can easily be faked, Google Chrome’s team choice puts instead still more attention to the real URL. Also more attention is given to the URL since if you want to bookmark it the icon stands on the left as opposed to the right position chosen by the Mozilla team.
Changing browser
Moving to Chrome is very simple and painless. During the installation it imports the two more important things you need: passwords and bookmarks both from Firefox and IE.
Anyway here there’s a bug since when you change the password for a site it doesn’t update its own database and keeps on suggesting the old imported one.
Rendering
I’ve checked some of the main sites and some sites I manage and all display perfectly with no odd behaviors apart from YouTube (one of Google’s sites), the “sign in” button has its label underlined while it’s not with FF3 but it is with IE7.
At the moment the only serious problem I’ve found with Google Chrome is the rendering of unsorted list (<li> tag), the standard dots appear jagged as with like a resolution image.
Searching
Hitting Ctrl-F or F3 appears the search box but you have to pay attention because it slides out from top right and if you’re reading the bottom of the page you could not notice it.
There’s some innovation here too since besides showing the total number of matches found it also shows thin useful lines on the right scrolling bar that allow you to jump to the specific point. Indeed an identical mechanism is already available with some development tools but it’s the first time I see it used in a browser. The downside is that for non technical people it could seem a graphic error specially when you have a lot of results and so a mob of lines. It’s also useful to have all the matches immediately highlighted while you type.
History
History can be searched but can’t be ordered by site, I expected to have an autocomplete field for history but it’s a normal field, on the right of each result there’s an empty box which I think is supposed to show a preview but it remains blank. After a more thorough test I found it really shows the thumbnails, the empty ones are from my previous history with Firefox.
Configuration
In the password management the “show password” button is clickable only after you choose a site and displays just the password. I find always uncomfortable to click a slim row between a long list and then having to click a far away button. I think Chrome team made this choice for security reasons but after all if I click the button to show a password I already made sure there are no enemies at my back so showing one or a dozen makes no difference and you save the user from moving the mouse around. There’s another limitation with passwords, when you’re prompted to save one you only get 2 possibilities: save it or never save it, while it’s useful to be able to say “not now” as offered with Firefox.
Bookmarks
Here is one of the greatest lacks of this first version, there’s no bookmark management! At first I found it incredible so I searched every menu and possibility and when right clicking “Other bookmarks” I found the voice “Open all bookmarks” I thought that must be the voice but … Chrome instead tried to open all the several hundreds of local bookmarks I have and finally … crashed. So you can’t easily organize you favorites and you can’t neither label them.
Wording
With such a minimal interface there’s not too much to say here but in my Italian version I found once “nerd” in the task manager and once “smanettoni” which means “nerds” and a tab labeled as “roba da smanettoni” which sounds really unprofessional and poor.
Other features
- “Incognito” navigation lets you surf without leaving traces, no cookies, no history, … To differentiate from normal browsing the “Incognito” window has a purple color and an icon I really like, I really feel conspiring. When you open an “Incognito” window the message that Google Chrome shows sounds strange: … “Be wary of”, … “secret agents”, … Anyway it’s a good feature for example me and my wife can now check separately GMail accounts without logging out. There’s also a limit, you can’t open more than one “Incognito” window so that they’re completely separated, you can instead open more tabs, all sharing the same cookies though.
- Each tab is run in a separate memory process so if one crashes site crashes you can close that tab and keep on browsing.
- The Flash plug-in is already installed.
- To use Java you need to download version 6 update 10 which is not a stable one.
- Chrome doesn’t stop pop-ups, they’re shown by their title bar at the bottom of the window so that you can decide to kill them immediately with their close button or drag them up to see the content.
Conclusions
The first experience with Google Chrome has been really pleasant and you wouldn’t say it’s just version 0.2. What I found more interesting is: the speed at which it starts; the light, clean interface that gives you a really different feeling; no crashes (apart when trying opening hundreds bookmarks simultaneously); easy installation and import from Firefox.
On the dark side I put the lack of bookmarks management and no possibility to add plug-ins even if the code is completely open source and based on Webkit and that’s a good thing. At the moment I won’t switch from Firefox mainly because I can’t work without those plug-ins I use everyday but I’ll keep a very interested eye on the future versions.
Have you already tried Google Chrome? Let me know your experience.
Nicola
User experience … al discount!
Posted by Nicola
Oggi ho accompagnato mia moglie a fare la spesa, attività che per me ha un appealing di -10 ma ogni tanto mi piace farlo per vedere qualche nuovo prodotto e curiosare tra gli scaffali mentre mia moglie acquista effettivamente quello che serve. Uno dei miei punti di interesse è quello dei cestoni, dove si trovano offerte degli oggetti più disparati, solitamente versioni cinesi a prezzi stracciati di quei prodotti un po’ superflui ma che fanno voglia a tante persone. Qualche volta però si trovano dei prodotti che vale la pena comperare come la raclette (nella foto), da quando l’abbiamo comperata tutti gli amici che l’hanno provata sono poi andati a prenderne una.
Bene il principale problema di questi cestoni per me è sempre stato capire i prezzi. Sotto agli occhi una giungla di prodotti, sopra agli occhi appesa ad un filo una lunga sequenza di foglietti con un nome e un prezzo ma quasi mai il prezzo sopra la cesta corrisponde, quindi … inizia la ricerca. Nella speranza che chi mette questi prezzi abbia seguito una qualche logica la prima ricerca è una ricerca di prossimità quindi guardo 2 o 3 foglietti più a sinistra e due o tre foglietti più a destra. Se questa ricerca non da risultati parto dall’estremo più vicino dello striscione appeso e lo scorro tutto sequenzialmente, non troppo rapidamente però perché spesso è anche difficile sapere come un certo oggetto sarà stato nominato. E’ una ricerca piuttosto fastidiosa anche perché a volte stranamente il prezzo non c’è proprio, è impossibile trovarlo anche facendo il giro dei cestoni e cercandolo sull’altro lato dello striscione. Come ho detto solitamente si tratta di prodotti di scarsa qualità per cui il mio interesse è più che altro la curiosità di sapere a “quanto poco” si possono vendere e se non trovo subito il prezzo lascio perdere.
Oggi la sopresa! Un esperto di user experience deve aver parlato al direttore del supermercato, i foglietti con i prezzi sullo striscione sono sempre piazzati senza nessuna corrispondenza ma sotto al nome ed al prezzo appare una foto nitida e a colori del prodotto! Credetemi è stato un vero piacere, una piccola modifica che permette di scorrere l’intero striscione in pochissimi secondi e una sola volta, se non vedo la foto di quello che cerco non devo rifare il giro nel dubbio che magari il commesso abbia dato al prodotto un nome strano che non mi aspetto e comunque se anche sono pignolo e voglio rifarmi un secondo giro questo mi costa ancora pochissimi secondi anche perché posso cercare per macchie di colore senza mettere pienamente a fuoco la foto, come oggi, quando cercavo il prezzo di un set di attrezzi per barbecue contenuto in un involucro verde brillante. Inoltre lo striscione che adesso appare a colori è anche molto più gradevole.
Alla prossima user experience.
Differenziare i pulsanti
Posted by Nicola
In questi giorni ho installato Tracks un’applicazione Rails che mi aiuta ad implementare il famoso metodo GTD (Get Things Done) di David Allen per la gestione dei progetti lavorativi ed extra.
Tracks è molto semplice ed intuitivo, infatti non so nemmeno se ci sia un manuale dato che finora non è ho avuto bisogno. L’interfaccia è moderna e fa largo uso di Ajax per aggiornare i dati: vedi un’attività che vuoi modificare, ad es. “Iscriviti al convegno”:
clicchi la matitina e nella stessa pagina ti si apre il form per modificare l’attività.
E zac! eccoci al punto. Su un’interfaccia composta di bianchi e grigi compaiono due pulsanti colorati. Beh devo dire che la prima volta che ho aperto uno di questi form il mio occhio è subito sceso in basso attirato da questi oggetti colorati, saltando tutto quello che c’era in mezzo, un po’ come quando l’idraulico ti presenta il conto, non importa quante e quali voci abbia scritto nella fattura, l’occhio salta subito al totale.
Il fatto che l’occhio sia inizialmente attirato da questi due pulsanti è fondamentale perché l’utente capisce immediatamente che se vuole salvare le modifiche dovrà premere “Update”, se invece ha cliccato la matitina solo per vedere i dettagli premerà “Cancel”. In molte interfacce ci si trova con dei pulsanti standard che sono assolutamente anonimi e quindi non attirano l’attenzione dell’utente o al più con dei pulsanti colorati in tema con il resto dell’applicazione e quindi anche questi se pur esteticamente più gradevoli tendono a “scomparire”. Un altro aiuto all’usabilità viene dato dal fatto che i pulsanti siano colorati differentemente, certo usare un colore diverso per ogni pulsante può sembrare eccessivo quando si hanno molti pulsanti ma in questo caso come nella maggior parte dei casi i pulsanti sono solo due e sono associati ad azioni tra loro opposte. L’abbinata verde - rosso è quindi a mio avviso azzeccata dato che già in molti altri contesti di utente siamo abituati a pensare al verde come il colore dell’OK, avanti, via libera, non ci sono problemi; mentre il rosso ci dice: “attento”, “sei sicuro?”.
Un ultimo accorgimento usato è quello di illuminare i pulsanti quando il mouse ci passa sopra, per cui il pulsante “Cancel” ad esempio acquista uno sfondo rosso chiaro. Con l’illuminazione del pulsante l’utente viene ulteriormente sollecitato a valutare quello che sta facendo e quindi viene aiutato a non sbagliare.
Sono solo due pulsanti, i due soliti pulsanti che ritroviamo nelle applicazioni che testiamo o in quelle che sviluppiamo ma sono l’elemento imprescindibile di ogni interfaccia e uno degli elementi con cui si interagisce maggiormente, per questo una corretta valutazione può cambiare l’esperienza dell’utente in modo significativo.
Alla prossima user experience.
Nicola
