Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download presentation source
Transcript
Web Page Design & Construction Greg McArthur Digital Information Group Scientific Computing Division/NCAR December 11, 1997 1 “Design is the successive application of constraints until only a unique product is left.” Richard Pew Human Factor & Industrial Design December 11, 1997 2 Overview • Mental Models • Design Considerations – audience – purpose – content – user interface – navigation • Writing style December 11, 1997 3 Overview (cont) • Avoiding rookie mistakes • Copyright issues • Questions & Answers December 11, 1997 4 Mental Models • …are the models people have of themselves, others, the environment, and the things with which they interact. • People form mental models through experience, training, and instruction. Dan Norman The Design of Everyday Things December 11, 1997 5 Mental Models • YOU: – have a specific mental model of your website. • The USER: – may have a completely different mental model of your site. • The DESIGN GOAL: – to meld the two perspectives. December 11, 1997 6 Design Considerations “You never know what is enough unless you know what is more than enough.” William Blake December 11, 1997 7 Identify your Audience • Who constitutes the primary audience? – General public – K - 12 – University – Business, Political, Special Interest – Scientific – Government Agencies – Associates/Friends December 11, 1997 8 Purpose • • • • • • Provide service(s) Publish Information Lists of Lists Distance Learning Web Development Tools etc. December 11, 1997 9 Content Web content is like print content … with a few exceptions: – living document – viewed on different browsers/crt screens – continuously evolves – may never be “finished” December 11, 1997 10 Content ... • • • • • Keep writing tight and concise Avoid long paragraphs and use of italics Use an editor (the human kind) Intersperse graphics with text Put important information first, link to additional information as needed December 11, 1997 11 User Interface • Use screen real estate wisely – avoid filling screen with text – use “white space” around text/images • Use an easy-to-read font • Use 12 - 14 pt. size December 11, 1997 12 White Space • White space makes printing easier to read. • Use it on left or right of the screen. • Experiment with amount to white space for your pages. • Use <blockquote>, <frames> or <table> December 11, 1997 13 Text on Screen • Remember -- your reader is looking at a computer screen! – Eye tends to wander if sentence are too long – Line wraps may appear odd looking on some browsers December 11, 1997 14 User Interface • Background Images – When in doubt…leave them out. – Tend to be very distracting to viewer – If used, keep them simple, low-key • HTML <body background=“xy.gif”> December 11, 1997 15 User Interface • Background Colors – Use white primarily…easier to read text – If non-white, then use pastel colors – Colors can be very useful as navigational aid…but may interfere with link colors • HTML <body bgcolor=“#FFFFFF”> <body bgcolor=“white”> December 11, 1997 16 User Interface • Text on Screen – Make it easy to read • no italics • leading caps <font size=4>N</font>ow is the …. – Use default link colors – Avoid long paragraphs <body text=“white” link=“white” vlink=“blue” alink=“red”> December 11, 1997 17 User Interface • Fonts – Pick a readable Font – Don’t mix fonts -- be consistent – Good choices: • Helvetica Bookman Arial • Force a font: <font face=“bookman” size=6 color=black> December 11, 1997 18 Images • Scan and Save images at 75 dpi – higher resolutions = larger image on low resolution screens • Maximum image size = 600 x 400 pixels • Default browser window on most monitors is 800 x 600 pixels December 11, 1997 19 Image Size • General Rule: – Use them, but size them for default displays and quick loading • Consider – Image quality/resolution – Type of image format – Download time December 11, 1997 20 Image Format • Two major formats for the web: – GIF (and GIF89a) – JPEG • GIF = uses up to 256 colors – excellent for line art, lettering and images that don’t have a lot of colors • JPEG = uses up to 16 million colors – best for photos and high-res images December 11, 1997 21 Download Time • Images take Bandwidth = Time – Don’t make user wait – Let the browser “know” how to format images on the page as it is downloading • Use WIDTH= and HEIGHT= attributes <img WIDTH=200 HEIGHT=150 src=“MY.gif” ALT=“my picture”> December 11, 1997 22 Navigation • Hardest Task in Web-site design – not necessarily intuitive – non-linear…the web site is not unidirectional – keeps user from being lost in your cyberspace December 11, 1997 23 Navigation • Keep navigational tools simple and intuitive – avoid ambiguous images/icons – be consistent in use • One icon -- one purpose – Use “alt=“ for all icons – Don’t overload site with many nav. tools December 11, 1997 24 Navigation • You must provide user with a way to get around within your site: – top – back (to a home page) – next – previous – exit December 11, 1997 25 Navigation • 7 +/- 2 Rule: – 5 minimum nav elements – 9 maximum nav elements • Natural, cognitive ability to remember and use • Plan navigational elements accordingly December 11, 1997 26 Avoid Common Mistakes • Using Frames – multiple frames are confusing – can’t bookmark page – printing becomes difficult • Bleeding-edge Technology – untested and volatile results – can result in “over designed” site December 11, 1997 27 Common Mistakes • Scrolling text, marquees, running animations – page elements that move incessantly – give users peace and quiet to read • Overly complex URLs – should contain reasonable file structure – adequately reflects the info. space December 11, 1997 28 Common Mistakes • Orphan pages – all should indicate what site they belong to – each should have a link to the site home page • Long scrolling pages – 10% of users will scroll beyond first page – keep all critical content and nav tools at the top of the page December 11, 1997 29 Common Mistakes • Lack of Navigational Support – design around your information space – clear, strong sense of direction – use a search engine • Non-standard Link Colors – active links (red), visited links (blue) – keep these defaults when in doubt December 11, 1997 30 Common Mistakes • Outdated Information – keep old info weeded out of the site – always have a “last updated” stamp • Overly long download times – images, sounds, etc. – pay attention to file sizes from “Top Ten Mistakes in Web Design” Jakob Nielson December 11, 1997 31 Copyrights • Anything you create can be copyrighted – Asserts your rights to your material – Not required but considered prudent – Pages for NCAR/UCAR…just link to the current copyright page – or: Copyright © 1997, Your Name Institution Name (if any) All rights reserved. December 11, 1997 32 Questions & Answers December 11, 1997 33
