Interactive Design | Journal Summary

Over the last few weeks I have had the chance to refine my sense of design and apply it to the many ongoing digital media projects in my life. I had known many design principles intuitively from my long background in photography, film making and drawing, but it took concentrated study to crystallize and compartmentalize that knowledge in a logical way.

Now I know why a grid design looks good AND has the ability to organize large amounts of data gracefully. I also know why it should never take more than 2-3 clicks to get anywhere on a website and why you have to do real life testing to see how people will respond to a design rather than go by what your ‘inner-designer’ says.

01. BASIC HUMAN/MACHINE INTERACTIONS

In class we began by applying interactive design theory to video game design. John Maeda’s book on simplicity was tremendously helpful in understanding why the Wii trumps the PS3 in popularity contrary to previous understanding of the video game console marketing. After playing with and witnessing others playing with over 10 different gaming platforms, it became apparent that the Wii was a winner for following Maeda’s law of ‘Simplify Hide Embed’ as well as ‘Make Many Appear Few.’ Just looking at the controllers and the game design style and you see how the core design principles revolved around powerful simplicity of haptic controls and focusing on team oriented game play over graphics.

I may never design a video game, but I did learn that successful video games and video game systems can be made or broken depending on their interface.

02. CORE PRINCIPLES + CLEAN DESIGN

The next major lesson that I learned in class is how important it is to define core design principles and make sensible, elegant wire frames before going further in designing a user interface on a website. In my case study I chose Virgin Air America, a company that is known for bucking the trend, being stylish and taking chances.

Virgin’s choice to focus on simple site navigation and using images over text, gives Virgin America a clean, fun website.

Compare this to other airline websites, most notably Continental, Alaska Air and United, who have almost nothing about the flight experience on their bloated websites and one can immediately see the brilliance in Virgin America’s approach. By selling an experience, Virgin America separates itself form the pack and buyers are no longer shopping only for price but now for the experience. With this strategy Virgin America gains value in the eyes of the potential consumer.

Virgin America’s investment in a clean, beautifully designed website that welcomes, calms, and sells an experience, establishes Virgin Airlines as being forward thinking, modern and even hip. Virgin America reaches a great demographic, 20-40 year olds with taste and disposable income, without resorting to gimmicks, contests or other sales novelties that other major airlines use to feebly attempt to attract customers. This model of great usability and clean design will hopefully inspire other airline companies to follow suit.

This case study has made me re-evaluate my approach to website design and interface design in general. Soon after this assignment I completely re-designed my blog and website to offer the cleanest, simplified, graphics-driven environment possible.

03. CORE PRINCIPLES + DESIGN BY ONE HAND

Advancing the idea of having core principles for the design of a website, I went on to learn how important it is to have design principles for an entire brand, such as Xbox, where the final result from printed material to console menu had to look as though it were created by one hand.

Shelby Armstrong, lead designer of the Xbox 360, makes some interesting points as to what it takes for a product like the Xbox 360 to come to fruition. Armstrong’s twin concepts of Pixel to Plastic and Design by One Hand, are fascinating and reveal how a good plan can lead to a successful product many years later.

The concept of ‘Pixel to Plastic’ embodies the idea that the many stake holders involved in a design process, (in the case of the Xbox, the designers, branding, engineering and marketing departments) must work in tandem to produce a coherent design based on core design principles laid out far in advance. By following core design principles each department can work in different cities and even different countries while maintaining an efficient design schedule.

In a related case study the brand agency Method was contacted by Boxee to create a design for a hardware based media service that ties all types of media together in one place, along with social networks.

According to Moggridge in the book ‘Designing Interactions’ the most challenging part of design is making something that operates within anthropological and ecological constraints.

Method dealt with these constraints in the creation of the Boxee interface by incorporating social networking alongside the delivery of digital media.

Using Method’s core principles of telling a consistent story at each point of the consumer interaction, a design team broke down the Boxee concept into distinct elements, each element incorporating playful and aesthetic colors and design elements.

04. THE DESIGN OF EVERYDAY THINGS/CONCLUSION

The last major lesson that I learned in class was about the design of everyday things. Literally.

By studying an ink-jet ink cartridge, I learned that humans instinctively look for visual cues as to how things work and sometimes will use things incorrectly due to misleading visual clues (not engineering flaws.)

The design principles behind the 02 HP Inkjet Cartridge follow Norman’s design principles regarding Norman’s study of the psychology of how people interact with everyday things. Using appropriate Natural Design, Mapping and Feedback; the installation of HP Inkjet Cartridges is nearly foolproof… even without the manual.

This last lesson is the most important in my design education because no matter how well engineered something is it must have a well designed interface or it will fail.

