GR2 - Designs

Scenario

A couple (Anne, Joe) with a kid (Andrew) are tourists in Boston. They decided to go to the Aquarium and they arrive at about 11am. The line for buying tickets has about 70 people waiting and the couple don't have too much time because they would like to visit other places in Boston during the weekend. While in the line, the staff informed that they can buy tickets on-line using their cellphones and in that case they can skip the line and go to the priority access line which is empty. Joe tried to buy the tickets on-line but he found he needs to register. He did try but the cellphone is a little bit uncomfortable for typing and selecting, so after dealing with the website he abandoned the idea and they stay on-line. After 45 minutes spent in buying tickets, they get into the Aquarium and Andrew saw an advertisement about the Blue Little Penguins. Andrew asked his parent to go there but they were confused because the Penguins are signaled to be in the main exhibition place but since the aquarium is currently in reconstruction they were moved. They tried to find the Penguins following the arrows marked in the floor but they got confused, in part because there is so many people in the place and there are arrows for different species, that they got to the wrong floor. They went back and Andrew started playing with a touchscreen system but the parents were unable to find the information in the interactive guide. Finally they saw a member of the staff who helped them to get to the penguins. After that they continued walking through the aquarium and they discovered an exhibit was running in a place hidden at the entrance but it was just about to finish.

Note: This is an adaptation of real situations observed in the aquarium.

Individual design sketches.

Each group member should post three of the design sketches they made, along with a few sentences of description for each one.

2.1 Claudia

1) For tiny screen:

" wikihasnewlineafterbody="false" wikihasnewlinebeforebody="false" wikihasprecedingnewline="true" wikihastrailingnewline="false">

–

</DIV><DIV class="wysiwyg-macro" macrohasbody="true" macroname="html" macrostarttag="

" wikihasnewlineafterbody="false" wikihasnewlinebeforebody="false" wikihasprecedingnewline="true" wikihastrailingnewline="false"><IMG align border="1" id imagetext="claudiaout-0.png|border=1" mce_style="border: 1px solid black;" src="/confluence/download/attachments/86263595/claudiaout-0.png" style="border: 1px solid black;"></IMG></DIV><DIV class="wysiwyg-macro" macrohasbody="true" macroname="html" macrostarttag="" wikihasnewlineafterbody="false" wikihasnewlinebeforebody="false" wikihasprecedingnewline="true" wikihastrailingnewline="false"><BR></BR></DIV><DIV class="wysiwyg-macro" macrohasbody="true" macroname="html" macrostarttag="" wikihasnewlineafterbody="false" wikihasnewlinebeforebody="false" wikihasprecedingnewline="true" wikihastrailingnewline="false"><BR></BR></DIV><DIV class="wysiwyg-macro" macrohasbody="true" macroname="html" macrostarttag="" wikihasnewlineafterbody="false" wikihasnewlinebeforebody="false" wikihasprecedingnewline="true" wikihastrailingnewline="false"><BR></BR></DIV><DIV class="wysiwyg-macro" macrohasbody="true" macroname="html" macrostarttag="" wikihasnewlinebeforebody="true" wikihasprecedingnewline="false" wikihastrailingnewline="true"></DIV>
<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>
<P><B>2) Sea Metaphor:</B> <IMG imagetext="claudiaout-2.png|border=1" 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"></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>
<H5><A name="LittleBluePenguin.GR2-"></A><BR></BR></H5>
<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>
<H5><A name="LittleBluePenguin.GR2-!claudiaout3.pngborder=1!"></A><IMG imagetext="claudiaout-3.png|border=1" mce_src="../../../../../../../../../download/attachments/86263595/claudiaout-3.png?version=1&modificationDate=1362719756000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86263595/claudiaout-3.png?version=1&modificationDate=1362719756000" style="border: 1px solid black"></IMG></H5>
<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>
<H5><A name="LittleBluePenguin.GR2-"></A><BR></BR></H5>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>3) Thumbnail-styled groups of animals-locations-exhibitions: <IMG height="866" imagetext="Scanned from a Xerox multifunction device(2).png|border=1,width=673,height=866" 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="673"></IMG></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<H5><A name="LittleBluePenguin.GR2-"></A><BR></BR></H5>
<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>
<H5><A name="LittleBluePenguin.GR2-2.2Alejandro"></A>2.2 Alejandro</H5>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P><FONT color="#000000"><B>1) Time-budget centered design</B></FONT><BR></BR>
<IMG height="749" imagetext="atpout-0.png|border=1,width=582,height=749" mce_src="../../../../../../../../../download/attachments/86263595/atpout-0.png?version=1&modificationDate=1362723115000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86263595/atpout-0.png?version=1&modificationDate=1362723115000" style="border: 1px solid black" width="582"></IMG></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>Interface assumes that the user only knows how much time they have and which days they are able to use for a visit.</P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>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. </P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>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.</P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>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.</P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>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).</P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>Finally, icons for the following options are shown below: (a) Print the plan (b) Email yourself the plan (c) Buy tickets for this date.</P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>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.</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>
<P><FONT color="#000000"><B>1) Exploration-centered design</B></FONT><BR></BR>
<IMG height="749" imagetext="atpout-1.png|border=1,width=582,height=749" mce_src="../../../../../../../../../download/attachments/86263595/atpout-1.png?version=1&modificationDate=1362723119000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86263595/atpout-1.png?version=1&modificationDate=1362723119000" style="border: 1px solid black" width="582"></IMG></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>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)</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>
<P>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.</P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>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.</P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>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.</P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>The interface takes care of avoiding redundant paths and tries to make everything a loop.</P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>Buying tickets is automatically added to the schedule; if the user clicks the ticket logo, they can buy them online.</P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>This interface assumes that the user is planning (and buying tickets) for the current day.</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>
<P><FONT color="#000000"><B>1) Explicit scheduling</B></FONT><BR></BR>
<IMG height="749" imagetext="atpout-2.png|border=1,width=582,height=749" mce_src="../../../../../../../../../download/attachments/86263595/atpout-2.png?version=1&modificationDate=1362723122000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86263595/atpout-2.png?version=1&modificationDate=1362723122000" style="border: 1px solid black" width="582"></IMG></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>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.</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 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>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<H5><A name="LittleBluePenguin.GR2-2.3Yixin "></A>2.3 Yixin </H5>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P><FONT color="#000000"><B>1) Design for children</B></FONT><BR></BR>
<IMG height="749" imagetext="yixin1.png|width=582,height=749" mce_src="../../../../../../../../../download/attachments/86263595/yixin1.png?version=1&modificationDate=1362722256000" mce_style="border: 0px solid black" src="/confluence/download/attachments/86263595/yixin1.png?version=1&modificationDate=1362722256000" style="border: 0px solid black" width="582"></IMG><BR></BR>
<FONT color="#000000">For the children, the interface provides the info about different animal species in a fun way. At a specific tank, there should be a touchscreen that provides info about the species in that tank. It shows the fish swimming/moving in the sea and children could click on the fish and a bubble will pop up to show information about that fish. The bubble should be big enough to display the text at appropriate font size.</FONT></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P><FONT color="#000000"><B>2) Design 2</B></FONT><BR></BR>
<IMG height="749" imagetext="yihua2.png|border=1,width=582,height=749" mce_src="../../../../../../../../../download/attachments/86263595/yihua2.png?version=1&modificationDate=1362721657000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86263595/yihua2.png?version=1&modificationDate=1362721657000" style="border: 1px solid black" width="582"></IMG><BR></BR>
<IMG height="749" imagetext="yixin3.png|border=1,width=582,height=749" mce_src="../../../../../../../../../download/attachments/86263595/yixin3.png?version=1&modificationDate=1362722265000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86263595/yixin3.png?version=1&modificationDate=1362722265000" style="border: 1px solid black" width="582"></IMG><BR></BR>
<FONT color="#000000">The design is task-based. There are 4 main tasks: see the aquarium map, explore exhibitions and species, plan and schedule their trips and buy tickets.</FONT></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P><FONT color="#000000"><B>3) Design for non-computer interface</B></FONT><BR></BR>
<IMG height="749" imagetext="yixin3b.png|border=1,width=582,height=749" mce_src="../../../../../../../../../download/attachments/86263595/yixin3b.png?version=1&modificationDate=1362722268000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86263595/yixin3b.png?version=1&modificationDate=1362722268000" style="border: 1px solid black" width="582"></IMG><BR></BR>
<FONT color="#000000">The visitors are given a paper brochure. It basically shows the map of aquarium, with dots on it. At the side of the map, there are description of each dot that represents one exhibition.</FONT></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>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<H5><A name="LittleBluePenguin.GR2-2.4Yihua "></A>2.4 Yihua </H5>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P><FONT color="#000000"><B>1) Design for tiny screen</B></FONT></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>
<H5><A name="LittleBluePenguin.GR2-!yihua.pngborder=1,width=582,height=749!"></A><IMG height="749" imagetext="yihua.png|border=1,width=582,height=749" mce_src="../../../../../../../../../download/attachments/86263595/yihua.png?version=1&modificationDate=1362721652000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86263595/yihua.png?version=1&modificationDate=1362721652000" style="border: 1px solid black" width="582"></IMG></H5>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P><FONT color="#000000">The main view presents the user with four options. After user clicks on one option, the view switches to help user complete that specific task. Since the screen is tiny, I use the scroll bar and also the pop up/slider coming from the left side of the screen.</FONT><BR></BR>
<FONT color="#000000">1. Main view</FONT><BR></BR>
<FONT color="#000000">2. view after clicking on “Purchase tickets”</FONT><BR></BR>
<FONT color="#000000">2. view after clicking on “Show Exhibitions”</FONT><BR></BR>
<FONT color="#000000">view after mousing over on the left of the screen</FONT></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P><FONT color="#000000"><B>2) A map-based design</B></FONT></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>
<P><IMG height="749" imagetext="yihua2.png|border=1,width=582,height=749" mce_src="../../../../../../../../../download/attachments/86263595/yihua2.png?version=1&modificationDate=1362721657000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86263595/yihua2.png?version=1&modificationDate=1362721657000" style="border: 1px solid black" width="582"></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>
<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>
<P><FONT color="#000000">The main view presents the map of the aquarium. The map not only shows the locations(other details shown after zooming in) of exhibitions during that day, but also the species info after user clicks on a specific tank. The interface also provides the “buy ticket” and “find animal” options.</FONT><BR></BR>
<FONT color="#000000">Main screen</FONT><BR></BR>
<FONT color="#000000">Display all exhibitions on the map (same with animals)</FONT></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P><FONT color="#000000"><B>3)</B></FONT> <B>Third design</B></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P>  <IMG height="749" imagetext="yihua3.png|border=1,width=582,height=749" mce_src="../../../../../../../../../download/attachments/86263595/yihua3.png?version=1&modificationDate=1362721663000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86263595/yihua3.png?version=1&modificationDate=1362721663000" style="border: 1px solid black" width="582"></IMG><BR></BR>
<FONT color="#000000">Main screen</FONT><BR></BR>
<FONT color="#000000">User could zoom/in out of the map. The map shows all the exhibitions on that day. Detailed information are presented below the map</FONT></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>
<H2><A name="LittleBluePenguin.GR2-Designsandstoryboards"></A><B>Designs and storyboards</B></H2>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P><B>Brainstorming:</B></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P><IMG height="634" imagetext="IMAG0758.jpg|width=1122,,height=634" mce_src="../../../../../../../../../download/attachments/86263595/IMAG0758.jpg?version=1&modificationDate=1362730873000" mce_style="border: 0px solid black" src="/confluence/download/attachments/86263595/IMAG0758.jpg?version=1&modificationDate=1362730873000" style="border: 0px solid black" width="1122"></IMG><BR></BR>
<IMG height="636" imagetext="IMAG0759.jpg|width=1124,,height=636" mce_src="../../../../../../../../../download/attachments/86263595/IMAG0759.jpg?version=2&modificationDate=1362734236000" mce_style="border: 0px solid black" src="/confluence/download/attachments/86263595/IMAG0759.jpg?version=2&modificationDate=1362734236000" style="border: 0px solid black" width="1124"></IMG></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<H3><A name="LittleBluePenguin.GR2-Finaldesigns:"></A>Final designs:</H3>
<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>
<H4><A name="LittleBluePenguin.GR2-1)TimebasedApproach:"></A><B>1) Time-based Approach:</B></H4>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P> <IMG height="862" imagetext="IMAG0762.jpg|border=1,width=1418,height=862" mce_src="../../../../../../../../../download/attachments/86263595/IMAG0762.jpg?version=1&modificationDate=1362734269000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86263595/IMAG0762.jpg?version=1&modificationDate=1362734269000" style="border: 1px solid black" width="1418"></IMG></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<H4><A name="LittleBluePenguin.GR2-2)LocationbasedApproach:"></A>2) Location-based Approach:</H4>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P><IMG height="1252" imagetext="IMAG0761.jpg|border=1,width=1421,height=1252" mce_src="../../../../../../../../../download/attachments/86263595/IMAG0761.jpg?version=1&modificationDate=1362734255000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86263595/IMAG0761.jpg?version=1&modificationDate=1362734255000" style="border: 1px solid black" width="1421"></IMG></P>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<H4><A name="LittleBluePenguin.GR2-3)MetaphorbasedApproach"></A>3) Metaphor-based Approach</H4>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<P><IMG height="838" imagetext="IMAG0760.jpg|border=1,width=1374,height=838" mce_src="../../../../../../../../../download/attachments/86263595/IMAG0760.jpg?version=1&modificationDate=1362734248000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86263595/IMAG0760.jpg?version=1&modificationDate=1362734248000" style="border: 1px solid black" width="1374"></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>
<P mce_style="display:none" style="display:none" user="true"><BR></BR></P>
<H2><A name="LittleBluePenguin.GR2-Analysisforeachstoryboard"></A><B>Analysis for each storyboard</B></H2></DIV>