1

Warsaw University of Technology

Faculty of Electronics and Information

Technology

Institute of Informatics

Academic year 2005/2006

BACHELOR OF SCIENCE THESIS

User interface organization in PDA portable devices.

Andrzej Gerula Index no. 188801

Supervisor: Wiktor Daszczuk, Ph.D.

Evaluation: ………………. ……………………………. Signature of the Head of Examination Committee

Warsaw 2006

2

Curriculum Vitae:

I was born on 12th of October 1983 in Paris. From 1990 to 1998 I was a pupil of the SP300 primary school in Warsaw. From 1998 to 2002 I continued my education in secondary school at the XLIV L.O. im. Antoniego Dobiszewskiego. I was attending a course with a mathematics and physics profile. In 2002 I began Electrical and Computer Engineering studies at the Warsaw University of Technology, in the Faculty of Electronics and Information Technology.

……………………….. Signature of the Student

B. Sc. Examination Examination was held on ………………………………………………………………………. With the result: ...……………………………………………………………………………….. Final Result of the Studies: …………………………………………………………………….. Suggestions and Remarks of the B. Sc. Examination Committee ……………………............... …………………………………………………………………………………………………... …………………………………………………………………………………………………..

Electrical and Computer Engineering Date of birth: October 12, 1983 Starting Date of Studies: October 1, 2002

3

Abstract

The possibilities of portable devices grow constantly. Palmtops are now fast enough to run

almost any application. Together with their price decrease, it has become profitable to transfer

desktop applications to portable devices. However, palmtops have different limitations caused

mainly by the size of the devices and manner of operation. Desktop applications user interface

needs modification before running on a portable device.

This thesis presents aspect of creating user interface for PDA applications. By analyzing

existing applications it shows possible ways of user interface design. It also provides

guidelines on how to use typical graphical elements to create an application that is easy to use

and intuitive to operate.

A result of this work is also an exemplary program created to present application of analyzed

graphical elements.

Keywords: PDA, palmtop, User Interface, graphical elements, GUI

Streszczenie

MoŜliwości urządzeń przenośnych stale rosną. Palmtopy są teraz dostatecznie szybkie Ŝeby

uruchomić na nich prawie kaŜdą aplikację. W związku ze spadkiem ich cen przenoszenie

desktopowych aplikacji na urządzenia przenośne stało się opłacalne. JednakŜe palmtopy mają

róŜne ograniczenia spowodowane głównie przez wielkość urządzeń i sposób obsługi. Interfejs

uŜytkownika aplikacji desktopowych wymaga modyfikacji przed uruchomieniem na

urządzeniu przenośnym.

Ta praca prezentuje aspekt tworzenia interfejsu uŜytkownika w aplikacjach dla PDA. Poprzez

analizę istniejących aplikacji pokazuje moŜliwe sposoby projektowania interfejsu

uŜytkownika. Jest równieŜ zbiorem wskazówek jak uŜywać typowe elementy graficzne Ŝeby

stworzyć aplikację łatwą i intuitywną w obsłudze.

Rezultatem tej pracy jest równieŜ przykładowy program pokazujący zastosowanie

analizowanych elementów graficznych.

Słowa kluczowe: PDA, palmtop, interfejs uŜytkownika, elementy graficzne, GUI

4

Abstract .............................................................................................................................. 3

Streszczenie........................................................................................................................ 3

1. Project Requirements ............................................................................................................. 5

1.1 General assumptions. ................................................................................................... 5

1.2 Basic Definitions. ......................................................................................................... 6

1.3 Criteria of implementation platform choice. .............................................................. 10

1.4 Why not Linux?.......................................................................................................... 12

2. PDA applications and their UI. ............................................................................................ 15

2.1 Built-in user interaction comparison. ......................................................................... 15

2.2 Types of applications. ................................................................................................ 18

2.3 Analysis of UI elements and overview of popular applications................................. 20

3. Analysis of User Interface in a PDA. ................................................................................... 32

3.1 General guidelines for creating a proper UI............................................................... 33

3.2 Graphical User Interface ............................................................................................ 35

3.2.1 Shell environment ............................................................................................... 35

3.2.2 Controls ............................................................................................................... 37

3.2.3 Text...................................................................................................................... 43

3.2.4 Colors and Fonts.................................................................................................. 44

3.3 Other ways of controlling UI. .................................................................................... 44

3.3.1 Voice ................................................................................................................... 45

3.3.2 Peripherals ........................................................................................................... 46

4. Project realization................................................................................................................. 49

4.1 Assumptions. .............................................................................................................. 49

4.2. Programming tools choice......................................................................................... 49

4.2.1 Windows Mobile 2003 Software Development Kit ............................................ 49

4.2.2 PalmOS Software Development Kit ................................................................... 51

4.3 Implementation........................................................................................................... 52

5. Summary .............................................................................................................................. 62

Bibliography and References. .......................................................................................... 63

List of figures ................................................................................................................... 64

5

1. Project Requirements

1.1 General assumptions.

Due to falling prices of PDA (Personal Digital Assistant) portable devices, many

typical applications are moved from PC computers to PDA. However, a PDA screen has

many specific attributes: size, resolution, color palette. The aim of this thesis is to analyze

typical graphical elements in the context of effective PDA usage.

Personal Digital Assistants (also called Portable Digital Assistants) are specific

devices. In the past they were designed mainly as Personal Information Managers (storing

contacts, notes, appointments etc.). Ease of use and simplicity were crucial then because

PDAs competed with paper notes in storing information. User interfaces had to be designed in

such a way that the user would instantly know how to control it. Nowadays, with increased

capabilities, it became obvious that these devices can do much more - applications from

desktop computers can be moved to PDAs. Hardware is being improved every day but two

limitations still prevail: size and weight. Due to this fact designing a proper User Interface

(UI) is still the most important factor of application success. One of the aims of this thesis is

to create guidelines on how to create a proper UI, what elements are available, and describe

their strong and weak points. Conclusions are based on analysis of UIs in different

applications but also on existing guidelines published by palmtop operating systems creators:

Microsoft and PalmOS. This thesis includes an overview of programming tools used to

develop applications.

To support all assumptions stated in this thesis an exemplary application is created. It is

written for two operating systems, PocketPC and PalmOS. This shows slight differences

between two leading companies in the Polish PDA market.

I hope that for the future reader this thesis will be a helpful guide to UI design, or at least a

precise overview of possible ways of interface implementation. PDAs do not have a bright

future because they are being superseded by Smartphones but information presented in this

thesis is useful for both, PDAs and Smartphones.

6

1.2 Basic Definitions.

1.2.1 Personal Digital Assistant

PDA is an abbreviation of Personal Digital Assistant. It describes a small, portable personal

computer which easily fits in a hand (this is why PDAs are also called handhelds). The term

PDA was first presented in January 1992 by John Sculley (Apple Computer Inc.) at the

Consumer Electronics Show in Las Vegas. It referred to the Apple Message Pad Newton. This

is considered the first PDA but in fact devices of similar functionality were available a few

years before (Psion, Sharp Wizard) and the whole concept of creating a personal organizer

reaches back to the 1970s. Apple listed five points which were criteria for a device to be a true

PDA:”

� It has to be lightweight and portable enough to accompany you anywhere...

� It has to have a reasonable power consumption profile that lets it accompany you for an

entire day or two without power being an issue...

� It has to have either (preferably both) handwriting and voice recognition...

� It has to talk easily to your personal computer...

� It has to be a truly programmable, so that there are software applications available for it."1

These statements may be accurate but on the other hand it should not really be possible for

companies to claim to have invented a product category just because they have presented a

new term to explain a set of products. Nevertheless the Newton was a large step forward in

creating today’s PDA.

Figure 1 Apple Message Pad Newton2

1 http://www.snarc.net/pda/pda-treatise.htm

7

The Apple Message Pad Newton featured a 20MHz ARM 610 RISC processor, 4MB of

ROM, 640k of RAM, an infrared port and a PCMCIA Type II slot. It was all placed in a quite

compact case measuring 184x114x27.5mm and weighing 400g so it fitted easily in an open

hand. A significant innovation was the 336x240 touch-sensitive monochrome display

featuring handwriting recognition. Together with a well-designed user interface it made usage

of Newton intuitive and simple.

Other companies also saw potential opportunities in the handheld devices market. In 1992

Microsoft started their WinPad project together with the world’s largest Original Equipment

Manufacturers (OEMs) like Compaq, Motorola, NEC and Sharp. Unfortunately WinPad had

too large requirements. The devices that could be designed in 1994 were not powerful or

efficient enough to run Windows code modified for PDA purposes. The idea of using standard

PC hardware was not feasible because of low efficiency of batteries then available. Microsoft

cancelled the WinPad project in autumn of 1994. Another project called “Pulsar” was not a

success but it presented something new. Its idea was to break away from the complex and

often complicated PC software. It also assumed that a PDA should be a simple to use,

multifunction device with small amount of input functions. In December 1994 Microsoft

decided to join those two teams working separately on WinPad and Pulsar to form one

development group called Pegasus. Two years later, together with 6 of the largest OEM’s,

they presented the first devices with Windows CE 1.0 onboard.

Figure 2 Hitachi PDA with Windows CE onboard3

2 http://retrothing.typepad.com/photos/uncategorized/newton.jpg 3 http://pc.watch.impress.co.jp/docs/article/961119/hithpc4.gif

8

In the same year Palm Computing (then a division of U.S. Robotics, later of 3Com, and

finally a standalone corporation) presented Palm Pilot. It was smaller (120x80x18 mm) and

much lighter (160g) than the Apple Newton. Inside there was Motorola Dragonball 68328

16MHz processor, 128k memory and 160x160 pixel 4-shade monochrome display, all running

under the PalmOS operating system. It also featured a special area where using the stylus

provided, the user could enter handwritten text (“Graffiti” handwriting recognition).

Figure 3 Palm Pilot 50004

For the next four years devices based on PalmOS became synonymous with palmtops or

PDAs. That was because Palm had no competition, while only Windows CE could change

something but it was not developed sufficiently. This situation lasted until 2000 when

Microsoft presented the Pocket PC 2000. It was an Embedded Operating System that could

directly compete with the PalmOS. It had a brand new User Interface which broke off from

the Windows scheme. The Taskbar and Start Menu were removed, replaced with similar

elements moved to a permanent bar along the top of the display. New communication features

and application layer support were added.

Microsoft decided not to produce devices on their own but to supply producers with a ready

system. This is why Pocket PCs are manufactured and sold by several different companies

like HP, Toshiba, Acer, ASUS, Dell, Fujitsu Siemens, HTC, ViewSonic and others. Thanks to

this there is a variety of hardware configurations that users can choose from. In Pocket PC

2000 you could have different types of CPUs such as the MIPS, SH3 and ARM but since PPC

2002, the processor needs to be an ARM-based (StrongArm, XScale or Samsung). From the

presentation of Pocket PC 2000 Microsoft is systematically increasing its market share,

4 http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/PalmPilot5000.jpg/180px-PalmPilot5000.jpg

9

