Thursday, November 29, 2007

Legible Web

Everyone talks about the symantic web, AJAX, Content Management Systems, Flash, and various other ways to fancy-up your website. And developers are told time and again about avoiding things that take away from the simple usability (and legibility) of the sites they create. But not everyone listens, and a significant proportion of the web is just illegible. These websites are designed for a different device, screen size, browser, or just not designed properly at all (animated background gifs, anyone?). So we end up trying to read things that are too small, too wide, illegible against the background or in a stupid font like Comic Sans.

So how about a browser extension that allowed you to choose to make that body of text legible? One that used all the well-researched legibility advice as defaults (alphabet and a half width, ragged right, larger fonts, better contrast) and allow users to tweak their settings.

The interface could be fairly simple - an inoffensive button similar to that in AdBlock, which would toggle the functionality for specific boxes, and the option to have it globally on. Functionality would revolve around undoing a lot of the things designers do (mess up fonts, colours, link underlining, silly backgrounds, etc) and set things that designers are unaware of (better line lengths of 30-50 characters, left justified text, paragraph indenting, greater leading, black on cream text).

Some users need even greater legibility through vision loss, so for them a mode with a different set of default values would be worthwhile. If everything is customisable, then few will find it doesn't help them in some way, but having the best set of defaults would be key.

Some pages that give legibility information: Web Style Guide, Wikipedia. As a side note, it seems that readability means something else - the complexity of the text itself, rather than its presentation.

Thursday, October 25, 2007

Improving browsers

The Mighty Webpage: Still a Document
The humble webpage has been through many reformations, survived the attack of technologies that sought to remake it in their own image; flash, dynamic HTML, page transitions, animated gifs, the list is unlikely to end. All these have improved the basic webpage, but only slightly. The underlying formula has remained. It has been pointed out that nobody uses the navigation systems employed by websites, however pretty or inviting. We hunt for the piece of information we desire, and if it's not in the main body of text we look for an obvious link in the right direction. If we find neither, we hit Back and try the next path.

Many expected websites to become more complex, for the browser to fade away. That has always been Microsoft's expectation - that websites would evolve into applications, and that the browser would evolve into a programming platform. In some ways it has. Javascript/AJAX, for example is one of the supposed hallmarks of a modern website of the new (2.0) era. Yet Firefox came to the fore not just for its speed (an attempt to get out of the way) but for its features. Tabs, extensions, a search box, ad killers, alternate stylesheets. Dynamic and clever it may be, but the web page is still a document. Ish.

So where are our tools to use and manipulate it as a document? When you work with a photocopy, you highlight bits, tear bits out, underline things. You make lasting changes to it. An application is not meant to be messed about with. For that you buy the new version. Here are a few thoughts on enabling webpages to be treated more like documents:

1. Staples
Despite treating and viewing websites as a kind of interactive document, we don't have the tools to treat it like one. The favoured method of sharing a website with someone else is to send them a link. But in this you face the CMS systems that need cookies or session keys, which make it necessary to explain how to get to the page (the anithesis of the hyperlink), and the fact that no page lives forever on the web. The closest you get is the Wayback machine.

A solution? Staples. A web page now consists of a lot of files. Can't it all be packaged together, so that I can send it to someone? I had a set of search results from a travel company giving flight details, and the easiest thing to do was print to pdf and attach it. So at a first guess, let people Send As PDF, or Save/Send Zipped (a zipped folder with the site files in). A standardised way of saving within a zipped HTML document the origin of the page such that on opening it one could go to the live version, if it exists, would calm the critics saying we're sliding backwards technologically.

Highlighters and red ink
Often we want to annotate a page, or highlight bits of it. Currently, you need a specific extension for your browser to do it, and there is no interoperability enabling you to do the most basic thing in the paper world - highlight the interesting bit, scribble "How about this, Fred?" and give it to a colleague. This goes hand in hand with the above Staples - once annotated, you need a packaged way to keep it or send it.


  • How about a changes-based solution? Much like word-processor documents can have a history of changes, do the same for HTML.

  • Create a simple class of DIV tag for comments that marks a position on the page and contains a description - "This image is funny!", "What's this paragraph doing on our website?", etc.

  • Provide tools for highlighting, grouping etc. Google's terms highlighting in search results is the right kind of effect.



