...

This section presents the individual designs:

**Note: for better organization, the content is distributed in hidden sections. This works in chrome and firefox, not in safari.

{html}<MCE:STYLE><#comment></#comment></MCE:STYLE><STYLE mce_bogus="1"><!--

<style> 
.hidable{display:none;} 
--></STYLE>
<MCE:SCRIPT type="mce-text/javascript"><#comment></#comment></MCE:SCRIPT> {html}

2.1 Claudia

</style> 
<script>{html}

{html}<A href="javascript:showhide('designClaudia');" id="design1show" mce_href="javascript:showhide('designClaudia');">Show this design</A>{html}

{html}<DIV class="hidable" id="designClaudia"></DIV><P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P><B>1) For tiny screen: </B></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>This design pursues the goal of minimizing the amount of information displayed so it's compatible with tiny screen such as cellphones. The main screen of the UI will contain several icons representing the main tasks to be accomplished by users. Let's focus on (T1) buying tickets as first task. The user clicks on the "buy tickets" option, then a very simple screen is shown with two options: today or for other day. The idea is to present the "option" today because it's expected to be widely used and that way we reduce the time for the user to select the date in a calendar which is usually tedious in a tiny screen. Once the user clicks "today", the UI shows a form with the minimum amount of fields required to do the electronic transaction for payment. No registration is required. The user gets then a confirmation number that can be used to have direct access tot he Aquarium. </P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>Once the visitors are inside the aquarium, they can look for the location of a specific species (T2) by selecting the icon "species". A list of animals is displayed using recognizable pictures and then clicking in one animals will produce a new screen with general information and the location. </P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P><IMG imagetext="claudiaout-0.png|border=1" mce_src="../../../../../../../../../download/attachments/86263595/claudiaout-0.png?version=1&modificationDate=1362719773000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86263595/claudiaout-0.png?version=1&modificationDate=1362719773000" style="border: 1px solid black"></IMG></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>The UI can handle alerts about sessions that are about to start as well as another main icon with this events (T3). After clicking in the events icon or the alert, the UI shows information about the session, the location and quick access to the schedule of other sessions in the same day. </P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>Finally, the user also have access to information about a specific specie that is interesting by clicking in the species icon (T4). It's important to remark that sometimes is hard for non-expert to identify that an animal in a picture is the same that is being observed in the tank so it will be important to produce good images that facilitates this recognition.</P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P><IMG height="692" imagetext="claudia1-2.png|border=1,width=533,height=692" mce_src="../../../../../../../../../download/attachments/86263595/claudia1-2.png?version=1&modificationDate=1362760315000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86263595/claudia1-2.png?version=1&modificationDate=1362760315000" style="border: 1px solid black" width="533"></IMG></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P><B>2) Sea Metaphor:</B></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P><IMG height="686" imagetext="claudiaout-2.png|border=1,width=531,height=686" mce_src="../../../../../../../../../download/attachments/86263595/claudiaout-2.png?version=1&modificationDate=1362719763000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86263595/claudiaout-2.png?version=1&modificationDate=1362719763000" style="border: 1px solid black" width="531"></IMG></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P><IMG height="660" imagetext="claudia2-2.png|border=1,width=828,height=660" mce_src="../../../../../../../../../download/attachments/86263595/claudia2-2.png?version=1&modificationDate=1362760321000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86263595/claudia2-2.png?version=1&modificationDate=1362760321000" style="border: 1px solid black" width="828"></IMG></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P><B>3) Thumbnail-styled groups of animals-locations-exhibitions:</B></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P><IMG height="763" imagetext="Scanned from a Xerox multifunction device(2).png|border=1,width=594,height=763" mce_src="../../../../../../../../../download/attachments/86263595/Scanned+from+a+Xerox+multifunction+device%282%29.png?version=1&modificationDate=1362709246000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86263595/Scanned+from+a+Xerox+multifunction+device%282%29.png?version=1&modificationDate=1362709246000" style="border: 1px solid black" width="594"></IMG></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<DIV class="wysiwyg-macro" macrohasbody="true" macroname="html" macrostarttag="{html}

{html}
h5. 2.2 Alejandro

{html}

{html}
{html}

function showhide(section){ 
var ele=document.getElementById(section); 
if(ele.style.display!="block") { 
ele.style.display="block"; 
document.getElementById(section+"show").innerHTML = "Hide this design"; 
} else { 
ele.style.display="none"; 
document.getElementById(section+"show").innerHTML = "Show this design"; 
}}</script> 
{html}

2.1 Claudia

{html}<a href="javascript:showhide('designClaudia');" id="design1show">Show this design</a>{html}

{html}<div id="designClaudia" class="hidable">{html}

1) For tiny screen: 

This design pursues the goal of minimizing the amount of information displayed so it's compatible with tiny screen such as cellphones. The main screen of the UI will contain several icons representing the main tasks to be accomplished by users. Let's focus on (T1) buying tickets as first task. The user clicks on the "buy tickets" option, then a very simple screen is shown with two options: today or for other day. The idea is to present the "option" today because it's expected to be widely used and that way we reduce the time for the user to select the date in a calendar which is usually tedious in a tiny screen. Once the user clicks "today", the UI shows a form with the minimum amount of fields required to do the electronic transaction for payment. No registration is required. The user gets then a confirmation number that can be used to have direct access tot he Aquarium. 

Once the visitors are inside the aquarium, they can look for the location of a specific species (T2) by selecting the icon "species". A list of animals is displayed using recognizable pictures and then clicking in one animals will produce a new screen with general information and the location. 

Image Added

The UI can handle alerts about sessions that are about to start as well as another main icon with this events (T3). After clicking in the events icon or the alert, the UI shows information about the session, the location and quick access to the schedule of other sessions in the same day. 

Finally, the user also have access to information about a specific specie that is interesting by clicking in the species icon (T4). It's important to remark that sometimes is hard for non-expert to identify that an animal in a picture is the same that is being observed in the tank so it will be important to produce good images that facilitates this recognition.

Image Added

2) Sea Metaphor:

Image Added

Image Added

3) Thumbnail-styled groups of animals-locations-exhibitions:

Image Added

{html}</div>{html}

2.2 Alejandro

{html}<a href="javascript:showhide('designAlejandro');" id="design2show">Show this design</a>{html}

{html}<div id="designAlejandro" class="hidable">{html}

1) Time-budget centered design
Image Added

Interface assumes that the user only knows how much time they have and which days they are able to use for a visit.

In an effort to shield the user from the daunting task of the astronomically large amount of possible time arrangements, the user only selects three things (a) which day to visit on (b) how much time they have for the visit (c) which things available that day they want to see. 

The screen starts out with only 7 cells, one per day, with small icons inside. The icons are not meant to show specifically what is available that day, but to give the user an idea regarding how much is available that day. If the user wants to plan for a future date, or just buy tickets for it, he can. However, this design does not favor that, as we think that due to constant reconstruction, rescheduling, moving, etc. the staff only have a good idea of the upcoming week.

After a day is clicked, icons for all animals, sessions, and exhibitions appear. These don't have words; only pictures. If one is clicked, more information is shown, along with an option to 'checkmark' this item.

Once the user has marked the icons he is interested in visiting, a set of instructions similar to those obtained from Google Maps upon clicking 'Get Directions'. These specifically tell the user when to arrive, when to go where, how to move around the building using visible landmarks (turn right once you see the round shark tank).

Finally, icons for the following options are shown below: (a) Print the plan (b) Email yourself the plan (c) Buy tickets for this date.

Notes: Finding visual landmarks might be too difficult. The interface should let the user know if he choose too many items to see for his time-budget somehow. A very strong idea that came up while we presented these was that distance and estimated walking time should be incorporated into the schedules.

1) Exploration-centered design
Image Added

This interface assumes that the user does not want to think about time, and simply wants to know where things are and how to get to them efficiently (i.e., not going back and forth)

The interface looks like the map found inside the aquarium. There are icons with images of animals on top of certain locations. If the user clicks them, information shows up along with an 'Add' option.

A schedule is kept below the screen and is constantly updated. This schedule does not specify times, simply the order in which events take place.

Arrows are drawn on the actual map connecting the locations selected by the user. These arrows have text displaying the estimated time it takes to walk from point A to B.

The interface takes care of avoiding redundant paths and tries to make everything a loop.

Buying tickets is automatically added to the schedule; if the user clicks the ticket logo, they can buy them online.

This interface assumes that the user is planning (and buying tickets) for the current day.

1) Explicit scheduling
Image Added

This interface assumes the user wants to directly control every aspect of the timing. Instead of choosing a day of the week, the user inputs a date. Instead of selecting the time budget, the user explicitly inputs when he will arrive and leave.

After and leave.</P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>After this information is entered, a list of available sessions, animals, and exhibitions are shown along with 'checkmark' boxes next to them.</P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>The user then begins clicking on the ones he is interested in.</P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>A

The user then begins clicking on the ones he is interested in.

A schedule is maintained below. It is somewhat simple (ordered icons for each visiting event) but also has detailed timed information below it (e.g., buy tickets at 1pm, go to tank A at 1:30pm). The option to buy tickets online is added to the beginning of the schedule.</P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<DIV class="wysiwyg-macro" macrohasbody="true" macroname="html" macrostarttag="A at 1:30pm). The option to buy tickets online is added to the beginning of the schedule.

{html}" wikihasnewlineafterbody="false" wikihasnewlinebeforebody="false" wikihasprecedingnewline="true" wikihastrailingnewline="false"></DIV></div>{html}

...

GR2 - Designs

Scenario

...

3) Thumbnail-styled groups of animals-locations-exhibitions:

...

2.2 Alejandro

1) Time-budget centered design

...