1.5.0 Template Discussion

Daniel and Qphoria both of you are awesome, peoples loved these guys .

i can't wait the v.1.5.0 for more longer time, i hope days run faster..

I agree that there should be only one default theme. You provided the multi layered functionality which is awesome. But I can edit the image in Photoshop. You should provide some another image editing software to edit the image. This is one kind of limitation. Also it should be of W3C standard. Shortly I hope you will provide us some extra functionality with your software.

yes, i am also eager waiting for 150 vision,

for product parts, it's prefer add order history at the product bottom, so that the customer know purchase record and increase some buy confidence. for more b2b site which have this purchase order record, just like ioffer.com, hope it's useful for opencart, thank you.

b.rgds
David Wei

i hope increase more funtion like www.qvc.com

(Note: Seems my images appear cut off in this post...worry not, you can download them as attachments from the bottom of this post)

Daniel, thanks you so much for this - you are amazing! I am waiting for 1.5.0 with bated breath. Hopefully I'll finally upgrade from 1.2.9 to 1.5.1 :-) (I've been playing with every version in between, though)

Ok, folks, here's my stab at what the design could look like. I've spent a few hours putting this together, but if you were to say that it looks like sh*t, it would be hard for me to argue otherwise.

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 request you to ignore these shortcomings and look beyond the aesthetics.

Next, I am a designer and want to offer my expertise, experience and POV on the shop's design. Confused?

You see, 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 preamble, let me show off my stuff...I started with Daniel's awesome design, and have come up with this:

Homepage


TOP

I like the idea of putting links right up top. Several websites, esp. those requiring log in do this.
In Daniel's design, the links here are: Home, Bookmark, Gift vouchers, Wish list, Special offers, Contact us, Sitemap
I decided to use Welcome note, My Account, Wishlist, Contact your store, Help, Sign In. (Redundancy alert: clicking on userid take to My account too)
This group is broadly for functionality that is available upon login.
In addition, Help & Contact Us is also present there because we are so used to looking for help in top right hand corner that at any site our eyes automatically go there when we are stuck. So it's

important to provide help there.
As with all good websites, Login/Logout link is the rightmost.

• Home should be only in the breadcrumb. Also, clicking on the shop logo should take to home.
• Bookmark doesn't fit here.
• Special offers should only be a module
• A human readable sitemap is not required at the shop.
• I didn't quite understand what the Gift Vouchers link does.

Also, I have taken the language and currency and put them on top left - 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 the main area.
Also, if there are more than 1 languages or currencies available, we shouldn't hide them inside dropdowns. Put them upfront for all to see what's available.
No need to use longform text "Pound Sterling" or "English". For those users that need these options, currency abbreviations and country flags are sufficient.

Next, I've always found that the store branding banner is quite tiny.
So I use a full-width, 90px high banner. The one I used is white, but naturally shops could use colorful, photographic banners. Also, in my mind, admin can provide not just an image, but also a URL for this banner...for example when he wants to use a rotator script so that a new banner is shown each time the page is refreshed.

It seems that with this version we get progressive search - that's what I make of Daniel's design.
I have placed the search box in a layer over the store branding banner. Doesn't look very different from Daniel's version because my banner is white. But the intention if to present search box in the same way that Bing does: http://www.bing.com

I am so happy to see that Daniel is bringing in social elements (share) to OpenCart. He never ceases to amaze me!
I have moved the social buttons to make them more salient (more on this later).

Next, the big fight:
Daniel's version puts categories as a top menu. I am a big opponent of this. Here's why:

• This limits the levels of depth possible in category hierarchy....while 95-97% (made up statistic) OpenCart installations may be using only up to 3 levels of depth, it has a certain appeal for OpenCart to be able to say - unlimited levels of categories...
• BIG ONE: This limits the number of possible top level categories. Depending on how long the names of the categories are (in some languages, such as German these can be quite long), an admin can fit between 5 and 7 top level categories. This is nowhere near enough....I can almost see someone jumping in and telling me to reduce the number of categories....but guys, this is not a solution...many of us need more categories...by moving the categories from left to top, we are not only drastically redesigning the UI for users of many shops (who'll have to relearn) but also asking the admins to change the basic structure of the shop. This might have been workable like a bitter medicine, if it actually improved user experience in any way...but it doesn't. Please, it is not acceptable to limit the number of top level categories. You want to know why Amazon (who, presumably, is the inspiration behing the "Narrow your search" slider navigation) doesn't put categories on top? THIS IS WHY!
• Another BIG ONE: This limits the possibilities of integration. If an admin runs more than just a shop, and wants to have a similar "look and feel" across the domain, then a top menu hinders his ability to do so. As per numerous usability studies, when both top and left menus are present, top menu needs to be the consistent menu and left menu should be the contextual menu. Check out my website http://www.csillamvilag.com - I run a forum, photo gallery, shop, directory, website, calendar etc. I use a consistent top menu throughout the csillamvilag.com domain. The menus for individual software are usually placed on the left. If shop has its menu on top, I will be left high and dry. I doubt that I'll be the only one.
• Sliding/opening/animated menus are not 100% reliable. It can be frustrating when they don't work. It's fine in admin, and it makes tasks faster to have them - but if a user can't open the menu in one go, then we've lost the sale.
• Sliding/opening/animated menus are not good for older people, or those with motor problems.
• Not quite sure what Daniel intends, but seems like we will lose the ability to have description pages for highee-level categories (categories that have categories inside them).
• Truth is that product specifications and "Narrow your search" slider navigation works well if you are selling computers or cellphones or other technical products (esp. if you have 1000 products or more). But if you are selling books or DVDs or bodypainting supplies, then this is just a UI complication and admin should be able to switch it off.

So while I understand that it may be a cool, and a technical achievement to do it the way you have proposed, I beg of you, Daniel, not to move categories to top menu.

Next, I've removed the menu bar wth Shopping cart (moved right), currency & language (moved up), Home (belongs in bradcrumbs), Login, My Account (moved up), Checkout (moved right).

Breadcrumbs are very important navigational elements. Let's not lose them. In my version, I've kept the breadcrumbs.

LEFT

I've put categories menu on the left, as is in 1.4.9.2 While it may seem old and boring to the people who have been using OpenCart since 0.x, I assure you, this is best place for categories menu, from usability perspective. Also, hundreds of thousands, if not millions of our users have collectively gotten used to this way of doing things and we shouldn't change it unless there is a VERY COMPELLING reason. If you need persuading, try this http://www.humanfactors.com/downloads/mousemaze.asp

Below this, is the "Narrow your search" menu. Admin should be able to switch this off. (This won't appear on home page, but I'm writing here just for reference)

MAIN CONTENT

At the top of the main content area, I place the social icons. These, I think are in order of usage: E-mail, Twitter, Facebook, Reddit, Digg, Stumble Upon and Del.icio.us Each button shares the specific page.

I like the wide banner that Daniel has put in his design. Looks great.
So, I took it to next level, and put a jShowoff (http://ekallevig.com/jshowoff/) slider there. It is great! Can contain anything from pictures to text to HTML code. My thought is that the slider should contain the Featured Products AND/OR anything else that the admin specifies. (No title/header though)

Next, I've put the "Shop Description/Introduction" as present in 1.4.9.2. (No title/header though)

Next, I bring in a big redundancy. I make this sacrifice at the altar of "ease of use" and consistency. Just like we have subcategories on category pages in 1.4.9.2, 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 (e.g. Latest Products, Special offers, etc) that the admin has placed in center. I have missed this out in the image, but at bottom right corner of each module should be a link for "More".

RIGHT

First, a BIG, FAT button for CHECKOUT. This is the most important task in the cart. We don't want to hide it somewhere as a tiny link.

I was so gravely disappointed to see that in his version, Daniel has removed the cart from the right column. It is one of the best things about OpenCart - that at any page, user can see the cart and what's in it - incomparable transparency!
In my version, I have included a module for the shopping cart. To the left of quantity is a red '-' button, clicking on which reduces quantity by 1 unit, on the right is a green '+' button which increases quantity by 1 unity. Clicking on product name takes to product's page. There's a good sized BUTTON for View/Edit Cart. Hmm...I guess, I am influenced a bit by Amazon, after all...

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

The caraousel for manufacturer logos is a great idea. I've copied it outright.

I also like that information pages have been moved to the bottom. However, I found that some of the items in Daniel's design could be removed, regrouped, or repositioned.
In my version, I've used the following information pages in left column (no title): About us, Shipping rates & terms, Privacy Policy, Terms & conditions, Resellers & affiliates. I've missed it in the image, but I'd also like to include Loyalty rewards scheme details.
I've added a column for RSS updates.
And finally, I've put icons for payment types accepted by the shop.

• Account items are in one place on top right of the page.
• Contact us is on top right, Track orders, Wishlist are inside my account.
• Returns policy is in terms & conditions
• Sitemap is not needed.
• Affiliates list has been moved to first column
• Special offers is a module.

At the very bottom, of course, are the usual Paypal icons. But I've also made provision for any additional icons (e.g. BBB accreditation) that shop admin may want to add. I hear you when you say he can add these to the template, but really, we should make OpenCart more and more for non-technical people, and this simple thing should be incorporated in admin...this is content and its display shouldn't be dependent on template.

Product page


TOP
Same as home

LEFT

Same as home.

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, just like in Daniel's design.
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.

below that, caraousel of product images. Clicking on these zooms into that image.

On right, I've expended much less space than Daniel on Brand and SKU. Clicking on Brand name shows manufaturer/brand page...with all products on shop from that manufactuer/brand

In price, It's important to show the savings.

The product options, quantity and big Add to Cart button go together. Please keep the current animation where product photo flies into the cart - this is not superfluous animation, but a very strong visual feedback cue for the action.
Add to wish list and compare can be small links (Compare would be available only if admin hasnt switched off specifications)

Next block shows product's rewards point. Right next to it link to popup the rewards policy.
Within same block, shipping time and link to popup shipping rates and T&Cs.

Next block contains ratings and links for reviews. 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. Specifications can be switched off by admin.

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.

Under this is provision for a Youtube video (no title). In 1.4.9.2, admin can embed YouTube videos by editing product description code. However, the request inherent in my design is that in admin panel there shall be a field where admin can enter youtube video ID, and the video shall be embeded automatically by OpenCart.

Next, the reviews.
These can be sorted by Language A-Z, Language Z-A, Rating High-Low, Featured reviews first, Date Oldest-Newest, Date Newest-Oldest.
Reviews are also paginated within the products page....each product page has 5 reviews per page (configurable by admin). To read more reviews, user needs to navigate using teh arrows and page numbers at the bottom of the last review on page.
Clicking on reviewe name shows all reviews written by him/her.
Reviews can also be "socialized"...a direct link to the anchor for the particular review is shareable....

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.

RIGHT
Same as home

BOTTOM
Same as home

I know this was a very long message and don't blame you if you went tl;dr. But this is what happens when one wants to discuss specific interface elements.

I tend to agree about the categories moving to the top. I see this limiting quite a few shops. I would at the least like to see it as an option top navigation or left navigation.

I think you greatly underestimate the text field filtering. If you consider that it will be very easy to call it something other than specs it becomes useful for many, many, many shops even if it's not useful for yours. I don't really agree with removing the tabs. The templating system makes it easy enough to do that if you really want to, but there is soo much information on the product pages you need to hide some of it or you end up with extremely long pages like yours and me personally I will navigate away from it before I get halfway down the page unless I really want the product and really want to buy it from your store.

Xsecrets wrote:I think you greatly underestimate the text field filtering. If you consider that it will be very easy to call it something other than specs it becomes useful

That's possible. Maybe I haven't understood it well. Could someone explain the whole deal?

Xsecrets wrote:I don't really agree with removing the tabs. The templating system makes it easy enough to do that if you really want to, but there is soo much information on the product pages you need to hide some of it or you end up with extremely long pages like yours and me personally I will navigate away from it before I get halfway down the page unless I really want the product and really want to buy it from your store.

Well, then you'd be one of the very few people who naviagte away. We have done several usability exercises comparing tabs to long layout....as it turns out, 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!

Hey, you don't have to take my word for it. But self-referencing is not always very productive. Why don't you put it through a test - create 2 templates - one with and one without the tabs, and in Google Analytics put them through Website Optimizer. And let's talk again in 1 week.

sooskriszta wrote:

Xsecrets wrote:I think you greatly underestimate the text field filtering. If you consider that it will be very easy to call it something other than specs it becomes useful

That's possible. Maybe I haven't understood it well. Could someone explain the whole deal?

basically they are additional text fields you can add to your products. can be anything in a book store might be isbn and author and publisher whatever you want. then you have the ability to filter through all your products by any combination of those options. so a person could click on author and see a list of books by that author then click on one of the listed publishers and filter the books by that author from that publisher. it has great potential for pretty much any business. You can call it filter options if you want instead of specs.

Xsecrets wrote:I don't really agree with removing the tabs. The templating system makes it easy enough to do that if you really want to, but there is soo much information on the product pages you need to hide some of it or you end up with extremely long pages like yours and me personally I will navigate away from it before I get halfway down the page unless I really want the product and really want to buy it from your store.

Well, then you'd be one of the very few people who naviagte away. We have done several usability exercises comparing tabs to long layout....as it turns out, 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!

yes and it's one of the things I hate the most about Amazon. I would love it if they had a tabbed interface. Even though you can get to the reviews by scrolling for 5 minutes I usually use the link. I only go to amazon for anything because I know they have pretty much everything and usually have decent deals and free shipping. If they weren't an established business I wouldn't use them at all, and I know I'm not alone on this one I've talked to many people who feel the same way and seen many posts online as well. I can't tell you how many usability reports I've read that tear amazon apart on usability.

Hey, you don't have to take my word for it. But self-referencing is not always very productive. Why don't you put it through a test - create 2 templates - one with and one without the tabs, and in Google Analytics put them through Website Optimizer. And let's talk again in 1 week.

Xsecrets wrote:I can't tell you how many usability reports I've read that tear amazon apart on usability.

I agree, Amazon is not really the shining light on usability. But on the tabs thing, I've run tests myself - I used to think tabs are better...not anymore. Try it for yourself! http://www.google.com/support/websiteop ... swer=61201

WOW sooskriszta, you worked really hard on that. A clever and detailed analysis.

I agree with the section you begin with "Next, the big fight.." - Some people do like the categories in the top menu, so maybe it should be an admin configurable option. But it could reduce flexibility for many shop owners. For example, our numerous categories are already split into 2 boxes with Q's category clone mod. This would be impossible if confined to the top bar.

I also take your point about theming/integrating across different web functions, and the potential issues with dropdown animations. I had a great animated menu option for categories on the current theme, but was advised to drop it because not everyone has the same level of patience/ dexterity. There is nothing worse than a menu option 3 levels in, which keeps disappearing because you are a bit uncertain with the mouse

Just my 2p worth.

Xsecrets wrote: If they weren't an established business I wouldn't use them at all, and I know I'm not alone on this one I've talked to many people who feel the same way and seen many posts online as well. I can't tell you how many usability reports I've read that tear amazon apart on usability.

I'd love to see some of those 'anti-Amazon' usability reports, for fiendish reasons of my own

Xsecrets wrote:

sooskriszta wrote:

Xsecrets wrote:I think you greatly underestimate the text field filtering. If you consider that it will be very easy to call it something other than specs it becomes useful

That's possible. Maybe I haven't understood it well. Could someone explain the whole deal?

basically they are additional text fields you can add to your products. can be anything in a book store might be isbn and author and publisher whatever you want. then you have the ability to filter through all your products by any combination of those options. so a person could click on author and see a list of books by that author then click on one of the listed publishers and filter the books by that author from that publisher. it has great potential for pretty much any business. You can call it filter options if you want instead of specs.

Aha! As I thought, not very useful for books or other products of the sort. Don't get me wrong - I totally get the value of this for laptops, mobile phones, or motor parts. All I want is an option to turn this off.

Even-tough I know you spend a lot of time on analyzing the way a template should be build, personally, when looking at your template there is to-much noise.

With that I mean that there is so/to much info on such a small field that it will overwhelm a customer so that he/she will get scarred and move away.
There is just so much info you can give that a customer can handle and websites/web-stores tend to drown a customer with information.
Keep it clean and simple, don't overdo it please!

I agree that there is a lot. But please note that I was trying to emulate a real life situation...what if the admin adds 2 modules to main content area (each with 8 products)) and 2 to right column (each with 5 products)....I didn't want to just place 1 or 2 products there so that the template would look neat and clean now but messy in real life.

I agree with you, the noise should be reduced. So I would hope that the admin would actually not put more than 1 module in main content area (with 4 products) and even if he puts 2 modules on right that these will have 2 or 3 products each....if you make these changes, you will find that suddenly the template looks much cleaner...in fact, this has nothing to do with the template, but rather with how it is used...



The other thing that make it look like there is not a lot of breathing space is that I have used 14-pixel font. This should certainly be remedied

sooskriszta wrote: Aha! As I thought, not very useful for books or other products of the sort. Don't get me wrong - I totally get the value of this for laptops, mobile phones, or motor parts. All I want is an option to turn this off.

funny every single book store I've ever done on any platform they wanted to add a product field for isbn and author and publisher, so I don't really see how you can possibly say it has no value for a bookstore.

Xsecrets wrote:every single book store I've ever done on any platform they wanted to add a product field for isbn and author and publisher, so I don't really see how you can possibly say it has no value for a bookstore.

Yeah, and I'll be fine having fields for those. But only 1 simple search on top. If I search an ISBN, all I need is 1 book product page, not the monster on the side. If I search for an author, I want a list of books written, without the monster on the side. As for publisher...ehh...don't care much about it...fewer than 0.0001% of the queries are publisher names...

I hope that all the proposed solutions will be included in the new version.

Personally, I really liked the design (outside and very inside) in the CS-cart, of course plagiarism is not needed, but many interesting points can be used.

I'm not saying that....but interesting article....

http://www.useit.com/alertbox/familiar-design.html

Jacob Mr.Usability Nielsen wrote:Why Insiders Want Fresh Design

You stare at the thing all day, years on end. Of course you think the UI looks tired. Count the number of "exposure hours" you've had to your own design. If you've worked on the same design team for a few years, those hours likely reach into the thousands.

In contrast, your typical user has probably spent only a few hours looking at your design over the last few years.

Jacob Mr.Usability Nielsen wrote:Why Users Want Familiar Design

The most important reason? Users don't care about design for its own sake; they just want to get things done and get out.

Thus, people love a design when they know the features and can immediately locate the ones they need. That is, they love a familiar design. In fact, anytime you release a redesign, prepare for a flood of angry email from customers.

People who regularly use a UI become experienced users and their user experience is dominated by skilled performance. ...The more that people rely on skilled performance, the more they depend on having routine behaviors automated. Thus, high-frequency users also prefer a familiar design.

Jacob Mr.Usability Nielsen wrote:When To Refresh Designs Anyway

Generally, it's best to evolve a UI with gentle changes rather than offer a totally fresh design. I thus strongly recommend getting the basic design right in the first place, before you launch, so that it can live for several years with minor updates.

Still, there are two cases in which a more radical approach is appropriate:

• If you have almost no current users and expect a major design improvement to dramatically expand the user base. In this case, the business loss from punishing your current customers is small enough to be worth taking. Of course, it's still a gamble that you'll actually be able to attract a vastly bigger audience. Remember the old adage: a bird in the hand is better than two in the bush. Unless you're sure that there are millions of users in that bush, you might not want to go there.
• If your old design has incrementally evolved for so many years that the overall user experience has become overly convoluted and lost any sense of a unified conceptual structure.

I'm not saying that....but I'm just saying...

oliverker wrote:Hey, (first post)
So... My thoughts are that I'm going to be creating my own templates so love the ease of editing them how they are now and hope that isn't going to change.
Thanks Oliver

Agreed. Please no more extra div fluff, and mindless amounts of numbered divs for menu items. Use an unordered list Also, less tables! There are so many tables in the current default theme that make no sense. A table of buttons?

A table of shopping cart items with proper headings, DOES make sense.

A table for products in a category is questionable. I usually think of it more as a LIST of products in a category. Thats up for debate, though.

I know that a lot of the extra divs were for pretty rounded corners, and you're probably been hammered about this a lot. Something coded several years ago is obviously going to look a bit "meh" compared to todays standards. I just see so many theme authors restyling the existing default template and passing it off as a "new" theme, thus creating more bad habits. Maybe if they have a good role model this will stop! It also leads to MODULE authors using the same style of "top" "middle" "bottom" divs for the view for their modules, when I think they should just use their own classes. (I have to rewrite the template files for EVERY module, instead of just adjusting their own classes because the classes they use from the default template make NO sense).

The screenshots do look lovely, though.

Daniel, Q or development team please remember this in product page:

previous [1 of 10] next

(is a pain right now move between products in each categories) PLEASE

And once again: Megamenus are a great idea, but may not be suitable for many existing carts...so please retain an option of having *legacy* left menus...