MeeGo Phone UI Document: Cocktail of Android, iPhone, Maemo 5, WebOS and Windows Phone 7

Just to note: Those worried about lack of MeeGo devices and thus an audience for development - MeeGo apps are built on Qt. Symbian^3 and Symbian^4 support this, as well as N900 and your MeeGo tablets, netbooks, media players, tvs, car infotainment etc etc.

Reggie from Talk.Maemo.org has come across a very exciting document about the MeeGo handset UI guideline. The actual page is down but as Mark Guim from the Nokia Blog points out, it’s available through google Cache. (Note the fruit name of the page, Bananas and Pears)

• In case that gets deleted too, Chrome from TMO has a .pdf zipped file to download.
• Mirror also available here

It’s a huuuuge whopper of a piece but details many pleasing aspects to MeeGo phone. Just check out the strict high standards for basic MeeGo design, with core sentiment echoing all noted shortcomings of Symbian and Maemo.

Direct Objects are manipulated directly with your finger. Never hide object-related functions away from the main object. Hiding related functions/actions in menus should be avoided. All actions should take place near the object itself. Touch is an analog control (well, almost).

Responsive Direct UI must give immediate feedback to the user’s actions. When scrolling or panning, the moved objects need to follow user’s finger without a noticeable lag. Visual, audio, and haptic feedback must feel that they are in perfect synch. The multimedia playback has high resolution and frame rate that gives a feeling of performance.

Simply beautiful The UI must please all senses. Visual, aural, and haptic feedback must be beautiful, yet simple. Visual and aural (and haptic) metaphors and effects must be consistent. Decoration should have meaning, for example show what can be touched. The UI is alive, for example showing subtle animations.

True Human Design The key attributes of MeeGo’s design vision are: human, simple, and friendly. MeeGo prioritizes people over any other content.

Getting the basics right People still need to meet the demands of every day life, calling their mom, remembering the milk, and messaging a colleague from the bus stop. MeeGo should make these things a joy and never let its power get in the way.

The guidelines have UI principles found in other mobile OSes. That’s great! If it works, pinch it. That’s how we evolve.

Centralized Accounts

I’ve been wanting this for a long while. Similar to Windows Phone 7 (WebOS too) you have a centralized location to manage your accounts. No need to go to email for email accounts, conversation for messaging accounts, photo gallery for online accounts, social media apps for twitter/facebook. It’s all in one place! Somehow even in the web browser! Score!

Now if only Nokia utilized the OVI account to MANAGE all those accounts. I.E. sign in with one Ovi account and all the rest are bundled along with it. I hope I’m correctly assuming this will pull down all relevant information with each account (e.g. contacts)

The user has accounts to connect with various online services, such as e-mail accounts, instant messaging accounts, and service accounts.

The account management is centralized in the device: there is one place where the user can add and manage all the various online accounts used in the device applications. Each account can have a separate page for settings, if needed.

Applications can create setting views that list only the accounts that relate to the application, for example, E-mail can have an account view that displays e-mail accounts. Editing the account should take place in the same settings view, no matter where this account is accessed.

If your Application deals with online content sources, use the common Accounts framework instead of creating your own solutions for handling accounts.

Do not create your own account settings UI within the application, but rather create the views as account settings and link with the UI to the Accounts UI.

Accounts can also be used for single-sign-on purposes, that is an account can enable automatic log in to certain web sites in the Browser.

App Launcher/Menu

4×4 grid of apps by default, finally! But we now have pages of which there is another grid of 16 to the right. Like iPhone! ( and er Bada which copied iPhone)

The launcher is a view that contains links to all applications installed in the device. In the launcher, the user can browse through the applications and add up to 4 links to the quick launch bar at the bottom of the screen. In editing mode, the user can also change the order of application links.

Applications are presented in a 4 x 4 grid. In the case where there are more than 16 applications, more pages of the same grid are added to the right. Paging through the different grids is done by swiping the current grid off screen, hence bringing the new one into view. When the user installs a new application, it goes to the end of the application grid.

The user opens the launcher by selecting an icon at the bottom of the Homescreen (placed together with Favorite Application links). To close, the same icon is used.

Multitasking

This feels like a mixture of Maemo and WebOS/Symbian^3 with the initial LIVE thumbnail (this is so nice on maemo 5, not a static thumbnail or worse an ICON. That’s so 2002).

It seems there might be the same button configuration for multitasking like in Maemo 5, with switcher accessible via home button at top left. Not a fan, I hope we get cam-keyed to use the camera button as multitasker view. Fav app of all time.

Initial view is linear fashion like Cards/Visual multitasker

Pinch and zoom converts it to maemo 5 like grid (but only 3×3 as oppsed to potentially 4×4). Instead of scrolling for more multitasked apps, there are pages. I’m not sure if this permanently changes it (that would be nice as I’d like to use grid at all times – maemo 5 has fab solution with context aware thumbnail sizes, but this way may be more pleasing to the public as you have that “oooh” pinch zoom gesture moment)

When an application is first launched, a new task starts. This task is represented in the switcher by a live thumbnail of the current content within the application, that is a blog web page would always display the latest blog entry. The switcher is always accessible via the home button in the top left corner.

Whenever a second application is opened, the new task is included within the switcher. With that, MeeGo allows users to quickly switch between applications by pressing the home button. Applications can be opened from the launcher, widget space, or even from other applications, such as opening a map from an email.

When the user clicks on an application in the launcher, that is already open in the switcher, the system opens the window that was already open. It does not restart the application. Additional behavior exists for opening deeplinked views of applications, see Re-opening Windows/Window Merging When Deep-Linking for more details.

