Interaction design notes and links
tech

UX on smartphones and tablets by Martin Belam

UX designer Martin Belam gives some interesting thoughts about designing apps for smartphones and tablets on its blog.
First of all designers needs to understand that mobile phones and tablets are used much more and in many different situations from what is considered the classic user scenario.
I find amusingly real a survey stating that europeans are never more than a meter away from their phones, it means smartphones are most of the time the best tools to check for information on the Internet.
Another study conducted in USA demonstrates that tablets are mainly used at home.
The diagram from the research shows how tablet usage changes based on location.


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.

tech

Neuroscience in web design

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.

 

tech

Picup App and file upload on IOS Safari

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.

tech

Wget could save your web-developer life

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.

 

 

experim

Crowdsourcing language translations with Duolingo

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

tech

Social media in web design the good and bad

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.

tech

Cubiq

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.

tech

UI design for touch devices

Interaction designer Josh Clark explains on netmagazine.com some rules to take into account when designing for touchscreen mobile devices. Since interaction on touchscreen happens through direct on-screen manipulation the physicality of the device have to be taken into account. That means interaction designer have to take care of ergonomics and other industrial design related issues.

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.

infoviz

Skeuomorphism love or hate

CDJ PADMUSIC - Interface User

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

infoviz

Microsoft get rid of interface metaphors

Windows Phone 7 Interface

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.

tech

Dynamically change speed and timeout in Jquery Cycle

Jquery Cycle is a very good plug-in. It turned out usefull in a lot of different situations thanks to the many options and customizations, check the option reference page for the complete list.

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;
}
experim

“TapSense: Enhancing Finger Interaction on Touch Surfaces” Paper

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.

tech

The hype of responsive web design

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.

tech

projection mapping

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

 

infoviz

Deb Roy on TED – The birth of a word

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

experim

Journey to the End of Coal

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

infoviz

GestaltLines

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

Donkey Kong in New York

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.

experim
infoviz

information navigation on body

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

experim

BLABLA a film for computer by Vincent Morisset

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

tech

How Browsers Work

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/

experim

Context awarness in driving

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

 

tech

PHP Typography

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

 

news
tech

Interface details in Google+

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/

adv

Pringles banner

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

 

infoviz

Feedback loops on Wired

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

experim
infoviz

Brendan Dawes

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

adv

France 24 – The Birds

france 24 - the birds movie screenshot

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

 

 

adv

Tesco subway virtual store

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

tech

Launchlist

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

http://lite.launchlist.net/

infoviz

Immaterials, RFID and WiFi visualization

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

 

adv

Burger King Whopper Sacrifice

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

infoviz

Wordle

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.

experim
infoviz

Aaron Koblin

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

tech

Regex tester

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/

experim

I Owe You project

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.

experim

Bill Buxton input and interactive devices collection

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/

tech

Position fixed on mobile Safari

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

experim

“Days with my father” by Phillip Toledano

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

experim

Conditional design manifesto

[...] 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.

 

 

 

tech

Mochibot flash games analytics

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

infoviz

Planetary by Bloom

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

 

adv

Skittles low tech interactive video

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

Skittles Touch teh Rainbow

experim

Sky catcher

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

experim

Webcam based collaborative projects

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

tech

“Working with the Chaos Monkey” on Coding Horror

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

tech

Code writing best practice

Top 15+ Best Practices for Writing Super Readable Code

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

thanks to tecnocrazia.com

news

“iPhone keeps record of everywhere you go” guardian.co.uk

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

tech

Yahoo smush.it

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/

tech

Try IOS apps in web browser

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