Americas Africa Europe Middle East South Asia Asia Pacific
How I may help
LinkedIn Profile Email me!
Call me using Skype client on your machine

Reload this page Graphical User Interface for Websites

This page defines user functional requirements for websites and techniques to satisfy them. This is part of the Web project plananother page on this site

Sound: Cool!


Topics this page:

  • Site GUI Capabilities
  • Menu Item Naming Strategies
  • Quality Criteria
  • Usability
  • Satisfying Requirements
  • GUI for Navigation

    Site Map List all pages on this site 
    About this site About this site 
    Go to first topic Go to Bottom of this page

    Set screen Site GUI Capabilities

      This table arranges possible links in websites according to type of usage and (more importantly) on whether each link is focused on the user, inwardly on the site itself, or outwardly to content topics and others in the site's community.
    Go to Top of this page.
    Previous topic this page
    Next topic this page
    Users Site Itself Topics (Others)
  • Sign-On/Logon
  • Sign-Off/Logoff
  • Send Instant Message
  • Driving Directions
  • Facility Floorplan / Tour
  • Translate webpage
  • Make this my homepage
  • Thank You/Replies
  • Register/Subscribe/Join
  • UnSubscribe
  • Help/FAQ
  • Feedback/Contact Us
  • Guestbook/Comments
  • Geographical Map
  • Bookmark in my Favorites
  • Follow-up Emails
  • Print Coupon/Certificate
  • User Forum/Discuss
  • Survey Voting
  • Chat - Who's Online
  • Address Book
  • Directory
  • Invite Friends
  • Download

  • Go to Top of this page.
    Previous topic this page
    Next topic this page
  • Next/Previous Page Viewed
  • Search WWW
  • Related Items
  • For Kids/...
  • Prompt Sounds
  • Ready for You
  • Home/Main Page
  • Main Menu
  • Site Map
  • Search Within Site
  • Find a Rep./Store
  • New Items (Just in)
  • Others in This Series
  • Most Popular / Best Sellers
  • Staff Picks
  • Special Sale Items
  • What's Cool

  • Go to Top of this page.
    Previous topic this page
    Next topic this page
  • Greeting/Introduction
  • Privacy Statement
  • Shop for Christmas
  • Buy / Place Order
  • See Shopping Cart
  • Checkout/Pay
  • Order Status / Availability
  • Return Item
  • Success Stories
  • Join us / Careers / Employment / Opportunities
  • About This Site / Website Credits / Awards
  • About Us / Our Story / Mission
  • Our People (Profile)
  • What We Do / Products / Showroom / Portfolio / Samples / Demos / The Proof
  • Our Customers / Clients / References
  • How We Work / Our Expertise / Process / Methodology
  • Our Advertisers
  • Our Sponsors
  • Our Affliates/Partners
  • Buzz / News
  • Links / Resources
  • Glossary of Terms
  • Industry Indexes
  • White Papers
  • Schedule/Timeline
  • Calendar
  • Play Music
  • View Videos
  • Play Games/Take Quiz

  • Go to Top of this page.
    Previous topic this page
    Next topic this page

    Set screen Menu Item Naming Strategies

      Here are some ideas for sounding more user-focused, active, and positive:

      To be more user-focused:

    • For Kids (For ... ) sounds more user focused than Children .
    • Order Status sounds more user focused than Account History.
    • How We Work sounds more useful than Our Expertise.

      To sound more active:

    • Leave a Message or Send a Message sounds more active than Message Board.
    • Pick a Gift sounds more active than Selections.
    • Buzz sounds more hip than News.
    • Powered by sounds more energetic than Website credits.

      To sound more positive:

    • Success Stories sounds more positive than Case Studies.

    Go to Top of this page.
    Previous topic this page
    Next topic this page

    Set screen Quality GUI Criteria

      Criteria Adjectives Pet Peeves


      Fast performing
    • Pages of Javascript
    • Rather than allowing a click on item for more info, you have to move cursor to a link.
    • No “skip intro” button
    • Can't read text that flys around
    • Usefulness

      Useful / Insipiring / Stimulating / Exciting / Effective


      Easy / Efficient / Concise / Unambigous / Understandable
    • After a user action, several items change
    • Text that runs across the whole page
    • Esthetics

      Cool / Innovative / Stylish / Attractive / Elegant


      Consistent and Secure / Trustworthy / Accurate
    • Menu items changing position on different screens
    • Thoroughness

      Complete / Rich / Depth and Breath


      Responsive / Automatic / Powerful


    Go to Top of this page.
    Previous topic this page
    Next topic this page

    Set screen Background Processes

    • Internal detection script to detect capabilities available with browser, such as presence of Macromedia Flash and Shockwave browser plug-ins.
    • Referrals, such as passing search words entered to 3rd party search sites.

    Go to Top of this page.
    Previous topic this page
    Next topic this page

    Set screen Usability

      A website external to this site Thomas Leonard's 10 most important components of an effective website.

      1. Great domain name. Something that people can easily remember, but not trite.
      2. Picture of you/customers/people humanize a site.
      3. Clean graphics that add depth/color.
      4. Useful content that really informs/stimulates people (not just a billboard or brochure).
      5. Opportunity to subscribe to a newsletter or broadcast immediately.
      6. Something to order or sign up for (free class, downloadable information, services, product).
      7. Feedback mechanism.
      8. Interactivity: A self test, poll, SOMETHING to involve the visitor.
      9. Links to related site. Help the visitor out!
      10. Contact information and a reason for people to contact you.

    Tom Davenport's "Eye Have It" article on the 10 principles to attract and keep customer attention.

    The Web Style Guide: Basic Design Principles for Creating Web Sites from Yale is an excellent tutorial.

    Larry Constantine's What Do Users Want? 12 page 297K PDF article on Usage Centered Design.

    Planning Your Web Site by Teena M. Stewart.

    webpage article EMMUS, the European MultiMedia Usability Service

    A website external to this site Flash Planet

    A website external to this site Flashforward2001 and Online Flash Film Festival

    A website external to this site Portfolio site XeoFreestyle

    Go to Top of this page.
    Previous topic this page
    Next topic this page

    Set screen User Requirements and How to Satisfy Them

     Functions — What it can do Example Technical Implementation Tools

    Greeting / Introduction

    customized to returning users
      The first page that a user sees. Many put their “Who we are” statement here.
    • Browser cookies (text file stored on user machine) to track what online advertisements a user has seen so that when a user revisits the site, the server can read the cookie to make sure the user is presented with ads they haven't seen before.

    Go to Top of this page.

    About Us / Mission

      Rather than make a big deal about “integrity” and other over-used words, it might be better to call your principles / philosophy a Manifesto, such as this oneA website external to this site

    Go to Top of this page.

    Easy but quick, secure sign-on/logon

    Go to Top of this page.


  • The symbology and size of these icons are appropriate:

  • To the right, a subway map is used as a metaphor for navigation. The green line is the mainline of introductory material. At transfer points, readers can choose to explore threads of material in greater detail.

  • Pier39 added adjectives to the choices on their site:
    • Sensational Shopping
    • Delectable Dining
    • Endless Entertainment
    • Exciting Events

    Congresswoman Jane Harman uses this floorplan on her website:

  • Go to Top of this page.

    Portfolio Navigation

    This is a static picture of a 3D geometric structure, the Navihedron. Built using a code library using Macromedia Flash interactive technology, you can click-drag items to rotate the structure. As an item is selected, other items recede and fade into the background.
    Go to Top of this page.

    How We Work / Our Expertise / Process / Methodology

    The Delor Group makes effective use of cogs to illustrate a sequence of steps. On mouseover, a shadow appears under that cog and text detailing the steps for it appears on another frame.
    . This Gantt chart from Tackett Barbaria Design conveys tasks that overlap each other over time. Their textual description of each step is great, too.
    . Mouseover fingertips, the related phase highlights on the upper right, the the circles in the hand also changes. Too distracting for me.

    The names of Thiel's processes are too cerebral for me:

  • Analyze
  • Visualize
  • Verbalize
  • Realize
  • . The process page on Ideo's website also highlights the flowchart at the same time that text and photos appear for a phase. Here, the circle is close enough to the mouseover hotspot to be noticed. But the pictures are so small that I'm frustrated at not being able to click on it for a bigger version.
    Go to Top of this page.


    Glossary of Words at design firm Sundberg-Ferar
      A Glossary is helpful as a backup to simplified proposals and other communications -- a bridge between people.

    Go to Top of this page.


    From the BBC World Service:
      This page contains an example of a working image map.

    Go to Top of this page.

    Checkout / Payment

    Accept credit cards (to a Merchant Account)

  • Paypal
  • Mining Co. article
  • MasterCard on SET

  • Go to Top of this page.

    Facility Floorplan / Tour

    opens an IPIX-enabled window when users click on each station on the floorplan.

    Students at this high school simply associated photos to a campus map

      IPIX and Apple's 3D viewer.

    Go to Top of this page.

    Search pages on the site

    Go to Top of this page.

    Surveys, Voting, Quizzes

    Some firms put up a poll with forced choices.

    Design firm Sundberg-Ferar hosts brainstorming sessions

    Hosted on external servers:
    • Webpoll (formerly and charges $4 per month if you don't want their ads and links with your survey. Their software has several formats for displaying results.

    Software on your own web server:

    • Perseus SurveySolutions Express
    • package.
    • Virtua's FastVote Java package is $149 per server.
    • AnyVote SSI server side includes is $10 shareware.
    • WebRespond is a Java 1.02 applet for conducting quizzes. They will give out their source code for $30.
    • Test Pilot Java server extension, originally written at Purdue, charges $495 for 500 participants.

    Go to Top of this page.

    Our People / Principals / Departments

    Go to Top of this page.

    User Forums

    Go to Top of this page.


    • Gossamer Forum software offers forums that are built template-based. It's SQL-driven and has powerful search capabilities.

    Go to Top of this page.

    email notifications

    • New Events, articles, industry news. Special Deals on Products/Tools, New Links.

    Go to Top of this page.

  • Users create their own pages

    Secure Server

    • SSL (Secure Socket Layer) servers (using HTTPS) by default run on TCP port 443 instead of the default port 80 for HTTP.
    • One option for low volume sites is to accept all orders on-line then manually process back-end processing.

    Go to Top of this page.

    Shop for Christmas

    On the left “Explore” panel on, special holiday items are highlighted:
  • Valentine Candies
  • Thanksgiving Flowers
  • Christmas Gifts

  • Go to Top of this page.


    • Electronic Data Interchange between companies.

    Go to Top of this page.

    Request User's Email

    • Teaser
    • Additional information after registration

    Go to Top of this page.

    Dynamic Banner Administration


    Identifying recent changes

    • Paint a red border for text which have recently been changed.
  • Fast Transaction Speed (Turnaround speed)
    • Use an IPP with a T3 connection to the Internet backbone!
    • Use ISAPI instead of CGI. Unlike CGI executables which are instantiated every time that they are called, ISAPI is fast because once an application is loaded into memory, it is not released —making subsequent calls quick because the operating system need not load the DLL again.
    • This also allows information about the application to span several requests. In technical terms, the state of an application is maintained across multiple calls in global variables protected with critical sections. This is usefully when you implement ODBC connection caching for additional speed. In comparison, CGI executables do not have a way of maintaining state across multiple requests.

    Go to Top of this page.

    Compatibility with browsers:

    • hardware platforms (PC, Mac, UNIX/Sun, Digital, AS/400, etc.)
    • PC operating systems (DOS 6.22, Win 3.1x, Windows 95, Windows 98, Windows NT, Windows 2000, Red Hat & Caldera Linux, OS/2 Warp, etc.)
    • Various VGA screen modes (Super VGA)
    • Mac operating systems (6, 7.0, 7.5, etc.)
    • Unix, DEC, and other operating systems

    Go to Top of this page.


    Go to Top of this page.



    Go to Top of this page.


    • Real Audio/Audio, .RAM (RealAudio Metafile) file for every RA Stream Jukebox
    • Macromedia Shockwave,
    • QuickTime Video,
    • MPEG video, etc.

    Go to Top of this page.

    Globalization (I18N/ L18N / Translation)


    Creating a Multi-lingual web site

    Considerations for Language Translation:

    • Language Strings in the user interface (menus, dialog boxes, and error messages)
    • Printed and online documentation

    Locale-specific settings:

    • Date/time formats (separators, order of day/month/year)
    • Number formats (decimal and thousand separators)
    • Currency formats (symbol and format)
    • Sort order and string comparison

    Building Worldwide Websites notes that “By localizing a site into six languages other than English (Japanese, German, French, Spanish, Portuguese, and Swedish), a site can reach 90% of the online population today.”

      Microsoft's Word List is a comprehensive set of words and phrases that either appear in the Microsoft Windows user interface or are used in describing key concepts of the operating system to users.

    • Free Translate performs automatic translations. It's not perfect, but it's free.
    • eTranslate claims to have the largest pool of web-based translators in the world.
    • Alta Vista's Search Engine from Systran searches words in several languages.
    • New York Times Babylon translate to Spanish , German , Japanese, French, English, Dutch, Italian, Portuguese, and Hebrew
    • Clever learn translates words between English and German.
    • Transparent Language, Inc. offers free translations at

    Go to Top of this page.

    Set screen GUI Navigation

    Portions ©Copyright 1996-2010 Wilson Mar. All rights reserved. | Privacy Policy |

    How I may help

    Send a message with your email client program

    Your rating of this page:
    Low High

    Your first name:

    Your family name:

    Your location (city, country):

    Your Email address: 

      Top of Page Go to top of page

    Thank you!