ecommr: e-commerce interface and design elements

Tom Sullivan has launched ecommr, a collection of screen captures of e-commerce design and interface elements. From product listing pages to e-mail newsletters, ecommr is a resource to view all of the individual pieces that make up the e-commerce puzzle. More info from his personal blog:

Working in the e-commerce field, I often find myself looking at other retailers to gather ideas on how to best present various elements of e-commerce sites. From design to information architecture, I find it fascinating to see how different retailers tackle the same problems in different ways. I’m often looking at different retailers and constantly looking for changes, no matter how small, and trends in e-commerce design.

I always wanted to see a site that broke down e-commerce stores into their different elements. I wanted a resource that would allow me to see the various ways retailers display their products or style their “Add to Cart” buttons. There are sites that break down general web elements (see: Elements of Design) and sites that highlight e-commerce design (see: Carted Up), but still no resource that broke down the individual elements.

Protonotes: HTML prototyping collaboration tool

Protonotes provides a service to allow teams to add notes directly onto html prototypes. Check out the video below for a demo. After you register the confirmation email provides a few snippets of javascript to put into your html prototypes to insert a menubar over the top of your site. The menubar provides controls for creating notes and can be configured to be unobtrusive.

five second test: A simple online usability test

The five second test is a simple usability test that helps you measure the effectiveness of your user interfaces by getting users to look at a screen for 5 seconds, and then asking them to recall what they saw. This is something I typically do at the start of a usability test to see what users understand at a high level. Show them a screen, take it away, have them talk, ask them questions. There’s more about this method at UIE. This site provides a service so you can easily do this kind of thing with users by generating a test and providing a link you can share with participants to take it. The service then emails you the results.

Axure Design Pattern Library

Loren Baxter has created an excellent looking set of design patterns for Axure users. The kit provides droppable interface elements for demonstrating rich interactions like editing in place, lightbox effects, video embedding, and a bunch more.

When I worked in a Windows only company, we used Axure and I loved how easy it made wireframing and prototyping simple interactions by just dragging and dropping. This tool kit will definitely make the job even easier. Axure users, this is not to be missed.


ProofHQ is a collaborative tool for reviewing creative projects such as photography and graphic design. The tool allows you to upload anything from a PDFs, PSDs, and JPGs to Word and PowerPoint files up to 75 MB. The functionality is a bit like a mashup of Flickr and Skitch. It allows users to annotate, mark up, and comment on the work. The art can be embedded into a web site with the provided embed code.