Wednesday 13 July 2011

Concept

Instead of current configurator concept such as the car configurator concept from Mercedes-Benz (Mercedes-Benz, 2011) or VW (Volkswagen, 2011), where the user has to choose first the models and then the rest of the equipment such as the car wheel or interior, the configurator concept for this project is different. This concept starts with a recommendation and the user could customise the recommendation. It is better to start with a recommendation and edit it instead of offering a long selection process in the beginning. It is less work for the user and it is closer to the real situation for example in a car showroom. There are also different cars and the consumer cus-tomises his car based on the offered cars. According to Stapelkamp (2007, p.151) when someone tries to orientate, the person will use knowledge from an environment, which the person already knows. Related to this is that copying a real situation in a concept will help the user to orientate.

A user could select a doll and an outfit, and then the user customises the outfit with choosing the wardrobe and selecting another item. It is a little bit like the principle of a paper costume coll. In the wardrobe view the user could also add items to the shopping basket.

Volkswage, 2011. Car Configurator. Available at: http://www.volkswagen.de/de/CC5.html [Accessed 5 February 2011].

Picture material for the Apps from Cos. Available at:  http://www.cosstores.com  [ Accessed 7 June 2011].

Design differences

After research to find design differences between small and large touch screens one result is that not a lot of sources exist which describe the differences between both screen sizes. The used sources are Apple design guidelines, the Apps in the App store and different Internet sources such as the fragmenting programming class from An-droid. Based on the research material the following differences are discovered:



No multi finger gestures vs. uses multi finger gestures: 
Multi finger gestures such as drag and drop are very common for the iPad. For the iPhone multi finger gestures such as drag and drop are not recommended because the screen is too small and larger scale multi finger gestures are complicated to realise for the user. Smaller multi finger gestures are possible for smaller screens, but it would also be good to offer alternatives in the interactions design that are more obvious for the user. [See blog: Second sketches – iPad]

Fragment the content vs. more content on the screen:
It is clear that because of the small screen of the iPhone les content can be shown in-stead of the iPad. Related to this the content has to be fragmented and can only be shown in a series of screens. For the iPad more content can be on a screen. [See blog: Fragmenting]

Functional design vs. realistic imagery:
Also because of the small screen of the iPhone the design is more functional oriented than the design for iPad, which works with more realistic imagery and decoration. Fol-lowing pictures are good example for these differences. On the one hand the very func-tional oriented design for the iPhone and on the other hand the very realistically design for the iPad, which looks like a real adressbook or magazine:


[See blog: Second sketches – iPad]

Additionally it is important to understand that the described design differences are sub-ject to rapid change at the moment because the area of interaction design is influenced for example by new innovations and change very quickly.

Apple, 2010. iPad Human Interface Guidelines. Apple (online).  Available at: http://www.hung-truong.com/blog/wp-content/uploads/2010/06/iPadHIG.pdf [Accessed 20 November 2010].
Net-A-Poter: Apps. Available at: http://www.net-a-porter.com/app?cm_mmc=GoogleUK-_-Net-App-_-Net-App-_-Net-App&bbcid=2625 [Accessed 20 November 2010].

Design process

For the design process the following steps are conducted:
  1. Understand the specific interaction elements [see blog: iPhone – Elements, iPhone - Interaction Design Pattern, iPad - Interaction Design Pattern].
  2. Think about your users [see blog: Persona].
  3. Design the concept / work with metaphors [see blog: How to deal with a fullness of information?, iPhone - To keep in mind, First sketches, Second sketches – iPhone, Second sketches – iPad]. Fragment and integrate content [see blog: Fragmenting].
  4. Test your concept in a usability test [see blog: Persona, iPhone - quick usability test with a paper prototype, iPad - quick usability test with a paper prototype].
  5. Finalise your interaction design [see blog: Video - final high fidelity prototypes].

This design process is based on the user-centered design process:
“User-centered design’ (UCD) is a broad term to describe design processes in which end-users influence how a design takes shape. It is both a broad philosophy and variety of methods. There is a spectrum of ways in which users are involved in UCD but the important concept is that users are involved one way or another“ (Abras, Maloney-Krichmar and Preece, 2004)
The design process is also modified related to the fact that two different applications have to be designed. 
Usually, when someone decides to develop an application for a mobile device with a smaller screen, a website or an application for a desktop computer already exists. Because of this the danger is there to simply copy the content and the functions from the application with a bigger screen to the application with the smaller screen. Moreover according to Beil (2011) to design first for a wider screen could camouflage more easily conceptual problems and the concept cannot be transferred to a smaller screen then. He recommends designing for the hardware with the most limitations first, and then going up. It is like bicycling in a group - the slowest member will set the pace”. [See blog: Is it better to design first for a small screen and than for a larger screen or is it better the other way around?]. See graphic:



