If you build it, will they come? Usability & Design on the Internet

If you build it, will they come?Usability & Design on the Internet Chris Wilken

What I will show you • Steps to Creating a Web Site • Implementing Usability in Your Web Site • Optimizing Load Times for Your Web Site

Reasons to build a Web site • To make money • To disseminate information • To stroke your ego • For your eyes only – personal portal Web Pages that Suck, p 3

Steps in building a Web site • Determine Target Audience • Determine Content • Plan How Site Will Look • Test Information Structure • Build it!

Determine Target Audience • Decide who may visit your web site, and tailor the information to that type of person • Design with the audience in mind

Determine Content • “Content is king” – users will keep coming back to your site if you have quality content • Make sure that content fits within your site’s topic – don’t stray!

Plan how site will look • Sample structure: music fan’s site

Test Information Structure • “Fresh eyes” (new users) are important • Those users have never seen your site before, so they will try things out that you didn’t notice • According to Jacob Neilsen, a web usability expert, only 5 users need to test and give feedback to discover 85% of your site’s usability problems http://www.useit.com/alertbox/20000319.html

Build it! • There are many ways to build a site: • Straight HTML coding • Site design tool (FrontPage, Dreamweaver) • Content delivery (databases which deliver content to predesigned pages)

Focus on: Usability Principles

Why design a site well? • Web sites are built for other people to look at • You get more hits if people have a reason to come back • Good design assists people in finding information they are interested in

Plan site for all types of users • Different people • Different systems • Different browsers • Different system speeds • Different modem connections • As a designer, you must take ALL into account

Different people • Women 18+ now comprise 40% of the Internet viewing audience • Kids & teens comprise 19% • People with special needs comprise a small part, but need to be considered also • e.g. Blind people need ALT tags on images http://www.mediametrix.com/images/us__data_composition_750.gif

Different Systems Percent of net users and their OS Windows 93.15% Macs 3.15 UNIX 0.52 Others 3.18 http://www.zdnet.com/anchordesk/story/story_4533.html

Different System Settings • Most users use either 640 x 480 or 600 x 800 resolution • If you build a page that “looks best in 600 x 800,” users who use 640 x 480 might not be able to view all parts of the site

Different System Settings (cont) • In addition, the colors users set vary from 256 to 32-bit color (4,294,967,296)

Different Systems’ colors • Mac, Windows, desktops, and laptops display colors differently – what looks good on one system might look entirely different on another • In order to keep colors consistent, use Lynda Weinman’s 216 browser-safe palette for graphics (non-photo images) http://www.lynda.com/hexh.html

Different Browsers Browser Market share • Internet Explorer 80.21% • Netscape 19.76 • Other 0.03 http://www.zdnet.com/anchordesk/story/story_4512.html

Problems with Browsers • Different browsers support different HTML tags and allocate different amounts of space to Web page content • The same browser may have different amounts of space on different systems! • e.g. Netscape allows 635 pixels wide on Windows, but only 580 wide on Macs Web Design Studio Secrets, 11

Different System Speeds • People still use slow computers to access the Internet • Web pages load slower on slower systems • This is why page optimization is important

Different Modem Connections • People still connect at 28.8 and slower • Broadband connections have not gone mainstream • Therefore, you must optimize pages for 28.8 or 56K

How to overcome the differences • Build your site for your target audience • e.g. if your site is about the iMac, don’t worry about designing for people who use Windows machines

Other Usability Issues

Navigation is important • Make sure that the user knows what site he/she is at: logo or contact information on every page • Consistent look & navigation buttons on pages • Name sections carefully • Create trees on every page • e.g. Home > Information > Detail http://www.builder.com/Graphics/UserInterface/ss02a.html

Don’t use Mystery Navigation! • Always label icons or use an icon that graphically describes where the user will go if he/she clicks on it • Example– CNN http://www.webpagesthatsuck.com/badnavigation.html

Keep links current • Users find broken links annoying • If users find broken links, they get the impression that the site is not updated and will not return

Focus on: Optimization

Optimizing pages • Try to keep pages between 34.4K and 47.8K (including graphics and text) • How can you test this? • Test your page with http://websitegarage.netscape.com/http://www.gifwizard.com/ http://www.webpagesthatsuck.com/478.html

If pages are too slow: • Optimize graphics: • JPEG format for photographs & many colors • GIF format for graphics (216 web-safe colors) • Both formats can be compressed with 3rd party optimizers • Create two pages instead of one • Eliminate content/graphics

If you build it, will they come? Usability & Design on the Internet