BillKnow.com

Shopping Carts Gallery: Examples and Good Practices

Imagine that you are designing an online-store. Since stakeholders are only interested in the number of sells, the success of your work directly depends on how well you manage to drive users to the “Checkout”-button. In this case you might want to consider some design approaches which will set you apart from your competitors. After all, the probability that they’ve done it wrongly is extremely high.

One of the simplest examples of flawed design decisions is the incorrect use of the shopping cart icon — a traditional icon which stands for the virtual holding place for any products of the store. Used properly, this little yet powerful element can help users to buy a product as quickly and painless as possible. As such, it is essential for the purchasing procedure and therefore deserves to be considered carefully during the design process.

An unusual view of the shopping cart, a huge shopping bag accompanied by a mascot.

In this post we present attractive, creative and user-friendly shopping carts, bags, trolleys, buckets and baskets — any kind of carts as they are used in the online-stores. Besides, we also cover related creative ideas, design approaches and usability guidelines.

But simple text link is enough, right?

Yes, sometimes. However, in many cases it depends on what kind of products the company or store is going to offer. If the company is going to sell screwdrivers, colorful shopping bags are probably not the best option for the shopping cart icon. In such cases a clearly visible text link might be sufficient. However, if you’d like to attract customers’ attention in a shoes store, you might be better off with some slightly more attractive design elements.

Landsens uses a simple text link for the shopping cart functionality. It’s one possible solution, but probably not the most effective one…

…however, sometimes a text link can be enough.

In both cases the question of how subtle shopping cart functionality is presented is the question of the store design. Shopping cart and checkout-icons have the most significant function for both customers and store owners which is why it requires a thorough design decision. And if there are effective replacements for boring text links then why not use them?

1. Attractive shopping carts

Quite often designers tend to design shopping carts in an attractive way, preferring visually appealing elements to standard trolley icons. It’s interesting that most stores which specialize in products for woman shopping carts look much prettier compared to computer electronics stores. The purpose is quite clear: shopping carts are supposed to motivate users into buying the products.

In most cases designers limit the shopping cart to its primary function — to stand for the virtual holding place for any products a customer selects from the online store. However, in some cases shopping carts are more informal, look similarly to real shopping carts and try to communicate emotions.

2. Shopping carts can improve usability

From the usability point of view it is better to offer users a brief but complete overview of the ongoing shopping process. The basic reason for that is that users can verify that the system works properly and they’ve interacted with the system properly.

In order to achieve that, shopping carts can be combined with further functionalities of the store. Since users expect the shopping cart in the right-hand side at the top of the page, it might be reasonable to include further options near the shopping cart and thus encapsulate the whole shopping process in a compact and always visible site element.

E.g. it might be useful to

• provide customers with the information of what is inside the shopping cart,
• indicate the minimal requirements for successful ordering,

  

• how much the products placed there cost,

  

• put a link to the checkout-section which might help users to finish the shopping process immediately,

  

• inform about the possible payment options,

  

• offer some help in case users have lost track of the process.

  

Providing this information immediately, a store offers users a permanent overview of the shopping process. It saves visitors a number of clicks, so they can better focus on the choice of products they prefer and feel more comfortable navigating the store.

3. Shopping cart supports the content

Shopping carts can also be used for the simple purpose of illustration. Instead of using them in the header of the online store, designers place them right into the content — e.g. in the description of a given product. Apparently, often it works as there are many examples of where this approach is used throughout the site.

Shopping cart supports the content: Bigw uses the trolley both in the header and in the headings of its store pages.

A “traditional” design: the shopping cart is often placed right to the “Add to a shopping cart”-link.

4. Subtle use of shopping carts

Just as shopping cart is sometimes visible at the first glance, sometimes it is designed in a rather subtle way. This is a first option to consider if you are about to design the store with a rather unspectacular profile. Let’s take a look at some examples of how this can be done.

Being subtle, shopping carts can also be highlighted with a distinctive color which sets it apart from the overall design of the site and makes them more recognizable.

5. Creative use of shopping carts

Apparently, shopping carts don’t necessarily have to look like a traditional shopping cart. From the users’ perspective that might be not the best design decision to use as it should be immediately recognizable and memorable. Nevertheless some designers tend to choose creative approaches.

A shopping cart which looks like a… shopping cart. You can also place multiple items in it.

Dynamic shopping cart on Hqman

6. Shopping cart is embedded into the logo

Sometimes designers tend to integrate the shopping cart into the logo of the store. In many cases the colors used in the logo then are also used for the shopping cart icon throughout the online-store.

7. Shopping Cart Gone Wrong

Although it is quite easy to follow the basic guidelines of the shopping cart design, many (way too many) web-sites often make the very same mistakes:

• the shopping cart icon is not clickable,

  

• the shopping cart icon is difficult to recognize,

  

• the shopping cart icon is difficult to find.

  
  Although the shopping cart box is on the right place and is being highlighted with the green color, it is so heavily overcrowded by other elements that it’s really hard to focus the attention on it.

Shopping cart: where to place?

Traditionally shopping carts are placed on the right-hand side at the top of the page. Over years users got used to this convention as they could see it over and over again on a number of online-stores. However, as the height of the box may grow with the number of selected products, sometimes it may become necessary to prefer a vertical placement of the cart box to the more usual horizontal orientation.

In such cases the shopping cart is often placed in the right-hand sidebar. In both cases the position of the shopping cart should remain consistent on all pages.

Further galleries of shopping carts

Few months ago Jason Billingsley has collected 107 Add to Cart Buttons of the Top Online Retailers. These little, rectangular, sometimes colorful clickables connect the product to the shopping cart and are an extension of your branding. It’s important to put some thought into what your “Add to Cart” icon looks like in your shopping cart.

Shopping Cart Icons were collected by Ro London few years ago. In his opinion using bags is better than using carts.

淘宝UED团队

http://ued.taobao.com/blog/

向他们学习~

微软亚洲研究院 电脑对联

http://duilian.msra.cn/app/couplet.aspx

 挺有意思哒。。

开发人员经常犯的8个设计错误

From :ued.taobao.com

设计师在抱怨开发人员不尊重Web标准，后台开发人员在抱怨为什么不可以增加一个空格。PM在抱怨为什么项目总是因为那些看似简单的问题而延期……如何才能提高后台开发人员与设计师以及前端开发工程师的合作效率？相信很多网站或软件开发公司都越到类似的问题。

从UED的角度而言，我们的天职是追求用户体验。我们应该尽力坚持自己应该坚持的东西。白鸦曾经说过，用户体验不只是UED的事情，而是整个开发团队乃至整个公司需要参与的事情。

我们不能只是抱怨，我们去理解开发人员。同样，我们做出努力，让开发人员去理解我们。

我们努力去先做出改变。（小马按语）

原文地址： 8 Web Design Mistakes That Developers Make

一个优秀的网站是优秀的设计和优秀的代码的结合，你经常发现设计师不得不去理解代码，而开发人员尝试自己去设计。 开发人员花费大学生涯和与其他开发人员一起学习，我可以肯定的说程序员并不是设计师。谢天谢地，我们以前可以评判代码是否重用或者符合正确的OO方法论，但却无法评判美学。 但现在，一个开发人员最值钱的资产就是他对设计的敏锐的理解。

 

 

现在据我所知，程序员可能从不需要任何设计的知识（或者说，设计师从不需要了解程序）。但事实是，每一个拥有个人项目、少量客户或是管理角色的程序员都需要设计。甚至，我可以说，显而易见，一个自由工作者最大优势就在于，培养潜在的客户让他们渴望理解整个网站的建构过程。所以一个人正在学习做一个开发人员的同时，也需要学设计（至少尝试去做），以下就是我曾经听说或者犯过的8个错误。
< ![endif]–><!–[if !vml]–><!–[endif]–>
“我知道什么看起来很好（我有photoshop）”

这是成为差劲的设计师的原因之一。更无可救药的是本来就很差劲了，还以为自己很好。每个好的设计师都有一个度量好设计的“设计标准”，这个经验来自于自己经常看好的设计。你需要把时间花费在看伟大的设计上，诸如TheFWA, FaveUp, Design is Kinky, 和我个人喜欢的 Behance Network 这些网站。你可能也知道如何去挑选设计杂志，比如How或者print（注意两者并不都是美国的，可能更加国际化一些）。就像好的程序员喜欢看（或评论）其他人的代码一样，好的设计师也总是环顾他人的工作成果，无论是站点、广告牌还是菜单。没有一个好的“设计标准”，即使有大量的photoshop滤镜也拯救不了你。

