Home Pages and Design

Transcription

1 UNIVERSITY OF CRETE FACULTY OF SCIENCES AND ENGINEERING COMPUTER SCIENCE DEPARTMENT COURSE CS-464 (OPTIONAL) HUMAN COMPUTER INTERACTION Course Convenor: Constantine Stephanidis HY-464: Επικοινωνία Ανθρώπου - Μηχανής Slide 1

2 Web Style Guide: Basic Design Principles for Creating Web Sites By: Patrick J. Lynch, Sarah Horton Publisher: Yale Univ Prn (March 2002) ISBN: By: Patrick J. Lynch, Sarah Horton Publisher: Yale Univ Prn (January 2009) ISBN: Slide 2

3

4 Home pages aimed at browsers should be analogous to magazine covers The objective is to entice the casual browser with strong graphics and bold statements of content All the links on your home page should point inward, toward pages within your site Provide a very clear and concise statement of what is in the site that might interest the reader Slide 4

5 These users depend on clear structure and easy access to overviews that illustrate how information is arranged within your Web site Novices tend to be intimidated by complex text menus and may be tentative about delving deep into the site if the home page is not graphically attractive and clearly arranged According to Sun Microsystems Jakob Nielsen, less than 10% of Web readers ever scroll beyond the top of Web pages Infrequent users benefit from overview pages, hierarchical maps, and design graphics and icons that help trigger memory about where information is stored within your site A glossary of technical terms, acronyms, abbreviations, and a listing of "frequently asked questions" can be helpful to first-time or infrequent users of your site Slide 5

6 These users depend on your site to obtain information quickly and accurately Expert users are very impatient with multiple low-density graphic menus that only offer two to six choices at time Power users crave stripped-down, fast-loading text menus. Graphic fru-fru drives them nuts Expert and frequent users generally have very specific goals in mind, and will appreciate detailed text menus, site structure outlines, or comprehensive site indexes that allow fast search and retrieval Slide 6

7 When designing for the World Wide Web readers could be the people down the street, or people in Australia or Poland To reach the maximum number of users in other countries you may need to provide translations, at least of your key menu pages Avoid idiosyncratic local jargon or obscure technical acronyms in your introductory or explanatory pages Don't assume that every reader follows your local date and time conventions For example, don't abbreviate dates on your Web pages To an American, "3/4/97" reads as "March 4, 1997," but users in most other countries would read the abbreviated date as "April 3, 1997." Slide 7

8 Navigation and Wayfinding

9 World Wide Web pages are different from books and other documents in one crucial respect: hypertext links allow users to access a single Web page with no preamble Thus Web pages need to be more independent than pages in a conventional book This usually means that the headers and footers of Web pages are more informative and elaborate than printed pages It would be absurd to repeat the copyright, author, and date of a book at the bottom of every page, but individual Web pages often need such information because a single Web page may be the only part of your site some users ever see Slide 9

10 Given these potential difficulties in creating Web sites that are both easy to use and full of complex content, the best design strategy is to consistently apply a few basic document design principles in every Web page you create The basic elements of a document aren't complicated, and have almost nothing to do with Internet technology. It's just like high school journalism class: who, what, when, and where Who Who is speaking? Whether the page is from an individual author or an institution, always tell your reader who created the Web page Slide 10

11 What All documents need clear titles to capture the reader's attention, but for several reasons peculiar to the Web this basic editorial element is especially crucial: The document title is often the first thing browsers of World Wide Web documents see as the page comes up. In pages with lots of graphics the title may be the only thing the users sees for several seconds as the graphics download onto the page Additionally, the page title will become the text of a browser "bookmark" if the user chooses to add your page to their list of URLs. A misleading or ambiguous title, or a title that contains more technical gibberish than English, will not help the user remember why they bookmarked your page Slide 11

12 Slide 12

13 When Timeliness is an important element in evaluating the worth of a document. So date every Web page, and change the date whenever the document is updated This is especially important in long or complex online documents that are updated regularly, but that may not look different enough to signal a change in content to occasional readers Where Always tell the reader where you are from, with (if it is relevant) your corporate or institutional affiliations Once the reader has saved the page as a text file or printed the page onto paper this connection may be lost Slide 13

14 In summary... Consistently state: the title the author the author's institutional affiliations the revision date and provide at least one link to a local home page in every WEB page in your system Put the "home page" URL on a few major pages in your site Slide 14

15 Readers need a sense of context, of their place within an organization of information In paper documents this sense of "where you are" is a mixture of graphic and editorial organizational cues supplied by the graphic design of the book, the organization of the text, and the physical sensation of the book as an object Electronic documents provide none of the physical cues we take for granted in assessing information Slide 15

16 Environmental legibility that is, the elements of the built environment that allow us to navigate successfully through complex spaces like cities and towns The web is a space where go to places called sites 4 core components: 1. Orientation: Where am I am right now? 2. Route decisions: Can I find the way to where I want to go? 3. Mental mapping: Are my experiences consistent and understandable enough to know where I ve been and to predict where I should go next? 4. Closure: Can I recognize that I have arrived in the right place? Slide 16

17 1. Paths: Familiar streets, walkways, subway routes, bus lines 2. Edges: The physical barriers of walls, fences, rivers, or shorelines 3. Districts: Places with a distinct identity, such as, in New York, Chinatown, Wall Street, and Greenwich Village 4. Nodes: Major intersection or meeting places, such as the clock in New York s Grand Central Terminal 5. Landmarks: Tall, visible structures that allow you to orient over long distances Slide 17

18 In web sites paths are the consistent, predictable navigational links that appear the same way throughout the web site Paths can be purely in the user s mind, as in your habitual navigation through a favorite newspaper site Paths can also be explicit site navigation elements such as breadcrumb trails that show you where you are in relation to the overall site Slide 18

19 Consistency is the golden rule of interface design and wayfinding, but there is a paradox at the heart of consistency: if everything looks the same, there are no edges How can you tell where you are or when you have moved from one space to another? A well-designed site navigation system is built on a consistent page grid, terminology, and navigation links, but it also incorporates the visual flexibility to create identifiable regions and edges within the larger space In a corporate site, if you move from one region to another say, from marketing to human resources you ought to notice that you just passed an important regional boundary Slide 19

20 In Western societies we equate freedom with a range of choices, but an overwhelming range of choices causes stress, slows our decision-making, makes us generally less satisfied (did I make the right choice from my eighty-nine options?), makes us more likely to walk away from making any choice at all Give the user choices is a constant mantra in user interface design, but too many choices delivered simultaneously leave most users overwhelmed and likely to abandon the problem altogether Slide 20

21 Orientation cues are particularly important in the web interface, since users often arrive at a page without having followed a deliberate and repeatable path For example, one point of web wayfinding that is quite unlike navigation in physical space is search cuts across all the normal wayfinding boundaries to provide a view of every occurrence of a keyword or phrase across the web site Search is more than an automated directory function; search can deliver you directly from one point in a site to another That direct connection makes the user all the more dependent on you are here cues from the user interface of the site Slide 21

22 Paths: Create consistent, well-marked navigation paths Regions: Create a unique but related identity for each site region Nodes: Don t confuse the user with too many choices on home and major menu pages Landmarks: Use consistent landmarks in site navigation and graphics to keep the user oriented Slide 22

23 No sense of scale How big is this site? Have I seen everything that interests me? Visited links color No sense of direction What is up and down, left and right? Web sites have hierarchies No sense of location In physical space we move and accumulate knowledge about the place. Next time we can take shortcuts Web has links to form paths, not physical cues to remember the way we have to remember the conceptual hierarchy we followed We don t navigate department stores but we do navigate (from A to B & where am I? ) web pages Slide 23

24 User interface research shows that about half of web users prefer to browse through menu lists of links to find information, and the other half will go straight to the search box to enter keywords for search All readers will use both the browse and search features of a site at some point, so supporting both navigation paradigms is important to user interface design Search will be covered on Part II. Slide 24

25 In most websites, for example, the header appears on every page The header is efficient (offering multiple choices in a small space) and predictable (it is always there, at the top of every page), and it provides a consistent identity throughout the site 5 basic elements: Site ID, a way home, a way to search, utilities and the various site sections (or primary navigation) Slide 25

26 Web page headers convey the site identity, provide major navigation links, and often offer a search box The header is where people expect to see a consistent statement of your organizational identity The header graphics and text are probably the most important elements in making a collection of web pages feel like an identifiable site rather than a random assemblage of files User research shows overwhelmingly that users expect that the top left area of your page header will contain a visual indication of who you are and a link back to your site s home page Slide 26

27 Users also expect that the header may play an important role in global navigation within your site. Important navigation links are often arrayed horizontally within the page header Folder tabs are ideal when your site has relatively few (five to seven) major navigation categories. If you have more than seven major categories, consider dropping the tab metaphor in favor of a well-organized set of plain text links (opera). When carefully designed, header tabs can also handle complex navigation (netflix) Slide 27

28 Every Web page should contain at least one link "Dead-end" pages with no links to any other local page in the site are not only a frustration to users, they are often a lost opportunity to bring browsers into other pages in your site Slide 28

29 Users will not tolerate long delays Human-factors research has shown that for most computing tasks the threshold of frustration is around 10 seconds If a task needs a long time to complete, users should be aware of the time remaining Busy indicators Progress bars Etc. Slide 29

30 As you create your design you will need to constantly check to be sure that all of your links work properly (i.e., avoid linkrot) Things change quickly on the Web, both in your site and everyone else's You will need to periodically check to be sure that your links are still working properly, and that the content they supply is still relevant to your needs Slide 30

31 Slide 31