Week 2 and 3 - Interaction Design, Information Architecture
Homework Review
Design Factors
Stage of Site
Initial Launch vs. Redesign Vs. Maintenance vs. Enhancements
Place holders for future functionality
Target Audience
Internal (intranet) vs. External (Public Site) vs. Hybrid (extranet)
Predictable hardware (precision design) vs. any hardware (lowest common denominator/choose cut off)
Known vs. unknown levels of technical proficiency and availability of training.
How many target audiences are being served on any given page
Navigation Considerations
Calls to action
Pathing
Reorganization vs. Familiarity
Development Methodologies
Interesting Stat
80% of large scale, high budget IT projects fail
Rational Unified Process (RUP)
Inception
Creation of vision, business case, user profiles, and scenarios, high-level use cases
Participation from a Ux Perspective on vision, scenarios, and high-level use cases
Participation from an IA/ID perspective on user profiles, scenarios and high-level use cases
Development team identifies and builds riskiest pieces of architecture or performs build vs. buy analysis
Phase ends with business team buy in and management sign off with funding for next phase
Elaboration
Detailing of the scenarios, complete and thorough use cases, complete and thorough user process flows and wireframes, detailed functional specs, creative mocks
Participation as an IA/ID on all deliverables; but owns user process flows, and wireframes, and functional specs
Most labor intensive phase for the IA/ID
Phase ends with business team buy in and management sign off with funding for next phase
Construction
Development of the tool
Participation as resource for the development team and modification of user process flows, wireframes, and functional specs as necessary
QA testing and Ux testing may occur in this phase, in which case more IA/ID participation is required
Less labor intensive phase for the IA/ID
Phase ends with business team buy in and management sign off with funding for next phase
Transition
Little to no IA/ID participation
"Proprietary" or waterfall type processes
Define Scope
Define Requirements
Analysis and Design
Development
Rapid Application Development (RAD)
Developers, Designers, BA's sit side by side
Components are built and iterated
Benefits and Limitations
Project Activities & Artifacts
Activities are the goals which the subordinate artifacts/documents are to satisfy
Vision (also aligns the project team)
Purpose: Alignment with Management
Type: Artifact
Outlines reasons for the project
Outlines goals of the project
Identifies measures of success (very important)
Business Case
Purpose: Alignment with Management
Type: Artifact
Provides much more detail than the Vision Statement
Facts and figures, competitive assessment, details for management to vette
This may appear inside a Vision Document
Statement of Work &/or Project Plan
Purpose: Agreement between management and project participants re: the work funded and timelines for completion
Type: Artifact
Business Requirement Document (BRD)
Purpose: Requirements Gathering & Documentation
Type: Artifact
Could be written by Business Strategist or Business Analyst
Written in plain language
Seldom has all the information needed to create UI documentation
Ex: system must allow user to perform and .
Business Specification
Purpose: Requirements Gathering & Documentation
Type: Artifact
Typically written by Business Analyst
Written in combo plain language/technical info (may ID db's used for data, etc)
Seldom has all the information needed to create UI documentation
User Profiles (also called personas)
Purpose: Requirements Gathering & Documentation
Type: Artifact
Identification of all target audiences
Includes identifying key characteristics: demographics, technographics, psychographics
Some places name and hire models to play out the profiles created
Scenarios
Purpose: Requirements Gathering & Documentation
Type: Artifact
A good tool to create after profiles and before use cases
Provides a great amount of detail in narratives of how each user interacts with the system
Also identifies offline impacts, marketing needs, potential obstacles, etc
User Process Flows (Page Flows)
Purpose: UI Documenation
Type: Artifact
Outlines the navigational items and the flow between pages
Can be structured by task or by site map
Done in conjunction with the wireframes
example1 and example 2
Coordinated Sample: process_flow_sample (pdf)
Wireframes
Purpose: UI Documenation
Type: Artifact
Requires knowledge of IA and ID, utilizing concepts of cognitive psychology
Black and white representations of screens, but not detailed to pixel
Content done in "greek," www.lipsum.com generates "greek"
Most people's favorite part, and everyone thinks they can do it better
Must synch up features and funtionality with use cases/business requirements, often requiring designer to read between the lines
example1, example 2, example 3, and example 4
Coordinated Sample: wireframe_sample (pdf)
Functional Spec (UI Spec)
Purpose: UI Documenation
Type: Artifact
Requires intense attention to detail
Is the document that translates business language into tech speak for the UI
Outlines every element on the wireframe and gives specifics of how it functions
Will be iterated and modified as it is reviewed for business sign off
Takes a considerable amount of time to do accurately; but should not overlap info in other documents
Retain documents for future reference - living document
example1
Coordinated Sample: Sample_Functional_Spec_v32 (doc)
Other docs
IA style guide
Creative style guide
Data definitions document
Technical analysis spec
Storyboards
Class diagrams
IA Validation
Purpose: Usability
Type: Activity
Paper Prototyping (online vs. inlab)
Cognitive Walkthrough
Card Sort
Survey
low fidelity prototype testing (online vs. inlab)
Testing
Purpose: Usability
Type: Activity
low fidelity prototype testing (online vs. inlab)
high fidelity prototype testing (online vs. inlab)
usability testing (8 people)
usabilty testing (large sample)
Other Exercises
Cognitive Walkthrough
Expert Review
Best Practices
Page layout
Chunking
Contours (show link example)
Colors
Consistency
Graphically light, but engaging
First visual focus
Dropdowns, radiobuttons, checkboxes, oh my... and text boxes too
Homepages, 1st level pages, 2nd level pages - goals
User Process Flows
box for pages, lines for links, diamonds for decision, and refer out to other flows
focus on main point of the flow (by site map, by function, by audience too)
How?
Identify target audience
Identify main goals and frequency/importance for each audience
Identify tasks needed to complete those goals
Identify the cognitive tasks between tasks
Create flow, providing visual help for those cognitive tasks
Project
Week 2
Write up a brief business specification for one of the poorly performing spheres of the site or store chosen last week. If none exist, then choose to enhance a sphere with new functionality. Then perform your own task analysis and record its resulting process flow. Compare and contrast your work to what exists, justifying the changes. Will be discussed in class next week.
Week 3
Using last week’s project as a basis, continue by refining the process flows, wireframes, and corresponding functional spec - all supported by your task analysis. Will be discussed in class next week.
