Editing Documentation/Maemo 5 Developer Guide/Porting Software/Redesigning From Maemo 4 to Maemo 5
Warning: You are not logged in.
Your IP address will be recorded in this page's edit history.
The edit can be undone.
Please check the comparison below to verify that this is what you want to do, and then save the changes below to finish undoing the edit.
Latest revision | Your text | ||
Line 1: | Line 1: | ||
- | + | = Redesigning From Maemo 4 to Maemo 5 = | |
- | This | + | This chapter instructs how to re-design a Maemo 4 application to Maemo 5, i.e. the '''Hildon 2.2 UI Style'''. The Modest email client is used as the example application. |
== Overall Guidelines == | == Overall Guidelines == | ||
- | |||
Compared to Maemo 4, the Hildon 2.2 UI Style in Maemo 5 is much more optimized for finger usage in small mobile device displays. | Compared to Maemo 4, the Hildon 2.2 UI Style in Maemo 5 is much more optimized for finger usage in small mobile device displays. | ||
Line 12: | Line 11: | ||
=== Larger size of UI elements === | === Larger size of UI elements === | ||
- | |||
By default, the UI elements in Maemo 5 should be designed as “Finger size”. This means that on average, a view can contain fewer visible UI elements. To compensate this, views and dialogs can be designed to support panning, allowing for larger amount of UI elements in total. However, panning is not an ideal design solution for all use cases. | By default, the UI elements in Maemo 5 should be designed as “Finger size”. This means that on average, a view can contain fewer visible UI elements. To compensate this, views and dialogs can be designed to support panning, allowing for larger amount of UI elements in total. However, panning is not an ideal design solution for all use cases. | ||
=== Removal of focus === | === Removal of focus === | ||
- | |||
While in Maemo 4, the application menu and the toolbars often relied on focused/selected item or items as the target of a command, in Maemo 5 there is no focus. This also means that keyboard navigation is not supported in the UI in general. | While in Maemo 4, the application menu and the toolbars often relied on focused/selected item or items as the target of a command, in Maemo 5 there is no focus. This also means that keyboard navigation is not supported in the UI in general. | ||
Line 24: | Line 21: | ||
=== No dimming === | === No dimming === | ||
- | |||
Instead of dimming (buttons, menu items ...), the UI elements should be simply hidden away, when they are not active. There are some corner cases where hiding would break the UI flow. For example Edit mode view toolbar simply shows the action button as always active, even though nothing happens, when nothing is selected, if the button is pressed. | Instead of dimming (buttons, menu items ...), the UI elements should be simply hidden away, when they are not active. There are some corner cases where hiding would break the UI flow. For example Edit mode view toolbar simply shows the action button as always active, even though nothing happens, when nothing is selected, if the button is pressed. | ||
=== Limit of 10 items in the view menus === | === Limit of 10 items in the view menus === | ||
- | + | The Maemo 4 application menu typically contains most or the full set of functionality of the application, organized in hierarchical menus. | |
- | The Maemo 4 application menu typically contains most or the full set of functionality of the application, organized in hierarchical menus. In Maemo 5, there is a strict limit of maximum 10 items in a view menu, and there is no menu hierarchy. | + | In Maemo 5, there is a strict limit of maximum 10 items in a view menu, and there is no menu hierarchy. |
The Maemo 5 View menus are not application menus, in the sense that a view menu only contains commands relevant to that particular view. The only exception to this is the Root view menu, which additionally contains menu item(s) for application settings. | The Maemo 5 View menus are not application menus, in the sense that a view menu only contains commands relevant to that particular view. The only exception to this is the Root view menu, which additionally contains menu item(s) for application settings. | ||
=== Removal of tabs in dialogs === | === Removal of tabs in dialogs === | ||
- | + | When designing dialogs in Maemo 5, the tabs of a Maemo 4 dialog are merged to a single tab-less dialog with the whole content area of the dialog being pannable. In practice this results in user panning the dialog instead of switching between tabs. | |
- | When designing dialogs in Maemo 5, the tabs of a Maemo 4 dialog are merged to a single tab-less dialog with the whole content area of the dialog being pannable. In practice this results in | + | |
If additional semantic grouping is needed for UI elements within the dialog, then group titles can be used by utilizing <code>GtkFrame</code>. | If additional semantic grouping is needed for UI elements within the dialog, then group titles can be used by utilizing <code>GtkFrame</code>. | ||
=== Fewer toolbars and context sensitive menus === | === Fewer toolbars and context sensitive menus === | ||
- | |||
With the removal of focus from default lists and grids, the UI designs for Maemo 5 typically do not include toolbars for views that contain multiple items. Toolbars are still used in views where only a single item is being shown. | With the removal of focus from default lists and grids, the UI designs for Maemo 5 typically do not include toolbars for views that contain multiple items. Toolbars are still used in views where only a single item is being shown. | ||
Line 49: | Line 43: | ||
== Re-design of Modest email == | == Re-design of Modest email == | ||
- | |||
The following paragraphs describe the overall changes made to the Modest email client when re-designing it from Maemo 4 to Maemo 5. | The following paragraphs describe the overall changes made to the Modest email client when re-designing it from Maemo 4 to Maemo 5. | ||
=== Task views === | === Task views === | ||
- | + | In Maemo 4, the Modest had three views: Main view, Viewer view and Editor view. | |
- | In Maemo 4, Modest had three views: Main view, Viewer view and Editor view. | + | |
In Maemo 5, the Main view was divided into more focused views, which allowed to get rid of the split view as well. The new five views are: Accounts view, Folders view, Messages view, Viewer view and Editor view. | In Maemo 5, the Main view was divided into more focused views, which allowed to get rid of the split view as well. The new five views are: Accounts view, Folders view, Messages view, Viewer view and Editor view. | ||
- | + | IMG | |
+ | ''Figure 1: Email UI Flow in Maemo 4 and Maemo 5'' | ||
While in Maemo 4 the different views are separate windows (and visible as such when switching between tasks), in Maemo 5 the views are designed as a “stack”, i.e. only one of the views is ever visible at any one time. | While in Maemo 4 the different views are separate windows (and visible as such when switching between tasks), in Maemo 5 the views are designed as a “stack”, i.e. only one of the views is ever visible at any one time. | ||
- | The Maemo 5 approach allows the design to avoid many concurrency problems caused by changes happening in several windows at the same time. On the other hand the design forces the views to | + | The Maemo 5 approach allows the design to avoid many concurrency problems caused by changes happening in several windows at the same time. On the other hand the design forces the views to be always closable. This means for example that in Maemo 5, the Editor view always automatically saves as draft, without further confirmation, when that view is closed. |
- | The UI flow of Modest in Maemo 5 follows the “drilling down” UI flow – Initially the most generic view is shown (Accounts) from which more detailed views can be reached (ending up in Viewer). The Editor view is not directly part of this flow, but instead can be accessed from any of the other views. Going | + | The UI flow of Modest in Maemo 5 follows the “drilling down” UI flow – Initially the most generic view is shown (Accounts) from which more detailed views can be reached (ending up in Viewer). The Editor view is not directly part of this flow, but instead can be accessed from any of the other views. Going |
- | + | back from Editor view shows the previous view of the “stack”, i.e. the view from which the user opened the Editor view. | |
- | The design of this view is simply to list the accounts | + | ===== Accounts view ===== |
+ | IMG The design of this view is simply to list the accounts use has set up on the device. Tapping on any of the accounts opens Folders view of that account. In addition to the account name, also the time stamp of the last account refresh is shown on each list item. | ||
The first item in the list is “New message” button, which is a convenience shortcut to quick write a new email in the Editor view. | The first item in the list is “New message” button, which is a convenience shortcut to quick write a new email in the Editor view. | ||
- | + | ===== Folders view ===== | |
+ | IMG This view lists folders related to the selected email account. Additionally also ''Local folders'' (stored on the device), and ''Archive'' (stored on external memory card if available) are shown in the list. | ||
- | + | The folder tree in Maemo 4 was a direct representation of the physical folder structure. In Maemo 5 the fingerable lists are flat and pannable, and expandable lists are not supported. These constraints required re-designing how subfolders are represented in the UI. A full-blown design of each-subfolder-is-a-subview was too navigation heavy approach for email application, and instead all folders and subfolders are shown in the same pannable list. | |
- | + | The depth of a folder is indicated by the amount of dots (<code>&middot;</code>) placed before the name of the folder. | |
- | + | ||
- | + | ||
- | + | ||
- | The depth of a folder is indicated by the amount of dots (<code>·</code>) placed before the name of the folder. | + | |
The icon in each list item represents the location of the storage (email server, local, MMC), except for the standard email folders, which have individual icons (Inbox, Drafts, Outbox, Sent). | The icon in each list item represents the location of the storage (email server, local, MMC), except for the standard email folders, which have individual icons (Inbox, Drafts, Outbox, Sent). | ||
If a folder contains new, unread messages then this status is indicated with <code>ActiveTextColor</code> on the folder name and with informative text on the right half of the list item. | If a folder contains new, unread messages then this status is indicated with <code>ActiveTextColor</code> on the folder name and with informative text on the right half of the list item. | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- |
Learn more about Contributing to the wiki.