Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Web Site Design Web Site Design • HCI and the Web – – Knowledge of interface design, applied to web – Won’t consider tools, programming – other classes, e.g., internet programming • Web is a different sort of system … than “stand alone” sys – Not just an “interface”, though principles (and techniques) apply • Site Design – Structure and information architecture • Page design – Page scanning and canonical form – Visual logic and hierarchy Web is Different, but … 1. Software system design principles are same – Much of web design literature “comes in at the bottom” • I.e., for novice (untrained) designers • Though may apply principles, do not provide broader disciplinary context – Student of computer science understands ideas about software engineering and principles of design • E.g., Lynch and Horton “team roles” and SE project members 2. Interface design principles, are same for “web-based” (or browser-based) systems and “stand-alone” systems – E.g., Shneiderman’s 8 “Golden Rules”, Nielsen and Toggazinni’s principles 3. Web is not “hypertext” (yet), yet many lessons of even pre-web hypertext are relevant – E.g., “lost in hyperspace”, pre-WWW study, cf. SIGWEB About Web Design – In Practice • Goal of hypertext: – – • 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 – – • “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 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. 1. Software Design Principles are Same • Project stages of L&H reflect, different emphases, but same stages 1. Software Design Principles are Same … note terminology differences • Project roles of L&H reflect, different emphases, but same roles • • Project stakeholder or sponsor Web project manager – – • • • • – – – – • • • Site copywriter Content domain expert (content coord., res.) Web application programmer Web page engineer (xhtml, css) Database administrator Web systems expert or webmaster (under “Lead Prog”) Site production lead – • Web graphic designer Interactive designer (Flash, …) Media specialist (photography, illustration) Lead Programmer/Architect – – – – html page coder Site editor – – • Account executive Quality assurance tester Usability lead (e.g., database under “Lead Prog”/”arch”) (e.g., Art director under “Lead… ) – – – Web application programmer Web page engineer (xhtml, css) Database administrator Web systems expert or webmaster Site production lead – • • • Web graphic designer Interactive designer (Flash, JavaScript, Ajax) Media specialist (photography, illustration) Web technology lead “Client” - Boss Project manager – – Account executive Quality assurance tester Usability lead Information architect –site content and structure Art director – – – • • html page coder (with database, under “Lead …) Site ed. – – Site copywriter Content domain expert (content , res.) 1. Software Design Principles are Same • … or similar 1. Software Design Principles are Same • … or similar • Here, provide detail specific to web sites 2. Interface Design Principles are Same • Have had a close look at: – Guidelines, principles, and theories Guidelines, Principles, and Theories • Guidelines (most specific) – Specific and practical • – – – Cure for design problems, caution dangers, shared language and terminology Accumulates (and encapsulates) past experience and best practices • “blinking is bad, never use it” – “Rules that distill out the principles of effective user interfaces” – More general and flexible than guideline • E.g., Determine users’ skill level • High level theories and models Goal is to describe objects and actions with consistent terminology • – Principles May be: too specific, incomplete, hard to apply, and sometimes wrong Lowest level • Principles (“rules of thumb”) – Theories Allowing comprehensible explanations to support communication and teaching Other theories are predictive • E.g., reading, pointing, and typing times Guidelines … and recall, Principles: Shneiderman’s “8 Golden Rules of Interface Design” • Schneiderman’s 8 rules (principles): 1. 2. 3. 4. 5. 6. 7. 8. Strive for consistency Cater to universal usability Offer informative feedback Design dialogs to yield closure Prevent errors Permit easy reversal of actions Support internal locus of control Reduce short term memory … as well as Nielsen’s Principles for Usable Design • Meet expectations – 1. Match the real world – 2. Consistency & standards – 3. Help & documentation • User is the boss – 4. User control & freedom – 5. Visibility of system status – 6. Flexibility & efficiency • Handle errors – 7. Error prevention – 8. Recognition, not recall – 9. Error reporting, diagnosis, and recovery • Keep it simple – 10. Aesthetic & minimalist design … even Toggazinni’s 16 Principles • Anticipation • Human interface objects • Autonomy • Latency reduction • Color blindness • Learnability • Consistency • Metaphors • Defaults • Protect users’ work • Efficiency • Readability • Explorable interfaces • Track state • Fitts’s Law • Visible navigation Web Site Design differs from User Interface Design • 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, and 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 www, acts as information repository, and other things – – Whether for “knowledge”, shopping, chatting, ..., but not traditional system Hence, focus on information architecture Difference Between Web Design and GUI Design – Nielsen • Designing for Web different from designing 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 • Designing to abstract UI specification is hard – Those these days with javascript, etc. much more freedom • The User Controls Navigation – Can jump straight into the middle of a site from a search engine! • On Web, users move between sites at a very rapid pace and the borders between different designs (i.e., sites) are very fluid 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 highend 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. 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 usercontrolled 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. 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. 3. Web is Different from (Visionary) Hypertext with respect to types of links/associations • Bottom line, hypertext and Web can both be modeled as G (V,E) – For hypertext, edges are undirected and labeled (with anything!) – For web, edges are directed and unlabeled • Though, who would know edges undirected (browser makes transparent) • Web 2.0 and higher aim to provide (semantic) labels – Promise of the future? • So, current realization of “world wide repository of knowledge” is really quite primitive – But, it is still revolutionary in sheer quantity of information stored, indexed (sort of), and retrievable – And, we are early on in implementation • 2014 – 1991 = 23 – And, all appreciate what next steps need to • Moore’s law is on our side (though that’s just for computers) About Web Design As Presented by L&H and Nielsen • Recall, hypertext – 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 - advertising, rather than “usercentered” design – i.e., design in which user’s (vs. the business’) best interests are design goal – often, real goal of site is to sell advertising • Nonetheless, our focus is on user-centered design – Design in which user can access information efficiently and effectively, etc. – Perhaps, not a bad place to start in general • entirely appropriate for many sites About Nielsen and Style Guide • Yale Style Manual sometimes seem “quaint” – “quaint” because of their focus on technology in a domain in which two years sees significant change in technology • Again, we’re just (historically) getting started – HTML 2.0, 3.0, 4.0, 5.0, 6.0, …. Javascript, …, ASP, …, XML, XHTML, …, – and Java programs to run in the browser window • Which really opens things up! Site: Design – Issues and Tasks, 1 (Overview of L&H 3) • Or, from a “computer science software engineering” perspective, – What should the design document (specifications) include • Preliminary Design Decisions – Purpose of site – Objectives – Audience • Surfers, novice/occasional users, expert/frequent users, international users • Design strategies are different for – Surfers, Training, Teaching, Education, Reference • Interface Design – – – – Web pages versus conventional document design Design precedents in print Make Web pages free-standing Who, What, When, Where • Interface design issues for Web – User-centered design (of course), Clear navigation aids, Provide context Site: Design – Issues and Tasks, 2 (Overview of L&H 3) • Information Access issues – Give users direct access – Consider bandwidth and interaction – Simplicity, Consistency, Design stability, Feedback and dialog, Design for the disabled • Links & navigation – Provide context, Button bars help • Site Design – Organizing information • Chunking information: Hierarchy, Relationships, Function – Site structure • Sequence, Grid, Hierarchy, Web – Site elements • Home pages, Graphic or text menus, Audience for home page, "Related sites", Bibliographies, indexes, appendices, FAQ’s, etc. About Information Architecture Web Site Design differs from User Interface Design • 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, and 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 www, acts as information repository, and other things – – Whether for “knowledge”, shopping, chatting, ..., but not traditional system Hence, focus on information architecture About Information Architecture • About “architecture”: – Architecture is about design … • 1. the profession of designing buildings, open areas, communities, and other artificial constructions and environments – For computer organization (computer architecture) – About compromises, experience, …, and design principles • Information structuring on WWW is almost exclusively about web site design – – – – – Thus, is changing rapidly due to: Change in hardware and software technologies: HTML and variants expanding functionalities, also on server side, asp, … Uses for web – information dissemination, e-commerce, pure advertising, … Users – literacy, expertness, expectations, populations, … About Information Architecture • “Information architecture” – Can, in fact, be considered quite generally • Of “labeled link hypertext”, a library, email folders, … • Term “information architecture” used for web sites because they are today (again) primarily information repositories – With (again) quite primitive information access mechanisms • Lynch and Horton: – “In the context of web site design, information architecture describes the overall conceptual models and general designs used to plan, structure, and assemble a site. Every web site has an information architecture, but information architecture techniques are particularly important to large, complex web sites …” – This is what they mean on Monster.com About Information Architecture some “definitions” • R. S. Wurman in Information Architects, 1996: – the individual who organizes the patterns inherent in data, making the complex clear – a person who creates the structure or map of information which allows others to find their personal paths to knowledge – the emerging 21st century professional occupation addressing the needs of the age focused upon clarity; human understanding and the science of the organization of information • Louis Rosenfeld, “Making the Case for Information Architecture” at ASIS 2000 IA Summit: – “Information architecture involves the design of organization, labeling, navigation, and searching systems to help people find and manage information more successfully.” About Information Architecture some “definitions” • … and from Monster.com – Sacha Cohen, “Becoming an Information Architect: Work as a Web Site Strategist” – in monster.com, http://technology.monster.com/articles/infoarchitect/ • Monster.com: First, what exactly is information architecture? – Mattie Langenberg: Information architecture, as the name implies, is basically about taking content and creating a structure to present that content to an audience. Whether the content is intended for a private audience on an intranet or for the public, it is the information architect's job to ensure that information is well-organized and presented in an easily accessible interface. Information Architecture • Aims of information architecture (L&H): – Organize site content into taxonomies and hierarchies of information – Communicate conceptual overviews and overall site organization to design team and clients – Research and design core site navigation concepts – Set standards and specifications for • Handling of html semantic markup • Format and handling of text content – Design and implement search optimization standards and strategies • Encompasses a broad range of design and planning disciplines • In fact, to create cohesive, coherent user experience – combine: – Technical design – User interface – Graphic design 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 HTML code, 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 • Will see other differences as well (Nielsen) How to Organize Information (L&H) Principles and Guidelines! • Inventory site content – What is available, what is needed • Establish a hierarchical outline of content – Will likely serve as site structure! • Create a controlled vocabulary – Allows consistent identification of content, site structure, and navigation elements • Chunking: Divide content into logical units for consistent modular structure – Page is basic (and essential) unit for presentation and WWW (Tim said so) • Draw diagrams that show site structure • Create rough outlines of pages with list of core navigation links • Analyze system by testing organization interactively with real users • Revise as needed Site Structure • How information elements of site organized – “Conceptually”, i.e., the information architecture – As presented to the user: • • • Through information presentation(s) generally Navigation elements reinforce Mental model – How user thinks about (forms an internal representation of) site – An important issue in interactive systems, not covered much by Shneiderman – Both: • Conceptual structure of the domain of information/knowledge presented by site – • • (or more task for interactive systems generally) Navigational structure of site Usually, “site structure” ~= “mental model” ~= hierarchy – Which is, of course, only an approximation • Much said in “popular” design literature about “site structure”, but it boils down to hierarchies – Because (again) the web is not hypertext – simple “goto” relations only for link structure and navigation – Because logn is powerful! – as all computer scientists know! A “Browse Interface” • Recall what you know about menus … • Note correspondence with hierarchy of web pages • Call it a “browse interface” to the web site contents, hierarchically structured content, or whatever, much of what is relevant to menu design is relevant here – Wide vs. shallow, number of alternatives, importance of menu labels, etc. • Note that the mental model follows in part from interaction with content and structure Site Use in Practice • In practice, typically sites use all of above: – Site hierarchy with standard navigational links – Topical (“see also”) links to create a web • And user “navigates” through (or forages in) site for information – Using both navigational links and search Site Search as Navigation • “Conceptually properly placed” items still, of course, need to be accessed – Proper and useful info. arch. (categorization, keywords, etc.) important in search • Despite efficiencies of hierarchies, pages often (must) be accessed through search facilities – Implications for information architecture: Can’t handle everything in conceptual structure – Implications for navigation: Allow search, deal with orientation (more later) • See practical limitations of “browse interface” Structure - Books and Web Pages • Modern book design and typography done within constraints of expectations for books – Margins, white space, page nums, index, toc, … – Ancient book design was not better • Constraints (conventions) are result of long process of often trial and error evolution of form – And most evolution eliminates bad ideas – “Prefer the standard to the offbeat” • Chicago Manual of Style • Within constraints still possible to be creative • L&H point out that book design is in fact facilitated (“enabled”) by established conventions • Web is at fairly early (or “adolescent”, L&H) stage in development of conventions – Though not infancy – people learn, medium adapts • A lot of really bad stuff is gone, but some remains Page Structure – and Navigation • Relevant as it affects navigation • Will look at “forms”, or layouts for pages here, and more about aesthetics, etc. next time L&H: “Canonical Form in Web Pages” Where to put things on pages and why • Pictorial composition – For, e.g., home pages – From art composition theory • Middle and corner of plane attract early attention – “Rule of thirds” • Center of interest within a grid that divides both dimensions in thirds • Text reading patterns typically more useful – “Guttenberg Z”, “reading gravity” • Attention flows down a page with reluctance to reverse downward scanning Page Scanning: Empirical Evidence • “Know thy user … empirically” • Eye-tracking studies by – Poynter Institute (http://eyetrack.poynter.org/) • Readers start scanning with many fixations in upper left of page • Gaze then follows Gutenberg Z pattern down page • Only later does typical reader lightly scan right of page – Jakob Nielsen (http://www.useit.com/eyetracking/) • Intense fixations across top, then, down left edge of page – “F pattern” • Combination (learned) reading pattern and (learned) web page reading Eye Tracking Studies • Eye tracking well-known technique for inferring attention – eyetools.com focuses on web usability • Record eye gaze, and map time or number of fixations to psuedo-color – E.g., “golden triangle” below Eye Tracking Studies • “F-Shaped Pattern for Reading Web Content” – – http://www.useit.com/alertbox/reading_pattern.html Nielsen, 2009, Eyetracking Web Usability • Three components of web page reading (in general, and depends on site and task): – First, a horizontal movement • Across upper part of content area – Next, second horizontal movement • Shorter area than first – Finally, vertical movement • Often slow and systematic – Solid stripe on eyetracking heatmap • Or slower – Spottier heatmap Eye Tracking Studies • “F-Shaped Pattern for Reading Web Content” – – http://www.useit.com/alertbox/reading_pattern.html Nielsen, 2009, Eyetracking Web Usability • Three components of web page reading (in general, and depends on site and task): – First, a horizontal movement • Across upper part of content area – Next, second horizontal movement • Shorter area than first – Finally, vertical movement • Often slow and systematic – Solid stripe on eyetracking heatmap • Or slower – Spottier heatmap F-pattern only a General Shape • Left: “About us” section of corporate web site • Mid: Product page on e-commerce site • Right: Search engine results page (SERP) Some Implications of F-pattern • Demonstrates need to not create text, etc., as if in printed document – Users don't read text thoroughly in a word-byword manner – Exhaustive reading rare, especially when users conducting search • First two paragraphs must state most important information. • Start subheads, paragraphs, and bullet points with information-carrying words – Words that users will notice when scanning down left side of content in final stem of their F-behavior. User’s Expectations of Web Pages • Users have viewed a lot of web pages • Have developed expectations about how to efficiently find information on a web page (and in a web site) – Recall, information foraging discussion • This is learned behavior, just as how to read a book is a learned behavior • Effective design should exploit what is known about learned behavior • Will see some examples Expectations - Information Location • Software Usability Research Laboratory (SURL), Wichita State University – • “Preliminary Examination of Global Expectations of Users’ Mental Models for E-Commerce Web Layouts” Pretty interesting (also, next page) – – New form of web pages - “cultural”, as reading But, “Until we have a Chicago Manual of Style for the web…” Expectations Information Location • Software Usability Research Laboratory (SURL), Wichita State University L&H: A Canonical Page Design • Adolescence vs. infancy – • Expectations of users established Can serve as basis for page template / grid – (which would be more detailed and include graphic elements) Current Tools Reflect Form Ubiquity UTPA Computer Science, 2008 • Design provided by tool – • Content management system “De facto standard” Current Tools Reflect Form Ubiquity UTPA Computer Science, 2013 – and 2014! • Design provided by tool – Content management system • “De facto standard” for organization • Enforces guidelines, applies principles End • .