Top Banner

Click here to load reader

Introduction to Information Architecture & Design - SVA Workshop 06/21/14

Aug 11, 2014



Introduction to Information Architecture & Design - As presented by Robert Stribley, SVA, 06/21/14

  • Introduction to Information Architecture & Design School of Visual Arts | June 21, 2014 Robert Stribley
  • Todays presentation will be available on SlideShare following the workshop:
  • Butterfly on the New York City Highline Pattern Recognition: In cognitive psychology, the ability to identify familiar forms within a complex arrangement of sensory stimuli
  • Butterflies Labeled by Species
  • Intro Robert Stribley @stribs Im an Associate Experience Director at Razorfish I like literature, cinema, music, photography, cycling I drink coffee Introduction My clients have included: Bank of America, PNC, Wachovia JPMorgan, Morgan Stanley, Oppenheimer Funds, PNC, Prudential, Smith Barney, T. Rowe Price Boston Scientific, Nasonex Choice Hotels, RCI Computer Associates, EMC Ford, Lincoln AT&T, Nextel Day One, Red Cross Pearson, Travel Channel, Womens Wear Daily
  • Intro About You Whats your name? What do you do for work? What do you do for fun? Coffee, tea or bottled water? Introduction
  • Intro Goals of this workshop Understand the basic concepts of information architecture Experience the general process and techniques used on a design project Review the basic deliverables an information architect develops within a project Introduction
  • Agenda
  • Agenda Morning Background Design Process Our Project User Research Competitive Review Personas Lunch Agenda
  • Agenda Afternoon Card Sorting Site Maps Page Types Navigation Sketching Wireframes Q&A Agenda
  • Background
  • Background information architecture n. Background: Defining IA The combination of organization, labeling, and navigation schemes within an information system. The structural design of an information space to facilitate task completion and intuitive access to content. The art and science of structuring and classifying web sites and intranets to help people find and manage information. An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape. Information Architecture for the World Wide Web (1st Edition), p. 4, Rosenfeld and Morville Navigation Interaction Art/Science Discipline/ Community
  • Background It's hard to say who really is an information architect. In some sense, we all are. Alex Wright, Author Glut Background: Defining IA
  • userscontent context IA Background: Defining IA
  • Interface (skin) information architecture (skeleton) Background: Defining IA
  • Design Process metaphor: architectural plans Cornell University Library Background: Defining IA
  • Background: History A Brief History of IA 1975 Richard Saul Wurman coined the term information architecture to describe the field now more often described as information design 1994 Formation of Argus Associates in Ann Arbor, MI, the first firm devoted to IA 1998 First edition of Peter Morville and Lou Rosenfelds Information Architecture for the World Wide Web, affectionately known as The Polar Bear book
  • Partially adapted from: A brief history of information architecture by Peter Morville and Information Architecture: Designing information environments for purpose, edited by Alan Gilchrist and Barry Mahon A Brief History of IA 2000 First IA Summit, Boston, MA Defining Information Architecture 2002 Boxes & Arrows, online journal for information architects goes live 3 new books on IA published, including Jesse James Garretts The Elements of User Experience 2015 15th Annual IA Summit held in Minneapolis, MN, April 22-26 Background: History
  • Design Process Project phases by Harold Kerzner
  • Design Process Discovery Definition Design Development Design Process
  • Design Process Discovery Definition Design Development Stakeholder interviews Business requirements Competitive & comparative audits User research Site inventory Design Process
  • Design Process Discovery Definition Design Development Personas Content Audit Card sorts Use Cases Sketching Site Map Creative Brief UX Brief Design Process
  • Design Process Discovery Definition Design Development Site Map Task Flows Sketching Wireframes Stakeholder Reviews Visual Design Prototype Usability Testing Functional Specifications Design Process
  • Design Process Discovery Definition Design Development Site Development User Acceptance Testing (UAT) Quality Assurance (QA) Usability Testing Design Process
  • Background IA Deliverables site map features/functionality inventory comparative/competitive review requirements document personas sketches use cases user flows prototype wireframes discover designdefine experience brief Deliverables
  • Our Project
  • What to do? Our Project
  • Our Project wants to revamp its website to become the go-to online resource for people wanting to attend or promote events across the United States. Our Project
  • Discover
  • User Research User Research in Copenhagens Elderly Homes
  • User Research Through research, we aim to learn enough about the business goals, the users, and the information ecology to develop a solid strategy. Louis Rosenfeld & Peter Morville Discovery: User Research
  • User Research Methodology Focus Groups Surveys Interviews Goals Identify patterns and trends in user behavior, tasks, preferences, obstacles. Discovery: User Research
  • User Research Class Exercise: Survey Questions How do you learn about events in NYC? What type of events are you interested in? Whats more important to you: Price Type of Event Location Date How often do you attend the events? Do you ever need to promote an event? Do you ever invite people to an event? Discovery: User Research
  • Competitive Review image by brandon schauer
  • Discovery: Competitive Audit This type of assessment helps set an industry marker by looking at what the competition is up to, what features and functionalities are standard, and how others have solved the same problems you might be tasked with. Dorelle Rabinowitz Discovery: Competitive Review
  • Competitive Review Heuristic Evaluation involves evaluators examining the interface and judging its compliance with recognized usability principles (the heuristics) - Wikipedia Discovery: Competitive Review Self Study For a more detailed explanation of heuristic evaluation, see Jakob Nielsens Ten Usability Heuristics.
  • Competitive Review Sample Usability Criteria These examples arent comprehensive. Appropriate criteria will depend on the project to be completed. Home Page Are home page elements appropriately weighted and distributed? Is information clustered in meaningful ways? Navigation Is the navigation structure concise and consistent? Are paths to important information intuitive and unobstructed? Content Is content current? Are there visible indications of content freshness? Is content properly adapted for the Web? Is tone of voice consistent throughout content? Is content chunked appropriately? Are headings and titles scannable? Design Are colors appropriate to the Web? Is white space used appropriately? Is text readable? Search Are search results relevant and cleanly presented? Functionality Are functionality and forms efficiently designed? Messaging Are errors messages clear on the site? Is help readily available to users? Are there appropriate means for user feedback? Discovery: Competitive Review
  • Competitive Review Methodology Review and analyze competitor sites according to particular criteria Draw key findings, which can influence and guide IA t