Web Design

ΕΠΛ 435:Αλληλεπίδραση

Ανθρώπου Υπολογιστή

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

3Τμήμα Πληροφορικής

Site maps can come in several shapes. The design depends on your project’s needs and your personal inclination as a designer.

Shallow or deep ??

Shallow means that you’ll 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 you’ll 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

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 you’ll have to think carefully about how to diagram inorder to make the relationships clear.

The comb map: You’ll 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

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 isn’t 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 thateach level of hierarchy has a dedicated page; the tabs group like items without indicating a page.

Site map layout

03/11/2014

Τμήμα Πληροφορικής 603/11/2014

7Τμήμα Πληροφορικής

In addition to a form for your site map, you’ll 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 MP3’s, or print-friendly documents such as Word documents or PDF manuals.

Site map vocabulary

03/11/2014

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 (asseen in the tab layout). Conditional is useful for demarcatingrestricted areas, such as those where login is required.

Site map vocabulary

03/11/2014

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

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 isn’t?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 yourselfHow would I do this better?

03/11/2014

11Τμήμα Πληροφορικής

Flickr has created a consumption page for each photo that’s 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 photo’s metadata.A user can read comments or add his own.And we haven’t even looked at the toolbar above

each photo that lets users perform numerous other next steps!

Manage Multiple Next Steps

03/11/2014

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 can’t 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 important—to users or the business

—is this next step?

Manage Multiple Next Steps

03/11/2014

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

14Τμήμα Πληροφορικής

Breaking down the modules

Once you’ve 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

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. It’s 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

16Τμήμα Πληροφορικής

For each element in your wireframe, it’s important to consider several questions:

Where does the content come from? If you have a list of related articles, specify how they’re 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 doesn’t 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 doesn’t have an associated image? What if it does?

What’s the default or expected state? Ideally, what’s supposed to happen on the page.

What are the alternate or error states? How does the design change when things don’t go right?

Document Your Page with Wireframes

03/11/2014

Τμήμα Πληροφορικής 1703/11/2014

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=WIm5txBm1YAWhat is Web 2.0? And what about 3.0? Part 2 http://www.youtube.com/watch?v=5it8oBMbPrg

Wireframinghttp://webdesign.tutsplus.com/tutorials/workflow-tutorials/a-beginners-guide-to-wireframing/