1. IS1500: Introduction to Web Development
Planning a Website
Martin Schedlbauer, Ph.D.

2. IS4300
Content Planning
Good website planning should start with planning the content and how you allocate the content to pages.
This is called the information architecture.
Techniques for planning content:
Card Sorting
Content Inventories
Paper and Sketchboards
Site Map Diagrams
IS1500
Planning Websites

3. IS4300
Know Thy User!
But… before you start any planning, understand your user – who will be visiting your site and what do they want to accomplish while there.
Define “use cases”:
Who wants to do what?
IS1500
Planning Websites

4. Use Cases and Mini Stories
Define your users and then define what they want to accomplish, then write it in this format:
Example:
As a charter guest who has booked a charter, I want to get directions to the marina so that I know where to find my charter boat and can depart on time.
As a <user>, I want to <goal>, [so that <purpose>].
IS1500
Planning Websites

5. Content Planning with Card Sorting
IS4300
Content Planning with Card Sorting
Card sorting allows a designer to organize the content or information to be placed on the website in a hierarchical and easy-to-manipulate manner.
Approach:
Create a card for each page
Write on the card what you want on the page
Organize the cards into stacks
When done, build a page flow diagram
IS1500
Planning Websites

6. Example Card Sorting Activity
IS4300
Example Card Sorting Activity
IS1500
Planning Websites

7. Tracking Content with Inventories
IS4300
Tracking Content with Inventories
A content inventory is a spreadsheet of all your pages, the page hierarchy, and their file names along with what is on each page.
Great for tracking, but not so good for planning – use card sorting for planning instead.
IS1500
Planning Websites

8. Content Inventory Elements
IS4300
Content Inventory Elements
Although inventories vary in what they capture, most include the following raw data for each piece of site content:
Unique Content ID
Title
URL
File Format (HTML, PDF, DOC, TXT…)
Author or Provider
Actual location of file
Meta Description and Keywords
Categories/ Tags
Dates (created, revised, accessed)
IS1500
Planning Websites

9. Content Inventory Example
IS4300
Content Inventory Example
IS1500
Planning Websites

10. Paper and Sketchboards
IS4300
Paper and Sketchboards
Sketchboards and visual storyboards of the website layout with mockups for pages.
Mockups can be done with simple paper-and-pencil designs or using computer applications, such as:
Balsamiq
LucidChart
Gliffy
Visio …
IS1500
Planning Websites

11. Example of a Sketchboard
IS4300
Example of a Sketchboard
From: Kristin Wemmer, Starting out organized, Smashing Magazine, March 17th, 2010.
IS1500
Planning Websites

12. IS4300
Example Page Mockup
IS1500
Planning Websites

13. IS4300
Site Map Diagrams
Site map diagrams visualize page flow, i.e., how users get from one page to another.
Helps detect “dead ends” and “orphan pages” as well as the number of clicks or link navigations necessary to reach some specific piece of information.
Built using applications or sketched by hand.
IS1500
Planning Websites

14. Site Map Diagram Example
IS4300
Site Map Diagram Example
IS1500
Planning Websites

15. IS4300
Iterative Design
Websites are best built in an iterative fashion involving the client.
Set aside a “time box” of 1 or 2 weeks, decide on what to do, and then build it.
Review with client, get feedback, and then decide what to do in the next “time box”.
IS1500
Planning Websites

16. IS4300
Usability Testing
When your website is done or you have substantial work implemented, test your design and website:
Do all links work?
Can user get to the information they need, i.e., are your use cases supported?
How long does it take to get common tasks done?
How many mistakes do user make or how often do they get into a “dead end”?
IS1500
Planning Websites

17. Summary, Review, & Questions…
IS4300
Summary, Review, & Questions…
IS1500
Planning Websites