Display

The visual display of text (and supporting graphics & images) on the screen is a major concern for this project.

It is completely intertwined with the ‘Interactive Text’ section. The size of type, it’s colour, font and how you can interact with it are not separable but for the sake of getting to grips with the same phenomena from different angles.

A provocative position is: It’s all just text on the screen.

TYPOGRAPHY & LAYOUT

Typography. Many have complained that technologies such as PDF are a travesty and show how typesetters have gotten control of the web by specifying type sizes etc. But even though interactivity is paramount, the type really should be easy on the eyes.
It has to look good - and the user had has got to be able to manipulate the page flexibly.
Correct typesetting depends on what language it is for. I am only concerned about English for this project, but it is still worth noting that the basic type on the screen we use today is not as efficient for all languages

"The ideal language for roman type is Latin, for which it was created. German texts contain long words and in the current orthography show accumulations of uppercase letters that are almost baroque; consequently, it is far more difficult to set a German text than an English one. Of all living languages, English gives the smoothest typographical image [in the roman typeface]. English needs few uppercase letters and no accents at all, and the words are short".
Tschichold, J. (1991)

These words were written by the eminent typographer Jan Tschichold in the '60s. Much has changed since then but not the central point of typography: Legibility. "Comfortable legibility is the absolute benchmark for all typography -- yet only an accomplished reader can properly judge legibility". Here he is mirroring Doug's notion of the trained user with the trained reader. "

To be able to read a primer, or indeed a newspaper, does not make anyone a judge; as a rule, both are readable, though barely. They are decipherable. Decipher ability and ideal legibility are opposites. Good legibility is a matter of combining a suitable script and an appropriate typesetting method. For perfect typography, an exhaustive knowledge of the historical development of the letters used in printing books is absolutely necessary. More valuable yet is a working knowledge of calligraphy."
Tschichold, J. (1991)

”The typography of most newspapers is decidedly backward. Lack of form destroys even the first signs of good taste and forestalls its development. Too lazy to think, many people read more newspapers than books [remember, this was written in the 40’s or 50’s, today the issue would probably be newspapers vs. TV!]. Small wonder, then, that typography as a whole is not evolving, and book typography is no exception. If a typesetter reads more newspapers than anything else, where would he acquire a knowledge of good taste in typography? Just as a person gets used to poor cuisine when nothing better is available and means of comparison are lacking, so many of today's readers have grown used to poor typography because they read more newspapers than books and thus kill time, as it is so succinctly termed. Since they aren't acquainted with better typography, they can't ask for it."
Tschichold, J. (1991)

Since his time, a revolution has of course taken place with electronic typesetting and then desktop publishing. Yet, his warnings ring true now not so much for the writer/publisher, but for the systems designer:

"Typography, even when poorly executed, can never be taken for granted; nor is it ever accidental. Indeed, beautifully typeset pages are always the result of long experience. Now and then they even attain the rank of great artistic achievement."
Tschichold, J. (1991)

On the importance of tradition in book typography: "Many buildings and everyday objects are unmistakable documents of the present. As building methods changed, so did architecture. As material and production methods changed, so did the shape of most tools and utensils. In these areas tradition has become meaningless; today's buildings and many of the things we use everyday have no tradition apart from the short span of a few decades."
Tschichold, J. (1991)

“The elements and form of a book and much other printed matter, however, are clearly derived from the past, even when the mass production causes millions of copies to be printed. The Roman gestalt of the written word irrevocably ties the education and culture of every single human being to the past, whether he is conscious of it or not. That we have to thank the Renaissance for today's printing type -- indeed, that the very typefaces used today are often Renaissance faces -- is either unknown or of no consequence to most people. The average man accepts letters as common and given symbols of communication."
Tschichold, J. (1991)

"All typography implies tradition and conventions. Tradtio derives from Latin trado, I hand over. Tradition means handing over, delivering up, legacy, education, guidance. Convention derives from convenio, to come together, and means agreement."
Tschichold, J. (1991)

