I’ll admit it – I’m a recovering design process deliverables junkie. Historically, the generation of process maps, usability audits, wireframes, site diagrams, application flows, mental models, task-level scenarios, user stories, standards documentation, conceptual frameworks, content audits, navigation maps, and countless other examples of design ephemera, were so central to the work that we created for clients that we began to view them as the work we were creating for our clients. In reality, as important as many of those deliverables may be, they are just means to an end. The end – is a finished product that customers want to purchase and use and a solution that meets or exceeds the clients expectations.

So before I start a holy war about the importance of research, process, and planning in User Experience Design (UX), let me be clear – all of the steps and deliverables mentioned above are, in many scenarios, important and useful elements of the design process. But as time has gone by, and we’ve continued to refine our own approach to design, we’ve begun to realize that by over-emphasizing their importance we’re doing a disservice to our clients and ourselves. Sometimes, some (and very rarely all) of, these deliverables are critical to delivering a winning design solution. But trotting them out in front of clients in an often vain attempt to either impress them, overwhelm them, or justify your fees often has the inverse effect.

In a brilliant post, titled “An Open Letter To The Design Community“, Marty Cagan at the Silicon Valley Product Group details some common traps that designers often fall prey to. In particular he extolls the virtues of getting to the real product, via Hi-Fidelity prototypes, as quickly as possible.

“Please people, if you want to succeed at your company, just remember this rule: the only thing that works to explain your design to execs and stakeholders are prototypes, the higher the fidelity the better.  Do yourself a favor and keep the sausage making within the design team.  Some execs will want to know how you got from here to there, and that’s okay, so long as you start with them understanding where “there” is.”

Do yourself a favor and keep the sausage making within the design team.

We’ve discovered a much more liberating way to engage our clients, do away with a ton of busy work, and deliver better design solutions in the bargin. In short, it’s about getting to the point. You can’t cut corners or entirely abandon the development of design support materials, but you can get much smarter about determining what design deliverables are essential to the projects success and which ones are only part of your process because you feel they have to be. I can promise you, at least in our experience, that most clients don’t care and aren’t nearly as impressed by many of the process-oriented deliverables that we, as designers, have come to hold sacred.

We’ve discovered a much more liberating way to engage our clients, do away with a ton of busy work, and deliver better design solutions in the bargin.

I’m not suggesting that you can go from a back of the napkin sketch to a fully functional product design without going through the painstaking process of researching user needs, mapping complex interactions, and creating comprehensive design specifications. What I am saying is that, that’s the stuff in the kitchen that you darn well better know how to execute on and that getting to something worthy of presentation in the dining room is where your focus should be. The faster you can get to a “real world” manifestation of the final product the happier your client will be and the sooner you’ll be able to begin the process of refining the design solution.

With the upcoming release of Apple’s iPad (April 3rd, 2010), there has been an increasing amount of buzz recently around the change in the way we will consume media. With an estimated 40-50 tablet devices set for release by early 2011, Wired Magazine, in partnership with Adobe, has seen this as an opportunity to rethink the way we connect with magazine brands, leading to a fundamental shift in the way Wired is produced with it’s new digital app.

At the SXSW panel After Magazines: Wired’s Digital Rebirth, panelists Scott Dadich (Creative Director, Wired Magazine) and Jeremy Clark (Senior Experience Design Manager, Adobe) explained the production methods of the app using Adobe Air, and showcased its features with a multi-platform demo.

Wired’s Goal: Publish Once, Author Anywhere

The average Wired article takes 24 days to go from initial copy to finished layout—a tight timeframe considering Wired is a monthly publication. Luckily, the team responsible for the print version of the mag are able to repurpose the layouts for use on the iPad and other devices, with only incremental hours, and no need for any additional staff.

Whereas reading a print magazine is a single-axis, linear experience, Wired have succeeded in developing their digital magazine into a multi-axis, non-linear experience. Articles are navigated by swiping left and right, while pages within these articles are accessed by swiping up and down. In addition to this, readers can tap the screen to bring up the ‘Scrubber’, a scrolling navigation bar that allows the reader to scroll page-by-page through the magazine. There is also a ‘Browse’ mode, which provides a fully zoomed-out view, allowing easy access to any article or page with just a couple of taps.

It’s not just Print, it’s Print Plus

