Site-it!: Information Architecture
          Prototyping Tool



      Atsushi HASEGAWA, Ph.D.
            Concent, Inc.
Overview

• We have developed a web site structure
  prototyping tool: Site-it!

• Site-it! enables to involve all project...
Who?

Concent, Inc.

 •   A UX design company based in Tokyo since 2002

 •   Web sites, web applications: research, UX st...
HCD Process: ISO 13407

                       1. Plan the human centered
                                  process
   Mee...
HCD Designing Methods




• Prototyping
• Brainstorming
• Pattern/Component Library
Elements of Web Site Design

                               -Server-side (DB, Apps)
                  Technology   -Front-...
Information Architecture Design



• Content Plan
• Content Organization
• Site Structure
• Navigation
• Labels
Roles of Site Structure


•   EIA represents the organization’s attitude to the
    customer, and other stakeholders.

•  ...
Site Structure Document
!"#$%&'!()*+,-./0123!4!+,-567                                                                     ...
Problems of Site Structure
          Designing


1. Difficult to read / understand the context
   from the document
2. Dif...
Solution: Site-it!


• Sticky notes with templates
• 3 types of Pages: 7 templates
 - Portal type (1)
 - List type (text, ...
Portal
Type


          Portal



 List
Type


          Text     Text + Thumbnail   Thumbnail



Article
 Type


        ...
Features of Site-it!


• Easy to prepare: anytime, everywhere
• Enable to involve people: members,
  clients, managers, de...
Site-it! is good for:


•   Enterprise Information Architecture
    (EIA): Relation among sites

    -   Micro-site strate...
Examples
Workshop
Thanks


•   Take our brochure

•   You can download this slideshow from
    slideshare.com/
    tag: HCII09, Site-it!, Co...
Site-it!: Information Architecture Prototyping Tool
Site-it!: Information Architecture Prototyping Tool
Site-it!: Information Architecture Prototyping Tool
Upcoming SlideShare
Loading in...5
×

Site-it!: Information Architecture Prototyping Tool

1,928
-1

Published on

An introduction of Site-it!, which is a set of sticky notes with printed page template. It is used for site structure designing.
Presented at HCII09 (Human Computer Interaction Intenational 2009) on July 22, 2009.

Published in: Design, Education, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,928
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Site-it!: Information Architecture Prototyping Tool

  1. 1. Site-it!: Information Architecture Prototyping Tool Atsushi HASEGAWA, Ph.D. Concent, Inc.
  2. 2. Overview • We have developed a web site structure prototyping tool: Site-it! • Site-it! enables to involve all project members in the discussion of web site structure. • Using Site-it! makes to keep discussion from getting into too specific. • Site-it! is good for Enterprise Information Architecture and High Level Site Structure.
  3. 3. Who? Concent, Inc. • A UX design company based in Tokyo since 2002 • Web sites, web applications: research, UX strategy, design • UX strategy and UI prototype of information devices Atsushi Hasegawa, Ph. D. • An Information Architect since 2000 • Organizing IA Association Japan, HCD-Net board director, IA Institute member and translation initiative • Founder and President of Concent, Inc.
  4. 4. HCD Process: ISO 13407 1. Plan the human centered process Meets requirements! 2. Specify the context of use 5. Evaluate designs against 3. Specify user and user requirements organizational requirements 4. Produce design solutions
  5. 5. HCD Designing Methods • Prototyping • Brainstorming • Pattern/Component Library
  6. 6. Elements of Web Site Design -Server-side (DB, Apps) Technology -Front-end (HTML/CSS, JavaScript, Flash) Visual Information Communication Architecture -Graphic Design -Content Planing -UI Design -Organization -Art Direction -Site Structure -Navigation -Labels
  7. 7. Information Architecture Design • Content Plan • Content Organization • Site Structure • Navigation • Labels
  8. 8. Roles of Site Structure • EIA represents the organization’s attitude to the customer, and other stakeholders. • and EIA also represents the brand strategy of the organization. • The “Main Navigation” represents the site’s concept. • Content categories relates the DB requirements and the CMS specification. • Site structure is the basis of the user’s experience of the site.
  9. 9. Site Structure Document !"#$%&'!()*+,-./0123!4!+,-567 1/1 9:;! •%–—˜™!! <1=! !š›•! /01Á! ,>?-! ½¾1-! %&¿À! ×,?e°Ø1ÖÙ?! /01Á! ,>?-@AB! LMNOPQRS! !"#$%&'TUVW! XYZ[! %&¿À! ¡«ªŸ'!!"#$%&'! CIJK! CDEFGH,>?-! CIJK! IJK! ,>?-@AB! %&¿À! ¡œ'¢£¢'¤! Š‹AŒ! C¶·H,>?-!IJK! Š‹AŒ! C¹ºK! »¼! ™œ•&žŸ &! /01Á! ,>?-¸x! ,>?-¸x! !"#¬-=! ËÌjÍ! XYF|}~•€! Š‹AŒ! Š‹AŒ! Š‹AŒ! Š‹AŒ! C¹ºK! Š‹AŒ! C¹ºK! Š‹AŒ! C¹ºK! »¼! ƒ! š¥¦§¨¢©§'¢ª¨! ½¾1-! LMNOPQRS! ][^! XŽ[^••! ª¥ ž!ÃÀ§«¢ ¢'¤!#§¤Ä nopqrstuvw! ÅHÆÇ! ‘’“”! ®1¯°.±²Š‹A _`Qa! Œ! 8 ÈÉÊ! Š‹AŒ! ]xym@z{xy Š‹AŒ! m! pÚe°Ø1ÖÙ?! ˜¡¼! ÎÏVÐÑÒ! hÓÔ! 7-,ÕÖ1¾.Ö1! ®1¯1³´Xµ! ƒ! bcd1-e1fgh ÈÉÊ! Š‹AŒ! ijk! XŽ[^••! Š‹AŒ! ‘’“”! ghlm! C•‚K! Š‹AŒ! Š‹AŒ! ƒ! „…†1‡! Û]Ü݆1‡! ˆ‰1=! 21•,*!
  10. 10. Problems of Site Structure Designing 1. Difficult to read / understand the context from the document 2. Difficult to discussion among the team 3. Blank Post-it! is useful, but hard to image what content is in it
  11. 11. Solution: Site-it! • Sticky notes with templates • 3 types of Pages: 7 templates - Portal type (1) - List type (text, w/ thumbnail, thumbnail: 3) - Article type (text, w/ image, functional: 3) • Only Title Area to write
  12. 12. Portal Type Portal List Type Text Text + Thumbnail Thumbnail Article Type Functional Text Text + Image (Web Apps)
  13. 13. Features of Site-it! • Easy to prepare: anytime, everywhere • Enable to involve people: members, clients, managers, developers • Easy to try multiple patterns • Enable to concentrate to the structure, not page details, without misunderstanding
  14. 14. Site-it! is good for: • Enterprise Information Architecture (EIA): Relation among sites - Micro-site strategy - Brand portfolio and web site structure • High level site structure of a web site - Main categories / main navigation - Searching path
  15. 15. Examples
  16. 16. Workshop
  17. 17. Thanks • Take our brochure • You can download this slideshow from slideshare.com/ tag: HCII09, Site-it!, Concent, IA • We are preparing the data of Site-it! and stencils for applications: OmniGraffle, Visio, Excel • For more information: concentinc.jp/ or site-it@concentinc.jp

×