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."

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

Re:ugh

[BrokenHalo]

I guess it depends on the kind of textbook. There are probably many publishers who don't want books that are currently in print to be represented radically differently from the dead-tree version. Fortunately, the better ones don't really suffer much as a result of preparing them for presentation online.

A good selection of examples in my area (biotechnology and related disciplines) can be seen here [nih.gov] at PubMed [nih.gov], one of my favourite reference sites. Some of these are very expensive standard texts, and I have a

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.

Re:Some quick criticisms

[aridhol]

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

So you'd rather alienate those who do know how to increase their default font size.

Perhaps increase the font size, but allow the user's preferences to override them. CSS allows for this.

Also, make use of the <link> tag in page headers, to link to the index, table of contents, and previous/next pages. Some browsers, such as Mozilla, give access to these links in a navigation toolbar.

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.

Re:Bookmarks and glosses

[Flwyd]

To expand this idea, I think it would be really cool to underline, highlight, or otherwise make stand out individual lines. I don't have a good idea how to manage this technically, but the ability to quickly flip through a textbook and focus on highlighted material is quite helpful. User-definable stylesheets would allow people to use their own scheme for visually annotating text, e.g. larger text is important, green text is confusing. The challenge is storing where everyone's marked.

In fact, one reason

interactive highlighting

[Oculus Habent]

I think with huge amounts of effort, you could use JavaScript for highlighting or underlining - select the text you want and then press a key sequence that triggers a function - which would have to add something to a database. I think you could then turn around and re-create the highlighting by locating the text - perhaps by string position and length in the unaltered document as opposed to recording the full string - and then adding <span> tags with classes. This could even give you different color h

"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 [chillingeffects.org]. 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. [useit.com]

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! [useit.com])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 [useit.com].

Re:Okay, serious reply...

[ae0nflx]

I agree to a large extent with what you have to say, however there are a few things that I'd like to add/change.

It is okay to do things that break printing so long as you provide a version that is completely printer friendly as well. It is sometimes difficult to have a document that is 100% printer friendly as the main document, but it is a nice option to have

And for my number one pet peeve of all time, do not ever use animated gifs. It is the most annoying piece of "eye candy" there is.

One problem th

Re: Don't use PDF

[JCMay]

No, he mentions them quite readily here in this AlertBox column [useit.com].

I quote:

PDF is great for one thing and one thing only: printing documents. Paper is superior to computer screens in many ways, and users often prefer to print documents that are too long to easily read online.

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 tha

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 har

Re:Some comments.

[RV.eq.VFG]

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

I agree with your comments, however the website uses the browser's default fonts. In this case the font choice is up to the user. Of course it is a good idea to specify san-serif in the stylesheet for the online version and serif for the printable version.

ps

Don't forget to bear in mind the accessibility guidel

Re:Some comments.

[bcrowell]

It's my understanding that sans-serif fonts ... are easier to read on screen than serif fonts ... The reverse is true for printed matter. Very few people read an entire book off a computer screen, so it would actually make more sense to optimize for print. In any case, I believe it's a myth that serif fonts are more readable in print. The original studies that showed serif was more readable were done in unrealistic situations, like reading individual words. Printed sans serif is no more or less readable tha

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

Heavy linking and SVG

[dragon13]

The thing that frustrates me most about online information sources that were converted from print is that they usually have the TOC and maybe footnotes linked and everything else is just plain text. Every topic/field specific word and/or phrase should be linked in a ideal world so the closer you can get the better. I think the best scenario would be to get a definition for a word/phrase in the status bar (or tooltip popup if you want to go more dhtml heavy) and then clicking would take one to the relevant

very last post, I win again!

[Ruby+last+post]

Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net], Grumpy Watkins [uklinux.net],