Bibliography

Designing Interactions. Bill Moggride, MIT Press (2007)

The Laws of Simplicity. John Maeda, MIT Press (2006)

The Design of Everyday Things. Donald Norman. Doubleday Business (1990)

The Design of Everyday Things: 02 HP Inkjet Cartridge

Observe the 02 HP Light Magenta Inkjet Cartridge. Look how it curves along the sides, sloping inward and upward, yelling out “grasp me here.”

According to Donald A. Norman’s classic design book The Design of Everyday Things the 02 HP inkjet cartridge is designed very well.

Norman talks about Natural Design in his book, pointing out that a well designed object will have an intuitive interface, where the shape or size or orientation of an object will give clues to its use. In the case of the HP cartridge, the sloping shape of the cartridge indicates which end to grasp. It is only natural to firmly grip the cartridge by it’s slender side.

Natural Design is not enough however: the narrower side of the cartridge only tells you which side to grasp, it does not tell you the correct indication of up or down.

Incorrect orientation of Inkjet Cartridge.

Correct orientation of Inkjet Cartridge.

In addition to Natural Design, a second principle of Mapping is required to show the user how to install the cartridge.

There are three visible indicators for this cartridge:

• The pink top plate indicates the color of ink inside.
• The number 02 shows the type of cartridge you are holding (the Hp Photosmart D7360 has instructions inside the cover that show compatibility only with 02 cartridges.)
• The last indicator is the diamond shape on the cartridge that reaffirms the user that this is indeed the Light Magenta Cartridge. Perhaps the diamond adds confidence to the user in dim lighting conditions or for users that are colorblind.

The mapping of the cartridge corresponds to the mapping of the inkjet cartridge slots in the printer.

The cartridge slots are labeled with colors and symbols corresponding to the correct cartridge. This is natural mapping and almost eliminates the possibility of putting the wrong cartridge in the wrong slot.

The mapping is so natural in fact that reading is not required for installation. Of course installation instructions are included, but they are highly redundant, and only show the action of the gray cage locking down on the cartridge.

The last important indicator that the installation has gone correctly is for there to be appropriate feedback.

Norman talks about the need for feedback so that the user knows that what they are doing is working or is completed successfully. Norman points out that some telephone systems in an attempt to modernize have hidden traditional feedback signals such as the Hold light. Just like how a telephone should have a flashing Hold light to indicate that a call has been successfully put on hold, the HP printer must signal that the ink has been correctly installed.

The HP Printer has two visual indicators for feedback:

• The gray cage that closes over the ink cartridge snaps into place or otherwise flip backs up with a spring. By snapping the cage down firmly, the user can feel the ink being inserted properly.
• A second indicator appears when the lid of the printer is closed and an LCD announces that a certified HP cartridge has been installed correctly.

The design principles behind the 02 HP Inkjet Cartridge follow Norman’s design principles regarding Norman’s study of the psychology of how people interact with everyday things. Using appropriate Natural Design, Mapping and Feedback; the installation of HP Inkjet Cartridges is nearly foolproof… even without the manual.

-Kirk

Design Interaction Minute Paper

From Product=Lifestyle to Lifestyle=Product

This New York Times article starts with a well worn branding concept ’start with the product, create a lifestyle around it’ and turns it on its head. A-Ron, the featured artist, starts with his lifestyle and makes it his product. A-Ron, a regular of downtown New York is capitalizing on his coolness, literally.

This quote from the article sums it up:

A-Ron was not only cool enough, he was photographed for Supreme ads and became its “unofficial face.”… by the time Bondaroff was 21, he was visiting Tokyo and getting asked for autographs by kids who had seen his picture in magazines. “I was always bugged out by that — people are like, ‘Oh, you’re that guy,”’ he told me not long ago. “You get famous for nothing.” (emphasis mine -ed.)

I have seen something similar here in Seattle and in other major metropolitan areas.

However, I think it is wearing a bit thin.

You see, there are many, many, more ‘cool’ designers/scenesters now than when I was little. In light of this, each designer/scenester’s personal brand is diluted by all of the other designers/scenesters. There just simply isn’t enough ‘cool’ to go around.

If everyone is an outsider then outside must eventually be the norm.

You are what your consumer thinks you are.

In light of tonight’s presentation by designer Corbet Curfman, it is interesting how effective it can be to focus on a bulletproof & focused identity that neatly sums up what your product is and measuring this success by how well independent consumers can identify those qualities innately.

Method Agency: Boxee Case Study

The brand agency Method was contacted by Boxee to create a design for a hardware based media service that ties all types of media together in one place, along with social networks that allow the user to comment and participate with other users on the media that they have gathered.

