Last Planet: The Iterations for the Design

The modified screen showing the names, circles, date and time of visitors who touched and interacted with Last Planet.

Figure 40: 30/05/12 How the app was beginning to look when in an iPad as would be intended for the final prototype.

Figure 41 Prototyping phase, other shapes and styles were experimented with.

This interface was then tested and it was decided that a little more visual information for the user, which wouldn’t be explicit, but something they would work for, would be to make a visual note of the number of times a planet was touched by someone else. The animation had smaller ‘moons’ (fig. 42) added to the main circle area.

It is at this point as well that planets were decided to be the term, and to encourage the thinking that you would be creating your own planet. (This also provides scope for further development as these initial prototype phases had to test if consumers interacted with it, and if so then we could add further degrees of interaction.)

Other areas explored was to have a choice of four answers from random questions, such as favourite sport, hockey, football, etc… and then it would display <username> likes <hockey>… which may be another area of connection with others.

Studies into the animated circles, that were no longer solid shapes.

From the circles developing into planets, and after observing people interact with it, it was decided that to make it have some additional interaction, without turning it commercial would be to add an area so that users could add a tip or helpful bit of information.

After they type their name (or choose not to) the colour choices would then be displayed to the user and then it would create the circle dependent on their selection; an example of the method to draw the red circle (planet). This was the initial code created, but once Last Planet was modified this method was changed to use a switch case statement in order to reduce the code, as there was initially one of these methods for each planet colour.

[symple_box color=”blue” text_align=”left” width=”100%” float=”none”]

– (IBAction)drawRedCircle:(UIButton *)sender {

[self hideButtons];

int size = arc4random() % kMaxSizeDiameter;

NSLog(@"Max size generated is: %d", size);

if (size <= 500) {

size = arc4random() % kMaxSizeDiameter;

NSLog(@"NEW Max size generated NUMBER is: %d", size);

if (size <= 300) {

size = arc4random() % kMaxSizeDiameter;

NSLog(@"SECOND NEW Max size NUMBER is: %d", size);

}

}

int destinationBX = arc4random() % 1100;

NSLog(@"destinationBX: %d", destinationBX);

int destinationBY = arc4random() % 900;

NSLog(@"destinationBY: %d", destinationBY);

int startLocX =  arc4random() % 1100;

int startLocY =  arc4random() % 900;

int animationDuration = arc4random() % kRandomAnimationTime;

NSLog(@"animation duration is: %d", animationDuration);

if (animationDuration <= 100) {

animationDuration = animationDuration + 75;

NSLog(@"NEW animation duration is: %d", animationDuration);

}

UIButton *_redCircleButton = [UIButton buttonWithType:UIButtonTypeCustom];

UIImage *img = [UIImage imageNamed:@"redCircle@2x.png"];

[_redCircleButton setImage:img forState:UIControlStateNormal];

// add the button to the view

[self.view addSubview:_redCircleButton];

[UIView beginAnimations:@"RedCircleAnimateAlpha" context:nil];

CGRect frameB = _redCircleButton.frame;

_redCircleButton.frame=frameB;

_redCircleButton.alpha = 1.0;

_redCircleButton.frame = CGRectMake(startLocX - 200, startLocY - 200, 1, 1);

[UIView setAnimationDuration:animationDuration];

[UIView setAnimationCurve:100];

_redCircleButton.alpha = 0.0;

_redCircleButton.frame = CGRectMake(destinationBX - 400, destinationBY - 400, size, size);

[UIView commitAnimations];

[self addTimeAndDateLabel];

}

[/symple_box]

The modified code, calling the method – (IBAction)makeYourPlanet:(OBShapedButton *)sender;  This code creates all the buttons and is called every time a planet needs to be created. There is an additional change to the code, the use of OBShapedButton[1] as a subclass of UIButton.

[symple_box color=”blue” text_align=”left” width=”100%” float=”none”]

#pragma mark – Main block of code to create the planet

// Create the Planet

