Boxes and Lines over Bullets and Arrows: Deliverables that Clarify, Focus, and Improve DesignRich FulcherSenior UI DesignerAmerica [email protected] GlassSenior UI DesignerAmerica [email protected] LeacockSenior UI DesignerAmerica [email protected] few words about the audience for design deliverablesDownload Our Slides, Templates, and MoreConcept MapsAudience and benefits of concepts mapsTips for effective concept mapsWireframes and StoryboardsAudience and benefits of wireframes and storyboardsTips for effective wireframes and storyboardsFlow MapsAudience and benefits of flow mapsTips for effective flow mapsDetailed Mockups and Functional SpecificationsAudience and benefits of detailed mockups and functional specificationsTips for effective detailed mockups and functional specificationsConclusionBoxes and Lines over Bullets and Arrows:Deliverables that Clarify, Focus, and Improve DesignRich FulcherSenior UI DesignerAmerica [email protected] GlassSenior UI DesignerAmerica [email protected] LeacockSenior UI DesignerAmerica [email protected] representations we choose for UI design affect both how we think about the design and how others understand it. Conceptmaps, wireframes, storyboards, and flow-maps speak to different audiences at different stages of the development cycle. This presentation provides examples of these documents and a toolkit for producing them.IntroductionUser interface specialists do not work in a vacuum; they rely on others for product definition, organizational support, and implementation. The success of any software project depends upon workers with different areas of expertise joining together to build a product.The same documents that assist a UI designer in analyzing and managing design can be valuable for communicating the state of the design to other team members. At different stages of the software design cycle, these stakeholders need to know different things about the design, and therefore different styles of documentation are appropriate.In this presentation, we will focus on four sets of tools for visual representation that we have found particularly valuable in communicating design within the product team. We believe that these tools can give design a greater voice in product development, and ultimately a better opportunity to serve the end user by introducing user-centered design methodologies.A few words about the audience for design deliverablesTypically, when designers and usability professionals think of audience, they think of the end users of the products. In this paper, we refer to the audience of coworkers responsible for all stages of product delivery, from definition to implementation. Although many of the roles we mention are familiar, a few can vary widely from between organizations. In our experience:- product managers are responsible for strategy, direction, and definition of a small number (typically less than five) of products; to the rest of the organization, they are often seen as the key representative for a product. They informally lead the multi-disciplinary product team and are often the final decision makers for issues that arise.- business owners typically manage a market segment which supports many products and are accountable for partner and advertising relationships, as well as product promotion, launch strategies, and success metrics.- project managers (aka producers) facilitate team communication, manage schedules and meetings, track issues, etc.Download Our Slides, Templates, and MoreWe’ve made the slides and examples associated with this presentation available for download at http://www.leacock.com/upa2002Concept MapsA concept map represents key concepts and relationships within a given context. The nature of the relationship between concepts is described propositions: two or more concepts linked by words describing their association. These propositions may be simple (“people ask questions”) or compound (“people ask questions of a source to get information.”)Fig 1: A concept map.Audience and benefits of concepts mapsConcept maps seek to capture the mental model of users and evolve from research with end users and domain experts. For theproduct team, a concept map defines a common reference vocabulary for the product that will be employed throughout development to foster shared understanding. Product managers can also benefit from the concept map’s ability to cleanly encapsulate business or technology models. By formalizing the knowledge of team members, concepts maps help bring team additions up to speed with the project, and reduce the damage done if key individuals leave the team. Tips for effective concept maps- Be precise with the language used in a concept map — the less ambiguity, the greater the shared understanding.- Start drawing your map at the beginning of your analysis, and redraw it frequently. With each addition or refinement, there is the opportunity to discover new relationships between the concepts.- Make use of some organizing principle to manage the complexity of the concept map. We recommend making a smaller set of key concepts and a set of dominant propositions more prominent; this enables the reader to get a sense of the general structure of the map, allowing them to delve in to greater detail as needed.- Validate your final concept map with all of your collaborators to see if it still captures their understanding.Wireframes and StoryboardsA wireframe is a rough layout of a specific user view, addressing the positioning of information and controls within a view, including clustering, ordering, and hierarchy. It is a skeletal view of an interface that seeks to organize the content of one specific view without being distracted by branding, visual design, and other concerns.A storyboard uses a sequence of wireframes all following a particular scenario in order to illustrate a sample series of interactions. In the same way a film director would use storyboards to show how the key shots in a sequence will relate to each other to form a whole experience, a UI storyboard highlights the key interactions that will correspond to a user’s experience of a particular task.Fig 2: Left, a wireframe. Right, the same wireframe in the context of a storyboard.Audience and benefits of wireframes and storyboardsWireframes are often the first tangible fruits of design work following time spent in