"The form of our letters, the older handwriting and inscriptions as much as the cuttings in use today, reflects a convention that has slowly solidified., an agreement hardened in many battles. Even after the Renaissance several European countries retained broken, blackletter national scripts in opposition to roman, the obligatory type for all Latin material, yet even today, I hope, the last word in Fraktur has not been spoken."
Tschichold, J. (1991)

Note, Fraktur is the classical Germanic, script like typeface: myfonts.com/fonts/bitstream/fraktur/fraktur/ (2003)

“Apart from that, the roman miniscule (or lower case, is the smaller form of letters {in the Roman alphabet: a,b,c,...} - originally alphabets were written entirely in majuscule (capital) letters which were spaced between well-defined upper and lower bounds) has been our way of writing for hundreds of years. What followed was merely fashionable variations, here and there even deformations, of the noble basic form, but no improvement whatever. The punches of Claude Garamond, cut around 1530 in Paris, are simply unsurpassed in their clarity, readability and beauty. Garamond appeared on the scene at a time when the occidental book, as an object, cast off its medieval ponderousness and took up the form which today is still the best: the slender and upright rectangular body, comprising several folded stitched sheets or sewn at the back, in a cover whose protruding edges protect the trimmed pages."
Tschichold, J. (1991)

BOOKS

The section above, on typography in general, covers book typography. There are some aspects of books which are worth noting though. Books are all quite large and somewhat heavy - and as they are back-bound, not spiral-bound, which means they are usually held, meaning they are always physically interacted with.

MAGAZINES

Magazines are generally light and though they are often held, they don't have to be.
A survey of a few quality magazines reveals a common width of about 7-8 words and three columns per page.
• THE ECONOMIST is laid out in three columns, about 7 words wide and 100 lines long. There are frequent callouts, pictures (sometimes literally related to the article, sometimes just colour) and maps & illustrations. It features a heavier serif font.
• NEW SCIENTIST is also laid out in three columns about 7 words wide and about 90 lines long. There are even more photographic illustrations. New Scientist uses sans serif font for body text and often san-serif for call outs, headlines and alternative columns.
• MACUSER follows the same conventions though is a little wider, with about 8 or nine words per columns about 80 lines long. Even more illustrations, callouts and boxed-comments. It features a serif typeface for body text and Arial, sans-serif for all headlines.
• EDGE magazine, the computer games journal, also features three columns, though it's about 9 words long. Maybe 50 lines long - it could be longer but there is good use of white space. The typeface is the sans-serif Helvetica, set quite small.

NEWSPAPERS