The digital app is not simply a straight, digitized version of the print mag, it is much more. The app utilizes audio and video, perfect for providing snippets of interviews, music clips and movie trailers. Illustrations, charts and diagrams can be animated and even allow reader interaction. Photography has a whole new lease of life with the use of galleries, allowing multiple images to occupy the same space, accessed with a swipe of the finger, and 360 VR imagery allows the reader to see more of a tested product than a typical 2D photo. The orientation of the iPad plays a big part in the layout of the articles too. Rotating the iPad from landscape to portrait (or vice-versa) can switch editorial images, offering different perspectives on the same image, or zoom in on interactive content that appears smaller in the alternative orientation.

Of course, it’s not just editorial content that gets the special treatment. Using the same features listed above, consumers can interact with their favorite brands in a whole new way. Fashion labels can showcase collections in one ad and can utilize high-resolution photography to allow detailed close-ups (using your finger and the ‘Rover Dot’ to move around each image). Automotive brands can use 360 VR photography to allow rotatable views of their vehicles. Music labels can embed clips of songs or albums, just as movie studios can embed movie trailers, clips and featurettes.

Reflective vs. Emissive Displays

Many skeptics have expressed concern that reading long articles on the iPad, which uses an emissive light display (LCD/LED screen), brings on eye fatigue much faster than on devices such as Amazon’s Kindle, which uses a monochromatic, reflective light display. Due to the high resolution display of the iPad, Wired are able to use the same custom typeface family they do in the print version of their magazine. Wired’s typefaces were specifically designed to minimize the amount eye fatigue reader. Further research into reflective vs. emissive light displays is being conducted in conjunction with Hoefler & Frere Jones, although they admit there could be years of work ahead in this respect. Also, the monochromatic display of the Kindle isn’t conducive to an engaging, immersive interactive experience like that of the iPad.

The Better the Design,
The Easier the Reading Experience,
The Deeper the Engagement,
The More Connected the User,
The Stronger the Brand Relationship.

Social networking is expected to play a huge part in Wired’s digital rebirth, with Twitter, Facebook and email integration directly within the app, with content sharing capabilities being implemented. The ability for ‘Favorite’ articles will also be present, as well as strong search capabilities. Content will have a ’sticky’ shelf life and will be available for purchase/viewing from within the app. Finally, user engagement will be tracked using Omniture (the web analytics platform acquired by Adobe in October 2009).

Wired’s iPad app is set for release this summer, through the iPad app store. Versions for other devices such as iPhone and Google’s Nexus 1 later in the year. Subscription pricing TBA.

Wired rocks audience at SXSW with iPad demo from Mangrove on Vimeo.

]]> http://www.kaplusa.com/blog/2010/03/sxsw-wired%e2%80%99s-digital-rebirth/feed/ 0 http://www.kaplusa.com/blog/2010/03/domain-knowledge-vs-design-knowledge/ http://www.kaplusa.com/blog/2010/03/domain-knowledge-vs-design-knowledge/#comments Thu, 04 Mar 2010 14:33:18 +0000 Nathan Sinsabaugh http://www.kaplusa.com/blog/?p=3499 “Customers, although they might be able to articulate the problems with an interaction, are not often capable of visualizing the solutions to those problems. Design is a specialized skill, just like programming. Programmers would never ask users to help them code; design problems should be treated no differently.”

Alan Cooper
About Face 3, The Essentials of Interaction Design

The image below shows the service immediately before the latest redesign. It was definitely clean, well organized, and functional. There are even some sweet keyboard shortcuts to make controlling the music easier!

Last week thesixtyone distinguished itself from the web’s pile of music recommendation sites by completely redesigning their service. The new design is bold and immersive. While a song plays, the background of the entire page becomes a beautiful full-screen photograph of the current artist. At the same time, smaller images fade in and out in a slide show fashion. The effect is impressively cinematic, and gives artists a much better opportunity to show listeners what makes them unique… especially when compared to the limiting avatars and thumbnails used by the old design.

The other major update is the minimization of the music controls. A small menu in the upper right corner that appears only when the cursor is moving allows users to pause/play, adjust the volume, add a song to a playlist, and toggle repeat on or off. Large arrows on either side of the screen provide navigation between the previous and next song. Other functionality includes the ability to build playlists, and to share, love and comment on songs.

While the redesign is getting plenty of positive attention, a number of users have been less than happy with the drastic changes. The design is, without question, a sea change, so some degree of uprising isn’t surprising. The good news is that users can still access the old site.