Tasks are shown in the order they were opened, from left to right. Every time a new task is opened, it pushes the previous task panels to the left and adds its thumbnail view to the far right.

The default view of the switcher presents the latest accessed task in focus, with the other, different tasks running to the right. Thumbnails are presented in chronological order, as they are opened.

It is possible to browse through the thumbnails, one by one, by slowly dragging them, or to use a quick swipe to rapidly pan from one side of the list to the other. During this quick swipe, a tap stops the transition at tapped point, but does not open the application. To open the application, the user needs to tap the desired thumbnail.

Users can use a pinch multi-touch motion to change the switcher into an overview mode. By pinching in, thumbnails move into a grid display. The grid can scale up to a 3×3 version, thereafter the switcher then starts to create new pages. Pinching out, while in the grid mode, changes the view back to larger stacked mode.

Status Bar and Status Menu

Similar to android and Maemo 5, a status bar (vertical box at top) with information that can be accessed with core functions needed throughout UI.

The Status Bar is the vertical box at the top of the UI. The status bar can show a few different bits of information. The main use of the status bar is to show signal strength, time and battery life (operator optional).

The Status Menu appears by dragging down the Status Bar. It contain core functions that should be accessible throughout the UI. The Menu does not push down the content, but appears as a layer on top of it instead.

The Status Bar also supports notifications. It displays

Another use of the status bar is for the notification Soft Events to help remind the user of specific events/alerts. Please refer to the notification section for more information on soft events.

Widget Space

I’m just highlighting this because I’m liking the move to gesture based interaction rather than tapping/digging around menus. e.g. here you add widget’s by vertically flicking up/drag up the switcher (like Android menu launcher)

The ‘Widget Space’ is a customized area where users can add/edit their widgets.

The user can find the widget space by flicking vertically from the switcher. Once the user is within the space, they can horizontally scroll to view multiple areas for widgets.

Widget Widgets are a way of providing quick access to surfaced content and functionality. Widgets should be snappy, bite-sized pieces of content and should not be confused with applications.

App Manager

Maemo 5 style application manager to install, uninstall and detect updates for new applications!

The user can extend the device capabilities by installing new applications, such as widgets, applications extensions, and software plugins to support new services.

The user can get installable items from multiple sources: from various online content sources (such as Ovi store), or by downloading from various device services or Applications (such as browser, e-mail, and Bluetooth file transfer). All installed applications appear in the device main menu as icons.

Package Manager The device package manager provides the UI style and mechanism for handling application installation flows, displaying installation progress, giving ways to handle the technical issues and solve common error cases.

Installed applications are generally linked to the repository that contained the installed packages. The package manager tracks these repositories and provides a mechanism to detect if new updates are available for the installed application packages.

If updates are available for any installation, the package manager notifies the user (through an Event Banner – see Notification section), who then allows installation of the updates.

The user can uninstall applications, either through the main menu (from the object Menu or menu editing mode) or then through the package manager UI.

Virtual landscape/portrait keyboard and support for hardware keyboard

Interesting point on  support of hardware keyboard. I don’t know if this is meant to indicate just possibility with future handsets or whether MeeGo Phone (first one) will have hardware keyboard.

MeeGo provides support to both virtual and hardware keyboards.

The virtual keyboard is invoked automatically when an input field is in focus (that is when the user taps an input field). The Title Bar and Status disappear to optimize screen real estate. It has a portrait and landscape layout, opening according to the orientation it is being called from. If the user rotates the device, the layout is smoothly changed according to the new orientation.

The user can close the virtual keyboard by either tapping outside the text field or by dragging down the virtual keyboard. Note that the virtual keyboard does not act as a drawer in the sense that the user cannot pull it up. It will come up again once the text field is actioned again.

Whenever the hardware keyboard is opened, the virtual keyboard does not get loaded.

Support for landscape/Portrait

Not to be taken for granted what with lack of portrait action in Maemo 5.

Device orientation will suite multiple Applications in different ways. While watching a video is best done on landscape – with the media taking up all the screen, scrolling long lists is more comfortable on portrait.

MeeGo common components are always provided for both orientations. In other words, by using them, there is not need for extra work. It is advice able, however, that anyone building an Application acknowledges such change, as it might impact the desired experience.

Applications can overwrite default changes. However, it is highly recommended that all Application provide both portrait and landscape mode. The main reason is the form factor of some available MeeGo devices. In a devices with a slide hardware Qwerty, the landscape experience becomes key, and somehow extended. Therefore, the user shouldn’t be forced to change orientation to complete a task. Playing a game is one of the few exceptions to this rules, as its experience flow does not require (in most cases) the use of any other application.

Changing views should not introduce new or different content or functionality. Assets can be subtlety resided and/or reshuffled to make better use of the screen real estate.

Lock Screen

Are we getting slide to unlock again? Or something new? It mentions “dragging lock button into wallpaper area”

The lock screen is presented when the user presses the power key to wake the device from idle state.

The screen presents the wallpaper (customizable by the user), date and time, and the lock action button. The device is unlocked by dragging the lock button into the wallpaper area.

There’s more to the document over at the google cached page, note this may be updated with the deleted version

• In case that gets deleted too, Chrome from TMO has a .pdf zipped file to download.
• Mirror also available here

Talk.Maemo.Org via TheNokiaBlog

Tags: Handheld, Harmattan, Intel, Maemo 5, Maemo 6, MeeGo, MeeGo Phone, N9, Nokia

Category: Maemo, MeeGo, Nokia