- (IBAction)makeYourPlanet:(OBShapedButton *)sender {

// ********* INITIAL SET UP OF THE ENVIRONMENT

// ********* DISMISS THE CURRENT ELEMENTS AND ASSIGN THE TAGS

[self textFieldDoneEditing:_userNameField];

// Tip view animates out so it can't be seen again

[self floatView:_leaveATipView duration:0.3

curve:100 x:0.1 y:0.1 alpha:0.0 repeat:1];

int startingX = arc4random() % 604;

int startingY = arc4random() % 569;

int destinationX = arc4random() % 900;

int destinationY = arc4random() % 600;

NSLog(@"starting X: %i", startingX);

NSLog(@"starting Y: %i", startingY);

NSLog(@"destinationBX: %d", destinationX);

NSLog(@"destinationBY: %d", destinationY);

// ****** ******* ****** CREATE THE BUTTON 'PLANET' BASED ON COLOUR CHOICE ***********

OBShapedButton *_planetButton = [OBShapedButton buttonWithType:UIButtonTypeCustom];

[_planetButton setUserInteractionEnabled:YES];

_planetButton.frame = CGRectMake(startingX, startingY, 80, 80); // starting loc & size

_planetButton.alpha = 1.0;

_userNameField.text = personsName;

if ([_userNameField.text length] == 0) { // if nothing is written in the field

personsName = @"anon"; // write anon for the name

}

[_planetButton setTitle:personsName forState:UIControlStateNormal];

[_planetButton addTarget:self

action:@selector(bringSubviewToFront:myLayer:)

forControlEvents:UIControlEventTouchDown];

[_planetButton addTarget:self

action:@selector(showFrontOfButton:)

forControlEvents:UIControlEventTouchUpInside];

// *** **** *** If buttons are clicked - show the alternative image as the button

UIImage *buttonClicked = [UIImage imageNamed:@"001ViewButtons@2x.png"];

[_planetButton setBackgroundImage:buttonClicked forState:UIControlEventTouchDown];

// add drag listener to tap and hold / drag planet

[_planetButton addTarget:self action:@selector(wasDragged:withEvent:)

forControlEvents:UIControlEventTouchDragInside];

personsTip = _textTipField.text;

_planetButton.titleLabel.font  = [UIFont fontWithName:@"HelveticaNeue" size:14];

[_planetButton setContentHorizontalAlignment:UIControlContentHorizontalAlignmentCenter];

[_planetButton.titleLabel setTextAlignment:UITextAlignmentCenter];

_planetButton.titleLabel.lineBreakMode = UILineBreakModeWordWrap;

[_planetButton setTitle:personsTip forState:UIControlStateHighlighted];

_planetButton.titleLabel.numberOfLines=18;

// so the text doesn't run up to the edges of the button

[_planetButton setContentEdgeInsets:UIEdgeInsetsMake(10.0, 10.0, 10.0, 10.0)];

_redButton.tag = 1;  // Assigning tags to the colour square buttons

_orangeButton.tag = 2;

_yellowButton.tag = 3;

_greenButton.tag = 4;

_blueButton.tag = 5;

_purpleButton.tag = 6;

// how to handle the tags for each button

switch (sender.tag) {

case 1: {

NSLog(@"sender: %@", sender); // initially used to check the tags were correct

UIImage *buttonImage = [UIImage imageNamed:@"redCircle@2x.png"];

[_planetButton setBackgroundImage:buttonImage forState:UIControlStateNormal];

//_redTimeLabel = [UMDateTimeLabel dynamicLabelWithFormat:@"HH:mm:ss.SSS" updateInterval:0.001];

//_redTimeLabel.text = [_timeIntervalFormatter stringForTimeInterval:timeInterval];

}

break;

case 2:{

UIImage *buttonImage = [UIImage imageNamed:@"orangeCircle@2x.png"];

[_planetButton setBackgroundImage:buttonImage forState:UIControlStateNormal];

//_orangeTimeLabel.text = [_timeIntervalFormatter stringForTimeInterval:timeInterval];

}

break;

case 3:{

UIImage *buttonImage = [UIImage imageNamed:@"yellowCircle@2x.png"];

[_planetButton setBackgroundImage:buttonImage forState:UIControlStateNormal];

//_yellowTimeLabel.text = [_timeIntervalFormatter stringForTimeInterval:timeInterval];

}

break;

case 4:{

UIImage *buttonImage = [UIImage imageNamed:@"greenCircle@2x.png"];

[_planetButton setBackgroundImage:buttonImage forState:UIControlStateNormal];

//_greenTimeLabel.text = [_timeIntervalFormatter stringForTimeInterval:timeInterval];

}

break;

case 5:{

UIImage *buttonImage = [UIImage imageNamed:@"blueCircle@2x.png"];

[_planetButton setBackgroundImage:buttonImage forState:UIControlStateNormal];

//_blueTimeLabel.text = [_timeIntervalFormatter stringForTimeInterval:timeInterval];

}

break;

case 6:{

UIImage *buttonImage = [UIImage imageNamed:@"violetCircle@2x.png"];

[_planetButton setBackgroundImage:buttonImage forState:UIControlStateNormal];

//_purpleTimeLabel.text = [_timeIntervalFormatter stringForTimeInterval:timeInterval];

}

break;

default:

break;

}

//[self addDateAndTime:sender];

CGPoint point; // the coordinates I will use for the positioning

point.x = startingX;

point.y = startingY;

[UIView animateWithDuration:16

delay:0

options:(UIViewAnimationOptionAllowUserInteraction | UIViewAnimationOptionAllowAnimatedContent
| UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionBeginFromCurrentState)

animations:^{

_planetButton.alpha = 0.3;

[_planetButton setUserInteractionEnabled:YES];

NSLog(@"starting X: %i", startingX);

NSLog(@"starting Y: %in", startingY);

}

completion:^(BOOL finished){

NSLog(@"animation completed");

//[_planetButton removeFromSuperview];

//[self animateAgain:_planetButton];

}

];

// add the button to the view

[self.view insertSubview:_planetButton belowSubview:_shareYourTipButton];

//int pos = arc4random() % 360;

CALayer *orbit1 = [CALayer layer];

orbit1.bounds = CGRectMake(0, 0, 80, 80);

orbit1.position = CGPointMake(40, 40);

orbit1.cornerRadius = 40;

orbit1.borderColor = [UIColor whiteColor].CGColor;

orbit1.borderWidth = 1.5;

orbit1.opacity = 0.8;

//[self.view.layer addSublayer:orbit1];

[_planetButton.layer addSublayer:orbit1];

CALayer *planet1 = [CALayer layer];

planet1.bounds = CGRectMake(0, 0, 12, 12);

planet1.position = CGPointMake(40, 0);

planet1.cornerRadius = 6;

planet1.backgroundColor = [UIColor whiteColor].CGColor;

planet1.opacity = 1.0;

[orbit1 insertSublayer:planet1 above:_planetButton.layer];

//[orbit1 addSublayer:planet1];

int duration = arc4random() % 35;

CABasicAnimation *anim1 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];

anim1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

anim1.fromValue = [NSNumber numberWithFloat:0];

anim1.toValue = [NSNumber numberWithFloat:((360*M_PI)/180)];

anim1.repeatCount = HUGE_VALF;

anim1.duration = duration + 5;

[orbit1 addAnimation:anim1 forKey:@"transform"];

//    [_planetButton addTarget:orbit1 action:@selector(hideCALayer:)

//            forControlEvents:UIControlEventTouchDown];

// ***************************************************

// return the share your tip button to the main view...

[_userNameField resignFirstResponder];

// show the animated main button in center again so they can repeat the process

[self floatImage:_shareYourTipButton duration:2.1 curve:100 x:1.0 y:1.0 alpha:1.0 repeat:1];

[self.view insertSubview:_shareYourTipButton aboveSubview:_planetButton];

}

[/symple_box]

There were brainstorming sessions with several members and discussions revolved around adding rating systems so people could review products or similar. The problem being that this was turning it into something that wasn’t a unique product and also one that would focus on a product or company too much; because this was a unique item to place on the shelves, a tip or helpful piece of advice for another visitor was seen as a more useful or more engaging desirable.