“一再地使用蓝色和白色”

大多数程序员嘲笑一个设计师总是花费大量的时间来为站点挑选精确的颜色。但是，颜色总要比你想象中还重要，并且你不能在站点构建的时候来更改（至少，那时候就不得不花费大的气力）。象很多事物一样，观察一个好的设计师的配色方案是很有帮助的，寻找配色方案最好的一个站点是COLOURlovers.

“我把每样东西都居中”

大多数情况下，将标题、标语和副本的一部分居中很自然。但是通常，将网页上的文字居中就很外行了。左对齐是很保险的做法，但往往最好是视情况而定。更好地是，在photoshop中利用标尺和网格精确地计算你网站的各个部分。这并不意味着你的设计像格子一样，但是眼睛可以注意到理应被排成一行的几部分却没有这样排列的情况（特别是文本）。每个像素都很重要。
< ![endif]–><!–[if !vml]–><!–[endif]–>
“使用免费的字体…它对于我来说看起来不错”

我曾有一段时间这样想：（a）所有的衬线字看起来都一样（b）没有任何字体值得付钱。我现在把这两条都废除了，去继续学习更多的字体知识，那是一个复杂而美丽的世界。坦诚地讲，如果有一个领域我能成为专家，我希望是字体。你可以只用一点颜色和不错的字体来建立伟大的站点（这只是任何伟大设计的基础）。再次申明，在字体方面要做得更好，需要你多阅读好的站点培养你的眼睛。

“我们可以在那里放置更多的信息”

在拥有程序员和设计师的团队里工作，两者间一个普遍的争论是“空间的利用”，程序员想在页面明显的位置放置尽可能多的信息。设计师争论道，眼睛不可能承受如此多的东西，最好只是在明显的位置只放置logo和标语。尝试去找到最佳的平衡，需要知道（a）杂乱的网站可能没有效果（b）留白不是设计师偷懒 （c）被称作“空”的部分是很必要的，以便突出其它元素。

“我可不想为照片付钱”

槽糕的图片或照片可以毁灭一个合理的网站，同时经过简单处理的伟大图片可以看起来很好。在网页上那么多的资源，没有理由使用差劲的图片。对于非营利站点而言，可以查看stock.xchng 或 Flickr。对于商业的站点，有许许多多的站点，比如iStockPhoto（但是需要了解版权的知识，因为不久后，你可能在其他站点上看到同样的照片了）。最后不要为在诸如Veer这样的站点上找到完美的照片而花费大笔的钱吓坏了。

“我无需询问意见”

更多地询问而不是闭门造车，你会成为你们设计师的最大粉丝（尽管你戴着一副玫瑰色的眼镜）。你需要询问你认识的设计师，以便得到坦诚的评价。不幸的是，我知道大多数被我问过的人，都只是赞誉而非批评。所以让你的自尊滚一边去吧，戴上“知识”这顶帽子。因为这些人是设计师而你不是。然后在你得到了他们的反馈之后，尊重他们、信任他们，并做一些改变。
< ![endif]–><!–[if !vml]–>
“无需得到太多细节”

就像你很一般的代码需要等待提高（虽然仍能执行），你也有一些还说的过去的设计，但是离伟大差得远呢。看伟大的设计很容易这样想“这看起来没什么嘛”，但是事实上，伟大的设计花费了很多的时间（特别是对设计的新手）。但是有这些伟大的设计，你只是看到了最终的产品，并不知道设计者期间经历了多少次编辑和修改。甚至，你可能会惊讶于一条分割线会为设计带来多大的不同。当你把所有元素刚放在一起的时候，别以为设计做“完”了。

总而言之，伟大的设计（就像伟大的代码）很耗时间、耐心和技巧——因此，应该得到适当的尊重。尽管作为程序员（或者是内容编辑还是其他的web员工），你可能从不需要设计整个一个站点，但我有一种感觉，或多或少，你不得不做一点设计。如果可能的话，你尽量不要犯以上的错误……

颜色搭配网站

http://www.colourlovers.com/

很不错的网站来着.

淘宝的设计流程

---