Reflective Journal: January 2011

Sunday, 30 January 2011

Wednesday, 26 January 2011

iPhone:

My first idea was to lay a transparent picker over a virtual doll to scroll the clothes with a finger form one side to another. Furthermore, the costs for the items are shown on one side and with pressing the button "dress" the virtual doll wear the clothes:

In the next step I began to think about a drag and drop action for to dress the doll, but drag and drop is a difficult action for a user. This is why, I abandoned this idea. However, I then got the idea to press a button to change the clothes of the doll. This idea is inspired by the App "Dress up Studio Lite" (see post: Other examples of virtual paper costume dolls):

I liked this idea and created a paper prototype:

The idea to pressing a button in order to change an item of clothing is a good idea for some clothes in a collection, but this solution is not as suitable for a greater number of clothes.

iPad:

For the iPad I would like a function with more filter possibilities and a better overview. Because of this, I sketched a screen with buttons on the side to select the type of clothing and at the same time an overview in a scroll list:

In the next picture you can see the same idea in form of a paper prototype:

How to deal with a fullness of information?

When someone tries to orientate, the person will use knowledge from a similar environment (see Strapelkamp, 2007, p.151).

Based on this statement in the area of information architecture designers use metaphors of the real live such as:

The first example is "Magic Cap". It is an operating system for a Windows mobile. This example not only uses a desktop metaphor, it also uses a room metaphor (Strapelkamp, 2007, p.133):

The next example is an internet portal for the course communication design at the Fachhochschule für Technik und Wirtschaft in Berlin (Born, in Strapelkamp, 2007, p.144). The internet portal is designed like a virtual university with pool rooms, corridors and stairs:

This example is also related to rooms. It is a digital reconstruction of the flat from Ludwig van Beethoven in Vienna (Frings, 2004, in Strapelkamp, 2007, p.150) . A user can navigate with the floor plan:

The last example is a map from the London Underground (Strapelkamp, 2007, p.147). This abstract map is also related to the real world. The map shows distances between stations in proportional relation:

There are two types of orientation: The content-related orientation and the function-related orientation. The next picture shows a desktop metaphor for an operating system. This metaphor is a combination of both types, because the elements are related to a familiar environment:

Another way of classify these kinds of information is shown in the next picture. It is a tree structure of an office and it is an example of a content-related orientation:

Studies show that elements in a two dimensional room are more comprehensible. Because of this, the information structure related to the real live, like the desktop metaphor, should be preferred (Strapelkamp, 2007, p.133).

Orientation in my application:

According to the orientation theory from Strapelkamp (2007, p.130-151) it is necessary to evaluate the design of orientation for the device you working for. In my case it is the iPhone and the iPad.

The HCI guidelines from Apple recommend to design an hierarchical orientation structure (See post: iPhone - Interaction Design Pattern). Strapelkamp (2007, p.130-151) explains that a good orientation is based on tidiness and tidiness means to filter especially when there a lots of data, information and items. For example, related to the idea for the paper costume doll it means to give the possibility to filter the type of clothes. Maybe it is also feasible to make a preselection with a criteria such as "What is trendy?". Furthermore, according to the theory that orientation is easier when information is related to a real environment (see above), I would like to integrate a clothes rail metaphor. The next picture will describe my idea in a small sketch:

Stapelkamp, T., 2007. Screen- und Interfacedesign: Gestaltung und Usability für Hard- und Software. Berlin: Springer-Verlag.

Tuesday, 18 January 2011

Fourth step in Objective-C

Programming a segment control with three views:

Other examples of virtual paper costume dolls

iPhone Apps:

I found some App examples of paper costume dolls. The Apps are more for fun and not a part of virtual shop, which present real clothes.

The first App is a called "Dress up Studio Lite" (MoseCode, 2011). I like the easy interaction solution for changing the dress. By pressing one of the buttons with a clothes icon the doll changes her outfit. By pressing the button with the t-shirt icon the doll changes t-shirt and by pressing the button with the doll changes the trousers:

The other App called "Paper Doll" (BrennanMoyMedia, 2011) has another interaction solution. The App shows the clothes on a transparent layer to choose:

The last suitable App I found is "Adora Dear Lite" (Huynh, 2010). This App is interesting because it is possible to change the patterns and the color of the clothes:

Internet resources:

The examples I found in the World Wide Web are dealing more with real cloth and are a part of an online shop.

The first application is from Runners Point (2011) and called "Online Umkleidekabine":

The other example "My Virtual Model" (mvm, 2011) is an animation that tries on real clothes, but the real clothes are transformed in an animation when the animation model tries the clothes on:

msm, 2011: My Virtual Model. Available at: http://www.mvm.com/cs/shopForLooks/Default.aspx?endpoint=personalize [Accessed 15 January].

MoseCode, 2011: Dress Up Studio Lite. Available at:

http://www.mosecode.com/Dress_Up_Studio/Dress_Up_Studio.html [Accessed 15 January].

BrennanMoyMedia, 2011: Paper Doll. Available at: http://www.brennanmoymedia.com/index.html [Accessed 15 January].

Huynh, D. 2010: Adora Dear Lite. Available at: www.adoradear.com [Accessed 15 January].

Runnerspoint, 2011: Online Umkleidekabine. Available at: http://www.runnerspoint.de/Online-Umkleide?et_cid=36&et_lid=583276 [Accessed 15 January].

Tuesday, 11 January 2011

From the research phase to the planning phase

The next step of my project is to decide with kind of application I will develop and design for the iPhone and the iPad. I have to choose a type of application, that could demonstrate the differences of small and large touch screens. After some research and based on personal interest I decided to develop an application for an online shop. My main focus is to create an interaction solution for browsing through clothes. Generally the Apps with this idea present pictures of there collection. I have collect some examples from H&M (2010) and NewYorker`s lookbook (2010) :

However my idea is different, I will create an App or a possibility to browse though clothes with the help of a virtual model. The main idea is inspired by paper costumes dolls: