Designing for Small Display Screens

NordiCHI, October 19-23, 2002

Short Papers

Designing for Small Display Screens Lari Kärkkäinen and Jari Laarni Center for Knowledge and Innovation Research Helsinki School of Economics and Business Administration Tammasaarenkatu 3, 00180 Helsinki Finland +358 50 357 5796, +358 50 3837378 [email protected], [email protected] ABSTRACT

Wireless access to the Internet via PDAs (personal digital assistants) provides Web type services in the mobile world. What we are lacking are design guidelines for such PDA services. For Web publishing, however, there are many resources to look for guidelines. The guidelines can be classified according to which aspect of the Web media they are related: software/hardware, content and its organization, or aesthetics and layout. In order to be applicable to PDA services, these guidelines have to be modified. In this paper we analyze the main characteristics of PDAs and their influence to the guidelines. Keywords

Personal digital assistant, World Wide Web, guidelines INTRODUCTION

The development of small-screen interfaces (e.g. PDAs) and “the wireless web” provides challenges for the content and interface designers. The characteristics of a device have an effect on both how information should be presented and how users interact with the device (e.g. interface) (Buchanan et al. 2001). Therefore, the development of new services has to start from scratch. The style and logic of the interface may, however, be based on the closest “relatives” and guidelines designed to those. There is no lack of guidelines: several lists of guidelines for designing Web pages are presented on books and Web sites. Even though many of them are based on empirical research, a part of them, however, are quite ad hoc. Also quite often the guidelines are in contradiction to each other. For example some authors claim that amount of white space (e.g. unused space) has no effect on users’ performance or preferences (Spool et al. 1997). However, other authors claim that some amount of white space may be more suitable for some users. They also claim that Web sites with medium levels of white space are preferred (Bernard et al. 2000). However, the optimal level of unused space for each case has not been determined. Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage, and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. NordiCHI 9/02 10/02Århus, Århus,Denmark Denmark © 2002 ACM ISBN 1-1-58113-616-1/02/0009…$5.00 1-1-58113-616-1/02/0010…$5.00

The above-mentioned problem is a consequence of the nature of the Web medium and usability itself. The factors that have an effect on the usability of a web site interact in a manner, which makes it difficult to provide exact answers to the design problems. Especially, the more exact a particular guideline the more probable will be that there is contradictory evidence. Therefore, design guidelines have only a limited value. On the other hand, this provides the developers an opportunity to use their imagination and create new ways of Web publishing. Although the guidelines are not rules that provide definitive solutions to design problems, they help developers to see the Web site from the user’s point of view. Our aim here is to systematically analyze the characteristics of small-screen devices and the implications of these characteristics on designing services for these devices. We also aim to analyze to what degree the Web design guidelines are applicable for small-screen devices and to what degree they have to be modified. Therefore, we searched the Web for design guidelines and classified them according to which aspect of the Web media they are related. Next, we determined to what degree they are applicable to small-screen devices. WWW DESIGN GUIDELINES

Currently available Web guidelines can be classified into three categories according to which aspect of the Web media they are related. The first category includes guidelines related to technical aspects of computers and communication. The second category includes recommendations concerning the content of Web sites and their organization. The third category concerns aesthetics and layout of web pages. Software and Hardware

A large proportion of the guidelines concerns the technical limitations of computers, such as processing capacity, connection speed, or display size. Recommendations are based on user surveys. User surveys may, for example, show how many percent of the users have a powerful enough computer so that they can use the newest Web tools. Here are two examples of guidelines that include to this category: Guideline: Design for connection speeds of 56 kilobytes per second (kbps). Guideline: Design for computers with 17-inch monitors, with screen resolutions of 800 x 600 pixels.

227

Short Papers

Content and Organization

The second category of the guidelines focuses, for example, on the question what the relation of the user and the content of the site is, how users find what they are looking for and how the process can be made easier to the user. Unfortunately, since there are too many relevant factors whose interactions are complicated, the answers are more general than in the case of the first category. Even though there is a lot of usability testing concerning the Web, many questions remains to be open, and the findings have to be re-evaluated when a new media emerges. Here are six examples of guidelines that include to this category: Guideline: Automate as much of the site's function as possible. Eliminate the need for users to perform tasks like performing mental calculations, making estimations, recalling account numbers and passwords, etc. Guideline: Present information and similar functions consistently throughout the site, including logos, page titles, headers, navigation elements, etc. Also use a consistent position on all pages for logos, recurring text, buttons, and graphics. Guideline: Provide feedback to inform users where they are in your site. Guideline: Place a logo(s) in a consistent place on every page to ensure users are fully aware they are on your Web site. Guideline: Put as much important content as close to the top of the hierarchy as possible. Guideline: Write sentences with 20 or fewer words and paragraphs with fewer than five sentences. Use lists to break up long sentences. Aesthetics and Layout

