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.

Yesterday I attended a Projection Mapping workshop held by Giuseppe Torre. Projection mapping is based on projecting images or videos on non-flat surfaces creating fake geometry or visual effects on top of real geometry.

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

Israeli developer Tali Garsiel analyzed the source code of the 2 main open source web browsers: Firefox and Chrome, in her article she explains in details how browsers different engines work, how web pages are rendered and how bad formed code is handled.

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

Waiting for the time when cars will drive themselves, there are some interesting experimental apps around aimed at assisting drivers in various ways.

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

Compared to printed world the web is typographically a lot poorer, PHP Typography is a tool aimed at helping web developers enrich paragraphs with hyphenation, spacing control and stylizing typographical symbols such as ampersand, quotes marks etc. There’s also a WordPress plug-in version

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

That’s a smart campaign run by Tesco in South Corea, a way to promote on-line shopping simulating a virtual supermarket experience in the subway.

via ninjamarketing

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

http://lite.launchlist.net/

Thanks to long exposure photography and some LED it was possible to display two invisible phenomenon:

The spatial quality of RFID

WiFi signal strengh in Oslo

Both projects were developed by Timo Arnall

Even if 2 years old that’s the only interesting Facebook advertising campaign I’ve seen. In a time where everything have to be “shared with friends” or “liked” Burger King provocatively ask people to wipe out their friends to obtain a free burger.

via cnet.com

Wordle is a very nice piece of software written by an IBM researcher as a personal project. Worlde creates word-clouds from user provided text or URL, I used it several times I find the resulting image beautiful most of the time, it is even possible to change color schemes and layout of the final image. I think the generated word cloud is quite useful as well, nothing to do with that stupid tag clouds that luckly are not so popular anymore.

Aaron Koblin defines himself as “an artist specializing in data and digital technologies“, he is the head behind many interaction design innovative projects such as

The Johnny Cash Project

The project asks Johnny Cash fans to paint a frame of the singer’s music video “Ain’t No Grave”. On the web site thejohnnycashproject.com it is possible to browse all of the contributions in various ways. The Johnny Cash project received a nomination at Brit Insurance Designs of the Year 2011

Other interesting projects are TheSheepMarket.com where the artist asked workers from Amazon Mechanical turk to draw a ship. Flight patterns, a visualization of air traffic over North America. House of Cards Radiohead video

Aaron Koblin has a TED talk where he explains the concept behind some of his projects. http://www.youtube.com/watch?v=4v4XxlfVk3o

Regex are quite hard to understand, so a quick tester is almost necessary. Just type the rule and the text to be tested, if the rule is met your text becomes yellow. There’s also a handy quickreference.

http://regexpal.com/

IOU is a project aimed at engaging people in the production and distribution process of clothing. Every clothe has a unique identifier usefull to get information about the weaver that handwoven the fabric in India and the artisan that produced the finl piece in Europe. Buyers are invited to share a picture of themselves wearing the clothe to complete the story. That’s not the first project that tries to make a connection between producer and consumer, but I find it interesting also for the way the push the concept in every aspect of the proposal, such as the way staff is presented or the social sharing selling mechanism.

Bill Buxton is a researcher at Microsoft, on his personal page he gives the opportunity to browse his collection of input and interaction devices. Each piece has a note where Buxton explains why he find it interesting. The collection includes devices from the last 30 years, you will find common devices, like some microsoft and apple mice and some peculiar pieces. The one in the picture above is a’90 joystick I’m proud to have in my closet!

http://research.microsoft.com/en-us/um/people/bibuxton/buxtoncollection/

Due to usability reasons Apple disabled position fixed on IOS Safari, that’s a reasonable behavior when visualizing 1024px layouts on the small iphone screen since a fixed bar could take all of the screen space.

However if you need to implement a fixed div on IOS there are 2 viable solutions:

1) Doctyper moves a div according to scrolling to make it appear fixed

post: http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

example: http://doctyper.com/stuff/iphone/fixed/

2) Google gmail keeps everything static and reimplemented the iphone scrolling on a div

http://code.google.com/intl/it-IT/mobile/articles/webapp_fixed_ui.html

That’s one of the most emotionally immersive web site I’ve seen

The photographer Phillip Toledano documents the days spent with his father after his mother died, the old man suffered of short memory loss.

The layout is a photobook, I really like the way it’s presented full screen with spatial navigation.

dayswithmyfather.com

[...] We live in a dynamic, data-driven society that is continually sparking new forms of human interaction and social contexts. Instead of romanticizing the past, we want to adapt our way of working to coincide with these developments, and we want our work to reflect the here and now.

Our work focuses on processes rather than products [...]

Instead of operating under the terms of Graphic Design, Interaction Design, Media Art or Sound Design, we want to introduce Conditional Design as a term that refers to our approach rather than our chosen media. [...]

That’s an excerpt from Conditional design manifesto, the defining document of a group of designers and media artists.

On their web site it is possible to find documentation of their workshops and some commisioned work produced according to the manifesto.

The one that took my attention is Laptop reflections

A software takes a picture from the webcam and a screenshot of computer screen at the same time, the 2 images are then overlayed.

Handy tool to get some stats about flash files, games or whatever. Just include mochibot library and add 1 line of actionscript. And the service is free. mochibot.com

Beautifull Ipad app to browse music using a planetarium metaphor, artists are stars, albums are planets, and tracks are moons.  Planetary web site

via infosthetics

Sometimes you can have a nice interactive experience without tons of lines of codes.

Skittles Touch teh Rainbow

Project by Luna Maurer, every 5 minutes a digital camera take a snapshot of Amsterdam sky. On the project website it is possible to browse the archive filtering the images by various parameters. sky-catcher.nl

