Tips and Tricks #13 Making your Sailfish OS Apps Beautiful and Better


Jolla published a new tutorial about Common Pitfalls in Sailfish Application Development Apps to help Sailfish OS Developers in making their apps beautiful and useful.


1. Too many items in the pulley menu

You wouldn’t squeeze 6-8 items into a traditional mobile application toolbar, and neither should you in a Sailfish PullDownMenu menu. Most Sailfish platform applications provide only 1-3 pulley menu actions per page. To secure easy access and uncluttered experience, never display more than four actions in the pulley menu


2. Lack of proper active cover

The concept of active covers may not seem important when porting applications to Sailfish, given that Android, iOS and original N9 Meego applications do not have this concept, but it is important to realise that this concept is at the core of the multitasking capabilities of Sailfish. If you implement an attractive and useful cover, users are much more likely to keep your application open on the Homescreen. An active cover should give a good summary of the application’s contents and any open tasks, and provide shortcuts for any common actions like saving a new item or performing a search.

deep pag

3. Unwieldy page hierarchy

The deeper the page hierarchy, the harder it is to navigate between pages and the easier it is for users to get lost. When your page stack has grown to over four levels deep, consider replacing the existing pages in the stack instead of pushing on additional pages. For example, the platform Maps application’s in-app search replaces the existing search pages instead of pushing new ones to avoid an unwieldy (and in theory infinitely growing) page stack hierarchy.


4. Lack of padding

Application user interface elements and user content should align nicely in the display. Alignment is important for visual appeal and readability. As a rule of thumb, maintain padding Theme.paddingLarge around the screen edges.

Some UI components like combo boxes, text fields and page headers implicitly include correct margins, but for some components like list items, you have to add the padding yourself

label coloring

5. Incorrect label coloring

Coloring is used to indicate whether an user interface element is interactive. There are few exceptions, but in general buttons, switches, list elements and other items that react to touch input are colored with white primary color, and descriptive items like static labels, page and section headers are painted with the ambience highlight color

press effect

6. Incomplete press effects

Color labels and icons with the highlight color when they are pressed. Some UI components like icon buttons and context menus do this automatically, but for some custom components like list items you will have to implement the press-effect coloring yourself

touch areas

7. Using buttons instead of platform-style gestures

In Sailfish, the accept and cancel dialog gestures replace the traditional accept and cancel buttons for user confirmation or cancelation. The back-stepping gesture makes traditional back buttons obsolete. The edge-swipe-to-home gesture makes application exit and home buttons unnecessary. Pulley menus replace traditional application toolbars.

These gestures should be used wherever possible to provide a user experience that is consistent with platform apps. For example, the model data modified by the user input in the dialog below is saved or reverted depending on whether the dialog is accepted or rejected, instead of providing separate ‘Save’ and ‘Clear’ buttons:


8. Missing scroll decorators

Any view, which can accumulate more content than fits the view should include scroll decorators. Scroll decorators indicate the relative position of the viewport and if there exists more content off-screen


9. Touch areas that are too small

Application developers sometimes have the tendency to create apps with user interface elements that are very small. This is a problem if the elements are interactive, as small touch areas require more cognitive effort to hit successfully. Also, most Sailfish UI components lack visual borders so it is easy to accidentally define incorrect touch areas


10. Incorrect text editor labeling

Every Sailfish text editor should define values for the placeholder text and label properties. The placeholder text is displayed when the editor is empty; it describes what the user should enter into the editor. The label has the same purpose, but is displayed after user has already entered text to the editor. Both properties can use the same descriptive string, such as “Name”, “Password”, “City”, and so on.


11.Lack of enter key customization

Since the enter key does not produce new lines in a single-line text editor, this key can be overloaded to perform a custom action for the editor using the EnterKey attached property. Usually, the enter key is used to move the keyboard focus between successive text fields


11. Disabled pulley menus

Some pulley menus only provide actions when certain conditions apply. Empty pulley menus with nothing but inactive menu items should be hidden rather than disabled.



2 thoughts on “Tips and Tricks #13 Making your Sailfish OS Apps Beautiful and Better

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s