1. Web Design - Introduction Lynch and Horton, Web Style Guide 3 rd Ed., http://www.webstyleguide.com/wsg3/ Nielsen, useit.com

2. Preamble, 1 There are many sources …

3. Preamble, 2 … many many sources …

4. Preamble, 3 Verified at Barnes and Noble, McAllen And in fact there are many good sources

5. Preamble, 4 Will consider: –“Interactive systems principles” Shneiderman, focus on hci Information architecure and human limitations Graphics design Etc. Won’t consider: –How to implement –Ephemeral standards –Quickly evolving tools –Etc.

6. About Web Design – In Practice Goal of hypertext: –“an electronic medium in which information presentation and access mirrors human cognition and thus can be more efficient and effective as a medium for communication (than printing)” –Also, admittedly early on in development of use and evolution of techniques And, yes, WWW is hypertext, at least in limited sense –But, technology (of network access) is really young, and slow: –bandwidth limitations drive much of “practical/applied” web site design –And, yes, television held great promise, too, …, but that’s another story Note that much of what users see in Web sites (and even “good” web sites) is driven by economic factors, rather than “user-centered” design –i.e., design in which user’s (vs. the business’) best interests are design goal –Often/typically real goal of site is to sell advertising Business models for Internets are evolving – and Google’s is atypical … Nonetheless, our focus is on user-centered design –Design in which user can access information efficiently and effectively, etc.

7. Orientation to Web Site Design, 1 An overview to set the stage for later, more detailed discussion –E.g., page design, information structure, project management WWW not same kind of interactive system, as “computer interface” (at least as discussed in traditional HCI literature) –Looong latency 1/10 – 1/30 second required for perceptual continuity 1 sec continuity of interaction –i.e., “immediate response” ~ 10 (or 5-30) seconds for task continuity –So, response time from web is at limit of task continuity Different, … not an interactive system with “immediate” response –not to be studied in same way many elements of interfaces are –and maybe principle focus and principles of design yet to evolve Thus, acts as information repository, and other things –Whether for “knowledge”, shopping, chatting,..., but not traditional system –Hence, focus on information architecture

8. Orientation to Web Site Design, 2 Web page and site design –Web page and site design combines (and this is not a short list): 1. traditional editorial approaches to documents 2. graphic design 3. user interface design 4. information design 5.“programming” skills optimize code (html, asp, etc.), graphics, & text within Web pages There is a challenge in adapting a relatively primitive authoring and layout tool (HTML) to purposes it was never really intended to serve (graphic page design). Web serves as an information system and is relatively new –It can usefully be considered a new medium for which design is evolving

9. The Difference Between Web Design and GUI Design – Nielsen, 1 Designing for Web different from for traditional user interfaces –Designer has to give up full control Share responsibility for the UI with users and their client hardware/software Device Diversity –In traditional GUI design, control every pixel on the screen –In traditional design, the difference in screen area between a laptop and a high- end workstation is a factor of six On Web, need to accommodate a factor of 100 in screen area between handhelds and workstations A factor of 1,000 in bandwidth between modems and fast connections. Designing to abstract UI specification is hard –Basic principles, e.g., HTML, can take the designer a long way toward the ideal, but not all the way there. –Separate meaning and presentation and to use style sheets to specify presentation but doing so works better for informational content than for interactions.

10. The Difference Between Web Design and GUI Design – Nielsen, 2 The User Controls Navigation –In traditional GUI design, the designer can control where the user can go when You can gray out menu options that are not applicable in the current state, etc. –On Web, user controls his or her navigation through pages –Users can take paths that were never intended by designer: Jump straight into the middle of a site from a search engine without ever going through the home page Users also control own bookmark menu and can use it to create a customized interface to a site Web designers need to accommodate and support user- controlled navigation –Design for freedom of movement and, E.g., logo (linked to home page) on every page for context and navigation for users who have gone straight to that page.

11. The Difference Between Web Design and GUI Design – Nielsen, 3 “Part of a Whole” –A traditional application is an enclosed user interface experience: User is fundamentally "in" a single application at any given time and only that application's commands and interaction conventions are active. Users spend relatively long periods of time in each application and become familiar with its features and design. On Web, users move between sites at a very rapid pace and borders between different designs (i.e., sites) are very fluid –Often users spend less than a few minutes at a time at any given site, Users' navigation frequently takes them from site to site to site as they follow hyperlinks. –Because of this rapid movement, users feel that they are using the Web as a whole … rather than any specific site: –Users demand ability to use site on basis of Web conventions they have picked up as an aggregate of their experience using other sites. –In usability studies, users complain whenever they are exposed to sites with too diverging ways of doing things Web as a whole has become a genre and each site is interpreted relative to the rules of the genre.

12. Again, “Principles” Want to apply those principles covered in first of course to web design Nielsen (and Norman) emphasize this approach –useit.com … useit from usability But, first let’s look at details of design, here, details of web site design that could be done better Usability is the forest and mistakes, or improvements, are the trees

13. Top Ten Mistakes in Web Design new periodically, this is original - 1996, “cleverly written” 1. Bad Search –Overly literal search engines reduce usability –Search is user's lifeline when navigation fails 2. PDF Files for Online Reading –Breaks users’ flow – font size, content style, etc. “undifferentiated blob of content that's hard to navigate” 3. Not Changing Color of Visited Links –Good grasp of past navigation helps understand current location –Links key factor in navigation process Notes useful and not

14. Top Ten Mistakes in Web Design 4. Non-Scannable Text –Ends interaction –Host of aids: subheads, bulleted lists, highlighted keywords, short paragraphs 5. Fixed Font Size –CSS style sheets unfortunately can disable a Web browser's "change font size" button and specify a fixed font size. 6. Page Titles With Low Search Engine Visibility –Search is most important way users discover websites Also one of most important ways to find way around individual websites. –“Humble page title” Main tool to attract new visitors from search listings Used as the default entry in bookmark

15. Top Ten Mistakes in Web Design 7. Anything That Looks Like an Advertisement –Users stop paying attention to any ads that get in way of their goal-driven navigation –Therefore, it is best to avoid any designs that look like advertisements. 8. Violating Design Conventions –Consistency is one of the most powerful usability principles –And consistency across web sites 9. Opening New Browser Windows –User who tries to return to the origin will be confused by a grayed out Back button –Links that don't behave as expected undermine users' understanding of their own system –Link should be a simple hypertext reference that replaces current page with new content 10. Not Answering Users' Questions –Specifics are buried –Hidden info. might almost as well not be there.

16. Lynch and Horton Among “guides to web site design and development”, among better –Evolved over last 10 years, 3 rd edition now The price is right We’ll look at: –The development process (briefly) Or, software engineering and projects for web sites –Site design Information architecture, user types, use types, etc. –Page design (next time) Graphics design, role in navigation, site identity, etc.

17. End