Web Design. by Steven Jacobs, Adjunct Faculty Department of Computer Science Northern Arizona University. June 2009

Transcription

1 by Steven Jacobs, Adjunct Faculty Department of Computer Science Northern Arizona University June Web Design There are millions and it is growing. Some are visited often, some to a small audience Purpose can be: - ego/communication/social networking - education/information - entertainment - e-commerce/e-business - others? Regarding connectivity, there are: the Internet, intranets, Virtual Private Networks, web portals, links for information, associated links, etc. There are documented design processes 3 1

2 Categorize by: originators, e.g a university amount of information: Taxonomy of Web Sites Number of Web pages Examples 1-10 Personal bio, restaurant review 5-50 Conference program, Photo portfolio Corporate annual report, product catalogue ,000 Photo library, museum tour ,000 University guide, newspaper 50, ,000 Yellow pages, airline schedule >500,000 Journal abstracts >5,000,000 Library of Congress From Shneiderman 4 Taxonomy (concluded) Categorize by (continued from previous page): goals: Sell products: Publishers, airlines, department stores Advertise products: NBC, Ford, IBM, Microsoft, Sony Inform and Universities, museums, cities announce: Provide access: Libraries, newspapers, scientific organizations Offer services: Governments, public utilities Create discussions: Public interest groups, magazines Nurture communities Political groups, professional associations measure of success: - e-commerce growth - finding that lost classmate - diversity of users From Shneiderman - frequency of users - etc. 5 Web vs. GUI Design In traditional GUI: You control each pixel. Web design makes you give up control to meet client/server hardware/software needs. You know for what system you are designing. For web design, your result could appear on WebTV! The designer can control where the user goes and when. In web navigation, the user has more control of their navigation, and may only stay for a few moments! You are part of an enclosed experience. Obviously not the same for Web design! 6 2

3 In traditional GUI: Web vs. GUI Design (concluded) There is consistency as how your design will look on the target machine. In web design, the system you build may and will look different depending on the platform, browser, etc. Application standards match the vendor standard. Web standards and style guides are an emerging discipline. 7 Top 10 Mistakes in Web Design (from Jakob Neilsen) 1. Using frames 2. Gratuitous Use of Bleeding-Edge Technology 3. Scrolling Text, Marquees and Constantly Running Animations 4. Complex URLs 5. Orphan Pages 6. Long Scrolling Pages 7. Lack of Navigation Support 8. Non-standard link colors 9. Outdated Information 10. Overly Long Download times 8 from Jakob Neilsen 1. No Prices 2. Inflexible Search Engines 3. Horizontal scrolling 4. Fixed Font Size 5. Blocks of Text 6. JavaScript in Links 7. Infrequently asked questions in FAQ s Another Notable List: Top 10 Mistakes in Collecting addresses without Privacy Policy 9. URL > 75 Characters 10. Mailto Link that is not on an address 9 3

4 Other tidbits There are many separate courses and books on web site design - "Designing Large Scale Web Sites", by D. Sano - "Creating Killer Web Sites", by David Siegel - "Web Weaving", by C. Steadman, et al. - "The Design of Sites, by Douglas K. Van Duyne et al. - "Web Bloopers: 60 Common Web Design Mistakes and How to Avoid Them, by Jeff Johnson There are web site bulletin board forums for people to compare moved to One forum evaluates site design by degree of difficulty, execution and esthetics. Determining web site usability, examining style and design maturity, etc. is growing. Some have usability tested and spent significant effort creating a web site style. They developed a web site style guide and enforced it 10 Other Tidbits (concluded) There are many other style guides, e.g. Need to factor in supporting graphics and rendering technologies as well as multimedia impact on UI Need to usability test web site design as you do any UI Web site design is more than composing good HTML, although that is important. An HTML Author's Board site has good HTML style suggestions. 11 Some web site design guidelines Site tourists: you cannot control the user Loyal visitors: you almost want to say "Please bookmark me" Avoid frames People will not "hang around" if they see the site is not maintained current. Users are impatient. Reduce scrolling, especially at the home page Avoid animation unless it has a purpose, like showing how a game is played. Do not design it for VPs or to match the organization. The "information architecture" should mirror the user tasks. There should be a strong, consistent web design within a company's web pages. 12 4

5 More web site guidelines A site needs to make clear what it is supposed to do and how it is organized. Always have "search" on web page. Don't match other media, e.g. brochures, TV ad, and push that onto the web page. Do the web first. Link wisely, not everything. Also, don't just say "click here" without a highlight or reference. Tell people where you are. Provide navigation buttons and/or site maps. On-line survey & forms need smooth interaction, "clear" button, easy to back up and correct, pull down choices, etc. Strong metaphor can be "over cute", e.g. graphic of SW Airlines reservation desk on web page Spend a moment on URL design 13 General web site design comments Traffic stopping web sites - have excellent, current content (updated frequently) - are clean and efficient in design - load fast - are easy to use Forrester.com conducts research on web sites Have consistent navigation throughout a web site in case a search engine lands you below the home page Image maps for graphical navigation Don t use colors in text unless it is a link White background preferred with easy-to-read (dark) lettering Refrain from large backgrounds Avoid eye candy (graphic) unless it supports a message 14 More general web site design comments Should be able to do full navigation without scrolling from the home page. One example, thunderlizard.com, had menu bar at the top and bottom of an over-detailed home page. Don t do Enter Here Example of ACME Intranet site with 16 buttons representing the ACME organization was not good design. Suggest (cautiously) combining to improve user interface. Define web site with tables to be centered, rather than flush left making text fixed to the left when expanding the web site display on the screen Stylesheets in FrontPage/SharePoint, DreamWeaver, DrumBeat, GoLive, Cyberstudio - webmonkey.com implements style sheets automatically - cascade style sheets 15 5

6 More general web site design comments Compare site on multiple versions of browsers and platforms (Internet Explorer vs Mozilla FireFox), PC vs. Mac to insure consistency of presentation. Visit and HTML writer s guide - XML for data behind the page. Dynamic HTML. 16 A homepage screen from years past 17 And today 18 6

7 Home Page Usability The Home Page is the most important page on any web site, giving the user visibility into the sites purpose, navigation, etc. Home Pages due to its importance and role require an extra look in terms of its usability. Reference: Homepage Usability, 50 Websites Deconstructed, Jakob Neilsen, New Riders Publishing, Home Page Usability (concluded) Breakdown of Screen Real Estate 14% 6% 13% 29% Unused Self-promotion Content of interest Site identity (welcome) 22% 8% 4% 4% Filler Advertising & sponsors Navigation OS and broswer controls Detailed comments, plus review of Window Title and Tag Line for each home page 20 The Non-Designer s Web Book Not-so-good and So-muchbetter checklists Pages of the reference Reference: The Non-Designer s Web Book (and the Non-Designer s Design Book) by Robin Williams et al, Peachpit Press, Berkeley, California Also, a Web Usability Checklist Usability to be addressed in more detail, later in this course 21 7

8 It is the same, except... Internet vs. intranets Do not make internet pages map to the company s internal organization. An Intranet may have reason to do so. Remember your intranet and external web site have 2 different information spaces with 2 different goals, users, and technical constraints Can improve bottom line through increased employee productivity