Steven JohnsonPremium Concept

Ecommerce Product Page - Usability

By Steven Johnson

   on Aug 27, 2010
4 Reviews0 Votes0 Favorites314 Views
new

This concept is a new version of an older concept. View Old Version

Concept Reviews

  • Joel Glovier

    Joel Glovier

    Rank: 1 Elite

    CF Verified professional

    3698

    • Design: 4
    • Purpose: 3
    • Originality: 4
    • Engagement: 4
    1 Vote
    This review has been awarded.
    Hard to say...

    Posted on Aug 29, 2010 at 2:43 PM

    OK Steven, here's the deal. I think you have a particular challenge in creating a great design for an commerce technology site like this. It always is - it's just the nature of the content. But you've done a really striking job with what you have - honestly.

    Here's some thoughts...

    1. I like how you've handled the header. On such a site the header is arguably the most important design piece. And you've done a great job of keeping it well designed and well structured. It doesn't feel overly crammed with info, and you've done a good job of presenting the info in a clear fashion. I really like it.
    2. I'd be interested to see more examples of your design for the site, like the site homepage, a list page (page that lists multiple products), a checkout page, etc. It's hard to give much feedback with only one example page.
    3. I really like your call to action area. It stands out well, and I like how you've reserved the use of the color green for key visual areas of the site.
    4. I think the description area is a little large. Honestly I think you should reduce the font size and make that description area take up less screen real estate. As is you are risking the visitor getting lost in the description and never engaging with the purchase elements. I think you could cut it's size roughly in half by using two columns, and a font size 2 - 4 points smaller.
    5. Footer looks excellent. Very simple but contains the relevant info for users. And aesthetically it's a treat. Good Job!

    To reiterate, see my notes...

    Notes Added to Images   View

    • stormtek-productpage.png
      • 1great job on the header

      • 2breadcrumb is good

      • 3photo treatment?

        You could do something more with your photos like a white background with 3 px of padding, then a 1px gray border.

      • 4Awesome

        I really like how you've handled the call to action. The button is gorgeous, the whole div stands out apart from the page well. Excellent!

      • 5This is too big

        Reduce the screen real estate of this discriptive area by 25-50%. Use smaller font-size (honestly you could use 12px font size here) and split info into columns to make max use of the screen area. And use text-align justify. You just don't want the user to get too lost in the description that they don't buy the product.

      • 6Add another call to action button down here

        Your call to action statement here is not good enough. It's honestly close to worthless unless you have a link to actually click here here. I would suggest just putting another instance of your call to action button down after the description.

      • 7Nice work on the footer

        Not too much, not too little - just right. :-)

    • Ben Gillbanks
      Ben Gillbanks commented:
      Posted: on Aug 30, 2010 at 1:46 PM

      I disagree with point 5 about using 'text-align:justify;' - the rest of the point is valid :)

      Justified text looks great in printed media where things can be controlled, but doesn't work so well online. Some interesting reading on it here: http://www.webtypography.net/RhythmandProportion/Horizontal_Motion/2.1.3/

      All that said, it is an opinion and not a fact, so it may work with your website. The only thing to do is try it and see what you think.

  • Abhishek Kumar

    Abhishek Kumar

    Rank: 1 Elite

    4957

    • Design: 3
    • Purpose: 3
    • Originality: 3
    • Engagement: 3
    1 Vote
    This review has been awarded.
    a few things..

    Posted on Aug 30, 2010 at 8:53 AM

    this is so much better than your previous version.

    • what this 'reviews' link is for, is that the product review or some kind of testimonial.. if that is the product review, that link should be part of the product page as the body content.
    • FAQ nav link should be the last one
    • if someone is already logged in, you might wanna show his name on top with his basket.
    • at bottom of the screen, instead of saying 'buy your own .. by clicking the add to basket button above' - simply, provide a button there too, which does the exact same thing what the top button would do.
  • Ben Gillbanks

    Ben Gillbanks

    Rank: 2 Titan

    2066

    • Design: 3
    • Purpose: 4
    • Originality: 2
    • Engagement: 3
    1 Vote
    This review has been awarded.
    Pretty good

    Posted on Aug 30, 2010 at 1:33 PM

    This is quite a nice store page I think. There are some areas I would look at improving though.

    The biggest thing that jumps out at me is the line length in the descriptive text. I would shorten that maybe making the column the same width as the image and increases boxes. You could then shift some of the content into a right hand sidebar that sits underneath the 'price and add to basket' box. The new sidebar could include guarantees, testimonials, and related products.

    Things that will either a) increase trust in your service (guarantees, testimonials etc) or b) show people who are not sure, other products they might be interested in.

    A few of the smaller things i would consider are:

    • make the 'add to basket' button more 3d. Maybe add a basket icon to it
    • increase the line height in the descriptive text area
    • consider adding another add to basket button at the bottom of the page (replacing the text that says to use the button above)
  • David Hobbs

    David Hobbs

    Rank: 1 Elite

    187

    • Design: 3
    • Purpose: 3
    • Originality: 2
    • Engagement: 3
    0 Votes
    Consistant Widths

    Posted on Sep 04, 2010 at 4:35 PM

    Nice clean design but I'm a niggler for consistant layouts. If the widths are consistant and line up on the left, then the same should be said for the right but not all elements are aligned. Striving for pixel perfect.