简洁的网页设计帮你拉顾客

How Simple Web Design Helps Your Business

Apple

Many e-commerce sites these days tend to be loaded down with too much information on their landing pages. The reasoning for cluttered e-commerce sites is simple: the more information you can cram on the page, the more the user will buy. Unfortunately, web buyers are a finicky bunch.

最近很多电子商务网站在登陆页面上放置了大量信息。而他们“汗牛充栋”的逻辑很简单:信息越多,用户越多。不巧的是,网上购物的人总是很挑剔。

Jacob Nielsen reports that web users are becoming much more impatient while shopping and browsing online. Instead of spending their time going to a site’s homepage and finding the content by categories or other product recommendations, most shopping is done by quick Google searches. If the user can’t find what she’s looking for right away, she’s gone.

Jacob Nielson 报导说网络用户在挑选和购买的过程中,变得越来越急躁。他们不会根据分类或产品介绍,花时间到网上查找信息,大部分人更愿意使用方便的搜索引擎。如果用户找不到他想要的,这笔交易就告吹。

It’s crucial to have simple web designs to allow the user to quickly find the information they need, especially if you are selling a product. If the page is cluttered with useless text, widgets or unrelated products, the site becomes meaningless.

这就使得简洁的网页设计成为关键,特别是你需要销量的时候,它能让用户更快地找到资讯。如果一个网页充斥着大量无用的文本、widget或无关的产品,那么这个网页可以说已经作废了。

However, it’s become a common practice to do just the opposite. e-commerce sites have taken this “scatter shot” approach of trying to slap the potential buyer with as many options as possible. Instead of making the landing page solely about one product, sites usually clutter the page with unnecessary information, ads and related products.

不过,有些电子商务网站恰恰相反。他们喜欢搞“多点开花”,以图给潜在的用户尽可能多的选择,在网页上添加了许多无用的信息、广告和无关的产品。而不是清楚的一个网页一件产品。

Less Products Mean More Focus
更少的产品意味着更多的关注

Many web companies forget the cardinal rule of e-commerce: Web shoppers want as little hassle as possible. Instead of hopping in the car and driving to the store to buy a DVD, it’s much easier to go online and snag it from Amazon in a few clicks. The customer is even willing to wait longer and spend more money if the shopping experience is simple and fast.

许多网络公司可能忘记了一条电子商务的基本规则:网络购物越简单越好。可以在亚马逊点几下鼠标就买到的DVD,谁也不想驾车跑几公里外去买。如果购物的过程简单快捷,顾客甚至不会介意多花点钱或多等些时间。

Apple

Apple has mastered the art of minimal homepage design. If you go to their homepage, they’ll only show you three things:

  • A simple header navigation
  • One product in the body of the page
  • A few informational links about the featured product with images below the fold

Aside from the standard footer navigation, the homepage consists only of three parts. Here’s what you see if you click on a product link (like the iPhone).

苹果公司已经完全掌握了极少主义艺术网页设计。如果你打开他们的主页,只会看到三样东西:
   * 一个简单的顶部导航
   * 主体部分的一件产品
   * 在倒影部分的产品相关链接
除了标准的页脚导航,整个主页仅由这三个部分组成。以下是点击一件产品进入的网页(以iPhone为例)。

iPhone homepage

Even on the product page, you immediately see what the page is about: the iPhone. The product itself dominates the bulk of the page, and the surrounding information are apps and features of the new iPhone. But more importantly, notice what’s not on the iPhone page:

  • Unrelated products
  • Unrelated sidebar ads
  • Lots of copy
  • Clutter

在产品页面,你第一眼就能了解这个网页是关于什么的:iPhone。产品本身占据了大部分的页面,周围是新 iPhone 的特点和一些应用程序。但更重要的是,我们要了解这个网页上没有什么:
   * 无关的产品
   * 无关的侧边栏广告
   * 过多的重复
   * 混乱的排版

Apple has effectively shown just enough information in a very pleasing manner. There’s nothing wrong with showing lots of information, as long as it doesn’t feel like a lot of information. You’ll also notice that all of the information, links and pictures are all centered around the iPhone and what it offers. There are no distracting ads or unneeded information about other products.

苹果公司用一个舒适的页面展示了足够多的信息。展示大量的信息没有错,只要让它看起来并不多。这样你同样可以看到所有的信息,链接和图片排列在 iPhone 的周围,同样发挥了作用。网页上没有任何无聊的广告或无用的其它产品的信息。

There are a couple of tried-and-true methods that any designer or web developer can take to ensure that the site layout doesn’t drive customers away with clutter.

这儿有一组经过实践考验的方法,任何设计师或网页开发者都可以学去,免得糟糕的页面布局把顾客赶走。

  1. Only what you need.
    The biggest aspect of simple web design is only showing what’s needed to make the sale, and nothing more. This doesn’t mean that you can’t give the user lots of information. Just make sure they want to see more information. Apple uses “Learn more” links throughout the page to accomplish this.
    只有你需要的:简单的网页设计中最重要的一个方面就是,只展示你要卖的产品。但这不是说你不能向用户展示大量的信息。你只需要确定用户想了解更多的信息。苹果大量使用“Learn more”链接达到这一点。
  2. Reduce clicks. The less clicks it takes for a customer to buy a product, the higher returns. Don’t make them jump through hoops to buy your product.
    减少点击次数:顾客到达想要的页面点击次数越少,对你来说可能的回报就越高。可别让顾客劈荆斩棘去买你的产品。
  3. The “Grandma” rule. If your grandma (or any elderly person) can figure out how to buy a product for your site, odds are it’s put together pretty well. Unneeded information will turn Grandma away quickly.

    “奶奶”规则:如果你的奶奶(或任何年老的人)可以通过你的网站了解如何购买产品,那么产品被购买的几率就很大。无用的信息会很快把你的奶奶搞晕的。

  4. Reduce the number of columns. Each time you add a column to a page, the content is pushed into a smaller and smaller space. This puts less emphasis on the main product, and more on extra stuff the buyer isn’t really looking for.

    减少分栏:你每增加一个分栏,显示内容的空间就少一截。顾客不想要的东西占据了太多的版面,这就无法强调主要的产品。

  5. Give less options. There is an added stress put on web shoppers to make decisions. Ultimately, the buyer wants to think as little as possible when making the purchase. Displaying products in a way that eliminates extra thinking and decisions will streamline the buying process and give the customer more peace of mind.

    尽量减少操作菜单:展示产品应当避免无关的干扰,推动顾客购买的进程。顾客在选购时都希望尽可能少的思考,要让顾客有更多思考的空间并专注于购买的过程。

  6. Keep it clean. A clean design keeps visitors happy. By taking the time to ensure that the layout of the site is aesthetically pleasing keeps the customer returning to the site.
    保持整洁:一个干净的设计可以让访问者心情愉悦。多花点时间确保你的网页布局美观,这样才会有回头客。

Intuitive web design means thinking like a potential customer. Would you shop at your site?

作为设计者应该从顾客的角度审视网页设计。你会在自己设计的网站上购物吗?

Other Great Examples of Simple e-commerce Design

其它优秀的电子商务设计实例

Bell.ca

Bell.ca uses only a few colors to indicate the branding and offers visitors only the main navigation options. Notice how well the design manages to present a number of different options — shop navigation, support as well as personal and business areas. The design isn’t cluttered but clean and simple and provides the visitors with a broad overview of available options without forcing users to actually go through all of them. Also notice how clever the product navigation is designed at the top of the site. There is just nothing users can do incorrectly.

Bell.ca 只使用了很少的色彩来展示品牌,而给浏览者的操作菜单只有主导航栏。注意设计者是如何安置这么多不同的菜单——购物导航,还要同时照顾到私人和企业客户。网页不仅不凌乱,反而显得简洁明快,提供了很多菜单,但并没有迫使浏览者一一浏览查找。同时也要注意到顶部的产品导航设计得有多聪明,我想没有谁还会选错产品了吧。

Shoeguru.ca

Shoeguru.ca present a very user-centric and product-centric design. The product seems to be on the stage just in front of the visitors. The design presents only the product, and nothing else; even only few navigation options are available.

Shoeguru.ca 展示了一个完全以用户和产品为中心的设计。似乎产品本身就是一名推销员。网页上除了产品毫无其它无关的东西;甚至连导航菜单都“少得可怜”。

Etsy

Etsy is a great example of how to place a lot of information on a page without it being cluttered. Etsy has a wide catalog of products to sell from, yet Etsy’s design has an earthy, relaxing quality. Creating a useful homepage that doesn’t distract is no small feat.

Etsy 在主页上放置了如此多的信息却丝毫不显凌乱,简直是网页布局的样板。Etsy 的产品目录很繁杂,但优秀的设计使其显得轻松朴实。事实证明,一个实用性的主页也可以有很好的商业效果。

crupress

Crupress is an elegant book site without many distractions. The homepage manages to present a lot of text without agitating the user. The header navigation is prominent, but doesn’t demand attention. All the design elements flow together smoothly.

