Design Principles Used in Netgem

Posted By : Raman Joshi | 26-Sep-2014

netgem

In this blog we study about the design principles which is mainly used in netgem for making the UI of app. Here are the different list of screen layout.

1. Three-level navigation

As a rule of thumb, the top-level categories are displayed on the top-left menu list. The contents of those categories are displayed on the carousel tiles and previewed on the PiP player or equivalent.

2. Use a grid for your layout

When laying out your interface, always use a grid to organize your contents. This will help you build an aesthetically balanced application

As seen above, the items on the left are aligned to each other, while the elements on the right are not. This creates an unbalanced design.

3. Single focus interface

The Netbox V5 interface is conceived as a fix-focus interface, which means that two things must be taken into account:

1) There can be only one focused object at a time. This means that the [OK] button is mapped to perform the action indicated by the focused object.

2) The “focus” never moves, but it’s the interface that moves around it. When scrolling past a list or carousel, it is the central item that will always be focused.

4. Blur vs Focus states

As explained in the previous paragraph, at any given time, only one item can be focused. This means that the focused item must be easy to differentiate from blurred items in order to allow users to know which action they are about to perform.

5. Content zones

When structuring your application’s interface, try arranging your on-screen elements by content type or by “subject”. For example, if you display a photograph and it title, be sure to arrange the elements in a way that implies that both elements are related.

On the image above, on the top section of the image, we can see that the title is positioned on the "NOW WATCHING" title, which implies that both contents are related. On the bottom section, the title is positioned along the bottom bar, but as it is displayed far from the focused tile and close to the displayed image, we might imply that it is the title of any of those.

6. Mapped keys

The limited number of keys in the Netgem Remote Control needs to be taken into account when assigning shortcuts. Two mayor recommendations for dealing with this issue:

1) Be coherent when assigning keys. For example, if a color key is assigned to perform a specific action, e.g., mark as favorite, use the same key to undo the same action.

2) Use shortcuts wisely. Do not try to pack all actions into specific keys, but rather keep your navigation simple and intuitive and only use shortcuts, e.g., a color key to mark a content as favorite, for your feature actions.

Thanks