The third class of guidelines is related to the overall layout and aesthetic appearance of Web sites. This approach emphasizes users’ needs for beauty by taking into account the technical limitations of the computers and the site’s function. People tend to use pleasurable products more frequently than products that are less pleasurable (Jordan 1998). Schenkman and Jönsson (2000) argue that semantic as well as syntactic factors (i.e. meaning and form) are important for how manmade objects are viewed. CHARACTERISTICS OF PDAS Display

Since display size of the PDAs is much smaller than that of desktop computers, the amount of information that is visible at a time is dramatically reduced. As a result, the number of sub-pages must be larger, or the content must be reorganized or modified. Jones et al. (1999) found that path lengths were shorter for small screen users than users who used the normal sized computer screens. Even though the small-screen users did not navigate much in their study, they tended to use search facilities more often and made poorer choices than the large screen users.

228

NordiCHI, October 19-23, 2002

Laarni et al. (submitted), in turn, showed that small display screens with short lines slow down speed of reading by disrupting the normal pattern of eye movements. Moreover, since the amount of information that can be displayed on the screen at one time is limited, much time is spent manually scrolling or paging the text. In addition to smaller display size, also the resolution of a PDA screen is poorer than that of a desktop and laptop display. The display resolution of a typical notebook computer screen is 1600 x 1200, and the resolution of a typical PDA is 240 x 320. If the visible area of a laptop is 28 x 21 cm, its resolution is 141 dpi (dots per inch). If the visible area of a PDA is 6 x 8 cm, its resolution is 99 dpi. In this case, the resolution of a laptop would be about 40% higher. Laarni et al. (in press) found that the poorer display resolution of PDAs may lead to poorer performance in information retrieval tasks. These findings suggest that the organisation of the content and the purpose of the service are key issues in determining the usability of PDA services. Jones et al. have argued that a critical task in transforming Web pages to mobile formats is to reduce the amount of information and to make the content more focussed. The hypertext structure is also an important property for such services. There are several ways to increase the amount of information that is displayed on small-screen devices. For example, Kampa et al. (1996) presented a new method for increasing the available screen space of PDAs. They showed that more information can be presented by using transparent widgets instead of a menu bar. Many research groups have, in turn, investigated whether rapid serial presentation of text (RSVP) and other dynamic ways of text presentation are suitable for small-screen device (Laarni this volume, Rahman & Muter 1999). Bruijn et al. (2001) suggested that the RSVP-technique could be used to implement navigation aids for web browsing on small displays. Jones et al. (1999) have argued that in translating Web pages to mobile formats some kind of modification of the content is necessary due to limited screen space.They claimed that in addition to simple syntactical changes the whole semantic content should be modified in order to make the Web page more suitable for smallscreen devices. Björk et al. (1999) developed a Web browser for small terminals (WEST), which can automatically transform the contents of a Web page to small-screen formats. The automatic transformation is achieved by summarising text and dividing a single web page in several smaller sub-pages. Initially, the user is presented with the thumbnail view of the cards, which gives an overview of the content. In each card a keyword of the content is presented, and the user can focus on a specific card by pointing it. A card may have sub-cards and the user can browse back and forth the subcards. Processing capacity

Another limiting factor for PDA-based services is the low processing capacity of PDAs. For example, Casio’s BE-300 Casiopeia has 166Mhz processor and 16Mt

NordiCHI, October 19-23, 2002

Short Papers

RAM which limits the size of the files. Therefore, animations and images should be used with caution.

using subtitles and hypertext structure. Hyphenation of the words helps to avoid variable line lengths.

Control and Input devices

Use markers while scrolling or paging text

PDA-users can input text and control functions with a stylus and a set of control buttons. Because of limited size of the display screen a virtual keyboard and/or handwriting recognition software are used to type text. Both ways have their limitations. Firstly, they both require a lot of screen space. Secondly, handwriting recognition is often quite inaccurate. Osborne Rao (2000) has found that a virtual keyboard is more efficient and accurate text input method than handwriting recognition. To optimize performance a combination of a keyboard and a stylus is a better alternative.

Scrolling interrupts a user’s activities (reading, information retrieval etc.). Moreover, because of the small display size, more scrolling and paging is required. Therefore, it is important to guide the user’s attention to the right place after a scrolling operation.

Usage

One advantage of handheld computers is that they can be used anywhere and anytime. Compared with desktop computers, PDAs are quite often used in less optimal conditions. Moreover, only transient tasks are normally carried out with a PDA, and in many cases the user has to share his/her attention with other tasks. Therefore, as Jones et al. (1999) have suggested, services for PDAs should be well focused and well organized.

Use pictures with caution

Avoid pictures, which don’t provide relevant information. Picture files are usually quite large and, thus, may require too much processing capacity. Furthermore, the low resolution decreases the information value of very small images. Reference

1.

Bernard, M., B. Chaparro, and Thomasson R. Finding information on the Web: Does the amount of whitespace really matter? Usability News (Winter 2000). Available at http://wsupsy.psy.twsu.edu/surl/usabilitynews/2W/w hitespace.htm

2.

Björk, S., Holmquist L. E., Redström, J., Bretan, I., Danielson, R., Karlgren, J., and Franzén, K. WEST: A Web Browser for Small Terminals. in Proceedings of ACM Conference on User Interface Software and Technology (UIST) '99 (Asheville, NC, November 1999), ACM Press, 187-196.

3.

Brujin, O., Spence, R. and Chong M. Y. RSVP browser: Web browsing on small display devices. Draft proceedings Mobile HCI01, 2001 available at http://www.cs.strath.ac.uk/~mdd/mobilehci01/procs/

4.

Buchanan et al. Improving Internet Usability. Available at http://citeseer.nj.nec.com/buchanan01improving.htm l, 2001

5.

Jones, M., Marsden, G., Mohd-Nasir, N., Boone, K., Buchanan, G. Improving Web interaction on small displays. Proceedings WWW8, Toronto, 1999. Available at http://www8.org/w8-papers/1bmultimedia/improving/improving.html,

6.

Jordan, P. W. Human factors for pleasure in product use. Appl.Ergon. 29, (1998), 25 – 33.

7.

Kampa, T., S. A. Elson, et al. Using Small Screen Space More Efficiently. CHI'96, Vancouver, Canada, ACM Press, Boston.

8.

Laarni, J. Searching for optimal methods of presenting dynamic text on different types of screens. (this volume).

9.

Laarni, J. and Kojo, I. Reading financial news from PDA and laptop displays. In M.J. Smith and G. Salvendy (Eds.), Systems, Social and Internationalization Design Aspects of HumanComputer Interaction. Volume 2 of the Proceedings of HCI International 2001. (pp. 109-113). Mahwah, NJ: Lawrence Erlbaum.

EXAMPLES OF GUIDELINES FOR PDAS

Here are examples of guidelines that may help in designing usable Web sites for small-screen devices. Determine the purpose of the site / service

Determine the purpose of the service and design the service based on task analysis instead of how it is designed for use with conventional computers Re-evaluate the interface metaphors

New media requires new metaphors. For example information may be presented sequentially in time instead of space in order to maximize the amount of information. Dynamic presentation methods are viable alternatives. Present the most important information first at the top of the hierarchy

Since PDA users do not tend to navigate deep into the site, it is important that they need not follow long link paths in order to reach the desired information. Personalization of the content should be considered. Re-think the navigation aids

Constantly visible navigation bars require too much display space. Consider using alternative ways to navigation: transparent widgets, navigation layers, RSVP navigation etc. Indicate the links clearly

Use text links with a clear indication. Image links are hard to detect and if the service is not downloaded via desktop terminal, they cause prolonged download times. Do not use mouseover type techniques to indicate links. Optimize the reading process

Use at least 14 pts font. Due to poor resolution of PDAs and variable lightning conditions, a smaller font size may deteriorate the reading process. Organize the text by

229

Short Papers

10. Laarni, J., Kojo, I and Kärkkäinen, L. (submitted). Evaluating reading from PDAs and laptops by eye movement methods 11. Laarni, J., Kojo, I and Kärkkäinen, L. (in press). Reading and Searching Information on Small Display Screens 12. Osborne Rao, D. (2000) A study of input devices on personal digital assistants (PDAs). Serco Usability Laboratory. Available at http://www.usability.serco.com/research/research.ht m 13. Rahman, T. and Muter P. Designing am Interface to Optimize Reading with Small Display Windows. Hum. Factors 41, (1999) 106-117. 14. Schenkman, B. N. and F. U. Jönsson. Aesthetics and preferences of web pages. Behav. Inf. Technol. 19, (2000) 367-377. 15. Spool, J.M., Scanlon, T., Schroeder, W., Synder, C. and DeAngelo, T. Web Site Usability: A Designer's Guide, North Andover, MA, User Interface Engineering, 1997.

230

NordiCHI, October 19-23, 2002