Video applications

 

DESIGN GUIDE

INTRODUCTION

The present guide is a brief guide containing a series of recommendations about the most adequate format for the web pages making a PIMobile video application.

GENERAL COSIDERATIONS.

Usability comes to the effectiveness (ability to complete tasks), efficiency (effort required to complete) and the satisfaction felt by the user during interaction with a machine, be it a computer, a radio or a mobile phone. These 3 elements are conditioned by the profile of the users, their objectives and the context of use.

The usability, understood as quality of use, is now a key factor in the acceptance of a multitude of services. It is necessary to consider the usability from the earliest stages of design, and test prototypes with representative users of the target population, at least once.

The environment in which someone uses a mobile phone and features of the device itself are two key elements to be taken into account in the design of application interfaces. In the case of the mobile, environment is changing, dynamic. The user can be distracted or have hurry, so the navigation structure has to be very simple and we need to avoid unnecessary steps.

For example, some people buy movie tickets from their mobile hastily while queuing in the cinema, if they suspect that the room would be filled before being cared for at the box office. Also there are frequent balance consultations of bank accounts before making a purchase (especially if the purchase is going to be done with a credit card). In both cases the user is in a hurry and is in a public place.

Moreover, the job being done by the user can be interrupted by loss of coverage or for a simple distraction. Therefore, the design should allow for the ongoing process to recover after the break. The distractions, specifically, are much more common than one might think. It is customary to use the mobile (for other purposes other than calling), while it is waiting in a restaurant, on a platform or even a traffic light. In these situations are interruptions by pure logic: the waiter brings food or drink, the train arrives, the traffic light is green.

BASIC USER GUIDE FOR MOBILE PHONES APPLICATIONS

1.- Rapidly Show the Needs of the Users.

The users of PC and Mobiles can have different reasons to visit the same site.

The mobile users use them more to find cinema or theatre tickets, news or interesting addresses. They also search for leisure sites, or simply reading something while travelling on the bus, or while waiting for a friend.

It’s a must to predict the needs of the user and satisfy them as fast as possible. The user must find what he is looking for fast and easy.

2.- - Do not repeat the navigation bar on each page.

The web sites designed for PC normally repeat the navigation bar on each page.

However, the screen size in the mobile sector is very important for navigation; we have a defined area the QCIF size (176x144 pixels).

In the mobile web application we will visualize the navigation bar as the starting page. In the other pages there is only links to return to the main page or previous page. This way you will be able to navigate from the top or the bottom of the screen easily.

3..- Over simplify the user experience.

Allow the user the selection of the information instead of writing text freely (or at least offer an alternative to this method).

Writing text in the mobile it’s easy to make a mistake. The mobile users are more prone to make mistakes. It’s more effective to provide a list of options for the user to select than making him write anything.

4.- More handy designs and layouts.

Make sure that the design of the application presents the contents in the right order and viewable for the mobiles.

The layouts made for PC are usually no good for viewing on a mobile. So frequently the pages must be adapted for phone users. But the best pages are the ones designed for the mobiles, so design pages exclusively for the mobiles.

DESIGN RECOMENDATION FOR PIMOBILE APPLICATIONS

Besides the screen size and the management of the user commands (see PIMobile development guide), you must take into account some other recommendations, mostly visual, in the design of PIMobile applications.

1) The image shown in a mobile phone accessing a PIMobile application is in truth a video coded using H.263 codec that is the standard for video calls. Due to the small band width and that the codec sacrifice image quality in exchange of less computing power (because of CPU cost and battery consumption on mobile phones), the images arriving to the phone are not all the sharp that could be desired. This makes needful to design using appropriate fonts and sizes looking for contrasts of colours that facilitate the readability of the image converted to H.263. It is not always easy and it is essentially a process of trial and error.

2) PIMobile Applications in truth are web applications and in that field is not frequent to use during navigation, but are accessed through a videoconferencing system. Therefore it is recommended that the web pages accessed contain associated audio phrases, melodies or generally sound signals that accompany user navigation. Use this to:

a. a) Make more pleasant and attractive pages, making it easier to appreciate the superior multimedia capabilities of 3G compared to other systems such as WAP, not only in terms of visual possibilities but the hearing too.

b. b) Complementing the indications or visual information to avoid exhausting the limited space on the screen to communicate messages that can simply be heard. For example, to display an image with potential for scrolling or zooming, it could start to reproduce a phrase saying "Remember that you can press 0 to display the aid" or even "Remember that you can press 0 to listen aid"

3) The presentation and especially the capture of the information on screen should take into account the small space that is available. So in addition to always seek the shorter and simpler procedure, it will be necessary for certain complex sequences for capturing information (forms) or options (menus) are distributed in various screens in sequence.

To experiment with the font size to employ and result on screen (legibility and text size admitted on a QCIF screen) it could be useful the DIV element to which we made reference in the PIMobile applications development guide. Example available at: http://www.pimobile.es/samples/demodiv1.htm

The result would be the image as observed, considering the font and the font size the same text takes more or less space on the screen and is more or less readable.

