White Paper
Usability Testing For Flash Applications
MV Asha Jyothi
Last Updated: 8th August, 2007
Audience
The target audiences for this session would be all the software testing professionals who work on Flash movies (Shockwave Files), or any multimedia Flash application, in order to satisfy the customer requirements and to deliver quality products to the client.
Vector Graphics
Vector graphics describe images using lines and curves, called vectors, which also include color and position properties. Below is the image of a leaf which is designed by the points through which lines pass.
Significance of Multimedia Testing
Before looking at the significance of “Multimedia Testing”, we must first ascertain what “Multimedia” is. Multimedia refers to computer-mediated information that is presented currently in more than one medium. It consists of some, but not necessarily all, of the following elements: text; still graphic images; animations; hypermedia; photographs; video and audio, i.e. sounds, music and narration. Multimedia testing, or in other words, usability testing, is the dynamic process that can be used throughout the process of developing interactive multimedia software. The purpose of multimedia testing is to find problems and make recommendations to improve the utility of the product during its design and development. When you edit a vector graphic, you modify the properties of the lines and curves that describe its shape. Vectorgraphics are resolution-independent, which implies they can be displayed with varying resolutions without losing the quality.
What Flash is all About
Flash, a popular authoring software developed by Macromedia, is used to create vector graphics-based animation programs with full-screen navigation interfaces, graphic illustrations and simple interactivity in an antialiased, resizable file format that is small enough to stream across a normal modem connection. The software is ubiquitous on the web, both because of its speed (vectorbased animations, which can adapt to different display sizes and resolutions, play as they download) and for the smooth way it renders graphics. Flash files, unlike animated but rasterized GIFs and JPEGs, are compact, efficient and designed for optimized delivery. Before moving further, we will have a look at the major difference between vector and bitmap graphics. Since computers display graphics in either vector or bitmap format, so understanding the difference between the two formats would make this session more clear. Using Flash, we can create and animate vector graphics. Flash imports and manipulates vector as well as bitmap graphics that have been created in other applications.
Bitmap Graphics
Bitmap graphics use colored dots, called pixels, which are arranged in a grid. In the below image, the leaf is designed by the specific location. When you edit a bitmap graphic, you modify pixels rather than lines and curves.
Bitmap graphics are resolution-dependent; editing the bitmap graphic can change the quality of the picture.
AppLabs.com
App_Whitepaper_Usability_Testing_For_Flash_Applications_1v00 Page 2 © 2007 AppLabs
Process to be Followed for Flash Testing
What is Flash Testing? During the development of the Macromedia Flash movies the designers may face problems while experimenting with creative movies, so testing these files/movies by following simple rules/guidelines will result in a better output. Flash Testing can be broken down into the following principle phases, namely
Content proofing and audio testing; Animation testing; Synchronization testing; Interactive testing (e.g. games and applications involving
for the web. Animation is a technique where successive still frames of a particular object appear to constitute a sequence of movements. Testing these animations along with the sound for proper display of output makes a big difference. Animations make the environment alive for better understanding purpose.
Synchronization Testing
Without synchronization, what viewers hear will not match what they see on the screen. Synchronization therefore plays a major role in every field, so before uploading any video files, synch testing becomes a mandatory task.
Interactive Testing
Interactions are the physical controls that are used to execute the moves of an application. For example, student interaction with the application plays an important role for online education. To facilitate student engagement with material, interactions are used to a high level to enhance their motivation and reflection.
action scripting).
Content Proofing and Audio Testing
Proofing is more important for web content thus rechecking the content is our primary objective. One of the major aspects of the usability testing in Flash applications would be content proofing, in accordance with synchronized/ corresponding audio testing. Proofreading is a separate activity. Proofreading consists of reviewing any text, either hard copy or soft copy, checking for typographical and formatting errors. This may be done either against an original document (with a checklist for reference) or adhoc (without checking against any other source). Similarly when dealing with audio testing, we need to ensure the correct audio files have been provided for proper synchronization with the text. While going through this testing there are some rules/checklists defined which will be discussed later.
Types of Interactions
There are various interaction methods that can be used. Several are listed below:
Interactions for presenting the data
Roll-over Circle Formula display Stages JavaScript pop-up Audio player Image displayer
Interactions for decisions
Yes/No decisions Drop and drag
Animation Testing
An SWF (Shockwave file) format is ideal for presenting vector-based interactive and animated graphics with sound
Interactions which require input
Evaluation Quiz
AppLabs.com
App_Whitepaper_Usability_Testing_For_Flash_Applications_1v00 Page © 2007 AppLabs
Flow of Flash Usability Testing
AppLabs.com
App_Whitepaper_Usability_Testing_For_Flash_Applications_1v00 Page © 2007 AppLabs
Flash Testing Checklist
This section covers the Flash checklist; which includes the items to be tested right from the beginning of the Flash testing life cycle. The checklist consists the details of the types of testings discussed earlier. Objects to be tested Description Using a spell checker is not sufficient, as errors such as “fro” instead of “for”, “grate” instead of “great” and “form” instead of “from” will not be picked up, so you need to read your application carefully. Make sure that the content follows the language as per the customer’s requirement. Ensure the language is consistent throughout. The font size and font style should be uniform throughout. Ensure that there are no grammatical errors and that the sentences sound meaningful. The spacing must be consistent, approppriate and there must be no spaces missing, e.g. between words. SME (Subject Matter Expertise) is an added advantage for the designers/ testers, but it need not be a mandatory skill. Make sure that the audio files are relevant to the content with which to be synchronized. The pitch of the audio files should be uniform throughout the application. Check the clarity in voice. Ensure that few of the important points have to be highlighted in order that they be fully understood.
Objects to be tested
Description A designer should adopt only a few types of highlighting technique so testers need to check whether designers are meeting the highlighting standards or not.
Content Proofing and Audio testing
Highlighting Methods
Typographical errors
British/American English
Make sure that the movie is running smoothly i.e. the Movie running smoothly movie does not abruptly stop anywhere. Broken rings, lines, arrows etc., while highlighting Image appearing too dim/dull While highlighting with rings or arrows etc., ensure there are no broken sections. Ensure that the image is adequately bright. Testers can make suggestions regarding the color combinations, which add visual beauty to the output product and also some enlightening pictures wherever required instead of text. Ensure that the audio is in sync with the highlighted part in the movie. The start and end of the movies should not be neglected while testing the synchronization. While testing the Flash applications where human interaction is required, you need to check whether the required output is being satisfied by passing the values; many such navigations say “next button” etc
Uniform font size and style Grammatical errors
Spacing errors
Suggesting the color combinations and pictures at required places
Subject related errors, such as formulae in mathematics Audio supplied in accordance with the content Uniformity in the pitch of the audio files Clarity in voice Animation Testing Highlighting the required part
Synchronization testing
Proper synchronization
Interactive testing Testing the movies where human interactions are required in Flash applications, i.e. Action scripts concept.
(Action Script is a scripting language in Macromedia Flash)
AppLabs.com
App_Whitepaper_Usability_Testing_For_Flash_Applications_1v00 Page © 2007 AppLabs
Common Bugs
The most common bugs found in the usability testing of multimedia applications are listed below:
databases” should be replaced by “Data taken directly from the operational databases”.
Font and Colors are not Clear Enough
Content Proofing Bugs
Typos
The red highlighted area shows a typo error which should actually read as “Buyer(s)”.
British/American English
As is seen clearly in the above file, the text content is not clear enough. This should be identified by the tester and reported.
Spacing Errors
If the client requires American English, then we need to modify the word “Analyse” to “Analyze” in the above snapshot.
Grammatical Errors
In the above example, the highlighted area shows “Plansand” wherein a single space is required in between “plans” and “and”, as they are two different words.
Clarity of Images i.e. should not overlap
Grammatical errors can be particularly difficult to catch, because spell-check might not highlight them. This is why people need to concentrate on proofreading which is still the best solution. If we observe properly, there is a grammatical error in the second bullet; “Data taken directly in the operational In the above example the arrows are overlapping which is poor design.
AppLabs.com
App_Whitepaper_Usability_Testing_For_Flash_Applications_1v00 Page © 2007 AppLabs
Animation Testing Bugs
No Proper Highlighting
Necessary Skills
The mandatory skills required by a software tester to test the usability part of Flash movies are as follows:
Creative skills Working knowledge of Flash Keen observation Testing skills
Conclusion
In the above example the text is ‘highlighted’ by the red line. The line actually succeeds in covering the text, thus demonstrating an inappropriate method of highlighting. Adobe’s Flash technology has become one of the leading contenders in the Rich Internet Applications (RIA) market, with over 9% of all browser users able to access Flash content. Providing users with a content rich, interactive user experience places a significant emphasis on the quality and look and feel of the application. Minor errors that may have been overlooked on a static web page can become critical errors that leave users with a confusing, annoying or simply unworkable interface that destroys the user experience; internet applications must provide an excellent experience or users will not return to your site. Only through comprehensive usability testing can you ensure that an excellent user experience is built into the core of your internet application. It should be an essential component of every Flash application’s test plan.
Interactive Testing Bugs
Links not Working
In the above example, the red highlighted area should be an active link, revealing boxes with images. Links must be tested to ensure they work.
AppLabs.com
App_Whitepaper_Usability_Testing_For_Flash_Applications_1v00 Page 7 © 2007 AppLabs