Atsushi Hasegawa's IA2010 Keynote presentation. 2010/02/27

1. IA2010
2010/2/27
#ia2010

2. hello
• 1973
•
• → →IA
• 2002
• IA Association Japan IAAJ.org
HCD-Net
IA Institute ACM SIGCHI
• IA100 IA100
BNN #ia100

3. concent, inc.
User
Content Context

4. concent, inc.
User
Content Context
Technology
Visual
Communicati IA
on

5. today
• IA

7. IA

8. acc04 design Inc.
TOP
PRODUCT | COMPANY | IR | RECRUIT
TOP > PRODUCTS > BOOK
BOOK
MUSIC
MOVIE
GAME
© Atsushi Hasegawa

9. Web Vol.1 R&D
http://web-tan.forum.impressrd.jp/

11. Web

12. CMS
Web

13. CMS
Web

14. CMS
Web

15. CMS
Web
“ ”

16. Web
Web

17. Web
Web

18. Web
Web

19. Web
Web

20. Web
Web
CMS

21. Web
Web
CMS

22. Web
Web
CMS

23. •
➡
IA …
➡
•
➡
➡

24. IA

25. IA

28. →

29. Q.

30. ROI

31. ROI
Return on Investment

34. Q.

35. Instant Deliverable Mix
Prepared by:
Nathan Curtis
nathan@eightshapes.com
April 12, 2008
For the 2008 IA Summit, Miami, FL
Page Patterns are prede ned... Create Your Own Recipes
Placeholder
Cook up your own deliverable in less than 3 minutes! Recipes use page patterns to prede ne your
deliverable structure by pages and chapters.
Shapes Text Outline once but use it repeatedly, each time
A Areas adding whatever special ingredients necessary.
in a layout to enable designers to place artwork Even better, review your recipes with your
(e.g., wireframe) and compose annotations in a deliverable’s intended consumers ... before you
consistent and e ective deliverable page. get started. That way, expectations are set.
Rationale Truly Instant? Use Recipe Scripts
Find your ingredients in the Page Pattern Library:
Generate typical content far faster Automate deliverable production (or at least
Create consistent, predictable page structure starting points) via a combination of:
Share common layouts with peers METADATA STRATEGY RESEARCH STORYBOARDS WIREFRAMES VISUAL DESIGN
Establish expectations for deliverable content
XML
Use When
Place a page pattern onto your page at the
outset of authoring content for that page.
Cover with Description Key Themes Callouts, Large Visual Two-by-Two Plot 6x1 Board, Thumbnails Intro & Chunked Inspired By Mockup with Intro Basic Annotations
Better yet, use page patterns from the
deliverable’s outset, planning your outline and
Script
clarifying delivery with your audience(s).
Cover, Multiple Authors Key Themes & Visual Callouts, Standard Visual Comparative Table, Stars 3x1, Screenshot Flow Pattern Notes, 2 Column Photography Don’ts Icon Tables
Page Patterns ≠ Backgrounds Software Capabilities
A background (in Visio; referred to as canvas in Page patterns can be utilized in many di erent
Omnigra e and master in InDesign) enables information architecture software tools. In all
you to utilize the same structure, document cases, simply drag a pattern onto a page and
metadata, and other page elements across begin authoring content and artwork. But the
pages. Sign O Creative Brief Open Questions Comparative Table, Checks 4x2, Comics Component Variation Spec Property Table Color & Type Color features you use depend on the tool:
Backgrounds enable you to create a few,
representative backgrounds for simple Adobe InDesign CS3
templates, but reasons you wouldn’t use the Snippets (primary)
A snippet is a distinct le that is placed into the document via
feature for page patterns include: drag-and-drop or menu
Change History, Basic Alternative w/ Pros & Cons Research Approach Findings 4x2, Comics w/ Descriptions Embedded Flow Editorial Notes Component Design Specs Page Design Specs
Object Library (secondary)
Backgrounds are not intended for page A panel in the workspace from which you can drag-and-drop
speci c editing; page patterns are for actual
content OmniGra e &
The massive number of objects in a 60+ page
pattern library would bloat template le size
Microsoft Visio
Stencil
Separating page patterns from document A panel in the workspace from which you can drag-and-drop
templates eases creation, maintenance, and Change History, Table Recommendation Quotes by Topic Recommendations Project Plan Two Variations Three Variations Grid & Gutter Spacing Grid & Names
distribution of page pattern libraries
http://unify.eightshapes.com/

36. Q.

37. 1.
2.
etc
3.

38. !"#$%&'()*+!",-./-012)
3456)78)9,:;,VI<0< 34rst,56)u!
34!",=,>?$,@AB012)
vwx,gy!
CD06?$E&6?F10GH10IJ
KLCMSIJ,MNOPQIJ
RS#T$UV%&*+W>?$,XYZ
RS>0A[,$0)]@0
Rz,>0A[{|!
^_`a=,bcde
fgE>0A[`a=,56)78)9 }~!
hi)j0)kl
mn=op>0A[-q<QIJ

42. →

43. Web

44. 30%
30%
IM
30%
© Luke Wroblewski
SNS blog BBS

45. 30%
30%
IM
30%
© Luke Wroblewski
SNS blog BBS

46. 30%
30%
IM
30%
© Luke Wroblewski
SNS blog BBS

48. A A A A
A A A A B C B C D B C D
+ + +
A A A
B C D
• • • •
(CB) CB •
• • •CB •
•
•Apple • • •P&G
•Virgin •JR • •
© nozomu.net

49. EC

50. EC

52. Apple Panasonic
P&G
© Concent, Inc.

54. •
• IR
• →
•
•

55. : Pace Layering
Web
Stu
Space Plan
Services
Skin
Structure
Site
Web
Web
How Buildings Learn: What Happens After They're Built Penguin, 1995

56. IA
•
• PDCA
•
•

57. •
•
•
•

58. •
•
•
•
→

60. IA =

61. Thank you.
concentinc.jp/
IAS10 Redux is coming soon.

62. IAAJ and IAI
• IAAJ
IA
ML IA IA Cocktail Hour
• IAI IA Institute
80 1,400
IA IxD UXD
IA Summit