Maemo User interface creation(for v3x and 4xchinook


* Maemo is a Linux-based development platform for handheld devices.

* Hildon application framework is a desktop for handheld devices.

Using a device like the Nokia Internet Tablet should be second-nature for all levels of users. It is a media-based device that most people will purchase in order to surf the web, listen to music, watch videos, send and receive email, and instant message with. A large percentage of those who buy Internet Tablets are expecting to turn their new device on and begin using it right away. Believe it or not, most people aren’t going to have skills enough to download xterm, search for missing library files, join mailing lists, et cetera. In order that the Nokia Internet Tablets be successful in the market and highly regarded by their users, developers must create applications that are easy to download, install, and use.

When approaching application development, one must always keep the first-time user in mind. If an application is intended for mainstream use (i.e., anything that’s not a “coder’s tool”), developers should always make an effort to (1) create Debian install packages (and possibly even a Repository) for their applications, (2) create icons for their applications (even if archaic) so that users don’t have to download and launch xterm in order to run an application, (3) adhere to common standards and practices of software design, (4) remember that most people who download and use applications are not developers.

There are a few basic concepts that developers should employ while creating a User Interface (UI) for their application:


Development standards: in this case, maemo

Force the intuitive: don’t allow users to guess

Be consistent: include typical UI functions even if they are not applicable within the application

Now, I must make a confession: I am not a developer. I am an artist who understands little code. But, having worked in the multimedia industry for over fifteen years, I do understand the processes and paradigms of programmers and programming languages. I know that coding is not easy and that much of what one sees on the surface of an applications says little about the thousands of bits that comprise its back-end. This being said, I admit that I am not attempting to outline an easy path. The quest for consistency in quality and standards is a valiant task that developers should strive for rather than eschew. It should be the developer’s goal to deliver an application that will launch a user into familiar territory. Overall, developers should aim, not only for excellence in their applications, but for applications that will reflect well on the Nokia Internet Tablet and the maemo development platform.

This document is meant to outline the procedures that should be integrated into creating an application UI. There are plenty of other areas where maemo-based applications could use improvement (e.g., integration of dependencies, properly assigning applications to Application Manager Categories, et cetera), but I will default on these subjects and ask that all developers read and retain the information contained within the maemo SDK documentation.

In order to convey the procedures for creating “most excellent” maemo-based application UIs, I would like to perform case-studies on two fictitious applications. The first will be a simple Facebook Status Updater. This application will do nothing more than allow a user to input their current status and send it to their Facebook profile. The second application will be called, Flickr Uploadr. Flickr Uploadr will allow the user to browse for an image file on their Internet Tablet, title it, describe it, tag it, and upload it to their Flickr account. As you can see, neither of these applications is very complicated, yet they will allow me to present some common UI principles as well as point out some areas where cohering to development standards can be very important.

Before we dive into each of the applications described above, I’d first like to take a look at several different aspects of a UI that will help users feel at home with any application they launch on their Internet Tablet. In these cases, I will be using elements of the Facebook Status Updater.

Application Components

Application Icons

Application Icons are the icons that users tap to launch and switch to an application from the Hildon desktop. These icons appear within submenus (e.g., Web, Contact, Utilities, et cetera) under the Task Launcher menu on the Application Switcher (usually on the left side of the desktop) as well as on top of the Application Switcher itself once the application is launched.

The default application icon that appears in the Task Launcher menu is 26x26 pixels (24-bit, transparent, PNG). This icon is the least a developer should create for any application. Although, keep in mind that there are two ways to trigger the Task Launcher menu: (1) with a stylus and (2) with a finger. These two methods of input will display different Task Launcher menus containing differently-sized application icons. If an application only contains a 26x26 icon, it will be used for both styles of menu. If a larger, finger-menu-sized icon is desired, its dimensions are 40x40 pixels (please refer to the maemo SDK documentation for proper placing and usage of the different icons).

Here is an example of a 26x26 icon that I created for the Facebook Status Updater application:

As you can see, the icon is simple, but it contains properties of the Facebook website that quickly displays what the application is without the need to launch it — or without even knowing the name of the application!

As stated previously, icons are necessary, even if they are not what you might consider pretty. In my opinion, using the default Hildon application icon (four silver squares, one square descending onto three other, assembled squares) is not acceptable since it does not convey any information to the user. If anything, create an icon that contains the name of the application.

Next is Splash/About Screens click the link to next

No comments: