1. Web Site Design

2. Overview Why? Internet and Intranet Common Mistakes. Elements of a Web Site. Structure. Navigation

3. Why Design? – Internet Its all about eyeballs and money! If a user gets lost in a website they leave. If pages take too long to download (e.g. flash animations, massive pictures) they leave. If pages are difficult to read they leave. If forms are difficult to fill out they either aren’t filled out or are filled out wrong.

4. Why Design? – Intranet Its all about money! Employers want Web-based information and financial transactions to be executed as efficiently and effectively as possible. Financial transactions: –prudently minimize the number of steps for completion. – maximize the probability that transaction is recorded properly (e.g. add aids in forms to ensure data is being entered correctly). Information transactions: –Minimize the number of steps required to find information. –Ensure information is unambiguous. Might require both overview and detailed information possibly on different pages. –Navigation is very important. –If pages take too long to download (e.g. flash animations, massive pictures) they leave. –If forms are used to acquire information and are difficult to fill out they either aren’t filled out or are filled out wrong.

5. GUI Design:Things to remember User interface design is not strictly a matter of personal taste (although personal taste can play a part). You are not designing the interface for your own use but that of the user. Different websites might have completely different usage patterns and therefore that require different elements. When all is said and done, many websites have a function….if they do not properly perform the underlying function it is unimportant how good the user interface design is.

6. GUI Design Ideas Alan Cooper's (About Face 2.0), presents two key points in design. “Imagine users as very intelligent but very busy” “No matter how cool your interface is, less of it would be better”

7. Design to Your Purpose Content-rich sites –ideally have site search button –To keep people revisiting the site you should change content. Business Sites. –Are they expected to be used by employees or new customers. It is easier to justify a learning curve for employees than for customers. –Don’t slow down the entry of any financial transactions with ‘neat’ tools (toys), animations or flash.

8. Usability Usability has five quality components: Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design? Efficiency: Once users have learned the design, how quickly can they perform tasks? Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency? Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors? Satisfaction: How pleasant is it to use the design? From Jakob Nielsen, http://www.useit.com/alertbox/20030825.html

9. Elements of Web Site Design Structure Navigation Text Visual Layout and Elements Media Taken from http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/572

10. Structure The overall structure for a web site relates to how pages are linked to each other and to media resources. Broad designs are preferred to deep designs. –You do not want a user to feel lost. This could happen if you create a structure where the user might have to go three or four levels deep into a hierarchy of pages. Labels for links should be descriptive.

11. Evaluating Your Structure Do users know how to find the information they need? Does your navigation design connect all related information in a sequence that makes sense to users? Do users know where they are in the site structure? Do users know how to return to points they visited previously? Are there any unnecessary links that clutter the navigation design? Taken from http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/748

12. Text Use default fonts as much as possible. If you do specify fonts preferred fonts should be times roman (for serif font) and arial and helvetica (for san-serif) font. Typically serif fonts are easier to follow if your lines are long (e.g. >60 characters). Make certain your headings are meaningful and try to put important information first. Paragraphs should be flush left. Do not overdo links in text since these can interfere with the readability of a section of text. Based on http://www-3.ibm.com/ibm/easy/eou_ext.nsf/publish/601

13. Layout Where appropriate design to customer’s tastes. Comply with organizations guidelines. BE CONSISTENT!!! This aids immensely in making the site or forms easy to learn, easy to use and can dramatically reduce errors. Less is usually better. Try to be concise with any text since it will be more likely to be read. Make it easy for viewers to access what’s new on the site. Avoid the need for scrolling. Use top left for both Navigation and Identification of the site or page. Based on http://www-3.ibm.com/ibm/easy/eou_ext.nsf/publish/602

14. Forms and Web Site Implementation Forms are batch-processed…all field information in a form is sent in batch when the user presses a submit button. This causes usability problems if all validation is done on the server. –e.g. User fills out form, submits form, server detects errors on form and regenerates form for user to complete properly with appropriate error messages. Process is awkward compared to pc-based applications.

15. Forms and Web Site Implementation Alternatives: –Use controls which prevent the possibility of certain errors. A drop-down list box for a small list of choices eliminates the chance of a spelling errors on those choices associated with text boxes. –Incorporate as much of the validation as possible into the actually form using Javascript routines. –Use defaults wherever possible to completely eliminate data entry.

16. Preventing Errors When possible design forms to prevent the possibility of error. –Drop-down lists for small lists of choices. –Disabling options when they are not available. Example: If both deluxe rooms and standard rooms are available at the Excelsior but only standard rooms are available at the Regency, when a user selects Regency they should not be allowed to choose between deluxe and standard room.

17. Validating Forms Field Presence. Also known as must-fill. Check that certain critical fields are non-null before submission. Field Length. Used when it is known that a field should be a certain length. Field Range. Used when it is known that a field should be within a certain range. Format. Certain fields have a specified format. Canadian postal codes are alpha-digit-alpha-digit-alpha- digit. Consistency. Sometimes certain fields must be consistent with other fields.