Slide 1

Web Design 435:

Slide 2

Introduction The site map documents the pages in a Web site. Includes the relationship of the pages to each other the interaction between pages, and a number of other facts that change from project to project, potentially including which pages have templates, which pages are dynamic, and which pages are user created. concentrate on presenting the hierarchy and documenting which pages will exist and where 03/11/2014 2

Slide 3

Site maps can come in several shapes. The design depends on your projects needs and your personal inclination as a designer. Shallow or deep ?? Shallow means that youll have lots of items at the same level. If everything on your site is only one click from the homepage, you have a shallow organization scheme. Deep means that youll have levels and sub-levels and sub-sub- levels. If you have items that are eight clicks from the homepage, you might have a deep organization scheme. Site map layout 03/11/2014 3

Slide 4

Large or small: Few pages on your site (small) means that you can go with simple, very clear layouts, such as the tree layout. If you have many sections and pages (large), that means youll have to think carefully about how to diagram in order to make the relationships clear. The comb map: Youll find this useful in a long work area (most electronic documents are better at going tall rather than wide), with an organization scheme that is deep rather than shallow. Site map layout 03/11/2014 4

Slide 5

The star map: This is useful when the hierarchy is not strict and when organization is shallower than deep. But it can be difficult to manage if the organization is deep, and it can get a bit messy. It is important to draw the star map out carefully and for each level of item have a unique look (size is most commonly used) to distinguish hierarchy, because it isnt as scannable as a tree. The tree map: This map is good when items are not so much hierarchical as grouped by similarities. It allows the architect to indicate groupings without feeling the need to create overview pages. The tree map seems to demand that each level of hierarchy has a dedicated page; the tabs group like items without indicating a page. Site map layout 03/11/2014 5

Slide 6

6

Slide 7

In addition to a form for your site map, youll need a vocabulary for all the objects in it. It should be easy to determine at a glance what is what in your map. Page and page stack: A page is a page. A page stack is a set of pages that are similar enough in formatting to be the same. Imagine, for example, a set of press releases, articles, and book reviews. File and file stack: As we said, PowerPoint documents are one example of files that you might find online that are not Web pages. Other examples are downloads such as applications, drivers, games, videos and MP3s, or print-friendly documents such as Word documents or PDF manuals. Site map vocabulary 03/11/2014 7

Slide 8

Decision: This occurs anytime the system has to make a decision. Member or non-member and logged in or not logged in are common decision points for a restricted Web site. Continued: Keep your site map tidy and readable by diagramming subsections and sub-processes on a second page. Area and conditional area: Useful for grouping like items (as seen in the tab layout). Conditional is useful for demarcating restricted areas, such as those where login is required. Site map vocabulary 03/11/2014 8

Slide 9

Connectors: What good is a box without an arrow? Arrows indicate one-way movement through pages. This is usually a step-by-step process, such as when a user is registering or checking out. No arrowhead or double arrowheads (this varies among flowchart languages) indicate bi-directional movement, such as between pages. E-mail: We find it useful to remind team members that the home page is not the only way people are arriving at the site. If a site has a newsletter, this icon is well worth using. Site map vocabulary 03/11/2014 9

Slide 10

Site Maps Site maps vary from architect to architect and from project to project. As you create your own, ask yourself these questions: Do I know what is a page and what isnt? Can I understand how a user might move through the Web site? Do I understand the organization or interaction being diagrammed? And always, always ask yourself How would I do this better? 03/11/2014 10

Slide 11

Flickr has created a consumption page for each photo thats optimized for viewing. Instead of one next step, Flickr makes several next steps available A user can view the next photo in the set. A user can browse photos that have the same tag or add tags. A user can view and edit the photos metadata. A user can read comments or add his own. And we havent even looked at the toolbar above each photo that lets users perform numerous other next steps! Manage Multiple Next Steps 03/11/2014 11

Slide 12

Most pages on the Web accommodate multiple next steps. There are many different users with many different goals, so pages attempt to make an appropriate next step available to every user. However, you cant design a page to please everyone. You must prioritize your next steps based on three criteria: 1. How many users will it help? 2. How often will it happen? 3. How importantto users or the businessis this next step? Manage Multiple Next Steps 03/11/2014 12

Slide 13

On a Web page, you zone part of the page for navigation, part for advertisement, part for content. In an application, you may zone an area for a toolbar; on a video player, you may zone an area for the controls. In a recent study by Michael Bernard & Ashwin Sheshadri,12 it was found that the back to homepage link was expected to be in the upper-left corner almost exclusively, and shopping carts to be in the upper-right corner. As you begin your page layout, you may find it useful to create templates for your page types, with the zones marked clearly as a reference as you place your interface objects in them. Zone Your Page for Interaction 03/11/2014 13

Slide 14

Breaking down the modules Once youve identified your zones, you can figure out which links, text, and functionality needs to be there. You can also determine the relationships between the different elements. When you find several links are very closely associated in purpose, you can form them into a module 03/11/2014 14

Slide 15

A wireframe (or page schematic, as it is sometimes called) is a basic outline of an individual page, drawn to indicate the elements of a page, their relationships, and their relative importance. Its much like the wireframe a sculptor will make before adding clay, as it gives shape and provides support. First, they make an abstract mental picture of a page more concrete. Second, wireframes work as documentation devices Document Your Page with Wireframes 03/11/2014 15

Slide 16

For each element in your wireframe, its important to consider several questions: Where does the content come from? If you have a list of related articles, specify how theyre related. What is the nature of the content? Does it vary greatly in length, size, language, and type? Is the element required or optional? What happens if the element doesnt appear on that page? Does the layout change? Is the element conditional? Does it vary based on other factors? For example, do administrators see additional links? What happens if an article doesnt have an associated image? What if it does? Whats the default or expected state? Ideally, whats supposed to happen on the page. What are the alternate or error states? How does the design change when things dont go right? Document Your Page with Wireframes 03/11/2014 16

Slide 17

03/11/2014 17 From Web 2.0 to Web 3.0 & Semantic Web What is Web 2.0? And what about 3.0? Part 1 http://www.youtube.com/watch?v=WIm5txBm1YA What is Web 2.0? And what about 3.0? Part 2 http://www.youtube.com/watch?v=5it8oBMbPrg Wireframing http://webdesign.tutsplus.com/tutorials/workflow- tutorials/a-beginners-guide-to-wireframing/