Method was tasked with creating both a complete branding experience as well as the primary interface for Boxee. According to Method’s modus operandi, each element of the brand and interface must tell a consistent, inspiring story to the consumer. In the case of the Boxee project the audience consists of young technologically advanced computer users who look beyond traditional methods of finding and consuming media.

Using Methods core principles of telling a consistent story at each point of the consumer interaction, a design team broke down the Boxee concept into distinct elements, each element incorporating playful and aesthetic colors and design elements.

The brand’s main color scheme is very similar to the Xbox 360: lime green with yellow and orange accents. This color scheme must appeal to young technology driven demographics for it appears on numerous high tech products already in the marketplace. Without focus group data this color theory cannot be verified in this blog.

The interface design for Boxee calls to mind one of John Maeda’s laws of simplicity:

Organization makes a system of many appear fewer

Method followed this design principle when organizing the various types of digital media; although there may be hundreds of media channels grouped in Boxee, no one channel is far away.

Organized by traditional categories such as ‘title,’ to more fluid and intuitive categories such as ‘recently added’ and ‘most popular, Method made the Boxee interface more familiar to its young tech audience who is used to consuming media through Internet channels such as YouTube and Vimeo.

The beauty of this interface is that it retains the immediacy of television while conforming to more complex ways of grouping media that Boxee’s target audience is familiar with on the Internet.

According to Moggridge in the book ‘Designing Interactions’ the most challenging part of design is making something that operates within anthropological and ecological constraints.

Method dealt with these constraints in the creation of the Boxee interface by incorporating social networking alongside the delivery of digital media.

While watching a streaming video, users can comment or chat about what they are watching with other Boxee networks. When not watching, users can communicate with other Boxee users as well as see what they are watching or recommend.

Boxee is still in Alpha testing, so it was impossible to evaluate Method’s design firsthand. From the case study and photos available, it appears that Method has carried out a successful unified branding solution for Boxee.

Xbox 360 & Wii: A Design Study

The success of the Xbox 360 is due to the leadership of the lead Designer, Shelby Armstrong as well as adherence whether intentional or not, to several of John Maeda’s laws of simplicity.

Designing the Design Process: Shelby Armstrong

Shelby Armstrong, lead designer of the Xbox 360, makes some interesting points as to what it takes for a product like the Xbox 360 to come to fruition. Armstrong’s twin concepts of Pixel to Plastic and Design by One Hand, are fascinating and reveal how a good plan can lead to a successful product many years later.

The concept of ‘Pixel to Plastic’ embodies the idea that the many stake holders involved in a design process, (in the case of the Xbox, the designers, branding, engineering and marketing departments) must work in tandem to produce a coherent design based on core design principles laid out far in advance. By following core design principles each department can work in different cities and even different countries while maintaining an efficient design schedule.

The concept of Design by One Hand is the end result of following through on the initial design principles. The Xbox 360 from case, to controller, box to peripheral, appears to be designed by the same person; in reality the Xbox 360 combines the efforts of many people over the course of several years.

Laws of Simplicity and the Xbox 360

The core design principles behind the Xbox 360 follows two of John Maeda’s Laws of Simplicity to a tee.

Reduce: the simplest way to achieve simplicity is through thoughtful reduction.

The Xbox 360 packs a lot of power under the hood, which was hidden intentionally. The menu system is designed around a ‘blade’ theme, with each blade revealing only what is needed, with most used items in the top layer.

Organize: Organization makes a system of many appear fewer.

Again the Xbox 360 ‘blade’ menu system allows the gamer to access much information on a need to know, organized system. although there are 450 menu pages available on the Xbox 360, the gamer is only exposed to relevant information.

These two laws inform the design of the Xbox 360 and I assume they were considered as core design principles from the very beginning. The adherence to these two laws certainly contribute to the successful design of the Xbox 360.

Enter the Wii

The Wii’s design process is a mystery to me as I do not have access to the inside story of how it came to be. From the outside the Wii seems to follow a Design by One Hand principle. The entire unit is white and angular, the controller is white and angular, and the repetition of white simplicity can be seen throughout the menu system, package design and peripheral design.

Nintendo has capitalized on simple straight forward design and reduced the Wii to its essence as a gaming platform; even going as far as reducing controller complexity throwing out the multi buttoned monster controllers in favor of a simpler haptic controller based on intuitive movement. Following Maeda’s Law of Reduction, the Wii has distinguished itself from its competition and led to the Wii being the most successful among the three top gaming systems available today: Xbox 360, PS3 and the Wii.

Although different in approach, both the Xbox 360 and Wii have followed sound design principles, finding success in the highly competitive video game market.

