Designing Web Interfaces AGED 3141(L)

Designing Web Interfaces Interface: how a web page looks and how it is designed for people to use People want easy-to-use, easy-to-navigate interfaces The keys are: analyzing the audience analyzing the audience planning the design planning the design testing the site testing the site

Audience Analysis Corporations sometimes go to great expense to learn the habits, preferences, and needs of their audience or market Consider audience demographics, including knowledge levels, technological capabilities, and aesthetic likes/dislikes before planning a site

Planning the design Plan for the “lowest common denominator”: Choice of browser Choice of browser Site should work equally well for Navigator and Explorer Monitor resolution Monitor resolution Set your monitor to the lowest resolution that any of your users’ monitors is likely to have 800X600 pixels is the norm, but some 640X480 monitors still exist

Planning the design “Lowest common denominator,” cont’d Processor and connection speed Processor and connection speed Always shoot for the smallest file size possible while maintaining quality of graphics and photos Understand that a separate communication must occur for each electronic file on a page; these “hits” require time Technical skill and web experience Technical skill and web experience

Planning the design Many designers use thumbnails and full- size sketches (manual or electronic) Designers must plan a consistent method of navigation Buttons on side bar- Buttons in banner Buttons on side bar- Buttons in banner Buttons on footer- Plain text links Buttons on footer- Plain text links Hot graphics- site map Hot graphics- site map Index Index

Planning the design Designers must design for those who browse with graphics off If a graphic is hot, it’s thoughtful to accommodate users by having text links that match the graphic links and by always including an “alternate label” If a graphic is hot, it’s thoughtful to accommodate users by having text links that match the graphic links and by always including an “alternate label” Blind users are especially grateful for this and other small design decisions that can help their special text-to-audio browsers Blind users are especially grateful for this and other small design decisions that can help their special text-to-audio browsers

Other Advice Frames have become an unfriendly tool; most users dislike them Many pages incorporate tables, which offer a similar way to break up information Many pages incorporate tables, which offer a similar way to break up information Specific tips Plan a horizontal format with room for the browser tool bar Plan a horizontal format with room for the browser tool bar Plan to minimize scrolling (left to right, and top to bottom; no scrolling on home page) Plan to minimize scrolling (left to right, and top to bottom; no scrolling on home page)

Other Advice Specific tips, cont’d Minimize the file size of graphics, and minimize the number of hits required to fully load a page Minimize the file size of graphics, and minimize the number of hits required to fully load a page Borrow other designs that work Borrow other designs that work Make the navigation methods clean and consistent Make the navigation methods clean and consistent Check your site on other computers Check your site on other computers User-test your site User-test your site

User-testing Designers observe users as they navigate the site Some user-tests involve asking users to verbalize their thoughts as they navigate Some user-tests involve asking users to verbalize their thoughts as they navigate At its most basic level, a good user test involves observation by the designer, who should know when and why users encounter difficulty navigating At its most basic level, a good user test involves observation by the designer, who should know when and why users encounter difficulty navigating