Default theme - Suggestions

[OC2PS]

I am considering moving to PS soon, and so far I love it.

There are a few suggestions I have for the default theme, though:
1- Place header-right above header-logo
2- Remove tabs (reviews etc)..place most things on same page...only extraneous things like technical specifications should be in tabs.
3- More concentrated mass of information to right of product image


In detail:
Please note that I drew up the sample designs very quickly and am not a designer so they may look like cr*p...please focus on the items discussed and usability, not on the aesthetic design.

You see, I am not a designer - I may have misaligned things, used wrong design elements, used colors that don't go together, used colors that don't look good, used ridiculous font sizes, etc. Also, rather than use only 1-2 sample products in modules, I've populated them to get an understanding of what the design would look like in real life - a designer would never do that....(s)he'd want the design to look clean and neat. So, I humbly once again request you to ignore these shortcomings and look beyond the aesthetics.

I've managed UI for many years at huge Internet portals. While for a layperson, design is design, for professionals, there's 3 different stages:
1. Functional design
2. Usability design
3. Aesthetic design

Hopefully, the names are self-explanatory. Functional design is something on which UI designers and developers work closely together. Usability design is solely UI expert's domain. Aesthetic design is the 3rd stage and is what "designers" or "graphic designers" do.

What you see here in my designs is what I would pass on to a graphic designer to actually create a "design". While I know how many colors to use from an efficiency perspective, or which colors are more soothing to the eye, the graphic designer knows what looks good.

After quitting my job as head of usability/UI, I started a career in marketing and have amassed some expertise in this area over the last decade or so. I've tried to create a balance between the two (often contradicting) objectives of usability and (instant gratification) marketing, and in creating the following designs, have generally tried to follow the following principles (in no particular order):
* Increase the proportion of data ink to non-data ink (don't use 5 words, where 2 will do, minimize redundancy, etc)
* Group similar things together
* Make important things salient
* Move infrequently used items out of the way
* Don't hide functionality
* Always show where the user is (in terms of navigation)
* Use simple language (be esp. careful with this - some words may seem common, everyday to you, because of your profession, environment, and yet they may not be meaningful to all your customers)
* Use action words (invite action)
* Be consistent

With that, let me get on with it directly...

Home page

Top
Move header-right to above header-logo, so that there's space to put a proper banner as logo image.
A single line for languages and currencies seems better. For currencies, I used codes, but I think symbols (as PS currently uses) are better.
if the shop behaves properly, these are not elements that one would expect a particular customer to use again and again, so they can be moved out of focus.

Main content
At the top of the main content area, I place the social icons.
Next, a wide banner slider based on jshowoff http://ekallevig.com/jshowoff/
Next, I bring in a big redundancy. I make this sacrifice at the altar of "ease of use" and consistency. I've put top-level categories on the home page, complete with thumbnails et al. Note how the categories are visually differentiated (not just separated) from the products (in the modules)....e.g. categories are in boxes.

This can be followed by modules

Right
First, a BIG, FAT button for CHECKOUT. This is the most important thing on the shop.

Below the cart can be modules (bestsellers etc.). I've missed on image, but in the module, between product image and price should be product rating stars. At bottom right corner of each module should be a link for "More".

Bottom
caraousel for manufacturer logos


Product page

Left
However, in the left menu, you can see how categories are "opening up", and the categories that are traversed through to reach the current page (i.e. ones that appear in breadcrumb) are marked in a different color...okay, so I may have used a sh*tty color, but the idea is simply to differentiate these buttons from the rest.

Main content
Product name in H1 on top, followed by social buttons just like home.

On left, big product image, like current.
Below the image, a caption (product name by default...but changable by admin for each image)...this is EXTREMELY important for image SEO in Google.

On right, in price, it's important to show the savings.

The product options, quantity and big Add to Cart button go together. Animation where product photo flies into the cart - a very strong visual feedback for the action.
Add to wish list and compare can be small links

Ratings and links for reviews also belongs on top of page. If no reviews are available, then the "write a review" link text reads "Be the first to write a review".

Under this is the product description (no title).

This is followed by a link (no tabs) for product specifications.

I have removed tabs because all that tabs do is hide information, which is not a good idea. Sales information (e.g. reviews and related products) should be front and center.

Finally, now that we are done with this product, we see related products. I've renamed this to "You may also be interested in". I've used a caraousel for this just like the one for product images and brand logos.

[OC2PS]

I have removed tabs because all that tabs do is hide information, which is not a good idea. Sales information (e.g. reviews and related products) should be front and center.

Additional photos and reviews are a huge factor in online shopping decision making. And related products are a very powerful tool for cross-selling. But research shows that customers don't seek them out. If they are put front and center, they have an impact. I don't like everything Amazon does, but have you seen the length of their pages? It is only rivalled by the numbers in their bank account!

http://www.useit.com/alertbox/scrolling-attention.html

Scrolling beats paging because it's easier for users to simply keep going down the page than it is to decide whether or not to click through for the next page of a fragmented article.

the fact that users scroll doesn't free you from prioritizing and making sure that anything truly important remains above the fold...users will scroll below the fold only if the information above it makes them believe the rest of the page will be valuable.

http://www.usabilityinstitute.com/articles/amazonnewmodel.htm

Single-page ("one long page") design has always (!) been the right design for a lot of situations. Slow modems just meant it had to be used very carefully. Since the advent of RealAudio, which I think introduced the concept of "[spam-filter]," I've been begging for [spam-filter] code and every other form of content. Now that it's here, whether with Ajax, broadband, or any other technology, scrolling in a single view has a lot of benefits, not least of which is printing a whole topic in a single action.