project C:Home

From student
(Difference between revisions)
Jump to: navigation, search
(USER INTERFACE)
(Prototype)
 
(379 intermediate revisions by 4 users not shown)
Line 1: Line 1:
<div style="float: left; width: 1200px; margin-right:40px; text-align:left">
+
__NOTOC__
==== ====
+
<div style="float: left; width: 1200px; margin-right:20px; text-align:left">
[[File:header.jpg|1200px]]
+
  
 +
__NOTOC__[[File:gesamt3.gif| frameless | 1200px | ]]
  
<gallery widths="155" heights="100" perrow="6" >
 
  
File:mod_1.JPG|
+
'''Spacebook''' aims to extend the notion of an online social community by providing a user-customizable space that will enhance that community through joining and participating in activities outside the virtual world. Thus '''Spacebook''' brings together the virtual and the physical space: a phenomenon through which everybody can see the activities on the site, the users can join activities that are or will be taking place, create their new activities and (physically) link them with other activities. A new activity hive is born.
 
+
File:mod_2.JPG|
+
 
+
File:mod_3.JPG|
+
 
+
File:mod_4.JPG|
+
 
+
File:mod_5.JPG|
+
 
+
File:mod_6.JPG|
+
 
+
 
+
 
+
</gallery>
+
 
+
 
+
 
+
'''Spacebook''': to extend the notion of an online social community by providing a user-customizable space that will enhance that community (through joining and participating in activities outside the virtual world.
+
'''Spacebook''':(where) everybody can see the activities on the site, the users can join activities that are or will be taking place, create their new activities and (physically) link them with other activities.<br/>
+
A new activity hive is born.
+
 
+
 
+
TU Delft: [[Project C:TU Delft drs Kuil | drs. Ronald Kuil]], sr. beleidsmedewerker vastgoedmanagement.
+
<div style="float: left; width: 1200px; margin-right:40px; text-align:left">
+
<div style="float:left; width: 380px; margin-right:20px; text-align:justify">
+
 
+
=<span style="color:orange">USER INTERFACE</span>=
+
[[File:Spacebook_diagram2.jpg|380px]]
+
  
 
<br>
 
<br>
The Spacebook user can meet his friends in real time very easily with the simple Spacebook interface. In just a few clicks the user is able to create his own space for his activities.
 
  
[[project C:Home#USER_INTERFACE_2|>>]]
+
<div style="float:left; width: 220px; margin-right:20px; text-align:justify">
 +
=<span style="color:orange">Interface</span>=
  
</div>
+
[[File:page03.jpg|220px|left|casual-user interface]]
<div style="float:left; width: 380px; margin-right:20px; text-align:justify">
+
  
=<span style="color:orange">LINK</span>=
+
<div style="float:left; width: 220px; margin-right:20px; text-align:justify">
[[file:Userscenario.jpg|380px]]
+
The interface design has three steps of functionality which relates to three user-types: the casual user, the advanced user and the administrator. Through this design decision Spacebook provides for the needs of different characters.
  
test
+
[[project C:ALL#INTERFACE|read more >>]]
 
+
[[project C:Home#LINK_2|>>]]
+
</div>
+
<div style="float:left; width: 380px; margin-right:20px; text-align:justify">
+
 
+
=<span style="color:orange">STRUCTURE</span>=
+
 
+
<youtube width="380" height="145" right >2WsdfWw3IoE</youtube>
+
[[Project C:Home#STRUCTURE_2|>>]]
+
  
 
</div>
 
</div>
 
</div>
 
</div>
  
<div style="float: left; width: 1200px; margin-right:40px; text-align:justify">
+
<div style="float:left; width: 220px; margin-right:20px; text-align:justify">
  
=<span style="color:orange">USER INTERFACE</span>=
+
=<span style="color:orange">Structure</span>=
  
<div style="float: left; width: 380px; margin-right:20px; text-align:justify">
+
<youtube width="220" height="145" right >awMrVLLNx2g</youtube>
===Concept===
+
 
+
[[File:interface Dia copy.jpg|380px]]
+
 
+
The interface of Spacebook will be the medium used by the social community to meet new people and organise activities in the real world.
+
 
+
===Research===
+
 
+
[[File:Interface_conclusions.jpg|190px]]
+
 
+
The research showed the different possibilities and chances the interface gives to the user and program. The conclusion was that to have an easy and understandable interface, the possibilities in the program are limited. And to have full control in the program, the interface usually requires a lot of experience of the user.
+
 
+
===Validators===
+
[[atom02:interfaces_walter_aprile| Walter Aprile]]: ''"the most successful interface is one the user already knows."''
+
 
+
===References===
+
 
+
[http://en.wikipedia.org/wiki/E-Booking_%28UK_government_project%29 E-booking]
+
 
+
[http://en.wikipedia.org/wiki/Interface_%28computing%29 interface]
+
  
 +
<div style="float:left; width: 220px; margin-right:20px; text-align:justify">
 +
The architectural implementation uses a system of inflatables which have the advantage of being lightweight ultimately reducing the dead-loads while at the same time providing adequate stiffness and flexibility.
  
 +
[[Project C:STRUCTURE|read more >>]]
 
</div>
 
</div>
<div style="float: left; width: 780px; margin-right:20px; text-align:justify">
+
</div>
 
+
<div style="float:left; width: 220px; margin-right:20px; text-align:justify">
===Design Proposal===
+
=<span style="color:orange">Architecture</span>=
 
+
[[File:Birdie.jpg|220px|left]]
[[File:interface-01.jpg|380px|thumb|left|Interface input]]
+
<div style="float:left; width: 220px; margin-right:20px; text-align:justify">
[[File:interface-02.jpg|380px|thumb|left|Interface input]]
+
The user, the interface and the structure are connected by means of the architecture, the complete system. This is the link that unites all the parts involved.
[[File:Arch-geometries.jpg|380px|thumb|left|Arch geometries]]
+
 
+
 
+
The user of Spacebook can be anybody: students or business men, but also people less experienced with computers, such as housewives or elderly people. Therefor there will only be an online interface, and it will be a simple one: a clear overview of what is happening on the site, and a direct relation between the input of the user and the (on the website) visible output. Research into interfaces showed that having a simple interface means less personalization of the result. It also means that '''anybody is able to use Spacebook'''.
+
 
+
 
+
Research into different interfaces led to the main criteria of Spacebook interface: able to zoom in on the 3D of the location by using the scroll wheel AND a zoom button; able to rotate around the 3D of the location by using the given buttons; only a limited amount of possibilities are possible; BUT the user has the opportunity to personalize the possibilities; the easy layout make the interface easy to understand for anybody.
+
 
+
 
+
 
<br>
 
<br>
'''<span style="color:orange">To book a space via the Spacebook interface is done with only a few easy steps!:</span>'''
 
 
'''<span style="color:orange">1)</span>''' After the user selected his preferred day and time an updated 3D layout of the location appears on the left side of the screen.<br>
 
'''<span style="color:orange">2)</span>''' By dragging the mouse over the grid of the location the user selects the length of his space. When the mouse button is released this space automatically appears on the right hand side of the screen.<br>
 
'''<span style="color:orange">3)</span>''' The standard setting for the curve that defines the space is 'medium', but the user has the possibility to change the curve to 'flat', 'small' or 'large'.
 
 
<br>
 
<br>
 
<br>
 
<br>
'''<span style="color:orange">4a)</span>''' The user can also select more grid cells, directly next to his already defined space. This also appears on the right sight of the screen. Together with his earlier defined space it starts creating an ensemble.<br>
+
[[project C:ARCHITECTURE|read more >>]]
'''<span style="color:orange">4b)</span>''' The user can then rotate around his created ensemble, and change the curve of each space individually.
+
<br>
+
<br>
+
'''<span style="color:orange">5a)</span>''' When a user would like to have a space made out of several curves in one row, he uses the 'division' button the determine the beginning and ends of each curve.<br>
+
'''<span style="color:orange">5b)</span>''' Then on the right hand side he can change each curve individually into the preferred setting (flat, small, medium or large).
+
 
+
  
 
</div>
 
</div>
 
</div>
 
</div>
<div style="float: left; width: 1200px; margin-right:40px; text-align:left">
 
  
=<span style="color:orange">LINK</span>=
+
<div style="float:left; width: 220px; margin-right:20px; text-align:justify">
<div style="float: left; width: 380px; margin-right:20px; text-align:left">
+
===Concept===
+
 
+
<gallery widths="200" heights="150" perrow="3" >
+
 
+
File:context.jpg|Context
+
 
+
 
+
 
+
File:Pathsystem.jpg|Path system
+
 
+
File:Curves.jpg|Arch system
+
 
+
 
+
 
+
 
+
</gallery>
+
 
+
 
+
 
+
===Research===
+
 
+
===Validators===
+
[[atom02:computer_science_a_stoiculescu| Andrei Stoiculescu]] & [[atom02:computer_science_S_Hagemann| S. Hagemann]]
+
 
+
===References===
+
</div>
+
 
+
<div style="float: left; width: 780px; margin-right:20px; text-align:justify">
+
 
+
===Design Proposal===
+
 
+
 
+
 
+
[[File:concept-sketch.jpg|380px|thumb|left|Interface input]]
+
  
 +
=<span style="color:orange">Realization Plan</span>=
  
 +
[[File:timeline2.jpg|220px|left]]
  
 +
<div style="float:left; width: 220px; margin-right:20px; text-align:justify">
 +
A realization plan has been drafted. It will provide the support for the project materialization and links with other projects and developments on site.
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
[[project C:REALIZATION_PLAN|read more >>]]
  
 
</div>
 
</div>
 
</div>
 
</div>
<div style="float: left; width: 1200px; margin-right:40px; text-align:left">
 
  
=<span style="color:orange">STRUCTURE</span>=
+
<div style="float:left; width: 220px; margin-right:20px; text-align:justify">
  
<div style="float: left; width: 380px; margin-right:20px; text-align:left">
+
=<span style="color:orange">Prototype</span>=
  
===Concept===
+
[[File:P1160827.JPG|220px|left|casual-user interface]]
  
[[File:Capsule01.jpg|190px]]
+
<div style="float:left; width: 220px; margin-right:20px; text-align:justify">
  
===Research===
+
1:1 prototype page.
  
===Validators===
+
<br>
[[atom02:structures_michela_turrin| Michela Turrin]] & [[Project C:structures_gerrie_hobbelman | Gerrie Hobbelman]]
+
<br>
===References===
+
<br>
 
+
<br>
[[Project C:Inflatables | Inflatables]]
+
[[project C:PROTOTYPE|read more >>]]
  
 
</div>
 
</div>
<div style="float: left; width: 780px; margin-right:20px; text-align:left">
 
 
===Design Proposal===
 
 
 
 
</div>
 
 
 
</div>
 
</div>
 
</div>
 
</div>

Latest revision as of 14:01, 1 February 2012

Gesamt3.gif


Spacebook aims to extend the notion of an online social community by providing a user-customizable space that will enhance that community through joining and participating in activities outside the virtual world. Thus Spacebook brings together the virtual and the physical space: a phenomenon through which everybody can see the activities on the site, the users can join activities that are or will be taking place, create their new activities and (physically) link them with other activities. A new activity hive is born.


Interface

casual-user interface

The interface design has three steps of functionality which relates to three user-types: the casual user, the advanced user and the administrator. Through this design decision Spacebook provides for the needs of different characters.

read more >>

Structure

The architectural implementation uses a system of inflatables which have the advantage of being lightweight ultimately reducing the dead-loads while at the same time providing adequate stiffness and flexibility.

read more >>

Architecture

Birdie.jpg

The user, the interface and the structure are connected by means of the architecture, the complete system. This is the link that unites all the parts involved.


read more >>

Realization Plan

Timeline2.jpg

A realization plan has been drafted. It will provide the support for the project materialization and links with other projects and developments on site.



read more >>

Prototype

casual-user interface

1:1 prototype page.





read more >>

Personal tools
Namespaces
Variants
Actions
Projects
Atoms
Toolbox