Virgin Air- Mobile App for iPhone

I wanted to keep the simple look and feel of the original Virgin Air website so I only included the booking function coupled with a scrolling list of available flights at different times that includes price info.

Virgin America- A Case Study in Usability

Virgin America, a rather recent entrant into the crowded world of commercial U. S. airlines, breaks from the pack and establishes itself as an experience…an experience far different from the traditional marketing approach of its competitors who refuse to change in an increasingly unpopular airline environment.

This Virgin America experience is due entirely to a dramatic change in site usability and presentation that in every way separates Virgin Air from the crisis that most airlines find themselves in with confusing scheduling, inconsistent flight times, canceled flights and lost luggage.

Upon entering the Virgin America website, the user is immediately greeted by an open white page with few buttons, text block or flashy graphics. The menu options are shrunk, hidden and embedded into just a few drop down bars (following John Medea’s S.H.E. principle of design), with only a large box of rotating banners at the bottom of the page to alert the guest as to pertinent news about Virgin America.

Unlike other airline websites, the user is not assaulted by endless blocks of dense text and myriad rows of buttons. Only the most important functions are presented on the Virgin America homepage, with additional information available on a need to know basis through drop down menus. This relaxing and clean approach is very welcoming to the Virgin’s target audience of 20-40 somethings who are adverse to being overstimulated online with too many choices and menus.

The most developed part of the Virgin America website beyond the flight booking/scheduling box, is the representation of the Virgin America experience itself. It is this part of the website that sells Virgin America to those who are new to the brand.

Upon entering the Virgin America experience page, the user is presented yet again with a clean almost, Apple-esque viewing experience with several large icons that can be scrolled through as one would with the lower application dock on Mac OS X computers. Each icon leads to a specific experience the user can have by flying Virgin America: first class seat features, Virgin TV, outlets available on flights for electricity and Ethernet connection, partnerships, mood lighting and on and on.

Compare this to other airline websites, most notably Continental, Alaska Air and United, who have almost nothing about the flight experience on their bloated websites and one can immediately see the brilliance in Virgin America’s approach. By selling an experience, Virgin America separates itself form the pack and buyers are no longer shopping only for price but now for the experience. With this strategy Virgin America gains value in the eyes of the potential consumer.

Virgin America’s investment in a clean, beautifully designed website that welcomes, calms, and sells an experience, establishes Virgin Airlines as being forward thinking, modern and even hip. Virgin America reaches a great demographic, 20-40 year olds with taste and disposable income, without resorting to gimmicks, contests or other sales novelties that other major airlines use to feebly attempt to attract customers. This model of great usability and clean design will hopefully inspire other airline companies to follow suit.

Best Vision Eyewear: Flowchart and Wireframe

A sample wire frame from a fictitious eye wear company.

A sample flow chart from a fictitious eye wear company.

Interface and Video Game Design: 7 Examples.

Successful video games and video game systems can be made or broken depending on their interface.

Take the Ninetendo Wii for example:

Instead of increasing control pad features and graphic processing power like rivals such as Xbox 360 and Playstation 3, the Wii is designed around an almost entirely haptic interface. The Wii interface propelled the once ailing Nintendo brand to the front of the pack, with the Wii outselling both the Xbox 360 and Playstation 3.

In John Maeda’s book, The Laws of Simplicity Maeda states that the first law of simplicity is to reduce.

A balance is struck between how complex something has to be and how simple something can be.

Using this first rule I will analyze several popular video games, both new and old, pointing out the strength and weakness of each. In addition to Maeda’s principle of simplicity I will add my own principle as it pertains to video game design:

The interface must not occupy our minds, Instead we should be so immersed as gamers that our interaction with the game allows us to momentarily forget ourselves and the real world. This is the hallmark of a great game experience.

Wii Sports (Wii)

Wii Sports is an excellent example of a simple intuitive interface. To play tennis you swing your control pad like a tennis racquet. To hit a baseball, swing your controller like a bat. The best part is: it matters how you swing your raquet/bat/ect. just like in real sports. The haptic control of the Wii opened this platform to traditionally non-gaming audiences by simplifying the control scheme: now people in nursing homes could play, mom and pop could play, and the Wii took center stage as an inclusive easy to learn family gaming system

The weakness of the Wii and Wii sports is the same thing that makes it great. This system will not appeal as greatly to traditional gamers who enjoy mastering the complexity of games such as Grand Theft Auto, Final Fantasy or one on one fighting simulators such as Soul Caliber.

Rock Band (Multiple Platforms)

