Some interesting results from the study are:

1. Tablets are used more for “light content creation” than “reading the news”, this evidence is against the general thought that tablets are devices mainly used for content consumption.

2. Usage patterns changes a lot from weekdays to weekends.

3. Tablets users tend to have a partial engagement with the device, tablets are used while watching TV, eating, talking, etc.

Belam uses this last evidence to point out that apps should be designed to do just one thing, on the contrary pubblishers usually wants their apps to showcase all of their services. Referring to his experience Belam mentions The Guardian Eyewitness app as a good example of focusing on one single task. The app provides daily photographs of news event and nothing more. The reasons for its simplicity has to be found in deadlines pressure, constrains resulted in a better UX.

In 2010 I discovered the book Neuro Web Design: What makes them click? By behavioral psychologist Susan M. Weinschenk. I was intrigued by the idea of learning some psychology to provide better on-line experiences. I have to say the book was really disappointing, Dr. Susan Weinschenk gives cheap advices such as:

If you gift something on your web site people will feel obliged to give you something back

or

Use a picture of a hot girl to gain attention.

The other day I found a quite inspiring post on UXmatters.com titled Using Neuroscience to Inform Your UX Strategy and Design by Lori Kirkland. I was more than happy to change my mind on the use of neuroscience in web design! The article analizes some web sites and mobile apps using SCARF theory.

SCARF: a brain-based model for collaborating with and influencing others is a paper by David Rock where social interactions are analyzed from a neuroscientific point of view. The author states that the human need for social interaction is as necessary as that for food and water. Starting from the need for Status, Certainty, Autonomy, Relatedness and Fairness the author provides some examples on how it is possible to minimize conflicts and improve cooperation in different environments such as work or school.

Going back to Neuroscience in web design, Lori Kirkland explains how Amazon emphasizes user sense of Status by providing personalized reccomandations on its home page. Customer reviews give a sense of Relatedness with other people. Fairness is conveyed by transparency in showing prices and the amount of saved money for each item.

I believe Certainty (that is the ability to predict the future) and Autonomy  (sense of control over events) are fundamental when designing interfaces as well. Think about the bad feeling you have when clicking a link that triggers an unexpected reaction, as it happens with some intrusive banners. At the same time you have a sense of Autonomy whenever an interface allows you to easily accomplish all the tasks without need for manuals or support.

In conclusion Neuro Web Design book is a waste of money and time, I’d like to meet the 20 customers that gave 5 stars to the book on Amazon. On the other hand I’m glad to discover that neuroscience can inform user experience and web design. I hope to find more on this topic.

The other day I realized that Iphone and Ipad have the HTML <input type="file"> disabled. It means you can’t upload any file from your IOS device to a webserver through a web site or a webapp. I guess that’s one of the reasons why most online services need a proprietary app (ex. Facebook, WordPress, Flickr, etc.).

Picup offers a workaround to the file input issue, It offers an external upload service to be used on web sites. The problem is that the flow is not smooth at all:

1. Users need to install Picup.
2. When they click on the upload button on your web site (you need to write Picup code to replace the input button with a link to Picup app) the app opens.
3. On the app a messy, not-customizable, interface asks to choose a file.
4. The file is then uploaded to Picup server (I don’t like my users to upload files on a 3rd party server).
5. When the upload is done users are sent back to Safari and they can proceed filing up your form.

Exluding Picup as a viable solution, the most elegant option is to develop a native app for Iphone and for Ipad, luckily phonegap allows web developers to easily write native apps,  adding the file upload feature seems quite easy.

IOS6 (expected in autumn 2012) is supposed to implement the file upload feature in Safari. Maybe Apple walled garden is loosing some stones.

From Wikipedia

GNU Wget is a computer program that retrieves content from web servers [...] It supports downloading via HTTP, HTTPS, and FTP protocols.

Its features include recursive download, conversion of links for offline viewing of local HTML, support for proxies, and much more. It appeared in 1996, coinciding with the boom of popularity of the Web, [...] Wget can be easily installed on any Unix-like system and has been ported to many environments, including Microsoft Windows, Mac OS X, OpenVMS, MorphOS and AmigaOS.

We are in an almost always connected era but still a software to download entire web sites can be useful in many situations, here are 2 examples.

If you need to show a wordpress based website during a presentation or public event it’s much safer to have it off-line. WordPress is not an easy CMS to be ported, it can take hours to port it from a server to a localhost. Using Wget you can easily export a fully functional static html version of the website in few minutes.

Another smart use of Wget I’ve seen is to make a native mobile app out of wordpress. WordPress can be a handy solution if you are working on a content-rich app like a products catalog. Using PhoneGap you can transform an html5 web app in a native applications for IOS, Android and many more. Use Wget to flatten WordPress into a static html website and author it into a native mobile app that doesn’t need Internet connection.

On LifeHacker I found a Wget tutorial from 2006.

Luis von Ahn is an associate professor in computer science at Carnegie Mellon University. He is the inventor of CAPTCHA and RECAPTCHA, CAPTCHA is a annoying method used on many websites to check if a form is filled by a human, it is based on the recognition of distorted letters. RECAPTCHA is a much more interesting project, it transforms CAPTCHA in a crowdsourced books digitalization project. Instead of computer generated letters, users are asked to decode distorted words coming from old books.

In TED talk “Luis von Ahn: Massive-scale online collaboration” the researcher presented duolingo his new crowdsourcing project. The goal is to let the crowd translate wikipedia pages. I found the web site very nice and professional, it’s easy to use and you can really learn some spanish, english or german with a step-by-step approach.

I already knew many interesting crowdsourcing projects, most of them are disguised as videogames, check Reality is Broken for some examples. What I found amazing in duolingo is the idea of giving away a program to learn languages in exchange of free translations and I love the way the 2 tasks are perfectly integrated.

Watch TED talk “Luis von Ahn: Massive-scale online collaboration”

Try duolingo

As a web designer I believe we are in the social media nightmare era. From big companies to small business everyone knows he has to be social. The result is they ask me to put as many as share, like and follow buttons as possible.

I’m very happy I found an article on Smashing Magazine that express my frustration toward the abuse of social buttons. Paul Boag starts explaining why we do not need a share button in the middle of a form filling and he gives some good advices on how to create a better user experience through the integration of social media in web sites.

1. Highlight relevant content inside a page, such as a strong quote, and make it easily shareable.
2. Tell people why they should follow you on Facebook, what kind of content will they find in your fan page?
3. Highlight friends interactions inside your web site, what did they like or share?

I’m confident social media have a growing role in shaping user experience but first we need to go over the early days enthusiasm.

Read Social Media Is A Part Of The User Experience on smashing magazine.

Matteo Spinelli is a freelance web developer with good communication skills. On his blog http://cubiq.org/ he explains his personal projects giving details about trial-and-error process and giving away useful snippets.

Reading his posts on html5 games for iPad makes me want just seat and start messing with code.

According to the way mobile phones are grabbed the most used menus should stay at the bottom of the screen, that’s the place where thumb usually rest. On the contrary dangerous buttons should stay at the top of the screen, far away from accidental taps, that’s the place where IOS puts the edit button.

When holding a tablet like the iPad thumbs are usually on the top corners of the devices, so that’s the place where important button have to be. An exception to the rule is when buttons display  content, in this case they are better at the bottom of the screen where the screen space is not hidden by the hand.

On netmagazine.com the author gives some more tips regardings design of websites for touch devices and the right size for buttons.

Reading a post celebrating the genius of Steve Jobs, I discovered the concept of skeuomorphism. Wikipedia defines it as

a derivative object which retains ornamental design cues to a structure that was necessary in the original. Skeuomorphs may be deliberately employed to make the new look comfortably old and familiar, such as copper cladding on zinc pennies or computer printed postage with circular town name and cancellation lines.

On interaction design blogs there is a debate about the use of skeuomorphism in interface design, most of the criticism are referred to latest Apple IOS apps.

Dmitry Fadeyev argues that the use of skeuomorphism in interface design hampers innovation

I especially dislike the latest set of interfaces from Apple for the iPad. They look great, but they cling to the physical look far too much, losing the opportunity to create a fresh look in the process.

iBooks user interface

James Higgs finds a dichotomy between Apple minimalistic product design and the expression of purest kitsch found on many apps interface.

[...] how difficult can it be for someone, even a relative digital newcomer, to understand a list of books? Difficult enough that the only possible way they could understand it is to present them in a “wooden” bookshelf format?

James Higgs questions the need of leather trim in Find My Friends app

It’s undeniable that the latest  IOS apps push too much on physical world resemblance.

I personally dislike this manneristic approach, I don’t find it neither beautiful nor useful  but I understand that Apple products are designed for a vast audience, iPhone and iPad are contributing in bringing on-line many digital illiterates. I believe for these users the use of skeuomorphism makes perfectly sense.

At the same time most of mobile apps are not used for mere productivity, they are considered tiny videogames to have fun with. From this point of view skeumorphic interfaces helps in setting the mood. For example if you use a music mixer on iPhone the real DJ consolle look and feel helps in setting the context. The same thing happens with iBooks, Reminders and many other apps. The same concept is gaining field on Mac computers with the introduction of the app store and other IOS elements.

UI Touch CDJ Pro

Of course there are a lot of people using IOS devices in a productive way, the App store have plenty of options for them, just check the straightforward interface of Photoshop Express or the minimalist approach of Stanza, my favourite book reader.

Stanza book reader

I found the editorial on April 2012 issue of Creative Review quite inspiring. Patrick Burgoyne argues that Microsoft is a step ahead of Apple for what concern interface design. I already apreciated the unconventional approach used by Microsoft mobile interface, but I haven’t thought at the deeper conceptual switch behind it.

Still in 2012 interface design seems unable of getting rid of 1970′s desktop metaphor and other real world objects references (Check out Zooming out from the Desktop for more on the topic). You find a proof of it on buttons emboss effect used to give a feel of affordance, and on the design of most Mac and IOS icons and software interfaces.

ibooks interface looks like a realworld bookshelf

Do we still need references to real world obejcts in digital interfaces? According to Mike Kruzeiniski, from Windows phone design team, we don’t.

We don’t need to make an eBook look like a book for people to understand how to use it. The book isn’t the cover and binding, it’s the images and the text that make the story.

Jeff Fong, interface designer at Microsoft, tells Creative Review they get inspiration from  print design, transport systems and infographics.

Transportation wayfinding was a major inspiration for us, it’s a clear, direct visual language that helps people navigate a complex environment.

In a market were Apple and Android fight each other for the best shiny and glossy interface I find Microsoft Metro a beautiful bold alternative.

I’m using Cycle to have some sliding news on a mobile webapp for IOS and Android. I want users to have the possibility of choosing how long any piece of news stays on the screen. Unfortunately there’s not an option to dinamically change speed and timeout settings but I figured out that it is possible to achive the result using “destroy” command to stop the slideshow and then creating a new one with the speed value setted by the user. To avoid the Cycle starting back from the first slide it is possible to get the current slider before destroyng the Cycle and using startingSlide option when creating the new Cycle.

$('#tabs').cycle({
  fx: 'scrollLeft',
  speed:  transSpeed*100,
  timeout: transSpeed*100,
  startingSlide: currentSlide,
  autostop: 1,
  after: onAfter,
  end: function() { 
  callNews();
  }
 });

function onAfter(curr,next,opts) {
   currentSlide = opts.currSlide;
}

Chris Harrison, Julia Schwarz and  Scott E. Hudson from Human-Computer Interaction Institute and Heinz College Center for the Future of Work at Carnegie Mellon University presented an interesting paper about the use of different parts of a finger to perform different action on touchscreens.

They analyze sound to capture what part of the finger is used when hitting the screen, according to the video the use scenarios looks relevant and user-friendly. The same sound-based technique is used to recognize different materials on big touchscreens.

For more information and to download the paper visit TapSense page on Chris Harrison web site.

One of the latest trends in web design is responsive templating. Responsive layouts use the finest techniques to arrange page elements according to screen size. In this way a web page should perfectly fits any screen resolution from a mobile phone to HD TV displays.

I’ve seen some nice responsive layouts so far, for example Simon Collison web site looks simple and beautiful both on my laptop and my ipod. But I believe responsive layout is not an elegant solution for many web sites.

From September 2011 Boston Globe web site started using a responsive layout, it switches from 3 columns to 1 depending on the device. It’s the first example of broad audience web site using this technique. In my opinion the final result is not good at all. Regarding page design the web site looks poor, I usually like clean pages but the Globe looks to me as it is missing something (I don’t know how much the visual appearance was influenced by the responsive layout but I guess they had to sacrifice some details). The need to have the same information at different page widths means it is not optimized for any screen resolution. At 1280px the 3 columns do not seems well balanced, it looks too stuffed. On the contrary it renders nicely on small screens (Tested on ipod and on my 240×320px android phone) the horizontal space is well used but I find the page too long, there is too much information for a mobile home page.

From a usability point of view the idea of having different rendering with different devices do not helps in having a consistent user experience. It does not allow to use spatial memory to find an element you have previously seen in another device.  It is much better to display the full  layout even on smaller devices such as ipad in portrait mode and 7″ tablets. Both ios and android do a great job at rendering 1024px wide web pages.

