Monday, 26 October 2009

visual cues





The visual cue here is "WAIT"

it is common sense to press the white button and wait at a set of traffic lights until we see and hear the sound of the beeping and the green flashing man.

But what if somebody couldn't even spell, or read the word "WAIT"?

if the user in this case wasn't English, this still shouldn't be a problem as in there own country, having used traffic lights before they would have learnt the Stop and "WAIT" procedure.

However if the user was english but could not read a word in a sentence, then by looking at the visual diagram at the bottom of the traffic light this would give them an idea that the red man means danger and that they should wait! and That the green man means go,

But what if this user was Blind?

if the user was blind he or she would wait until they hear the sound (beeping sound) where this tells them it is safe to cross.

Why does this work?
in terms of Mechanics the user approach's the lights and wants the cars to stop. when looking at the traffic light interface the aesthetical form and looks have been developed to communicate a simple message that tells the user to press a button, as there is no other option for them other then to press it once. once pressed a visual message comes up which has some type on the interface displaying WAIT in block capitals. this message, is a warning from the style of typography it is communicated out in. The next part of the mechanics is the most important part the process which communicates a message to the user to walk safely across the road without getting ran over.
In doing this the traffic light produces three ways of signs, and meanings to communicate the right message.
The first sign, the light changes to green with a man and a cyclist flashes, this signifies to the user that it is safe to go as the cars have been stopped on the other side.

The second Sign of feedback is the audio sound. Once the lights have changed to green a loud looping beep sound is signaled, this is signified to any users which are blind and cannot see the visual response.

The third and final output is the visual diagram on the interface. If a user is watching the text that reads WAIT in the first step, This will change to a flashing green man and a cyclist which means it is now safe.

I wanted to understand more in depth of how a traffic like actually worked. in terms of mechanics, and construction I had a look at some research below.
Quote below taken from
http://wiki.answers.com/Q/How_do_traffic_lights_work

"Traffic lights work on a timer, but if you look closely on the road when your stopped at the traffic lights, you should see a rectangle like shape under the car it is called a sensor And when you drive on it, a signal is sent, so the timer knows a car is waiting, if no other cars are going the other way, the timer will change and the light will go green so you can go".






This visual cue clearly shows a speed limit road marking at 30MPH.
Drivers that see this sign know that it is a offence to drive past this mark above that speed.
The marking is on a red background which signifies danger.
The red background can be seen from a distant do to size, which signifies to drivers to slow down before they reach to this area.
The marking is also white, large and stretched so cars at a speed can see it when driving over at a pace.
White marking are more commonly used in traffic because they are a contrasting colour and work well when used for warning and speed signs.

Quote below taken from

"When used as a border on a circular sign in the UK the colour red signifies that you must not do anything but if the colour red is a border on a triangular sign then there could be danger ahead for motorists, you are being warned that extra care is needed in the vicinity of the sign."


This image shows a disabled car parking spot.

As a driver looks for a space to park, they see this visual cue, the driver automatically Carry's on.

However if the driver is disabled then this visual cue will be what they are looking for.

The visual cue in this image does not have to have the word "DISABLED" to get peoples attention,

with just a basic stick man in a half circle, represents and signifies to all National public citizens, that this icon is for disabled use only!

The yellow lines are ergonomically designed to form a purpose, it"s function is to stand out from the rest of the parking slots, as other parking bays are white and need no aesthetics to only line and colour. Disabled parking bays are more important and require a more semiotic meaning to communicate the full message. The yellow means caution or warning to motorists. This tells the driver only specific drivers can use this space.



When a person is walking in an unknown environment, he or she is unaware of the building or place they are walking around.

with the help of this simple yellow line that directs the visitor around the building, it is known as a visual cue.

It reacts in the same way as a website. For example when a user lands on a random page they are unsure what to do next. But with the help of some use full Buttons that act as navigation, the user can feel more at home and they can enjoy a more user friendly site
without getting frustrated.

