Usability Institue Logo- A bolt that can be fastened with any of 4 tools
Reducing Training to Its Sensible Minimum: Zero...
Inexpensive, Independent Usability Consulting by Jack Bellis
Home Page- List of All Content Home Page- All content, in date order Resources: page describing tools you can use Morsels: just our short articles and blurbs Just our Before&After Articles Just our Before&After Articles About: details on who I am and what I do Address, phone, number,  and so on

Website Review of

This is a quick usabilty review of The Vine, a Bible site. The image below links to an enlarged version in which I've made only one change... I extended the graphic of the vine branch so that it spans the full width of the page. This is to answer one of my observations, #10 in the first list, distinguishing the home page from others.


Congratulations! This is a free usability review from "Usability" refers to how easy and effective it is to use a Web site. Although it involves how a site looks (graphic artwork), it is primarily concerned with how a site works, what you click on, what happens, and whether the site does its job. Perhaps this review is all you need to improve your site. If that's the case, great. Please mention if you talk with others who need help with their site.

The following three sections provide a general analysis of your website from a relatively quick review. Although Web design is still perceived as a highly creative endeavor, there are many aspects of it that call for standardization and compliance with widely established conventions. Implementing even a few of the ideas below can really improve a site.


  Part 1: Content Basics
    This first section is intended for typical public web sites (for products and corporate information), but also applies for the most part to intranets and software applications that run in a browser. We've been advocating many of these ideas—in the context of general software—since our 1997 book, Computers Stink, but they've been beautifully enumerated for WWW purposes in Steve Krug's book, "Don't Make Me Think."
      Click for explanation State of the Art, a Model for OthersGreat Work!Does the JobI Can HelpUndetermined/Not ExactlyNot Applicable
Hover for explanation
  1. Logo in top left, linked to home Does the Job Yes. But unlink it on the home page itself.
  2. Tagline Does the Job Yes. "The Word for Today - FREE Daily Bible Reading"
  3. Welcome blurb Does the Job Yes, second column below subscribe.
  4. Plain wording Does the Job



Although not the specific point of this heuristic, the feature called HyperWord could use a rollover explanation: "Turns all key terms into links so you can click them to do a search on the term." A technique gaining popularity is to use a dashed underline to indicate rollover links.

  5. No 'happy talk' Does the Job Yes
  6. Concise wording Does the Job Yes
  7. Visited pages are distinguished by link color-coding Does the Job Yes
  8. "Utilities" are easy to find Does the Job Yes
  9. Search on all pages, with box and button Does the Job Yes
  10. "You Are Here" indicator I Can Help

No. Early in the review, this looks like the only theme where some minor improvement could help... the general "where am I issue." The site hardly suffers from this issue, though, due to the nature of the overall structure: a few support pages, and thousands (?) of 'articles.'


I'll also have to consider adding a heuristic that says: "Home page is easy to distinguish." This site is so good at maintaining a simple consistency that it needs something subtle but distinct that says "I'm the home page, I'm different." On I realized I had to make the resources panel a different color to make that point. Here's one idea for distinguishing the home page, extending the graphic of the vine branch so that it spans the full width of the page.

  11. Breadcrumbs' as links Not Applicable Probably no point in breadcrumbs, related to comments above, for You Are Here indicator. Do we call such a site a "long tail" structure, borrowing on the popular phrase now used for many phenomena wherein the stragglers comprise the greater volume than the core items???



Students and Professional Developers:
Designing a serious software application in a browser? Don't spend time and money designing the look and styles... there's more than you think involved! Instead, use GenericUI, shareware CSS and artwork that's free for non-commercial use and indefinite trial use.


Part 2: Visual Design: Fonts, Colors, Layout, Basic Interaction Design, and Accessibility
As we read in a graphic artist's ad, "Technology makes it work but art makes it sell," and you should take heed. We're not graphic artists here at Uinst, but we know good art when we see it and the common denominators that separate good pages from bad are clear. Look at the top sites and you'll see they spell out the following criteria.
  Click for explanation State of the Art, a Model for OthersGreat Work!Does the JobI Can HelpUndetermined/Not ExactlyNot Applicable
Hover for explanation

Sans-serif fonts

Does the Job Yes

Appropriate background color

Does the Job Yes
Appropriate color hues Does the Job Yes
Visual representation of the information hierarchy Undetermined/Not Exactly A very slight opportunity exists, perhaps on the home page and the 6 (?) key functional pages, to show more graphically that the site has 6 key pages. Might be a waste of time, considering the genuine visitor behavior. If there were 20 functional pages, would be more of a consideration.
Conservative quantity of colors Does the Job Yes
Text sizes are "relative" I Can Help

No. Relative font sizes are primarily a benefit to older folks who can thereby enlarge the text themselves.


I'm going to escalate this omission as an important thing to improve. Maybe it's because I associate spirituality as one form of wisdom, which necessarily increases with age and therefore the site should do everything possible to attend to older visitors.

Anti-aliased graphics Does the Job Yes
Graphics' file size doesn't slow navigation Does the Job Yes
"Alt tags" used well Not Applicable Not really a factor
Links don't just say "Click Here" Does the Job Yes.
A style sheet (CSS) is used Does the Job Yes. <link rel="stylesheet" href="/css/thevine.css">


Do your hands ache after a day at the keyboard??? This review sponsored by ...


Part 3: Genuine Value: Useful Content & Critical Interaction Design

And now for the hard part. If all of good Web design were as clear-cut as parts 1 & 2, above, you wouldn't need much judgment and there would be a lot more good sites. But the easier the decisions are, the less significant the thinking and effort behind them... and the easier it would be to provide useful content. This section is where you make or break your rapport with the visitor. If you provide real value and give folks enough tools to get to it, they will push past the basic omissions and ignore even the most amateurish art.
  Click for explanation State of the Art, a Model for OthersGreat Work!Does the JobI Can HelpUndetermined/Not ExactlyNot Applicable
Hover for explanation
1. Questions are answered State of the Art, a Model for Others Well, duh. I presume that the publisher's point of view would be... "If they're not answered here, they're not answered anywhere." (Hmm, I changed the word to "publisher's" after originally writing "sponsor's." I guess in this case, though, the site owner really should be called the "sponsor" because the publisher is, um, the Almighty?
2. Search results get the job done Great Work! Definitely. And the site has this great feature called hyperWord that links every keyword so that clicking it invokes a search on it!
3. Effective 'click tree' Does the Job Yes
4. Conceptual flow from upper left to lower right Does the Job Yes
5. Simple, outline-like site map I Can Help No. This should be corrected. For the 'long tail" simply add a heading and sentence: Bible Excerpts: Thousands of excerpts...
6. Primary navigation is obvious Great Work! Yes
7. Secondary navigation is obvious Does the Job Not applicable in intended sense of heavily structured sites, but definitely compliant with inline links and structured cross-refs.
8. Contact information easily accessible State of the Art, a Model for Others Definitely... on the left all the time.
9. Links are clear Great Work! Yes
10. Intro panel or animation not excessive Does the Job Yes
11. Graphics used only for core message Does the Job Yes


Summation & Next Steps

Overall Rating: Strives / Survives / Great Work! Thrives

Excellent site, nearly a model of Neilsen-esque simplicity. (Jakob Neilsen is the world's premier usability pundit. He has risen to prominence on hot air supplied not by himself but by legions of detractors who feel that his shrill trumpeting for simplicity implies the banishment of all aesthetics. But the straw man they're seeing is simply a reflected glare from the rose coloring of their glasses, not from Neilsen's vision.) Other than relative text sizes, the few usability observations are probably inconsequential... the navigation might not be as perfect as needed for an ecommerce site, but the main thing people are buying here is hope.

(The publisher raised concerns about the subscription process but I found no serious flaws in it.)


  1. Add a site map.
  2. Make text sizes relative.
  3. Distinguish the home page. One idea is extending the branch graphic across the page.
  4. Long-term, consider improving the visual depiction, on the home page, of the major functional area (pages), perhaps with colored blocks and a little more white space.
  5. Add a rollover explanation of hyperword. (See above.)

Hope this helps and let me know what you think,
Jack Bellis,


"My interest in usability arose from the pain and tears of patching the wounds of suffering interface designs with the inadequate bandages of help files and user guides." — Daniel Cohen

2002,   All Rights Reserved
Any and all content may be reused without prior consent if you simply acknowledge the source,