4. Introduction Most Web sites functions fall into one of these categories: The display of information Navigation through the site Choosing, searching and finding Feedback and interaction Communicating the organization’s identity
5. The Display of Information Information can be displayed in any of the following forms: Text Images Animation Sound Video Virtual reality
6. The Display of Information To decide which display forms work best, put yourself in the users shoes! How will your target audience use the page/site?
7. Reading and Viewing: Text and Images Most sites include a lot of text and images…how should they be displayed? Should your site look like a: magazine? 2-3 columns, images interspersed newspaper? 6-7 columns book? 1 column, images at top/bottom It depends on the purpose of the site and the limitations of the computer screen
8. Reading and Viewing: Early Web design looked like existing printed pages PROBLEM: screens aren’t pages Most printed format is portraitmode Most monitors are landscape mode
10. Reading and Viewing Early Web sites sponsored by newspapers and magazines tended to mimic their printed versions. Six columns on a screen…I don’t think so!!!!
11. Reading and Viewing How are newspaper sites set-up? Why don’t you take a look at one or two of them? The Repository -http://www.cantonrepository.com/ Akron Beacon Journal -http://www.ohio.com/ New York Times - http://www.nytimes.com/ Chicago Tribune - http://www.chicagotribune.com/
12. Reading and Viewing They tend to display headline links which lead to new pages where the story text is displayed. Text is easier to read on screen if it’s larger than 10-12 point for story text. Also easier to read when displayed in a single column about 5” wide – with lots of white space on the side. Resist the urge to fill the entire screen!
13. Reading and Viewing Online magazine publishers Images are KEY. Use thumbnails for image display. Embedded small images in the text of a story, link to larger images.
14. Reading and viewing Both techniques are examples of two-stage interactive displays of information. Rely on the Web’s point-and-click interactivity to make them work. Don’t try to put all the info on one screen Use headlines and thumbnails as links (teasers) to more information Each click opens on demand to display the full-resolution text or images
15. The Display of Information WARNING Designing the best way to display text and images is not simple or easy It can’t be modeled on traditional media styles Web pages are DIFFERENT Think about all of the functions Size Resolution Interactivity!
16. Watching and Listening Screens are not radios or TVs Cannot display videos the same way Music and voice may disturb others Users want to control display of sounds and video Think about sites that open with music playing How do you feel about it? You don’t get to choose what’s playing, how loud or for how long YUCK! Think User Controls
17. Watching and Listening User Controls Allow the user to select the song/video Choose the volume
18. Watching and Listening Embedded or not? Fully embedded: user has no control Embedded with user controls Opens in a separate window with user controls Limited in size and quality Always ask yourself: Does the sound/video advance the purpose of the site?
19. Watching and Listening When incorporating sound and video, consider: Size of the files Do you offer both low and high quality options? Quality of the video/sound file Audience Connection speed and bandwidth
20. Tables and Lists Some collections of information are best presented in table format. Information can be presented: Plain text Bulleted lists Numbered lists Rows and columns Use tables to compare information in two dimensions Models & features of products
21. Tables and Lists Tables are used for: Information that must be compared in more than one dimension Comparing features Schedules Formatting Web pages into rows and columns like a magazine. A table does not have to display its borders, but can be used to line up information or create columns.
22. Tables and Lists Restricted screen width: Not everyone has the same screen width Most screens are 800 pixels wide (still most popular) (2006 update: 1024-1280 pixels wide becoming more popular) -300pixels for borders, scrollbars, and navigation 500 pixels left 100 characters of 12-pt text.
23. Tables and Lists Interested in the latest browser stats? Click the link below for everything and more you need to know! BROWSER STATISTICS:http://www.w3schools.com/browsers/default.asp
