Top Tags

Tag ixd

Entries 8 Total

Introduction to Design Studio Methodology

(I first learned the Design Studio methodology from Todd Zaki Warfel, founder of Message First, and perhaps one of the best designers I’ve been fortunately enough to learn from. While originating in architecture and industrial design schools, I believe he was the first to apply it to collaborative design of complex software systems.)

This is a two part series on design studio. Part 2 was just published.

Introduction to Design Studio

“It is hardly possible to overrate the value… of placing human beings in contact with persons dissimilar to themselves, with modes of thought and action unlike those with which they are familiar.”
~ John Stewart Mill (1806-73)

Framing

The early stages of product innovation can crucially influence the success and direction of any product. Yet these stages tend to be fuzzy, highly politicized and under-documented. This brief article is to give you a high-level overview of how teams can use Design Studio to explore opportunities and innovate products to better serve customers needs.

Design Studio is conducted in a highly interactive, fast-paced team setting following a methodology, commonly used in architecture and industrial design, with some important twists. It has been called the “Iron Chef,” of ideation. It can be intense, focused, and chaotic at times; but for those lucky enough to have participated, they understand the power and effectiveness of this tool.

Getting Started

Coming on the heels of market and customer research, contextual inquiry, as well as open brainstorming sessions to fully explore the “problem space,” teams use the Design Studio methodology to achieve a few key goals:

  1. Collaboratively work to understand the nature, opportunities, and constraints of some articulated problem space. If you imagine your current state, and then some positive future state – the problem space, sometimes called the Design Gap, is the place between those.
  2. Allow ideas from various perspectives and insights to percolate up between team members.
  3. Turn “ideas” and especially unstated assumptions from tacit or verbal states into cognitive artifacts that can be shared, evaluated, and iterated upon.
  4. Create a culture of shared ownership around future product vision.
  5. Generate a lot of ideas in a very fast time frame – usually no less than 3 hours, and sometimes as long as 10 hours.
  6. Allow open and honest critique of various concepts.
  7. Force participants to defend their concepts and negotiate with other team members.

Why Collaborative Design?

There are no rockstars in collaborative design. Stephen Klocek in “Better together, the practice of successful creative collaboration,” states the problem:

Ninja. Rockstar. Gifted genius. Many of the ways we talk about creative work (whether it’s design or development) only capture the brilliance of a single individual.”

Having spent time in some larger digital agencies, it is often the case that the Account Planner, Strategist, and Creative Director spend time around a conference room with the client trying to suss-out requirements. The process then moves to the ivory tower (or black box, if you will) at the agency’s office where a few select people lock themselves away until they generate “The Insight,” often followed by “The Solution,” which is then communicated to the art directors and technology teams responsible for execution. I could, and will, write an entire article about how fucked up that is, but not today. Needless to say, those days of the black box Rockstar/Ninja/Douchebag Creative Director are quickly coming to an end. Thank God!

The reality of designing modern digital solutions is that no one individual can possibly capture all the complexity of creating a truly vibrant social ecosystem with various customer engagement points, different usage patterns and behaviors based on different needs, goals, and customer backgrounds all interwoven into an emergent ubiquitous engagement tapestry. This is why innovation really is, and should be, a team sport.

How It Works

The Design Studio methodology provides a collaborative, pragmatic process of illumination, sketching, presentation, critique, and iteration leading to a shared vision and hopefully more coherent and elegant solution – but this is not “design by committee,” by any stretch. The Design Studio guides participations through an evolution in experience ideation. Just like business school, it uses a case study approach to solve a unique and clearly defined problem which the assembled team has agreed upon and which also aligns with the business’s strategic roadmap as articulated by the executive team. This ensures that teams don’t wander off the reservation and create the next great snack delivery platform.

Process

The goal of the design studio is to arrive at some solid design solutions in a collaborative setting. Using the following process of illuminate, sketch, present, critique, and iterate, multiple cycles at first individually, and eventually as teams, which allows us to arrive at some solid concepts by the end of the day. Along the way, the process helps develop greater trust amongst participants, and surfaces unknown requirements from key stakeholders.

“Co-creation needs externalized material. Sharing the fuzzy, early, raw concept gives your partner material to work with, to respond to and evolve. Externalizing ideas allows for closer collaboration, earlier input, and deeper thought partnership. This is true when generating and proposing ideas, and equally important for synthesizing and evolving concepts.”
- Klocek,  “Better together, the practice of successful creative collaboration

Importance of Sketching

Illumination

Illumination in Design Studio

The key to the illumination phase, sometimes less than 45 minutes, is for the team to gain a shared understanding the business context, customer, challenges and market opportunities. What is important is that this helps enframe the articulation and exploration of the problem space, but shouldn’t be the only thing. Too much emphasis should not be placed on the so-called “voice of the customer,” since this is rarely a good source of insight. Simon Rucker articulates this very well in his article “How Good Designers Think,” in the Harvard Business Review when he writes:

Good designers aim to move beyond what you get from simply asking consumers what they need and want. First of all because they understand that most people when asked don’t say what they mean or mean what they say, but also because people often don’t know. Good designers want to unearth what consumers can’t tell them: latent & emerging needs and motivations; actual behaviors and attitudes; and, crucially, barriers to as well as drivers of change — or simply put, what your competitors don’t also already know.

Simply put – your competitors are talking to the same customers you are – do you really think disruptive and differentiated ideas will come from listening to your customers in focus groups? Another important consideration is that potential solutions should never be brought to design studio, and most certainly not introduced during the illumination phase.

Generation

Through rapid sketch-boarding activities the teams focus on getting as many ideas (good & bad) down on paper as quickly as possible. I have often thought that the activities such as sketching can best be described as modalities of decision analysis. This is the essence of abductive thinking – a generative exercise of exploring what could be, as opposed to what is. With each new design decision explored, new constraints are introduced as new opportunities arise. Sketching, by its nature is fast, transient, and has a tempo which allows us to not become to attached to a particular solution.

Generating sketches in Design Studio

Why Sketching?

Importance of Sketching

But why is sketching such a fundamental part of design studio? Externalizations of different kinds (sketches, wireframes, paper or code prototypes) are most useful for communication & reflection where we want to present ideas to our design team, to the client, or to a customer – sketches are rhetoric instantiated, because every sketch is an argument, and every design argument must have a form. For a complete exegesis on the importance of sketching, read my article “Shades of Grey: Thoughts on Sketching,” published in UX Magazine.

Presentation

Participants learn to sell their ideas, accept change, negotiate positions to arrive at the strongest set of potential solutions worthy of further exploration and iteration. Cognitive psychologist Herbert Simon says “everyone designs who devises courses of action aimed at changing existing situations into preferred ones.”

It is through the articulation of design concepts in the Presentation phase that participants argue for what the preferred state is, and potentially how to get there. As Richard Buchanan says, “products are vivid arguments about how we as humans, situated in social context, should lead our lives,” and taken another step, sketches in design studio serve the same purpose – to make a clear argument for solving the problem space being explored.

Presentation in Design Studio

Critique

Critique in Design Studio is a formal but flexible framework used to highlight strong ideas worthy of further expansion while discarding weaker ideas in a safe, friendly environment. The aim of critique is to provide actionable and positive counter-arguments to those being made in the sketches presented. A simple framework for design critique Who, How, What, and Why.

Starting from the problem space and goals articulated at the beginning of the design studio, the critique should focus on the 2 or 3 strongest or most compelling concepts in each sketch addressing these questions:

Who:  Does the sketch solve a problem for the intended audience? Does the solution speak to the customer or does it speak to the designer’s ego?

How: How does the concept solve for the problem and more importantly, how can that solution be simplified?

What: What is the argument being made by the solution and is it effective in achieving it’s goal – is it an compelling argument? And finally,

Why: When sketching potential solutions, each participant will choose different angles of attack based on their own stance (or prejudices); understanding that stance, the focus of attention – in essence, the Why, is as important as the What.

The specific insights from critique will provide the participants with an increased understanding of the assumptions and biases of fellow participants. The criticism will feed back into design in the Iteration Phase, specifically by pointing to inconsistencies between the solution and its surroundings, context of customer use and business constraints. Finally, the criticism will give the designer feedback for concepts that, while brilliant, may not be fully fleshed out.

Iteration in Design Studio

Iteration

Concepts from each round of the design studio are then extracted, stolen, re-combined and transformed within teams and across teams. Participants are encouraged to take the feedback from critique, as well as concepts presented by others, and engage in another round of sketching – remixing and reinterpreting concepts to arrive at a more solid argument. Refined ideas will be honed, with the strongest ideas chosen by each team gathered and distilled into a unified group solution. It is at this point that the teams pitch (Present) their solutions to other teams, and the process of Present, Critique, Iterate, starts all over again until only 1 or 2 solid concepts survive.

———-

Next Up

In Part 2, I will explore the logistics of designing a Design Studio including how to select participants, design their respect teams, provide just enough background information for the illumination phase, as well as the the most important element – the timing of each phase and setting the guardrails and ground rules.

Thanks,

@semanticwill

Resources

How Good Designers Think, Simon Rucker, Harvard Business Review

Criticism as an Approach to Interface Aesthetics (PDF)

Better together; the practice of successful creative collaboration (Cooper)

Playing well with others: How to create effective design teams (Cooper)

Wicked Problems in Design Thinking, Richard Buchanan (PDF)

Shades of Grey: Thoughts on Sketching (UXMag)

Shades of Grey: Wireframes as Thinking Device (UXMag)

The UX Canon: Essential Reading for the User Experience Designer

For some time I had been slowly acquiring books, reviewing books, and recommending books to colleagues who were interested in “getting into” interaction design, user experience design, information architecture or usability. This eventually led to me cataloging my list of what I consider the best books in the field. With help from my friend Dave Malouf (co-founder of the IxDA and Professor of Interaction Design at SCAD), we edited this list of my canon, and now I want to share this list with you. If you have a question about a particular book, feel free to email me.

Next steps, besides slowly acquiring and reviewing more books, is to begin further classification of books. Until that can happen, this is my UX library. If I don’t own it or haven’t read it, it’s definitely not on this list. At the same time, there are books that I own that aren’t included because I thought they sucked for one reason or another. The fourth option is that I have it, have read it, liked it, but simply forgot to include it. So if you ask “Why haven’t you included X, Y, or Z – it’s one of those reasons.”


The Big UX Picture

The Inmates Are Running the Asylum: Why High Tech Products Drive Us Crazy and How to Restore the Sanity by Alan Cooper

Emotional Design: Why We Love (Or Hate) Everyday Things by Donald A. Norman

Leonardo’s Laptop: Human Needs and the New Computing Technologies by Ben Shneiderman


Core: Required Readings in User Experience Design

About Face 3: The Essentials of Interaction Design by Alan Cooper , Robert Reimann, David Cronin

Information Architecture for the World Wide Web: Designing Large-Scale Web Sites by Louis Rosenfeld, Peter Morville

Designing Interactions by Bill Moggridge

Designing the User Interface by Ben Shneiderman


Introductions to UX

The Elements of User Experience: User-Centered Design for the Web by Jesse James Garrett

A Project Guide to UX: For user experience designers in the field or in the making by Russ Unger and Carolyn Chandler

Sketching User Experiences: Getting the Design Right and the Right Design by Bill Buxton

Designing for Interaction: Creating Smart Applications and Clever Devices by Dan Saffer

Thoughts on Interaction Design by Jon Kolko

Thoughtful Interaction Design: A Design Perspective on Information Technology by Jonas Löwgren , Erik Stolterman

Designing the Obvious: A Common Sense Approach to Web Application Design by Robert Hoekman Jr.

Information Architecture: Blueprints for the Web by Christina Wodtke

The Electronic Design Studio: Architectural Education in the Computer Era by Malcolm McCullough

Digital Ground: Architecture, Pervasive Computing, and Environmental Knowing by Malcolm McCullough


Practice, Methods and Tactics in UX

Communicating Design: Developing Web Site Documentation for Design and Planning by Dan Brown

The User Is Always Right: A Practical Guide to Creating and Using Personas for the Web by Steve Mulder , Ziv Yaar

Design Research: Methods and Perspectives by Brenda Laurel and Peter Lunenfeld

Rapid Contextual Design: A How-to Guide to Key Techniques for User-Centered Design by Karen Holtzblat, Jessamyn Burns Wendell, Shelley Wood

Contextual Design : A Customer-Centered Approach to Systems Designs by Hugh Beyer, Karen Holtzblatt

Observing the User Experience: A Practitioner’s Guide to User Research by Mike Kuniavsky

User and Task Analysis for Interface Design by JoAnn T. Hackos, Ph.D , Janice C. Redish

The Persona Lifecycle : Keeping People in Mind Throughout Product Design by John Pruitt , Tamara Adlin

Context and Consciousness: Activity Theory and Human-Computer Interaction by Bonnie A. Nardi

Design Research: Methods and Perspectives by Brenda Laurel (Editor), Peter Lunenfeld

Mental Models: Aligning Design Strategy with Human Behavior by Indy Young

Card Sorting: Design Usable Categories by Donna Spencer

Prototyping: A Practitioners Guide to Prototyping by Todd Zaki Warfel

Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces by Carolyn Snyder

Ambient Findability: What We Find Changes Who We Become by Peter Morville

Designing Interfaces: Patterns for Effective Interaction Design by Jenifer Tidwell

Designing Social Interfaces: Principles, Patterns and Practices for Improving the User Experience by Christian Crumlish and Erin Malone

Search Patterns: Design for Discovery by Peter Morville

Modular Web Design: Creating Reusable Components for User Experience Design and Documentation by Nathan Curtis

Web Form Design by Luke Wroblewski

Web Standards Solutions: The Markup and Style Handbook by Dan Cederholm

Designing with Web Standards by Jeffrey Zeldman

User-Centered Website Development: A Human-Computer Interaction Approach by Daniel D. McCracken , Rosalee J. Wolfe , Jared M. Spool


Usability

Don’t Make Me Think: A common sense approach to web usability by Steve Krug

Human Factors in Information Systems: The Relationship Between User Interface Design and Human Performance by Jane M. Carey (Editor)

Web Usability: A User-Centered Design Approach by Jonathan Lazar

Research-Based Web Design & Usability Guidelines by Sanjay J. Koyani , Robert W. Bailey , Janice R. Nall

Usability for the Web: Designing Web Sites that Work by Tom Brinck , Darren Gergle , Scott D. Wood

Handbook of Usability Testing: How to Plan, Design, and Conduct Effective Tests by Jeffrey Rubin

A Practical Guide to Usability Testing by Joseph S. Dumas , Janice C. Redish

Prioritizing Web Usability by Jakob Nielsen , Hoa Loranger

Designing Web Usability : The Practice of Simplicity by Jakob Nielsen

Site-Seeing: A Visual Approach to Web Usability by Luke Wroblewski

Web Site Usability (Interactive Technologies) by Jared Spool , Tara Scanlon , Carolyn Snyder , Terri DeAngelo


Visual Thinking & Info Viz

The Visual Display of Quantitative Information, 2nd edition by Edward R. Tufte

Beautiful Evidence by Edward R. Tufte

Envisioning Information by Edward R. Tufte

Visual Explanations: Images and Quantities, Evidence and Narrative by Edward R. Tufte

Information Design by Robert Jacobson (Editor)

Information Graphics: Innovative Solutions in Contemporary Design by Peter Wildbur , Michael Burke

Visual Function: An Introduction to Information Design by Paul Mijksenaar


Enterprise Search Summit NYC May 11-12

If you are an experience design professional passionate about Search, you must attend the Enterprise Search Summit in NYC May 11-12. I have spoken on designing social search in the enterprise as well as designing search experiences a few times at this conference – and it really is the best conference around this problem space. Our good friend Peter Morville will be one of the keynote speakers talking about Search & Discovery Design Patterns. Again – this is pretty cool. As many of you know, designing elegant, effective, useful and usable search systems is what separates the goats from the kids – it’s the Lady Gaga of ux problem spaces. I will be there in full goat regalia deconstructing companies that don’t “get it” or clueless pontificators that think, erroneously, that search and findability is a technology problem space and not an ux problem space.The probability of me pulling punches is near nill. Don’t be a schmuck hoping for a live tweeting of the event – come in person to smell the sulfur.

@semanticwill

New York City, May 11-12th, 2010 Hilton, Registration ($300 off regular price)

ENTERPRISE SEARCH SUMMIT is a highly intense, in-depth, 2-day conference that covers how to design, develop, implement and enhance cutting-edge internal search experiences. If you are an intereaction designer, information manager or IT or search professional, ENTERPRISE SEARCH SUMMIT is where you will learn strategies and build the skill sets you need to make your organization’s content not only searchable but “findable.” The emphasis for ENTERPRISE SEARCH SUMMIT 2010 is on how effective enterprise search delivers real value to organizations. This year’s Summit will examine the ways to leverage search tools, information architecture, experience design, classification, and other strategies and technologies to deliver meaningful results—not just in terms of information, but to the bottom line.

Expert speakers tackle tough topics such as tuning search to deliver optimum results, making the most of search logs and analytics, applying Web Service-based solutions to metadata challenges, facets, topic maps, and much more. Breakout sessions pack more hours of programming into the concentrated conference schedule and give you the chance to select topics of special interest to customize your conference experience.

This year’s Keynotes will be: UC Berkeley’s Marti Hearst, author of Search User Interfaces; Semantic Studios’ Peter Morville, author of Search Patterns as well as Susan Feldman from IDC and Leslie Owens of Forrester Research.

Dynamic Visualization: Introduction & Theory

(So instead of the usual post modern critical musings, I figured I would write some professional articles to provide a vocabulary for anyone interested in the topologies of modern information visualization theory in the context of some recent RIA applications seen on the web — I expect an audience of 4 for this article). Oh – I introduce a few concepts in this article that are common in cognitive psychology, so I will try to provide links to definitions or articles in wikipedia to provide more information.
~ SemanticWIll

Abstract

I’ll take a more conversation tone (more conversational than I am on twitter) in introducing the concept of dynamic visualization of quantitative information for a couple of reasons. First, I feel that often times the theories discussed in the ‘ivory towers’ are considered too esoteric for the lay reader (which isn’t really true); and secondly, I wanted to share some of the fruits of my overpriced MS in information design with as many people as possible. So – put simply, dynamic visualizations can be thought of as extensions of multivariate displays (or multiple-variable displays). They attempt to overcome problems of static data by allowing real-time manipulation of information objects through dynamic data queries displayed in the user interface using such technologies as AJAX or rich internet applications with front ends implemented in Adobe (Macromedia once upon a time) Flash.

The visualizations that are created must support the cognitive requirements such as pre-attentive processing, working memory, etc.. To do this, many of the same theories, strategies, and techniques are also duplicated in a dynamic visualization (Image Theory, the Gestalt Laws, verbal / visual dual-coding, etc.) Instead, I will give a brief overview of the literature, cognitive processes, and techniques that are unique to dynamic displays. This article is roughly organized into the following sections: Introduction (WTF), Dynamic Visualizations (BBQ), and Conclusion (FTW), References, and Apologia.

Introduction (WTF)