Crupress 是一个文雅的图书网站,没有什么娱乐成分。主页上有大量的文本,并没有搅乱用户的思绪。顶部的导航很醒目,但也只需要瞟一眼就能了解。所有的设计元素水乳交融。

tokyocube

Tokyocube is a fun, trendy little site that sells Japanese products. Instead taking precious space explaining what the site sells, the products are put right in front of you. Also, the heavy use of white space allows the products to almost jump right off the page at you. You can’t help but click on one of the toys to learn more about them.

Tokyocube 是个有趣时髦的销售日本产品的小网站。网站没有浪费宝贵的空间来介绍产品,而是把他们摆放在屏幕的右侧。网站使用大量的留白使得用户能够快速清晰地欣赏产品。谁也忍不住要点击几个玩偶好好瞧瞧。

furious tees

While Furious Tees is a tad busier in graphics than the previous sites, it helps do two things:

  1. Show the playfulness of the site
  2. Make it very clear that all shirts are only $19.99

You aren’t lost trying to figure out what Furious Tees is selling, the products are all in front of you. Having all the products on the homepage is especially beneficial for novelty sites that have merchandise people normally wouldn’t be looking for.

But sites with lots of products on the homepage run the risk of becoming cluttered very quickly. Furious Tees doesn’t have this problem. They don’t use any extra sidebars or ads taking attention away from the T-Shirts. The focus is solely on the shirts and the hilarious design.

urious Tees 相对前面几个网站更注重图形设计,主要有两点作用:
   * 体现网站活泼的基调
   * 清楚的显示所有的衬衫只卖19.99美元

访问者也不会忘了 Furious Tees 是卖什么的,产品不都在面前吗?把产品都放在主页对于那些销售新奇产品的网站特别有益,因为通常人们都不会去找这些东西。

但是把产品都集中放在主页上,很容易把布局搞乱。Furious Tees 很好地避免了这些问题。他们把关注都集中在 T-shirt 和风趣的设计上,没有在网页上放任何侧边栏或是广告。

37 Signals

Basecamp (37 Signals)

Look no further than 37 Signal’s project management tool Basecamp for an incredible example of mixing different types of information to sell a product. Yet there’s just enough information to make an effective sales copy. Every word, every image has to be weighed in a design. If there’s not enough information, the user won’t spend time trying to figure out what the product does. Too much information and the user becomes overwhelmed.

论混合不同种类信息来销售产品,恐怕没有比 37 Signal 的项目管理工具 Basecamp 更牛B的了。但网页上的信息数量恰到好处。每个词语、每个图片都经过权衡。如果没有足够的信息,用户不会浪费时间去理解产品;太多的信息用户也无法招架。

The tasteful use of heading backgrounds and company logos makes every bit of information stand out on it’s own. And they somehow made all of the different types of media blend together, with plenty of space so that the user isn’t bombarded by lots of text or images at one time.

得当的顶部背景色彩和公司徽标,使得下面的主体部分更引人注目。他们将各种不同的媒体融合在一起的同时,还留出大量的空白,使得用户不会一下子被繁杂的文本、图片搞晕。

You Only Have a Few Seconds

最后的总结

Every website is going to require a different type of layout, design and copy to sell products. But designers can strive to do more with less by:

  • weighing every word
  • removing unneeded elements
  • using tasteful colors and whitespace
  • and limiting the amount of overall information the shopper sees at one time

每个网站都会要求不同类型的布局、图样和文章以便销售产品。但作为设计者有些事半功倍的办法:
   * 权衡每个词语
   * 删去没用的元素
   * 使用雅致的色彩并大胆留白
   * 控制访问者每一次看到的信息数量

Remember, online shoppers are a fickle bunch. They don’t “window shop”. They use search engines to limit their searches to a very narrow field. If they don’t like what they see, they leave. Site owners only have a very small window of time to capture the attention of the prospective shopper. A tasteful, clutter-free design that places the focus on the product (and nowhere else) will allow the shopper to find what she wants faster.

记住,网上购物的人总是很挑剔。他们不会磨磨蹭蹭地挑选商品,而会使用搜索引擎搜索关键词来找到他们想要的。如果他们不喜欢看到的网页,对不起,拜拜。对于网站来说,只能用一个不大的界面来吸引这些潜在客户。一个雅致的、整洁的设计可以将关注集中到产品上(而不是其它任何东西),并帮助顾客更快地找到他们想要的。

Glen Stansberry is a web developer and blogger. You can read more of his articles on smart web development at Web Jackalope.

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: