White PaperUsability Testing ForFlash ApplicationsMV Asha JyothiLast Updated: 8th August, 2007AppLabs.comPage 2© 2007 AppLabsApp_Whitepaper_Usability_Testing_For_Flash_Applications_1v00AudienceThe 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.Significance of Multimedia TestingBefore 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. What Flash is all AboutFlash, 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 anti-aliased, 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 (vector-based 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.Vector GraphicsVector 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. When you edit a vector graphic, you modify the properties of the lines and curves that describe its shape. Vector-graphics are resolution-independent, which implies they can be displayed with varying resolutions without losing the quality.Bitmap GraphicsBitmap 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 Page © 2007 AppLabs App_Whitepaper_Usability_Testing_For_Flash_Applications_1v00 Process to be Followed for Flash TestingWhat 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, namelyContent proofing and audio testing;Animation testing;Synchronization testing;Interactive testing (e.g. games and applications involving action scripting).Content Proofing and Audio TestingProofing 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. Animation TestingAn SWF (Shockwave file) format is ideal for presenting vector-based interactive and animated graphics with sound  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 TestingWithout 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 TestingInteractions 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.Types of InteractionsThere are various interaction methods that can be used. Several are listed below:Interactions for presenting the dataRoll-overCircleFormula displayStagesJavaScript pop-upAudio playerImage displayerInteractions for decisionsYes/No decisionsDrop and dragInteractions which require inputEvaluation Quiz      AppLabs.com Page © 2007 AppLabs App_Whitepaper_Usability_Testing_For_Flash_Applications_1v00 Flow of Flash Usability TestingAppLabs.com Page © 2007 AppLabs App_Whitepaper_Usability_Testing_For_Flash_Applications_1v00 Objects to be testedDescriptionContent Proofing and Audio testingTypographical errorsUsing 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.British/American EnglishMake sure that the content follows the language as per the customer’s requirement. Ensure the language is consistent throughout. Uniform font size and styleThe font size and font style should be uniform throughout.Grammatical errorsEnsure that there are no grammatical errors and that the sentences sound meaningful.Spacing errorsThe spacing must be consistent, approppriate and there must be no spaces missing, e.g. between words. Subject related errors, such as formulae in mathematicsSME (Subject Matter Expertise) is an added advantage for the designers/testers, but it need not be a mandatory skill.Audio supplied in accordance with the contentMake sure that the audio files are relevant to the content with which to be synchronized.Uniformity in the pitch of the audio filesThe pitch of the audio files should be uniform throughout the application.Clarity in voiceCheck the clarity in voice.Animation TestingHighlighting the required partEnsure that few of the important points have to be highlighted in order that they be fully understood.Objects to be testedDescriptionHighlighting MethodsA designer should adopt only a few types of highlighting technique so testers need to check whether designers are meeting the highlighting standards or not.Movie running smoothlyMake sure that the movie is running smoothly i.e. the movie does not abruptly stop anywhere.Broken rings, lines, arrows etc., while highlightingWhile highlighting with rings or arrows etc., ensure there are no broken sections.Image appearing too dim/dullEnsure that the image is adequately bright.Suggesting the color combinations and pictures at required placesTesters 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.Synchronization testingProper synchronizationEnsure 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.Interactive testingTesting the movies where human interactions are required in Flash applications, i.e. Action scripts concept.(Action Script is a scripting language in Macromedia Flash)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” etcFlash Testing ChecklistThis 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 4 types of testings discussed earlier.AppLabs.com Page © 2007 AppLabs App_Whitepaper_Usability_Testing_For_Flash_Applications_1v00 Common BugsThe most common bugs found in the usability testing of multimedia applications are listed below:Content Proofing BugsTyposThe red highlighted area shows a typo error which should actually read as “Buyer(s)”.British/American EnglishIf the client requires American English, then we need to modify the word “Analyse” to “Analyze” in the above snapshot.Grammatical ErrorsGrammatical 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  databases” should be replaced by “Data taken directly from the operational databases”.Font and Colors are not Clear EnoughAs is seen clearly in the above file, the text content is not clear enough. This should be identified by the tester and reported.Spacing ErrorsIn 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 overlapIn the above example the arrows are overlapping which is poor design. AppLabs.com Page 7 © 2007 AppLabs App_Whitepaper_Usability_Testing_For_Flash_Applications_1v00 Animation Testing BugsNo Proper HighlightingIn 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.Interactive Testing BugsLinks not WorkingIn the above example, the red highlighted area should be an active link, revealing boxes with images. Links must be tested to ensure they work.  Necessary SkillsThe mandatory skills required by a software tester to test the usability part of Flash movies are as follows:Creative skillsWorking knowledge of FlashKeen observation Testing skillsConclusionAdobe’s Flash technology has become one of the leading contenders in the Rich Internet Applications (RIA) market, with over 95 % 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. 