Information Architecture by Mdfk3H

VIEWS: 0 PAGES: 33

									ISC325 Hypermedia/Multimedia
Design & Authoring
        Youngok Choi
        Sep. 12, 2005
Today

 I will gather your assignment.
 Talk about Information Architecture
Web Site Development

 Thinking Like the User
 Following a Systematic Process
 Building Communication Products
System Approaches Work

   Because they:
       Focus an organization—at the outset—on how
        the system can support people in doing what they
        want to do.
       Require a precise “goal statement” that is used for
        subsequent planning and implementation
       Link different elements in the site development
        process. All evaluation is based on the goals you
        set in the beginning.
Information Architecture

 A blueprint for the virtual organization of
  information
 Widely used in web site design
 Involves the design of organization and
  navigation systems to help people find and
  manage information more successfully.
Information Architecture
   The construction of a structure or the
    organization of information in ways that will
    facilitate access to the information by users.
       On the Web, information architecture is a
        combination of organizing a site's content into
        categories and creating an interface to support
        those categories.
       The presentation of information in the whole of a
        Website
       How the pages within the site relate to each other
       How the viewer is permitted and/or directed to
        navigate his or her way around the site.
Information architect
   The main job
       Clarifies the mission and vision for the site, balancing
        the needs of its sponsoring organization and the needs
        of its audiences
       Determines what content and functionality the site will
        contain
       Specifies how users will find information in the site by
        defining its organization, navigation, labeling, and
        searching systems
       Maps out how the site will accommodate change and
        growth over time
The Real World: Working together

   Many times you will have to have other team
    members in order to get the job done
   You will need to be able to address many issues
    that affect your working relationships.
       Keep meeting minutes
       Make a timeline
       Determine who does what
       Communication with your client
       Share responsibilities
       Communicate with each other
Systematic process
   Define goals

     Analyze         Evaluate
    User needs

     Design


    Develop


       Test
1. Define the site goals

    Figure out why a site should be built
    Two things
    1.   Determine who will be involved in defining the goals
    2.   Ask questions
            What is the mission or purpose of the organization
            What are the short- and long-term goals of the site
                E.g. provide information about a product, sell a product,
                 increase brand recognition
            What are the intended audiences
            Why will people come to your site
Ask questions to Clients
   What are the goals and mission of the organization?
   Who are the intended audiences of the site?
   What type of content should or should not be part of the
    site?
   Which tools do you need to use in order to present the
    content in the site?
   Who are your competitors? What does their site look like?
   What types of interactions do you have and want to have
    with your customers (e.g., phone, fax, e-mail)?
   What are the short and long term goals of the site?
   How do you see your company's site a year from now?
   How will success be measured?
Goals – cont.
   Filter the answers and reprioritize if necessary.
    For example:
    1.   Enhance label identity
    2.   Increase band recognition
    3.   Promote band image
    4.   Boost sales of CDs and promotional products
   Document the goals of the site and publish them

* Deliverables (Design Document)
        The list of site goals
2. Analyze the users
   Designers must understand what users are trying
    to accomplish and know the users’ goals and
    tasks.
   Define the users
   Create scenarios (stories)
       Used to envision actual conditions that an end user will
        be in while experiencing the Web site.
   Competitive analysis: being aware of what other
    sites are doing
2. Users

   Design Document
     Audience definition (user profile)
     Scenarios

     Competitive analysis summary
3. Site contents

   Identify content and functional
    requirements
     What pieces of content does the site need?
     What sorts of functionality will be required?

 Create a list of content and functional
  requirements (content inventory)
 Group and label content
4. Site Structure
   Organize information meaningfully
       By location, alphabet, time, category, or hierarchy
   Structure information according to the way that
    people think
   Structure information so it relates to people’s
    underlying structures of information
   Structure information to help people build
    cognitive maps
   To structure information so people can find it and
    use it, we have to think like the user
4.1 Metaphor
 Analogy between features of your site
  and experiences people have in the real
  world
 A metaphor helps users understand how
  to use and navigate the site
     Organizational metaphors
     Functional metaphors

     Visual metaphors
Organizational metaphors

 Leverage familiarity with one system’s
  organization to convey quick understanding
  of a new system’s organization.
 A mental model
Functional metaphors

 Make a connection between the tasks you
  can perform in a traditional environment
  and those you can perform in a new
  environment
 E.g. you can browse the shelves, search the
  catalog, or ask a librarian for help. Many
  library web sites present these tasks as
  options for users.
Visual metaphors

 Leverage familiar graphic elements such as
  images, icons, and colors to create a
  connection to the new.
 E.g. an online directory of business address
  and phone numbers might use a yellow
  background and telephone icons to invoke a
  connection with the more familiar print-
  based yellow pages.
Using scenarios

 To see if the metaphor holds up.
 Scenarios show how people with different
  needs and behaviors would navigate your
  site
 Scenarios show why and how users may
  employ both searching and browsing within
  the web site.
Site structure listing (outline)

Section 1
 Section 1.1.

Section 2
 Section 2.1
 Section 2.2
     Section 2.2.1
Architectural blueprints
               Homepage




             Catalogue Page   Contact Page



                     CDs           Contact Info


                                    Directions


                                   E-mail Form
Architectural Blueprints

   Blueprints facilitate communication
       With users
       With decision-makers
       Within the development team
   Blueprints facilitate quality control
   Use these blueprints for Web projects:
       One-page (high-level) outline
       Storyboards/ scenario flowcharts
       Site structure table
       Testing scenarios
4.2. Define Navigation
   Users need to know
       where they are,
       how to get back to where they were,
       where they can go, and
       how to get there
   Good navigation
       Easily learned: navigation should be transparent,
        straightforward, and clearly labeled
       Consistent
       Provides feedback
       Supports users’ goals
   Global navigation
       Provides access to the broad sweep of the entire site
       Brings together the key set of access points that users
        might need to get from one end of the site to the other
   Local navigation
       Provides users with access to what’s “nearby” in the
        architecture, like a page’s parent, siblings, and children
   Design Document
     Site structure listing (or summary)
     Architectural Blueprints (Flow Chart)

     Global and local navigation systems
5. Visual Design

 Layout grids
 Design sketches and mock-ups
 Web-based prototype
   Wireframes: page layout
•Wireframes: page layout
   •A bare-bones depiction of
   all the components of a
   page and how they fit
   together
   •Capture all the decisions
   of information
   organization, interface
   design, and navigation in a
   single document that
   serves as a reference for
   visual design work and site
   implementation
Summary: IA Process
   Define site goals
   Figure out who the your audiences are going to be
   Organize your future site into pages of content and
    functions that the site will need to have
   Build the site
       Form a skeleton
       Pick your metaphors
       Map out your navigation
       Come up with layout grids, design sketches, and mock-
        ups
       Build a prototype
Next time

   Reading assignment
     F & F, Ch. 2.
     Rowland (2000). Users matter. Available at:
      http://www.ddj.com/documents/2811/nam1012
      432276/index.html
   Assignments
       Topic selection

								
To top