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
Top Related