Abras, C., Maloney-Krichmar, D., Preece, J. (2004): User-Centered Design. In Bainbridge, W. Encyclopedia of Human-Computer Interaction. Thousand Oaks: Sage Publications.
Beil, H., 2011. Email conservation. Not published.


Good information design

According to MA interaction design at the Carnegie Mellon University in Pittsburgh (2011) “interaction designers define product behaviour, mediating relationships between people and people and people and products”. Therefore it is very important to think about your user and to try to understand your user. For this reason personas, which is a stereotypes of a special user group, are developed [see blog: Persona] and usability tests for iPhone and iPad concept were conducted [see blog: iPhone - quick usability test with a paper prototype, iPad - quick usability test with a paper prototype]. The most surprising result of the usability test for the iPad is that the users did not expect a drag and drop gesture to take an item for the wardrobe and dress the doll. An explanation could be that the users would only expect a drag and drop gestures, when the end position of the item is unclear. However in the concept for the iPad application the end position is clear: Tops and shirts are above the body and trousers and shirts are below the body.
Another issue for good information design is to think about orientation. Related to Strapelkamp (2007, p.151) when someone tries to orientate, the person will use knowledge from a similar environment. Therefore one way to create intuitive information design is to work with visual metaphors [see blog: Meaning of "intuitive"]. This fact also supported the designing guidelines from Apple (2010, p.6-42) “When possible, model your application’s objects and actions on objects and actions in the real world. This technique especially helps novice users quickly grasp how your application works … or … add a realistic, physical dimension to your application. Contacts depicts a realistic address book that behaves as people expect”. The developed applications are using on the one site very obvious metaphors such as the clothes rail or the wardrobe to give a user a clue how to scroll through the items of clothes and the costume doll metaphor. On the other site less obvious metaphors such as the car showroom metaphor from chapter 1.2 the App concepts and design differences. [See blog: How to deal with a fullness of information?, iPhone - To keep in mind, Video - final high fidelity prototypes]
Finally it is important to design an application as a part of the whole user experience. Because of this it is necessary to check the other applications on the device and the interaction design. For example: The iPhone and the iPad are using special interaction elements for example: alert, picker, action sheet, modal view [see blog: iPhone – Elements, iPhone - Interaction Design Pattern, iPad - Interaction Design Pattern]. However there are not only interaction elements but also special interaction gestures such as tap, drag or swipe, which have to be considered [see blog: Interaction with multi touchscreen and motion sensor]. In this project you could see an interaction design that has an authentic iPhone and iPad appearance, because it integrates the above-described elements. 
Apple, 2010. iPhone Human Interface Guidelines. Apple (online). Available at: http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf [Accessed 2 November 2010].
MA interaction design at the Carnegie Mellon University: Interaction Design. http://www.design.cmu.edu/show_program.php?s=2&t=3 [Accessed 3 July].
Stapelkamp, T., 2007. Screen- und Interfacedesign: Gestaltung und Usability für Hard- und Software. Berlin: Springer-Verlag. 

Interface with high quality aesthetic

Another aim for this project is to design an interface with a high quality aesthetic. To provide this it was necessary to understand what is aesthetic and also beauty. According to Plato (a Greek philosopher and student of Socrates) anything that is beautiful is related to a high concept of beauty. This concept is developed during a learning phase in an individuals early years. A young person learns that a special form is beautiful. Then the person tries to find this beautiful first form in other forms. In this process the person develops his or her high concept of beauty (Plato, in Jowett, 2011). [See blog: High quality aesthetic and beauty]
Related to the idea of the high concept of beauty and transferred to the area of
interaction design, a higher concept of beauty also exists for interaction solutions. This concept is also developed based on experiences. Therefore it is possible to differentiate between two interaction solutions and to decide which solution is more beautiful. It is the solution with is closer to the high concept of beauty in the area of interaction design. Based on this it was necessary to think about the reasons, why some Apps are more beautiful therefore closer to high concept of beauty and some Apps are less beautiful. The next list describes some points, which could influence a beautiful and aesthetic interaction interface:
·       Beautiful pictures with a high resolution
·       A good level of contrast and colour
·       Enough space between the elements – work more with space instead of with lines and boxes
·       Offer smart interaction solutions.
The applications are using beautiful pictures from Cos (2011), a fashion label from H&M. The design around the beautiful pictures is intended to support the beautiful pictures. For the contrast and colour orientation a colourful and non colourful contrast are used (Stapelkamp 2007, p.60-73). The colours are black, gray, white and turquoise are decided based on a colour concept and they are unisex [see blog: Colour concept]. The design for the applications works with space between the areas. Especially for the iPad, with larger screen but nearly the same content as the iPhone, the design works with more space and therefore offers a higher aesthetic. Finally it is helpful for more designing room to have smart interaction solutions, which require less functional elements. For this work it is the good concept, based on recommendation and the possibility to customise, which allowed the user to very easily customise the doll. 
Cos, 2011. Cos website. Available at: http://www.cosstores.com/ [Accessed 5 February 2011].
Jowett, B., 2011: Platon Symposium. Available at: http://classics.mit.edu/Plato/symposium.html [Accessed 23 May].
Stapelkamp, T., 2007. Screen- und Interfacedesign: Gestaltung und Usability für Hard- und Software. Berlin: Springer-Verlag. 

High-fidelity prototypes for the iPhone and the iPad

The two applications are developed as high-fidelity prototypes with Objective-C. Objective- C is a programming language from Apple and a lot of Apple Products are developed with Objective-C. The programming environment is Xcode and in Xcode there is also an interface builder and a simulator for the iPhone and iPad. The touch screen functionality are realised with Cocoa Touch. Retrospectively the application developing system have a steep learning curve and is in general too complex to create high- fidelity prototypes in a design process such as the user-centered design process. However, there are no other tools to create high- fidelity prototypes, which is a prototype with a high correspondence/ adherence to intended final product (Cagan, 2008). There are ways to create an iPhone and an iPad application for example with Adobe Flash or some browser based application such as Axure, but finally they did not offer the same look and feel as the application developed with Xcode and Objective-C have. It will be interesting to see if Apple will offer in the future tools to create quick and easy high-fidelity prototypes such as Adobe Fireworks or Axure. So the design process would be more effective and productive. [See blog: First steps in Objective-C, Second steps in Objective-C, Third step in Objective-C, Fourth step in Objective-C, Fifth step in Objektive-C]
In addition to Xcode and Objective-C, Adobe Photoshop and Adobe Illustrator had to be learned to realise the applications. 

Cagan, M., 2008. High-Fidelity Prototypes. Available at: http://www.svproduct.com/high-fidelity-prototypes/ [Accessed 9 March 2011].

Guidelines for small and large touch screens

This part is addressed to other designers who are interested in designing applications for small and large touch screens. The next list will show short guidelines, which are based on the experiences of this work.

To keep general in mind:
Designing for different screen sizes:
  • Design first for the smaller screen size then for the larger sizes, because the limited sizes helps to focus. [See blog: Is it better to design first for a small screen and than for a larger screen or is it better the other way around?].
  •  Fragment the content for the smaller screen and show them in a series of screens and integrate more content on a lager screen.
  • Design for the smaller screen looks more functional and use for the larger screen has more realistic imagery and decorations.
  • Do not use multi finger gestures such as drag and drop for a small screen such as the iPhone, but use the drag and drop gesture for a larger screen such as the iPad. However, check in a usability test if users are expecting the multi finger gestures. Because interaction gestures are sometimes not obvious when they are not learned. Maybe in the future multi finger gestures will be more common because more touch devices are on the market and people will learn the gestures. However, at the moment for novices it is especially hard to find access to new interaction element such as multi finger gestures. If gestures are not expected, do not use them or offer alternatives
Stapelkamp, T., 2007. Screen- und Interfacedesign: Gestaltung und Usability für Hard- und Software. Berlin: Springer-Verlag. 

Wednesday 29 June 2011

Tuesday 28 June 2011

Wednesday 15 June 2011

Tuesday 14 June 2011

Super - my Apps are on the devices!!!!!

After 2 days install  and uninstall software, the Apps work on the devices:
















Picture material for the Apps from Cos. Available at:  http://www.cosstores.com  [ Accessed 7 June 2011].

Wednesday 8 June 2011

Preparations for the Nottingham Trent University MA Expo 2011

