Web Design ΕΠΛ 435: Αλληλεπίδραση Ανθρώπου Υπολογιστή

Τμήμα Πληροφορικής 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

Τμήμα Πληροφορικής 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 3

Τμήμα Πληροφορικής 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 in order 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 4

Τμήμα Πληροφορικής 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 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

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

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 7

Τμήμα Πληροφορικής 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

Τμήμα Πληροφορικής  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.  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

Τμήμα Πληροφορικής 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 yourself  How would I do this better? 03/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/

Τμήμα Πληροφορικής 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/

Τμήμα Πληροφορικής 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/

Τμήμα Πληροφορικής 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/

Τμήμα Πληροφορικής 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/

Τμήμα Πληροφορικής 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/

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 What is Web 2.0? And what about 3.0? Part 2 Wireframing tutorials/a-beginners-guide-to-wireframing/