presenting new editions of the system, such as Pocket PC 2002, Windows Mobile 2003 and

recently Windows Mobile 2005.

Today, the PDA is a powerful device with a 400 MHz processor, large amounts of memory, a

high resolution screen (640x480 has become the standard), sometimes even a graphic

accelerator! It has lost its primary purpose of being a personal information manager, now it is

a fully functional computer in a smaller case. With additional features like GPS, Bluetooth,

Wi-Fi, cellular phone module, photo camera etc. it can substitute many other devices. The

only thing that has remained the same is the size of the screen because this is determined by

the definition of a palmtop – it has to fit in a hand. Because of that, a user interface always

needs to be correctly designed, since a fast processor will not help if the user gets stuck in a

cluttered menu.

Figure 4 PocketPC Optipad and Palm Tungsten E5

1.2.2 User interface.

The user interface can be described as a collection of means by which humans (user) interact

with a particular machine, device, computer or program. This interaction includes the means

of controlling the system by the user (input) and informing the user by the system (output).

The user interface is one of most important parts of any program because it determines how

easy a user can make the program do what he wants and how understandable the answer will

be. UI in computing refers to control sequences (like pushing buttons on the computer

keyboard, moving the computer mouse, touching the touchscreen or even vocal commands)

5 Made by author.

10

the user performs to control the program and it refers also to the graphical, textual and

auditory information the program presents to the user.

First computers used a batch interface. It was hardly interactive, the user had to specify all the

details in advance and the output was presented when all the processing was done. From 1969

command-line interfaces became most popular. It is a UI where the user provides the input by

typing a command string with the computer keyboard and the system provides output by

printing text on the computer monitor. In some cases it is still used nowadays because of its

simplicity and low requirements.

The idea of a Graphical User Interface can be found starting from the 1960s, with many

successful implementations such as the Xerox PARC, but the first company which had a

commercially successful product to use a GUI was the Apple Macintosh released in 1984.

Figure 5 Macintosh System 1 GUI6

GUIs accept input via devices such as a computer keyboard and mouse and provide graphical

output on the computer monitor.

A PDA user interface is a specific kind of interface. Due to the nature of PDAs, their small

size and lack of keyboard, designing a good UI is extremely important. Despite similar

requirements, applications from normal desktop computers cannot be transferred to PDAs

without appropriate modification.

1.3 Criteria of implementation platform choice.

Market analysis is not the topic of this paper, but in order to be accurate in choosing the

particular OS it needs to be done. As a source of information I decided to use Gartner Inc.

This is a company that has delivered technology-related insight since 1979. It provides

research and analysis on the global information technology industry. They also have quite

accurate definitions of a PDA which will be used for the purposes of this paper.

6 http://ars2.iad.cachefly.net/images/gui/11-Mac1.gif

11

“Gartner defines a PDA as a data-centric handheld computer weighing less than one pound

that is primarily designed for use with both hands. These devices use an open market

operating system supported by third-party applications that can be added into the device by

end users. They offer instant on/off capability and synchronization of files with a PC. A PDA

may offer WAN support for voice, but these are data-first, voice-second devices. Smartphones

offer all the attributes of a PDA, except that smartphones are voice-centric and are designed

for primarily a one-handed operation.7”

Figure 6 PDA Operating Systems world market8

(This table is only to show the market trends)

According to Gartner, Microsoft has a 52.6 percent market share. They are followed by

Research In Motion with 25.5 percent, then by Palm OS at 13.4, Symbian at 3.6 and Linux at

1.2 percent. Those results are given according to the above definition of a PDA. If we include

smartphones, the results would look totally different with Symbian far above all the other

companies. Research In Motion Blackberry devices were not officially sold in Poland, now

trying to enter the market with smartphones offered by mobile phone operators. Palm OS have

an uncertain situation. For the past 3 years, sales have been systematically decreasing, they

have problems with releasing new version of their OS named Cobalt. The company

responsible for producing Palm devices cooperates with Microsoft resulting in a PocketPC

powered Palm called Palm Treo, a huge success in the smartphones market. Recent news say

that Palm Inc. is working on its own operating system based on Linux. Palm OS has a very

uncertain future but because it is currently the third player in the market I will include it too.

7 http://www.gartner.com/press_releases/asset_151801_11.html 8 http://www.idg.pl/news/78324.html

12

Operating System Criteria of choice Considered

Windows CE Most popular OS in the world Yes

RIM Not offered in the Polish market No

PalmOS PDA market leader for many years Yes

Symbian OS mainly for Smartphones No

Linux + XWindow Very small market-share No

Table 1 Choosing platform for this thesis.

1.4 Why not Linux?

As I mentioned in the previous chapter, I have not taken Linux into consideration because its

market share is too small. But looking at it objectively I should because it has great

perspectives. I would like to assert that this is not a question of whether Linux is better or

worse than Windows as it is not the point of this paper.

First of all Linux is free. This is quite important for PDA manufacturers. It means they can

offer their products without having to include the cost of WinCE, estimated to be as much as

$30 for some models.

The other thing is that Linux is an open-source system. To know it is an advantage, please

verify any discussion about safety and security of operating systems. In short it means that

you can trust your system not to have back doors or too many “stupid programmer errors.”

And even if they appear, the user is in control and has the necessary tools to deal with the

problem.

Applications for Windows Mobile and Palm OS are written from scratch because these are

totally independent Operating Systems. Programs compiled for desktop PCs will not work on

PDAs. With Linux, the situation is a bit different. Despite the fact that distributions for

palmtops (Embedix, OpenPDA) differ from desktop ones, they are still the same OS. The only

thing that a user needs to do is to take the source code of the application and compile it with a

proper compiler. Almost any program can be transferred from desktop Linux to PDA,

something that is not possible in the case of the PocketPC.

There is also the other side of the coin. The majority of people who buy PDAs are not Linux

enthusiasts that like working in command-line mode and have fun repairing broken operating

systems but businessmen that want to use it according to its name – as a Personal Digital

Assistant. To be accepted by mainstream PDA users, the devices they rely on to organize their

lives and business must simply work. Stability and consistency is very important.

13

This is where the success of Linux based PDAs depends on software developers. They need to

create graphical user interfaces which will be intuitive and easy to use, make applications

managing personal information (PIMs), synchronizing with the desktop etc.

As an example I present a successful PDA basing on Linux. It is the Sharp Zaurus SL-5500

running Embedix (embedded Linux) distribution with a 2.4.x kernel. When the system starts,

the user can see typical Linux boot information (in text mode) which in a few seconds is

followed by a GUI called Qtopia. It is very intuitive and it looks very similar to desktop

graphical environments like Gnome (some might say it looks more like desktop Windows

than Windows Mobile does). Zaurus comes with large collection of additional software

including PIM, spreadsheet and word processing software, an entertainment package (movie

player, image viewer, games), internet package (Opera browser, e-mail client) and many

more. In addition, the Java Virtual Machine is present which should accelerate the process of

growing a large base of applications. The physical user interface features a unique method of

data input. Besides touch screen and few control buttons Sharp has a built-in QWERTY

keyboard located behind a slide cover. In my opinion this is the best available solution. It does

not make the device significantly bigger and allows fast data input. Zaurus is a very

elaborated and easy-to-use product, unfortunately not available in Poland.

Figure 7 Sharp Zaurus SL-55009

Another way of obtaining a PDA with Linux onboard is by buying a PocketPC and installing

Linux on your own. There are two disadvantages of such a solution:

9 http://www.99er.net/zaurus/graphics/zaurus3.jpg

14

� -you have to pay for Windows Mobile that comes with the PocketPC even if you do

not intend to use it;

� -only IPAQ users can swap operating systems.

Summarizing, Linux in palmtops has all the attributes of becoming a huge success;

unfortunately the market is divided between two main players, PocketPC and Palm. Again

open-source software will have to fight for its position.

15

2. PDA applications and their UI.

2.1 Built-in user interaction comparison.

“The fight for market share between the two platforms is more than just one company

versus another; we are witnessing a microcosmic battle between two competing, diametrically

opposite ideologies. On one side, we have the Palm platform, representing simplicity or better

to say, representing minimalism: a Spartan layout of icons, spare use of color, and every

element on the screen serving a purpose. You have the applications that you need, no more,

no less. In the other corner, we have lots of colors, menus, and bloatware known as PocketPC.

Every imaginable feature is pushed into what is basically the Windows 95 desktop on a

smaller screen.”10 This chapter will not engage in the endless debate which system is better. It

will try to focus on comparing ways users can interact with the device.

PalmOS is much older system then PocketPC. The first version appeared in 1994 with

the presentation of the first Palm Pilot. For the past decade only minor changes were

introduced to the original UI. Palm created a standard of ways users can interact with the

device and Microsoft developers no doubt followed the example. Because of this it will be

much easier for me to overview and compare both platforms concerning user interaction.

Handwriting recognition – in the first devices in 1994 Palm used Graffiti software. It

is based primarily on a neography of upper-case characters that can be drawn blindly with a

stylus on a touch-sensitive panel called the Graffiti area. Since 2003 Palms feature Graffiti 2

which is very similar to the previous version. The company was forced to introduce this new

standard because it was sued by Xerox for stealing the patent for this type of handwriting

recognition. “Graffiti characters are written in the text area in the digitizer and appear on the

screen at the cursor location. The user specifies the cursor location by tapping directly on the

screen with the stylus.”11 Digitizer is the special area below the screen which is touch-

sensitive. It has four icons and a Graffiti area. In the newest devices (with a 320x480 display)

it is a part of the screen.

10 Lain Rodney O. http://www.macobserver.com/columns/ibrotha/2001/20010608.shtml 11 Ostrem Jean “Palm OS® User Interface Guidelines” (http://www.palmos.com/) p.24

16

Figure 8 Digitizer area on Palm12

PocketPC offers three handwriting recognition modes for text entry:

� Letter Recognizer

� Block Recognizer

� Transcriber.

Only one method of character recognition can be used at a time. The icon at the bottom-right

corner of the screen indicates the currently used method of recognition. Tapping on the “up

arrow” beside the icon will open a pop-up menu in which user can use to change input

method.

Letter Recognizer uses the area at the bottom of the screen called the Soft Input Panel (SIP).

It appears when the icon representing the current way of input is tapped. SIP is divided into

three sections. Left is reserved for drawing uppercase characters, middle section is for

lowercase letters and right is for numbers. The Letter Recognizer will interpret any characters

that the user writes in the SIP area and put the translated characters into the currently running

program wherever the cursor is. The strange thing about this is that when using Letter

Recognizer the user always enters letters as lowercase. To get an uppercase ‘A’, the user

enters a lowercase ‘a’ in the leftmost section of the SIP. This is not intuitive and is not a

preferred method of input.

Block Recognizer. It uses the Graffiti language – the same as in Palm. The SIP is divided into

two entry sections. The left section is for letters and right is for numerical entry.

Punctuation can be entered in SIP but a more effective way is to use the keys on the right side

of the SIP. Especially useful is the question mark button which enables a Demo that shows

what strokes to make to create a character. When mastered, Block Recognizer is a very good

method of input.

Last but not least is Transcriber. It allows the user to write anywhere on the screen and then,

when the user makes a pause, interprets written text into words and phrases. Another

advantage to Transcriber is that it doesn’t take up screen space, it gives the user the maximum

view of the application. Every person has their unique style of writing so it is possible that the

12 Ostrem Jean “Palm OS® User Interface Guidelines” (http://www.palmos.com/) p.24

17

Transcriber will make mistakes. Fortunately it allows a training mode in which it learns the

way the user writes particular letters.

Figure 9 Different types of text input on PocketPC (authors own)

Virtual Keyboard – in the case of Palm, the layout has not changed since the first

devices. “When the insertion point is in a text field, the user can open the onscreen keyboard

by tapping on the letters “abc” or “123” in the lower corners of the Graffiti area. The

keyboard dialog appears (…). The dialog displays any text currently in the field that contains

the cursor. The user can then add to or modify the text as necessary.”13 There are 3 buttons at

the bottom of the screen when in keyboard mode. They switch between characters in qwerty

style, numerical and international characters. Buttons are rather big and easy to tap. The

biggest disadvantage of the Palm keyboard is that it occupies the whole screen and the user

can’t see the application.

Figure 10 Virtual keyboard on PocketPC and Palm (authors own)

13 Ostrem Jean “Palm OS® User Interface Guidelines” (http://www.palmos.com/) p.24

18

In PocketPC the situation is better because the virtual keyboard occupies only the bottom part

of the screen. It is accessed by changing the input method with the icon in the bottom right

corner. Instead of a soft input panel a standard qwerty keyboard appears. In this mode usage is

not very easy, buttons are small and hard to tap. Fortunately, Tools menu offer changing to a

larger font. In this mode, buttons are bigger at the cost of numerical keys. They are accessed

by the “123” button. A keyboard with special foreign characters is also available.

Hardware – both types of devices have the same set of necessary hardware buttons: one 5-

way navigation button (older Palms had 2-way for scrolling) and four application buttons.

Application buttons have some default values but they are fully assignable so they can point

to any application. PocketPCs often have additional buttons like a record button which starts

the voice recording program or a jog dial useful for scrolling pages or adjusting volume. In

contrast, the Palm has an additional four buttons in the Graffiti area. They are necessary and

should not be assigned to anything else. Every device (from both platforms) has a built-in

speaker, PocketPCs often have a microphone. This gives a possibility for the future to control

devices by voice.

2.2 Types of applications.

A PDA is a specific device. Due to its size and technical specifications not all kinds of

applications are available for it. According to “Smartphone and Pocket PC Magazine” PDA

software can be divided in following categories:

� Communication

� Games

� GPS

� Information Managers

� Internet

� Multimedia

� Text and reference

� Utilities

Communication includes programs that are used for phone and fax options as well as

for synchronization with PC. First one means managing phone calls, faxes, sms, GPRS and

recently even voice over IP like Skype. Synchronization applications can introduce new

functions or totally substitute original software if it does not support e.g. selected PC-based

19

contact manager or we want to connect unsupported hardware (synchronizing with

Macintosh).

Games. As we know portable devices are always with us and in certain situations like

waiting for something or taking a journey there is a need for entertainment. In such instances

playing a game on a palmtop is obvious. Devices are becoming faster and faster, some even

have 3D graphics accelerators installed, screen resolution is increasing and memory prices

drop. This gives the opportunity of creating great-looking games with high playability. Their

types differ from uncomplicated mind games with simple graphics to advanced 3D action

shooters.

GPS is becoming standard equipment of new PDAs so there is more and more

different software to support it. It is very useful not only when driving a car and using GPS

guidance on the road but also when hiking, sailing or doing any other outdoor activity, or for

controlling employees carrying a device with GPS and appropriate application. Some people

buy PDAs only to use it as a GPS locator, forgetting all other possibilities of this device.

Information Managers include applications from which everything began. This

means all contact managers, PIMs (personal information managers), secure information

managers, and other information data used by users like finance, health, sporting, planners

and databases. Such applications do not change much over the years but designing a proper

user interface at the beginning is crucial.

Internet. Together with the development of wireless networks more and more devices

can be connected to the internet. It can be done by WLANs, GSM, or even standard wired

connection when in docking station. This gives the opportunity of making the same internet

software as for PCs. This means internet browsers and web utilities, e-mails, chats, news

readers, terminals etc. On the other hand web pages are designed for PCs with bigger screen

and higher resolution so a PDA web browser needs to be designed in such a way that the user

will be able to view a standard web page. Another solution is to visit pages made especially

for palms but that it is rather rare.

Multimedia is the second type concerning entertainment. It gathers all kinds of audio

and video players, image managers, drawing and designing utilities but also presentation

creators or music makers. When hardware reached certain level of development (faster CPUs,

more memory, hi-res color displays) it appeared obvious that all applications with high

requirements can finally be implemented. Users can watch full length movies that look quite

20

nice and occupy sensible amount of memory space. They can also listen to high quality music

limited only by memory size or view images and edit them. It is not as comfortable as on a

desktop PC but can be very useful in some cases.

Text and reference. The next category consists of programs that concern textual

information. Those are all kinds of e-book readers, dictionaries, document viewers and all

other applications that make palmtops an interactive book. Unfortunately, due to insufficient

size of the screen and small letters, longer reading is not very comfortable but as a fast and

portable document viewer it is just fine.

Utilities. The last category consists of applications that can’t be placed anywhere else

but are very useful. For example they are responsible for how a PDA works, how it looks,

how secure it is. They are also non-complicated applications like calculator, unit converter,

file manager, task manager, TV remote etc. Simply those are the programs that make the

user’s life easier, either in operating PDA or in everyday activities.

2.3 Analysis of UI elements and overview of popular applications.

In this section I have decided to present a precise example of an application for every

category from the above classification. This includes both hardware platforms and in some

cases additional comparison with PC version. I will focus on analyzing how the user interface

is designed, how easy it is to use and how both hardware platforms differ. Applications were

tested on Palm Tungsten E (320x320 color screen) with PalmOS version 5.2.1 and PocketPC

Palmax Z710 (320x240 color screen) with Windows Mobile 2003 installed.

Communication – in this part I will present two clients for the most popular Polish

instant messaging computer program – Gadu-Gadu. Both of them are unofficial but are stable

and quite advanced. The first one, Pocket Gadu is designed for PocketPC. It is a freeware

application written by Adam Kunka. The author tried to make it as similar to the desktop one

as possible.

21

Figure 11 Pocket Gadu 3 (authors own)

In creating this program the author deeply thought over the user interface which results in

ease of use. The screen is filled up with information. On the left there is a conversation

window, on the right the contacts window and in the bottom space where you write your

message. On the screenshot letters appear to be small but it is easily adjustable. The program

has all the features of the desktop version including contacts import/export, lookup function,

conversation archives etc. It also installs a small notification icon in the Today menu bar. If

the application is running in the background and there is an incoming message – a notification

appears. It is a message balloon with the incoming text and information on the identity of the

sender. I assume that the user interface is designed according to the „PocketPC User Interface

Guidelines” from the MSDN library.

The next application is another free client for Gadu-gadu called Radu-gadu. It is written by

Radosław Nowak and is the only GG client for PalmOS. Compared to previous the

application it looks much less attractive but there is an explanation for this. Although

Tungsten E screen has resolution 320x320 (better than Palmax) and runs PalmOS 5 operating

system, many applications are written to be compatible with older PalmOS which had a

160x160 display. Despite looking less interesting, the application has all the necessary

functions. One serious disadvantage is that it does not allow importing contacts, they all need

to be written in by hand.

22

Figure 12 Radu-Gadu (authors own)

Games – in this section I will present two very popular and nice looking games with

revolutionary user interface. More advanced games do not use a user interface based on

standard elements built into the system. Developers had to design them from first principles

because games must have an easy interface that can be used in extreme conditions (by that I

mean fast action games where quick operating is very important.

For PocketPC I have decided to present Tomb Raider by Eidos Interactive.

Figure 13 Pocket Pc Tomb Raider

Tomb Raider is a very good conversion of the desktop version. It has the same 3D graphics,

sounds, story plot etc. Designers had a tough problem of how to keep the original playability

while having only few hardware buttons, often not very ergonomically placed. They proposed

a genius solution for user interface in this game - using touch screen, but not at the expense of

game screen size. Buttons that they made are semi transparent so the whole screen is used by

the actual game (320x240 – horizontal orientation) and there is place for 7 buttons around the

screen. Together with hardware buttons they make a portable game console out of a

PocketPC. These virtual buttons are placed wisely, and have the right size to be touched with

23

fingers. Unfortunately they cannot be used instantly (this is a touch screen after all) but

functions of “virtual” and hardware buttons are divided in such a way that they supplement

each other and there is no need of touching screen instantly in two places. This game does not

use the stylus at all while the next one, for PalmOS, uses it all the time.

For PalmOS I will present Warfare Incorporated by Handmark Software designed only for

PalmOS 5 and higher so it supports 320x320 or larger 320x480 screens.

Figure 14 PalmOS Warfare Incorporated

This is a Real-Time Strategy which has numerous predecessors on PC machines. Designers

did an excellent job here using every available millimeter of the PDA screen. This game is

controlled using the hardware buttons and the stylus. The way of using them is quite intuitive

and very responsive. Units can be grouped by dragging the stylus across them, or groups of

the same units can be selected by double tapping on them. The stylus substitutes the desktop

mouse and does it quite well. Tapping the screen is like touching button 1 of the mouse and

holding it down a bit longer is button 2. Most of the screen is filled up with colorful

landscapes, detailed buildings and units. Only at the bottom there is small status bar with a

minimap. I must say that although the user interface is different from the ones in similar

desktop games, Warfare has the same playability and provides a lot of fun.

GPS – here I will show the most popular usage of PDAs GPS – personal navigation.

For PocketPC it will be AutoMapa made by the Polish company Aqurat and for Palm

Navigation Software by TomTom. For unknown reason there is a wide variety of navigation

24

software that includes Poland for PocketPCs while there is almost none for Palm. In the

worldwide scope the situation is more balanced.

Figure 15 AutoMapa ver. 3.9.3 main screen (authors own)

AutoMapa was presented in 2003. Since then the application is constantly upgraded

and the current version is 3.x, soon we will be expecting version 4. During changes in the

program the user interface was also redesigned and rebuilt. In navigation software the most

important thing is the map showing the current location and surroundings. In usage mode

most of the screen is occupied by the map, on the bottom there is a standard menu bar (it can

be hidden) and on the top there is information on the current location and directions. Graphics

are well designed and it is easy to follow the selected route but it is not always possible to

watch the screen. For example if the user is driving a car it is very dangerous to stop focusing

on the road and watch the PDA screen. That is why developers have included a voice

interface. The program informs the driver in advance about maneuvers that he needs to make

or when he approaches important locations. I think that in future this application will also be

controlled by voice. In this particular case a voice user interface is necessary.

25

Figure 16 AutoMapa options and virtual keyboard menu

As I mentioned before the user interface in this program is constantly upgraded. For example

when calling up the menu bar item in older versions, a list of possible commands appeared

and the user could choose what he wanted. It was designed correctly and according to

Microsoft guidelines. Also when the user wanted to input text it was done using a standard

input panel. To use those functions, the user had to hold the PDA in one hand and stylus in the

other. But in case of car navigation it was uncomfortable to stop the car, take the device out of

its holder and play with the stylus. That is why current versions have this redesigned. Menu

commands are now in the form of large icons occupying the whole screen – they are easy to

touch with fingers. The input keyboard is also new with large buttons so the stylus is not

needed anymore.

In the case of PalmOS the situation for the Polish user is much worse. AutoMapa is still under

development for this platform and foreign navigation software treats Poland as a blank space.

Currently the situation is being changed by the company TomTom with its Navigator 5,

unfortunately it covers only 18% of road network in Poland (at the time of writing this thesis).

26

Figure 17 TomTom Navigator 5 main screen, options and virtual keyboard 14

I was not able to test this application by myself because TomTom does not offer a demo

version so I will use a review by Dave Burrows on www.pocketgps.co.uk . Navigator 5 is one

of the best navigation programs. It covers the whole of Western Europe including Poland, the

application is elaborated in every way and there are almost no disadvantages. It has a very

intuitive interface with all available facilitations (we are still waiting for voice commands).

“TomTom have done a good job on the menu system, making it easy to select using a finger

or a stylus. Using your finger when on the move can be a lot easier, but will obviously put

fingerprints and smudges on your PDA screen (…) The voice prompts used for navigation can

be changed by selecting either a different language, or a different person within your local

language.”15 Navigator 5 is also available on PocketPC.

Information Manager . This group is presented by very simple but indispensable

Personal Digital Assistant application - a contact manager. For both platforms programs come

as a part of the embedded system. They are essential and must have an easy UI. In both cases

they are called Contacts. In PocketPC it is accessed by pressing the hardware button (button

number 4 is assigned to Contacts) or by tapping the link that by default appears in the Start

Menu. Then a start list of contacts appears. Starting from the top the user can see a drop down

menu in which the filter of displayed contacts can be set. On the right there is a text box for

contacts look-up. It automatically toggles the input panel on. Below there are tabs with letters

of the alphabet divided in 3 letter groups. It is very useful in cases of long lists of contacts

14 www.pocketgpsworld.com/tomtom-navigator-pda-5.php 15 Burrows Dave “ TomTom Navigator 5 PDA Review” www.pocketgpsworld.com/tomtom-navigator-pda-5.php

27

because it allows a quick jump to the selected letter that the contact begins with (this feature

can be switched off). From the bottom there is a standard menu bar with three commands

(New, View, Tools) and input panel toggle button. The Tools/Options command offers three

useful changes in the list view. The user can switch off the ABC tabs, turn on showing

additional contacts data and toggle usage of larger fonts (this option should be on by default

because small fonts are hard to read). Creating new contacts allows input of various sorts of

information as well as some arbitrary notes (including handwritten). View command offers

sorting contacts by name or by company. In my opinion it is a useless option, there is no

possibility of selecting any other criteria of sorting. Another disadvantage is not being able to

change the size of the font when viewing contact details. It is too small and in the case of a

large amount of information it can be misleading. A better solution is applied in Palm.

Figure 18 Contacts for PocketPC and PalmOS

The Palm application has gone a long way since the first Palms and I suppose there is no way

to improve it more. It looks a bit nicer then PocketPCs application, but still is designed

according to Palm OS guidelines. In the top left corner there is a tab with the name of the

application, when pressed options menu appear. Next to it there is an icon of a magnifying

glass which allows a quick look-up with use of the hardware 4-directional button. In the top

right corner there is a drop down menu which allows filtering contacts. On the bottom there is

a look up text box, next to it a “new” button and scrolling arrows. Next to each contact there

can be a small icon which directs straight to additional note for this element. Information

about a selected contact is presented clearly, the font depends on the amount of information

displayed. PalmOS Contacts has a bit more options than PocketPC and is simpler to use.

28

Internet – PocketPC comes in standard with Microsoft Pocket Internet Explorer. It is

a clone of the desktop IE but with fewer options. On top there is an address bar and on the

bottom in the menu bar “view” and “tools” commands and icons for necessary functions of a

browser: previous page, reload page, home and favorites. Browsing through the internet is not

very comfortable due to the small screen size and low resolution. The program offers some

options to reduce this effect such as changing the font size or fitting the page to the screen, but

this is often not enough. Another solution is to visit only pages specially prepared for

palmtops. Pocket IE is not a very sophisticated program and has few disadvantages. First of

all it allows only one page opened at a time, the user cannot work on two pages together.

Another thing is that there is no full screen mode, there will always be a system and menu bar.

Also not all web pages can be opened with this browser. These bugs are fixed by a

commercial plug-in called MultiIE.

Figure 19 Pocket Internet Explorer,

page designated for PDAs standard web page (authors own)

Tungsten E does not have a built-in browser, probably because it is still a personal digital

assistant. In my opinion PocketPC tends to be a fully functional computer (and this is the

future of such a device) while Palm keeps to its task of being a PIM and a PDA.

To complete this comparison I decided to install Web Pro 3 browser. It has a rather similar

interface to Explorer. On the top there is a tab with the application name (when pressed

options appear), next to it are the most important icons. The application is controlled with a

stylus and a 5-way navigator button. Fonts are quite big and unchangeable, which obstructs

29

the viewing of normal web pages but is just enough for PDA focused. This program also has

few options to make standard web pages readable but it will not substitute a larger screen.

Figure 20 Web Pro 3 browser

Multimedia – for PocketPC this section is again represented by a built in application:

Windows Media Player 9 for PocketPC. It offers audio and video playback (but only mp3 and

Windows Media formats). In my opinion the standard interface is not user friendly. Buttons

look nice and fancy but they are a bit too small and are placed too close to each other to be

pressed with fingers. There are very few options on the main screen and some of them are

often useless. Fortunately this program offers skin changing. Changeable skins are useful

because they can substitute a badly designed GUI. Also programmable hardware buttons

make use much more efficient; the user can control basic functions without looking at the

screen.

Figure 21 Pocket Windows Media Player 9 (different skins)

30

Palm is represented by a non standard application called Pocket Tunes. It is only an audio

player but fulfills its function well. As well as PocketPC it offers changeable skins. It offers

more options than Media Player, accepts most audio formats and .m3u playlist files. The

application allows to playback audio and work with other programs instantly. The standard

skin looks very simple and monotonous but it is very functional.

Figure 22 Pocket Tunes (two different skins)

Text and reference – this section in both cases is presented by Adobe Reader.

Figure 23 Adobe Reader for PocketPC and PalmOS

The name is the same but there are some differences between these applications. Due to the

fact that .pdf documents are not designed for PDA devices, they need to be transformed into a

form that is acceptable by palmtops. This means that all unnecessary pictures are removed and

text is narrowed so the document is only scrolled in one direction. In case of Palm such a

transformation is done on a desktop PC which then sends the new file to the device during a

31

HotSync process. PocketPC does this transformation during operation and also gives the

possibility to see the document without modifications. One strange thing about Palm is that

there is no possibility of zooming onto a document. Viewing details of a picture is not

possible while in PocketPC there is no problem with that. Analyzing the user interface I must

say that it is quite nice. In both cases scrolling is controlled by a 5-way navigator button, by

tapping the stylus and moving the text up or down or simply by tapping the scroll bar. Both

applications are very good, with small the advantage of the PocketPC version which has more

options.

Utilities – in this section for PocketPC I will present a very useful application: File

Explorer. As the name shows this program manages files. It looks very similar to the desktop

Windows folder view in detailed mode. It works almost the same, tapping file or folder is like

clicking it with a mouse. To call out the second button function the user just needs to hold the

stylus a bit longer. The interface is almost the same as in the desktop version except with one

small detail. In does not have a “go folder up” button, the user needs to click the drop down

menu in the upper left corner and select the folder he wants to go up to. Sometimes this is

very irritating.

PalmOS does not have such an application, the idea of system developers being that users do

not have access to files stored in memory, or even on the memory card. Luckily there are

applications that allow that. One of them is Uninstall Manager by NorthGlide Systems. As the

name suggests this program is mainly for uninstalling applications but has options of a file

manager. It is designed for higher resolution screens so everything looks nicer, icons are

small, but well placed and there is no problem with operation.

Figure 24 PalmOS Uninstall Manager

Figure 25 PocketPC File Explorer

32

3. Analysis of User Interface in a PDA.

Part of this chapter is written with help of two documents concerning user interface:

- “Palm OS® User Interface Guidelines” written by Jean Ostrem from Palmsource.

- “Pocket PC User Interface Guidelines” from Microsoft’s MSDN library.

They are official documents for application designers and developers that want to create

mobile applications. According to authors guidelines presented in these papers are based on

usability research and following them will provide good user experience.

“Palm OS® User Interface Guidelines” is a large book (over 160 pages) available on web

page or as a .pdf to be downloaded. It completely describes every aspect of creating UI for

Palm. Starting from general principles and limitations it goes through description of user

interaction means and general application layout guidelines. Main part describes every

possible element of graphical user interface – this means instructions when to use it or not,

where to place it to be similar to other PalmOS applications and what mistakes to avoid.

These descriptions are very precise so developers would create applications according to the

scheme. User encountering such an application knows what to do and what to expect when

using a control.

The biggest disadvantage of this book is its age. First edition was published in mid-90s and

despite modifications done among the years (latest in 2003) it still presents point of view from

1996. Some limitations like battery life and memory size is not an issue now. Guidelines in

this book are focused on creating graphically simple applications that could work fast on a

slow processor. This is not valid anymore because modern Palms have fast CPUs and users

demand esthetic and nice looking applications. Majority of modern devices running PalmOS

have high resolution (320x320) screens. This fact is omitted in this book while it totally

changes creation of User Interface and gives enormous possibilities to the developer. This is

not only a problem of this particular publication but whole Palm policy. Most applications run

at 160x160 even if the screen is high resolution (they double-pixel).

“Palm OS® User Interface Guidelines” is a very good book. It contains useful information for

developers and presents every aspect proper UI creation but unfortunately is out-of-date. If

PalmSource will ever make a market entry with new Palm operating system (Protein) they

should write user interface guidelines from the scratch.

33

“Pocket PC User Interface Guidelines” is SDK documentation available only on Microsoft’s

MSDN web page. It is more or less up-to-date with last modifications in 2005. All the

guidelines are grouped and stated in form of bullet points. It makes this document clear and

easy to read. Similarly as in PalmOS book they are divided into general guidelines and more

precise description of shell, controls etc.

Unfortunately information presented in this document is indefinite. Guidelines are stated

arbitrarily without any clue, irrelevant tips are mixed with important information.

Descriptions of graphical elements are done without any scheme, only few of them have

pictures of these elements. There are many aspects of UI creation that this document doesn’t

mention at all like e.g. user interaction. Some of guidelines stated in this document are not

used even by Microsoft itself what makes it a bit confusing and unreliable. There are very few

pictures and screenshots that would illustrate written statements.

Summarizing, “Pocket PC User Interface Guidelines” is a collection of loose tips of how to

create UI, placed without any particular scheme. Microsoft, as a leading producer of operating

system for PDAs, should prepare a proper documentation that would really help developers.

3.1 General guidelines for creating a proper UI.

Many developers think that a handheld device is just a very small laptop. They try to port

existing desktop applications directly to the PDA which results in a very complex and

unusable interface. This is not the right way to proceed. There are a few key characteristics

that should influence the design process of user interface applications.

Size and Ergonomics - Palmtops are designed to fit in a shirt pocket so they have a small

screen and no keyboard. “Designing applications to use such a small screen is a challenge.

Displaying the right information is more important than fitting as much information on the

screen as possible. You must strike a balance between showing enough information and

keeping the interface uncluttered and simple to use.”16 On desktops users use 20% of an

application’s features 80% of the time. Palmtop application should provide only that top 20%

of features that are often used. On a desktop to add new functions the developer simply adds

another button to the toolbar or adds another menu. On the palmtop it is not possible,

otherwise the screen becomes too cluttered, and the application too complicated to use.

The size of the PDA determines yet another thing which is limited data entry. A desktop

system is perfect for entering large quantities of data. Keyboard and mouse allow users to

16 Foster Lonnon “Professional Palm OS programming”, Wiley Publishing, Inc., 2005 p.4

34

input lots of data in a short period of time. Portable devices also have useful ways of entering

data but they are not as convenient as the desktop method. There are some devices with small,

built-in keyboards or external keyboards are available but developers cannot assume that the

user has either of them.

Speed – palmtops are designed to facilitate organization and managing of the user’s life so

any situations when the user waits for an application to start or gets stuck while executing

basic commands is not preferable. “On a desktop, users don’t mind waiting a few seconds

while an application loads because they plan to use the application for an extended amount of

time. On a handheld, users want to quickly look something up and then go on about their

lives, and they do this several times a day.”17

Figure 26 Contrasting use patterns of Handheld and Laptop18

Applications should be optimized to work in short but frequent sessions. I suppose this is the

reason why in the PocketPC, once opened an application is still running in the background

and is always ready to appear again. This is the worst possible solution because it blocks the

memory. Moreover to turn off an application permanently the user needs to navigate deep into

the settings menu. Palm solved this problem in a much better way. Although PalmOS is a

single-threaded operating system it is strongly suggested that developers should make

applications starting instantly in the place where the user stopped working so it would look as

if they are constantly in memory.

To facilitate and speed up application control developers should think about minimizing the

number of steps and taps to access vital commands. “Desktop user interfaces are typically

designed to display commands as if they were used equally. In reality, some commands are

used very frequently while most are used only rarely. Similarly, some settings are more likely

to be used than others.”19 In the case of palmtops developers should think about placing

17 Ostrem Jean “Palm OS® User Interface Guidelines” (http://www.palmos.com/) p.4 18 Ostrem Jean “Palm OS® User Interface Guidelines” (http://www.palmos.com/) p.4 19 Ostrem Jean “Palm OS® User Interface Guidelines” (http://www.palmos.com/) p.5

35

frequently used commands and settings to be easy to find and fast to execute. On the other

hand keeping balance is required because placing too many buttons overcrowd the screen.

It is very important to be consistent, not only inside the application but together with the

palmtop’s built-in applications. Users will quickly learn to use the program if the user

interface is similar to applications they already know. That is why I will state my conclusions

based on two documents from Microsoft and PalmSource, describing how to create a UI

according to their standards, and my own observations.

3.2 Graphical User Interface

3.2.1 Shell environment Before describing graphical elements that can be used in applications I need to explain what

influence it can have on the shell environment.

Notifications. When a program is running in the background it can notify the user about some

event. It can be a phone ring, an appointment reminder, an alarm, a low battery warning, an

incoming message in a messenger etc. In the case of Palm it is a new form containing

information about this event. Previously running application is stopped and can be opened

anytime the user wants.

Figure 27 Notifications on PPC and PalmOS

PocketPC notifies by displaying an icon in the title bar or an icon and a message balloon. In

both cases notification can be associated with a sound. Also a light-emitting diode can be used

to alert the user, but it is determined by the equipment manufacturer if it is implemented or

not. Notifications should be customizable (for example if the user does not want a sound). In

case of Palm it is arbitrary how the notification looks because it is a new form. In case of

36

PocketPC guidelines specify exactly what it should look like. It is caused by the limited size

of message balloons. Action command should be on the left while “cancel” on the right. A

balloon contains a title, subheading, body text and command buttons. The icon in the title

must be 16x16 pixels, white on a transparent background.

Icons. Every application should have an icon to identify it in the launcher as well as a short

name to identify the icon. Although an application can run without any icons at all, it is the

first thing the user sees when launching the program. Including large and small icons in

highest possible resolution and color depth is a good idea. For Palm the standard size of a

large icon is 22x22 pixels but if the application is not planned for older devices it can be

44x44 pixels which looks really nice. Palm guidelines also suggest that the icon has a circular

background so the user would know where to tap. For PocketPC it should be 32x32 pixels but

high resolution devices can have 64x64.

Figure 28 Icons on PPC and PalmOS

PocketPC offers placing the application icon and description on the Today screen (which is

more or less like a desktop on stationary Windows) but developers must be sure that their

application is something that the user might want instant access to. On the contrary in

PalmOS the user is always in program selection form so any application is quickly accessible.

Forms. This actually belongs directly to the application but due to the fact that it is a linker

between shell and application it is described here. Form is a container (from the visual and

program side) for elements of the user interface. It usually represents a single screen in an

application. If a program presents a user interface it must consist of at least one form (it can

contain more for showing different views and dialog boxes). A very important feature of a

form is a title bar. It provides context when the user navigates within an application and

should never change to document names, wizard titles etc because it can confuse users – they

won’t know what application they are actually running. Correctly worded title bars prevent

users from getting lost while going through different screens and applications. In PocketPC,

tapping the title bar causes the Start menu to pop-up, while in Palm it can trigger a menu or by

tapping small tips icon show a dialog box with helpful information. Forms and dialog boxes

37

should be as clear as possible. The programmer may be tempted to put all options right on the

first form to allow quick access to as many commands as possible. Doing so is not a good

idea, it makes applications more difficult to learn and slows users down by forcing them to

search the screen for wanted control. Few buttons wisely placed that open simple dialog boxes

are much better then trying to load everything onto one screen.

3.2.2 Controls One of very important guideline is to use standard user interface resources whenever possible.

Except situations when an application needs unique interface (like in games), it is a good idea

to use default buttons, menus and other elements. They provide a familiar environment to the

user and familiarity makes programs easier to use. That is why I describe typical graphical

elements.

Executing commands.

Menu – very basic element of GUI. It provides access to commands without occupying much

space on the screen. PalmOS and PocketPC present two different approaches to this element.

Figure 29 PalmOS Menu bar and command toolbar

Palm uses a menu bar on top of the screen with drop down menus. It is toggled by tapping the

title bar and there is only one menu bar for one form. Each form can have a different menu

but the most common menu items are Edit and Options. If a menu contains lots of commands

it is a good idea to group them using a divider line. Additionally Palm gives the possibility for

advanced users to use shortcuts for accessing menu items, the so called command shortcut

(PocketPC also offers shortcuts but only if the hardware keyboard is present). It is a single

character on Graffiti that allows access to a given item. Additionally Palm offers a command

toolbar called up with a special Graffiti command stroke. It contains buttons in the form of

icons and each of them is assigned to a particular menu item. In the case of Palm, displaying a

menu requires an extra tap. This means that if we want to have a fast UI, the menu should

store less frequently used functions.

38

PocketPC presents a different approach. The primary menu bar is placed at the bottom.

Except applications with a totally individual GUI it is always present, even on the default

Today screen. It also provides access to the input panel which is presented in the form of an

icon in the right corner. Elements are placed on the menu bar in the form of toolbar buttons.

Developers should use this toolbar for creating access to common actions. Buttons can be in

the form of names or icons. Text labels should be grouped to the left of iconic labels. The

suggestion is to use more iconic buttons because they occupy less space. Toolbar buttons can

be in 3 different states: disabled, at rest and active. The font used for text labels should be

Tahoma bold 11pt. PocketPC also offers something with the functionality of the PalmOSs

command toolbar. It is a Pop-up menu. It is triggered by tapping and holding an item on the

screen. To turn it off the user taps any other area of the screen. This menu should appear

below the screen item. Commands from the pop-up menu must be available from the menu

bar. The order of list commands is determined by expected frequency of use.

Figure 30 PocketPC Menu bar and Pop up menu

Command buttons. One could think that Palm has less functionality because of the lack of a

menu bar at the bottom, but this is not true. The same functionality is obtained by using

command buttons.

Figure 31 PalmOS command buttons

Buttons are used to instantly launch commands or switch to other screens in an application

with a single tap. On Palm they usually have a rounded frame and contain text but it is not a

necessity. In the main form they should be left aligned with a 4 or 8 pixel distance between

them. When tapped and held they change color. On PocketPC they can be in 4 different states:

At Rest, Focus, Action, Disabled and text in them should be in 8pt Tahoma bold font.

39

Figure 32 PocketPC command buttons

Buttons should be used for the most frequently used functions. They require only a single tap

to activate a command so it makes them the quickest user interface element that can be used.

Buttons are perfect for creating new entries, calling up detail on a particular record or

switching between major forms. On the other hand too many buttons on a form is inefficient

because users spend more time on searching the screen. Generally if there is enough space

they should be used.

Microsoft specifies minimal size of buttons depending on method of interaction. To use with a

stylus the smallest dimension should be at least 5.04mm and to be pressed with a finger it

should be at least 9.12mm.

Presenting Options

Check boxes – they are one of a number of possible ways of presenting options. Correct

choice of presenting option depends on the situation and functionality that a developer wants

to offer. A check box is used to indicate a setting that can be switched on and off. Tapping

either the box or the text next to it toggles the value of a check box. On both platforms text

concerning the check box is placed on the right by default. Check boxes are good for

situations when choosing several from many, to be precise when more than one setting can be

turned on at a time. PocketPC offers a few more options in this situation. Because list view

control support check marks next to selected options it can be used instead of the check box.

Figure 33 Check boxes on PocketPC and PalmOS

40

Push button / Option button – these buttons perform the same function as radio buttons.

They appear in groups of two or more and provide mutual exclusive choices meaning only

one button in the group may be selected at a time (it is highlighted). They are used when one

option needs to be chosen from a number. This is the fastest way of making a selection so

whenever there is enough space they should be used. The only disadvantage is that push

buttons are vulnerable to changes. If a developer plans to add new functions in the future or

localize it, he should use another way of presenting options.

Figure 34 Push buttons on PocketPC and PalmOS

Pop-up list / combo box – this element consists of an arrow pointing downward next to a text

label (it can change its width according to changes in the text). When the user taps the arrow

or text label an associated list is displayed. If a new element from the list is tapped the list

disappears and the newly selected item appears next to the arrow trigger. This type of

selecting options is very good for speeding up data input.

Figure 35 Pop-up list on PocketPC and PalmOS

If an application offers a choice from a list instead of forcing the user to enter it manually, the

user will spend much less time entering data. If there are more options than can be displayed,

small arrows appear that allow scrolling down the list. Items presented on this list should be in

logical order so finding an element is not difficult. Guidelines for these elements can be

broken if the functionality of an application requires it. Creating a pop-up list without an

arrow or without a text label is acceptable but only when it has a logical explanation. PalmOS

offers an additional element with similar functionality. It is a selector trigger which when

tapped doesn’t drop a list but opens a new form in which a selection can be made.

41

Choosing which option suits an application best is an individual preference. Additionally

there are some extra ways of presenting options such as:

-Spin boxes – they are alternatives to lists and combo boxes and are useful when the range of

values is continuous and predictable like numbers,

Figure 36 Spin box on PocketPC and PalmOS

-Split buttons – this control has a double function – it is a button and a menu. The menu

includes commands for secondary functionality. The input panel uses a split button.

Figure 37 Example of split button on PocketPC

-Tabs – they can be used in an application to group related information and functionality.

Microsoft guidelines suggest that developers must avoid creating more tabs than can fit on the

screen and avoid placing tabs at the top of the screen (at the same time, genuine PocketPC

application ,Contacts, have tabs at the top of the screen).

Figure 38 Tabs example in the form of "abc" tabs in the Contacts application on PocketPC

Sliders – this element is quite interesting because it also belongs to the presenting options

section. It allows graphically selecting a value from a range. The most obvious application of

a slider is volume control. Text, graphics or any information is added to this control to show

the purpose of the slider and what the beginning and end values are. Additionally on PalmOS

there are two types of sliders: regular and feedback. Regular changes the value when the

stylus is lifted from the control while feedback slider changes value whenever the slider

thumb moves.

Figure 39 Slider example on PocketPC and PalmOS

42

Lists – they present the same functionality as the pop-up lists but are constantly present. In

situations when there is always not enough space on the screen they are not often used - a

better idea is to use a pop-up list.

Gadgets – if none of the available ways of presenting options on PalmOS suits a developer’s

needs he can always make a custom user interface element. For example, a monthly calendar

view can be created to allow a selection of a particular day by tapping on it in the calendar. It

requires some work but it may be very useful. PocketPC contains by default similar elements

like time pickers or date pickers.

Figure 40 Gadgets in the form of Date Pickers

Scrolling

Scroll bars and scroll buttons – these are two controls that both systems provide to scroll

other controls. Because of the small screen size users often need to scroll the display. PalmOS

provides only vertical scrolling, horizontal is not supported. In PocketPC both scrolling

directions are available. Scrolling bars are used much more often than buttons. Scrolling

buttons are implemented in applications for a precise purpose. As a matter of fact the most

ergonomic way to scroll something on a PDA is by using hardware buttons. Even old Palm

devices have navigation buttons for scrolling so this is not a problem.

Figure 41 Slider types on PocketPC and PalmOS

43

3.2.3 Text In this chapter I will show the importance of textual information presented to users.

It all comes back to general guidelines for creating a UI for a portable device – the UI needs

to be fast to use. It becomes obvious that users operate quicker on an interface which is clear

and simple. That is why textual information contained on the screen is so important. First is

language. Not only does it need to be clear for the user but also ready for possible localization

of the program. Sentences should be simple and short. All elements unique for English

language like idioms, jargons, colloquialisms and metaphors should be avoided. If acronyms

are used, the developer must be sure that they are not used to represent something else and

they are not problematic in different languages. He needs to remember that different people

use PDA’s so geek jargon should be avoided (instead of writing reboot write start again or

restart). When using punctuation consistency is important - users should know what to expect

when seeing a colon, comma or ellipsis. Developers should consider the fact that different

languages use different punctuation rules. In case of capitalization Microsoft specifies

precisely what controls and what elements of labels should be capitalized. The text of control

labels is also important. Labels must adequately describe the function of a given control.

Developers should find a balance between saving screen space and providing enough text to

avoid confusing the user. When writing informational text use phrases instead of complete

sentences. If a problem occurs, identify the problem and provide a solution if possible. If there

may be consequences of this problem, information should be preceded by a warning.

The main rule about localizing is to leave an extra amount of free space because localizing an

English application usually takes more space on the screen.

Figure 42 The same application localized in different languages.20

20 http://msdn.microsoft.com/library/default.asp?url=/library/en-us/ui_guide_ppc/html/ppc_loc_issues_bsub.asp

44

3.2.4 Colors and Fonts On PocketPC there is only one font for system controls. It is Tahoma, bold or cursive

depending on the situation. Basic size for letters in Asian languages is 9 points and in all the

other languages it is 8 points. Smaller font sizes and fixed font sizes must be avoided. Font

size should be adjustable. None of the currently available PocketPCs has a grayscale display,

in fact most devices have a 16 bit color palette. Color can be used to highlight important

information and make effective, easy-to-read and contrasting color combinations. Despite the

fact that all displays in PocketPCs are color it is not a good idea to show the meaning of

critical features using colors because they can appear differently on different device displays.

Microsoft suggests avoiding hard-coding colors. Instead developer should use standard color

values (specified in SDK documentation).

PalmOS has its own specific font. It can appear in four different ways – 9 point regular, 9

point bold, 12 point regular and 12 point bold. 9 point regular should be used for textual

content of most controls – text inside buttons, pop-up triggers or selector triggers. As in the

PocketPC, in PalmOS the user should have the ability to set the font he would like to use.

Standard font picker included in the system allows choosing between 9 point regular, 9 point

bold and 12 point bold. PalmOS allows the creation of custom fonts but they should be used

only for presenting text data. For labels and controls a system font should be used. On

PalmOS the color scheme is simple to make it compatible with older applications. On the

other hand it offers the same possibilities as the PocketPCs because it also has a 16bit color

palette.

Figure 43 Typical colors on PalmOS21

3.3 Other ways of controlling UI.

GUI and built-in hardware buttons are not the only ways to control a palmtop. Ideas that few

years ago were treated as a science-fiction are now being implemented into ordinary devices.

21 Ostrem Jean “Palm OS® User Interface Guidelines” (http://www.palmos.com/) p.153

45

Nobody knows what the future will bring but the User Interface is still evolving and there are

many possibilities ahead. Currently the most interesting and promising is voice control.

3.3.1 Voice The idea of holding a PDA and controlling it just by talking to it is still amazing for me. In

fact, there are many commercial applications allowing voice control and they are fully

functional versions. As an example I decided to present Microsoft Voice Command for

PocketPC. It is an award winning software, winning the Best Speech Application award in

2004 and 2005. This application should be included by default into the Windows Mobile

system. Of course there are other commercial applications for voice recognition, and they

sometimes have more functions than Voice Command but Microsoft’s is closest to be

implemented into the operating system.

Voice recognition is very impressive software. It is not simple voice recognition like in

cellular phones when users first need to train the device. Microsoft Voice Command is

speaker independent, it requires no device training and most of all the user converses with the

device, it understands whole sentences not only simple commands. The voice recognition

engine is very good. It had no problems in recognizing my foreign accent. Unfortunately it is

not available in Polish language but I think that localizing this software is just a matter of

time. First versions of Voice Command were created to do five things: create a hands-free

phone, lookup calendar, lookup contacts, manage media player and be a program launcher.

The software idea came from the Microsoft Automotive group. It is sensible because it allows

interaction with the PDA while driving a car. If voice recognition is not implemented into the

operating system, at least it should be present in navigation software.

Figure 44 Voice Command application options form

I believe that soon Voice Commanding applications will allow the user not only to start e-mail

application but also to dictate the text of the message and send it without touching the PDA.

46

3.3.2 Peripherals To completely finish the topic of the PDA user interface I need to mention all the peripherals

that can be connected to the device to control it. Since PDA devices have a Bluetooth module

installed, it allows connecting arbitrary devices to the PDA. The only question is about the

sense of this.

The most popular peripheral that can be connected to a PDA is a keyboard. Keyboards for

PDAs exist since the first Palms. They were designed to ease entering large amounts of data.

To be as portable as the PDA they have different systems of folding them up into a small box.

This allows them to be taken everywhere together with the palmtop. Some models are

connected via Bluetooth interface which makes them a bit more ergonomic.

Figure 45 PocketPC attached to a keyboard

The newest idea of a keyboard is something as abstract as voice recognition – laser keyboard.

It uses a combination of lasers and an infra-red sensor to project a small Qwerty keyboard

onto a flat surface. It works just like a normal keyboard except that the user needs to very

precise while typing because it is very sensitive. As a matter of fact it is not the laser that

recognizes the characters but the infra-red sensor. The laser is used only to show the keyboard

on the surface and can be turned off. A laser keyboard is a very impressive way to input data

but a bit impractical. In the future, when this idea will be well elaborated and wisely

implemented into devices it can be a success. As an interesting fact I can say that a laser

keyboard is planed to be installed with desktop PCs in clean environments like hospital

because it is sterile – it simply does not exist.

47

Figure 46 Virtual Laser keyboard

Next peripheral is a mouse. Actually there is no elaborate device on the market but they are

now in development. A mouse for PDAs is created only to complement keyboards in creating

a fully operational work station.

Figure 47 Mouse designed for PDAs

Biometric reader - this module is not as obvious as other peripherals but it is still an element

of the user interface, despite the fact that it does only one function. It logs into the system or

opens secured applications etc. It can be build into a PDA or as an outside module. I can’t

think of situation when this could be useful but I have read opinions that this significantly

improves security.

Figure 48 Fingerprint reader application

48

Very important peripheral for PDA is a bar code scanner. It is used for managing warehouses

and shops. E.g. situation when employee of large cosmetics company visits a small town

shop. He can instantly order his company product if he sees that shop is running out of it. He

simply scans the product bar code and sends information via GPRS to the supplier. It is a

simple peripheral but necessary for modern tradesman.

Figure 49. Using PDA as a barcode scanner22

Together with a peripheral input method - barcode scanner there is an output – portable

printer. It is commonly used by debt collectors for example when paying electricity bills.

Electric company worker comes to your house, reads the counter and immediately prints a

receipt with his PDA connected to a printer. PDA also stores exact information like how

much money he collected or how long he has been working.

Figure 50. PDA printer23

22 http://www.semicron.com/sptbundle.html 23 http://www.yourmobiledesk.com/

49

4. Project realization.

4.1 Assumptions. To justify and confirm my conclusions from previous chapters I need to present an exemplary

application. It is an application that stores information about computers in a company.

Functional requirements:

� Creating entries – application should allow creating arbitrary number of entries and

assign an ID number for each entry (computer)

� Presenting picture – user should see a photo of the device in the main screen. It can be

done by a built-in camera or copied to the device as a file.

� Storing signature – person responsible for the device must place a signature on the

device.

� Different types of computers – defining the type of computer should either enable or

disable features (laptop device does not need location attribute because it is portable)

Non-functional requirement:

� User friendly interface – application should be simple and easy to use

� Custom controls – there should be a custom made control to show that developer is not

limited to standard controls

� Storing data in a combo box – information once entered should be available to be

chosen again. It speeds up usage and eliminates entering the same data.

� Limit the amount of data on the screen – information on the screen should not be

cluttered. Instead more dialog forms should be used.

4.2. Programming tools choice.

4.2.1 Windows Mobile 2003 Software Development Kit From the developer’s point of view, Microsoft mobile technologies can be divided into two

groups. First are the embedded systems and second is the .NET technology.

50

Figure 51 Classification of Microsoft's development tools24

Microsoft eMbedded Visual C++

Windows Embedded is a family of operating systems designed for different devices that are

not personal computers such as for example cash machines, bar codes scanners, industrial

drivers or all kinds of mobile devices. As the name suggests these systems are embedded into

the hardware and the end user is not (usually) able to modify them i.e. operating system and

basic applications are stored in read-only memory. Currently the Windows Embedded family

consists of two systems: Windows XP Embedded and Windows CE .Net which we are

interested in.

Embedded Visual C++ is a complete development environment used to create applications for

devices with Windows CE system installed. Code is written using Application Programming

Interface(API) specific for given processor type. This helps to obtain faster applications and

gives more control over the device. On the other hand it requires preparing specific version of

application for devices with various hardware configurations. For some time there have been

3 different CPU architectures competing on the mobile devices market: ARM, MIPS and

SH3. Currently almost every PocketPC device is based on ARM architecture and most of

them have Intel XScale processor onboard. This situation simplifies the creation of software

because only one version of application is necessary. Thanks to compatibility of basic .dll

libraries with Win32 API libraries it is possible to transfer parts of existing programs from

24 Yao Paul „Programming With eMbedded Visual C++ 4.0“, 2004

WWiinnddoowwss MMoobbiillee CCEE DDBB AAccttiivveeSSyynncc

PPoocckkeett OOuuttllooookk PPoocckkeett IInntteerrnneett EExxpplloorreerr WWiinnddoowwss MMeeddiiaa PPllaayyeerr

WWiinnddoowwss CCEE

SSooffttwwaarree PPllaattffoorrmm ((AAPPIIss))

HHoommee SSccrreeeenn UUsseerr IInntteerrffaaccee//SShheellll HHTTMMLL CCoonnttrrooll

GGAAPPII

RReemmoottee AAPPII CCoonnffiigguurraattiioonn BBlluueettooootthh SSeeccuurriittyy

CCoonnnneeccttiioonn MMaannaaggeerr TTAAPPII SSMMSS MMAAPPII PPOOOOMM AAccttiivveeSSyynncc

MMuullttiimmeeddiiaa CCoommmmuunniiccaattiioonn DDeevviiccee MMaannaaggeemmeenntt PPrreesseennttaattiioonn

AADDOO CCEE XXMMLL CCEE DDBB OOLLEE DDBB

DDaattaa AAcccceessss

NNaattiivvee

WWiinn3322

MMFFCC AATTLL MMaannaaggeedd

..NNEETT CCoommppaacctt FFrraammeewwoorrkk

SSeerrvveerr ssiiddee AASSPP ..NNEETT

MMoobbiillee CCoonnttrroollss

NNaattiivvee

WWiinn3322

MMFFCC AATTLL MMaannaaggeedd

..NNEETT CCoommppaacctt FFrraammeewwoorrkk

SSeerrvveerr ssiiddee AASSPP ..NNEETT

MMoobbiillee CCoonnttrroollss

EEmmbbeeddddeedd VVCC++++ VViissuuaall SSttuuddiioo ..NNEETT

51

desktop Windows in the form of the source code. Due to fact that desktop computers have

completely different UIs changes in code are necessary.

Windows Mobile 2003 is based on Windows CE .NET version 4.2 so Visual C++ needs to be

at least in version 4.0 SP2. If user would want to program older PocketPCs like 2000 or 2002

he would need a different version – eMbedded Visual Tools 3.0.

Microsoft Visual Studio .NET

PDAs are devices with limited hardware possibilities. Because of this it was not possible to

implement full versions of .NET Framework environment onto palmtops. Instead, Microsoft

created .NET Compact Framework. Applications can be run on various devices, regardless of

operating system or processor type used. The only condition is that the platform must support

.NET Compact Framework. .NET CF supports only a subset of full .NET environment but has

some additional libraries like Windows CE InputPanel dedicated specially for mobile devices.

This partial compatibility with .NET Framework is sufficient to use Visual Studio .NET 2003

or Visual Studio 2005 to create .NET Compact Framework applications. This is all possible

because they are designed for JIT (Just In Time) compiler – it translates bytecode into native

machine code at runtime. One of the key elements of .NET platform is CLR (Common

Language Runtime). It is an efficient mechanism that handles problems with memory

management, security aspects and objects life-time. It is possible to use different

programming languages to build an application.

4.2.2 PalmOS Software Development Kit PalmOS applications can be created in many different development environments but two of

them are most popular and most basic: CodeWarrior and PalmOS Developer Suite (PODS).

CodeWarrior

Metrowerks CodeWarrior for PalmOS Platform is a complete integrated development

environment (IDE) and for many years has been the most popular commercial C/C++

development suite. It was the first development environment officially supported by Palm and

for many years the only one. CodeWarrior package contains a number of various tools helping

to create resources, write code, compile it and run on a PalmOS emulator – every option

available from a user-friendly interface. Unfortunately CodeWarrior only supports

development of 68K applications which forces programmers wanting to create native Palm

52

OS Cobalt application to use PODS. Another disadvantage is that it is a commercial

application so I’m unable to write its review and program under it.

PalmOS Development Suite

In 2004, PalmSource introduced their first and very own development tools – PalmOS

Developer Suite. It is based on GNU PRC-Tools development system which for many years

was used by many programmers as a free alternative to CodeWarrior. PODS is appointed by

PalmSource to be the standard development toolset for PalmOS applications and is free to

download from PalmSource web site. Apart from the current Garnet platform it also supports

future platform – PalmOS version 6.x codename Cobalt (since 2004 Cobalt has been

implemented only into prototype devices). PODS comes with PalmOS Software Development

Kit as a combined toolset – this assures that SDK is in the latest version. The SDK includes

complete reference documentation for PalmOS, as well as various guides for programming

this platform. PODS is based on the Eclipse version 3.x IDE. The Eclipse Workbench is the

primary visual development tool used with PODS to create and manage projects as well as

compile, edit, and debug user’s code. Despite the fact that this Development Suite is an

official programming environment for PalmOS it is not well supported. It has many bugs in it

and PalmSource is not eager to fix them.

4.3 Project realization.

Figure 52 Use case diagram

53

Figure 53 Prototype of basic classes

Figure 54 Basic Activity Diagram

4.3.2 Windows Mobile application. To implement Windows Mobile application I decided to use eMbedded Visual C++

development environment. It is available for free for genuine Windows users and is a native

environment for ARM designated programs although designing UI in it is less comfortable

than in Visual Studio .NET. Program was written using MFC wizard. It simplifies creation

and makes basic classes by itself. Most of the functionality was not implemented because the

point of this thesis is designing a user interface.

When creating a graphical user interface it is important to constantly control how it looks like.

Due to that fact a WYSIWYG (What You See Is What You Get) resource editor is the most

appropriate.

54

Figure 55 eMbedded Visual C++ main windows

The window to the left is the Project Workspace Window, which shows the current classes,

resources, and files used in user’s project. The window to the right is the Edit Window and

user may do coding and edit menus, dialog boxes here. The window at the bottom is the

Output Window and it will display messages that result from compiling user’s program.

The most important part of this IDE is resource editor. It allows creation of UI elements with

a drag-and-drop method. There is a special controls toolbar which offers most of available

controls. As we will see later it could be better comparing to Palm’s resource editor.

Figure 56 eVC Controls Toolbox

Creating a control like ex. button is simple. User drags selected item to the Edit Window and

puts it in a selected place on a form. It can be moved around the form and its size can be

adjusted visually. Selecting properties from right mouse button menu allows changing the text

in the control as well as adjusting some additional features of the button like alignment,

visibility etc.

55

Figure 57 Push button properties dialog

Unfortunately, visual editing in eMbedded Visual C++ doesn’t offer all necessary functions.

User can’t input precise values of weight, height, placement on the screen etc. To do so, a

resource file needs to be edited. It is the [project name].rc file. This is the place where created

control source code appears. Our push button is presented in the following form:

PUSHBUTTON "Edit",IDC_BUTTON1,127,53,22,10

First entry informs us what kind of control we are editing. Next entry placed in quotation

marks is the text that appears in the control followed by identifier string. It could also be an

ID number but to ease programming system automatically creates entry in “resource.h” file

which defines every control with a string ID. Together with handle to the parent window

developer has access to this control. Next two values are x and y coordinates of starting point

followed by width and height of the control. Optionally these parameters can be followed by

style parameters (they are also available from properties menu in visual mode). Of course

control can be hard coded in the source file but visual resource creators are better.

Our push button control has been created now it needs something to do. Using MFC class

wizard we create a function that is triggered with a “button clicked” event. We also add some

code to be executed (in this case we want to create a dialog in which user data is placed).

void CTestpiano4View::OnButton1()

{

// TODO: Add your control notification handler code here

CPcUserDlg PcUserDlg;

PcUserDlg.DoModal();

}

56

Creating a dialog form is similar but this time we use Insert Resource toolbox. It can be

accessed by selecting Insert command from a drop-down menu appearing on arbitrary

element from ResourceView window.

User selects Dialog and presses “New”. A simple dialog form appears. In my opinion it has a

huge disadvantage that changing size does nothing to the output. Without customization

dialog always occupies whole screen, even if user makes it small. Another week point is that

there is no predefined size of the form. It should have default size that is the same as

PocketPC screen. We either have space left what is a large waste in case of portable device, or

the form is too big what results in scroll bars appearing on the form.

The above dialog form is represented by following code in the “.rc” file:

IDD_Userdlg DIALOG DISCARDABLE 0, 0, 139, 135 STYLE DS_MODALFRAME | WS_POPUP | WS_CAPTION | WS_SYSMENU CAPTION "PC User Data" FONT 8, "System" BEGIN LTEXT "Name:",IDC_STATIC,3,5,27,8 EDITTEXT IDC_EDIT1,39,0,79,14,ES_AUTOHSCROLL LTEXT "Surname:",IDC_STATIC,3,20,32,8 EDITTEXT IDC_EDIT2,39,14,79,14,ES_AUTOHSCROLL

57

LTEXT "ID:",IDC_STATIC,3,35,11,8 EDITTEXT IDC_EDIT3,39,30,40,14,ES_AUTOHSCROLL PUSHBUTTON "Save",IDC_BUTTON1,18,102,100,33 GROUPBOX "Signature",IDC_STATIC,17,63,102,37,BS_CENTER | BS_NOTIFY EDITTEXT IDC_EDIT4,39,45,79,14,ES_AUTOHSCROLL LTEXT "Position:",IDC_STATIC,3,50,28,8 END

Dialog form code starts with a unique identifier (also defined in “resource.h”) followed by x

and y coordinates of upper, left corner and dimensions of the form. Next are option-

statements of the form like style, caption and font size and type. After that in the “Begin-End”

section there are control-statements – controls that are associated with the dialog form.

These two short examples show creation of the standard UI elements in my application using

visual resource creator. The choice and functionality of standard elements is limited so

custom controls can be created. Resulting application:

Figure 58 PCfiling application on PocketPC

58

4.3.2 PalmOS application.

For PalmOS I created the same application as for Windows Mobile. Designing was done in a

program from PalmOS Development Suite package. It is called PalmOS Resource Editor and

is triggered automatically when user decides to edit .xrd(XML Resource Description)

resources file.

Figure 59 PalmOS resource editor

The window to the left is the control toolbox which shows all available controls that can be

dragged onto the form. In the middle window there is the dialog form on which controls are

placed. The window in the upper right part is a list of external resource files and created

dialog forms. Below it there is properties window which shows attributes of currently selected

element from the middle window.

Creating a button is as simple as in eVC. Just drag button icon and place it on the form. In

properties window user will see attributes of this button including its unique ID number, size,

coordinates and characteristics. If user wants to edit resource file manually he simply chooses

to open XML resource description file with a text editor.

59

Figure 60 PalmOS Developer Suite

This is the main screen PalmOS Developer Suite. The window to the right is the navigator

window with the list of all files involved in current project. The main window shows content

of a source file (here a .xrd file).

Our created button is presented in a form of XML entries and looks as follows:

<FORM_BUTTON> <ID> 1009 </ID> <BOUNDS> <LEFT> 132 </LEFT> <TOP> 80 </TOP> <WIDTH> 27 </WIDTH> <HEIGHT> 12 </HEIGHT> </BOUNDS> <USABLE> TRUE </USABLE> <ENABLED> TRUE </ENABLED> <TEXT> "Edit" </TEXT> <LEFT_ANCHOR> FALSE </LEFT_ANCHOR> <FONT_ID> STD_FONT </FONT_ID> <BUTTON_FRAME> RECTANGLE_BUTTON_FRAME </BUTTON_FRAME>

</FORM_BUTTON>

Every characteristic is well described in .xrd file so any explanation is unnecessary. Now that

we have our button we need to give it a function. It will open another dialog for user data

edition. To do so, we need to wait for a “button pressed” event. We check if this is our button

and call a function for creating new form. Then we need to redraw the frame.

60

switch(pEvent->data.ctlSelect.controlID) case MainFormEditUser:

FrmPopupForm(UserForm); FrmDrawForm(FrmGetActiveForm()); handled = true; break;

Creating a new form is similar to what we had in eVC. We need to enter Edit menu in

Resource Editor and press “New Resource…” A menu will appear with different types of

resources that can be added (much more than in eVC). After selecting Form an empty dialog

will appear. Its source code looks as follows:

<FORM_RESOURCE RESOURCE_ID="1700"> <FORM_ID> 1700 </FORM_ID> <BOUNDS> <LEFT> 0 </LEFT> <TOP> 0 </TOP> <WIDTH> 160 </WIDTH> <HEIGHT> 160 </HEIGHT> </BOUNDS> <USABLE> TRUE </USABLE> <MODAL> FALSE </MODAL> <SAVE_BEHIND> FALSE </SAVE_BEHIND> <HELP_ID> 0 </HELP_ID> <MENU_ID> 0 </MENU_ID> <DEFAULT_BUTTON> 0 </DEFAULT_BUTTON> <TITLE_ICON> FALSE </TITLE_ICON> <TITLE_BAR_FOCUSABLE> FALSE </TITLE_BAR_FOCUSABLE> <FORM_OBJECTS> <FORM_TITLE> <TEXT> "Sample Title" </TEXT> </FORM_TITLE> </FORM_OBJECTS> </FORM_RESOURCE>

Again explanation is not needed due to fact that this is described very well by default.

Dimensions of this form are 160x160. These are maximal values, despite the fact that modern

Palms have screens with doubled resolution. I suppose that this is all caused by policy of

Palmsource that wants to keep as much compatibility with older Palm as possible. I don’t

agree with this strategy and I think that PalmOS SDK should support high resolution displays.

61

Figure 61 PCfiling application on PalmOS

Nevertheless, I prefer programming PalmOS because source code for PalmOS applications

has a specific construction designed especially for palmtops. Microsoft’s Visual Studio is a

standard development tool with appropriate development kit – it doesn’t support portable

applications the way it could. Visual editor should allow editing properties of graphical

elements like exact size and placement – now it is done visually or by editing resources file.

Creation of custom controls should be easier and accessible from visual editor.

62

5. Summary This thesis takes up a recently popular topic – portable devices. Creating applications

for them is more difficult than for desktop PCs. Developer needs to consider creating user

interface that is appropriate for a specific device like PDA. I try to help palmtop developers

by presenting possible options of interacting with the device. It includes not only Graphical

User Interface but also peripherals and hardware elements. This thesis concludes that for

almost every application a proper interface can be designed. It is not necessary to always

create a custom interface which requires a lot of work. Majority of programs use typical

graphical elements and their functionality is still very good. This thesis provides a guideline

of how to use these elements, their pros and cons, but also a comparison of similar elements

available for two competing platforms. Final part of my work shows that creation of portable

application is fairly easy, especially when layout can be designed visually. This application

illustrates correct usage of basic graphical elements. Elements from this application may be

used in other projects but every program’s interface should be designed individually.

I hope that for the future reader this publication will be a good introduction to creating

intuitive and easy to use interfaces on portable devices.

63

Bibliography and References. 1. Ball Derek, Shilmover Barry “How To Do Everything With Your iPAQ Pocket PC”, Osborne/McGraw-Hill, 2003 2. Collins C.P., Brown Tracy “Pocket PC”, Helion, 2004 3. Foster Lonnon “Professional Palm OS programming”, Wiley Publishing, Inc., 2005 4. Kalinin Vadim “Palm & Pocket PC programming”, A-LIST Publishing, 2003 5. Ostrem Jean “Palm OS® User Interface Guidelines” (http://www.palmos.com/) 6. „Pocket PC User Interface Guidelines” (http://msdn.microsoft.com/) 7. “CHIP Special: Urządzenia mobilne”, Vogel Burda Communications, 2004 8. http://www.pdaclub.pl 9. http://www.palmtop.pl 10. http://en.wikipedia.org

64

List of figures Figure 1 Apple Message Pad Newton ........................................................................................ 6 Figure 2 Hitachi PDA with Windows CE onboard .................................................................... 7 Figure 3 Palm Pilot 5000............................................................................................................ 8 Figure 4 PocketPC Optipad and Palm Tungsten E .................................................................... 9 Figure 5 Macintosh System 1 GUI........................................................................................... 10 Figure 6 PDA Operating Systems world market...................................................................... 11 Figure 7 Sharp Zaurus SL-5500 ............................................................................................... 13 Figure 8 Digitizer area on Palm ............................................................................................... 16 Figure 9 Different types of text input on PocketPC (authors own).......................................... 17 Figure 10 Virtual keyboard on PocketPC and Palm (authors own) .........................................17 Figure 11 Pocket Gadu 3 (authors own)................................................................................... 21 Figure 12 Radu-Gadu (authors own)........................................................................................ 22 Figure 13 Pocket Pc Tomb Raider ........................................................................................... 22 Figure 14 PalmOS Warfare Incorporated................................................................................. 23 Figure 15 AutoMapa ver. 3.9.3 main screen (authors own)..................................................... 24 Figure 16 AutoMapa options and virtual keyboard menu........................................................ 25 Figure 17 TomTom Navigator 5 main screen, options and virtual keyboard .......................... 26 Figure 18 Contacts for PocketPC and PalmOS........................................................................ 27 Figure 19 Pocket Internet Explorer, ......................................................................................... 28 Figure 20 Web Pro 3 browser .................................................................................................. 29 Figure 21 Pocket Windows Media Player 9 (different skins) .................................................. 29 Figure 22 Pocket Tunes (two different skins) .......................................................................... 30 Figure 23 Adobe Reader for PocketPC and PalmOS............................................................... 30 Figure 24 PalmOS Uninstall Manager ..................................................................................... 31 Figure 25 PocketPC File Explorer ........................................................................................... 31 Figure 26 Contrasting use patterns of Handheld and Laptop................................................... 34 Figure 27 Notifications on PPC and PalmOS .......................................................................... 35 Figure 28 Icons on PPC and PalmOS....................................................................................... 36 Figure 29 PalmOS Menu bar and command toolbar................................................................ 37 Figure 30 PocketPC Menu bar and Pop up menu .................................................................... 38 Figure 31 PalmOS command buttons....................................................................................... 38 Figure 32 PocketPC command buttons .................................................................................... 39 Figure 33 Check boxes on PocketPC and PalmOS.................................................................. 39 Figure 34 Push buttons on PocketPC and PalmOS.................................................................. 40 Figure 35 Pop-up list on PocketPC and PalmOS ..................................................................... 40 Figure 36 Spin box on PocketPC and PalmOS ........................................................................ 41 Figure 37 Example of split button on PocketPC...................................................................... 41 Figure 38 Tabs example in the form of "abc" tabs in the Contacts application on PocketPC . 41 Figure 39 Slider example on PocketPC and PalmOS .............................................................. 41 Figure 40 Gadgets in the form of Date Pickers ........................................................................ 42 Figure 41 Slider types on PocketPC and PalmOS.................................................................... 42 Figure 42 The same application localized in different languages. ........................................... 43 Figure 43 Typical colors on PalmOS ....................................................................................... 44 Figure 44 Voice Command application options form.............................................................. 45 Figure 45 PocketPC attached to a keyboard............................................................................. 46 Figure 46 Virtual Laser keyboard ............................................................................................ 47 Figure 47 Mouse designed for PDAs ....................................................................................... 47

65

Figure 48 Fingerprint reader application.................................................................................. 47 Figure 49. Using PDA as a barcode scanner ............................................................................ 48 Figure 50. PDA printer............................................................................................................. 48 Figure 51 Classification of Microsoft's development tools...................................................... 50 Figure 52 Use case diagram ..................................................................................................... 52 Figure 53 Prototype of basic classes ........................................................................................ 53 Figure 54 Basic Activity Diagram ........................................................................................... 53 Figure 55 eMbedded Visual C++ main windows..................................................................... 54 Figure 56 eVC Controls Toolbox............................................................................................. 54 Figure 57 Push button properties dialog .................................................................................. 55 Figure 58 PCfiling application on PocketPC ........................................................................... 57 Figure 59 PalmOS resource editor ........................................................................................... 58 Figure 60 PalmOS Developer Suite ......................................................................................... 59