GR2

Scenario

Mother (passive user) wants to find pictures from her son's 6th birthday so the grandparents can view it. She is not sure where these picture are stored- if it is on a site, a camera, or anywhere. So she searches on the site for them. Once she gains access to it on the site, she distributes the picture (as well as maybe any other relevant ones) to the grandparents.

Goal: share a picture from son's 6th birthday

Tasks:

Find the picture/determine if the desired picture is in fact on CoShare
Share picture with grandparents

Individual Designs

Ken

html: Security restricted macro is not allowed. An edit restriction is required that matches the macro authorization list.

<DIV class="hidable" id="design1"></DIV> 
 
<H4><A name="GR2-FunDisplay"></A>Fun Display</H4>
 
This design tries to make it fun for users to scroll through and find media. Items are displayed in varying sizes in a mosaic like form. This yields some uncertainty as to where certain items are but it gives the user a fun and new way to browse files. 
 
The search bar is there to find a specific picture or event, but the layout is meant for the user to go looking for one thing and stumble upon several others in the process. 
 
The design is not efficient for the user. The layout makes it fairly easy to learn how to use.
 
 <IMG imagetext="20130308_011822.jpg|border=1,width=300" mce_src="../../../../../../../../../download/attachments/86269860/20130308_011822.jpg?version=1&modificationDate=1362724121000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86269860/20130308_011822.jpg?version=1&modificationDate=1362724121000" style="border: 1px solid black" width="300"></IMG>
 
<H4><A name="GR2-EfficientDesign"></A>Efficient Design</H4>
 
This design allows the content to get to content strictly by searching.
 
The search results page not only displays relavant media, but it also displays potential people, albums, or events in a separate grouping. This gives the user easy access to the result type they wanted. It takes limited scrolling to find what you want in the results so it is efficient to get the result you want, and it only requires one page load. Search autocomplete aids the user in searching for relavant things. The user can search by person, event, date, or filename.
 
The landing page also presents the user with recent activity in case the other parent recently did something they were trying to do.
 
 <IMG imagetext="20130308_011925.jpg|border=1,width=300" mce_src="../../../../../../../../../download/attachments/86269860/20130308_011925.jpg?version=1&modificationDate=1362724130000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86269860/20130308_011925.jpg?version=1&modificationDate=1362724130000" style="border: 1px solid black" width="300"></IMG>
 
<H4><A name="GR2-LargeView"></A>Large View</H4>
 
The larger view allows users with poorer eyesight to navigate with ease. It also attempts to display things to the user in a friendly way. The user will be less intimidated by the overly sized interface because they won't feel like they are missing something. 
 
It sacrifices some efficiency by initially displaying media to the user one item at a time, however the option remains to see a grid like view of all the media. 
 
The initial search for something can be made by person, event, or date. The calendar shows users which dates have files associated with them through color and mouse over pop ups. 
 
<IMG imagetext="20130308_011856.jpg|border=1,width=300" mce_src="../../../../../../../../../download/attachments/86269860/20130308_011856.jpg?version=1&modificationDate=1362724141000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86269860/20130308_011856.jpg?version=1&modificationDate=1362724141000" style="border: 1px solid black" width="300"></IMG>
 
 
<H3><A name="GR2-Joe"></A>Joe</H3>
<DIV class="wysiwyg-macro" macrohasbody="true" macroname="html" macrostarttag="</div>
" wikihasnewlineafterbody="false" wikihasnewlinebeforebody="false" wikihasprecedingnewline="true" wikihastrailingnewline="false">
<DIV class="wysiwyg-macro" macrohasbody="true" macroname="html" macrostarttag=" 
<DIV class=" wysiwyg-macro>
 
<H4><A name="GR2-TinyScreen"></A>Tiny Screen</H4> 
 
This design tried to tackle the extreme case of having a tiny screen, perhaps on a mobile device. 
 
The process of finding a specific picture is done by searching through a calendar layout. 
 
Sharing is accomplished by using the link provided for each picture. It is left to the user to share as they please. 
 
 <IMG height="300" imagetext="i hate this.jpg|border=1,height=300" mce_src="../../../../../../../../../download/attachments/86269860/i+hate+this.jpg?version=1&modificationDate=1362722151000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86269860/i+hate+this.jpg?version=1&modificationDate=1362722151000" style="border: 1px solid black"></IMG> 
 
<H4><A name="GR2-IlliterateUsers"></A>Illiterate Users</H4> 
 
Tried to illustrate flow of site without text, so primarily with images. Visual breadcrumbs help understand where they are in the process. 
 
Used pictures of children to illustration aggregation by person. 
 
Pictures would be shown in chronological order which would hopefully be apparent based on the content. An envelope represents a link to email it. The recipients of the email are represented as pictures a well. 
 
<IMG height="300" imagetext="photo_4.jpg|border=1,height=300" mce_src="../../../../../../../../../download/attachments/86269860/photo_4.jpg?version=1&modificationDate=1362721233000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86269860/photo_4.jpg?version=1&modificationDate=1362721233000" style="border: 1px solid black"></IMG> 
 
<IMG imagetext="photo_5.jpg|border=1,width=300" mce_src="../../../../../../../../../download/attachments/86269860/photo_5.jpg?version=1&modificationDate=1362721238000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86269860/photo_5.jpg?version=1&modificationDate=1362721238000" style="border: 1px solid black" width="300"></IMG> 
 
<IMG imagetext="photo_6.jpg|border=1,width=300" mce_src="../../../../../../../../../download/attachments/86269860/photo_6.jpg?version=1&modificationDate=1362721241000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86269860/photo_6.jpg?version=1&modificationDate=1362721241000" style="border: 1px solid black" width="300"></IMG> 
 
<H4><A name="GR2-"></A>Ultra Efficiency</H4> 
 
All manipulation is done through entering commands and hotkeys. 
 
The command bar shows the current search query. Can use different keywords. A matching contents bar shows the pictures matching the query. 
 
Hotkeys can copy links to images, then can be shared as the users wishes. 
 
<IMG height="300" imagetext="photo_1.jpg|border=1,height=300" mce_src="../../../../../../../../../download/attachments/86269860/photo_1.jpg?version=4&modificationDate=1362722082000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86269860/photo_1.jpg?version=4&modificationDate=1362722082000" style="border: 1px solid black"></IMG> 
 
<IMG imagetext="photo_3.jpg|border=1,width=300" mce_src="../../../../../../../../../download/attachments/86269860/photo_3.jpg?version=1&modificationDate=1362721398000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86269860/photo_3.jpg?version=1&modificationDate=1362721398000" style="border: 1px solid black" width="300"></IMG> 
 
<IMG height="300" imagetext="photo_2.jpg|border=1,height=300" mce_src="../../../../../../../../../download/attachments/86269860/photo_2.jpg?version=1&modificationDate=1362721395000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86269860/photo_2.jpg?version=1&modificationDate=1362721395000" style="border: 1px solid black"></IMG> 
 
<H1><A name="GR2-Justin"></A>Justin</H1> 
 
This design allows users to search for pictures, and it pulls up related ones as well. It shows when devices have last been synced to the site, so users can have an idea of where the offline pictures they want might be. 
<IMG imagetext="design1.png|border=1" mce_src="../../../../../../../../../download/attachments/86269860/design1.png?version=1&modificationDate=1362757282000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86269860/design1.png?version=1&modificationDate=1362757282000" style="border: 1px solid black"></IMG> 
 
This is the super-efficient design. Intended when users want to find and share pictures as quickly as possible, it leads them right through the steps. Their linear progression to the right in going through all steps communicates to them exactly what they need to do next. 
 
 
<IMG imagetext="design2.png|border=1" mce_src="../../../../../../../../../download/attachments/86269860/design2.png?version=1&modificationDate=1362757286000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86269860/design2.png?version=1&modificationDate=1362757286000" style="border: 1px solid black"></IMG> 
 
 
This design offers two alternatives for a graphical layout indicating to the user pictures that have been recently added to the site, and with whom they are shared with. The first approach uses more orderly rows, while the second attempts to use Venn diagrams in showing pictures that are shared with different groups. 
 
<IMG imagetext="design3.png|border=1" mce_src="../../../../../../../../../download/attachments/86269860/design3.png?version=1&modificationDate=1362757289000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86269860/design3.png?version=1&modificationDate=1362757289000" style="border: 1px solid black"></IMG> 
 
 
 
 
 
<H2><A name="GR2-DesignMarkups"></A>Design Markups</H2> 
 
 
<H2><A name="GR2-StoryboardsandDesigns"></A>Storyboards and Designs</H2> 
 
 
<H3><A name="GR2-Design1"></A>Design 1</H3> 
 
Step 1 
 
 - Introduced to homescreen with information about spouse's uploaded content and sharing activity 
 
- User wants to find picture so they go to browse 
 
 <IMG imagetext="photo 1.JPG|border=1,width=300" mce_src="../../../../../../../../../download/attachments/86269860/photo+1.JPG?version=1&modificationDate=1362716751000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86269860/photo+1.JPG?version=1&modificationDate=1362716751000" style="border: 1px solid black" width="300"></IMG> 
 
Step 2 
 
-User is not sure on exact specifics of picture, but has an idea of a picture, so they browse. 
 
- Mosaic displays random pictures, which is fast for sorting and fun to view. 
 
<IMG imagetext="photo 2.JPG|border=1,width=300" mce_src="../../../../../../../../../download/attachments/86269860/photo+2.JPG?version=1&modificationDate=1362716772000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86269860/photo+2.JPG?version=1&modificationDate=1362716772000" style="border: 1px solid black" width="300"></IMG> 
 
Step 3 
 
-User is not sure on exact specifics of picture, but has an idea of a picture, so they browse. 
 
- Mosaic displays random pictures, which is fast for sorting and fun to view. 
 
<IMG imagetext="photo 3.JPG|border=1,width=300" mce_src="../../../../../../../../../download/attachments/86269860/photo+3.JPG?version=1&modificationDate=1362716880000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86269860/photo+3.JPG?version=1&modificationDate=1362716880000" style="border: 1px solid black" width="300"></IMG> 
 
Design Highlights 
<UL> 
<LI>Design's overall theme is for someone who either has an idea for the content they want, but not a specific picture in mind, or they just want to browse for personal enjoyment.</LI> 
<LI>Home screen is designated for the dealing with the sharing of content problem. Gives updates on recently shared items, content recently added by spouse and access to child profiles.</LI> 
<LI>Still allows for functionality of searching for specific content and adding new content (not pictured).</LI> 
</UL> 
 
 
Usability Analysis 
<OL> 
<LI>Learnability 
<UL> 
<LI>Pros 
<UL> 
<LI>Simple interface in terms of few buttons on home screen. This allows the users to know precisely what they can do.</LI> 
<LI>Mosaic is catchy for the user. They are likely to hover over it with mouse, and learn more about its functionality. 
<UL> 
<LI>We need to use this opportunity to inform them in some way.</LI> 
</UL> 
</LI> 
</UL> 
</LI> 
<LI>Cons 
<UL> 
<LI>Some users might not understand the mosaic can move adding new pictures. Arrows try to convey this information.</LI> 
</UL> 
</LI> 
</UL> 
</LI> 
<LI>Efficiency 
<UL> 
<LI>Pros 
<UL> 
<LI>Showing random pictures at varying sizes allows users to process a lot of data at once. Clicking on picture can get them to related pictures.</LI> 
</UL> 
</LI> 
<LI>Cons 
<UL> 
<LI>Overall process is geared towards browsing, which is inefficient if the user has a specific photo in mind.</LI> 
</UL> 
</LI> 
</UL> 
</LI> 
<LI>Safety 
<UL> 
<LI>Pros 
<UL> 
<LI>Users are processing a lot of data at once, but it takes a click to actually learn more, not just a simple hover.</LI> 
<LI>Pressing escape or clicking outside scope of sharing/larger view window goes back to mosaic (easy to undo mistake)</LI> 
</UL> 
</LI> 
<LI>Cons 
<UL> 
<LI>Pictures are close together for the mosaic and user could potentially click on wrong photo.</LI> 
</UL> 
</LI> 
</UL> 
</LI> 
</OL>
 
 
<H2><A name="GR2-Design2"></A>Design 2</H2> 
 
 
<H2><A name="GR2-%21sketch.pngborder%3D1%21"></A><IMG imagetext="sketch.png|border=1" mce_src="../../../../../../../../../download/attachments/86269860/sketch.png?version=1&modificationDate=1362724169000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86269860/sketch.png?version=1&modificationDate=1362724169000" style="border: 1px solid black"></IMG></H2> 
 
Step 1 
 
- user wants to find pictures of a birthday party. The user logs on, and is able to see recently added/shared pictures from their spouse, as well as the state of devices that upload to the site. 
 
Step 2 
 
- The user is able to search for pictures and select the ones they would like to share. 
 
Step 3 
 
- The user chooses who they would like to share with. 
 
 
Usability Analysis 
<UL> 
<LI>Learnability 
<UL> 
<LI>Pros 
<UL> 
<LI>brings user through a very straightforward progression of finding and sharing content</LI> 
</UL> 
</LI> 
<LI>Cons 
<UL> 
<LI> does not indicate the possibility for other use cases, which could confuse the user if this is not what they are trying to do</LI> 
</UL> 
</LI> 
</UL> 
</LI> 
<LI>Efficiency 
<UL> 
<LI>Pros 
<UL> 
<LI>brings user through a very straightforward progression of finding and sharing content with no wasted steps</LI> 
</UL> 
</LI> 
<LI>Cons 
<UL> 
<LI>is directly intended for this use case; will not be efficient for browsing and other uses</LI> 
</UL> 
</LI> 
</UL> 
</LI> 
<LI>Safety 
<UL> 
<LI>Pros 
<UL> 
<LI>Users can progress through steps, but also easily go back steps if they want to make changes.</LI> 
<LI>The effects of the user's actions on one step are shown on the next.</LI> 
</UL> 
</LI> 
<LI>Cons 
<UL> 
<LI>needs better indication of search toggling between recent added/uploaded and all content</LI> 
</UL> 
</LI> 
</UL> 
</LI> 
</UL>
 
 
 
<H2><A name="GR2-Design3"></A>Design 3</H2> 
 
Step 1 
<UL> 
<LI>User wants to share pictures and has phone to do so.</LI> 
</UL>
 
 
<IMG height="300" imagetext="photo.jpg|border=1,height=300" mce_src="../../../../../../../../../download/attachments/86269860/photo.jpg?version=2&modificationDate=1362721887000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86269860/photo.jpg?version=2&modificationDate=1362721887000" style="border: 1px solid black"></IMG> 
 
 
 
 
 
Step 2 
<UL> 
<LI>This version defaults to showing the most recent content.</LI> 
</UL>
 
 
<IMG height="300" imagetext="fuck_this_photo_1.jpg|border=1,height=300" mce_src="../../../../../../../../../download/attachments/86269860/fuck_this_photo_1.jpg?version=1&modificationDate=1362722368000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86269860/fuck_this_photo_1.jpg?version=1&modificationDate=1362722368000" style="border: 1px solid black"></IMG> 
 
 
 
 
 
 
 
Step 3 
<UL> 
<LI>User can switch to selecting a particular date on which the content was captured.</LI> 
</UL>
 
 
<IMG height="300" imagetext="fuck_this_photo_2.jpg|border=1,height=300" mce_src="../../../../../../../../../download/attachments/86269860/fuck_this_photo_2.jpg?version=1&modificationDate=1362722207000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86269860/fuck_this_photo_2.jpg?version=1&modificationDate=1362722207000" style="border: 1px solid black"></IMG> 
 
 
 
 
Step 4 
<UL> 
<LI>Once a specific date is set, the User can now see that in fact there are pictures and can choose which one to share.</LI> 
<LI>Sharing is possible through email or a link to the picture </LI> 
</UL>
 
 
 
<IMG height="300" imagetext="fuck_this_fuck.jpg|border=1,height=300" mce_src="../../../../../../../../../download/attachments/86269860/fuck_this_fuck.jpg?version=1&modificationDate=1362722268000" mce_style="border: 1px solid black" src="/confluence/download/attachments/86269860/fuck_this_fuck.jpg?version=1&modificationDate=1362722268000" style="border: 1px solid black"></IMG> 
Design Highlights: 
<UL> 
<LI>Judicious use of screen space due to smaller size</LI> 
<LI>This led to less and simpler features i.e. focusing on dates only</LI> 
</UL>
 
 
Usability Analysis 
<UL> 
<LI>Learnability 
<UL> 
<LI>Pros 
<UL> 
<LI>Text boxes are labeled indicating their function.</LI> 
<LI>Links and buttons should have the proper affordances to indicate their uses</LI> 
</UL> 
</LI> 
<LI>Cons 
<UL> 
<LI> Depending on the affordances of the pictures in the recent view, it might not be clear what happens when you click either of them. When you click a picture, it might be reasonable to bring up the specific picture or the view of all pictures on that date. How to make that clearer should be considered in future iterations.</LI> 
</UL> 
</LI> 
</UL> 
</LI> 
<LI>Efficiency 
<UL> 
<LI>Pros 
<UL> 
<LI>The efficiency of this interface stems mostly from the anticipation of user needs. The "Recent" tab provides immediate access to more current content which is presumably used more. Also, the buttons to email or copy or the pictures link are located next to the picture themselves as tasks commonly following viewing a picture or video.</LI> 
</UL> 
</LI> 
<LI>Cons 
<UL> 
<LI>Unfortunately, if many pictures occur on the same day, the user would potentially have to scroll through all of them if searching for something in particular. While this is better than simply searching through all pictures, it is something to improve in future iterations.</LI> 
</UL> 
</LI> 
</UL> 
</LI> 
<LI>Safety 
<UL> 
<LI>Pros 
<UL> 
<LI>The different modes for simply viewing recent pictures versus those from a specific date are clearly demarcated using the visible tabs at the top, hopefully minimizing mode errors.</LI> 
</UL> 
</LI> 
<LI>Cons 
<UL> 
<LI>If the date you entered is not exactly correct, no content will be showed at all. Perhaps using a date range would be more effective and safer. This, however, presents some ambiguity because when people must confirm the absence of a picture, they might rely on this flexibility and incorrectly interpret it doesn't exist. But this current design is unforgiving in selecting the wrong date.</LI>

Child pages

GR2

GR2

Scenario

Individual Designs

Ken