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

ugh

[Tumbleweed]

Tip #1: Ditch the background images. Solid colour backgrounds = better readability & faster loadtimes. Plus background images are SOOO 1997. :)

Tip #2: Hire a information architecture/usability/UI specialist or team. Worth the money, especially if you have tons of content.

Disclaimer: Yes, I'm a UI specialist.

I would offer (lots) more advice, but it's lunchtime and I'm friggin' hungry. Sorry.

Re:ugh

[BWJones]

Tip #1: Ditch the background images. Solid colour backgrounds = better readability & faster loadtimes. Plus background images are SOOO 1997. :)

This was the first thing that that is going away during the redesign. And I should mention, if I recall correctly, this sites origins go back to 1993 and it went online in shortly thereafter. :-)

Tip #2: Hire a information architecture/usability/UI specialist or team. Worth the money, especially if you have tons of content.

Well, here's the issue there, I am essentially running the site on the side with no real money for development. In fact, it is being hosted on a personally purchased old G3 iMac running OS X. Hows that for economy?

Disclaimer: Yes, I'm a UI specialist.

I would love to hear more input from you if you have the time.

Some quick criticisms

[Somnus]

You need an index.

Also, the table of contents looks like a sea of text. Make the chapter headings much, much larger than the section titles. You already did a good job with the "part" demarcations. This lets the reader see the material in a more hierarchal manner.

You might want to try page-by-section rather than page-by-chapter, and keep the sections short enough so the browser window needn't be scrolled. Powerpoint presentations follow the same rule. (Maybe, leave page-by-chapter as an option if the text is used for reference instead of initial exposure).

Leave references until the end of a part or until the end of the book -- they are not as critical in a textbook as they are in a paper.

Maybe forcibly use larger fonts -- not all users will be savvy enough to increase the size of their default fonts.

Your site is a little annoying with the big fat headline graphics and the blinking.

Bookmarks and glosses

[eXtro]

Any of the books that I actually use are full of book marks and added notes in the margin. For online books to really work for me I need to be able to continue doing this. Too often it means I end up printing the online book.

Add the ability to create an account. Logged in users get a personalized view of the material which they can add bookmarks to as well as a sidebar with their additional notes.

"online textbook" is practically an oxymoron

[TheSHAD0W]

I think you've got the wrong concept of what you want to do... While you can download textbooks off the net, usually they're meant either for printing out, or displaying on an e-book. But reading a textbook online, at least for me, usually results in a major eye-ache (something your particular readers will especially dislike).

I would recommend you use this little invention called hypertext to build an in-depth document. One way to arrange this would be to have a summary of a few pages, or even a few paragraphs, and then allow people to click on terms and be able to explore them in depth.

One website that's used this methodology with good results is Chilling Effects. I suggest you do a little exploring there.

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.

Get help from your colleagues

[dilger]

You're at U of Utah, right? Ask the folks in your English, Communication, and Computer Science departments if they have students or classes that need "real world" problems to solve. It could be independent studies, senior projects, whatever. You could benefit from a database, a well-designed templating system (server side includes plus style sheets), and some batch processing of images to decrease file size.

BTW, Nielsen's usability ideas are geared for e-commerce; take them with a grain of salt, since that's not what you're doing.

cbd.

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. :)