Newspapers are light and large. They don't have to be held but if they are they require a bit of folding.
• THE HERALD TRIBUNE also uses three columns, but three columns per story, not three columns per page. It features two stories side by side often, so therefore has 6 columns per side. There are some aberrations, some articles which are only one, two or even more columns across though. The columns are sometimes longer, about 10 words wide and sometimes (for the editorial) only five wide. The typeface is all serif though.
• THE GUARDIAN uses different numbers of columns, but stays within 7 words wide. The typeface is serif, with bold sans-serif headlines
I spent quality time thinking about the similarities and differences between reading a newspaper and reading on a laptop. I thought about the large size of the newspaper, which gives it a large amount of space to put high quality text. But I realised as I was reading it that I often have to fold the newspaper - I interact with it! Even if it's on the table I have to turn a page, which is easy with a newspaper, but it takes effort. Often I read it while I am standing and that means holding it. Hmm... OK, at least a thumb would be holding it so why can't I have a button in the blog which allows the reader to quickly skim to the next blog post by only clicking on the mouse button? I mocked this up in the form of two arrows on the right (by the scroll bar - the traditional scroll control of the blog), one pointing up and one down. the down arrow, when clicked would advance to the next blog post and the up arrow would go back one post, allowing for rapid skimming. I discussed it with Ian, he seemed to approve. I therefore asked the crew if they could add it to the live system at some point. They did it in a day. The result is that the reader can point to one of these arrows (they are quite small so Fitts's Law (The time to acquire a target is a function of the distance to and size of the target)is a bit of an issue for the initial pointing) and leave the cursor there, which is really easy on a laptop using a tracked, as the mouse can't slip anywhere. Then it's just a matter of clicking the mouse button to skip ahead.

MOVING FROM PRINT TO DIGITAL DISPLAYS

Early digital displays were vector based (the electron beam from the back of the 'gun' drew the required shapes on the screen) and quite fast. These were followed by bitmapped displays which address the screen in a grid of dots rather than a space for drawing continuos vector lines.
The early Macintosh set a standard for screen resolutions of 72 dots per inch. Microsoft thought it would do this better and set the resolution higher, but didn't actually deliver higher resolution screens. The result is the difference in type sizes on Macs and PC's. That is just one of the issues we have facing us today.

THE COMPUTER SCREEN

A long standing complaint from readers is that computer screens are not nearly as high quality as paper. This is true, but not necessarily for very much longer:

“Acuity information is useful in determining what is needed to produce an adequate or optimal visual display. A modern high resolution monitor has about 40 pixels per cm. This translates to 40 cycles per degree at normal viewing distances. Given that the human eye has receptors packed into the fovea at roughly 180 per degree of visual angle, we can claim that in linear resolution, we are about a factor of four from having monitors that match the resolving power of the human retina in each direction. A 4000-x-4000-resolution monitor should be adequate for any conceivable visual task, leaving aside, for the moment, the problem of superacuities. Such a monitor would require 16 million pixels. The highest-resolution monitors that are currently available have 1920 x 1280 pixels, more than two million.”
Ware, C. (2002)

Antialiasing helps increase the perceived resolution without even requiring the extra pixels. The computer displays are not as bad as they were in the early 90’s and certainly not as bad as what they were in the eighties. It’s an exciting time dealing with pioneering issues of digital texts, now what the screen quality issue is fading into history!

COMPUTER TYPOGRAPHY

When laser printers entered the mainstream in the early 1990's the resolution was about 300 dots per inch. Computer monitors were about 72 dots per inch. Consequently a rule of thumb developed; type on the screen would have to be about twice the size on screen to be as legible as that on paper. This is still the case to a degree, but a problem is that type on the computer is described by pixels, so a computer with more than 72 dots per inch renders the type smaller than normal. This is one issue which will have to be resolved before monitor resolutions can become closer to human eye resolution.

WEB TYPOGRAPHY

No matter what references are used, some people will prefer sans-serif fonts such as Arial while others will prefer serifs, such as Times.
Size will be an issue for accessibility as well as generally reducing eye strain. This will differ between users and will also differ during a session; the reader may want to see a lot more text while skimming a document, even though it may be slightly uncomfortably small and maybe even larger than normal text when studying a specific section. This means that the user should be able to resize text, but some of it may be programmed in beforehand, to help the reader; there is no point making the reader switch manually when it's known beforehand the different size needs for different situations.
Consistent display of typography in web browsers is a problem as old as browsers themselves. Instead of WYSIWYG (what you see is what you get) which has been with us as along as we've had a graphical user interface (XEROX PARC). By with us I mean it has been what's been worked towards and by the last part of the acronym 'what you get' it's meant that it prints out the same as it looks on the screen. The web is analogous to printing as different browsers and operating systems interpret the information of how the document should be displayed in different ways, making Roger Pring refer to WYSIWTS (what you send is what they see) in 'www.type' (Weidenfeld & Nicholson, 1999) to illustrate the issue of different renderings of web pages in different environments.
Veruschka Gotz in 'colour & type for the screen' (Totovision 1998) recommends about 35-50 letters per line for optimum legibility. As far as the size of the type Gotz suggests 14 point Geneva for body text and 20 point for headlines. For line spacing, presents scenarios suggesting it should be about 150% or even greater, such as when the lines are wider than the regular 50 letters.

“Colour depth getting deeper:
• 68% of screens are <= in 800x600 pixels.
• Only 11% of current users (1999) use 256 colours."
Jakob Nielsen in Designing Web Usability http://www.webreference.com/new/nielsenbook.html

TYPEFACE

The choices for typefaces were Times, Times New Roman and Georgia. These three are shortlisted as they are available on both the Mac and Windows. The choice of serif fonts is based on my subjective desire to give the work a feel more or paper and quality rather than the more sterile look of computer typography. Sans serif (Helvetica) will be used for headings.
A review of quality web site typography reveal a wide variety of type choices. It has to be emphasised that these 'readings' were on the target system for the blog; Safari on MacOS X.

blogs

Amongst the bloggers, there is a good range in choices.
• DAVE WINER (early and prominent blogger) uses Times Regular at 16 points on his www.scripting.com blog.
• RUSSELL BEATIE uses Georgia 16 points for body text. russellbeattie.com/notebook
• DAVE HYATT, one of the Safari programmers, uses Lucida Grande, a sans-serif font, at 12 points on his blog at mozillazine.org/weblogs/hyatt

news sites

News sites proved to be simple and primarily sans-serif.
• BBC uses Verdana (a sans-serif) size 13.
Sample: bbc.co.uk/1/hi/world/middle_east/3165737.stm
• CNN uses Arial regular 12 points.
Sample: cnn.com/2003/WORLD/meast/08/19/sprj.irq.main/index.html
• THE INTERNATIONAL HERALD TRIBUNE uses a unique system where the user can decide on the type face directly from the page (of course browsers allow for customisation, but that is outside of the scope of this system) as well as the layout; alternating between one and 3 columns. The typeface is also Arial, though smaller than CNN, at a mere 9 points.
Sample: http://www.iht.com/articles/107000.html


macintosh/windows

On the font technology and Mac/Windows relationship:

“The primary font system for Windows has been the TrueType system (since version 3.1), licensed from Apple. "Working with Monotype, the Microsoft Typography Group produced fine TrueType versions of Arial, Times New Roman and Courier New, tuned to be extremely legible on the screen. Since then these core fonts have been developed to cover more and more of the world's languages. In the mid-1990s under Robert Norton a program of truly new type designs was begun, using TrueType technology to render faithfully the bitmaps and outlines designed by Matthew Carter (Verdana, Georgia, Tahoma) and by in-house designer Vincent Connare (Trebuchet, Comic Sans)."
http://www.myfonts.com/foundry/microsoft/ (2003)

Unfortunately, some great choices like Adobe Garamond (designed by Robert Slimbach) are not an option as the user will not be expected to purchase any special fonts - only what is available on their computers can be considered.

With background from myfonts.com, a few comments on the main typefaces being considered:

• TIMES ROMAN was designed by Stanley Morison and Victor Lardent. Designed 1931-1935. The font was drawn by Victor Lardent for The Times, London under Stanley Morison’s direction. It has come to light that it may be Starling Burgess who actually designed the font. Starling Burges was a yacht designer and builder, airplane designer and experimental car designer.
• TIMES NEW ROMAN was designed by: Stanley Morison and Victor Lardent (and Starling Burgess?) based on Times Roman.
• GEORGIA was designed by Matthew Carter who also designed Verdana , both for Microsoft. These fonts are tuned to be highly legible even at very small sizes on the screen.
TYPE TESTS FOR HYPERBLOG

I put together a test page showing a sample blog entry with the three main fonts. It is available at www.Liquid Information.org/typetest.html and in screenshot form: www.Liquid Information.org/typetest.gif - which look a lot clearer than this small print:

*

It is clear to me that Times New Roman wins the legibility and elegance vs. size battle.
The same test showed the elegance of Helvetica for headings. This is why it will be the type for dates, though bold and grey.


css

Layout of the body type will be enhanced through CSS (Cascading Style sheets, which allow for further control than what HTML allows), giving a much greater line height to increase legibility. To test various heights, three pages were built: blog-type-layout-100.html for a regular height, blog-type-layout-120.html for 120% line height, blog-type-layout-150.html for 150% line height and blog-type-layout-200.html for a 200% taller line height layout.
This screenshot shows the different versions. The outer extremes quickly lost their appeal. The 120% and 150% were more difficult to choose between so I put together a screen shot of them side by side, to measure the easy of which the eye can wrap around a line. In my mind the 150% makes it a little bit tougher to wrap.

*


The final (basic) layout then becomes: Times New Roman, 120% line height with date headings grey, all caps Helvetica with one blockquote indent:

*


PDF TYPOGRAPHY

Jakob Nielsen 's Alertbox:

"Users get lost inside PDF files, which are typically big, linear text blobs that are optimised for print and unpleasant to read and navigate online. PDF is good for printing, but that's it. Don't use it for online presentation."
useit.com/alertbox/20030714.html (2003)

LAYOUT

The layout of the screen brings with it a whole host of issues, such as having a table of contents available, the display of controls and other view specification controls and so on.
For this project I am initially concentrating on Macintosh users with a minimum screen size of 1152 by 768 using Apple's Safari browser. Windows users and Explorer users are not to be left without access, but within the constraints of the project the specifics of layout will be optimised for this one platform and browser combination.

COLOUR

Colour cannot be applied willy-nilly, basic colour theory and psychology needs to be applied.

“Colour is another key component of graphic design for effective human-computer-interaction. The appropriate use of colour is difficult. Our reactions to colour result from a complex set of physiological, perceptual, and cognitive phenomena...”
Baecker, R. M., Grudin, J., Buxton, W. A. S. and Greenberg, S. (1995, second edition)

Since this is somewhat beyond the scope of the basic project, only simple coders will be used, colour will not be employed as the single conveyor of information.
The exception to this is the colour of links.

LINKS COLOUR

Jakob Nielsen puts links in three different categories in his book on web design ‘Designing Web Usability’:
• Structural Navigation Links (home page).
• Associative Links (usually underlined words pointing to other pages with associated information).
• ‘See Also’ Lists of additional references.

The HyperBlog has three types of links:
• Menu (on the left hand side, to allow for quick access to specific posts) which can be considered a type of Structural Navigation Link.
• Associative Links.
• Command Links (to add comments and to copy URLs etc.) which have hard brackets to make them identifiable.

The discussion here focuses on the Associative Links. Jakob Nielsen does not seem interested in the location of links in terms of what colour they should be. He recommends the standard blue link colour everywhere. With the HyperBlog the links are in very different locations. The Menu links are on the left and look like a menu so they are greyed back to be visible but interfering with the main text.

My own types of links (of all categories) on my own web sites (liquidinformation.org, invisiblerevolution.net, appleblunders.com) are slightly greyed and show underlines when the mouse points ot the links. I have discussed the choices with friends and one side of the issue is David Mery's argument that you shouldn't have to search for the links, it should be apparent where they are. Ian Fagg however, puts my own view succinctly; if what is behind the link is so important, why isn't it included in the document? In other words, don't make it hard to find the link but don't make it too intrusive for the reader who is studying the document. This is not the standard link formatting so I did a survey to find out why there is such a difference between subtle links and loud ones.

Corporate computer company:
• APPLE uses blue, ‘standard’ coloured links.
Sample: http://www.apple.com
• DELL also uses blue, ‘standard’ coloured links.
Sample: http://www.dell.com
• MICROSOFT uses the blue, ‘standard’ coloured links.
Sample: http://www.microsoft.com

Rumour Sites/Special Interest Sites (Link heavy):
• MACRUMORS features strong blue links.
Sample: www.macrumors.com
• POWERPAGE also features strong blue links.
Sample: www.powerpage.org
• THINKSECRET uses dark red links.
Sample: www.thinksecret.com
• WEBLOGS has brighter blue links.
Sample: www.weblogs.com
• XML.COM is also of the blue persuasion.
Sample: www.xml.com

Academic Sites:
• UCL uses blue with a bit of red in it (light purple you could call it) for headlines, making it a bit confusing. Links are blue with no underline, until mouse overed.
Sample: www.ucl.ac.uk/
• UCLA uses grey text and grey links with double colon to indicate link in headlines, like this: :: Link. Articles contain some links in blue, some sidebars in grey and light blue headlines which could be confusing, but the layout helps clarify what’s what.
Sample: www.ucla.edu/
• HARVARD LAW uses dark red links, which highlight when mouse-overed.
Sample: http://blogs.law.harvard.edu/tech/rss

News Sites:
• INTERNATIONAL HERALD TRIBUNE uses blue links, but their articles do not feature links in the text.
Sample: http://www.iht.com/articles/111276.html
• BBC works much the same as the IHT, with no links in the articles and blue links in sidebars.
Sample: http://news.bbc.co.uk/1/hi/uk_politics/3137672.stm
• CNN uses blue links in articles and sometimes does actually include links in the text, in brackets.
Sample: http://edition.cnn.com/2003/WORLD/meast/09/25/sprj.irq.main/index.html


Blogs:
• RUSSELL BEATTIE has the standard, strong blue links.
Sample: http://www.russellbeattie.com/
• REBECCA BLOOD is also of the blue persuasion.
www.rebeccablood.netwww.rebeccablood.net
• DAVE HYATT Dave’s blog is also blue linked
Sample: http://weblogs.mozillazine.org/hyatt/archives/2003_08.html#003963

What comes out of this survey is that pages which act as portals or overviews, work well when the links are clear and pre-eminent. Pages which invite contemplation (digestion) are often devoid of links, apart from links in sidebars.

The BCC main page is heavy with many Structural links:

*

An article page on The International Herald Tribune. It is almost completely without Associative links:
*

Therefore I have decided to make a distinction between navigation points and in-text links. In-text links (Associative Links) will be non-underlined and not blue. They are only one way to navigate, as discussed in the ‘5D: Interactivity’ section, and will appear slightly lighter than the regular text, to facilitate smoother reading. The links will be made apparent by surrounding text, such as little hints like prefacing the word which is a link with the standard ‘www’.


3D: CONSIDERING THE THIRD DIMENSION

"What Can We Computer Graphicists Do? The magic of graphics, backed by megaflops of computer power, does indeed give us a creative medium of a totally new kind. We can subcreate worlds that work by their own laws; we can immerse ourselves in these new worlds in ways that occasionally fool the mind. These worlds can show us new truth from our own world, through scientific modelling and visualisation. They can show us new excellence, new beauty, flowing directly from our imaginations."
Brooks, Jr. P. (1996)

4d: TIME

Time is a dimension worthy of a critical look. Can animations help is a question worth asking, but for the time and cost of this project, it had to be scoped out.

response times

Jakob Nielsen in Designing Web Usability (2000): Usability studies have shown that fast response times are the most important design criterion for Web pages. Speed is paramount. Here's what usability studies have shown for various response times:

<.1 second = instantaneous
< 1 sec. = uninterrupted flow through an information space
< 10 seconds = limit to keep users attention on the dialogue.

Fast pages. Ideally you want a 1 second response time for maximum "flow" (5 KB page at 56 Kbps). Realistically you want to shoot for < 10 second response time (< 34 KB / page). For pages > 34 KB the user "bailout rate" increases (though Dr. Nielsen recommends 20-30K max in his interview).