Designing Web Interfaces AGED 4143

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

Designing Web Interfaces u Audience analysis Corporations sometimes go to great expense to learn the habits, preferences, and needs of their audience or market Web designers must at least consider audience demographics, including knowledge levels, technological capabilities, and aesthetic likes/dislikes before planning a site

Designing Web Interfaces u Interfaces must be planned for the “lowest common denominator” Choice of browser –Site should work equally well for Communicator and Explorer 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

Designing Web Interfaces u “Lowest common denominator,” cont’d 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

Designing Web Interfaces u Many designers use thumbnails and full-size sketches (manual or electronic) to plan their pages u Some create mock-ups in Photoshop or Fireworks, then tear them down and rebuild them in Dreamweaver u Designers must plan a consistent method of navigation Side/top/bottom nav bar– Image maps Plain text links– Pop-up/pull-down menus Hot graphics– Site map/index

Designing Web Interfaces u The architecture, or the structural organization of your site must be decided upon initially u Changes in organizational structure after a site has been designed are costly in terms of time and usually lead to broken links u Common structures: Linear Hierarchial Web

Designing Web Interfaces u 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” Blind users are especially grateful for this and other small design decisions that can help their special text-to-audio browsers

Designing Web Interfaces u Frames have become an unfriendly tool; most users dislike them Many pages incorporate tables, which offer a similar way to break up information u Specific tips 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)

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

Designing Web Interfaces u User-testing Designers observe users as they navigate the site 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 not when and why users encounter difficulty navigating