Visual cues like this can normally be found in large art galleries Universities and Hospitals.

Quote below from

http://www.body-motion.co.uk/visit_us/index.html

"Take the exit on the left at the top of escalator.

Go up stairs on the left signed 'Barbican' .

Continue straight ahead approx 100m and take first right onto 'Gresham Street'.

Continue down Gresham Street, taking third left signed 'Wood Street'

Continue down 'Wood Street' and take escalators at the end on the left handside with the yellow pavement writing saying 'Barbican Centre Follow' (just before the main road)

At the the top of escalators follow the yellow line straight ahead .

Cointinue straight ahead past the the reception for 125 london Wall 'JP Morgan'

Cross the bridge into barbican building and take an immediate left into 'Wallside'

Take an immediate right and walk down two flights of stairs.

The Clinic shares premises with the Barbican Dentist in the 'Postern Building'."



The visual cue in this screen grab is the title at the top of the page.
The title is the first thing user will see and look for when he or she visits a website.
When a user enters a website they want to know what they are looking for, just as if you were browsing in a shop. To have a good title is important else your users could be wasting there time. If your title is a responsive title relevant to your site content then your users will stay and read more.
Quote Below taken from

http://www.dashaver.com/important-things-on-every-page

" The title is essential for a reader to immediately get a feel for what a page is about, and of course from the site owner's perspective by adding a well worded title/summary you are also helping search engines to get a feel for that page's content."



This screen grab of a website, is of modern designing agency, who design interactive media. The visual cues here show images of interactive elements such as laptops,cameras, smart boards, and mobiles. Ergonomically They have taken these images and turned them into visual cues by making these icons the main point of the user's interest. To do this they have used software such as (flash) to turn these visual cues into interactive buttons using advaced technology and skills, so when the user hovers and clicks on the the images, they will respond to the users actions, and perform a task programmed by the designer.



This is a visual cue of the google search bar, this famous cue is viewed and searched by Hundreds of thousands of users every second of every day.

The reason why Google is one of the best web search engines in the world is because of it's userbillity, and mechanics. To use the search bar there is no hard task at all. The userbilllity rule requires 3 steps for landing on the page you want. In this case the first step is to type your source, the second step is to select a button to search for and the third choice is to locate the right website on the results page. in some cases it may take more then three clicks to find a page you want, because there may be millions of sites under the same search criteria so you may need to specifically define your search to meet the subject matter.






























































































































































































































































































































unit 12 ,, preperation



For this unit, I will be, performing tasks, on a vending machine.
to help me with my tasks, i shall use a video camera, and a volunteer,

while i will be filming, the volunteer we be using the machines components to see how the machines tasks perform.

I will test the machine in all usability situations, while I take notes on it's actions performed.

After filming my input information will be recorded into a flow chart for a final decision.

Thursday, 8 October 2009

voloume controller in action script



1 create new flash document 50px w by 100px h and frame rate = 21fps.

2 create your slider,Give it an instance name of "slider". Save your file as soundslider.fla into a folder called whatever you want. Now double click on the new mc on the stage to go inside it. Make a new layer and draw a new rectangle - 25px X 5px. Select your new rectangle and look at the align panel. Make sure that to stage is selected and center it vertically and horizontally. Now convert it to a movieclip - name it slideBarMC and set the registration point to the center.

3 OK go back to the main timeline. We'll set up the last couple of graphics before we get into the scripting. Select frame 1 of the buttons layer and (up the top of the stage) draw a square and triangle to use as the stop and play buttons. Select the square, convert it to a button named "stopBut" and give it an instance name of stopB. Select the triangle, convert it to a button named "playBut" and give it an instance name of playB.

now get yourself a short audio loop (can be an mp3, wav or wav). In flash, select File/Import to library and locate your sound. Import your sound then click on it once in the library to select it. Open the drop down menu up the top right of the library and choose "linkage". Set the linkage.

then add a new layer called actions.
write the following.