I believe the best approach in designing a web site nowadays is adopting solutions relevant to the content. It can be a good idea to have a fluid layout for image galleries but does a newspaper really need all of users screen width? Fluid layouts works well on a limited  range (for ex. 980px to 1440px wide) they fit a wide range of devices, from 7″ tablets to 27″ screens (usually people with HD screens do not use their browser at fullscreen). Sometimes the 980px wide layout can be used even on mobile phones, the smart zoom allows smooth navigation and reading ability.

In most situations having a mobile version of the web site is ideal. Mobile version means mobile layout and a mobile information architecture. Think about the context in which mobile browsers are used. As many guidelines suggest having a “full version” link is a good practice, as I explained before, people usually rely on spatial memory to retrieve information.

To sum up, I don’t think responsive layouts are overall bad, they can be used successfully for simple page structures, for example one column designs and web sites with not much content. Responsive templates can also be fine for general purpose blog templates, usually people using them do not have enough tools or time to take care of screen resolution issues, they need a one-size-fits-all solution. Custom designed web sites, newspapers, magazines and content rich web sites better have 2 different web sites (standard and mobile).

At http://designmodo.com/responsive-design-examples/ you will find a rich gallery of responsive web sites.

One the most relevant examples is the Ralph Lauren London flagship store projection

What we learned at the workshop

first of all you need some powerful projectors, 4 projectors at 10.000 lumens it’s a starting point. From the software point of view there’s not an industry standard, I appreciated that the workshop was conducted using only free software.

The scene taken with Kinect webcam

We worked with a simple setup: 3 white boxes on a table. We used a webcam positioned on top of the projector to have a picture of the scene, we then used Gimp to build a mask for the boxes on the scene, since we were working on a small scale I found it easier to work directly on the projector. To have a precise map the camera focal length have to be the same as the projector.

Mask of the scene

Once we had the mask, we used VPT 6 to play a masked movie on the scene. VPT is a realtime projection software aimed at video mapping, using it was a bit painful since the interface is not friendly (at least for me) and it crashed a couple of time. But after a while a was able to project 4 different videos stretched in accordance to the scene.

2 stretched videos in VPT 6

The last experiment was based on Blender, using Microsoft Kinect we captured a 3d mesh of the scene and imported it in a 3D scene. Once we had the 3-dimensional model of the scene it was possible to create some advanced optical illusions to be projected.

The final result was nice considering that we’ve done everything in 5 hours. I now have a good idea of what is possible to do with projection mapping.

From what I’ve seen so far I believe projection mapping can give nice results in enhancing building facades, for example it can be used to focus attention on some details in an engaging way. Unfortunately most of the videos I’ve seen so far are just techy eye-candys becoming boring after 30 seconds.

Examples of clever projection mapping

Puma L.I.F.T.

Vodafone evolution of mobile

New Balance sneaker

MIT researcher Deb Roy gave an ispiring talk on TED about audio-video data analisys aimed at understanding language learning process.

Roy registered 90.000 hours of video and audio in every room of his home for 2 years since his son was born. The researcher analyzed the data with his group, Cognitive Machines at MIT Media Lab, and was able to track the steps his kid took to correctly pronounce some words. The data is presented as an amazing audio timelaps.

Deb Roy has now founded Bluefin Labs, a company where he does the same analisys with TV programmes linking TV information with on-line discussions and selling marketing reports to big brands and broadcasters.

Watch The birth of a word on TED

A Social-Media Decoder on Technology review

Journey to the End of Coal is an interactive documentary made by 2 freelance journalists, Samuel Bollendorff and Abel Sègrètin. The documentary tells the story of chines coal miners and their sacrifice to satisfy their own country’s appetite for economic growth.

The documentary is presented as a first person interactive experience, the use of photographs with ambient sound, the first person point of view, the possibilities to interact with people choosing between different speechs, all makes the experience engaging and unique.

Play the interactive documentary

more info about the project

GestaltLines are a new type of data visualization presented by Ulrik Brandes and Nick Bobo from University of Konstanz at VisWeek 2011 conference.

GestaltLines are inspired by Tufte’s sparklines, Gestalt theory and Multivariate glyphs, they can be used to display dyadic relationship changing over time in a dense, data-rich diagram. Each time-sample is represented by a line rotated on the horizontal axis, using a seesaw metaphor, an horizontal line represents balance while rotation and lenght represent direction and quantity of imbalance.

GestaltLines represent how the balance-imbalance relationship changes over time using stacked lines, the stack of rotated lines invokes the gestalt principle of common fate (graphical elements of similar orientation are perceived as a whole).