The setting for the Nottingham Trent University MA Expo 2011:





















The setting for the MA Expo is very simple: On a board will be a screen, which will show a small film with both applications. Behind the screen is a big poster, which will describe the many facts from the reflective journal in a word cloud.


The film shot: 































For the film shots two different settings have to build up. The first setting is based on table plus transparent foil and 4 lamps around the table. This setting is for the intro, because the camera is not fix and camera movements are possible. The next setting is also a table with 4 lamps around the table, but the camera hang from the ceiling and is fix. This setting is necessary for rest of the film and shots the interaction with two applications. 

Tuesday 7 June 2011

Screenshots & Code - final iPad high fidelity prototype

Costume dolls:



















Costume doll + wardrobe: 




Next costume doll: 


The code: 

//
//  iPadCDollViewController.h
//  iPadCDoll
//
//  Created by Monika Denk on 24.05.11.
//  Copyright __MyCompanyName__ 2011. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface iPadCDollViewController : UIViewController {
UIPageControl *pageControl;
UIScrollView *scroller;
UIPageControl *pageControl1;
UIScrollView *scroller1;
IBOutlet UIView *costumedoll1;
IBOutlet UIView *costumedoll2;
IBOutlet UIView *costumedoll1W;
IBOutlet UIView *costumedoll1Wadd1;
IBOutlet UIView *costumedollchange1;
IBOutlet UIView *costumedollchange2;
IBOutlet UIScrollView *scrollerW1;
IBOutlet UIScrollView *scrollerW1a;
IBOutlet UIScrollView *scrollerW1korb;
IBOutlet UIScrollView *scrollerW1akorb;
IBOutlet UIScrollView *scrollerW1change1;
IBOutlet UIScrollView *scrollerW1achange1;
IBOutlet UIScrollView *scrollerW1change2;
IBOutlet UIScrollView *scrollerW1achange2;

}

-(IBAction) showwardrobe1;
-(IBAction) addbasket; 
-(IBAction) change1; 
-(IBAction) change2;
-(IBAction) close;

@property (nonatomic, retain) IBOutlet UIPageControl *pageControl;
@property (nonatomic, retain) IBOutlet UIScrollView *scroller; 
@property (nonatomic, retain) IBOutlet UIPageControl *pageControl1;
@property (nonatomic, retain) IBOutlet UIScrollView *scroller1; 
@property (nonatomic, retain) IBOutlet UIScrollView *scrollerW1; 
@property (nonatomic, retain) IBOutlet UIScrollView *scrollerW1a; 
@property (nonatomic, retain) IBOutlet UIScrollView *scrollerW1korb; 
@property (nonatomic, retain) IBOutlet UIScrollView *scrollerW1akorb; 
@property (nonatomic, retain) IBOutlet UIScrollView *scrollerW1change1; 
@property (nonatomic, retain) IBOutlet UIScrollView *scrollerW1achange1; 
@property (nonatomic, retain) IBOutlet UIScrollView *scrollerW1change2; 
@property (nonatomic, retain) IBOutlet UIScrollView *scrollerW1achange2; 

@end

//
//  iPadCDollViewController.m
//  iPadCDoll
//
//  Created by Monika Denk on 24.05.11.
//  Copyright __MyCompanyName__ 2011. All rights reserved.
//

#import "iPadCDollViewController.h"

@implementation iPadCDollViewController

@synthesize pageControl, scroller;
@synthesize pageControl1, scroller1;
@synthesize scrollerW1;
@synthesize scrollerW1a;
@synthesize scrollerW1korb;
@synthesize scrollerW1akorb;
@synthesize scrollerW1change1;
@synthesize scrollerW1achange1;
@synthesize scrollerW1change2;
@synthesize scrollerW1achange2;


-(void) scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
int page = scrollView.contentOffset.x / scrollView.frame.size.width
pageControl.currentPage = page;
pageControl1.currentPage = page;
}

-(IBAction) showwardrobe1; {
[costumedoll1 addSubview:costumedoll1W];
}

-(IBAction) addbasket; {
[costumedoll1W addSubview:costumedoll1Wadd1];
}

-(IBAction) change1;  {
[costumedoll1Wadd1 addSubview:costumedollchange1];
}

-(IBAction) change2;  {
[costumedollchange1 addSubview:costumedollchange2];
}