Rock Band breaks the mold of traditional games by allowing the gamer to be experience being a rock-star using fairly intuitive controls. Though not haptic, the gamer is immerse din the experience by the simplicity of play that focuses more on rhythm and coordination than memorization of button combinations. This game succeeds because of a combination of great interface with an immersion into a basic fantasy for many people: to be talented, famous and musical.

The weakness of this game is…well it’s hard to find a weakness for a game that is perhaps more popular than anything out there in 2008. I would imagine the weakness is that the game is focused on coordination that certain gamers may lack, thus making the game incredibly frustrating.

Lego Star Wars (PSP)

Lego Star Wars brings out the best qualities of the PSP: a fully featured traditional video game experience on a tiny handheld. Nothing is spared in terms of graphics or game play compared to the PS3. The PSP is easy to hold and the controls are intuitive for what they are. Although there are many more buttons for this game than say Wii Sports, the buttons and their functions are logically organized. Could this game experience be made simpler? Perhaps. Not bad though for a game designed for children yet enjoyable for adults. The right mix between complexity and simplicity if haptic control is not an option.

The weakness of this game is that there is no clear objective for the uninitiated. I saw most participants have difficulty figuring out what the objective is.

Monkey Ball (iPhone)

Considering the constraints associated with iPhone game development, namely each game being played by using the iPhone accelerometer or touch screen, Monkey Ball is a smashing success. The gameplay is simple, with the player rolling a monkey filled ball through various floating levels. A simple game with many levels and an acute attention to what makes a small form factor game fun: bold graphics and simple controls.

Monkey Ball’s weakness is what makes it great. The sensitivity of the accelerometer may be too much for some, making the game frustrating.

Pacman (Internet)

Pacman is a unique game. It was one of the first internationally successful video games and it remains successful decades later. This is due to the absolute simplicity of the games design. Nothing can be taken away from the game so in a sense it is boiled down to it’s pure gaming experience. Maeda would approve of this game as it is zen like in it’s simplicity and design.

The weakness of Pacman is that it is too simple for those wanting a game with depth, such as an interactive story line, or character growth/options.

Scrabulous (Internet)

Scrabulous quickly became one of the hottest games on Facebook due it’s simplicity and multiplayer gameplay. A casual game, Scrabulous is perfect for those who are often on Facebook and looking for ways to socialize and game at the same time.

The weakness of Scrabulous is that it no longer exists. Scrabble sued for copyright violation and now a less popular official Scrabble game has replaced Scrabulous on Facebook.

Tower Defense (Internet)

Tower Defense is a game of skill/achievement that is presented in a very straightforward way: you place defenses along a path in such a pattern as to stop the invaders. I noticed that some people could not get into this game at all, playing for a few minutes and then leaving for something else. I, on the other hand know this game well and it has consumed many hours of my time. Why? I think it works for me because it is simple enough to play a few rounds without getting caught up in a story, but complex enough in strategy to hold my interest.

The weakness of this game is that it is ultimately too simple for me once I figure out the underlying srategy/pattern for winning. This may be similar problem for others.

Conclusion:

After observing my own feelings towards these games as well as the other participants reactions, I came to the conclusion that a game must have one of two things. Both if possible:

A clear goal and clear presentation of the game space.
An intuitive interface.

Almost everyone understood and enjoyed Rockband and Wii Sports. These two games have both a clear objective and an intuitive interface.

On the other end of the spectrum are games like Lego Star Wars. Most people could not figure out what the objective was or exactly how to play, therefore they moved on quickly to some other game/platform. Tower Defense elicited about the same response for those that failed to read the rules of the game before playing; I imagine that without a context (the rules) Tower Defense appears random.

-Kirk

Pair and Share Book Discussion Group 3

Group 3 discussed The Cluetrain Manifesto.

From this discussion we agreed on four salient points found in the book relating to Com546:

1. Customers are now part of a connected network (over the Internet.) These customers are talking to each other more than in the past.

2. Businesses need to talk in the language of thier customers, not in P.R. (public relations) language.

3. E-businesses will thrive when they understand and meet their customer’s needs in the networked world.

4. E-commerce has gone full circle form open conversation (the ancient marketplace) to controlled conversation (Industrial revolution top down consumerism) to open markets once again (in the Internet age.)

We also hit upon two intriguing ideas in The Cluetrain Manifesto:

1. Companies can gather knowledge from within by facilitating an atmosphere of open conversations.

2. E-business allows consumers to return to personal interaction with the seller much like in the markets of the past.

The last thing we discussed was the historical positioning of The Cluetrain Manifesto.

To put it simply:

The Cluetrain Manifesto is positioned at the beginning of large scale adoption and use of the Internet during the late 1990’s.