It's gone off the screen again
Possibly one of the most irritating things when viewing a website is when the page is too wide. For whatever reason, the choice of font, column width and window size conspire to make you use the dreaded horizontal scrollbar. Although web designers are supposed to make pages that avoid these things, it does happen, and annoyingly often. So let people move things or resize the boxes.

This is really a call for easy ways to transparently edit the page CSS (or table properties), mostly centring on readability and accessibility. Whether it's an editing mode, or better a way to select and change an element (think marquee selection tools in graphics apps, and resizing in the same). Obviously, that works best in the changes-based, wrappable environment mentioned above.

Reapply Changes
The fundamental difference between a website and a printed document is what they are made out of. A webpage is just information, and so a set of changes is still just information. So if I have done something to one page, perhaps I can redo it to a different page, or a new version of the page.

A redo, or reapply changes, function would be the icing on the cake. This is possibly the most difficult to implement, but there are smart people out there. To be able to apply a saved set of changes to a site would enable people to change (for example) The Register's index page, and keep it 'changed' when they revisit it, even though the page itself has been updated.

Extending further, it enables the user to entirely redesign a site to make it more readable. By viewing the unformatted page (as is already possible in Firefox et al), and editing it in various ways, the page is remade as the user wants it.

Defense
Consider a very common everyday experience: Junior staffer finds something on a website. She prints it off, highlights the relevant paragraphs, and leaves it on her manager's desk. Said manager photocopies it, writes a note on it and gives it to another colleague. That entire process in electronic form would require one of those hellish Copy-Paste-into-Word moments where nothing looks right, emailing, opening, annotating or more likely maulishly editing, resaving and resending. Web pages are just not portable, editable or an improvement on paper. In the new version, you'd look at the page, email it off to your manager, he'd look at it (or click to view the live site version), edit it in-place, send it on. The paper office hasn't happened because paper is easier. There are financial (and increasingly ecological) incentives to move to a paperless office, but it hasn't happened because it's not easier yet.

So, browser-makers, let HTML be a document format on top of its other expanding functionality. Whether you like the suggestions or not, let's have html documents as documents, and save the planet.

Friday, September 21, 2007

Bite your thumb at text entry

Preamble - T9, Stylus, Thumb keyboards
There are many ways to enter text on a mobile phone - the best being T9 and its variants, by virtue of using the same set of 9 keys and their letters, and intelligently guessing the word you want as you type it.

Entering text using a stylus also has some competitors - MessagEase, Speedscript, Touch (better for long words, eg German), using a tiny onscreen QWERTY, Ring Writer and the highly impressive HexInput/QUONG and Shark/ATOMIK siblings. Most of these use the ability of a stylus-weilding user to make accurate strokes and shapes on the screen.

One arena suffers, though. Thumbs. Nokia's N800 (see 6:26) and the iPhone both offer a larger onscreen keyboard to mash with thumbs. Apple gets it fairly close with the iPhone keyboard, with the improvements given in the video linked above. Particularly impressive is the ouzza -> pizza recognition. It's this that I'm targeting with my thought.

Idea - Fuzzy matching
Suppose instead of delineated zones on any input device we define a fuzzier 'hotspot'. Thus instead of trying to guess what word the user is trying to type by looking at the sequence they hit (ouzza), we look at the fuzzier position that they hit (p-o, i-u,z,z,a). Ultimately, we look at the vector position of the tap, and look at a thumb radius around it. This should give us a weighted set of letters:
  • 40% P, 50% O, 10% L
  • 30% I, 70% U
  • 90% Z, 10% X
  • 90% Z, 10% X
  • 70% A, 20% Z, 10% S
This turns into a modified game of "My first is in... " to guess what the user is trying to type. There are other statistical games we can play as well. The user may systematically hit one side of P rather than the other, so we can drift the letter centre slightly (and show that to the user if we can leave the form-over-function land of Apple). This should produce a bias map across the keyboard, with some parts stretched and others compressed.

This would naturally yield a two-stage process - first undo the bias to get the de-biased coordinates, then try to match the vector path that the user has pressed with their thumbs to the words in the dictionary. This should yield a list of words, each with a confidence rating. Later incarnations could look at adjacent words, in the way that speech recognition does, to further improve the guess confidence. Then select the word with the highest confidence, or perhaps show the list of possible words to the user.

Sum
In the end, it should be a keyboard that you type on, which adapts to you, and to the fact that you're a human - you miss sometimes, you are usually trying to type words, and at speed you need some latitude and some help. So do error recognition and correction, and look at the actual geography of the keyboard to try to correct errors, or understand what is being typed. Let's use our brains, perhaps?

Wednesday, September 5, 2007

11 thoughts to improve Shelfari

Recently, I joined Shelfari. It's a social networking site centred on Books - your public thing is your bookshelf. It has some useful capabilities; groups, ability to send notes to other people, etc, but it lacks some of the features I expected when I arrived.

Here's my submission to their feedback box.

1. Reply button on a note - see Facebook's Wall to Wall etc. This is really important for fostering community, as community is only possible through communication.

2. A way to discover books that you might like. Think Amazon's Books You Might Also Be Interested In. It's that feature alone that I hoped for when signing up to Shelfari. I tell you what books I've read, you tell me what books I might like. For the technology, look for the Netflix prize stuff. Same concept, different medium.

3. Find the duplicate books and merge them. Otherwise I don't see half the people that have read the same book as me except with a slightly different title, or edition, etc.

4. Put up a money prize for someone to develop a Shelfari plugin. It can look up the Shelfari info on any book that it recognises on the current page and provide both the ratings that the most-similar-people-to-you give it, and provide the Amazon link. Oh, and modify the Amazon page to add Shelfari opinions (a bit like Stumbleupon does to Google search results).

5. Let authors put their books up on Shelfari for consumption via an ebook shop, or from Amazon sites, or from self-publishing sites. Sceptical though I am of ebooks, I might just read one that my friends like.

6. Link up with Stumbleupon. If I use Stumbleupon and read these websites, maybe those who also like my books would like these websites. Conversely if these people that Stumbleupon thinks are similar to me like those books, maybe I will too.

7. Engage with authors. Maybe this should be my first point, because it's the most important. If you can reconnect the author with the reader, then you've closed a loop that has been open for too long. Authors may find themselves compelled to write more, readers to read more, and hopefully for the authors to listen to their readers.

8. The Reading Room - enable people to communicate while they read any particular book. If someone is struggling with something, perhaps someone else can explain it. The ultimate version of this is a discussion section for each book, where the better informed or enlightened can help the less informed. To see how useful this is, see the php.net documentation.

9. Explanations - The ultimate meta-library resource, following on from 8 above. In allowing people to post blog-type articles about a book or chapter, they can form a complete guide to works like Hamlet or War And Peace. A supremely useful resource for students. It's mostly an expansion of the Member Review to allow multiple reviews, and to provide space for articles which may also give away the plot if written as a review.

10. Engage with independent secondhand book shops and/or Google Products. If I can see where I can buy secondhand or even first edition copies of a particular book, the barriers to entry are far lower. Extending further, show the resale prices of books. If I can see a list of the buy prices of all my books (particularly textbooks) at different secondhand book shops, then I might look to get some extra cash and sell books I won't read again. Shelfari is the ideal platform for this because it aggregates information about a particular book in one place.

11. Provide schools resources. This is probably the best idea here for growing Shelfari. Make it possible for a teacher to set up a group for their students, where the books on a reading list could be easily found, or where longer articles are available on a particular book. Give the class space to discuss the book there, and for the teacher to moderate the discussion and answer questions. This can just as easily allow formulation of book clubs, particularly for home-schooled children, or nerds. The only ethical issue is in encouraging already-reclusive children to spend more time at their computers.

With that, I bid you all the best. Shelfari is a great resource, with some very exciting potential. For the most part, its growth now should come from engaging with the world outside its members and Amazon's pages. I look forward to seeing that happen.

Thursday, August 30, 2007

Ideas like droplets forming

In my world
an idea is a droplet forming,
slowly swelling,
absorbing all until -
Drip.
The drop drips,
attaining flight,
and path unknown.

Free from its creator,
and its creator free
to form another drop.