Tutorial 7 - Rhys Tague

Tutorial 7  Week 10

Identifying needs further

A. Practical Exercises

Activity 1: Marketing – Create your own promotional music video (for free)

Developing an application or website is only one side of the equation. You can have the best product, but not get any interest without marketing. Good marketing makes use of the principles of good interface design.

Background
A sample video can be viewed at -
http://human-computer-interaction.weebly.com/tutorial-6.html

You can find images to use at –
http://office.microsoft.com/en-us/clipart/default.aspx
http://www.flickr.com/creativecommons/

Instructions for embedding your final video into your Yola site –
http://www.enjoylearningonline.com/HCI/animoto/

Sign up for a free account at Animoto.com (again, use a dummy email if you prefer).

Collect 5-10 images that would be useful to show off your product or website. These could be screen
captures, your own images, images available under Creative Commons or even pictures available at
the Microsoft clipart site (which includes photos as well as clipart).

Create your own music video by following the steps in Animoto ( you need to upload images and
select one of the available soundtracks). If you’re not happy with the final product then you can remix
it again at the touch of a button.

When you have finalised the video, upload it to your tutorial 7 page in Yola (see background for
instructions). Put a screenshot in your portfolio backup.

Activity 2 – Multiple formats

Today, many websites are being brought out in multiple formats for different devices. As an example, view the regular facebook site http://www.facebook.com and compare it to the version developed for iphone users http://iphone.facebook.com
In a normal browser it is difficult to see what the iphone version really looks like. View both the regular and iphone versions at the following iphone emulation site - http://www.iphonetester.com/

In ½ page, discuss the need for different website formats. Include information on –
· What problems are associated with viewing the regular facebook site on an iphone?
· List several other websites which have dedicated iphone versions.
· What issues would a developer of an iphone version website need to consider?

As the range of display devices increases so does the need for different presentation formats. These new formats allow for diverse rendering for different devices. For instance, devices with a small display area need to be rendered differently to devices with a large display area. The reason for this is because the small display area will not be able to incorporate everything that is on a large display area; there is simply not enough room.

We are now seeing more and more sites accommodate these new formats. The reason for this is these sites now realise the potential and the size of the market of these small display devices. Some sites that incorporate another format of their site are: http://cleomobile.ninemsn.com.au/mobile/, http://m.google.com, http://m.twitter.com, and http://m.flickr.com. These are just a few of the thousands out there.

These new formats need to incorporate different design aspects as well. The design aspects are to accommodate how the devices are interacted with. A classic example is a touch screen on a mobile phone. As a finger doesn’t have the dexterity of a mouse pointer the buttons and other elements of the format needs to be enlarged to accommodate for this loss of dexterity. An example where this is true is when trying too few the regular Facebook site on an iPhone. As there are numerous amounts of functions on Facebook and different areas where someone can interact with the site, it is hard for an iPhone to accommodate this. The result leaves the user having to move around and navigate mysteriously to find what they want to do. Also with this, the user has trouble clicking the links and buttons, as some buttons on Facebook are too small.

The above issues of these formats leads to a developer needing to pay close attention to the overall design and interaction. The reason for this is if an individual finds that the site takes too long to render or finds it too hard to use they won’t come back. On the iPhone for example, the buttons and the overall design of the mobile format has to accommodate the screen size. The format also needs to accommodate for the user’s finger.

Activity 3 – Choosing Colours

How do designers pick colours which just seem to work?

Read the following pages –

http://www.color-wheel-pro.com/color-theory-basics.html

http://www.color-wheel-pro.com/color-schemes.html

Describe what the colour theory is and describe the differences between the following colour harmony schemes – monochromatic, complementary, analogous & triadic

Look at the examples available at http://www.color-wheel-pro.com/sample-schemes.html

(Note – the sample images expand if you click on them)

Choose your favourite colour combination and answer the following questions.
· Which colour scheme does it belong to?
· What are your reasons for choosing this combination?
The colour combination that I choose as my favourite was Contrast. The Contrast colour combination fell under the split complementary colour scheme.

The reason I choose this colour combination was that it felt warm and at the same time felt professional. The colours in the combination weren’t over powering and all of them seemed to work together, not one stood out more than the other. Also in the navigation area, when a link was active it was easy to see and it didn’t throw out the page by drawing too much attention to it. With the colour combination it allowed the page to highlight the content as well by allow all the colours complement each other. That was the content on the white background stood out.

B. Independent Exercises:

a. Research the following terms and explain the difference between them – typeface, font, font
family.

• Typeface: is a set of characters in a particular design or style.
• Font: is a complete set of characters that has a particular typeface
• Font Family: is a group of fonts that have the same typeface but are in a different style. For instance Arial Bold and Arial Regular

Now those are the definitions the different between them are obvious. First a typeface is the actual look of the characters, a font is a collection of characters with a certain typeface and a font family is fonts that have the same typeface but are in different styles – bold/regular.

Read http://www.w3.org/Style/Examples/007/fonts

Select 2 of your favourite websites to review. For each, answer the following questions –

b. Which font category (serif, sans serif, monospaced, cursive, fantasy) was used for the logo or main
title?

c. Which font category was used for headings?

d. Which font category was used for body text?

e. How many font categories appear on the page?

Put your answers for b) – e) in a table.

f. What is your favourite font family for web pages? Why?
My favorite font family is Tahoma. The reason for this is because it is clear and easy to read. It is also spaced quite well.

Independent activity 2: Multimedia

If you have not done so already, visit some Web site that offers tours of 3D virtual worlds. Record your experiences. Discuss

1. Length of time to download and install the player

The time it took to download the player took about 7 seconds. Now considering that the internet speed at uni where it was accessed is 10mbps plus this is quite substantial. The actual player was preinstalled as it was the flash player.

2. The process of learning to navigate the world

Before the world started you were presented with an instruction screen on what keys did what. For instance to move forward the key was ‘w’ and to move backwards the key was ‘s’. This was so you could move throughout the world. Even though you could move throughout the 3D world the mouse allowed you to look around.

• Download times for the virtual worlds.

As the download of the player has already been discussed the time for the actual download of the virtual world was infinite. The reason for this is because different parts of the world were downloaded only when it was needed by the client. This lead to the virtual world to be incomplete until the required image or area was downloaded. All that could be seen is a square saying buffering.

Independent activity 4: Multimedia

Download and install two or more 3D browsers. Try out their navigation controls and compare the
strengths and weaknesses of each.

The first 3D browser was spehereXplorer

First off, this browser allowed you to open up multiple pages and then be able to navigate through them via a Sphere. The Sphere was a good concept as it allowed you to grasp where you were in the 3D space. All you had to do is rotate the sphere to view the web-page at a different angle. There was a disadvantage with this though. The actual movement from one page to another was time consuming. I would rather just click on a tab and show the page. I don’t want to fiddle around with the sphere to go to the next page. 

The second 3D browser was browse 3D

This browser looked poorly made, compared to some of the browsers out there now. The kinaesthetic feel wasn’t there when it came to this browser, which is a major let down. You could again view many pages at once, but like with the one above, it took more time than just clicking on a tab. I guess it would come in useful if you were looking at more than ten pages. An advantage of this browser is that it didn’t have trouble rendering complex pages. Another advantage of this browser is that the navigation was simpler then the one above. The reason for this is because each page was next to another, therefore all that was needed was to zoom out and click the page you want.