月归档：八月 2008

原文标题How Simple Web Design Helps Your Business。 很多电子商务网站喜欢在登陆页面负载过多信息。这些电子商务网站如此糟糕设计的原因很简单：页面中塞入信息越多，用户买的就越多。不幸的是，网络买家是“墙头草”（译者注：原文为finicky bunch，意思是网络买家为善变的群体）。 雅库布尼尔森（Jacob Nielson）说过，网络用户在线购物和在线浏览时会变得越来越没耐心。大部分的购买是用Google快速搜索完成，而不是花时间从进入网站首页，按目录找到内容或通过其他产品推荐。如果不能马上发现需要的东西，用户就会离开。 简洁网站设计能让用户快速找到所需信息，特别是销售产品时，这一点至关重要。如果无用的文字、小程序或无关产品搞乱了页面，网站就变得毫无意义。 然而，相反的做法反而成了惯例。电子商务网站采用了这种“霰弹”方式努力尽可能多地击中潜在用户。这类网站经常会在登陆页上放置不必要的信息、广告和相关产品，而不是仅仅放置一个产品。 产品越少，关注越多 很多网络公司忘记了电子商务的基本法则：网络购买者希望干扰尽可能少。在亚马逊网站（Amazon.com）上点击几次鼠标就能购买DVD，这要比开车去商店购买简单得多。如果购买体验简单快捷，用户甚至愿意在网站上停留更长时间，进行更多消费。 苹果擅长设计简洁首页。登陆其首页，只会看到三样东西： • 简洁的页首导航 • 页面主体展示一个产品 • 特色产品图片下方有信息性链接 除标准页脚导航外，首页仅仅包括三部分。下图是点击一个产品链接（比如iPhone）后进入的页面。 即使在产品页面，你马上就能明白页面主题：iPhone。产品本身占据了页面主要部分，周边信息是新款iPhone的应用和特色。更重要的是，观察iPhone页面没有什么内容： • 无关产品 • 无关广告 • 很多文字 • 杂乱无章 苹果网站以令人满意的方式有效展示了足够信息。提供大量信息没有错，只要不让人感觉信息过多就行。这里所有信息、链接和图片全部围绕iPhone本身及其相关信息展开。页面上没有分散注意力的广告、无用信息和其他产品。 简洁网站设计原则的主要方面就是“只显示完成销售需要的信息”，其他什么都不要。这并不是说不需要给用户很多信息。只是要搞清他们是否要看到更多信息。Apple网站使用“Learn more”链接来达到此目的。 设计师和网站工程师可是利用几个可靠方法保证页面布局不会因为杂乱无章而导致访问者离开： 1.只显示需要的 2.减少点击。购买产品所需的点击越少，回头客就越多。别让客户买产品像跳铁环一样困难。 3.“祖母”法则。如果你的祖母（或任何老人家）都能理解如何在网站上购买产品，你设计页面可能真的不错。不需要的信息会让祖母迅速离开。 4.减少栏目。页面上每增加一个栏目，内容空间就会越小。这会减少对主要产品的关注，而购物者的注意力会转到额外的东西上。 … 继续阅读 →

原文标题Tips on site search box design。 虽然很多在线购物者更愿意用导航链接浏览网站，但我们不应当忽视搜索框的重要作用。 如果来访的购物者清楚的知道想要什么，他们会很明确的使用搜索框。这种情况下购物者显示出了明确的购物意图，因此搜索框能够把该意图转变为真实的购买行为。 根据Fast Search提供的数据 (pdf)，30%的购物者进入电子商务网站后会立刻使用搜索框，超过30%的人通过导航没有找到需要的物品后转而使用搜索框。 那么，如何让这一切变得更加容易一些？以下是些小诀窍： 搜索框大小 允许用户输入较长的搜索请求，比如两个或者两个以上的词，这是现在的流行做法。那些查找具体电视机型号或者笔记本电脑型号的用户会倾向于使用较长的搜索请求。这意味着我们需要较长的搜索框。 理想的文本框应当能够容纳约30个字符，即5个单词左右。如果用户输入了更长的搜索请求，就无法看到全部文本。这不算糟糕，但如果搜索框能长一些，用户会更容易修改搜索内容中的拼写错误。 以Kelkoo为例，该网站为搜索框提供了足够的输入空间： 显化搜索框 搜索框应出现在页面的显著位置。许多网站倾向于将其放置在页面右上角，但将其安排在中间，购物者会更容易发现。 Comet网站最近发布了新版首页，更加突出了搜索框（同时加大了搜索框）。Comet网站发现搜索框是有效的转化工具，所以做出了此变更。 旧版搜索框被放在了页面右边，如下图： 新版中，搜索框被明显突出： 提供搜索预测 搜索框中输入关键词时，用户必须用几个词来描述产品，并猜测电子商务网站会如何呈现该产品。 让搜索变得更加容易的绝佳方式，是在用户输入搜索项时给与搜索建议，正如Google Suggest。用户能用最小的投入获取想要的东西。 Borders.co.uk网站最近升级增加了这一功能： 允许用户缩小搜索范围 如果用户搜索的产品数量非常巨大，用户更愿意通过缩小目标限定搜索范围。 Amazon网站就是如此。你可以通过其18个目录缩小搜索范围，以呈现更加相关的搜索结果： 用标签明确标识搜索框 大多数的购物者很容易找到搜索框，但我们不应当让那些对网络不是特别熟悉的人为此花不必要的精力。 Waterstones网站虽然将搜索框放在页面左侧，但它清晰明确的标记出其搜索工具： 页面载入后，光标默认定位在搜索框内 这是个小细节，但能够让顾客更加容易开始搜索。Google及其他主要搜索引擎都是如此，这能帮助用户更加迅速的达成目标。 但并非所有电子商务网站都是如此。Kelkoo和Amazon网站载入页面后，都将光标默认定位在搜索框内，但在M&S和Next等网站中，用户必须移动鼠标进行定位，才能输入搜索项。 移除搜索框中现有文字 许多网站和下例中的Marks & Spencer网站一样，在搜索框中写入文字解释功能。点击搜索框时，文字自动消失，你可以自由输入搜索项。 如果搜索框中的解释文字无法消失，用户会感觉沮丧，他们必须删除文本再输入搜索项。值得庆幸的是，很少有网站犯这个错误，而迪斯尼英国网店恰恰犯了这个错误。

原文标题Top Ten Web Typography Sins。 虽然许多设计师能很快接受网络标准，但让人惊讶的是他们常常忽视了基本的排版标准。以下是必须避免的十个致命问题： 问题1：使用连字符，而非长破折号。 如果需要中断，使用长破折号而非一组减号。该问题让无数的编辑感觉头疼。 问题2：使用句号而非省略号。 为了保证排版整洁，大多数字体提供了专门的省略号字符。省略号字符的3个点仅使用一个字母宽度，非常适合印刷。 问题3：使用直引号（Dumb Quotes）。 这些在html中使用的直引号不应当用于写作文本中，除非在内容中用于标记英尺或英寸单位。 问题4：句子之间使用两个空格。 由于网络排版的应用，句子之间使用两个空格的老式排版方式似乎终于退出了历史舞台。几年前，人们还必须手动插入一个ASCII空格以解决这个字体问题。现在，一些内容管理系统会自动加上两个空格。千万不要这样做！一个空格即可。 问题5：临时制作版权标记。 临时制作的版权标记不仅难看、松散，将大写C和括号强行组合在一起也不符合法律标准。使用正式的版权标记“©” （代码©），让顾客为额外的法律建议买单。 问题6：使用过多强调方式。 加粗文本，调整为斜体，加下划线。若真的需要让人全部理解你的观点，甚至可以采用全部大写。每次只要使用一种强调方式就可以了。 问题7：下划线穿越下行字母。 下划线穿越下行字母会造成阅读困难。使用border-bottom: solid 1px #00f，而非text-decoration: underline的方式，在文本下方划线，而非穿越文本中的下行字母。 问题8：用Photoshop制作字体。 如果字体库中没有（或者你买不起）粗体、斜体、小号大写字母，不要用Photoshop制作。可能有时候这些通过Photoshop制作的字体在打印时侥幸没那么糟糕，但在网站中显示时会一塌糊涂。 问题9：不使用异国字符。 书写异国字符很让人很困扰（尤其是编写宜家家具文章的时候）。但如果某人的姓名包括异国字符，有礼貌的写出来。 问题10：应用大写效果时不使用CSS。 随意的使用大写并无意义，但如果出于装饰方面的原因，需要使用大写（或者小写字母）时，确保在CSS构架中使用text-transform属性。这会为以后修改避免很多麻烦。