I don’t know exactly how the update was rolled out, so maybe there would have been a better, less painful way to introduce the new design to the community. There are definitely parts of the UI that I don’t quite understand and wish were better explained, but the overall experience is engaging enough that I’m willing to let them go for now. Whatever the future holds for thesixtyone, I hope more companies become willing to take risks with bold new approaches to delivering experiences online.

Our most recent app engagement began in the usual way, collaborating with the client on multiple rounds of wireframes and process maps, dialing in the inner workings and structure of the app itself. When we started to move forward into the initial visual prototypes the ideas for the navigation and overall aesthetic came fast, but we quickly realized something just didn’t ‘feel’ right. It didn’t take long before we realized why and just how easy it is to fall into the same trap that so many others do when designing for the iPhone. In an attempt to create something fresh and slick we were losing the very thing that makes the best iPhone apps ‘feel’ right – familiarity.

“… it is clear that a user interface feature is ‘intuitive’ insofar as it resembles or is identical to something the user has already learned. In short, “intuitive” in this context
is an almost exact synonym of ‘familiar.’”
—Jef Raskin

Spend time with the native iPhone apps such as Mail, Calendar and Clock, and you can see familiarity at play. While each one fulfills a different purpose, they seem like they were ‘cut from the same cloth’, related, familiar. They share common design elements such as standard header and footer bars with clear navigation controls. They share consistent colors, gradients, shadows and highlights. There is a minimal amount of information presented on-screen at any one time and there are no distracting superfluous visuals to get in the way. main navigation and other interactive elements are appropriately sized and spaced so they are easy to ‘tap.’

Some of the other native iPhone apps such as Weather, Stocks and Maps need to present more visual-based information, calling for more elaborate interfaces. However, Apple have managed to retain the same familiarity throughout by using the same basic principles. Many of the third party apps available in the App Store are also successful for these reasons. Below are some of the apps I use on a daily basis:

A few months back I revisited a favorite game of mine — Portal. Portal is an extension of Valve’s Half-Life series. In it, the player controls the protagonist from a first person perspective (you know, a first person shooter…). You begin your adventure locked in a cell in some kind of testing environment/laboratory. After being released from the cell, you’re directed through a series of increasingly complex puzzle situations in which your goal is to progress through one test chamber and move to the next. Here’s where the “portal” comes in. The solutions to these puzzles require the use of a portal gun, which creates two interconnected portal ends. Here’s Wikipedia’s description of this interesting tool:

The portals create a visual and physical connection between two different locations in three-dimensional space. Neither end is specifically an entrance or exit; all objects that travel through one portal will exit through the other.

In the image above you can see how looking into the orange portal results in looking out of the blue portal. Check out the images at the end of the post to see more examples. You can also play a web-based 2D version here to get an idea of how portals work.

Anyway, you should definitely go get the Orange Box and play Portal. But, I’m not writing this just to give a game recommendation. There’s a lesson that, as a UX designer, I want to learn from Portal.

Painless Acclimation

In spite of the little to no practical experience I have with inter-spatial teleportation, by about five minutes into the game I had become proficient at it. While I’d like to credit my own cleverness and adaptability, in reality it was the skillful job Valve did of acclimating me to the rules and conventions of Portal that turned me into a capable and competent player.

Valve is known as much for its great storytelling as it is for its gameplay, and they go to great efforts to keep the experience seamless and immersive at all times. To that end, Portal’s training system is built right into the storyline of the game. The sophisticated use of progressive disclosure (i.e. only showing the player what they need to know to accomplish a discrete task) combined with in-game symbols and occasional vocal instruction, transforms players from novices to experts in a way that is so integrated with the game that the transition is hardly noticeable.

Players put their skills to use as they move from one test chamber to another, and finally, in a plot twist, the player breaks out of the testing environment and escapes from the facility. The in-game training culminates with the player putting it to use to counter the system in which is was acquired.

What About Commercial Software?

If game-based software can provide in-product training in such an integrated way, why can’t commercial, tool-based software? Why do I have to pop in an Adobe DVD and struggle to follow along as I attempt to mimic what the guy in the video is doing? Why is the help menu so worthless? Why are training and tutorials from 3rd party sites so much better than the ones from the software producer?

To some degree there’s a difference between video game and software development in that video game producers deliberately seek to challenge and confound users (to an extent) with their products, while it’s just an unfortunate byproduct of most software. And, while games keep you on a predetermined “path to victory,” the best software eventually gets out of your way and is used to do things that the developers may not have even thought of (Valve gives us a picture of this in Portal when the player escapes from the testing facility).

I don’t believe those differences should stop software developers from exploring more effective and integrated training solutions. I know this is not an easy thing to do. At KA+A, we know through experience that the training and help components of software are difficult to manage. But it’s time to stop neglecting them and treating them as an afterthought. This is one of those situations where a longview will reveal benefits for both software makers and users.

The Takeaway

No post would be complete without some bullet points, so I’ll close with a list of software training ideas I believe we can learn from Portal:

• Integrate training directly into the application
• Provide users with some “quick wins” that build confidence and create a sense of accomplishment
• Don’t treat users like they’re stupid – keep this in mind when facilitating “quick wins”
• Disclose tools and techniques in a way that prevents sensory overload – i.e. progressive disclosure
• Look for unique places to include tips and help – but don’t get in the user’s way
• Facilitate discovery – make it possible for users to learn on their own
• Make it easy for the user to get your training out of the way when they’re ready to “escape”

Strategically placed portals result in a view of oneself from a perspective completely independent of their actual position in space.

An example of the in-game symbols that serve as instructions for players.

Eventually the tests become more complex and challenging.

William Poundstone has written a great book on pricing practices called – Priceless: The Myth of Fair Value. For anyone interested in crafting brand experiences pricing strategies should be an area of deep study and reflection.

We’ll try not to get into the habit of posting blog posts that point to other blog posts, but The Most Relevant Identity Work of the Decade, as chronicled over at Brand New is worth a gander.

Online retailer Zappos has figured out how to actually productize their culture and market their business model to other retailers. It can be yours for just $4,000.

Andrew Chen makes a pretty compelling argument for the virtues of Low-Fidelity prototyping.

In this thoughtful post, Karri Ojanen tells ad agencies to make the User Experience Designer your Creative Director.

Finally, check out UXFIND, a mashup that uses the Google Custom Search Engine and Google App Engine to provide a search tool specifically tailored for User Experience professionals.

Any type of design project is fair game, including:

• Corporate identity
• User interfaces
• Concept prototypes
• Environments
• Service experiences
• Web sites
• Etc.

The following are a few questions to get your juices flowing:

• What was your most successful design project
• Tell us what criteria you used to evaluate it’s success
• Tell us about the problem that was solved
• Tell us a bit about the process you (or your firm) went through
• Include a link to a case study or blog post if you have one available

If you have something to share, just post your responses in the comments field below.

I like his approach in storytelling, because it communicates that his work is more than just aesthetically compelling structures. In addition to being beautiful works of art, the buildings shown in his presentation are functionally conscious of space, resources, and culture. The last project he spoke of is, in my opinion, the most amazing. He and his team are focusing on the Island of Zira, using the seven neighboring mountain peaks of Azerbaijan as inspiration. They designed the land into an inhabitable urban eco-system, completely transforming it from what is now an empty, lifeless mass of land to hopefully a beautiful life-sustaining architectural masterpiece.

Below, I’ve included some screen shots from his presentation that help summarize his ideas, as well as to represent a similar process that many architects, and designers alike, go through.

Ingels brings up this idea of Evolution vs. Revolution. Revolution often implies some sort of movement stepping away from the mainstream, exercising some form of rebellion against it, whereas Evolution implies the gradual adaptation and improvisation of new opportunities that stem from the issues of our ever-changing world. So instead of completely turning away from what we often don’t approve of, we look at it from a new angle and use it to our advantage.

Although Ingels addresses this from the viewpoint of an architect, I see this in almost every project I encounter. As a designer I am constantly searching for ways to bridge form + function with appropriateness + context. That usually means that I am faced with an issue of some kind, but instead of pushing it aside and letting someone else deal with it or hoping it will eventually work itself out, I find a way to accommodate for it in hopes that I can turn it into something useful. One thing I’ve learned through my career is that many problems are potential opportunities, and can be tackled constructively. Much like the leftover projects Ingels mentions. Sometimes a client doesn’t like what you pitch, causing a revisit to the drawing board to come up with a fresh approach. Fortunately, many of those projects can be recycled to meet the needs of other problems in different contexts later down the road, so really nothing is ever wasted.

I found his presentation inspiring. It’s amazing to see this type of approach being played out in this magnitude. Over the past month I’ve seen smaller, but just as compelling, movements happening around the world that take people on a new journey in which they engage in a whole new interaction with space.

I am very interested in this type of social transformation and will continue to post related topics.