The Days of Web Standards "IA" 20070715

5,559 views

Published on

「Web標準の日々」での講演「Web標準の日に考えるIA」プレゼン資料

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,559
On SlideShare
0
From Embeds
0
Number of Embeds
137
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

The Days of Web Standards "IA" 20070715

  1. 1. Web IA bookslope 1
  2. 2. 2
  3. 3. 3
  4. 4. 4
  5. 5. IA 5
  6. 6. Information Architecture Information Architect 6
  7. 7. IA 7
  8. 8. IA 8
  9. 9. ? IA 9
  10. 10. IA Summit 2007 http://www.iasummit.org/2007/ 10
  11. 11. IA One Sheeters http://www.iaonesheeters.com 11
  12. 12. 12
  13. 13. IA One Sheeters http://www.iaonesheeters.com 13
  14. 14. IA One Sheeters http://www.iaonesheeters.com 14
  15. 15. IA One-Sheeter IA IA 15
  16. 16. Web 16
  17. 17. CSS 17
  18. 18. Blue Dot http://bluedot.us/ 18
  19. 19. Yahoo! UI Library http://developer.yahoo.com/yui/grids/ 19
  20. 20. Layout Gala http://blog.html.it/layoutgala/ 20
  21. 21. Apple Human Interface Guidelines http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/ 21
  22. 22. Windows Vista User Experience Guidelines http://msdn2.microsoft.com/en-us/library/aa511279.aspx 22
  23. 23. 23
  24. 24. A Pattern Language http://patternlanguage.com 24
  25. 25. WebPatterns.org http://webpatterns.org 25
  26. 26. WebPatterns.org Web Patterns Patterns in OOAD Patterns in HCI/UI Patterns in Architecture Patterns in web development Books on Patterns 26
  27. 27. OREILLY http://www.oreilly.co.jp/books/9784873113166/ 27
  28. 28. OREILLY 28
  29. 29. www.welie.com http://www.welie.com/patterns/ 29
  30. 30. www.welie.com Web Design Patterns Basic page Type Article Page Guest Book Blog Page Input Error Message Contact Page Processig Page Printer-friendy Page Event Calendar Product Page Form Homepage 30
  31. 31. www.welie.com Web Design Patterns Basic page Type - Article Page Header, in a large font size and preferable not spanning more than one line Publication date, in a small font size Photograph with caption, half or the column width or the entire width. Introduction text, which often serves as sort of a summary as well Body text, the real content of the article Links to related articles, either external or internal articles 31
  32. 32. OREILLY http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html?page=5 32
  33. 33. OREILLY http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html?page=5 33
  34. 34. OREILLY Web2.0 Design Patterns The Long Tail Data is the Next Intel Inside Users Add Value Network Effects by Default Some Rights Reserved The Perpetual Beta Cooperate, Don't Control Software Above the Level of a Single Device 34
  35. 35. 37signals http://www.37signals.com/papers/introtopatterns/ 35
  36. 36. 37signals http://37signals.com/ 36
  37. 37. www.welie.com An Introduction to Using Patterns in Web Design List your bits Figure our which bits relate to each other Prioritize Design each chunk Put the chunks together Make it real http://www.37signals.com/papers/introtopatterns/ 37
  38. 38. CSS Layouts http://layouts.ironmyers.com/ 38
  39. 39. ? 39
  40. 40. ? 40
  41. 41. The Elements of User Experience Jesse James Garrett jjg@jjg.net A basic duality: The Web was originally conceived as a hypertextual information space; 30 March 2000 but the development of increasingly sophisticated front- and back-end technologies has fostered its use as a remote software interface. This dual nature has led to much confusion, as user experience practitioners have attempted to adapt their terminology to cases beyond the scope of its original application. The goal of this document is to define some of these terms within their appropriate contexts, and to clarify the underlying relationships among these various elements. Concrete Completion Web as software interface Web as hypertext system Visual Design: visual treatment of text, Visual Design Visual Design: graphic treatment of interface graphic page elements and navigational elements (the quot;lookquot; in quot;look-and-feelquot;) components Interface Design: as in traditional HCI: Navigation Design: design of interface design of interface elements to facilitate elements to facilitate the user's movement Interface Design Navigation Design user interaction with functionality through the information architecture Information Design Information Design: in the Tuftean sense: Information Design: in the Tuftean sense: designing the presentation of information designing the presentation of information to facilitate understanding to facilitate understanding Interaction Information Interaction Design: development of Information Architecture: structural design time Design Architecture application flows to facilitate user tasks, of the information space to facilitate defining how the user interacts with intuitive access to content site functionality Functional Content Functional Specifications: quot;feature setquot;: Content Requirements: definition of detailed descriptions of functionality the site content elements required in the site Specifications Requirements must include in order to meet user needs in order to meet user needs User Needs: externally derived goals User Needs: externally derived goals User Needs for the site; identified through user research, for the site; identified through user research, ethno/techno/psychographics, etc. ethno/techno/psychographics, etc. Site Objectives Site Objectives: business, creative, or other Site Objectives: business, creative, or other internally derived goals for the site internally derived goals for the site task-oriented information-oriented Abstract Conception This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development) that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today. © 2000 Jesse James Garrett http://www.jjg.net/ia/ 41
  42. 42. Site Strategy Abstract Design Concrete Design 42
  43. 43. Layout Patterns 43
  44. 44. Layout Patterns 44
  45. 45. Layout Patterns 45
  46. 46. 46
  47. 47. 47
  48. 48. 48
  49. 49. 49
  50. 50. 50
  51. 51. : http://netyear.net 51
  52. 52. 52
  53. 53. ※ http://www.netyear.net/portfolio/ 53
  54. 54. 54
  55. 55. 55
  56. 56. 56
  57. 57. 57
  58. 58. 58
  59. 59. 59
  60. 60. PLP Page-based Layout Patterns 60
  61. 61. 61
  62. 62. 62
  63. 63. 63
  64. 64. 64
  65. 65. 65
  66. 66. 66
  67. 67. YYYY/MM/DD 67
  68. 68. 68
  69. 69. PR 69
  70. 70. 70
  71. 71. 71
  72. 72. 72
  73. 73. 73
  74. 74. 74
  75. 75. 75
  76. 76. 76
  77. 77. 77
  78. 78. 78
  79. 79. 79
  80. 80. 80
  81. 81. 81
  82. 82. IA 82
  83. 83. 83
  84. 84. 84
  85. 85. Web - Web http://www.webken.jp/ 85
  86. 86. Jakob Nielsen's Alertbox http://www.useit.com/alertbox/reading_pattern.html 86
  87. 87. Jakob Nielsen's Alertbox F-Shaped Pattern http://www.useit.com/alertbox/reading_pattern.html 87
  88. 88. JR 9% 7% 84% http://japan.internet.com/research/20060403/1.html 88
  89. 89. 2% 1%6% 4% 11% 19% 2% 1% 5% 47% http://homepage1.nifty.com/hidex/left/enquete.html 89
  90. 90. 90
  91. 91. 91
  92. 92. 92
  93. 93. 93
  94. 94. PSD HTML Word Excel 94
  95. 95. IAwiki: IAwiki OmniGraffle MS Visio Ridual MS Excel Denim MS PowerPoint ConceptDraw Adobe Illustrator Axure RP Macromedia Fireworks http://www.iawiki.net/ 95
  96. 96. IAwiki: IAwiki OmniGraffle MS Visio Ridual MS Excel Denim MS PowerPoint ConceptDraw Adobe Illustrator Axure RP Adobe Fireworks http://www.iawiki.net/ 96
  97. 97. Axure RP http://www.axure.com/ 97
  98. 98. Axure RP http://www.axure.com/ 98
  99. 99. Axure RP Wireframes Flow Diagrams Wireframes Annotations Flow Diagrams Sitemap Interactions Flow Widgets Widgets Add Notes Connectors Masters Reference Pages HTML Prototypes Specifications HTML Prototypes Microsoft Word Specifications Sitemaps Preface and Postcript Documents Page Note Table of Contents Interactive Interfaces ConfigureAdd Notes Annotations 99
  100. 100. Axure RP Axure RP 100
  101. 101. Axure RP http://www.axure.com/ 101
  102. 102. Axure RP http://www.axure.com/ 102
  103. 103. Axure RP Axure RP MS Visio 103
  104. 104. 104
  105. 105. IAAJ: Information Architecture Association Japan http://iaaj.org/tool_and_resource/ 105
  106. 106. IAAJ: Information Architecture Association Japan 7 106
  107. 107. 107
  108. 108. 108
  109. 109. 109
  110. 110. 110
  111. 111. PLP Page-based Layout Patterns 111
  112. 112. PLP Page-based Layout Patterns 112
  113. 113. blog | bookslope http://bookslope.jp/blog/ 113
  114. 114. Information Architect 114
  115. 115. Thank U 115

×