Jan
18
2012
Here’s a really amusing illustration of how you can prove misleading statements by simply putting 2 graphs together. I especially loved Fig. 6.
via Fast Company
Dec
10
2011
Last weekend I attended Spotlight HTML5 held at U of T covering an interesting range of HTML5-related topics like geolocation, semantic tagging structure, back-end canvas drawing, CSS3, interactive web video, and polyfills. Speakers came from Teehan+Lax Labs, Microsoft, Adobe, and AOL.
The talk about CSS3 was pretty exciting as it highlighted some new features you can now do on the web that couldn’t have been done in the past. The big advantages of CSS3 are better search engine placement from the use of real text, increased page performance, better usability and accessibility, optimized styles, and the ability to draw and animate elements.
A topic that continually came up throughout the various talks was the concept of responsive design, in which the layout of the content adapts to the device/media you are using. Greg Rewis in fact, stresses that browsing experiences should not be the same across different platforms and resolutions. The CSS3 specifications now includes media queries to target not only specific devices but physical characteristics of the devices like screen width and resolution. CSS3 also introduced some new background specifications; background-size is of particular interest, especially from an accessibility perspective. This property lets you specify the size of the background image, either as a fixed value or relative to the background positioning area. It doesn’t sound particularly interesting so far — but say you use background images for text menu items and your users need to bump up the text size for easier reading, the background images would scale WITH the larger text sizes. You end up with an elegant and flexible UI where the text doesn’t look like they’ve broken out of the confines of static images. A great example of this is the Fresh Picked Design site:
The CSS3 talk was only one of many interesting presentations that day, but the other presentation slides can be found on the FITC site. For me, the conference was a great introduction to the new features and specifications enabled by HTML5 and CSS3 that will provide some inspiration for my future designs on the web.
Dec
02
2011
Last night I gave a talk on a UX education panel hosted by IxDA Toronto. I was joined by 3 other panelists: a college new media instructor, a senior creative director of a large design agency, and an interaction designer/educator at a local design studio. It was really interesting to discuss the diverse paths people followed to end up in the UX field. Formal education backgrounds ranged from computer science and information/library science to fine art and design, while others were self-taught and learned on the job.
User experience or interaction design is such a multi-faceted discipline that you need to build a foundation of skills ranging from the creative to the technical and analytical. There is no “one size fits all” educational path.
Nov
11
2011
As a reaction to Microsoft’s recent future vision video, software engineer (and a former concept designer at Apple) Bret Victor wrote a fantastic post entitled “A Brief Rant On The Future Of Interaction Design.”
Victor rants that this future vision is not visionary at all. It focuses too much on screen interaction, which is is not that much different from our experience with our current devices. Case in point, look at all these ‘future’ interactions in Microsoft’s concept:
Each one of these scenes involves a flat screen. Yet, Victor also points out (and passionately so) that each interaction touchpoint involves the use of… hands! As humans, we have not only our fingers but our hands, arms and entire bodies that enable us to manipulate and interact with the natural world and to understand the tactile feedback we receive in return. So why should we be limited to finger pointing on a screen?
He illustrates the many ways in which we can use our hands to manipulate things that we could not possibly express via screen-based interactions:
Rather than limiting people to finger tapping/swiping, we should be inspired by our own human capabilities to design and enable a richer and more expressive interaction with our future tools.
Despite how it appears to the culture at large, technology doesn’t just happen. It doesn’t emerge spontaneously, like mold on cheese. Revolutionary technology comes out of long research, and research is performed and funded by inspired people.
And this is my plea — be inspired by the untapped potential of human capabilities. Don’t just extrapolate yesterday’s technology and then cram people into it. [...] Pictures Under Glass is old news. Let’s start using our hands.
Victor ends with a question that nicely sums up his entire point:
With an entire body at your command, do you seriously think the Future Of Interaction should be a single finger?
Aug
30
2011
IDEO Labs put together a collaborative and non-linear visual story inspired by the exquisite corpse style of storytelling:
The exquisite corpse model is rooted in the surrealist movement, and we are inspired by how many experiments currently in public domain play with its framework (or lack thereof). Our take on the model—in which we essentially asked a group of collaborators to submit sentences/fragments—was to create a dynamic visualization for the “exquisite” story our writers had crafted. These collective fragments formed a base on which we layered sensory artifacts, from voice-over to tagged visuals, and we were curious as to how far we could take the experience.
They asked 150 people to submit a Twitter-length sentence. Using those fragments, they compiled a 1600-word story narrated by a single voice and illustrated it with images from Flickr linked to key words.
Exquisite Corpse Experiment – Chapter One from IDEO Labs on Vimeo.
via Core77
Aug
17
2011
Combining aspects of Lego, video game, and board games, Sifteo Cubes are a new way to play. The prototype concept was introduced in a 2009 TED talk by David Merrill, and now these interactive wireless blocks are coming to market. Showcasing innovating interaction design, these 1.5″-inch cubes with full colour screens are motion- and context-aware allowing players to shake, tilt, jolt, rotate, slide and click to affect neighbouring tiles.
They pioneer something the company calls “Intelligent Play,” which is a vaguely elevated term for a toy that manages to be both fun and smart. They’re video games for people who hate video games. [...] “We’re not trying to compete with Nintendo, Microsoft, EA and others,” Sifteo spokesman Paul Doherty tells Co.Design. “We’re trying to create games that promote learning, spatial reasoning and truly interactive play.”
See the Sifteo cubes in action:
via Co.Design
Aug
12
2011
A simple ring around a tree acts as a new space for kindergarten children to learn and play. The idea of using senses and bodily movement as tools for learning inspired the design:
The preferred space for teaching preschool children avoids the classical dynamics of frontal lectures. In “Philosophical Investigations,” Ludwig Wittgenstein writes that what children and foreigners have in common is the absence of knowledge of language and a set of codified rules. This leads them—in the first instance—to learn through the senses and the body. To give the children more freedom to move around the school, the directors of the Fuji Kindergarten requested Tezuka to design spaces without furniture: no chairs, desks or lecterns. As a result, “Ring Around a Tree” offers an architecture where there are no measures taken to constrain space, in order to liberate the body.
The Japanese Zelkova tree had already been a “place-playmate” for several generations serving as a treehouse, temporary shelter, and climbing area before being transformed as an addition to the Fuji Kindergarten.
Looking back on my own experience, the staircase and balcony of my childhood home was a playmate for my sisters and I. In addition to functioning simply as a connection between floors, it became an area for us and our friends to slide down and climb, listen to story time and to put on puppet shows. What was your place playmate?
Aug
11
2011
Such a wonderful film. Makes me excited for my next travel adventure.
MOVE from Rick Mereki on Vimeo.
3 guys, 44 days, 11 countries, 18 flights, 38 thousand miles, an exploding volcano, 2 cameras and almost a terabyte of footage… all to turn 3 ambitious linear concepts based on movement, learning and food ….into 3 beautiful and hopefully compelling short films…..
= a trip of a lifetime.
move, eat, learn
Rick Mereki : Director, producer, additional camera and editing
Tim White : DOP, producer, primary editing, sound
Andrew Lees : Actor, mover, groover
Aug
10
2011
George Kokkinidis highlights the variety of user interfaces on multi-touch tablets by photographing the resulting fingerprints on an iPad surface after using different applications.
The differences are highlighted by the quality, location, and quantity of the taps and swipes, displaying the unique interactions required by each application and providing a narrative of how a certain application was used.
Read Kokkinidis’ blog entry here.
Aug
09
2011
One of the best things I love about New York City is its brilliant use of urban space to engage the public.
On my recent trip to NYC, I had to re-visit the High Line, a revitalization project transforming the elevated rail line into an innovative public park and space for exploration, interaction, and art installations. This summer, the High Line opened the new section 2 extension that lead to a new public plaza below called The Lot. To my delight I encountered Rainbow City, a whimsical playground filled with giant colourful balloon sculptures (including a bouncy castle) inviting both children and adults and to play.
The installation has since been taken down, but now in its place is another great idea: an open air rollerskating rink. Wonderful inspiration for other urban cities.
Aug
09
2011
I came across a nice article on Smashing Magazine outlining some design guidelines for optimizing performance on mobile devices. Performance plays an important part in creating a valuable, enjoyable and trustworthy experience for the user, that will encourage users to continue using your application/product. Not only does the application need to look amazing, it needs to feel and work amazing as well.
The seven guidelines are as follows:
- Define UI brand signatures
- Focus the portfolio of products
- Identify the core user stories
- Optimize UI flows and elements
- Define UI scaling rules
- Use a performance dashboard
- Champion dedicated UI engineering skills
For example, front-end design can help speed up the perceived performance of a back-end delay by providing intermediary steps displaying the load progress (showing loading animations, text content, etc.) This creates the impression to the user that the system is progressing through various steps rather than experiencing a delay if they simply jumped from screen 1 to 4 as illustrated below.
May
11
2011
Having worked on several projects in the mobile space over the past year, I’m completely drawn to the site Lovely UI, which showcases inspiring mobile user interfaces.
Other resources that serve as good references are Mobile Design Patterns (iOS) and Android Patterns.
May
05
2011
Two wonderful videos explaining user experience design. Now I can show this to my family and friends whenever they ask me what I do.
Who doesn’t love a good UX design, and who doesn’t get totally frustrated with bad experience design.
Hail to all the great UX designers of the world. Spread the love for UX design !!!
ILUVUXDESIGN part I from lyle on Vimeo.
ILUVUXDESIGN part II from lyle on Vimeo.
Mar
16
2011
MIT Media Lab’s Tangible Media Group have developed Recompose, an experimental touch interface that provides tactile feedback.
Recompose is a new system for manipulation of an actuated surface. By collectively utilizing the body as a tool for direct manipulation alongside gestural input for functional manipulation, we show how a user is afforded unprecedented control over an actuated surface.
Made up of motorized tiles that pop up/down, the 3D interface can be directly manipulated by pressing down on the tiles or simply using gestures by waving your had over various areas of the surface, which move in response to your input. The feedback is a 3D visualization of the user’s physical interaction with the tiles. A camera and projector, combined with computer vision are used to recognize and understand the language of the physical interactions.
via Fast Company
Feb
08
2011
Ever since I started taking culinary arts classes back in the fall, I’ve developed an appreciation for beautiful and well-crafted kitchen tools. Heck, I even stroll through Williams Sonoma for fun.
Pop Chart Lab made a detailed mapping of over 100 kitchen implements. I love the visual language in this poster and I learned about some interesting new tools.
via Fast Company
Oct
25
2010
As an avid traveller, I’m a seasoned user of flight search aggregator tools to find the cheapest and most convenient flight that fits my requirements. Tired of scanning through tables of text, I was delighted when I played around with the user-friend Hipmunk, a new flight search tool that visualizes all the flight results in a timeline that makes it easy to read, understand and manipulate.
First off, I love that I can constrain the search to only Star Alliance network since I’ll only fly those airlines to maximize my Aeroplan points. Once the search is performed, the basic information such as price, airline(s), departure/arrival airports, number of stopovers, stopover airport, flight duration, and departure/arrival times are all colour-coded, organized and displayed in the timeline. Exact details are shown in a popup when you select an individual flight. It hides flights worse than others, decreasing the amount of visual clutter to sort through. In addition to the ability to sort by price, stops, arrival/departure times and duration, Hipmunk can also sorts by agony, which co-founder Adam Goldstein describes as
..a combined function of price, duration, and number of stops—basically the total agony you’ll experience in your butt and your savings.
The draggable departure and arrival times on the visual timeline is not groundbreaking, but it’s definitely a refreshing alternative to the existing flight search engines.
And finally, I gotta give brownie points for the awesome name.
via FlowingData
Oct
13
2010
Axis Maps produced a gorgeous series of typographic maps illustrating geography through typography. The works appear as a typical maps viewed from afar, but close-up details reveal only words comprising the landscape. As described by the creators:
Created as a labor of love, these unique maps accurately depict the streets and highways, parks, neighborhoods, coastlines, and physical features of the city using nothing by type. Only by manually weaving together thousands upon thousands of carefully placed words does the full picture of the city emerge.
Some more interesting typographic posters at Ork Posters
Oct
12
2010
Europe’s cultural, ethnic, religious, and political diversity naturally leads to its various nationalities developing stereotypes of the Others. Graphic designer Yanko Tsvetkov created a series of entertaining maps to give us an idea of a few countries’ perspectives of their neighbouring states.
It’s interesting to note how these stereotypes typically reveal more about the country (or our perception of the them) that is doing the criticizing.
Europe according to Britain
Europe according to France
Europe according to United States
Via FlowingData
Sep
28
2010
Newsweek provides a fascinating interactive visualization that compares the rankings of the world’s best countries by economy, politics, health, and quality of life.
Sep
02
2010
One of my favourite bands, Arcade Fire, has collaborated with Google and writer/director Chris Milk to create an experimental video for their song “We Used to Wait”. Made to play in Google Chrome, The Wilderness Downtown starts off asking for the address of your childhood home and then becomes in an incredible audio and visual experience that uses choreographed browser windows of varying sizes popping open or closing and displays animations of digital flying birds flying from one window to the next and a pair of feet running along a street. All of that builds up to a climax when images of your street and childhood home are blended into the video, creating moments of surprise, delight and nostalgia. Self-reflection and sentimental thoughts are triggered near the end with pause allows you to write a message to your younger self, after which animated trees sprout all along your old street.
Using HTML5 technology, the collaborators have created a technologically impressive and creatively piece of work to create an awe-inspiring audio/visual experience.
