Home arrow Design Usability arrow Page 2 - More Website Knick Knack
DESIGN USABILITY

More Website Knick Knack


In our second article about useless clutter on websites, Chris Heilmann focuses on websites that try to reinvent the wheel, features that offer a quick "wow" and little else, and more. Are you guilty of inflicting website knick knack on your visitors? Take a look at the included check list and find out.

Author Info:
By: Chris Heilmann
Rating: 2 stars2 stars2 stars2 stars2 stars / 77
December 13, 2004
TABLE OF CONTENTS:
  1. · More Website Knick Knack
  2. · Why to stick to the tried-and-true
  3. · The site in the site
  4. · The Russian doll symptom
  5. · Changing the cursor
  6. · Baring it all
  7. · Forewarned is forearmed

print this article
SEARCH DEVARTICLES

More Website Knick Knack - Why to stick to the tried-and-true
(Page 2 of 7 )

The standard scrollbars may look boring in the eyes of a designer, but they have several benefits:

  • Visitors do not have to search for them. They know a scrollbar as something to scroll content with and don’t need to think twice about how to use it.

  • The companies developing the operating systems and/or browsers have already spent a lot of time and effort in testing the scroll bar with real people and made it as easy to use as possible.

  • Using the native elements of the browser ensures that other means of input are supported – you can scroll with the cursor keys, the “page up” and “page down keys,” or a mouse-wheel.

A “roll your own” scrollbar solution has the following problems:

  • To remain accessible, it needs to support keyboard and mouse.

  • It cannot rely on Javascript being available. Non-Javascript environments may either cut off part of the text or break the design.

  • If it relies on plug-ins, it needs a non-plug-in fallback solution.

Let’s take a closer look at a standard scrollbar, and what functionality it offers, to see what we would have to replicate with our own script:

More Website Knick Knack

A scrollbar allows us to either use the arrow buttons to scroll up and down or drag the slider to scroll faster. The slider also indicates to us where we are in the whole text and how much text there is to come.

More Website Knick Knack

The longer the text, the smaller the slider gets. This indicates not only where we are in the text, but also how much more there is to come.

Clicking on any section of the area the slider resides in will move it there. Richer applications also offer fast scrolling buttons and buttons for going to the top and the bottom.

These are a lot of features our scrollbar should have to match the ones that come free with the browser and the operating system - most of them a nightmare to implement cross-browser (when using DHTML).

We have to ask ourselves if we are up for that, and if we are up for maintaining the script in the future to make it work with the browsers to come. Also, we have to ask ourselves how we could improve the scrollbar. Reinventing something should represent an improvement of the original product, after all; simply matching the features is not enough.


blog comments powered by Disqus
DESIGN USABILITY ARTICLES

- Responsive Web Design: More Than Just a Buzz...
- Add New Website Features to Please Users
- Gzip Components in Action
- Configuring Gzip Components
- Gzip Components
- Create Great JavaScript and CSS Menus Simply
- Design Principles that Shape a Web Site
- Creating Aqua Style Images
- Easy as A,B,C – dynamic A to Z indexes
- EasyChart: a Usability Teaching Tool to Demo...
- Building Friendly Pop-up Windows
- Back to School: Design Usability
- Using HTML_QuickForm To Manage Web Forms, Pa...
- Using HTML_QuickForm To Manage Web Forms, Pa...
- More Website Knick Knack

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials