Mohammad Al-Ubaydli’s blog

Principles for designing hospital intranets for handheld computer users

Posted in Medicine, My publications, Peer-reviewed papers, Technology by Dr Mohammad Al-Ubaydli on June 19, 2003

Citation

Mohammad Al-Ubaydli, “Principles for designing hospital intranets for handheld computer users”, Vine, Volume 33 Number 2 2003 p88. [Original paper]

In the Kalahari Desert of southern Africa live the San Bushmen. Theirs is a hunter-gatherer society, and its members are famous as animal trackers. They are able to extract an enormous amount of information from reading animal tracks of spoor in the natural environment.

Thanks to researcher Louis Liebenberg, each Bushman now carries a handheld computer. As he travels across the desert, he documents his readings and observations on the computer. This information is then transferred, via satellite, to a central database, where it is correlated to produce a dynamic map of the location.

Handheld computers enable knowledge professionals, from Bushman trackers to hospital clinicians, to document and access important information. Wireless technology allows the integration of this information with large central databases. Handheld computers have many advantages including portability, simplicity, responsiveness and battery life. These are made possible by tradeoffs in design compared to personal computers. Unless the wireless integration with central databases is implemented to take into account these trade-offs, the advantages will not be realized.

This paper provides guidelines for integrating one kind of central information source – a hospital’s internal website (intranet). It describes web page designs that pose problems for web browsing on handheld computers. It then discusses web sites that have correctly adjusted to these devices. Finally it mentions the tools available to web site designers to achieve such adjustments and avoid the pitfalls.

Background

Default;Handheld computers are computers small enough to hold in the palm of a hand or fit into a pocket of a coat. They run one of a variety of specialized operating systems (OS), different from Microsoft Windows found on personal computers. These include Palm OS, Pocket PC and Symbian, but do not include Tablet PCs.

The most popular (with over 50%) of the market is the Palm OS[1], while Pocket PC has around a third. However Microsoft has been keen to promote Pocket PCs from the start for their wireless capabilities, and included a default web browser called Pocket Internet Explorer (PIE). By contrast Palm was late in its promotion of wireless capabilities, and several web browsers are chosen as the default depending on the hardware manufacturer.

PIE is thus probably the most popular web browser overall on handheld computers. Furthermore it is one of the least capable. This makes it a good “lowest common denominator” for web page designers. If a web design works well on PIE, it will work well for the majority of users (who have PIE) and may work even better for users with alternative web browsers.

This article thus focuses its testing on handheld computers with Pocket PC, running PIE.

Right is wrong

The most important law of mobile browsing can be summarized as “Right is wrong”. Few devices can fit more than seven words horizontally while most can fit 12 lines or more. This means that handheld computer users are happy scrolling up and down a web page as they read 12 lines at a time. Indeed many devices come with a “wheel” or “stick” on the side that eases this scrolling. But scrolling left and right is another matter. It requires pressing a button every seven words, then pressing several times once the end of a line is reached.

A web page design should never force the user to scroll horizontally.

This is similar to the design that modern newspapers have settled on with narrow columns of text. The reader can comfortably read down the page and never has to follow a sentence for too far across the page. Handheld computer users expect the same from their mobile content.

PIE operates within a width of 240 pixels, and a height of 320 pixels. When scroll bars and Start menu are taken into account, there is even less space for the text of the web page. Careful design and testing is necessary.

PIE pitfalls

The National Center for Biotechnology Information (NCBI) is arguably the most important web resource for biomedical researchers and clinical practitioners. The latter group uses it to search PubMed, the most comprehensive database of modern biomedical primary papers. Seniors teach from it, juniors learn from it, and all clinicians consult it. Figure 1 shows part of the website on a personal computer.

Figure 1 – screenshot of http://www.ncbi.nlm.nih.gov on a PC

Figure 2 shows the same website in PIE:

Quite a contrast between the two views, and PIE is almost useless. The problem is the amount of horizontal scrolling necessary. Fortunately, PIE has a partial solution. The View menu has the command Fit to screen which gives the screenshots of Figure 3.

Figure 3 – Two screenshots of http://www.ncbi.nlm.nih.gov on PIE. This time the “Fit to screen option” is on.

Scrolling to the right is necessary, but only once. After this, only vertical scrolling is necessary. PIE achieves this by squeezing the text to less than 240 pixels in width. If the text is part of a table, it squeezes each column to within 240 pixels. In this way, PIE can allow designers the control of tables, while providing readers with the convenience of small-screen browsing.

With this feature in mind, there are three major pitfalls to avoid with PIE:

  • Tables
  • PDFs
  • Frames

Tables

The NCBI web site is based on a table layout. However PIE does not cope with all tables. Figure 4 shows an example article from The Economist’s website on a personal computer, while Figure 5 shows the article on a handheld computer with PIE.

Figure 4 – Screenshot of www.economist.com on a PC

Figure 5 – Two screenshots of http://www.economist.com on PIE. The <COLSPAN> tag means that the user must scroll horizontally to read.

PIE cannot compress the first few paragraphs of text. The reason is the use of the <COLSPAN> tag in the web page’s design. The tag allows specifies that a paragraph may span more than one table column. This can be seen as the case of the first few paragraphs in Figure 4. PIE can compress each column, but it cannot compress a paragraph that spans more than one column. And this in turn requires the horizontal scrolling of Figure 5.

PDF

Adobe’s Acrobat product is responsible for a digital civil war. Authors love Acrobat, readers do not like it. Readers who are using a handheld computer find the software particularly unpleasant.

Acrobat tries to produce “digital paper”. In other words, it converts any computer document into a format that appears like paper on a computer screen. The format is known as PDF (Portable Document Format).

UK doctors have seen this in action thanks to the goverment’s National Service Frameworks. These are detailed standards of care that clinicians are expected to read and then adhere to. In the early days, the documents were only available in PDF.

Content in PDF format is inaccessible to handheld computer users. First, Palm-compatible handheld computers cannot even open the document unless it is first converted through a desktop computer.

Second, Pocket PC users can open the document, but it is still useless as Figure 6 and Figure 7 show.

Figure 6 – Screenshot of a PDF document from http://www.ncbi.nlm.nih.gov on PIE. Note how the “faithful” recreation of the paper layout means that the text is unreadable on such a small screen

The paper experience is there, because the document is laid out exactly as it would be on an A4 piece of paper. Of course a Pocket PC is much smaller than this, so a lot of zooming is necessary to get to readable size text. However this leads to text that is too large for the width of the screen. The reader must scroll to the right every few words. After a few lines, they will give up.

Figure 7 – Two screenshots of the same document on PIE. The user has to zoom in twice before the text is legible.

PDF is useful for printing but only printing. An intranet should only include PDFs if it also includes a web version of the content.

Frames

Doctors.net.uk (DNUK) is one of the most companies for British clinicians. Over 80,000 of the UK’s 100,000 doctors have already registered with the company’s web site, and many of them
use it on a daily basis. Figure 8 shows the web site in ThunderHawk, which is one of the best web browsers for the Pocket PC:

Figure 8 – Screenshots of a www.doctors.net.uk on ThunderHawk. The entire site is perfectly usable in this browser.

It is quite usable. A clinician can check web mail, take part in discussion forums, and read textbooks. This is as expected because DNUK’s designers have a history of rejecting flashy technology to ensure that clinicians can access the site in any hospital in the land.

However Figure 9 show the same web site in PIE. It is useless to the clinician, and the reason is the use frames in the web page’s design. Many browsers on Palm-compatible and BlackBerry machines also find frames difficult to deal with so the feature must be avoided in all web page design.

Figure 9 – Screenshot of a http://www.doctors.net.uk on PIE. Frames make the site impossible to use.

Site heroes

So far this article has discussed the pitfalls and difficulties of designing web sites for users with handheld computers. But there are plenty of sites that cater their content perfectly to these users.

Wired.com

In early 2003, Wired News underwent a redesign. The resulting web site, shown in Figure 10, is sophisticated and eye catching on a personal computer. As Figure 11 shows, however, the site is also appropriate for users of PIE.

Figure 10 – Screenshot of www.wired.com on a PC

Figure 11 – Screenshots of http://www.wired.com on PIE. It is a pleasant experience to navigate and read the entire site.

If you are going to redesign your web site, visit wired.com and use their page as a template.

Amazon.com

Another internet pioneer is Amazon. Figure 12 shows the “accessible” version of the American web site in PIE. The site is fully functional, handling everything from customer reviews to secure purchases.

Figure 12 – Screenshots of www.amazon.com/access on PIE. All the e-commerce features are usable on a small screen.

It also illustrates an important political point. Amazon’s aim is to reach European and Japanese customers, two groups with a high usage of mobile phones for accessing the internet. This interface is designed to reach these customers.

However the company’s PR department likes to mention disabled users as the chief beneficiaries of these efforts. There is no contradiction here: what is good for handheld computer users is usually good for disabled users.

In the USA, passing of the Americans with Disabilities Act (ADA, or Section 508) imposes strict requirements for web site designers. The UK and the rest of Europe have similar political will, although the legislation is not yet so complete. If hospital management will not support web site design efforts for handheld computers users, they will still support exactly the same changes for the sake of disabled users.

Tools

This article may have convinced you to avoid<COLSPAN> in tables, PDFs for anything but printing, and frames for navigation. So what can you do? There are several tools to help.

KISS

Perhaps the best principle to keep in mind is to Keep It Simple (Silly). The designers of the NCBI web site took no account of handheld computers but the result is still usable. That is because they kept a simple design. It comfortably absorbs new users and new devices.

Opera

Opera is a Norwegian company and its browser is included in many of the Symbian mobile phones on sale in Europe. It also makes browser software for Unix, Linux, Macs and PCs.

This combination is very useful for developers. For example the PC version is freely downloadable and gives a better experience than Internet Explorer. Figure 13 shows the NCBI site on a personal computer.

Figure 13 – Screenshot of the Opera browser showing www.ncbi.nlm.nih.gov

The feature of most interest can be used by pressing Shift with the F11 key, because the browser switches to Small screen mode, shown in Figure 14.

Figure 14 – Screenshot of the Opera browser in “Small screen” mode

The view is different from PIE’s, but still imposes the stringency of narrow screens. The software lets you test your web sites on the same desktop computer that you design them in. Of course you must eventually test on a handheld computer, but this tool will save you a lot of time along the way.

DreamWeaver

With all this insistence on restrictions and simplicity, you might expect that the fancy design software should be avoided. But the reverse is true. Simplicity is difficult to achieve, and sophisticated tools can help.

The gold standard is Macromedia’s DreamWeaver, but Microsoft’s FrontPage is pretty good as well. To understand their importance, think back to Doctors.net.uk. Why did purist designers use frames?

The most likely reason is that frames ease the burden of navigation on web designers. They are the web equivalent of headers and footers in word processors. In other words, they allow the inclusion of the same content on all the pages of a even though the designer only had to write it once. This feature is an important and often necessary time saver.

Today’s web design software allows the automation of these and many other tasks – without the need for frames. DreamWeaver is your friend.

Better browsers

PIE is not the only software available to your users. You’ve already seen ThunderHawk in action, coping perfectly with frames. Another product is Picsel. It is unlike any other software I have seen on any handheld computer, and its performance is extraordinary. To get an idea of what it can do, take a look at these screenshots from the NCBI website. Remember how PIE struggled with the tables and how bad the PDFs looked:

Figure 15 – Screenshot of the first chapter of the NCBI handbook on the web

Figure 16 – Zooming in is quick, easy and effective with two taps. Notice the PDF icon in the top left corner: Picsel can open PDFs with another two taps.

Figure 17 – The PDF opens up even faster on a humble handheld than on a powerful PC

Figure 18 – And another two taps allow you to zoom in for readability

Elsewhere on this site, there is a full guide to Picsel and other browsers. As you combine better design of your web site with better browsers on your users’ machines, the result is a significant improvement in usability. Clinicians’ workflow improves as they access the latest information wherever they may be on the wards. And they will thank you for it.

References

1 – Gartner 2003 Q2 PDA market share report

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: