[id] week 11. information architecture
TRANSCRIPT
Lecture 11
Information Architecture
Interface Design/ COM3156, 2015 Fall Class hours : Wedn 1-4 pm 11th November
Homework
Lecture #11 COM_Interface Design 2
Develop a Journey Map
Develop Use Cases
Complete the Project
Requirements
1 2 3
Your Blog Post #7 - Write Out Your
Story a Step at a Time
- Organize Your Story
- Explore Alternative Stories
- Distill Your Map to Make a Backbone
- Slice Out Tasks That Help You Reach a Specific Outcome
Your Blog Post #8 - A Text form - Use case diagrams - Actor-Goal List with
MoSCoW prioritization
Your Team Blog Post #6 - Requirement Matrix - Context Scenario - Journey Map - Use Cases
Project Progress
Lecture #11 COM_Interface Design 3
I II III IV V VI
Team Lead 손정민 김한솜 변성섭 박지영 진샘 송호련
Project Title Chewing TV Do It 독다방 Teampland MOTI B-Slide
Members
손정민
임신영
이지현
김나래
김나영
김한솜
김윤성
변성섭
Dai Yuyu
이민선
박기빈
유화진
박지영
정지원
김하나
진샘
민경진
구연
조예인
송호련
한수교
이현주
Interview 손정민 김윤성 이민선 박기빈 김하나 이현주
Persona 김나래 김나영 이민선 유화진 진샘 한수교
Journey Map + Use Case 김나래 김윤성 Dai Yuyu 박기빈 김하나 조예인
IA
Scenario
Wireframes & Sketches
Design Proposals
A PROJECT GUIDE TO UX DESIGN: FOR USER EXPERIENCE DESIGNERS IN THE FIELD OR IN THE MAKING CHAPTER 11. SITE MAPS AND TASK FLOWS: STRUCTURING YOUR PROJECT FROM HERE TO THERE AND BACK AGAIN
Lecture 11
Lecture #11 COM_Interface Design 4
Site Maps and Task Flows
• Site maps
– help to identify the structure of websites and applications. They can show
hierarchies and connections that allow your audience to gain an
understanding of where users may locate content.
• Task flows
– take site maps a step further by identifying the various courses of action that a
user may traverse within a section of the site. Task flows also draw the
connections to error states, content, or page views based on decision points
throughout the process.
• When used together,
– site maps and task flows can provide your audience with a clear picture of
content structures and how users may navigate through them.
Lecture #11 COM_Interface Design 5
A Site Map
Lecture #11 COM_Interface Design 6
Figure 11.1 A site map for a basic website with blog functionality
a site map is simply a visual way to display representative pages of a website
Task Flows
Lecture #11 COM_Interface Design 7
Figure 11.2 A basic task flow showing the path for a user depending on login status
identify paths or processes that users (and sometimes a system) will take as they progress through your website or application
Tools of the Trade
• Microsoft Visio (http://office.microsoft.com/visio)
• Axure RP Pro (www.axure.com)
• OmniGraffle (www.omnigroup.com/products/OmniGraffle)
• Adobe InDesign (www.adobe.com/products/indesign)
• Adobe Illustrator (www.adobe.com/products/illustrator)
• Microsoft PowerPoint (http://office.microsoft.com/powerpoint)
• OpenOffice Draw (www.openoffice.org)
• HTML
• Blueprint CSS (www.blueprintcss.org)
Lecture #11 COM_Interface Design 8
Tools of the Trade
• Open Office Draw
– Open Office Draw http://OpenOffice.org
• Michael Angeles, Director of User Experience at Balsamiq
– http://konigi.com/tools/
• Information Architecture Institute
– http://iainstitute.org/en/learn/tools.php
• Basic Elements of Site Maps and Task Flows
– www.jjg.net/ia/visvocab
Lecture #11 COM_Interface Design 9
Visual Vocabulary’s core set of elements
• Page
Lecture #11 COM_Interface Design 10
Figure 11.3 Page element from Jesse James Garrett’s Visual Vocabulary
Visual Vocabulary’s core set of elements
• Pagestack
Lecture #11 COM_Interface Design 11
Figure 11.4 Pagestack element from Jesse James Garrett’s Visual Vocabulary
Visual Vocabulary’s core set of elements
• Decision Point
Lecture #11 COM_Interface Design 12
Figure 11.5 Decision point element from Jesse James Garrett’s Visual Vocabulary
Visual Vocabulary’s core set of elements
• Connectors and Arrows
Lecture #11 COM_Interface Design 13
Figure 11.6 Connector and arrow elements from Jesse James Garrett’s Visual Vocabulary
Visual Vocabulary’s core set of elements
• Conditions
Lecture #11 COM_Interface Design 14
Figure 11.7 Condition element from Jesse James Garrett’s Visual Vocabulary
Common Mistakes
• Sloppy Connections
Lecture #11 COM_Interface Design 15
Figure 11.8 A missed connection between two pages
Common Mistakes
• Misaligned and Unevenly Spaced Objects
Lecture #11 COM_Interface Design 16
Figure 11.9 Pages that are not aligned and are unevenly spaced
Common Mistakes
• Poorly Placed Text
Lecture #11 COM_Interface Design 17
Figure 11.10 Inconsistently placed text
Figure 11.11 Well-placed text
Common Mistakes
• Lack of Page Numbering
Lecture #11 COM_Interface Design 18
Figure 11.12 Site map without a numbering structure
Common Mistakes
Lecture #11 COM_Interface Design 19
Figure 11.13 Site map that correctly connects pages, with elements that are aligned, evenly spaced, and appropriately numbered
Common Mistakes
• A numbering system on your site maps allows other documentation to sync up with
it. The numbering system can proliferate to other documents, such as:
– Content matrix. Content creators can map their copy and other content to specific
pages (and to a specific element in a wireframe; more on that later).
– Task flows. Task flows can use the same numbering system to show how a user will
proceed through the pages of a specific task.
– Wireframes. The pages of your wireframes should share the same numbering system as
the pages on your site map to provide a clear connection between the two documents.
– Visual design. Visual designers can sync design pages and elements to specific pages
on your site map. This allows them to segment their inventory when it is time to hand off
their designs to developers.
– Quality assurance documents. Quality assurance teams may author testing scripts that
are dedicated to a specific page or pages on the site map.
Lecture #11 COM_Interface Design 20
The Simple Site Map
• Home
• Blog
• About
• Samples of work
• Contact
Lecture #11 COM_Interface Design 21
Advanced Site Maps
Lecture #11 COM_Interface Design 22
Figure 11.14 Advanced site map home page view
Advanced Site Maps
Lecture #11 COM_Interface Design 23
Figure 11.15 Advanced site map section view
Breaking the Site Map Mold
• provided by Andrew Hinton, senior information architect at
Macquarium
Lecture #11 COM_Interface Design 24
Figure 11.16 Advanced site map. Courtesy of Andrew Hinton
Task Flow
Use Case – System displays project list
– User selects a project
– System displays basic project information, in Write
mode
– User changes status of project to Closed
– System checks for pending tasks
– If there are pending tasks, system displays error
notice
– If there are no pending tasks...
– System checks for pending payments
– If there are pending payments, system displays
error notice
– If there are no pending payments...
– System displays summary page
Task Flow
Lecture #11 COM_Interface Design 25
Task Flow
Lecture #11 COM_Interface Design 26
Figure 11.18 Task flow used to demonstrate the path of a user through the phases of a purchase process
Taking Task Flows to the Next Level
• Swimlanes
Lecture #11 COM_Interface Design 27
Figure 11.19 This swimlanes diagram is an example of expanding task flows to illustrate complex scenarios with multiple actions in many places. Courtesy of James Melzer (www.jamesmelzer.com), UX Lead at EightShapes (www.eightshapes.com).
Lecture #11 COM_Interface Design 28
Figure 11.20 This swimlanes diagram is an example of a swimlane that crosses digital and physical activities
Homework
Lecture #11 COM_Interface Design 29
Develop a Site Map Develop Task Flows
Complete the Project
Requirements
1 2 3
Your Blog Post #9 - Identify √ Home √ Top level pages √ Global Navigation
Elements √ Footer elements
Your Blog Post #10 - Make task flows from your
use cases from the last class
- Use Jesse James Garrett’s Visual Vocabulary
√ Page √ Page stacks √ Decision points √ Connectors √ Conditional connectors
- Develop one in swimlanes
Your Team Blog Post #6 - Requirement Matrix - Context Scenario - Journey Map - Use Cases
Submission Due : 11: 59 pm Mon. 16th Nov.