The basic layout for zoomii.com
- What: Hover & click books at www.zoomii.com.
- Where: www.zoomii.com
- Who: Liz Li & Matt Martin
Overall Structure of the Interaction[]
After clicking on a book, a new panel appears with extra information.
The interactions are structured with the intention of mimicking the typical actions of a patron in a physical bookstore. In particular, the "physical" representation allows users to easily browse a large number of related books.
- Hovering the mouse over a particular book, structured as a div, highlights the book.
- Clicking on a book simulates the action of picking a book out of a bookshelf to take a closer look, bringing up a new panel with more detailed information:
- description
- rating
- picture
- price
- size
- subjects
About the Interaction[]
- What is most interesting about the interaction?
- Zoomii uses Javascript to add value to an already existing service, Amazon.
- The site does not bother reinventing the backend services provided by Amazon, but instead focuses on the interactive aspects of browsing books online.
- Zoomii shows that companies like Amazon can encourage new designs by focusing on designing solid backend services and then opening those services up with APIs.
Div's are constructed for the new panel. For example, there is a div to position the author's name.
- What is the role of Javascript?
- AJAX GET request is issued to get image of book and text description when a book is clicked.
- Javascript is used to builds divs from the text returned by the XMLHttpRequest (see picture)
- Constructing URLs
- Event handlers
- Click and dbl click event triggers appearance of the detailed information panel per book.
- Mouse over event triggers fixed pixel width blue border over div in the case of a book and a white box in the case of the search, cart, and wish list.
- Mouse out event removes this border.
- AJAX GET request is issued to get image of book and text description when a book is clicked.
- What parts of the interaction happen in the browser and what parts require server interaction?
- Server:
- Every click on a book triggers a GET to bring up the book cover art and book information.
- Presumably the server interacts with Amazon Web Services to get the most relevant information (i.e. price, ratings, sales rank, etc.).
- Browser:
- The process of converting a hover into a highlighted book is done in the browser..
- Server:
- If data is fetched dynamically from the server, what is the granularity of those patches? Are there any special techniques for hiding latency, such as prefetching?
- Data is fetched once for each book.
- Small picture from the "bookshelf" is loaded before the request.
- Are there things about the facilities of the Web that made this interaction either easy or hard?
- Browser compatibility issues: the function for the XML request depends on the browser type.
- What is the limitation to the number of books displayed any given time?
- ~20,000 top rank books on the bookshelves with plans to extend to 100,000 and eventually to the entire Amazon offering.
- Guaranteeing that price and rating reflect the most recent information (interaction with Amazon API)
- Are the techniques used in this interaction relevant for a broader class of interactions?
- The mouse over and mouse out event handlers are probably used generally when wanting to highlight an object or bring up an object based on mouse location.
Miscellaneous Notes[]
The XMLHttpRequest returns text of the following form, which is then converted to a Javascript object using "eval():"
({item: {
asin: "1423101464",
tld: "com",
title: "The Battle of the Labyrinth (Percy Jackson and the Olympians, Book 4)",
price_age: 6081,
rank: 168,
detail_url: "http://www.amazon.com/Battle-Labyrinth-Percy-Jackson-Olympians/dp/1423101464%3FSubscriptionId%3D0P6Q84BXW22BPZFK5102%26tag%3Dws%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D1423101464",
pub_date: "2008-05-06",
publisher: "Hyperion Book CH",
isbn: "1423101464",
pages: 368,
binding: "Hardcover",
image: {
name: "51Q2igc3GvL.jpg",
width: 331,
height: 500
},
list_price: {
id: -1,
currency: "USD",
amount: 1799
},
creators: [
{
id: 1,
role: "Author",
name: "Rick Riordan"
}
],
description: "Percy Jackson isn\u2019t expecting freshman orientation to be any fun. But when a mysterious mortal acquaintance appears on campus, followed by demon cheerleaders, things quickly move from bad to worse. In this latest installment of the blockbuster series, time is running out as war between the Olympians and the evil Titan lord Kronos draws near. Even the safe haven of Camp Half-Blood grows more vulnerable by the minute as Kronos\u2019s army prepares to invade its once impenetrable borders. To stop the invasion, Percy and his demigod friends must set out on a quest through the Labyrinth\u2013a sprawling underground world with stunning surprises at every turn. Full of humor and heart-pounding action, this latest audiobook promises to be their most thrilling adventure yet.",
rating: 500,
num_reviews: 82,
offer: {
id: -1,
merchant: "ATVPDKIKX0DER",
avail: "Usually ships in 24 hours",
super_saver: true,
offer_listing_id: "p7fxQUqaSl29H9XS2E6NqFr6DtRgwlgmhsgMZ2V9q120DH%2BTpnm3zYdzPY9LlkaGqPIJkke%2FfKRhqHPG%2B3oZsQ%3D%3D",
price: {
id: -1,
currency: "USD",
amount: 1223
}
},
dim: {
width: 570,
height: 130,
length: 830,
weight: 120
},
fixed_dim: {
width: 570,
height: 130,
length: 830
},
subjects: [
"Myth & legend told as fiction",
"Children's Books/Ages 9-12 Fiction",
"Children's Books/All Ages",
"Children: Grades 4-6",
"Action & Adventure - General",
"Juvenile Fiction / Legends, Myths, Fables / Greek & Roman",
"Science Fiction, Fantasy, & Magic",
"Legends, Myths, & Fables - Greek & Roman",
"Camps",
"Juvenile Fiction",
"Labyrinths",
"Mythology, Greek"
],
bnode_paths: [
"/Books/Subjects/Children's Books/Literature/Action & Adventure",
"/Books/Subjects/Children's Books/Literature/Fairy Tales, Folk Tales & Myths/Greek & Roman",
"/Books/Subjects/Children's Books/Literature/Science Fiction, Fantasy, Mystery & Horror/Science Fiction, Fantasy, & Magic",
"/Books/Subjects/Children's Books/Ages 9-12/General",
"/Books/Subjects/Literature & Fiction/World Literature/Mythology/Children's Books/Greek & Roman",
"/Books/Refinements/Binding (binding)/Hardcover",
"/Books/Refinements/Format (feature_browse-bin)/Printed Books",
"/Books/Refinements/Age Range (age_range)/Ages 9-12"
],
cats: [
],
suggested_cats: [
1728,
1725,
1570,
1
],
shelved: [
]
},
loc: {
x0: 54848,
x1: 55988,
y0: 9064,
y1: 10724
},
shelved: [
{
area: 1,
asin: "1423101464",
x: 54848,
y: 9064,
w: 1140,
h: 1660
},
{
area: 37,
asin: "1423101464",
x: 251326,
y: 97360,
w: 1140,
h: 1660
}
]})
The object above is turned into the following sequences of divs:
<div style="position: absolute; z-index: 4; left: 265px; top: 31px; width: 1015px; height: 524px; display: block; opacity: 1;">
<div style="overflow: hidden; position: absolute; width: 14px; height: 524px; left: 0px; top: 0px;">
<img src="http://zoomii.com/shapes/rect(24_24_14_4281549909_1_4282733924_7_7_7_7_255_15_80_0_0_0_0$" style="position: absolute; height: 1991px; width: 38px; left: 0px; top: -734px;"/>
</div>
<div style="position: absolute; background-color: rgb(51, 68, 85); left: 14px; top: 0px; width: 1001px; height: 524px;"/>
<div style="position: absolute; color: rgb(240, 240, 240); font-family: arial; font-size: 10pt; left: 18px; top: 0px; width: 992px; height: 504px; padding-top: 10px; padding-bottom: 10px;">
<div style="border: 1px solid rgb(95, 109, 122); padding: 5px; overflow: auto; position: absolute; width: 965px; height: 462px; background-color: rgb(64, 80, 96); left: 0px; top: 30px;">
<img height="462" width="317" src="http://t2.zoomii.com/shapes/coverat('com'_'081014-090534'_54848_9064_317_462$" style="float: left; margin-right: 10px; margin-top: 0px; margin-bottom: 10px;"/>
<span class="Detail_title">The Battle of the Labyrinth (Percy Jackson and the Olympians, Book 4)</span>
<div class="Detail_by">
by
<span>
<span style="cursor: pointer; text-decoration: underline; color: rgb(205, 222, 248);">
Rick Riordan
</span>
</span>
</div>
<br/>
Hardcover, 368 pages
,
5.7x8.3x1.3 inches
<br/>
ISBN 1423101464
<br/>
Published 2008-05-06
by
<span style="cursor: pointer; text-decoration: underline; color: rgb(205, 222, 248);">
Hyperion Book CH
</span>
<div>
<img src="/vf/080923-212146/books/trans.gif" style="height: 15px; position: relative; left: -1px; top: 2px; background-image: url(http://zoomii.com/shapes/stars(7_-3_4282404960_4290488832_4294962688_4294967295$); width: 57px; background-position: 0px 0px;"/>
<img src="/vf/080923-212146/books/trans.gif" style="height: 15px; position: relative; left: -1px; top: 2px; background-image: url(http://zoomii.com/shapes/stars(7_-3_4282404960_4290488832_4294962688_4294967295$); width: 2px; background-position: -116px 0px;"/>
<a target="_blank" style="color: rgb(205, 222, 248);" href="http://www.amazon.com/gp/product/customer-reviews/1423101464?tag=zoomiica-20">(82 reviews)</a>
</div>
<div>Sales Rank # 170</div>
<br/>
<div>
<span>
In
<span style="cursor: pointer; text-decoration: underline; color: rgb(205, 222, 248);">
Bestsellers
</span>
,
<span style="cursor: pointer; text-decoration: underline; color: rgb(205, 222, 248);">
Children's Fiction
</span>
</span>
<br/>
<span style="cursor: pointer; text-decoration: underline; color: rgb(136, 148, 165); font-size: 8pt;">
(shouldn't be here?)
</span>
</div>
<br/>
<div>
<span class="Detail_price">$12.23</span>
<span class="Detail_notprice">$17.99</span>
<span class="Detail_savings"> (save 32%)</span>
(3 hours ago)
<div style="margin-top: 4px; margin-bottom: 7px;">
<span style="border-style: solid; border-color: rgb(64, 80, 96); border-width: 3px 2px 4px; position: relative; cursor: pointer; top: 0px; left: 0px; -moz-user-select: none;">
<span style="border: 1px solid black; padding: 0px 3px 1px; background-color: rgb(248, 248, 248); color: black; white-space: nowrap; position: relative;">
+ to cart
</span>
</span>
<span style="border-style: solid solid solid none; border-color: rgb(64, 80, 96) rgb(64, 80, 96) rgb(64, 80, 96) -moz-use-text-color; border-width: 3px 2px 4px 0px; position: relative; cursor: pointer; top: 0px; left: 0px; -moz-user-select: none;">
<span style="border: 1px solid black; padding: 0px 3px 1px; background-color: rgb(248, 248, 248); color: black; white-space: nowrap; position: relative;">
+ to wishlist
</span>
</span>
</div>
Usually ships in 24 hours
</div>
<br/>
<a style="color: rgb(205, 222, 248);" href="http://amazon.com/gp/product/1423101464?tag=zoomii-20" target="_blank">See this book on Amazon.com</a>
<br/>
<br/>
<div>Percy Jackson isn’t expecting freshman orientation to be any fun. But when a mysterious mortal acquaintance appears on campus, followed by demon cheerleaders, things quickly move from bad to worse. In this latest installment of the blockbuster series, time is running out as war between the Olympians and the evil Titan lord Kronos draws near. Even the safe haven of Camp Half-Blood grows more vulnerable by the minute as Kronos’s army prepares to invade its once impenetrable borders. To stop the invasion, Percy and his demigod friends must set out on a quest through the Labyrinth–a sprawling underground world with stunning surprises at every turn. Full of humor and heart-pounding action, this latest audiobook promises to be their most thrilling adventure yet.</div>
</div>
<img src="http://t1.zoomii.com/vf/080923-212146/books/nav_close2.png" style="border: 0px solid white; position: absolute; cursor: pointer; left: 920px; top: 8px;"/>
</div>
</div>