In the paper the authors use asymetric friendship relations over time as case study, I can see many more possible applications.

Download Gestaltlines paper

via infosthetics

Gamification is the use of game elements and aesthetics in non-games context.
The practice is gaining increasing success on Internet based services. Some of the most common examples of successfull gamification are Foursquare with its badges and Stack Overflow reputation system.

At the moment I’m reading Reality is Broken: Why Games Make Us Better and How They Can Change the World by Jane McGonigal, In the first pages I found an excessive enthusiasm on bringing the joy of videogames in so-boring real life. Going on reading I found many relevant examples and explanations of how videogames work at a psycological level, it’s a really interesting reading to better understand games, but I’m not sure if the behaviors explained by McGonigal can have a real impact outside game context.

For sure games mechanics have been used successfully in other context since long time. For example recruiters use role games to better understand candidate social skills, loyalty programs and points systems are used in retail marketing to stimulate consumers to buy.

Another interesting resource on the topic is the Google Tech talk Meaningful Play: Getting Gamification Right by Sebastian Deterding.

Deterding analyzes what UX designers and product managers can learn from games.
Some of the ideas expressed in the talk:
1. when designing a score system it is important to connect with users personal goals and community shared interests.
2. In games the story, even if basic, can be fundamental for the fun.
3. Goals have to be linked with learning and reaching goals have to be increasingly difficult.
4. Failure increases the pleasure of success.

Other resources about gamification
The Gamification on codinghorror.com
One of the founders of Stack Overflow explains where did they get the games-like ideas used on their Q&A engine.

What Web Designers Can Learn From Video Games on smashingmagazine.com
Anne Miles gives some examples of videogame interface elements that can be used in web design.

One of the strangest navigation I’ve found so far on a web site. The information scattered on human bodies is quite engaging and relevant to the message and the brand (the product is half way between a pair of socks and shoes).

youarethetechnology.com

It remember me this infographic video about porno business by Good Magazine

A well crafted interactive story made with flash and different traditional techniques.

The story is about human communication, I like the minimal interface and I the way the artist balance discoverability with randomness in the interaction.

blabla.nfb.ca

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

One of them is Wikitude Drive, its Augmented reality view allows driver to check directions without losing contact with the street.

Toyota Glass of Water is a sort of game that should make people drive in a more ecofriendly way puting a virtual glass of water on the dashboard and asking not to spill it. I don’t know if it really works but I like the concept.

In Japan Toyota launched Backseat Driver an Iphone game to entertain kids while parents are driving making the kids aware of the root. That’s an interesting way of using real world context in a game and can help the driver to drive better since kids are entertained and they already know how long it will take..
via Creative Review

via A List Apart

Chris Palmieri analyzed some Google+ details that make a difference from similar interfaces. There are some interesting considerations about the use of language. The name + is an unusual decision, it is quite good at explain you “take part at the conversation”, and, when used in the +1 form, I find it more appropriated than the ubiquitous “like” button (should i put a “like” on a link about a catastrophe?).

There are some thoughts about the minimal graphic design and the overall use of polite interface.

http://aqworks.com/en/blog/2011/07/21/what-we-can-learn-about-service-design-from-google/

Quite unusual example of banner, it doesn’t have external links, it only invites you to go on clicking, thanks to a good copywriting work it succeed.

http://www.bannerblog.com.au/2009/06/pringles.php

On US Wired there is an interesting article about feedback loops, a psychological theory on which many interactive tools are based on.

The idea is that if you have a realtime feedback about your action and the opportunity to change it you will likely change your behaviour.

The article use the example of dynamic speed displays, speed limit street signs that shows realtime cars speed. It seems that highlighting car actual speed causes drivers to slow down. The same results are achievable in other fields, Wattson energy meter do more or less the same with household energy saving.

The full article is available on Wired website

http://www.wired.com/magazine/2011/06/ff_feedbackloop/all/1

I discovered Brendan Dawes through his book Analog in Digiatl out

I like the apparent simplicity of some of his projects, like Play doh as interface or the terrific Cinema Redux, I love the insight it gives into a movie.

brendandawes.com

Nice spot for a international news channel, showing the power of Twitter in spreading revolutions in Tunisia, Egypt and Libya.

I love the (non) use of colors and the hitchcock movie mood.

source: creativereview.co.uk

via ninjamarketing

Very simple yet effective web app aimed at checking that everything is ready to launch a web site

http://lite.launchlist.net/