Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Wiki Markup
{anchor:obs}

h4. Navigation
{pagetree2:EasyShop}
_Click on a page above for a specific section._

h1. GR2 - Designs 


h2. Scenario

An elderly person is buying her weekly groceries. She knows what she wants to buy and would rather not have to go to the store to do it.
Tasks:
# Search for grocery list item
# Reach some sort of customer service
# Add to cart and have delivered bi-weekly 


h2. Individual Design Sketches

[6DOT813sp13:Albert Rodenius's Design Sketchs]

[6DOT813sp13:Andrew Dorne's Design Sketches]

[6DOT813sp13:Jorge Ornelas's Design Sketches]

[6DOT813sp13:Otitochi Mbagwu's Design Sketches]




h2. {color:#660000}{*}Group Storyboard Designs and Analysis{*}{color}


h3. {color:#800000}Design 1 - Visibility-Focused{color}


h4. {color:#800000}Storyboard{color}


!Large Image (p1).jpg|border=1,width=300!

{color:#000000}Image 1{color}


!Large Image (p2).jpg|border=1,width=300!

{color:#000000}Image 2{color}


!Shopping Cart.jpg|border=1,width=300!

{color:#000000}Image 3{color}


h4. {color:#800000}Design Overview{color}

{color:#800000#000000}This design was focused on...{color}


h4. {color:#800000}Learnability{color}

This design addresses issues of learnability using clear transitions, visible icons with text descriptions, and large text. Specifically, the search bar is in the center of the page on the homepage, but when a search is performed it slides to the top bar. Icons and text are resizeable, and every button has an icon title.

h4. {color:#800000}Efficiency{color}

The efficiency of this design lies in its simplicity. Though initially emphasized for clarity and learnability purposes, the simplicity of this design means that fewer clicks are necessary in order to execute a purchase. On the item detail page, a sidebar on the right has fixed position (i.e. does not scroll with the page) so that if the customer decides he or she would like to purchase the item while scrolled down in the middle of reviews, he or she need not scroll back to the top of the page.

h4. {color:#800000}Safety{color}

The most important parts of safety in shopping are ensuring that nothing is purchased accidentally. To combat this, we have several features. First of all, the checkout process asks for confirmation. Secondly, adding to the cart asks for the quantity desired before adding.


h3. {color:#800000}Design 2 - Efficiency-Focused{color}


h4. {color:#800000}Storyboard{color}


!Touch:tablet Focused.jpg|thumbnail,border=1!
Image 1


h4. {color:#800000}Design Overview{color}


h4. {color:#800000}Learnability{color}

In order to facilitate the learnability of the keyboard shortcuts, which are a focus of the design, we have an initial overlay on the site with the keyboard shortcuts enumerated. Additionally, whenever a ctl or alt key is pressed, the overlay appears again for the current page.


h4. {color:#800000}Efficiency{color}

The focus of this design is efficiency, and as such keyboard shortcuts are prevalent. Additionally, almost all of the functionality is located on one page in order to facilitate fewer clicks.


h4. {color:#800000}Safety{color}

This design is safe in that there is a keyboard shortcut to undo any action. Additionally, any keyboard shortcut which is pressed is shown on the bottom.


h3. {color:#800000}Design 3 - Audio/Voice-Focused{color}


h4. {color:#800000}Storyboard{color}


!Blindmode (p1).jpg|border=1,width=300!

Image 1 !Blindmode (p2).jpg|border=1,width=300!
Image 2


h4. {color:#800000}Design Overview{color}


h4. {color:#800000}Learnability{color}

Upon first entering this site, an audio tutorial is given with available keyboard commands and navigation tips. Furthermore, the command “help” can be issued, and all the voice and keyboard commands will be read out.


h4. {color:#800000}Efficiency{color}

This design is keyboard and voice-centric, and as such does not require precise mouse movement. This allows for rapid navigation once the interface is learned.


h4. {color:#800000}Safety{color}

An “undo” command can be issued, which will undo the last action (and read out what action has been undone).