eBay

Lens

View item layer

Introduction

Dialog containing drill-down detail about an object. The object could be anything from an item for sale on eBay, a football team on a sports site, or an online news article.

The term 'lens' is a metaphor for holding a magnifying glass over an object for a more detailed view. We view the item through a lens, without leaving the current page.

Best Practices

Please follow dialog best practices.

Interaction Design

Please follow dialog interaction design.

Developer Guide

Our implementation follows the Progressive Enhancement strategy; we build in a layered fashion that allows everyone to access the basic content and functionality of a web page.

The three layers are:

  1. Content (HTML)
  2. Presentation (CSS)
  3. Behaviour (JS)

Content (HTML)

The goal of our content layer is to enable navigation to an item detail view. In our example, this item will be an eBay auction.

Identify Element

We will use a simple "View Item" link:

<a href="http://www.ebay.com/itm/221451251366">view item</a>

Widget Hooks

We add our classname:

<a class="lens" href="http://www.ebay.com/itm/221451251366">view item</a>

That's it! A good 'ol hyperlink is all we need, ensuring that our core functionality (viewing the item detail) is accessible to everyone. Who said progressive enhancement was difficult?

Presentation (CSS)

Please follow the dialog base-pattern presentation implementation.

Behaviour (JS)

The goal of our behaviour layer is to convert the basic hyperlink into a button control that will open our lightbox.

We construct the modal entirely with JavaScript. Please follow the dialog base-pattern content implementation for further details on the structure of the markup.

With JavaScript available, we no longer want the default hyperlink behaviour of navigating to a new page. So we must prevent the click event from performing it's default behaviour:

$link.on('click', function onLinkClick(event) {
    event.preventDefault;
});

Entity Parsing

Retrieving the item detail content from a REST API via AJAX is beyond the scope of this document, but one thing we should point out is that we already have access to the unique item id right there in the href attribute.

If anything else needs to be passed to the client-side plugin or REST API, we could store it as JSON in a data attribute. For example, if you wanted to pass the unique item id in this manner:

<a class="lens" data-lens='{"id":"221451251366"}' href="http://www.ebay.com/itm/221451251366">view item</a>

With our behaviour now complete, our link no longer behaves like a link. It is more like a button. ARIA allows us to change the semantic nature of our link element like so:

$link.attr('role', 'button');

Screen readers will now announce the anchor tag as a button, giving users a better indication that they will stay on the same page when the button is pressed.

Summary

The lens pattern does not deviate very far from the dialog pattern.

The key thing to note is that we use the principles of Progressive Enhancement and Hijax to 'hijack' the behaviour of the link with JavaScript to open a lightbox dialog instead of navigating to a new page.

results matching ""

    No results matching ""