Legacy Maemo 5 Documentation/Human Interface Guidelines/Hildonizing an Interface
(New page: =Hildonizing an Interface= Developers often mistakenly design mobile device interfaces like the interfaces for desktop applications. This can compromise the usability of an application. Mo...) |
danielwilms (Talk | contribs) |
||
| Line 1: | Line 1: | ||
=Hildonizing an Interface= | =Hildonizing an Interface= | ||
| - | + | Although HIG is not a guide about migrating a desktop application to its mobile version, this section talks a little about this because often people think about desktop applications when designing interfaces for mobile devices. This leads to common mistakes that compromise the usability of an application. With a limited working area, mobile devices' screens cannot support all the types of widgets that a desktop computer application normally supports. | |
| - | + | When developing an application for a mobile device, you must not think of it as a direct translation of one platform to another but rather as an adaption of ways to accomplish the same tasks. Cases that express this adaption are present all over this document but this section takes special look at them. | |
| - | + | ||
| - | + | ||
| + | By following the principles covered in this section, your application will end up simpler to use and a easier to learn by the user. | ||
==Divide and Conquer== | ==Divide and Conquer== | ||
| - | + | The way to simplify the interface but still have full functionality in a Hildon application is to divide the content. The limited screen size make it difficult to include and use a large number of controls in the screen at the same time, so, the solution is not to have them together. | |
| + | |||
| + | For example, consider an email client application that usually has a split view containing on one side a tree view with a list of accounts and respective folders and on the other side a view of a list of messages within the currently selected folder. This is obviously too much for a small size screen and the solution is to divide the contents. So, a first view should display the available accounts for the user to choose one. After the account is chosen, a new view should display the different folders ("Inbox", "Outbox", "Drafts", etc.). Choosing a folder, would bring up a new view with the list of messages in it. | ||
| - | + | Keep in mind that the division should be well balanced in the way that things shouldn't be divided to a point where the user needs to navigate a number of views to do obvious things. For example, in the list of messages in the "Inbox" it is likely that next steps for the user are to open a message, delete a message, or create a new one. Hence, a button "Create Message" could be added to the same view where the message list is. | |
| - | |||
==Do Not Repeat Yourself== | ==Do Not Repeat Yourself== | ||
| - | + | Several desktop applications have repeated functionality for many tasks. For example, one may edit a message from a message list by using the Edit menu from the menubar, by using the popup menu from the mouse right button or even by using the toolbar. In Hildon, in order to simplify and save space for the sake of usability, a task should not be repeated. If the user can create a new message by pressing a button in the interface, then do not add a "Create New Message" menu item. | |
Revision as of 12:17, 17 August 2009
Hildonizing an Interface
Although HIG is not a guide about migrating a desktop application to its mobile version, this section talks a little about this because often people think about desktop applications when designing interfaces for mobile devices. This leads to common mistakes that compromise the usability of an application. With a limited working area, mobile devices' screens cannot support all the types of widgets that a desktop computer application normally supports.
When developing an application for a mobile device, you must not think of it as a direct translation of one platform to another but rather as an adaption of ways to accomplish the same tasks. Cases that express this adaption are present all over this document but this section takes special look at them.
By following the principles covered in this section, your application will end up simpler to use and a easier to learn by the user.
Divide and Conquer
The way to simplify the interface but still have full functionality in a Hildon application is to divide the content. The limited screen size make it difficult to include and use a large number of controls in the screen at the same time, so, the solution is not to have them together.
For example, consider an email client application that usually has a split view containing on one side a tree view with a list of accounts and respective folders and on the other side a view of a list of messages within the currently selected folder. This is obviously too much for a small size screen and the solution is to divide the contents. So, a first view should display the available accounts for the user to choose one. After the account is chosen, a new view should display the different folders ("Inbox", "Outbox", "Drafts", etc.). Choosing a folder, would bring up a new view with the list of messages in it.
Keep in mind that the division should be well balanced in the way that things shouldn't be divided to a point where the user needs to navigate a number of views to do obvious things. For example, in the list of messages in the "Inbox" it is likely that next steps for the user are to open a message, delete a message, or create a new one. Hence, a button "Create Message" could be added to the same view where the message list is.
Do Not Repeat Yourself
Several desktop applications have repeated functionality for many tasks. For example, one may edit a message from a message list by using the Edit menu from the menubar, by using the popup menu from the mouse right button or even by using the toolbar. In Hildon, in order to simplify and save space for the sake of usability, a task should not be repeated. If the user can create a new message by pressing a button in the interface, then do not add a "Create New Message" menu item.