IS1500: Introduction to Web Development Planning a Website Martin Schedlbauer, Ph.D. m.schedlbauer@neu.edu

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

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

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

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

Example Card Sorting Activity IS4300 Example Card Sorting Activity http://www.doctordisruption.com/wp-content/uploads/2014/02/card-sort-student-04-round-1-detail.jpg IS1500 Planning Websites

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

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

Content Inventory Example IS4300 Content Inventory Example http://growingventuresolutions.com/blog/content-inventory-and-content-audit-views.html IS1500 Planning Websites

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

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

IS4300 Example Page Mockup IS1500 Planning Websites

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

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

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

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

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