Part-1

i. Implementation

You are to design and develop three HTML5 pages themed on Manchester. The pages should be optimised for delivery on a tablet, and should contain the following:

a. a landing page with a short introduction and buttons (or other links) which link to further pages containing the following:

b. a page displaying a video clip with custom controls including play/pause, a progress slider, a time indicator, a mute button, a volume slider, and a fullscreen button. This should be implemented entirely in Javascript (not jQuery): write clearly structured and commented code in a separate .js file. You should also produce a Flash fallback, using a Flash playback skin.

c. an image gallery or slideshow, using a sequence of Manchester still images of the same dimensions, developed in HTML5 using jQuery. You should also develop the image gallery in Flash, with a .swf deliverable.

Be creative in your layout and design. How you connect the three and present navigation to the user, is part of your design brief and is therefore up to you. If it fits with your design and your concept of the site, you can decide to include the image gallery, map or video clip in the landing page. Flash fallbacks should be similar but do not have to be identical.

You should use a jQuery plugin that has not been taught in labs - the choice is up to you, and you should document the criteria you used when choosing it.

The video clip should have an optimal balance of quality versus size. The dimensions should be appropriate for a tablet device.

The slideshow should be user- controlled, consist of 6-8 images, all of the same dimension and with an optimal balance of quality and size.

Submit all implementation files, including .css, .js, .swf and .fla files.

ii. Documentation

a. One page justifying your design, including your choice of colours and typefaces; documenting the video codecs and file formats used; and itemising the image formats, compression settings, and file sizes.

b. One page specifying your criteria for picking jQuery plugins and justifying your choice and comparing HTML5 and Flash solutions in terms of development effort, stability, and performance.

Part 2: Usability Engineering and Mobile Devices

You are required to produce a detailed report on your proposed approach to the usability analysis of the image viewing software developed in Part 1 above. You must fully justify the methods and techniques that you propose with reference to the existing literature on usability.

You are required to produce a report on how the usability facilities available in the School of Computing, Mathematics and Digital Technology Usability Lab might be used to assess the usability of your Software from Part 1 .

For the tools and techniques that you identify you should indicate how you would use them to evaluate the usability of your specific software. For example:

• For the (fixed) eye tracker what features would you use and what data would be captured?
• For the glasses based eye tracker what aspects of the interaction will you focus on?
• For the usability analysis what specific tasks would be addressed?
• For the heart rate monitor: what types of responses are you trying to identify?
• Why are the usability tools/techniques you have chosen appropriate for this case?

You must refer to the literature on usability engineering to support your choices and method.