Web Developer's Virtual Library: Encyclopedia of Web Design Tutorials, Articles and Discussions
 Discussion Forums
 HTML, XML, JavaScript...
 Software Reviews
 Editors,Others...
 Top100
 JavaScript Tutorials, ...
 Tutorials
 ASP, CSS, Databases...
 Discussion List
 FAQ, Roundup, Configure ...
 Authoring
 HTML, JavaScript, CSS...
 Design
 Layout, Navigation,...
 Graphics
 Tools, Colors, Images...
 Software
 Browsers, Editors, XML...
 Internet
 Domains, E-Commerce, ...
 WDVL Resources
  Intermdiate, Tutorials,...
 WDVL
 Discussion Lists, Top 100,...
 Technology Jobs


WDVL Newsletter

Active Server Pages
JSP/Java Servlets
Microsoft SQL Server
Daily Backup
Dedicated Servers
Streaming Audio/Video
24-hour Support    

jobs.webdeveloper.com

Hiermenus


e-commerce
Partner With Us
Phone Cards
Promote Your Website
KVM over IP
Imprinted Gifts
Logo Design
Boat Donations
Memory
Baby Photo Contest
Promos and Premiums
Promotional Items
KVM Switch over IP
Televisions
Promotional Golf
Best Price

Developer Channel
FlashKit.com
JavaScript.com
JavaScriptSource
Developer Jobs
ScriptSearch
StreamingMediaWorld
Web Developer's Journal
Web Developer's Virtual Library
WebDeveloper.com
Webreference
Web Hosts
XMLfiles.com

internet.com
IT
Developer
Internet News
Small Business
Personal Technology
International

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers



Quality Management ROI Calculator - Focus on Test Automation
The Rational Quality Management ROI calculator is intended to give you an idea of what return you can garner from implementing our functional testing solutions. Our quality management solutions offer tools to develop a continuous process, powered by automation to govern software delivery. »

Gartner MarketScope: Application Quality Management Solutions, 1Q 08
This Gartner MarketScope provides guidance for enterprises seeking to purchase tools to manage risk and software quality. We focus on tools fit for large-scale enterprise use and that are ready out of the box to manage quality requirements and functional testing. »

Whitepaper: Tips for Writing Good Use Cases
Writing a good use case isnt easy, but, fortunately, our experience can be your guide. The concepts and principles assembled here represent the works of many people at IBM, and they form a foundation of proven best practices. »

Whitepaper: The Role of Integrated Requirements Management in Software Delivery
Learn about the critical role integrated requirements management can play in helping ensure your business goals and IT projects are continuously aligned-whether you are sourcing, integrat-ing, building or maintaining your software. It also looks at ways that integration and automation can help ensure managing projects and the required changes can be executed using manageable processes that satisfy stakeholders and development teams. »
Top 10 Articles
  1. Web Developer's Virtual Library: Encyclopedia of Web Design Tutorials, Articles and Discussions
  2. JavaScript Tutorial for Programmers
  3. Design
  4. JavaScript Tutorial for Programmers - Objects
  5. JavaScript Tutorial for Programmers - JavaScript Grammar
  6. JavaScript Tutorial for Programmers - Versions of JavaScript
  7. Cascading Style Sheets
  8. JavaScript Tutorial for Programmers - Embedding JavaScript
  9. JavaScript Tutorial for Programmers - Functions
  10. Authoring JavaScript
Domain Name Lookup
Search to find the availability of a domain name. Just enter the complete domain name with extension (.com, .net, .edu)

Graphics and Speed - Page 2

September 10, 2001

Probably the biggest influence of usability on page design has been in the field of graphics. People don't like watching a blank screen while waiting for big graphics files to download. Research suggests they'll move on if they have to wait ten seconds or more, and current thinking is that even ten seconds is too long. Eight is the maximum and four or six desirable. Standard connections download at around 4 to 5 kilobytes a second, so you should be aiming to squeeze all your important stuff into the first 20 kbytes or so. That doesn't leave much room for graphics. It's the reason why fashion in site design has moved away from the extensive graphic elements of a couple of years ago to the current minimalism. No backgrounds, no image maps, just a couple of small pictures.

If you must have big graphics then make sure they still allow your visitors to see a fully usable site within a few seconds. Eye candy that makes the page more attractive might be acceptable if it is just that — eye candy — and doesn't perform any other function. Image maps have almost entirely fallen out of favor because they are essential to navigation and the site isn't usable until they've finally turned up on screen.

Watch out for other navigation issues too, including delayed rollover menus and icons. A classic usability error is getting the size of navigation graphics down to a minimum, and then allowing them to share a page with big images. The browser does its usual trick of downloading five or six images simultaneously, meaning the important navigation elements are delayed while the pretty pictures begin loading way down the page.

On the Web's most popular sites you'll find only a few examples of graphic elements used in navigation.

If you really must have navigation images, use the Alt property of the image tag to show text before the graphic appears. To indicate that the Alt text is a hyperlink and can be used for navigation, you can put it within the <a href=…> and </a> tags rather than reserving that honor for the image alone.

All images should have their widths and heights specified within the image tag, otherwise the browser will wait until it's fully downloaded them and knows all their sizes before rendering anything on screen — including the accompanying text.

Additional Resources on Graphics and Speed

Colors and Text

There are three main issues here: The colors of text, hyperlinks, and the backgrounds on which they're read. Almost all popular sites use black text, standard blue hyperlinks and white backgrounds.

Black text on a white background gives high contrast and is the easiest to read at length — that's why it's so popular. Any variation reduces contrast and legibility, but if the variation is minor then the loss of legibility will be minor too. No big deal.

Light text on a dark background can also give good legibility, but the general consensus is that it's harder to read at length, so is more suited to short text.

If you use colored text on a colored background, you need to take care over contrast and legibility. Color pairs that are technically defined as complementary (meaning they're at opposite sides of a circular spectrum or color wheel) such as red and green or gold and blue, give more contrast than colors closer together on the spectrum, such as red and orange. If you're tempted by a bold combination, be sure to check your pages on a screen that suffers from reflected glare. Combinations that seem fine on a well-positioned screen can merge into obscurity on one that's badly positioned — and that's the situation many your visitors may be stuck with.

When it comes to hyperlink colors, there's another issue that needs taking into account — user expectations. In the early days of the Web, everybody was a new user and nobody had much in the way of expectations. Red text on a black background with yellow hyperlinks was fun. But those days are behind us. There are now millions of experienced Web users and they all know that blue underlined text definitely means a hyperlink. Yellow underlined text may also mean a hyperlink, but then again it may not.

If you use standard blue underlined hyperlinks you are removing any possibility of confusion. Any other scheme will introduce an element of doubt, because it does not conform to expectations.

At this level the science runs out and we come down to opinion. Just how important is that possibility of confusion?

If you have a navigation area full of underlined yellow words on a black background, surely everybody will recognize they're links? Probably so, but it's interesting to note that most of the popular sites stick with the standard blue.

Choosing standard blue can influence your entire color scheme. You'll notice that relatively few sites on the Web make extensive use of green. That's because it doesn't mix well with hyperlink blue. Color schemes in red, blue and yellow are more popular because they're easy to use with hyperlink blue.

Usability - the Basics
How Users Read - Page 3


Up to => Home / Authoring / Design / Basics




Jupiter Online Media: internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and Jupiter Online Media

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Web Hosting | Newsletters | Tech Jobs | Shopping | E-mail Offers