Responsive design, in the jargon of website developers, is a technique that optimizes the user experience and adapts the layout to the viewing audience.
In a basic example (sorry to the experts), a photo will be on the right of the screen, if the site is accessed using a computer. However, if accessed on a phone it may be below the rest of the content. If you do not understand, try changing the window size of this site and see how your experience measures up.
To broaden this concept a bit, we can assume that we are more a likely to use multiple screens. Starting with the television, it will not be long before emerging experiences feature “responsive design” that is compatible with multi-screen viewing. If I have a phone, a tablet and a TV in my living room, what is the best way to enjoy The Voice? Video on the tablet, a live Twitter stream on the TV and the phone as a remote? If I have am a heavy Twitter user, should I tweet via the tablet and use the TV for streaming video? Can I watch two videos at once, from two camera angles? What is the best configuration for this? Should the viewer or the media producer decide? One suspects, this field of investigation is in its early days…
Eventually, I suspect we will see responsive ecosystems that take into account the fact that a user interacts with multiple devices simultaneously. Netflix could create a much better viewing experience if it were able to detect that I am in my living room with my PS3 AND my tablet or another if it knows that I am using my console. The ideas are beginning to be realized with the announcement of the new Xbox 360.
The company NDS, spotted by Wired, has designed a prototype that pushes this idea even further. It created a living room wall that is a huge screen divided into portions that change roles depending on who is in front of them or time of day.
Read more from Jean Pascal at A Nos Vies Numériques.
Tags: Media consumption, Multiple screens, Multiscreen, NDS, Responsive Design, Responsive Ecosystems, User Experience, UX, Xbox 360
An article recently shared on Nurun’s Yammer discussion boards caused a bit of a stir among our community. The basic premise: Why is the Save icon still showing a floppy disk? After all, when was the last time any of us used one of these things? (A quick yet extremely scientific survey confirms that the last time most of us did, years were beginning with a one. And yet, today’s users clearly have no difficulty correlating the “save” action with the floppy disk icon.
The use of partially symbolic depictions of this kind is part of the larger practice of skeuomorphism.
Skeuomorphs are material metaphors instantiated through our technologies in artifacts. They provide us with familiar cues to an unfamiliar domain, sometimes lighting our paths, sometimes leading us astray. (Nicholas Gessler, UCLA)
If we stop and think about it for a second, quite a few action behaviours are based on very concrete metaphors—the most obvious example being the button, which mimics something we interact with on anything from doorbells to air conditioners. Some other behaviours, however, are born with computing and need to be learned (blue underlined text = hyperlink).
The use of skeuomorphs, by offering known landmarks as a point of reference, creates an instant (yet superficial) understanding and puts a reassuring mask on some very abstract mechanics. Extensive skeuomorphism, as practiced by Apple (just think about iCal’s leather, PhotoBooth’s curtain or Notes’ writing lines), is known to annoy more than a few designers. It’s all fine and dandy to put users at ease by referring to the real world, to flatter nostalgia even, but is it not also staying prisoner to the physical object’s now irrelevant limitations? If skeuomorphism is welcome when first encountering a concept, doesn’t it become just an annoyance after a while? This is a recurring debate.
The battle lines are drawn: on one side, the iOS school of thought, on the other, the Windows Metro approach. The first camp refers repeatedly to the real world while the other creates its own patterns. Our viewpoint is from no man’s land: select what to use based on context.
For a functionality to be used again and again, and more so for an expert system, extensive use of skeuomorphism is going to interfere with the task by introducing artificial limitations and visual noise. However, tasks worthy of developing expertise to master them are far and few between. For more mundane tasks, skeuomorphism warrants consideration. In truth, we’re no great admirers of Photobooth’s red curtains, but if the alternative is having to check a user manual every time we want to upload a picture to our profile…
If there’s one principle to apply when creating user interfaces for the general public, it’s to avoid the “made by pros for pros” syndrome.
But let’s go back to our floppy disk, shall we?
Think about these users who have never used a 3.5″ floppy — soon, the majority of people — and observe their behaviour: The relationship with “saving” is understood. (The same phenomenon occurs for the two vertical bars used to pause a video, even if their meaning has been lost for almost everyone.) Thus, when disconnected from the tangible object it used to refer to, the floppy disk icon/save relationship becomes abstracted into a cultural code.
The floppy disk symbolism will endure as long as its visual representation stays in common use, evolving from a reference to a convention.
Seeing the floppy survive might bring a knowing smile to people old enough to know where it comes from. Younger folks, on the other hand, will simply read the “H” within a rounded square with a small off-centre vertical bar to mean “save.” The youngest ones, for their part, will have no clue about what that means. “Save? You mean that it was once necessary to manually declare you wanted to keep your data?!”
Tags: Apple, Cultural Code, Floppy Disk, Graphic Design, Icons, iOS, Nicolas Gessler UCLA, Old Icons, Skeuomophism, Skeuomophs, UX, UX design, Windows Metro, Yammer