Representing Online Textbooks?

BWJones asks: "How does one represent online texts to best convey information to the reader as there are a number of issues related to online textbook reading and interpretation that are quite different from reading a standard textbook. We have a site dedicated to retinal vision education that went online a number of years ago and is due for a major rewrite/re-creation. This site was one of the original online textbooks and its design attempted to be of use in the early graphical navigation of the web. However, as the content has increased and will continue to do so, navigation has become more cumbersome. I am looking for suggestions to increase its usability while content increases and will entertain all ideas. I am loathe however, to make the browsing requirements too steep as there are folks from all over the world who access this site (about 30k/hits per day) and they do not always have the latest in computer technology."

Comments

Okay, serious reply...

[JCMay]

1) No matter how fun or exciting your text content is, keep site design simple.

2) Personally I like the idea of a navigation bar on the side that reminds the reader where they are in the text, like the Outline view in Acrobat Reader (but don't use PDF!)or the way Google Groups shows threads.

3) Don't do things that break printing. If people need to print out a section, it should print properly. I can't tell you how many times I curse at web page designers when I print out a page to refer to later and the text flows off the right edge of the page!

4) Keep blocks of text small; I am of the opinion that scrolling through large blocks of text on-screen is mentally tiring and turns readers off. By the same token, don't do things that slow page loading down for dialup users!

5) If you include figures or pictures, use inlined thumbnails that load quickly, but are also links to full-sized (and printable?) images. Wrap text around the images in a way that is eye-pleasing and makes sense. Excess white space looks as unprofessional as too little.

6) Avoid flashy things that add nothing to the information you're trying to convey.

7) Read anything written on the subject by Jakob Nielson.

Some comments.

[attaboy]

- Background images decrease readability due to visual interference.

- It's my understanding that sans-serif fonts (i.e. Arial, Verdana) are easier to read on screen than serif fonts (like the one you are currently using). The reverse is true for printed matter.

- The full text of the caption doesn't need to be a link. That's almost unreadable at the font size on blue background, with the underlining increasing interference.

- Having your sub-contents for each chapter in a blob of text makes it harder to scan. Vertical/bulleted organization is easier.

And some suggestions:

White or yellow text on a black or dark blue background, or black or navy text on a white background have the highest readability. If you do light on dark, make sure you have a printable version because some default browser settings don't print backgrounds, leaving you with blank printed pages(!)

Use cascading style sheets, allowing you to mess around liberally with formatting until you're happy. This also makes it easy to do a printable version.

Having the Table of Contents on a home page, with each chapter in a sub page is nice if you are reading through the book sequentially, but makes it slightly more cumbersome to jump around. Some other sites that present information like this use frames and have the ToC running down the left side of the screen. This may or may not include ways to expand/collapse submenus.

I would include the Home/Back/Forward buttons at the top and bottom, but the ones at the bottom may go best ABOVE the references, rather than below. Far fewer people are going to be interested in the references than in the main text.

A few thoughts

[Oculus Habent]

Well, this turned out to be longer than I anticipated, but here are my thoughts on a re-design:

1. Consider changing the color of the links. Buy-Me Blue is very harsh, especially in large concentrations, such as the ToC.
2. Clean up the HTML. Replace <font> tags with Stylesheets. You aren't likely to trim out much of your audience by switching to them at this point.
3. Stylesheets, stylesheets, stylesheets. Define tags whenever possible, and use classes to clean it all up. Have the pages all link to a single stylesheet for ease of updates.
4. You might seriously consider Dreamweaver or something similar for easy control of site updates.
5. Consider switching to a sans-serif font. For most people they tend to be easier to read.
6. As much as it pains me to use tables like this, create classes of tables, and make one of them for your "figures". Use the <caption> tag for the text, and:
   • Put the caption below the image
   • Optionally insert breaks in the caption
   • Put the images to the left or right and allow the text to flow around them
   This won't work on all of the pages. KallDepth.html for example. You may also (again a horrible bastardization of tables) place the sections of a page in a table, so the images don't run out beyond them.
7. Put ALT text on your images. It can (And should, probably) be the same as the caption.
8. Get rid of the link borders on images. They don't add anything visually, and if people can't identify the change of cursor for a link by now, they are in trouble.
9. Get rid of extra underlines (titles on pages). They confuse some people, and, personally, I don't think they look good.
10. Replace bracketed links (the sections in a page) with links separated by pipes (|). Also, make sure the link is closed before the space, so you don't get the trailing underline. It took me a moment to realize the links were sections, but I'm not sure how to better identify them.
11. Replace images containing text, back and forward buttons, etc. with text. Make the "Start Chapter" into "Top" links. Use stylesheet classes to colorize them if you like.
12. Shrink the hell out of the bottom text on the main page.
13. Get rid of anything flashing, unless it's a demonstration.
14. Consider some way of more clearly separating sections in the page. An <hr> may be ok, but I'd test it on a focus group before fully implementing it.
15. Remove the words "CLICK HERE" from all links -there's always another way to say it.
16. You can probably remove the image and animation sizes from their captions. It's not so important as it was 5 years ago.
17. Properly Capitalize section headings and links to them. They are titles, and should be treated as such.
18. Don't bold the entire ToC. Only the major headings, or not at all, if you prefer.
19. Different sizes of text on the ToC would make it much more readable.
20. If you can, change some of the section titles. "ON and OFF center pathways and center surround organization of the retina are initiated at the photoreceptor to bipolar and horizontal cell contacts in the outer plexiform layer." is a sentence, not a title. It even has a period.
21. This will also clean up the ToC and the section headings.
22. Place the Table of Contents on a page that is not the index or place an anchor at the start of the ToC so the links don't go to the huge image at the top. I think it would be best to place the ToC on another page, as the index can become a Welcome page.
23. In the Table of Contents, put the bylines in a smaller font below the Part Title.
24. I think it would be a lot of work, but a listing with links of all of the charts and figures would be good.
25. Get rid of or change the Readme First. It's so old it's funny. :)