1. IF-ITB/EN/Des 2004 IF1191 – Web Design & Usability Page 1 Web Design & Usability Elfan Nofiari Departemen Teknik Informatika ITB

2. IF-ITB/EN/Des 2004 IF1191 – Web Design & Usability Page 2 Web Page Design Faults (1) From Flander's "Web Pages That Suck" & Stevyn Pompelio's "How To Make Annoying Web Pages" Pretentious Front Page Dispense with heavy colors and long-running animations on home pages that are visited frequently Forcing the Browser Don't make the browser window a certain width or change the default fonts High on Kai When you get your new graphic package, don't insist on putting every effect on your web pages Free Backgrounds That Suck Fiery flames look great in some images; don't use them for backgrounds just because they're free

3. IF-ITB/EN/Des 2004 IF1191 – Web Design & Usability Page 3 Web Page Design Faults (2) Widen Your Background Images Background images are used with tables to produce vertical color bar effect. Remember the background images repeat horizontally. On wide monitors the effect is disastrous. Note that some people have very big monitors indeed Too Much Text A common fault. Keep pages short Bad Text Don't use a different color for each character in text, even if it's a title Java Jive Never use Java applets for graphics effects Needless JavaScript Don't use JavaScript mouseover effects just because you can. When something becomes popular, it usually starts to suck Cascading Style Sheets The latest and greatest way to make ugly pages

4. IF-ITB/EN/Des 2004 IF1191 – Web Design & Usability Page 4 Web Page Design Mistakes (1) From Jakob Nielsen's "Top 10 Mistakes of Web Page Design" 1.Using Frames Frames are very confusing for users : Frames break the fundamental user model of the Web page Cannot bookmark the current page and return to it URLs stop working Difficult to print Who knows what information will appear where when you click on a link? 2.Bleeding-Edge Technology –Latest Web technology may attract a few nerds, but mainstream users will care more about useful content and your ability to offer good customer service –When desktop publishing was young, people put twenty fonts in their document. Avoid similar design bloat on the Web 3.Constantly Running Animations –Never include page elements that move incessantly –Moving images have an overpowering effect on the human peripheral vision. Give the user some peace and quiet to actually read the text! – is simply evil

5. IF-ITB/EN/Des 2004 IF1191 – Web Design & Usability Page 5 Web Page Design Mistakes (2) 4.Complex URLs –URLs should be hidden from the user interface. However, users do see URLs in current web browsers. A URL should contain human-readable directory and file names –Also, users need to type a URL, so use short names with all lower-case characters and no special characters 5.Orphan Pages –All pages should include a clear indication of the web site they belong to since users may access pages directly without coming through your home page –Every page should have a linkup to home page as well as some indication of where it fits within the structure of your information space 6.Long Scrolling Pages –Only 10% of users scroll beyond the information that is visible on the screen when a page comes up –All critical content and navigation options should be on the top part of the page –Page is usually long because it is a leaf node that is only read by people with special interests—make it shorter!

6. IF-ITB/EN/Des 2004 IF1191 – Web Design & Usability Page 6 Web Page Design Mistakes (3) 7.Lack of Navigation Support –Don't assume that users know as much about your sites as you do—they always have difficulty finding information –Users need support in the form of a strong sense of structure and place –Provide a site map and let users know where they are and where they can go –Also, include a search feature since even the best navigation support will never be enough 8.Non-Standard Link Colors –Don't change the standard colors –The ability to understand followed links is one of the few navigational aids that is standard in most web browsers. Consistency is key to teaching users what the link colors mean 9.Outdated Information –Weed out old information –Keep old pages up to date—the information is still valuable 10.Overly Long Download Times –Should be obvious! –Traditional HCI guidelines indicate 10 seconds as the maximum response time before users lose interest –On the Web, users have been trained to endure so much suffering that it may be acceptable to increase this limit to 15 seconds for a few pages –Bandwith is getting worse, not better

7. IF-ITB/EN/Des 2004 IF1191 – Web Design & Usability Page 7 Web Page Design Mistakes (4) 10 New mistakes : 1.Breaking or slowing down the Back Button 2.Opening new browser windows 3.Nonstandard use of GUI widgets 4.Lack of Biographies 5.Lack of Archives 6.Moving pages to new URLs 7.Headlines that make no sense out of context 8.Jumping at the latest internet buzzword 9.Slow server response times 10.Anything that looks like advertising