Web Programming TL 11

Transcription

1 Tutorial Human Computer Interface (HCI) Analysis We will first look at 2 websites that have some Flash animation. Just because you are using Flash or HTML5, your website should still obey a few HCI rules: Site 1: Duke Nukem Forever Duke Nukem is a video game series that was very popular game in the 1990s, and the franchise encountered many problems in developing sequels. It is (according to Wikipedia) a notable example of vaporware: software/hardware projects that take money from investors, but nothing actually gets built. (Warning: If the words "I've got balls of steel" will offend you, I recommend turning down the sound) Discuss the following elements and how they will be received by different users: Age verification at start Warning messages for violence and language Waiting time for page to load and the content at this time The amazing flash animation once the page loads The colour scheme: What is it? Is it appropriate? The navigation links at the top of the page The HTML version link for users who don't have or don't like Flash What sort of computer do you think the site was developed on? Do you think any testing was done on other computers beforehand? COSC2453 SP4, 2013 page 1 of 5

2 Site 2: Translocation Book The Translocation book contains a series of photographs developed by internationally renowned photographer George Logan to raise funds for the Born Free Foundation. It is a micro-website that is separate from his main website and built for a number of purposes: to sell books and raise funds for wild animals in Africa, and to bolster his reputation as a world class photographer. (Warning: If the sight of wild African animals roaming free in Scotland UK will offend you, I recommend turning down the brightness) Discuss how the intro to the site caters differently for these two types of visitors: (Note: You will not be expected to draw UML diagrams in the exam. They are being used here to visually demonstrate the relationship between the user and the computer) COSC2453 SP4, 2013 page 2 of 5

3 Once inside the main site, discuss how the site caters differently for these types of visitors: What techniques and/or tricks does the website employ to convert undecided visitors into book buyers? COSC2453 SP4, 2013 page 3 of 5

4 There are other considerations for other type of visitors. Discuss how these considerations are exercised without detracting from the site's main purpose(s): Site 3: Passpack.com Passpack is a non-flash website that provides a very useful function: to store a user's or an organisation's passwords in a place securely online and help maintain better internet security for its users. They have a solution to a problem almost everybody has direct experience of, yet their solution and how they achieve it is difficult to explain, and most of their audience is intimidated by the technology used. What steps have the taken to reach as wide a market as they possibly can? COSC2453 SP4, 2013 page 4 of 5

5 HCI Case study (typical exam question) We will discuss this case study during a collaborate chat session, in the meantime please publish your own solution on the discussion board- The Melbourne Fringe Festival (MFF) is an annual independent arts festival held in Melbourne. The Festival runs for three weeks from late September to early October, usually overlapping with the beginning of the Melbourne International Arts Festival. Fringe festival includes a wide variety of art forms, including theatre, comedy, music, performance art, film, cabaret, digital art, live art and circus performance as well. Events are held in venues throughout the city, from bars, clubs and independent theatres to high profile locations including Federation Square and the Melbourne Museum. Artists produce shows independently and then register into the Melbourne Fringe Festival. In addition to the Independent Arts Program, the Melbourne Fringe funds and produces its own events, presented free of charge and fostering public participation. In a nutshell, the Melbourne Fringe Festival (MFF) is an open-access, multi-art form event with a broad scope for programming and presentation spanning performance, comedy, music, visual art, cabaret, circus, dance and more. The council of the City of Melbourne has contracted you to carry out a detailed HCI analysis prior to the development of the 2014 website. Now answer the following questions: 1- List four intended audiences of the MFF website. 2- What kind of colour scheme will you use for the website and why? 3- Draw a rough sketch (with a pen or a pencil) of the homepage of MFF website. Your sketch should clearly indicate all the links and the major content areas (header, footer, navigation bar and the main content area). Label the diagram to explain the various sections of your sketch. 4- How would you design the website so that it is accessible over a wide range of web viewing devices, such as smart phones, notebooks & laptops, widescreen desktop PC's? COSC2453 SP4, 2013 page 5 of 5