-(IBAction) close;  {
[costumedollchange2 addSubview:costumedoll2];
}
/*
// The designated initializer. Override to perform setup that is required before the view is loaded.
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    if ((self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil])) {
        // Custom initialization
    }
    return self;
}
*/

/*
// Implement loadView to create a view hierarchy programmatically, without using a nib.
- (void)loadView {
}
*/



// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
    [super viewDidLoad];
for (int i = 2; i < 4; i++) {
UIImageView *imagen = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",i]]];  
UIImageView *imagen1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",i]]];  
imagen.frame = CGRectMake((i-1)* 1024, 0, 1024, 704);
imagen1.frame = CGRectMake((i-1)* 1024, 0, 1024, 704);
[scroller addSubview: imagen]; 
[scroller1 addSubview: imagen1]; 
[imagen release]; 
}
scroller.delegate= self;
scroller.contentSize = CGSizeMake(1024*3, 704);
scroller.pagingEnabled = YES;
scroller.showsHorizontalScrollIndicator = NO;
pageControl.numberOfPages=3;
pageControl.currentPage=0
scroller1.delegate= self;
scroller1.contentSize = CGSizeMake(1024*3, 704);
scroller1.pagingEnabled = YES;
scroller1.showsHorizontalScrollIndicator = NO;
pageControl1.numberOfPages=3;
pageControl1.currentPage=0
scrollerW1.contentSize = CGSizeMake(710, 103);
scrollerW1.showsHorizontalScrollIndicator = NO
scrollerW1a.contentSize = CGSizeMake(710, 103);
scrollerW1a.showsHorizontalScrollIndicator = NO
scrollerW1korb.contentSize = CGSizeMake(710, 103);
scrollerW1korb.showsHorizontalScrollIndicator = NO;
scrollerW1akorb.contentSize = CGSizeMake(710, 103);
scrollerW1akorb.showsHorizontalScrollIndicator = NO
scrollerW1change1.contentSize = CGSizeMake(400, 103);
scrollerW1change1.showsHorizontalScrollIndicator = NO;
scrollerW1achange1.contentSize = CGSizeMake(710, 103);
scrollerW1achange1.showsHorizontalScrollIndicator = NO
scrollerW1change2.contentSize = CGSizeMake(400, 103);
scrollerW1change2.showsHorizontalScrollIndicator = NO;
scrollerW1achange2.contentSize = CGSizeMake(400, 103);
scrollerW1achange2.showsHorizontalScrollIndicator = NO
}





/*Override to allow orientations other than the default portrait orientation.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    return YES;
}*/

//Override to allow orientations other than the default portrait orientation.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationLandscapeRight);
}

- (void)didReceiveMemoryWarning {
// Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
// Release any cached data, images, etc that aren't in use.
}

- (void)viewDidUnload {
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}


- (void)dealloc {
    [super dealloc];
[scrollerW1 release];
[scrollerW1a release];
[scrollerW1korb release];
[scrollerW1akorb release];
[scrollerW1change1 release];
[scrollerW1achange1 release];
[scrollerW1change2 release];
[scrollerW1achange2 release];
}

@end

Picture material for the App from Cos. Available at:  http://www.cosstores.com  [ Accessed 7 June 2011].

Tuesday 31 May 2011

Change concept iPad App

First idea: Costume doll in the centre - wardrobe open on the right-hand side: 

Problem: A lot of empty space on the left-hand side. 

Solution: Costume doll and wardrobe are more in the centre of the screen: 

Problem: Without an animation, which moves the costume doll and the wardrobe to the right position, it would look like the doll jumps form the first position to the next position. The problem with animations in Objective-C is that an animation is based on a serial number of pictures such as in a movie. For a small movement, which is one second long, it is necessary to produce around 23 pictures. This could make the file very big and the performance very slow. Maybe, there is also another solution based on moving the x and y coordinates of a picture, but the examples I found for this case are incorrect. 

The next image shows a tutorial I did to produce an animation based on a serial number of pictures: 

Picture material for the tutorial (Vandenheste, 2011): 


Compromise: I accept that the doll jumps in the prototype and when I have time at the end I will try to integrate a movement of doll and wardrobe. 

Tutorial and picture material from Vandenheste, A. 2011: Welcome to SDK tutorials. Available at: http://web.me.com/vandenf/SDKTutorials/Welcome.html [Accessed 31 May 2011]. 

Picture material for the App from Cos. Available at:  http://www.cosstores.com  [ Accessed 7 June 2011].