Adjustments

Tweet

Levels and Security Zone

In today’s market, mobile devices have become an indispensable accessory in our daily lives.  Their use is becoming increasingly extensive, with interfaces displaying more and more options, and thanks to the internet, they are able to offer us an “infinite” range of applications and games for everyday use, including applications related to photography, video, gps, expense management, all types of games, etc.

It is for this reason that the interface design – both at the conceptual and user-level – must offer a full range of options for use by way of a simple and intuitive graphical display.

Whilst it goes without saying that an application’s interface design, together with its screens and resources, is a complex process, it should be added that in the event that our application should be multiplatform (iOS, Android y Windows Phone 7), the given design has to be adapted to each platform due to the lack of standardization.  This implies that in the design process for a multiplatform application or game for mobile devices, the design and resources generated, the sizing of elements and the screen positioning will be different for each and every platform to be used.

Due to this problem, mainly caused by the different ratios in which the devices move, both the designer and the programmer are obliged to create different versions of the project, according to the platform to be used, resulting in double or triple the investment necessary for the product to be visible in the desired platforms.

In our continuous research into multiplatform applications, we can see that there are many ways in which to proceed when managing the resources necessary for the various devices.  Here we define two adjustment processes:

1 • Center, Fit, Fill y Stretch

By means of the adjustments Center, Fit, Fill, and Stretch, the developer also has the option to alter the dimensions of the resources in order to appropriately adapt them according to the target platform.  The most recommended system for altering the dimensions of resources is through the use of sprite sheets.  Through use of the backgrounds and sprite sheets it is possible to employ any of the systems to alter dimensions, but with caution, as depending on which platforms are to be used, design and usability problems may occur.  In this case, the recommendation for resizing is the use of Fill starting from the IOS (640x960) sizing to the WP7 or Android (480x800), leaving a small blank margin on the outside.

Advantages:

     - Almost all of the design is utilized (with the exception of a small blank zone).
     - The positioning of ALL the elements will be proportional in all devices, visible at exactly the same design level.

Disadvantages:

     - All of the resources have to be re-scaled to size according to which device is to be used.
     - In the event of other types of re-sizing, we would encounter black borders in the screen, and in some cases deformation of the design, such as undesired flattening or stretching of images.
     - New positioning would have to be used for all the resources on the screen according to the target device.

2 •  Security Zone (SZ)

On the other hand, in our particular case, we use a system which we have named Security Zone (SZ).

During the application design process, the developer has to create the resources tailored to the sizes of Windows Phone 7 or Android, 480x800, and add a security zone (SZ) to obtain the dimensions 640x960.

In the space of the aforesaid zone, we must not position any element that is to be employed in the use of the interface, as once the application is displayed in a WP7, this zone will be lost.  The positioning of the elements has to be within the inner-area (480x800), by which means the resources will have the same sizing in WP7 and Android as in iOS.  Thanks to this system, we discovered a significant time-saving method, as the resources are utilized in all devices in the same positions.

When positioning the elements on the screen, another option is to anchor them in a fixed position, for example a header which will always be pasted in the upper part of the screen, or through determining the position of the elements through use of percentages, for example a menu, the position of which will be on the x-axis 5% and the y-axis 10% corresponding to the coordinate origin, which will be positioned in the top, left-hand corner.

Here we have an example of the behavior of the upper search bar.  We can observe how it remains anchored to the upper screen in all devices.

Advantages:

     - You only need to design the background once, without worrying about the change in ratio for each platform.
     - The sizes of the resources will not vary, therefore there is no need to re-size according to the target platform.
     - The positions are also the same, you will only have to modify the coordinates according to each platform.
     - You always have the option to arrange elements in proportional sizes using a fixed menu, which remains regardless of the platform used.

Disadvantages:

     - The application is “condemned” to having the size used for Windows Phone 7 (800x480) for certain elements.

To conclude, the SZ (Security Zone) system is, for the present, the best option for saving time when designing an application for multiplatform use.  Thanks to a detailed study at design level of the availability of elements on the screen using relative positions to absolute positions, we are able to create interfaces that are the most similar as possible.