The following table shows approximately the quantity of text (columns) that’s possible to visualize depending the font and size. It’s easy based in the previous examples to modify the DIV style attributes or apply other CSS simulate and try out other possibilities. As seen, for the same text the use of specific font and size you can make a better use of space in the screen.

Fonts/Sizes	8px	10px	12px	14px	16px
Arial	43	28	24	21	19
Verdana	34	24	21	19	17

As a general rule we can consider that for proportional fonts there is 20 columns available of text, 12 pixel size and 12 rows. In applications that show menus, lists is a must to take into account this dimensions since the first page designs that we make.

These applications do not require Standard fonts or any specific font to be installed by the user, remember the user receives a video of the page. Any font desired can be used. You can use the small fonts that have better visualization in phone terminals than other fonts.

About the user graphical user interfaces, we recommend to create the browser tools needed to obtain an adequate user experience. The sections tree showing the contents must be simple, no more than 3 level, and allow the user, at any time, to go back to the immediate superior section.

The colours usage in the GUI is fundamental to define the master lines of the application design. Affects how the users perceive the application and the sensation they have after using it.

Next we expose a series of concepts about the use of colour in the Web applications, these concepts are useful too for the mobile applications done with PIMobile.

Number of colours in a video application

It’s risky to establish a strict rule, 6 colours may be too much in one page if there is too much contrast between them but a nice combination if the balance of colours is right.

1. As first rule it’s always best fewer colours than too many. At least the risk of stridency is lower.

2. As second rule three colours in a page is the minimum to use and in most cases it should be enough. With less than 3 colour the chance are that you will get a boring page.

a. Primary Colour: is the base tone of the page, the one that defines it, covering most space on the page. It would be the “background” attribute of the page.

b. Secondary Colour: Is the second predominant colour in the page, a lot less than the primary. Normally it’s used to limit or stress areas and must be close in colour to the primary.

c. Highlight colour: is the colour used to highlight concrete aspects of the page. By definition it must be high contrast with the primary and secondary colour, and must be used with moderation. You can use the complementary of the primary colour of the page.

Colour contrast and their use on texts.

As we commented in the beginning of this document, the search of the right colour contrast will allow the correct visualization and legibility of the texts in an image transformed into H.263.

Reaching for an intuitive definition, we can simplify and say that the contrast between the colours, it’s the difference between the two. The contrast will be grater the bigger the differences between both are in terms of

• Tone
• Luminance
• Chromaticity

When designing the contrast of colours is very important, it affects directly in the impression the site visitors get. Firstly is important having a great contrast between the text and its background. But it’s important to take care not to fall on stridencies, does are normally taken as immature or not professional.

This same recommendation applies when choosing colours to separate contents areas. Here is less necessary and abusing could result detrimental.

For example using a grey frame as working area and we wish to use a green it’s not the same this combination:

That this combination:

In the second case the great luminosity of both colours, especially the green, makes the contrast too big and the combination results aggressive.

The theory of colours defines many kinds of contrasts. Even if some are not really useful it’s very interesting to know them to deepening the effect of the colours.

Tone contrast:

1. The tone contrast between cold and warm colours is interesting. The warm colours always appear closer to the observer, while the cold colours appear to the observer as more distant.

2. . It’s more convenient to use cold colours for frames, background or secondary elements and warm colours for menus, icons, or tool bar that we want the user to keep always present.

3. For the text and background relation it’s not enough tone contrast, because it doesn’t grant enough legibility. It’s necessary to apply some kind of additional contrast.

Luminance contrast: Allows creating great contrasts with the same tone of colour only by the brightness of light:

In general this kind of contrast, even if large, it’s pleasing to the human eye. So using it is treading on safe ground. On the other hand not taking risk on tone combination can result on a dull conventional design.

Saturation contrast: the saturation contrast is frequently the most adequate for highlighting and not been too strident.

An interesting effect can be attained using areas with different saturation with a grey background: producing a transparency sensation that could be adequate in some circumstances.

Simultaneous contrast: effect created by our visual system, given a predominant colour it tends to require its complementary colour.

This effect can be obtained by the combination of two bright colours, not complementary between them. Or using a bright colour on a neutral background (grays).

This kind of contrast has the advantage of highlighting differences between areas, without the aggressiveness of the complementary colours. But can provoke tension and instability and should be used with caution.

Contrast combination: Is the most frequent, mostly when highlighting texts.

In this case there is a tone contrast, using a violet background and the text in turquoise, the adjacent complementary of violet.

But we can see that in the text case its not so: the combination does not give enough contrast and reading the text tires the eye (more so if it’s a long paragraph). The combination is natural and not unpleasant but inadequate for texts.

In this second case the initial colour contrast has a Luminance Contrast added, darkening the background and lighting the foreground. The combination of both contrast increments the text legibility.

The colours have a natural radiance. So the turquoise or blue sea is naturally clear than red-purple. Given they are complementary the mix works good and gives contrast.

However inverting the natural relations between colours does not work. Giving luminance and saturation contrast together obscures the turquoise and clear the crimson. But even if we could get enough contrast to highlight the text (which is not the case) the viewer will not fill comfortable with the mix.

As we just commented using contrast conveniently is especially important when trying to write text and highlight it enough to grant its legibility for all our users.