Slashdot Mirror

← Back to Stories (view on slashdot.org)

Representing Online Textbooks?

Posted by Cliff on from the on-the-presentation-of-information dept.

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

23 comments

  1. Answer by Anonymous Coward · · Score: 0

    Represent textbooks online. Problem solved.

  2. ugh by Tumbleweed · · Score: 4, Funny

    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.

    1. Re:ugh by BWJones · · Score: 2, Interesting

      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.

      --
      Visit Jonesblog and say hello.
    2. Re:ugh by BrokenHalo · · Score: 1
      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 at PubMed, one of my favourite reference sites. Some of these are very expensive standard texts, and I have actually forked out real dollars for hard copy as a result of seeing them.

      I still find the printed page easier to read than the screen.

  3. Yo! by JCMay · · Score: 0, Redundant

    Yo! Yo! Yo!

    73x7b00kz b3 r3pr353n71n9 1n 7h3 h0wwz4h!

    1. Re:Yo! by Anonymous Coward · · Score: 0

      How did the third post in this topic get moderated as "redundant?" I could believe "offtopic" or even "funny," but I don't understand "redundant."

  4. Some quick criticisms by Somnus · · Score: 2, Insightful

    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.

    1. Re:Some quick criticisms by aridhol · · Score: 1
      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.

      --
      I can't say that I don't give a fuck. I've just run out of fuck to give.
  5. Bookmarks and glosses by eXtro · · Score: 2, Interesting

    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.

    --

    Chris Kuivenhoven is a thief, beware

    1. Re:Bookmarks and glosses by Flwyd · · Score: 1

      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 I like used textbooks (aside from their lower price tag) is that someone has already highlighted the important bits. Sharing bookmarks, margin notes, and highlighting between study partners would be neat (but also possibly a mess).

      --
      Ceci n'est pas une signature.
  6. "online textbook" is practically an oxymoron by TheSHAD0W · · Score: 2, Insightful

    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.

  7. Okay, serious reply... by JCMay · · Score: 3, Informative

    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.

    1. Re:Okay, serious reply... by ae0nflx · · Score: 1

      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 that I have found is that when you wrap text around a picture, the print compatibility goes way way way down hill.

      Oh, One thing that I find really nice, is to include animations (good quality animations) that really help to explain topics. But use them sparingly. It can most certainly help to cover difficult topics, but keep them in portable code and preferably in on a seperate page that is directly linked.

      Oh, and give me a back massage while I'm reading the text. That's about it.

  8. Get help from your colleagues by dilger · · Score: 2, Insightful

    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.

  9. Some comments. by attaboy · · Score: 2, Informative

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

    --
    The facts have a liberal bias. --The Daily Show
    1. Re:Some comments. by RV.eq.VFG · · Score: 1

      > - 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 guidelines http://www.w3.org/WAI/GL/

    2. Re:Some comments. by bcrowell · · Score: 1

      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 than printed serif, when you're reading real text.

      --
      Find free books.
  10. A few thoughts by Oculus+Habent · · Score: 4, Informative
    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. :)
    --
    That what was all this school was for... to teach us how to solve our own problems. -- janeowit
  11. Re: Don't use PDF by Anonymous Coward · · Score: 0

    PDF or PS is still preferable in many situations which Jakob Nielsen conveniently failed to mention. Making a blanket statement like "Don't use PDF" is simply naive.

  12. Re: Don't use PDF by JCMay · · Score: 1
    No, he mentions them quite readily here in this AlertBox column.

    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.


  13. interactive highlighting by Oculus+Habent · · Score: 1

    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 tags with classes. This could even give you different color highlights.

    Bookmarks could function on a similar idea - insert an element like a table that would be left- or right-aligned with an anchor, a label if desired, and a noticable background color.

    Margin notes might be best as little icons indicating a note that makes a hidden <div> appear with the note in it.

    I don't know how much it would chew on a server, or how difficult it would be to create. Last I knew the JavaScript for document control - selections, specifically - is entirely different for IE and Mozilla, and I couldn't even hazard a guess at other browsers.

    --
    That what was all this school was for... to teach us how to solve our own problems. -- janeowit
  14. Heavy linking and SVG by dragon13 · · Score: 1

    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 section on that word/phrase if one exists otherwise it would take one to a more extensive term definition followed by links to other or related info (probably offsite links mostly). Of course scenarios like this only get really viable when you're running a database driven website (maintaining this kind of heavy linking in static pages gets ridiculous real quick) which may or may not be an option.

    Another suggestion is to look at SVG for your non-photo images, they can become especially interesting if you have the relevant data in a database and generate the images on the fly.

    Also, I agree with some of the other posters in that one should have an online friendly version and a print friendly version (implemented through carefully formated html or pdf, etc) rather than trying to do both or cater to just one. And tasteful use of frames can help provide easier linking to the TOC from every page.

  15. very last post, I win again! by Ruby+last+post · · Score: 1

    Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins, Grumpy Watkins,

    --
    Ruby Sleeps