Audiences & Artifacts

Slide 1: Audiences & Artifacts Presented by Nathan Curtis EightShapes, LLC IA Summit 2008, Miami, FL :: April 14, 2008

Slide 2: ! How People Read on the Web They don’t. People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences. Jakob Nielsen’s Alertbox, October 1, 1997 Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 3: " How People Read Deliverables They don’t. People scan deliverables. People refer to deliverables. People use deliverables. Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 4: # How can we produce better deliverables, faster? Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 5: $ The Audience Anyone that consumes deliverables that information architects produce. Product Site Visual HTML/CSS Executive Manager Strategist Designer Guy Developer QA Copywriter Publisher Us Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 6: % The Artifacts Output of our design process that is recorded and used. Concept Strategy Map Flow Storyboard Model Annotated Wireframe Specification Mockup Style Guide Wireframe Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 7: & Aren!t There More Artifacts? Yes. But I don’t have time to cover personas, content inventories, competitive analysis, prototypes, sketches, and more. Shameless plug: Instead, just go buy Dan’s book, Communicating Design. Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 8: ' Audiences & Artifacts Visual Designer Site Strategist HTML/CSS/JS Product Mgr Copywriter Developer Executive Publisher QA Strategy Concept Models Maps Flows Storyboard Wireframe Annotated Wireframe Specification Mockup Style Guide Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 9: ( Christopher Fahey via Twitter, February 7, 2008 “Client's CEO just opened our comps in Photoshop, adjusted saturation slider, and loved what he saw... Today's the last day of the project” Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 10: )* “The Threshold” HTML/CSS/JS Product Mgr Copywriter Developer Executive Publisher QA Strategy Concept Models Maps Flows Storyboard Wireframe Annotated Wireframe Specification Mockup Style Guide Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 11: )) “Not all documents are for everybody involved in the project.” Dan Willis, via UX Crank http://dswillis.com/uxcrank/?p=48 Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 12: )! Perceived Artifact Value 5 Wireframes Wireframes Concept Models 4 Site Map Change History Site Map 3 Concept Models Change History 2 Information 1 Everyone Architects Else Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 13: )" "It was really useful to label design documentation the same to map between visual and IA work." Visual Design Lead Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 14: )# “The Roadmap” Visual Designer Site Strategist HTML/CSS/JS Product Mgr Copywriter Developer Executive Publisher QA Strategy Concept Models Maps Flows Storyboard Wireframe Annotated Wireframe Specification Mockup Style Guide Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 15: )$ Deliverable Life Cycle 1: Preparation 2: Concepts 3: Variations 4: Details Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 16: )% Aspects of the Life Cycle Iteration Descoping Evolution Disruption Consumer Population Growth ! More? Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 17: )& So what can I do about it? Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 18: )' Trying to be more... 1. Structured 4. Prepared 2. Focused 5. Investigative 3. Predictable 6. Mechanized Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 19: )( 1 of 6: Structured “Ok, is everyone ready?” “Open InBoxWireframes.2.0.pdf, page 17...” Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 20: !* Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 21: !) Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 22: !! Track Changes Create a historical reference for how your document evolved over time • Be detailed • Be useful • Be auditable Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 23: !" 2 of 6: Focused Move away from the “one-size-fits-all” composition strategy and consider creating 2+ deliverables for specific audiences. Layers Vary annotations by audience Modularity Reuse artwork across 2+ documents Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 24: !# Layers For the Publisher: Editorial Guidelines For the Developer: Interactive Specs Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 25: !$ Modularity ,#."/),0*12#)3 %&'#("#)*#+',- !"#$%&!" 0"%12"3&4%" !"# .%(/ !"#$%&!" !"#$ '(#" )"*+%!*,- )"*+%!*,; !"#$%& )"<1*!"3 !"#$%&!" *02'0)#)3 516"(7%&8"3 9%(4&%:&2 !"#$%&!" Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 26: !% 3 of 6: Predictable Create learnable deliverable page structures. Introduction Introduction Introduction Use When Use When Elements Elements Elements Use When Introduction Introduction Introduction Use When Elements Use When Elements Use When Elements Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 27: !& Page Patterns Placeholder Shapes Text A Areas predefined in a layout to enable designers to place artwork and compose annotations in a deliverable page. Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 28: !' Words Ways to Connect Pictures & Words Pictures Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 29: !( Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 30: "* Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 31: ") 4 of 6: Prepared Think before you speak. Don’t launch Visio, open an old deliverable, erase 96% of the content, and jump right in. Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 32: "! Recipes Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 33: "" Collaborating on a Recipe Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 34: "# Formalizing a Recipe Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 35: "$ Automating a Recipe Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 36: "% The Recipe Starting Point Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 37: "& 5 of 6: Investigative When designing, don’t you always try and include the voice of your customer? Apply user research techniques to your deliverable design, too. Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 38: "' Time To Get Serious! Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 39: "( Just Get Feedback • Plan the deliverable collaboratively with your audiences • Sit down and test the deliverable informally - learn if your audience(s) can use it without you reading it to them • Iterate and improve your deliverable to prove to your audience(s) that you are listening Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 40: #* 6 of 6: Mechanized Create approaches to: • Create efficiencies in technique • Optimize how you communicate • Leverage the maturity of a design system Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 41: #) Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 42: #! http://www.sun.com/webdesign/components/component-index.html Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 43: #" Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 44: ## Issues 1. Synchronization 2. Cost 3. Context 4. Process 5. Audience Wireframes HTML Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 45: #$ Scripting a Wireframe Page Template Definition Grid Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 46: #% Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 47: #& Trying to be more... 1. Structured 4. Prepared 2. Focused 5. Investigative 3. Predictable 6. Mechanized Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 48: #' “Let me be clear. Deliverables are not the sex. Sex is what leads to the deliverable.” Austin Govella Thinking & Making blog, 4/8/2008 http://www.thinkingandmaking.com/view/agile-ux-idealized Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008

Slide 49: #( Thank you! Wanna talk deliverables, systems, and components? Try me at: nathan@eightshapes.com www.nathancurtis.com nathanacurtis (Twitter/AIM/Google/Yahoo/Flickr) Audiences & Artifacts :: Prepared by Nathan Curtis, EightShapes LLC :: www.eightshapes.com :: April 14, 2008