bgSound = new Sound(this);bgSound.attachSound("sound1");bgSound.start(0, 99);playB.enabled=false;slider.slideBar._y = -50;slider.slideBar.onEnterFrame = function() { bgSound.setVolume(0-this._y);};slider.slideBar.onPress = function() { startDrag(this, false, this._x, -65, this._x, 0);};slider.slideBar.onRelease = slider.slideBar.onReleaseOutside=function () { stopDrag();};stopB.onRelease = function() { bgSound.stop(); playB.enabled=true; stopB.enabled=false;};playB.onRelease = function() { bgSound.start(0, 99); playB.enabled=false; stopB.enabled=true;};stop();



//dont include the folling in your code

Line 1 - we make a new sound object on "this" timeline. The "this" is very important because if you do not sprecify a target here then flash will assume we want to make the new object on level0 which would cause us problems later on if we wanted to load our sound slider into another movie.

Line 2 - We attach the sound in our library to our new sound object. Remember that "sound1" was the linkage name that we gave our sound.

Line 3 - We start out sound object. The "0" represents the number of milliseconds from the start of the sound that we want flash to start playing - 99.9% of the time you will set this 0. The "99" represents the number of times we want flash to loop our sound.

Line 4 - Turn off the play button (we dont need it at the moment because the sound is already playing).

Line 5 - Set the starting y position of our slideBar

Lines 6-8 - This tells Flash to set the volume of our sound object to whatever the y position of our slideBar is. Now because we are getting the y value of the slideBar from within the sliderMC, we need to convert the negative y value into a positive number to set the volume to. We do this with "0-this._y". So if the slideBar was at a y position of minus 43 then we would set the volume of our sound object to 0 - -43 which = 43.

Lines 9-14 - This sets up the dragging action for our slideBar and constrains it to a rectangle.

Lines 15-19 - Our stop button action. First line stops the sound object. Second line turns on our play button. Third line turns off the stop button.

Lines 20-24 - Our play button action. First line plays the sound object. Second line turns off our play button. Third line turns on the stop button.

OK save your fla and then test it.

OK I think that's about it.

//havefun

Thursday, 1 October 2009

action script for creating a currency converter



//importing DataProvider class
import fl.data.DataProvider;

//creating a new data provider object
var dp:DataProvider = new DataProvider();
//first we create a variable to store the first value
var fromVal:Number;
//then we create a variable for the second value
var toVal:Number;
//here we store what the user inputs
var inputVal:Number
//the result value
var calculatedVal:Number;
//the user can enter only numbers in the TextInput
input_txt.restrict = "0-9";

//adding items to the Data Provider. The user sees the "label" property.
//For data we set the currency weight. US dollar has weight 1.
//The others are in proportion to US Dollar
dp.addItem( { label: "U.S. Dollars", data:1 });
dp.addItem( { label: "Australian Dollars", data: 0.832114 });
dp.addItem( { label: "Canada Dollars", data: 0.926215 } );
dp.addItem( { label: "Euro", data:1.42643 });
dp.addItem( { label: "United Kingdom Pounds", data:1.65151 });
dp.addItem( { label: "India Rupees", data:0.0207573 });
dp.addItem( { label: "Poland Zlotych", data:0.341955 });
dp.addItem( { label: "Russia Rubles", data:0.0325614 });
dp.addItem( { label: "Philippines Pesos", data:0.02079 });
dp.addItem( { label: "Bulgarian Leva", data:0.729733 });
dp.addItem( { label: "Brazil Reais", data:0.531719 });

//populating the lists
fromList.dataProvider = dp;
toList.dataProvider = dp;

//adding Event Change listeners to all of the components
fromList.addEventListener(Event.CHANGE, calculateResult);
toList.addEventListener(Event.CHANGE, calculateResult);
input_txt.addEventListener(Event.CHANGE, calculateResult);
//we set items that are set by default
fromList.selectedIndex = 0;
toList.selectedIndex = 3;

//initializing "fromVal" and "toVal"
fromVal = fromList.selectedItem.data;
toVal = toList.selectedItem.data;

function calculateResult(e:Event):void{
fromVal = fromList.selectedItem.data;
toVal = toList.selectedItem.data;
//casting String to Number
inputVal = Number(input_txt.text);
//calculating the result
calculatedVal = inputVal * (fromVal / toVal);
//adding the result to the text field
result_txt.text = calculatedVal.toString();
}

create a apple preloader



package classes
{
import flash.display.MovieClip;
import flash.text.TextField;
import flash.events.Event;
import flash.events.ProgressEvent;

package classes
{
import flash.display.MovieClip;
import flash.text.TextField;
import flash.events.Event;
import flash.events.ProgressEvent;
Step 10 - Extending the Class
view plaincopy to clipboardprint?
public class Preloader extends MovieClip
{

public class Preloader extends MovieClip
{
Since our preloader is a MovieClip and it's using a timeline, we're going to extend this class using the MovieClip class.

Step 11 - Variables
We only need to use one variable in this class. This variable will store the instance name of the textfield we're using to show the loading information.

view plaincopy to clipboardprint?
private var dataTextField:TextField;

private var dataTextField:TextField;Step 12 - Start Function
view plaincopy to clipboardprint?
public function start(dataTextField:TextField):void
{
this.dataTextField = dataTextField; //Sets the dataTextField var to the parameter value

/* The loaderInfo Object is in charge of the loading process, in this code we add
listeners to check the progress and when the movie is fully loaded */

this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
this.loaderInfo.addEventListener(Event.COMPLETE, onComplete);

}

public function start(dataTextField:TextField):void
{
this.dataTextField = dataTextField; //Sets the dataTextField var to the parameter value

/* The loaderInfo Object is in charge of the loading process, in this code we add
listeners to check the progress and when the movie is fully loaded */

this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
this.loaderInfo.addEventListener(Event.COMPLETE, onComplete);

}Step 13 - The Progress Function
view plaincopy to clipboardprint?
private function onProgress(e:ProgressEvent):void
{
/* Here we use some local variables to make better-reading code */

var loadedBytes:int = Math.round(e.target.bytesLoaded / 1024);
var totalBytes:int = Math.round(e.target.bytesTotal / 1024);
var percent:int = (e.target.bytesTotal / e.target.bytesLoaded) * 100;

/* Sets the loading data to the textfield */

dataTextField.text = String(loadedBytes + " of " + totalBytes + "KB Loaded\n" + percent + "% Complete");
}


private function onProgress(e:ProgressEvent):void
{
/* Here we use some local variables to make better-reading code */

var loadedBytes:int = Math.round(e.target.bytesLoaded / 1024);
var totalBytes:int = Math.round(e.target.bytesTotal / 1024);
var percent:int = (e.target.bytesTotal / e.target.bytesLoaded) * 100;

/* Sets the loading data to the textfield */

dataTextField.text = String(loadedBytes + " of " + totalBytes + "KB Loaded\n" + percent + "% Complete");
}
Step 14 - The Complete Function
view plaincopy to clipboardprint?
private function onComplete(e:Event):void
{
/* Remove listeners */

this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress);
this.loaderInfo.removeEventListener(Event.COMPLETE, onComplete);

//Here you can add a function to do something specific, I just used a trace */

trace("Loaded!");
}

private function onComplete(e:Event):void
{
/* Remove listeners */

this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress);
this.loaderInfo.removeEventListener(Event.COMPLETE, onComplete);

//Here you can add a function to do something specific, I just used a trace */

trace("Loaded!");
}
Step 15 - Document Class
Create a new ActionScript file and start writing:

view plaincopy to clipboardprint?
package classes
{
import flash.display.MovieClip;

public class Main extends MovieClip
{
public function Main():void
{
/* Starts the preloader, "preloader" is the instance name of the clip */

preloader.start(info);
}
}
}

Glowing mouse effect



view plaincopy to clipboardprint?
package
{
import flash.display.Sprite;
import flash.ui.Mouse;
import flash.events.MouseEvent;
import flash.events.Event;

package
{
import flash.display.Sprite;
import flash.ui.Mouse;
import flash.events.MouseEvent;
import flash.events.Event;Step 6: Mouse Trailer Class
We extend the Sprite Class to access the addChild() method. Remember that the name of the class has to be the same as the file name.

view plaincopy to clipboardprint?
public class MouseTrailer extends Sprite
{

public class MouseTrailer extends Sprite
{Step 7: Variables
There's only one variable in this class, the LightBall variable. This is used to create a new instance of the LightBall that we created in the Fla.

view plaincopy to clipboardprint?
var lightBall:LightBall;

var lightBall:LightBall;Step 8: Constructor
In the constructor function we'll add the lines that hide the Mouse cursor and the Listener that will start the Trailer.

view plaincopy to clipboardprint?
public function MouseTrailer():void
{
Mouse.hide();
stage.addEventListener(MouseEvent.MOUSE_MOVE, startTrailer);
}

public function MouseTrailer():void
{
Mouse.hide();
stage.addEventListener(MouseEvent.MOUSE_MOVE, startTrailer);
}Step 9: Start Trailer Function
This function will handle the trailer, setting its properties.

view plaincopy to clipboardprint?
private function startTrailer(e:MouseEvent):void
{

private function startTrailer(e:MouseEvent):void
{Step 10: Duplicating the LightBall
This code creates a new LightBall when the mouse is moved.

view plaincopy to clipboardprint?
/* Create a new LightBall object */

lightBall = new LightBall();

/* Create a new LightBall object */

lightBall = new LightBall();Step 11: Position
The new LightBall position is based on the width and height of the clip and the position of the Mouse cursor.

view plaincopy to clipboardprint?
/* Position */

lightBall.x = mouseX + Math.random() * lightBall.width;
lightBall.y = mouseY - Math.random() * lightBall.height;

/* Position */

lightBall.x = mouseX + Math.random() * lightBall.width;
lightBall.y = mouseY - Math.random() * lightBall.height;
Step 12: Adding to Stage
We add the LightBall to the stage with the following code:

view plaincopy to clipboardprint?
/* Add to Stage */

addChild(lightBall);

/* Add Listener to Animate function */

lightBall.addEventListener(Event.ENTER_FRAME, animate);

/* Add to Stage */

addChild(lightBall);

/* Add Listener to Animate function */

lightBall.addEventListener(Event.ENTER_FRAME, animate);Step 13: Animate Function
The alpha, scale and vertical position are handled in this function.

view plaincopy to clipboardprint?
private function animate(e:Event):void
{

private function animate(e:Event):void
{Step 14: Alpha
The alpha is reduced by 5% every frame.

view plaincopy to clipboardprint?
/* Alpha */

e.target.alpha -= 0.05;

/* Alpha */

e.target.alpha -= 0.05;Step 15: Remove Invisible Objects
When the LightBall is no longer visible (alpha < 0) the object is removed.

view plaincopy to clipboardprint?
/* If lightBall is no longer visible, remove it */

if (e.target.alpha <= 0)
{
e.target.removeEventListener(Event.ENTER_FRAME, animate);

removeChild(e.target as Sprite);
}

/* If lightBall is no longer visible, remove it */

if (e.target.alpha <= 0)
{
e.target.removeEventListener(Event.ENTER_FRAME, animate);

removeChild(e.target as Sprite);
}Step 16: Scale
The scale is reduced by 10% every frame.

view plaincopy to clipboardprint?
/* Scale */

e.target.scaleX -= 0.1;
e.target.scaleY -= 0.1;

/* Scale */

e.target.scaleX -= 0.1;
e.target.scaleY -= 0.1;Step 17: Vertical Position
view plaincopy to clipboardprint?
/* Y Position */

e.target.y += 3;
}

//have fun!