• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
The Days of Web Standards "IA" 20070715
 

The Days of Web Standards "IA" 20070715

on

  • 5,611 views

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

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

Statistics

Views

Total Views
5,611
Views on SlideShare
5,324
Embed Views
287

Actions

Likes
5
Downloads
0
Comments
0

5 Embeds 287

http://www.bookslope.jp 281
http://www.linkedin.com 3
http://www.bookslope.jp:80 1
http://72.14.235.104 1
http://cache.yahoofs.jp 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    The Days of Web Standards "IA" 20070715 The Days of Web Standards "IA" 20070715 Presentation Transcript

    • Web IA bookslope 1
    • 2
    • 3
    • 4
    • IA 5
    • Information Architecture Information Architect 6
    • IA 7
    • IA 8
    • ? IA 9
    • IA Summit 2007 http://www.iasummit.org/2007/ 10
    • IA One Sheeters http://www.iaonesheeters.com 11
    • 12
    • IA One Sheeters http://www.iaonesheeters.com 13
    • IA One Sheeters http://www.iaonesheeters.com 14
    • IA One-Sheeter IA IA 15
    • Web 16
    • CSS 17
    • Blue Dot http://bluedot.us/ 18
    • Yahoo! UI Library http://developer.yahoo.com/yui/grids/ 19
    • Layout Gala http://blog.html.it/layoutgala/ 20
    • Apple Human Interface Guidelines http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/ 21
    • Windows Vista User Experience Guidelines http://msdn2.microsoft.com/en-us/library/aa511279.aspx 22
    • 23
    • A Pattern Language http://patternlanguage.com 24
    • WebPatterns.org http://webpatterns.org 25
    • WebPatterns.org Web Patterns Patterns in OOAD Patterns in HCI/UI Patterns in Architecture Patterns in web development Books on Patterns 26
    • OREILLY http://www.oreilly.co.jp/books/9784873113166/ 27
    • OREILLY 28
    • www.welie.com http://www.welie.com/patterns/ 29
    • 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
    • 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
    • OREILLY http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html?page=5 32
    • OREILLY http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html?page=5 33
    • 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
    • 37signals http://www.37signals.com/papers/introtopatterns/ 35
    • 37signals http://37signals.com/ 36
    • 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
    • CSS Layouts http://layouts.ironmyers.com/ 38
    • ? 39
    • ? 40
    • 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
    • Site Strategy Abstract Design Concrete Design 42
    • Layout Patterns 43
    • Layout Patterns 44
    • Layout Patterns 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • : http://netyear.net 51
    • 52
    • ※ http://www.netyear.net/portfolio/ 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • PLP Page-based Layout Patterns 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • YYYY/MM/DD 67
    • 68
    • PR 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • IA 82
    • 83
    • 84
    • Web - Web http://www.webken.jp/ 85
    • Jakob Nielsen's Alertbox http://www.useit.com/alertbox/reading_pattern.html 86
    • Jakob Nielsen's Alertbox F-Shaped Pattern http://www.useit.com/alertbox/reading_pattern.html 87
    • JR 9% 7% 84% http://japan.internet.com/research/20060403/1.html 88
    • 2% 1%6% 4% 11% 19% 2% 1% 5% 47% http://homepage1.nifty.com/hidex/left/enquete.html 89
    • 90
    • 91
    • 92
    • 93
    • PSD HTML Word Excel 94
    • IAwiki: IAwiki OmniGraffle MS Visio Ridual MS Excel Denim MS PowerPoint ConceptDraw Adobe Illustrator Axure RP Macromedia Fireworks http://www.iawiki.net/ 95
    • IAwiki: IAwiki OmniGraffle MS Visio Ridual MS Excel Denim MS PowerPoint ConceptDraw Adobe Illustrator Axure RP Adobe Fireworks http://www.iawiki.net/ 96
    • Axure RP http://www.axure.com/ 97
    • Axure RP http://www.axure.com/ 98
    • 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
    • Axure RP Axure RP 100
    • Axure RP http://www.axure.com/ 101
    • Axure RP http://www.axure.com/ 102
    • Axure RP Axure RP MS Visio 103
    • 104
    • IAAJ: Information Architecture Association Japan http://iaaj.org/tool_and_resource/ 105
    • IAAJ: Information Architecture Association Japan 7 106
    • 107
    • 108
    • 109
    • 110
    • PLP Page-based Layout Patterns 111
    • PLP Page-based Layout Patterns 112
    • blog | bookslope http://bookslope.jp/blog/ 113
    • Information Architect 114
    • Thank U 115