Since the widespread diffusion of webcams embed in laptop and desktop computers there are many web-based projects asking people to take part with their own images.

Persuade people in front of a computer to turn on the webcam and gift his image to your cause is not that obvious as it appears.

Devuelve el saludo a aznar

The project asks people to return the greating to Aznar. It is a response to the hand gesture done by the former spanish PM to protesting students at Oviedo University. Here the full story.

Now, Take a Bow

To celebrate the 10th anniversary if KORT film festival, the graphic designer Jonathan Puckey made this interactive project asking people to play a few seconds rehearsal in front of their webcam. nowtakeabow.com

From the same author, Jonathan Puckey, a similar project is

One frame of fame

Fans of C-Mon & Kypski music band are asked to replicate a pose that will be featured as a frame of band video “More is less”. oneframeoffame.com

Lost Valentinos Nightmoves AR video

If the previous 3 projects ask users to show their faces the Lost Valentinos’s is quite the opposite. Using augmented reality visual markers and cutted out videos the project ask people to create a set for the band videoclip. Here is a youtube video explaining the project. lostvalentinos.com

Considerations about Netflix “disaster survival” philosophy:, to say redundancy. The idea is to offer reduced services (instead of no service) when you have server problems or a server is down.

http://www.codinghorror.com/blog/2011/04/working-with-the-chaos-monkey.html

Top 15+ Best Practices for Writing Super Readable Code

Some standards used in code writing to have a maintable code.

thanks to tecnocrazia.com

Privacy fears raised as researchers reveal file on iPhone that stores location coordinates and timestamps of owner’s movements

By Charles Arthur, on guardian.co.uk

Smush.it is a losless image compression service, do not expect to have a significant reduction in weight but in some situation reducing even few Kbs can help

>http://www.smushit.com/

Pieceable viewer promices to transform your Iphone app in a web viewable swf object. I haven’t tryied it yet, but if it works.. good job!

via thetechlabs

Ikea ads are often noticeable, I love these 2 360° interactive videos to promote their kitchens:

http://demo.fb.se/e/ikea/dreamkitchen/site/default.html

http://demo.fb.se/e/ikea/dreamkitchen/site/default.html

2010 Ikea cookbook deserves a look too

Dare digital is a digital advertising agency based in London, in their portfolio there are some interesting campaigns:

BMW augmented reality AD

An online/offline campaign based on hoppers and twitter for Sony Ericsson, the campaign is not brilliant but the mechanics is interesting.

product testing viral for a sony ericcson smartphone

The one I like the most is this banner campaign against tobacco: on msn and Tthe Guardian

WordPress plug-in to add different form elements as custom fields in the “new post” form
In conjunction with custom post type UI it can transform wordpress in a proper CMS

http://wordpress.org/extend/plugins/custom-field-template/

An alternative plugin, apparently more advanced is

Advanced custom field

http://wordpress.org/extend/plugins/advanced-custom-fields/

This plugin provides an easy to use interface to create and administer custom post types and taxonomies in WordPress.

Custom Post Type UI Screencast from Brad Williams on Vimeo.

Easy and effective way to transform wordpress in a powerfull CMS
http://wordpress.org/extend/plugins/custom-post-type-ui/

 

LiveZilla, the Next Generation Live Help and Live Support System connects you to your website visitors. Use LiveZilla to provide Live Chats and monitor your website visitors in real-time. Convert visitors to customers – with LiveZilla!

 

http://www.livezilla.net

Excel file format is pretty hard to handle and it seems that CSV files are not 100% compatible with the de-facto standard of spreadsheets.

PHPExcell is a good solution if you need to export some data from SQL database using PHP

Project providing a set of classes for the PHP programming language, which allow you to write to and read from different file formats, like Excel 2007, PDF, HTML. This project is built around Microsoft’s OpenXML standard and PHP.

http://phpexcel.codeplex.com/

Any programming language has a function to generate random numbers, for ex.  rand ( int $min , int $max ) in PHP or  Math.round(x) in Javascript.

The numbers generate by these function are considere pseudo-random because they derives from a mathematical forumla or depend on time counting.

In specific applications like games and gambling or for security it is required to have reliable random numbers. Here the possibilities I found:

1. Fortuna is a cryptographically secure pseudorandom number generator, a JS implementatio can be found at http://sourceforge.net/projects/clipperzlib/

2. Random.org offers true random numbers to anyone on the Internet. The randomness comes from atmospheric noise.

3. The most reliable solution is an hardware generator such as Quantis, a physical random number generator exploiting an elementary quantum optics process.

Step by step guide to add an IFrame as a tab on facebook fan pages.

http://www.hyperarts.com/blog/adding-iframe-application-to-facebook-fan-page/

A service to generate password can appear futile but I use it everytime I need a neutral strong password. You can choose the length and if you want symbols. It also suggests a way to remeber the password

strongpasswordgenerator.com/

http://humanstxt.org/

A good idea to give credits to all of us web workers.

I don’t think anyone will ever see it, but a little bit of well-hidden auto-celabration do not hurt

We Are People, Not Machines.

It’s an initiative for knowing the people behind a website.

It’s a TXT file that contains information about the different people who have contributed to building the website.

It is not easy to find online shops that accept paypal in Italy and UK, Amazon do not as well as Bol.it, Waterstone’s and Blackwell.

I finally found bookdepository.co.uk, the price of the book I bought (“You are not a Gadget” by Jaron Lanier) was around 3 euros higher than amazon but they deliver for free worldwide. The book took around 3 weeks to be in my hands but it arrived in perfect conditions.