What is a dynamic visualization? Simply stated, it is an alternative way of accessing a database in which it can be queried multiple ways in order to form a changing and multi-dimensional visualization of the data. Shneiderman (1999) states that dynamic queries involve “the interactive control by a user of visual query parameters that generate a rapid (100 ms update), animated, visual display of database search results.” (pg. 236) The visual results can be displayed in many ways. Tables, node and line diagrams, tree-maps, hierarchical data, data landscapes, geographical representations, and two-dimensional diagrams are just a few of the ways that dynamic visualizations can be displayed on a computer. (Shneiderman, 1999; Ware, 2000)

As with other types of visualizations, dynamic visualizations are an extension of working memory. However, its main goal is not to enable creativity or support problem-solving (although they are involved). The main goal of a dynamic visualization is to amplify cognition often times to aid decision making. A designer of a dynamic visualization must take into consideration all previous concerns about visualizations and add an additional dimension of real-time variances. The dynamic visualization acts “as an extension of cognitive processes, augmenting working memory by providing visual markers for concepts and by revealing structural relationships between problem components.”(Ware, 2000, pg. 335) While the main goal may be to amplify cognition, the designer shouldn’t just add vast amounts of data into a display, making it dense, complex, and confusing. Instead, the designer must focus on “the principle of reducing the cost structure of information.” (Pirolli, Card, & Van Der Wege, 2001) Dynamic visualizations must support search techniques, provide an overview of the data, and a specific subset of it.

Gapminder.org

Figure 1: Gapminder.org

The process of interacting with dynamic visualizations is typically broken down into three parts. Ware describes a process that consists of three interlocking feedback loops: manipulation, exploration and navigation, and problem-solving.(2000) Manipulation occurs when objects are selected and moved. Exploration and navigation is an intermediate level in which a user explores data and build a cognitive spatial model. Hypothesis generation and refinement occur in the problem-solving stage. Dynamic visualizations support cognition in this stage because users “can quickly perceive patterns in data, ‘fly through’ data by adjusting sliders, and rapidly generate new queries based on what they discover through incidental learning.”(Shneiderman, 1999, pg. 237) They can also quickly discover which sections of a multidimensional search space are densely populated and which are sparsely populated, where there are clusters, exceptions, gaps, or outliers, and what trends ordinal data reveal. Gapminder (Figure 1 by Ola Rosling) is a fantastic example of this – perhaps one of the best in turning dynamic visualization into a cognition-amplifying and gestalt-generating machine)

“Humans can recognize the spatial configuration of elements in a picture and notice relationships among elements quickly. This highly developed visual system means people can grasp the content of a picture much faster than they can scan and understand text. Interface designers can capitalize on this by shifting some of the cognitive load of information retrieval to the perceptual system. By appropriately coding properties by size, position, shape, and color, we can greatly reduce the need for explicit selection, sorting, and scanning operations.” Shneiderman, pg. 241)

Dynamic visualizations are most valuable in environments that require monitoring or manipulation of large quantities of data, in real time, and under tight time constraints. There are several benefits for the ability to directly manipulate data and have returned visuals. Beginners are able to learn basic functionality quickly, there is little need for error messages, users can immediately see if their actions are accomplishing their goals, and users feel in control (On Kayak.com, user un-checks a particular Airline, and those automagically disappear from the display of results is an example). However, there are risks to using dynamic visualizations. Bad, missing, or erroneous source data could lead to wrong conclusions, and false relationship identification. De-skilling, coupled with a false sense of security, could have serious consequences where patterns are missed. The face-validity of any visualization must be questioned when the decisions that are based off of the displays have serious consequences.

Revealicious - Hyperbolic Tree

Figure 2: Revealicious - Hyperbolic Tree

Dynamic Visualizations (BBQ)

There are many types of dynamic visualizations. Tables are perhaps the most simplistic display option for dynamic data. Other options are more visual such as hyperbolic tree browsers (See Figure 2 Revealicious), overview and detail displays, three-dimensional data landscapes, and tree maps. Inputting data into these displays are done through forms in which a user selects data to query. Radio buttons are preferred for selecting binary nominal variables whereas sliders “allow setting a single ordinal or quantitative variable value.” (Card, Mackinlay & Shneiderman, 1999, pg. 235)

Eick describes sliders as “a generic user input mechanism for specifying a numeric value from a range.” (1999, pg. 251) He goes on to explain that they have an added visual effect because the space inside the slider can serve as an interactive color scale, a bar plot for discrete data, or a density plot for continuous data. Eick states that the purpose of a slider is to control filtration and restriction of displayed information. Doing so reduces visual clutter and enables “users to see important underlying patterns. The pruning of visual clutter from data-rich displays by adjusting sliders is particularly effective in information visualization, and even more so when done dynamically.” (Eick, 1999, pg. 251) Figure 3 below is the interface for Kayak.com I designed which utilizes sliders to dynamically prune data by attributes such as price, departure time, airline – all facets attached to flight manifests.

Kayak.com Sliders

Figure 3: Kayak.com Sliders

Bertin and Greene’s planar and retinal variables are an integral part in any visualization in which data must be pre-attentively sorted and identified with graphic variables. Briefly, the process of data extraction consists of three stages in which the viewer

  • determines what components are being represented,
  • determines which components are mapped to which visual graphic variables; and finally
  • perceives correspondence between components.

Bertin stated that a visual variable must have as many steps equal to or greater than the number of components it represents. A user can distinguish types of data either through serial or parallel processing. In serial processing, the user goes from target to target to determine differences in data. In parallel process, targets reveal measures through pre-attentive visualization techniques.

Overview + Detail

Overview + Detail refers to a group of visualizations that allow a general overview of information with the ability for a user to search and explore data to discover details and patterns. Within the visualization there is dedicated space for each and so there are really two displays within one visualization. “It reduces search, allows the detection of overall patterns, and aids the user in choosing the next move. A general heuristic of visualization design, therefore, is to start with an overview. But it is also necessary for the user to access details rapidly. One solution is overview + detail: to provide multiple views, an overview for orientation, and a detailed view for further work.” (Card, Mackinlay & Shneiderman, 1999, pg. 285) Examples of these types of displays are dashboards with spatial zoom displays, semantic zooming, zoom-and-replace, and tree maps (see the dashboard mockup Figure 4 below, where overview data is presented, but detailed views can be seen by clicking and graphs to drill down). One drawback from this type of visualization is that loads for working memory and visual search are increased which in turn degrade performance.(Card, Mackinlay & Shneiderman, 1999) Furnas (1981) explains that in the zoom system, local and global information is not available at once and so integration of the two must occur in human memory.

Sample Dashboard

Figure 4: Sample Dashboard

Focus + Context

Focus + Context is another technique that supports the ability to see an overview of information while having access to detailed data. Context refers to the necessity of a user to see the overview of the data while focus relates to detailed information. Another term for this group of techniques is distortion-oriented presentation techniques. (Leung & Apperley, 1999) Single visualizations are created with the knowledge that the information that is needed in the overview may be different from the data required for the detail. Focus + context techniques were created in the attempt to build one visualization which displays overview and detail information in a way that peripheral information is displayed in less detail while the information that is in focus is dynamic and dependent on the user’s interest.

The essence of these [focus + context] techniques is the concurrent presentation of local detail together with global context at reduced magnification, in a format which allows dynamic interactive positioning of the local detail without severely compromising spatial relationships.(Leung & Apperlay, 1999, pg. 352)

Focus + context displays are also referred to as attention-warped displays in that they distort the display in order to provide the maximum space for a use’s attention. This can be accomplished by filtering, selective aggregation, micro-macro readings, highlighting, and distortion. (Card, Mackinlay, Shneiderman, 1999)

Focus + Detail: Election Dashboard in Flex

Figure 5: Focus + Detail: Election Dashboard in Flex

There are many types of visualizations that use the focus + context technique. This technique “supports visualizing an entire information structure at once as well as zooming in on specific items.” (Rao & Card, 1999, pg. 343) The detailed view is blended with a view of the overall structure in a way that manipulation operations can navigate through the data. (Lamping & Rao, 1995) The context + focus techniques support different types of data and different user goals. Some of these are cone trees, fisheye view, bifocal lens, table lens, magic lens, hyperbolic browsers, perspective wall, polyfocal display, map displays, and bar charts such (see Figure 5 above – a dashboard example for the 2008 election).

Furnas (1981) proposed the fish-eye view as an alternative way to display a large structure. He uses detailed algorithms called the degree of interest metric to determine an appropriate balance between “the need for local detail against the need for global context: by showing full detail in the immediate neighborhood some place of current focus, but requiring increasing a priori importance as the distance from the focus increases.” (pg. 312) The variable zoom algorithm that creates the fisheye lens has been proven to support a user’s ability to maintain a global context within hierarchical clusters.(Schaffer et. al, 1996) Spence and Apperley’s (1999) bifocal lens is based on an overview + detail display. They inserted the detailed view into the overview in a way that resembled a bifocal lens. They used a point of interest where data that surrounds it is mapped and compressed based on their positioning within and from the focal area. A variation of this technique was extended into two dimensional form by Leung and by Mackinlay’s Perspective Wall. (Leung & Apperley, 1999) Rao and Card’s (1999) table lens is based on a focus + context fisheye technique to display tabular information using label information and multiple distal focal areas. Their hyperbolic browser is an additional focus + context technique that was “based on hyperbolic geometry for visualizing and manipulating large hierarchies. [It] assigns more display space to a portion of the hierarchy while still embedding it in the context of the entire hierarchy.” (Lamping & Rao, 1995, Pg. 382)

Conclusion (FTW)

Dynamic visualizations can be considered one of the most difficult displays to create. Systems can be extremely large, data could be constantly entering the system, and users can change queries instantly. Communicating the information in a meaningful way must be seriously considered. There are several techniques a designer can utilize to help reduce the cognitive load of a user and to support his/her cognition. Image Theory, the Gestalt Laws, working memory, learning theories, and biological processing all come into play in these visualizations. In this article, overview + detail and focus + context techniques were discussed. These techniques were created in the attempt to solve the problems “associated with the presentation of data in a confined space: a spatial problem and an information density problem.”(Leung & Apperlay, 1999, pg. 362)

The distortion techniques such as the hyperbolic browser and fisheye view largely address these issues, however there are always risks involved in using such techniques. Users can miss patterns and connections as well as make incorrect assumptions. Designers must understand how different displays support different types of data and different tasks in order to support user cognition. One of the places significant improvements can be made is that, given the increasing ubiquity of dynamic data visualization applications on e-commence websites and common applications like hotel and travel booking, the more important it is for designer’s to take these theories into account and try them in the real world.

Apologia (#formarketingreasons)

I realize there are a number of important concepts which I only briefly introduced here, as well as some more technical terms that I take for granted that the reader knows. These assumptions are problematic, and for that reason, on the next iteration of this article – I will need to include a glossary of terms and overview of some the basic concepts of information theory. Any further recommendations are always appreciated.

References : Everything you wanted to know about information visualization but were too darn cheap to buy the books. Note: I am exhausted, but need to include the appropriate links to the following resources for further information.

Card, S.K., Mackinlay, J.D. & Shneiderman, B. (1999) Readings in information visualization: Using vision to think. San Francisco: Morgan Kaufman.

Eick, S.G. (1999). Data Visualization Sliders. In S.K. Card, J.D. Mackinlay, & B. Shneiderman (Eds.), Readings in information visualization: Using vision to think (pp. 251-252). San Francisco: Morgan Kaufman.

Eick, S.G., Steffen, J.L., & Sumner, E.E. (1999). Seesoft – a tool for visualizing line oriented software statistics. In S.K. Card, J.D. Mackinlay, & B. Shneiderman (Eds.), Readings in information visualization: Using vision to think (pp. 419-430). San Francisco: Morgan Kaufman.

Furnas, G.W. (1981). The FISHEYE View: A New Look at Structured Files. In S.K. Card, J.D. Mackinlay, & B. Shneiderman (Eds.), Readings in information visualization: Using vision to think (pp. 312-320). San Francisco: Morgan Kaufman.

Greene, M. (1998). Toward a Perceptual Science of Multidimensional Data Visualization: Bertin and Beyond. ERGO/GERO Human Factors Science.

Lamping, J. & Rao, R. (1995). The hyperbolic browser: a focus + context technique for  visualizing large hierarchies. In S.K. Card, J.D. Mackinlay, & B. Shneiderman (Eds.), Readings in information visualization: Using vision to think. (pp. 382-408). San Francisco: Morgan Kaufman.

Leung, Y.K. Apperley, M.D. (1999). A Review and Taxonomy of Distortion-Oriented Presentation Techniques. In S.K. Card, J.D. Mackinlay, & B. Shneiderman (Eds.), Readings in information visualization: Using vision to think. (pp. 350-367). San Francisco: Morgan Kaufman.

Lin, X. (1999). Visualization for the Document Space. In S.K. Card, J.D. Mackinlay, & B. Shneiderman (Eds.), Readings in information visualization: Using vision to think. (pp. 432-439). San Francisco: Morgan Kaufman.

Pirolli, P., Card, S., & Van Der Wege, M. Visual Information Foraging in a Focus + Context  Visualization. CHI 2001, 3(1) 506-513.

Preece, J., Rogers, Y., & Sharp, H. (2002). Interaction Design: beyond human-computer interaction. John Wiley & Sons.

Rao, R. and Card, S.K. (1999). The table lens: Merging graphical and symbolic representations in an interactive focus + context visualization for tabular information. In S.K. Card, J.D. Mackinlay, & B. Shneiderman (Eds.), Readings in information visualization: Using vision to think. (pp. 343-349). San Francisco: Morgan Kaufman.

Schaffer, D., Zuo, Z., Greenberg, S., Bartram, L., Dill, J., Dubs, S., & Roseman, M. (1996). Navigating hierarchically clustered networks through fisheye and full-zoom methods. ACM Transactions on Computer-Human Interaction, 3(2) 162-188.

Shneiderman, B. (1999). Dynamic Queries for Visual Information Seeking. In S.K. Card, J.D. Mackinlay, & B. Shneiderman (Eds.), Readings in information visualization: Using vision to think. (pp. 236-243). San Francisco: Morgan Kaufman.

Ware, C. (2000). Information Visualization: Perception for Design. San Francisco: Morgan Kaufmann.

A/

Shades of Gray: Thoughts on Sketching

“Design in art, is a recognition of the relation between various things, various elements in the creative flux. You can’t invent a design. You recognize it, in the fourth dimension. That is, with your blood and your bones, as well as with your eyes.”
D.H. Lawrence

Increasingly, as a Big “D” designer, mostly of complex dynamic systems (spaces, processes and products for people), I find myself stretching the limits of communication tools to explore and document what it will be like to interact with the things I design, which by their nature creates a ‘frame of experience’ between externalized object and the intersubjective experience of the person for whom I design. In an upcoming workshop at Interaction10, “The Right Way to Wireframe™,” four friends and designers explore design through each of our approaches to problem space definition and present shared commonalities we see in our processes even while specific tools vary.  We chose wireframing among many other design communication activities because of it’s contentiousness in the user experience (UX) community – at least as it relates to religious arguments of tools over craft, or indeed, principles.

If you reveal your secrets to the wind, you should not blame the wind for revealing them to the trees.
Kahlil Gibran

I have described “wireframing” as a form of design communication that enables stakeholders, team members, users and clients to gain first-hand appreciation of existing or future problem spaces and solutions. Wireframing can be considered first order: the wireframe itself; second order: the process of creating a vehicle of design communication; and third, the cognitive process of envisioning, external actualization and reflection through the selection of a cognitive artifact which expresses a dialogical subjectivity between the Ego and Alter and a multiplicity of positions which they can take with respect to one another.

While “wireframes” are representations of a design made before final artifacts exist, their formalism over sketching makes them problematic. They are created to inform both the design process and design decisions, but they can be conceived as more reified than sketches, and therefore considered more final, which is unfortunate.

“An essential aspect of creativity is not being afraid to fail.”
Dr Edwin Land

I have often thought that the strategies of both sketching and wireframing can best be characterized by modalities of combinatorian decision analysis. What do I mean by that? At an abstract level, a particular problem space is defined and enframed by the tools we feel most comfortable with: problem space, domain, expertise, theme, context of problem, bias towards types of design tools and documents, timeliness of artifacts created. While I believe I effectively reflected upon wireframes in Shades of Gray, while working through the design of our workshop, it seemed necessary to step back and discuss the role of sketching in my personal design process.

I see sketching as an important pre-wireframing technique for doing divergent and transformative design, something that fundamentally differentiates what has been called “big D,” and “small D” design – not to put to fine a point on it – it is what separates the Designers from the wireframe monkeys. This is the argument that I have made, and base it in part on how Buxton defines design in “Sketching the User Experience,” when he writes:

“What I mean by the term “design” is what someone who went to art college and studied industrial design would recognize as design. At least this vague characterization helps narrow our interpretation of the term somewhat. Some recent work in cognitive science (Goel 1995, Gedenryd 1998) helps distinguish it further. It suggests that a designer’s approach to creative problem solving is very different  from how computer scientists, for example, solve puzzles. That is, design can be distinguished by a  particular cognitive style. Gendenryd, in particular, makes clear that sketching is fundamental to the design process. Furthermore, related work by Suwa and Tversky (2002) and Tcerksy (2002) shows that besides the ability to make sketches, a designer’s use of them is a distinct skill that develops with practice, and is fundamental to their cognitive style.” (Buxton, 2007, p. 96)

Amen. I think as designers we must go out of our way avoiding intra-mental thinking and instead use sketches to restore presence so that we can work interactively by seeing and doing in the recursive, iterative manner sketching seems more suited to than wireframing. As I wrote previously in Shades of Grey: Wireframes as Thinking Device:

“I think of “D”esign as an exploration of the conceivable futures. I use my sketches and wireframes as means to make explorative moves and assess the consequences of those moves. As I explore the problem space, I could relatively easily keep the design models in my head, but I would fail in my primary objective to create a framework for a conversation among the stakeholders, the intended audience, and me.”

My sketches are a model I employ to be able to conceive and predict the consequences of a certain design arguments (for to sketch an interaction, we are making an argument – even one that will be tossed away) within an unresolved problem space whose borders have not been fully defined. Representational means such as sketches, wireflows or  physical models like paper prototypes are important tools for my design since they help in assessing and reflecting on the details of a solution in relation to the whole problematic context in which it is situated. Using pencil and paper speeds up my doing-seeing loop of creation, judgment and reformulation. Few other tools are as fast as pencil and paper in this respect. As a designer, I can draw a line and immediately evaluate it. This conversational process between myself and visualization of the design situation has another effect in that it generates new ideas.

As I draw sketches, I see the problem in another way, perhaps because a line came out slightly wrong on the paper. Taking a step back or looking at a sketch from a different angle may also lead to new ideas and thoughts. New ideas are then nothing but old ideas in new combinations or old ideas looked upon or interpreted from a new perspective  – sketching than becomes what Goffman calls “framing.” This is also what Laseau calls “a conversation with ourselves in which we communicate with sketches.” It is also related to Schön’s concept of a reflective conversation with the materials of a design situation, where I as the designer shape the situation in a way that is in me, so that I can respond to that back-talk. Schön writes:

“In a good process of design, this conversation is reflective. In answer to the situation’s back-talk, the designer reflects-in-action on the construction of the problem, the strategies of action, or the model of the phenomena, which have been implicit in his moves.” (Schön, 1983, p. 79)

The sketches also form a documentation of my design process without adding any administrative overhead. As a designer, I can learn much by browsing back in old sketches; watching the evolution of an idea as my understanding of the problem space is explored, and refined, and this documentation can tell a narrative of design decisions to be shared with internal and external stakeholders who can then see why certain moves where taken, others discarded. Externalizations of different kinds (sketches, wireframes, prototypes) are then especially useful for communication purposes where I want to present ideas to another member of the design team, to the client, or to a user. The presentation sketches are usually not as rough as working sketches are and their purpose is not only to communicate an idea, but also to persuade the other part that a particular design alternative is better than other alternatives.

“Every creator painfully experiences the chasm between his inner vision and its ultimate expression.”
Isaac Bashevis Singer (יצחק באַשעװיס זינגער)

As noted above, the sketch can be rapid and spontaneous, but it leaves stable traces in contrast to conversation, which is evanescent. Conversation (or Talk) is, however, important for the argumentative assessment and communication of design alternatives, which is at the core of my design activities (sketch, present, critique, regine). As designers, we employ a language of talking and sketching in parallel. Schön describes the work of an architectural design professor named Quist in a session with a student:

“In the media of sketch and spatial-action language, he represents buildings on the site through moves which are also experiments. Each move has consequences described and evaluated in terms drawn from one or more design domains. Each has implications binding on later moves. And each creates new problems to be described and solved. Quist designs by spinning out a web of moves, consequences, implications, appreciations, and further moves.”

The quote above is a clear statement of what much of Design work is about. In terms of distributed cognition, it describes design work as distributed over designers and my representational means (e.g. sketches). The representational means (sketches or wireframes) are, in turn, physical embodiments of the culture and history in which they have evolved through the lifecycle of a project I am working on. I think the cultural practices of designers, including the spatial-action language, provide therefore the structural resources for performing experimental design moves. It is part of this ‘knowing-in-action,’ the know-how revealed in spontaneous and I would hope skillfully performed actions. The spatial-action language is also constitutive of our professional community of practice to which I belong in the ways in which we communicate both with ourselves, but also with our teams, clients, and now to you as well.

Photos (on Flickr) by Michael Leis

References:

Buxton, Bill (2007). Sketching the User Experience. Boston, MA: Morgan Kaufman.

Schön, D. A. (1987). Educating the Reflective Practitioner: Toward a New Design for Teaching and Learning in the Professions. San Francisco, CA: Jossey-Bass Publishers.

The Right Way to Wireframe

Presenters
Russ Unger, Will Evans, Fred Beecher, Todd Zaki Warfel

REGISTER NOW!

Background
Increasingly, as designers of interactive systems (spaces, processes and products for people), we find ourselves stretching the limits of communication tools to explore and document what it will be like to interact with the things we design.

We describe “wireframing” as a form of design communication that enables stakeholders, team members, users and clients to gain first-hand appreciation of existing or future problem spaces and solutions.

We create wireframes to inform both design process and design decisions. Wireframes range from sketches and different kind of models at various levels of fidelity – “looks like,” “behaves like,” “works like” – to explore and communicate propositions about the design and its context.

We think that the wireframing strategies user experience designers use are often constrained by the tools they feel most comfortable with: problem space, domain, expertise, theme, context of problem, bias towards types of design tools and documents, timeliness of artifacts created. For this reason, a session that attacks one business problem from the perspective of four different designers will provide attendees with a unique understanding and set of strategies and tactics to improve their own practice.

Description
This workshop will be presented in two parts and will revolve around a single design problem. Before the workshop, a third party (TBD) will provide clear business requirements to the four user experience designers leading it. They will each choose their own tool and method for exploring the requirements via wireframes and specifications. They will each work with their own graphic designer to develop and apply a visual design.

When the workshop begins, the workshop leaders will present the design problem/requirements to the participants. Participants will be separated into four different groups based on their preferred wireframing tool: paper, Visio, OmniGraffle, or Axure. Each group will be coached by one of the workshop leaders. In these groups, attendees will tackle the design problem through sketching and review sessions. At the end of the sketching activity, the teams will each choose their best sketch and will turn their sketches into wireframes using the tool of their choice.  Each team will then present their final solution to the workshop, taking questions and critiques from the attendees and session leaders.

After the presentations have been completed, each of the workshop leaders will show their own solutions. They will each provide a detailed account of how they arrived at their solutions and how the tools they used influenced them. Participants will be provided ample time to critique these solutions and ask questions of the workshop leaders.

Session Takeaway
Gain a better understanding of three different kinds of activities within the design and development process where wireframing is valuable:

  • Understanding existing user experiences and context.
  • Exploring and evaluating design ideas
  • Communicating ideas to and audience of decision makers and team members.
  • Provides user experience designers with a variety of approaches to creating wireframes.
  • Details four different approaches to business requirements synthesis and wireframe exploration.
  • Shows the advantages and disadvantages of different approaches within a specific context
  • Refutes the argument that wireframing is dead by showing that it has just multiplied its forms
  • The realization that the tools we use to design, such as wireframes, prototypes, etc. influence the way we think. Solutions, and probably even imagination, are inspired and often time limited by the tools we have at our disposal – which is perhaps the greatest takeaway from this session.

Introduction to Interaction Design: An Interview with Dave Malouf

Johnny Holland Featured Interview

Johnny Holland Featured Interview

This February is the second annual Interaction Design Association (IxDA) Interaction’09 conference which is being held in Vancouver, British Columbia in conjunction with Simon Fraser University’s School of Interactive Arts and Technology. Dave Malouf, one of the founder’s of the IxDA, was kind enough to allow me to interview him recently about a workshop he will be giving, his take on the field of interaction design, and some thoughts about where the field is going.

[Will Evans] How did you get your start in Interaction/Information Design?

[Dave Malouf ] Well, I started in the web world. Back then doing HTML 1.0 meant you were a designer. I bounced from technologist to producer/project manager for a few years until I found User Experience and fell in love. The last 10 years has been a personal journey of discovering from the outside what “D”esign really means, how it is really meant to be practiced, and now how it is to be taught. Then I connect that to my passion for technology and human beings which combine to me into  Interaction Design.

Read the interview »

IxDA Announces Interaction|09 with Simon Fraser University, Vancouver, B.C. February 5-8, 2009

The Interaction Design Association (IxDA) is pleased to announce Interaction|09, to be held February 5-8, 2009 in conjunction with Simon Fraser University’s School of Interactive Arts + Technology, and the Faculty of Business, located in lovely Vancouver, B.C.

Mark your calendars now for what promises to be another exciting and informative conference centered around the design of interactive systems of all types, from web and desktop applications, to mobile devices, consumer electronics, digitally-enhanced environments, and more. This will be our growing community’s second annual opportunity to gather with several hundred other Interaction Design professionals from around the world.

Building on the successful format of Interaction 08 at the Savannah College of Art and Design, Interaction 09 will span four days, with two and a half main conference days preceded by 1 ½ days of pre- conference workshops and activities. Thursday will be devoted to a diverse and valuable series of professional workshops. Friday will be a busy and exciting day, with tours, additional workshops and opportunities to explore SFU, its surrounding community and Vancouver, along with leadership and organizing activities in the morning. The conference will open Friday afternoon, with a welcoming reception that evening.

Saturday and Sunday will be packed with inspirational and tactical sessions geared at anyone who practices Interaction Design. We look forward to Interaction’09 continuing to build on the quality of experience and community camaraderie we shared this year in Savannah.
————
For more on Simon Fraser University School of Interactive Arts + Technology, visit http://www.siat.sfu.ca/

Shades of Gray: Wireframes as Thinking Device

“A picture is worth a thousand words. An interface is worth a thousand pictures.”
~ Ben Shneiderman, 2003

My good friend Russ Unger recently published a book for Peachpit entitled “A Project Guide to UX Design,” and for his chapter on wireframing, he asked me to contribute some designs, which I was pleased to do. He provided me with some background information and requirements for the redesign of a fictitious cruise-line operator home page and asked that I design some annotated wireframes which he could use as examples in his book. After I had completed this little exercise, he asked me to write a brief explanation of my process. This is the unabridged write-up I sent over to him explaining my use of wireframes as a ‘thinking device’ in the design process. No doubt it will be edited to fit the constraints of the book, but he was kind enough to let me post the original here.

Shades of Gray: Wireframes as Thinking Device

For me, wireframes act as a form of ‘thinking device’ for the setting and exploration of a given problem space – in this example, a home page for a cruise line operator. To understand the utility of wireframes it is important to understand the nature of designing. I think of “D”esign as an exploration of the conceivable futures. I use my sketches and wireframes as means to make explorative moves and assess the consequences of those moves. As I explore the problem space, I could relatively easily keep the design models in my head, but I would fail in my primary objective to create a framework for a conversation among the stakeholders, the intended audience, and me.

I think it is quite common for UX folks to view design as problem solving. For me, designing through the use of wireframes is a search in a problem space of alternatives; it’s a process of problem setting as much as it is a process of problem solving, which means that I always start with the context. To simplify, I pick my primary audience and the one activity which allows them to solve one goal quickly, effortlessly, elegantly. In this case, the primary audience wants to easily find the best cruise, at the right time, for the right price. I don’t even look at the requirements document or competitive analysis until after I have sketched a couple of ideas either on paper or using Omnigraffle, which explores the primary goal. I’m not looking for solutions at this point because the first round of wireframes provide a space to engage in a dialogue with other designers, stakeholders, and the wireframes themselves.

My design process could best be described as going from a phase of divergence, through a phase of transformation, to a phase of convergence. Throughout every phase, wireframes are presented to stakeholders for critique and conversation.

During the divergent phase the constraints and possibilities of the design situation are explored. I try to find facts in the design situation that are stable and hold on to them throughout the process. Large parts of this phase consist of information gathering and trying to understand and formulate the design problem. By sketching a number of wireframes, I can explore alternatives. All the impossible and conceivable ideas are presented, tested, and in many cases, tossed away.

My initial visions are formed during this phase. In the cruise line exercise I focused on the ‘centrality of search’ as a driving goal in the design. I already knew that I wanted to design the best cruise line search interface possible, and I wanted that activity to be brought front and center in the design. I sketched the concept of providing immediate suggested cruises even before the user had committed to seeing a complete search results screen. From the homepage, the user would be pulled into a conversation and engaged with the process of finding a great cruise. The concept behind this was first proposed by Peter Hong some years back at Blast Radius while collaborating on a new search interface between their team and ours at Kayak on the PinPoint Travel interface. It was built but then killed – but the idea is worth keeping alive – I think.

In the transformation phase, I decrease the number of alternatives, and the scope of my designs narrows as the wireframes speak back to me. I begin to toss out really bad ideas that I might have fancied in the beginning. It’s usually at this point that I go back and read the requirements document and try to understand the complete ecosystem of stakeholder and business needs, and address those in the context of my primary design goal; the one, central activity of my core audience. It’s also at this point that I begin to address other, competing needs. In the case of the cruise line operator, I sketched out the header, footer, and static content and blocked out areas in the design for content modules such as CTAs (Calls To Action) and promotions. I share the output from this stage with the key stakeholders, but also bring in the visual designer, development lead and quality assurance engineer so they can contribute to the process and provide more ideas while pointing out pitfalls and constraints.

Finally, as the designer, I have to make the decision to implement the design in a specification. During the ‘convergence’ stage, I create two or three candidates for final consideration. I use annotations to empower the wireframe to plead its case to stakeholders and targeted testers. The wireframes you see in Figure 1.a and 1.b are now at this stage, where the design changes are small and the details are being polished.

Here are two somewhat polished wireframes that survived the process. These are by no means perfect, but they do satisfice for the purposes of the exercise and to illustrate what my wireframes look like.

- will

Global Cruises Sample Wireframe 1.a

Figure 1.a | Global Cruises Sample Wireframe

———————————————-

Global Cruises Wireframe 1.b

Figure 1.b | Global Cruises Wireframe

———————————————-
Mark Brooks, a friend of Russ Unger, and visual designer – was able to take those wireframes and rather quickly start exploring various visual designs including the screen below.

Global Cruises Homepage Comp v1

Global Cruises Homepage Comp v1

———————————————-

If you wish to see the complete set – or for the raw Omnigraffle files which I am happy to share – just ping me on twitter: semanticwill

You can download the PDF here: globalcruises_ixd_v1.51 (PDF)

Omnigraffle Files here: globalcruises_ixd_v1.51 graffle (ZIP)