Posts Filed Under design
Twitter’s Design Language Influence
I have been running more and more into websites and apps that are heavily inspired by Twitter’s current design language (see below). Out of the Big Four (Google, Twitter, Facebook, and Amazon), Twitter is presently having the most salient influence on the design community. A quick look on Dribbble confirms this observation.
Here is three contributing reasons:
- Twitter’s design language is simple, contemporary, and scalable.
- Bootstrap. It is a toolkit designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.
- Most designers can name Twitter’s creative director. The same people would be hard pressed to name his counterparts at Google, Facebook, and Amazon.
In other news, 1+1=2
Twitter.com on October 29, 2011
Findings on October 29, 2011
Twitter and Sparrow for OSX on October 29, 2011
CCA Launches New Interaction Design Program
This is all kinds of awesome! In fall 2011, California College of the Arts (CCA) will launch an undergraduate program in Interaction Design led by Dr. Kristian Simsarian in a unique environment: the Bay Area. Late last year, CCA reached out to practitioners, thinkers, educators to take part in a series of roundtables and workshops to input to this new initiative. I had the privilege to participate to some of these with alongside designers from Google, YouTube, Apple, Intel, and IDEO. From these conversations stemmed a strong vision and the right level of ambition.
Photo © 2010 California College of the Arts.
“Surprisingly, there is not yet a consistent source for talent in this field. CCA, with its interdisciplinary environment, impressive facilities, and great location at the hub of the digital world, is the ideal place to build a world-class interaction design program,” commented Dr. Kristian Simsarian.
The 3-year program is still being devised but the intent is to prepare students to create meaningful and innovative designed experiences in the realms of work, lifestyle, and play—from computers and mobile devices to interactive physical spaces, games, and social networks. Students will develop technical and strategic skills which will be applicable to numerous industries, from business to entertainment, education, and health.
As Provost Mark Breitenberg put it: “CCA’s core institutional values of community engagement, innovation, and sustainability will infuse this new program and produce highly trained, socially aware designers with tremendous capacity for creativity, [...] we’re looking for talented students who want to change the world.”
The program will be grounded in the Bay Area, in the Silicon Valley. As such it’s a unique proposition not only to prospective students (and parents) but also to the Bay Area Interaction Design community and companies. First, the students will be able to take part in exchanges and conversations with companies and practitioners at the forefront of the discipline through sponsored studios and projects, internship opportunities, and casual events. Second, it is a great opportunity for both CCA and Bay Area Interaction Design community to establish the campus as a hub and a Home for the discipline. CCA impressive facilities could host lectures, workshops, events, conferences, you name it… The IxD community should rise to the occasion to ensure this program becomes one of the best in the world. Lastly, companies will finally have access to a steady pool of world-class talent that has been educated, coached, and mentored in the spirit of what makes the Bay Area unique.
Finally this program, along with similar ones starting around the globe, could be a real turning point for the discipline. Potentially they could educate a new breed of designers that would then go on to a Graduate program outside the field of Art & Design demonstrating how design processes can positively impact political institutions, legislative bodies, healthcare, the Education, the Economy, etc. Undeniably multidisciplinary designers will thrust design and the world forward. This prospect is very very exciting!
For more information about CCA’s Interaction Design Program, visit www.cca.edu/interaction.
Filed Under: design, education, interaction
Metaphors
Over the past few weeks, Mike Kuniavsky has been posting pre-print draft chapters of his upcoming book, Smart Things: Ubiquitous Computing User Experience Design. In Chapter three, “Too much metaphor” (part 1, part 2, part 3 and part 4), Mike argues “metaphors may be most useful during first encounters with a new technology. [...As] the technology becomes familiar, the metaphor may lose its value. Eventually, the metaphor that seemed so helpful may start creating more problems than it solves. [...] Recognizing that metaphors have failed can be humbling, but metaphors, like all tools, need regular maintenance.“
Sony Magic Cap (via Mike Kuniavsky).
Most operating systems today are using a metaphor and a paradigm introduced over 40 years ago. The “desktop” metaphor and “paper” paradigm with folders, files, black text on a white background, etc. have been two of the key enablers for the democratisation of personal computers. First it allowed laypeople to easily operate this technology and make it familiar. Second, it created a bloodline of consumer devices (desktops, laptops, PDAs, mobilephones, smartphones, tablets, etc.) that infiltrated, over the years, every workplace, school, home, and coffee shop.
But as Mike noted, all metaphors eventually fail. Sometime in the late 90s when the Internet, mobile phones, and personal digital content (photos, music tracks, emails, etc.) exploded, the desktop metaphor failed. It failed to serve its most basic purpose by making the operation and manipulation of new devices, new content, and new usages unnatural. With the myriad of devices now forming our connected environment, the evolution of “computer/mobile phone” literacy and usages around the world, and the maturity of the discipline of interaction design, the last obsolete bits of this metaphor and paradigm should be relinquished.
People First UI © Nokia, 2007.
During the Homegrown project, we attempted to do just that with People First UI, which replaced the desktop metaphor and other levels of abstraction with a singular vertical list of content settling over time into a personal history of events. Designed for those of us who face literacy challenges, the user interface has a limited and precise interaction vocabulary (6 nouns and roughly 20 verbs) that reflects how people think and speak. The nouns (or content) – people, messages, photos, places, calculations, and alarms, are connected by verbs – make, call, write, and share. Content comes first, abstract hierarchical menus and applications are substituted with a simpler and universally understood question: what can I do with this? I know this is terribly obvious and not terribly new and yet, so important.
Filed Under: design, interaction, ui
Nokia Contacts Bar
Photo © Nokia, London, 2008.
On October 3rd at Remix in London, Nokia unveiled the new Nokia 5800 XpressMusic, a mobile device for music and social media consumption with a touch-screen. The Nokia 5800 is among the first devices to support Comes With Music, the Media bar, and the home-screen Contacts Bar widget.
I had the opportunity to participate briefly in the early phases of the product development. The product program team and Nokia Design addressed together a number of physical and digital design themes, and very quickly the large 3.2″ touch-screen emerged a great opportunity. In any product, the home-screen is a prime piece of real-estate and mind share, and more often than not, it is the least useful – except to show off your dog, cat, kid, wife/husband/gf/bf, etc. and see what time it is.
The aim was to provide the best music and social media experience possible right from the home-screen by executing on our brand promises: Very human technology and Feeling close, and insights Nokia Design had gathered along the years of observing how people consume media and communicate with their most important people.
People communicate through media.
People access content through people.
The future of media is social.
Simply it was about designing a social media experience that is as human and natural as possible by making multimedia communication reflect the way people think and feel.
Photo © Nokia, 2008.
We wanted to be literal about People Connecting and offer the most explicit representation of human technology and feeling close. We designed a home-screen widget, named Contacts Bar, that shows at a glance the faces of your most important people, your recent activity with them – texts, calls, emails – as well as their latest online media activity from sites such as OVI, Facebook, Flickr, etc.
A picture is worth a thousand words… the myriad of digital photos, music tracks, and videos being shared daily is a clear demonstration that people communicate with more than words . Media allows people to vary and fine-tune the intensity, emotion, and intimacy of their communications. The Contacts Bar is about giving people additional choices on how they explore, live, work, and connect with their most important people.
The press release and additional information can be found in the press section of Nokia.com.
Filed Under: communication, design, mobilephones, Nokia, product, ui, ux
More about remade
The intent was to create a device made from nothing new, distilling utility from the materials already circulating above the earth’s crust. We drew on a simple insight that in the not too distant future humanity will have extracted and worked much of the valuable minerals once buried in planet Earth. We will be compelled to reuse and celebrate what is essentially “above ground”.
We proposed the mechanical skin & bones be made from materials readily available in the lithosphere avoiding the need for extracting resources and reducing landfill.
- Major structural elements are crafted from recycled aluminium courtesy of soda cans with the knowledge that recycled aluminium requires 95% less energy than processing its raw counterpart.
- More intricate plastic parts are moulded from upcycled post-consumer PET from plastic drink bottles, with a lower carbon footprint than any other engineering- or bio- polymer.
- Whole & shredded rubber tyres are increasingly redirected to landfills, but contain a wealth of nutrients that can be extracted and for example re-employed as flexible keymats, dust/water gaskets, or impact protection.
A typical mobile phone contains approximately 44 of the 112 elements known to mankind. Through a principle of economy, we have reduced the number of components within the phone and considered more environmentally friendly technologies such as printed electronic components on non-toxic substrates.
The concept includes a number of features improving the energy efficiency. Drawing upon the fact that more than 50% of the energy a phone uses comes from backlighting the screen, we developed a new graphical look and feel that save energy without compromising style. Additionally, we have prototyped a series of no waste chargers, which power down once the phone is fully charged. This saves the typical 300 milliwatts of standby power wasted when we leave a charger plugged in.
The many small actions illustrated above, when multiplied by large numbers, can indeed change the world.
And most importantly, it works 
Post co-authored with the remade team.
Filed Under: design, Nokia, remade, sustainabilty, ui
Nokia remade
With Olli-Pekka Kallasvuo presenting a short video of the REMADE mobile phone during the Mobile World Congress 2008, I am able to share one of the case-studies addressing sustainability our team* has been working on passionately.
The intent was to create a device made from nothing new.
We drew on a simple insight that in the not too distant future humanity will have extracted and worked much of the valuable minerals once buried in planet Earth. We will be compelled to reuse and celebrate what is essentially “above ground”. Thus we explored the use of reclaimed and upcycled materials that could ultimately change the way we make things.
In remade, recycled materials from metal cans, plastic bottles, and car tyres are used beautifully; whilst helping reduce landfill and preserving natural resources. The concept also addresses cleaner engine technologies, and energy efficiency through power saving graphics.
Remade offers a realistic and beautiful interpretation of upcycling and a tangible starting point for discussion. A discussion we have already started a few weeks ago when two designers from our team joined Jan Chipchase and a few others in Accra to discuss, test, and improve remade with the help of the wonderful people of Ghana.
A local repair technician assembling a remade phone. Jan Chipchase – Accra, Ghana.
Our design team is very excited to join the conversation and have the opportunity to engage and receive critical feedback from all of you.
The press release, short video and additional images are available in the press section of Nokia.com – under the materials section and in the Mobile World Congress 2008 press site. You may also find the short video on Nokia Conversations YouTube channel.
*Andrew Gartrell, Duncan Burns, Rhys Newman, Pascal Wever, Tom Arbisi, Simon James, Pawena Thimaporn, Jan Chipchase, Anne Coates, Peter Knudsen and myself
Filed Under: design, Nokia, remade, sustainabilty, ui
User Interface Concepts from A View of the Future
This second installment is presenting the UI design principles and creative decisions for some of lifestyles Nokia is focusing on: Achieve, Live, and Connect.
The intent was to stretch each category language into new domains and experiences while maintaining Nokia design DNA and brand. During the creative process where people and content were prioritized above everything else, a set of common design elements emerged such as soft forms, tactility and gestures, simplicity and elegance, beauty and smiles.
Our ultimate goal: Simply beautiful communication.
Achieve
Our vision aspires to natural solutions which enhance collaboration a leap forward from today’s cumbersome implements. We are living in an age of virtual teams where people must work without the benefit of in-person sessions using video conferences and remote presentation tools.
Mobile video conferencing becomes easier and more productive when participants are able to visually identify who has joined the call and who is currently speaking, to mute speakers at the touch of a finger, or to start a private conversation with another participant. The dual touch-screen provides enough space to display at once large still or moving faces, documents preview, and contextual actions. The goal was to combine in one glance the people and get-things-done aspects of video conferencing.
Copyright ©2007 Nokia. All rights reserved.
The approach to get-things-done is to provide flexible, natural, and powerful multitasking capabilities with side-by-side view, tiled view, messy desk view. Applications or documents can be left open, pushed to the background, tucked under other things or just minimised to support streamlined or disjointed workflow.
Copyright ©2007 Nokia. All rights reserved.
Input is a critical aspect of the workflow – we all know how annoying it is to have a mouse or a pen that does not work. To afford complex and versatile interactions, we classified the most important workflow and optimised their interaction for either stylus or finger input based on parameters like accuracy, speed, most-likely context, satisfaction, and playfulness.
Copyright ©2007 Nokia. All rights reserved.
Achieve is about what will become possible in the near future when the current limits of mobile communication are erased.
Live
Live looks at the devices we own and what they say about us. We choose our objects because they speak to us in a special way: surfaces are inviting to touch, interfaces are at once intuitive and beautiful, forms are pleasing to interact with. We choose them because they communicate something that we want to be known. The physical and digital blend seamlessly and behave like chameleon to match your many moods and desires. Appearance skins can be created from photographs, music tracks, usage patterns, or simply by sensing the environment.
Copyright ©2007 Nokia. All rights reserved.
The influence of femininity emanates very clearly in this category where shapes and content blend in unique designs.
Copyright ©2007 Nokia. All rights reserved.
All the little moments – gestures and glances that create an atmosphere and help people bond, have been distilled in these personalisable and socially oriented devices. Giving your number simply by touching the other device (near-field communication), inviting and guiding your friends to the next place (navigation GPS or otherwise), etc.
Copyright ©2007 Nokia. All rights reserved.
Live celebrates good design as an expression of beautifully crafted artifacts which involve us in their completion.
Connect
Connect captures core Nokia values and what we value most as humans: staying close to the people that matter. Interfaces are kept perfectly simple in the service of human connection. Memories are collected and filed away to be savored later. Mobile technology is easy to use and available to everyone from the very young to the very old and all of the people who care about them.
People centered communication is the essence of connect, and faces are the portrayal of people. We felt that they should duly take a prominent stand in the design language. The interaction becomes personal and efficient since people recognise faces much faster than words.
Copyright ©2007 Nokia. All rights reserved.
Connect is about facilitating communication with your most important people, all forms of communications. A natural extension to current practices is speech recognition where natural speech can be transcribed into a text message, a note, a task, etc. It lowers the threshold for features like text messaging and email to those that are not comfortable inputing text on a mobile phone keypad.
Copyright ©2007 Nokia. All rights reserved.
It was also important to acknowledge the greater ecosystem of home and entertainment appliances which provides an great environment to share, explore, and consume content. We purposefully used “cliché” examples of the fridge and TV shying away from the much more compelling implementations coming soon.
Copyright ©2007 Nokia. All rights reserved.
Connect is the embodiment of Nokia‘s wish to connect all people.
A View of the Future was created in the spring of 2006.
The Making Of A View of the Future
Since Nokia Design – A View of the Future was presented a year ago at Nokia World 2006, there hasn’t been much discussion about the intent and purpose, the design process and challenges, the successes and failures, and the concepts. This first installment is describing the “making of” with a focus on the purpose and the process.
Late-February 2006, Nokia Design management asked our team in L.A. to make the Nokia Category Vision tangible and meaningful with design & experience concepts for Nokia Strategy Forum – an internal event for Nokia top 100 managers held on May 9th in Helsinki.
At the time, the London team in charge of developing the Category Vision was still in the definition phase, which meant that we had to collaborate very closely with them in order to deliver a shared message. Roughly a dozen people with expertise in trends, industrial design, colours & materials design, graphic design, interaction design, motion graphics, photography, model making and exhibition design set to work with four words: Explore, Achieve, Connect and Live.
Copyright ©2007 Nokia. All rights reserved.
We started to observe people, not objects or technology. We observed and documented needs & wants, moods & modes, behaviors, social ties, lifestyles. We then spent hours distilling internal and external trend forecast reports, digging and hand-picking ideas from past vision projects, gathering inspiration, and interviewing experts and stakeholders company-wide.
Copyright ©2007 Nokia. All rights reserved.
Then we discussed. A lot. The often small, and sometimes big moments of everyday life. We built and illustrated moments we believed were the essence of connecting, showing off, working, and exploring. All these moments were consolidated into structured scenarios and storyboards. We were building the foundations. Everything had to move very fast, moments had to be consolidated or discarded in minutes, the writing had to be compelling, concise and communicable over teleconference for the steering group, stories had to be implementable within the schedule and production capabilities, etc.
Copyright ©2007 Nokia. All rights reserved.
Then we designed in parallel products, colours & materials, and UIs while continuing scripting and storyboarding the four stories. It is hard to capture all the steps and breakthroughs of the design process, but working in the same space, at voice length, with formal daily reviews was essential. We were all aware what the others were doing – ideas and designs were shared, evolved and incorporated instantly.
Copyright ©2007 Nokia. All rights reserved.
Then we went into an iteration and assessment cycle while keeping an eye on the looming deadline. What are we trying to communicate again!? Are the designs telling the right stories? How can we sharpen the message? It was a gratifying and frustrating part of the process. The stories started to animate, the props were modeled and took form on the 3D printer, colours and materials samples got pinned on the wall, etc. The vision came to life. It was also a time where decisions became irreversible, uncorrectable mistakes were made, and production limitations became apparent predicaments.
On May 6th, time was up. The model makers and motion graphic designers could finally get some sleep after working more than 20 hours a day for 2 weeks straight while a few others had to fly to Helsinki from Los Angeles to set-up the space with eleven props and four 2-minutes video clips.
Explore
North/South: A light multimedia companion, featuring a see-through screen allowing the user to interactively hide/reveal both physical & digital world views.
East/West: An active multimedia tool, featuring a wide-screen flexible-folding display & clutch-control interface.The adventurous two-handed usage is tailored for horizontal scanning/navigation and allows the overlay of digital & physical infrastructure for new perspectives. A separate kick-stand charger supports the device for comfortable tabletop viewing & extreme bandwidth multi/media transfers.
Copyright ©2007 Nokia. All rights reserved.
Achieve
MED: A “medium” folding mobile-workspace, featuring dual hinged touch-screens & an adaptive control-spine. Tailored for compact two-handed messaging on-the-go and sturdy tabletop input. Features an external camera, ticker-tape display, and gestural “strip” interface.
LRG: A “large” mobile workspace, featuring generous dual folding touch-screens with an adaptive control-spine. Tailored for sturdy two-handed tabletop multi-tasking and pen input. An intelligent charging slot supports a suite of performance Bluetooth accessories affording strong and clear communication.
Copyright ©2007 Nokia. All rights reserved.
Live
Le Fold: The familiar form of a compact fold made out of wood, a renewable resource, contrasting with the copper trim.
Le Block: A robust backed rich full window front active lifestyle product. A single metal band unites the dedicated function key, camera and volume control. Fit for purpose, both in terms of strength and agility.
L’Assembleur: A well-made mobile platform designed to encourage both formal & informal personalization potential; from point-of-sale to 1st, 2nd, 3rd life & beyond. A series of exchangeable solid-state puzzle blocks slip-lock onto the interconnect chassis/display, with power & data-signals routed via both magnetic & optical couplings. A patchwork motif crafted of pieces-of-me, pieces-of-you. The deceptively simple solid-state blocks encompass the functionality of primary interface, public/private audio-speakers, in-line camera/flash module, micro music-player, additional memory storage etc.
Copyright ©2007 Nokia. All rights reserved.
Connect
Hei: A simple and personable tool for maintaining close relationships, Hei takes full advantage of it’s fold configuration by maximizing its UI space. Using a transparent OLED display, it is visible whether opened or closed.
Hola: A simple and personable tool for maintaining close relationships, Hola takes the form of a monoblock for optimum performance, efficiency, and robustness.
Hi: A simple a personable tool for maintaining close relationships, Hi slides open to expand its UI when more complex interaction is required. A high-res camera with high quality optics provides enhanced imaging capabilities in the open position, but are hidden and well-protected when closed.
Copyright ©2007 Nokia. All rights reserved.
Copyright ©2007 Nokia. All rights reserved.
Showtime. The Nokia Strategy Forum attendance were divided into two groups, and both sessions went fantastically well – people were looking and handling the props with child-like eyes, the video clips and props sparked conversations, people were genuinely excited and inspired. It was extremely gratifying for the team.
Copyright ©2007 Nokia. All rights reserved.
Back in Los Angeles, we celebrated what we thought was the end of this project. If only. At the end of May, Alastair Curtis, Head of Nokia Design, informed us he will present the four video clips at Nokia World 2006 on November 30th, 2006 in Amsterdam.
“Keep Achieve, redo everything else! And each video clip must be under a minute.”
We followed a similar process, but with less people and a new set of challenges. Namely.
1. Telling eloquent and vivid stories in half the time.
The main effort was to rewrite the stories with less narrative and more experience moments without compromising the clarity of the message.
2. Producing a gnarly original soundtrack.
Adding music to anything that might be presented or distributed publicly is a nightmare. Securing all possible rights (one-time event, internet, TV, all countries, etc) for a recording from a known artist is tedious and seriously expensive, so it was out of the question. Our only option was to commission four tracks, and it’s quite a challenge too.
3. Protecting concepts and potential new ideas that may or may not be produced.
The clips and props were initially designed to be shown only internally – we had no creative limitations; and it turned out to be an problem for this phase. Some digital and physical interaction moments had to be edited out and a couple of props had to be left out altogether.
4. And of course, striving for the best quality possible within our constraints.
Not only Nokia has historically been very secretive with upcoming products and visions, these clips were set to introduce to the world Nokia Design interpretation of the new Categories. Quite an ambition considering the initial purpose and production style. Ultimately, the public clips are of much higher quality both in storytelling and production than the original ones. They are far from being perfect, but they do convey the categories key experiences quite clearly without explicitly revealing upcoming Nokia products and features.
Finally, it is not the view of the future, it is a view of the future. The video clips are designed to stimulate debate and discussion around how the mobile device of the future might look and function in our lives.
Explore: Sharing Discoveries
Achieve: Achieving Together
Live: Inspiring Senses
Connect: Connecting Simply
New York Times stealth innovation
The New York Times just introduced silently a very neat feature. Double-clicking any word will open a page which shows by default the definition of that word (Answer.com/Reference). At the top of the page, there is a search box for NYT archives, NYT blogs, Google, etc. It does not work everywhere but it does on this article: Fuel Without the Fossil which is part of the Energy Challenge series.
It is simple, elegant, non-obtrusive and certainly useful.
Filed Under: design, innovation, web
The most natural form of organisation
Both in design circles and the press, there’s a lot of attention and enthusiasm for high-end multimedia products and user interfaces. It is all well but it’s all niche. Nothing wrong with niche products, but ultimately, it’s the less snazzy ones that happen to change the world for good. The Ford T comes to mind along with the Nokia 3310, VW Beetle, etc.
Inspired by an observation that globally 1 in 5 adults are illiterate, but not necessarily innumerate and that the digital divide will be partially closed in the coming 3 years; my interest in the past few weeks has been on understanding human universals. A simple question I have tried to answer and make tangible is how do we -all humans, organize things naturally? How do we all organize the most important moments of our life? My best answer, as simple as it sounds, is chronologically…