“交互设计”目录存档

minisite中的用户体验之 — 内容为王

2011年10月17日,星期一

在开始本文之前,先看下这个网站:新闻聚合网站Drudge Report(德拉吉报告)维基百科上的介绍

美国《纽约时报》网络版撰文称,在互联网飞速发展的今天,美国新闻聚合网站The Drudge Report却依旧保持着上世纪90年代的版面,14年来几乎没有任何改版。更令人惊奇的是,就是这样一家“简陋”的网站,却成为仅次于谷歌的全美新闻网站第二大推荐流量来源,甚至达到Facebook的两倍。

————摘自:2011年05月16日 新浪科技

网站,作为一个提供信息的资源尽管有诸如各种优化方法。但离不开其核心:内容为王。用户喜爱的网站并不一定有多么漂亮的界面,也不一定有多么好的用户体验(除了上面提到的德拉吉报告界面、用户体验均不好。)。而吸引用户访问的最重要原因是因为网站内容。从天涯到百度贴吧,都体现出了“内容为王”的特点(天涯、百度贴吧至少在界面上是毫无美观可言)。因此,各种优化网站的手段都必须建立在内容基础之上,没有了内容就无从谈起各种优化手段

接着前面的两篇:《minisite中的用户体验之 — landing page》《minisite中的用户体验之 — 内容布局》之后,总结下minisite网站内容上的用户体验。

禁忌空洞无用的内容

排版布局的重要性,而网页内容的排版与平面杂志有些不同:

网页排版以可以让读者快速阅读为前提。

参考网站:
Prism Girl

易用性差的网站通常都有同样的通病。当哥在这么漂亮的网站上看不到导航时,就不得不用鼠标乱戳的方式查找链接。这个网站很漂亮但也非常复杂,复杂到我们需要花费一个小时来找链接,但你可能都猜不到点击跟随鼠标的图标方式进入网站。并且,这个网站除了令人印象深刻的设计之外就没提供个毛内容出来!

文字特效

尽少使用影响正常阅读的特效,包括闪耀的背景,各种修饰过度的字效。

参考网站:
EContent

经过漫长的加载后,网站需要访客点击”进入”按钮。好吧,我们点它下。尽管网站上有坨快捷菜单,但很不幸的是这坨菜单并没有引起访客的注意。并且,访客需要将鼠标挪到图片上才能查看子类目。而这些导航按钮需要访客非常仔细的查找才行。

设计服务于内容

减少与与文字内容无关的各种繁杂效果。

参考网站:
There Studio

有一半的圈圈看上去是可以点的,实际上却不能。如果拖拽一个圈圈,它会跳到其他圆圈中去。当然,这些坑爹的圈圈动画效果充分的体现出公司比较xxx的理念,这明显有些过度了嘛!用58秒等待一个动画的确太漫长了。并且,如果你想需要更多的圈圈,点击或拖拉空白区域就会出来,同时也带给访问者更多迷惑。

Desing Sul

哥从未见到过加载问题如此之杯具的网站。多重加载元素,即使你看到了网页内容实际上还有东西要再次加载。也没有迹象可以表示加载结束了,这样做也让哥非常的困惑不解并且该网站还不易使用。事实上,找到阅读的内容也需要花些功夫,而网站在牛奶卡通包装盒所做的效果与内容根本没有毛关系嘛。

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

minisite中的用户体验之 — 内容布局

2011年10月12日,星期三

接着上篇章:《minisite中的用户体验之 — landing page》,landing page之后,接下来就是页面了。

可能会有人觉得反正minisite就几个页面而已。无需过多考虑页面信息布局问题。但既然是网站,自然想让页面有更高的粘度,而用户体验的会对其产生一定的影响。如果每个页面的导航虽然很有创意但用户使用起来很不方便,那么即便是再有创意也会因为难以使用而令人产生反感不想继续浏览下去的想法。

网页设计,导航栏就应该像是导航栏、信息区域就应该像是信息区域。没有人喜欢用鼠标不断的在看似可点击的区域去尝试点击。下面是总结的一些点:

导航栏

网站的导航栏目的很明确:导航网站,用户可快速访问网页。那么导航也就需要让用户轻易找到,并且展示方式也需要有效率(把所有的内容都堆放在导航栏上也会令用户感到头大)。

参考网站:

Content Of

即便是已经阅读”关于我们”页面并文字里有许多的随机链接,哥还是很疑惑这个页面到底是不是打酱油用的。最合适的猜测可能这是个人介绍页面,而乱七八糟的链接和找不到导航栏,哥只能带着困惑和不解离开这个网站。

Self Titled

隐藏的菜单与类目不清楚导致网站导航难以使用。当访客想找到他想了解的类目将会是非常困难的。

尊重原有的习惯

网站的布局是可以稍微有变化的,但是太大的变化会让人无所适从。

参考网站:

Lego Click

网页的滚动通常是从左至右,从上到下。而这个坑爹的网站却是从网页底部开始。加上不能关闭的关闭按钮和其他些小问题,你会觉得乐高这个网站很莫名其妙(虽然设计很漂亮)。

Kyle Tezak

这是另一个视觉效果很好但由于糟糕的用户体验会引起访客不爽的案例。网站上没有固定的导航栏,而只是个悬浮着的固定导航条(感谢江列农同学的纠正)。如果要找到联系方式,需要到左下角点击”Information”(信息)。使用更传统的方式将有助于提升访客体验:例如,放一个电子邮箱或是将文案改为”contact information”(联系信息),亦或是在页面底部添加联系方式。这是典型的通过细节提升用户体验的方式。

善用首屏

首屏的是非常之重要的。也不讲什么因为所以了,单看看门户网站的报价单就可以知道,往往首屏广告的价格是二屏的2倍!

参考网站:

Bio Bak

这是另一个拖动方式进行导航的网站,很显然它对于这种导航方式自我感觉非常良好。从视觉/乐趣角度来说是个好网站,但设计公司设计了用户体验很糟糕的导航方式:必须要使用鼠标滚轮才能看到比首屏更多的内容。

可点击的内容

首先,链接应该是看上去就像链接。而不要让用户拿着鼠标在页面上面漫游的查找(通过鼠标的指针形状变为手型)。更极端的情况是:连手型都没有。特别是要注意flash中按钮的hit区域。

参考网站:

Prism Girl

易用性差的网站通常都有同样的通病。当哥在这么漂亮的网站上看不到导航时,就不得不用鼠标乱戳的方式查找链接。这个网站很漂亮但也非常复杂,复杂到我们需要花费一个小时来找链接,但你可能都猜不到点击跟随鼠标的图标方式进入网站。并且,这个网站除了令人印象深刻的设计之外就没提供个毛内容出来!

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

minisite中的用户体验之 — landing page

2011年10月7日,星期五

接触了许多的minisite项目,从最初的创意到demo设计到功能实现直到项目正式上线,往返的修改次数很多,大都是视觉与内容的改动。真正能为用户着想的关于用户体验方面却少之又少。往往追求创意第一,而其他的也就不多考虑了,总是希望能令人有耳目一新的感觉。而所谓的用户体验也多是借鉴下已有的网站。究其原因,往往客户把自己的行为认定是访客的行为,而设计师往往疲于修改稿子或内容,能在规定的时间内把项目按照客户要求完成已是极限了。当然,除此之外也不排除二者对用户体验的了解不够所造成的。

接着前篇翻译:《前车之鉴 — 那些好看不好用的网站案例》,分享下自己的一些总结。希望能对大家有所帮助。

Landing page,即访客访问到你网站的第一个页面。最近恰好在读《Landing page优化权威指南》这本书,自己的体会:

  1. Landing page是网站中提升效果最关键的页面;
  2. 访问者打开Landing page的第一印象就决定了网站的印象;
  3. Landing page的优化取决于多重因素:Web设计、人类心理学、文案撰写、可用性…

页面打开速度

minisite中常用的flash往往使得由于追求效果导致flash文件变得巨大,下载时间也变长。网页内容下载时间超过了访客的耐心,那么即便是再漂亮的设计,再炫耀的动画也不会让访客改变关闭浏览器窗口的决定。等待的时间越长,网页被关闭的可能性也就越大。往往事情就是这样:网站几分钟内还没看到内容,那么用户就会关闭页面。

下面是几点可能进一步提升用户体验的方法:

  1. 尽量减小下载的文件大小,确保访客有足够的耐心等待;
  2. 有下载进度提升,预估下载时间;
  3. 不重复加载相同的元素;

参考网站:
EContent

经过漫长的加载后,网站需要访客点击”进入”按钮。好吧,我们点它下。尽管网站上有坨快捷菜单,但很不幸的是这坨菜单并没有引起访客的注意。并且,访客需要将鼠标挪到图片上才能查看子类目。而这些导航按钮需要访客非常仔细的查找才行。

减少干扰用户的元素

片头动画

在制作动画完片头动画后,谁最喜欢看?除了设计师本人外就是客户了,前者是带着欣赏自己作品的眼光一遍遍的欣赏,客户则是带着挑刺的眼光一遍遍的看。那么真正的用户就不会这样了,特别是那些播放时间过长的动画。还是加个跳过按钮吧,别把用户想象的那么有耐心。
参考网站:

Theologos

无跳过介绍的按钮。无视觉清晰的导航栏。加载很慢。而牛x的是页面与播放的背景音乐竟然是分开的。当网速快的访客访问网站时,网站的动画都可能引起访客的反感。

信息提示框

信息提示框被广泛应用于各种网页代码的开发过程中与整人的网页中。而这个万恶的信息提示框现如今又换了新马甲:各种设计美观但却无实际意义的信息框。而且非常带有强制性,必须先关闭该信息框才能浏览网页。

参考网站:

Creative With aK

导航信息超载!不仅我们不知道要看什么,甚至都不知道应该点击那里。通过鼠标扫描方式查找可点击区域无助于提升网站的易用性。并且,整个网站的载入过程连个进度条都没有。而且更令哥震惊的是,还要花时间搞清楚必须关闭欢迎的窗口才可以点击页面其他地方。栏目里缺少滚动条的内容让哥对藏在里面的内容顿时失去了兴趣。

勿多次下载相同的内容

该问题可能是开发过程中没有优化代码造成的吧?在本地测试时,别说是几百k的东西就是10M的东西也是瞬间就打开了。尽管大陆的局域网正在日渐优化但网速还无法达到我们办公室内局域网速。优化代码还是很有必要的。

参考网站:

Desing Sul

哥从未见到过加载问题如此之杯具的网站。多重加载元素,即使你看到了网页内容实际上还有东西要再次加载。也没有迹象可以表示加载结束了,这样做也让哥非常的困惑不解并且该网站还不易使用。事实上,找到阅读的内容也需要花些功夫,而网站在牛奶卡通包装盒所做的效果与内容根本没有毛关系嘛。

背景音乐

如果说landing page是个茶几,上面摆满了各种杯具。那么这个是算作最最大的杯具。也是出现频率最高的杯具。

你永远不知道当前用户喜欢什么音乐,虽然在设计之前已经对目标人群有了共识,但即便是岁数相仿的人也无法确定他/她喜好/厌恶的音乐是什么。当播放让用户讨厌的音乐也很容易让人起反感情绪。

在工作或休闲中,许多人喜欢边打开音乐。为了达到亲身体会的效果,你可以用两种不同的音乐播放器播放两首你都喜欢的音乐。感受下这种令人抓狂的噪音音乐吧。

我们经常会被些无聊的会议或什么事情折腾着。如果在这时,这个正在开会的用户忘记关扬声器情况下恰巧打开个带背景音乐的网站。好吧,我相信他已经牢牢的记住这个网站,带着非常的愤怒记住了这个网站。

参考网站:

Theologos

无跳过介绍的按钮。无视觉清晰的导航栏。加载很慢。而牛x的是页面与播放的背景音乐竟然是分开的。当网速快的访客访问网站时,网站的动画都可能引起访客的反感。

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

A/B测试终极指南[转载]

2011年08月30日,星期二

smashingmagazine.com上面的一篇好文章。感谢标点符同学的翻译。我就不重复劳动了。

A / B测试不是一个时髦名词。现在很多有经验的营销和设计工作者用它来获得访客行为信息,来提高转换率。然而, A / B测试与SEO不同的是,人们都不太知道如何进行网站分析和可用性分析。他们并不完全明白它是什么或如何更有效的使用它。本文将为你提供有史以来最好的A / B测试教程。

什么是A/B测试?

A / B测试的核心就是:确定两个元素或版本(A和B)哪个版本更好,你需要同时实验两个版本。最后,选择最好的版本使用。

网络上的A / B测试,即你设计的页面有两个版本(A和B),A为现行的设计(称为控制) , B是新的设计。比较这两个版本之间你所关心的数据(转化率,业绩,跳出率等) 。最后,选择效果较好的那个版本。

测试哪些东西?

选择测试什么取决于你的目标。例如,如果你的目标是增加顾客数量,那么可能测试下列内容:注册表单数量,字段类型要求,隐私政策等。在这种情况下A / B测试的目标是要弄清楚什么阻止了游客注册。需要填写的表单的数量?用户的隐私?还是该网站做了让游客不信任的事情?所有这些问题都可以通过一个个A/B测试获得答案。

每一个A / B测试内容都是独一无二的,单通常测试一下这些内容:

  • 行动按钮的措辞,大小,颜色和位置;
  • 标题或产品说明;
  • 表单的数量和字段类型;
  • 网站的布局和风格;
  • 产品定价和促销活动;
  • 着陆和产品页面上的图片;
  • 页面上文字的长度(少Vs多);

一旦你决定要测试什么,下一步当然是要选择一个合适的测试工具。如果你想要一个基础的免费工具,可以使用Google Website Optimizer。如果你想要功能更加强大的工具,可以使用Visual Website Optimizer  。其他的一些选择都是可以的,建立试验在所有工具中都很相似,所以我们只需讨论一种即可。

你可以通过两种方法建立A / B测试:

  • 在页面测试加载前替换元素如果你测试的是页面上的单个元素,如注册按钮,然后需要在测试工具中设置按钮。当测试时,在A / B工具将在页面给用户前随机替换按钮。
  • 重定向到另一页面如果你想通过A / B测试整个页面,比如说,一个绿色的主题和一个红色主题,那么你就需要创建和上传新的页面。例如,如果您的主页是 http://www.example.com/index.html,那么你需要创建另外一个页面 http://www.example.com/index1.html。当测试运行时,您的测试工具将一部分访问者重定向到第二个网址。

一旦您使用了上面的两种变换方法,下一步是建立转换目标。通常,你会得到一个JavaScript代码,复制并粘贴到游客到达的目标网页。例如,如果您有一个电子商务网站,你正在测试的“立即购买“按钮的颜色,然后您的转换目标将是购买成功后的“谢谢您“页面。

在转换事件发生的同时,在A / B测试工具,记录了哪种页面显示给了访问者。经过足够数量的游客,您可以确定哪个页面带来了最多的转化!建立和运行的A / B测试,其实很简单。

该做什么和不该做什么

虽然A / B测试是超级简单的概念,但是请记住,以下这些都只是我自己的经验。

注意事项

  • 不要分开你的测试情况。始终两个版本同时进行测试。如果您第一星期测试第一版本,第二星期测试第二个版本,你就错了。有可能B版本带来的流量更糟糕,但是带来了更好的业绩,因为两个版本之间的流量始终存在不一样。
  • 不要结束得太早。有一个概念叫做“统计信心“ ,无论你的测试结果明显的。如果你只有少数转换或游客,它都无法确定最终的结果。大多数A / B测试工具都有报告统计,但如果你是手动测试,你可以使用 在线计算器
  • 不要让常客惊讶。如果你正在测试网站的一部分。包括新访客和常客,不要使他们觉得震惊。尤其不要因为哪些可能不会最终实施变化。
  • 不要让你的直觉推翻了测试结果。在A / B测试的结果往往是令人惊讶的或直观的。在一个绿色为主题的网站,一个明显的红色按钮有可能成为赢家。即使红色按钮不容易吸引注意。您要测试的目标是一个更好的转换率,而不是美学,所以在得到测试借过钱不要拒绝任何尝试。

需要做的

  • 知道运行测试多久。结束太早,可能会使你花了时间但是没有得到有意义的结果。结束太晚也不好,因为效果不佳的页面可能影响你的转化和业绩。使用一个计算器,来确定测试多久以后来结束它。
  • 将相同的页面呈献给同一个访客。您的工具应该有一个记忆访问者已经看到的页面的功能。这样可以防止向同一用户显示一不同的价格或不同的促销优惠。
  • 让您的A / B测试在整个网站保持一致。如果你正在测试的登录按钮在多个地点出现,然后一个访问者应在所有的地方看到同样的变化。在页面1显示一个样子,在页面2显示两外一个样子,会使试验结果被干扰。
  • 做很多的A / B测试。让我们面对现实吧:你的第一个A / B测试可能会无效。但是不要绝望。一个A / B测试只能有三个结果:没有结果,不好的结果和好的结果。优化转换率的关键是要做大量的A / B测试,把所有的好的结果拼接起来,最终推动业绩。

经典A/B测试案例研究

这里有一些如何进行A/B测试的案例研究。

Writing Decisions: Headline Tests on the Highrise Sign-Up Page 37Signals测试他们的价格页面的标题。最终发现, “30-Day Free Trial on All Accounts “比原来的“Start a Highrise Account. “多产生30 %以上的订单。

“You Should Follow Me on Twitter Here” (Dustin Curtis) 这是一个用来测试召唤用户在Twitter上关注自己的试验。. Dustin 发现提示文字是“You should follow me on Twitter here” 的效果是“I’m on Twitter.” 173%

Human Photos Double Conversion Rates 从两个不同的A / B测试将在网站上增加转换率的人的照片:一个令人令人惊讶的结论,A/B测试两张图片,将真人照片放在网站上会获得一倍的转化。研究说明,我们潜意识被照片吸引了。

Google Website Optimizer Case Study: Daily Burn, 20%+ Improvement (Tim Ferriss) 一个将用户选择减少的变化使转化提高了20%,最终的版本在细节和文字上更易吸引目光。

Two Magical Words Increased Conversion Rate by 28% “It’s free” 这个单词增加了注册按钮点击次数的28%, 测试结果表明,在行动召唤上一些很小的变化会带来令人惊讶的结果。

Changing the Sign-Up Button from Green to Red 依靠A / B测试, CareLogger把注册按钮从绿色修改为红色增加了34%转换率!

Single page vs. multi-step checkout 如果你有一个在线商店,很常见的就是支付流程。这个A / B测试发现,多个支付流程比单个支付流程完成的销售更好。

“Mad Libs” style form increases conversion 25-40% 打败传统的智慧,此A / B测试发现一段风格形式输入字段比传统形式的布局更好。

Complete redesign of product page increased sales by 20% 一个软件产品的公司重新设计他们的产品页给它一个现代的外观和增加信任模块。最终结果:他们成功地增加20 %的总销售额。本案例研究证明了设计对销售的影响。

Marketing Experiments response capture case study – triple digit increase in conversions 通过优化邮件地址获取提高了258 %。重点是消除所有的干扰,并要求游客只需提供电子邮件地址。使用亚马逊礼品卡让他/她的完成个人资料。

A/B测试工具

有许多侧重点,价位和功能不同的A / B测试工具,这里是一些:

一些深入研究的A/B测试资料

如果你已经读到这里,那么A / B测试大概已经激起你的兴趣。在这里,有一些非常好的A/B测试资源。

寻找你下一个A/B测试的灵感

一些介绍性文章

A/B测试中的数学

摘自:http://www.biaodianfu.com/a-b-testing.html
原英文版地址:http://www.smashingmagazine.com/2010/06/24/the-ultimate-guide-to-a-b-testing/

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

关于翻译软件的用户体验的改进建议

2011年04月5日,星期二

接着上篇《关于翻译软件的用户体验》抱怨翻译软件用户体验上的不足。 接下来说说我自己对翻译软件的些个人意见。由于本人的才疏学浅,如有不当之处敬请谅解。

1、绿色免安装版本

由于国内盗版软件横行。仅一个windows xp除了官方发布的各个版本外,盗版亦衍生出n多个版本。当然世界上并没有免费的午餐,当我们在享受免费带来的优惠外,也不可避免的要装上些流氓软件作为对盗版开发者的回报。

而更进一步的是各种假借破解名义或是冒名顶替的软件到处可见。在下载时一不留神就错点击广告软件。

在这么乱七八糟的环境下,几乎每个电脑用户都曾经 不小心安装上流氓软件。而之后,电脑用户自然会对安装的程序保持谨慎的态度。虽然貌似杀毒软件日渐强大, 但也难保有漏网之鱼或是杀毒软件不曾识别的新版流氓软件。没办法,咱们没有付钱自然也就不好太要求破解软件者有多么好的素养,希望他在破解完后不要把流氓软件捆绑上。(破解老黑哥:我勒个擦,哥是靠流氓软件吃饭的!没流氓软件带来的收入谁给你破解的那么爽啊!)

正所谓道高一尺,魔高一丈。在坑爹的流氓软件为电脑用户所警惕后,绿色免安装软件日渐受人欢迎。 如果翻译软件有免安装绿色版将可能更受大众欢迎了。

2、优化界面

抛开软件外观的个性化因素外,还应多照顾下视力不好的用户。不管是看书还是看电影,有使用翻译软件需求的人视力不好的概率应比普通的更高。So,应有相应的主题更便于视力不好的用户使用。

3、类似发音词组

在日常生活中经常可以看到的现象:由于家乡地域不同,有人在说普通话时或多或少都带有点方言,这就导致有人前鼻音后鼻音或是z、c等发音混淆不分的情况。

自打娘胎出生就学的普通话尚且如此,那就更别提仅停留在脑中的那点英文发音了。出现发音错误或是由于发音错误导致拼写不对也是在所难免。记得初中时,英语老师为了纠正我们的发言,费劲的拉个大嘴给我们示范ð/θ的区别,可惜到现在只记得他黄黄的牙齿与略带血丝的喉咙。至于那两个发音完全是靠自己的随心发挥了。

那么像:ð/θ/Z/c/s之间发音不到位的同学也就不在少数了。只记得大概发音输入查询拼写就很杯具了,经常缺少个不发音的e导致插不到所要找的词汇。据此,可效仿输入法, 也可查找有类似发音词汇的功能。

4、通配符查询单词

在使用谷歌或百度时,可以通过加某些通配符来缩小自己查询的范围。如:关键词 filetype:pdf, define:关键字, 上海 天气 ..

在查询某个单词时,正常人往往不能正确的输入拼写。翻译软件不应苛刻的要求输入的单词一点都不差,毕竟人不是电脑 。而适当的使用通配符则可更好解决此类问题。

5、图像文字翻译

在阅读某些电子文档时,我们会发觉有些文档内容的文字是图片格式。每次遇到此类情况只得对照着文档文字手工输入到查询框内。(很欣慰的是在有道的最新版本里已经看增加了此功能。)

ok,说到这里顺便提下可以开发的小工具吧。

1、国外节假日

各国都有许多属于自己的节假日,而这些对于本国人很熟悉的节日并不为外国人所熟悉。

2、各种信件/公函的模板

使用翻译软件的目的无外乎读、写外文。而有了这样的辅助功能应算是解决了平时给国外友人写信格时常出现的格式可能出错的问题。

3、语法检测功能

还是回到了那个原因:毕竟不是自己的母语。我们并不可能确保每句话语法都正确。让软件完全帮助写英文也许是一个dream,但用软件来检测语法倒是个可行的功能。

上面是列举了些自己想到的些功能。在作为使用翻译软件的用户角度看来,这些功能相对于增加收录词汇量外,添加这些功能更具有实用性。

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

关于翻译软件的用户体验

2011年03月16日,星期三

记得以前看到翻译软件发布新版本时都会标榜声称新版本加了多少新词汇,旁边的广告里肯定会印上n本超级厚的大词典来标榜自己词汇量是多么的丰富 。由于增加的词汇本人基本都不认识(专业词典?),加上本人精力有限,吃饱没撑着也就从未较真的考察过到底增加了多少词汇。

而令我很欣慰的是尽管翻译软件几乎每年都有新版本推出。我却觉得以前的老版本翻译软件或现在的在线翻译已经足够用了。因为对于阅读的内容都是常用单词的普通用户来说,相信一本比较权威的大词典已经可以满足日常查询的词汇了。

相比翻译软件在词汇数量上的突飞猛进增长、 翻译软件的外观(界面)与交互却与n年前的没有太多差别。 当然,这也不能怪翻译软件公司。为什么呢?这可能还要从很早很早的时代说起:在北宋时期有位牛人名叫毕生,此人发明了称为我们中国四大发明之一的活字印刷术,活字印刷术的发明加速了人类文明的传播,ba la ba la… 总之,对人类的文明进步做出了灰常大的贡献。

斗转星移,时光飞逝,转眼到了21世纪的现代,神州大地的国人更是将毕生发明的印刷术精神发扬光大。可就是方法用的不恰当地方:毕生老先生是用来快速印刷书籍,国人则用来快速赚钱。相信大家都猜到了这个方法,它英文叫做copy,中文有多种叫法“抄袭”、“复制”、“山寨”… 并且各行各业都对此深有研究,并在祖国的发展建设中充分的很好很强大的运用此方法发家致富奔小康(假如毕生老先生申请专利的话,那他现在可是赚大了)。

从号称已经拥有自主知识产权的中国高铁到由外型到内部全方位抄袭 iphone,中国很好很强大的山寨精神在神州大地各行各业结出累累硕果。

不过也有从来不山寨的软件, 翻译软件就是一例。自从诞生到今日从来都是我行我素,坚持走民族路线不抄袭国外一分一厘。为什么翻译软件从来都不抄袭呢?因为英文不需要软件再翻译成英文,自然也就没有国外的用户体验好的翻译软件供国内翻译软件山寨了。于是,自从翻译软件诞生的那一刻起就注定要有杯具的体验。

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

我的“关于Hoto.com用户体验改进的提议”

2010年05月30日,星期日
在论坛上看到好豆网举办的这次提高ux的活动。一直在忙琐事,很想换换脑筋。就顺便做了以下的建议方案。准备的仓促,加上本人经验有限。说的不足之处请大家多提宝贵意见。另,提交的pdf电子会在六一之后放出链接地址。

Hoto.com用户体验改进

By DavidW

http://Davidw.me

网站目标用户分析

网站目标用户

热恋中的情侣
刚成家的小夫妻

目标人群特点

80后独生子女、不会做菜;
工作忙碌;
熟悉网络(能熟练使用QQ、Office等常见软件);
有一定经济实力;
受过高等教育;
热爱生活,偶尔想享受下做菜的乐趣或喜好美食;
在意别人对自己的看法;
平均每天至少有1-2小时上网时间;

 

吸引目标用户策略

对应策略

初次访客

让访客知道好豆网可以对其带来的好处
让其在不用花费太多精力的前提下,迅速找到其感兴趣的内容。
鼓励其与之互动

再次访客
(包括已注册的)

让其可迅速找到自己上次来访时感兴趣的内容。
鼓励其与之互动
鼓励其注册
鼓励其邀请好友

网站首页用户体验改进

1、首页好豆的名称与网址不符;
2、右上角放用户登录信息而不是网站信息;
3、导航栏词汇过于笼统,令人不知到底是什么意思;
4、通栏应告诉访者,好豆网是做什么的;
5、考虑到用户普遍比较懒、堆砌关键词要比输入搜索更好;
6、由于已有用户登录处,该处可去掉;
7、“今日推荐”栏目名称过于笼统,可改为“今日推荐美食”;
8、该处也是搜索,但与搜索区分开;
9、搜索出的结果与期望的相差较远,搜索关键词未高亮显示;
10、专题图片与网站整体内容不符合;
11、大家最近推荐的菜谱 不够吸引人改为“大家做的菜”;
12、“发布一份新菜谱”不够醒目;
13、其他页面在2屏以下,应考虑用简洁的展示方式;

 

网站首页改进线框图(请查看pdf文档)

 

视觉设计要点(请查看pdf文档)

中国传统美食,将其色彩加以提炼:

 

给好豆网的一点个人建议

 

讲点我个人从外部看好豆网的一点体会:好豆的视觉设计是可以的,但设计只是围绕美观的角度而单纯的做设计,并没有深入的研究目标用户的一些习惯与行为方式。人感知一个事物,首先要知道这个事物是什么?然后,是能够给他带来什么危害或益处?再后,应该如何行动?

访问好豆网时,首先应让来访者知晓好豆网站是做什么的。能够给他带来什么好处?如此,激发了来访者的兴趣后才会点击访问页面(此时仍旧不含注册的过程)。

当来访者对好豆网产生足够的兴趣后,才可能激发他注册成为用户的决心。在这一系列的过程里,需要通过一步步的不断激发来访者的兴趣来实现。

另外,文字是信息传递的关键性一步。网站的文字应该把信息清楚的传递给访客。好豆的有些文案却不能另访者明白:什么是好豆,什么是豆子?什么是探索好豆?什么是“牛肉”先生出演变形金刚?

再者,尊重用户的使用习惯也是需要关注的一点。由于好豆网的目标用户常去的网站(淘宝、qq等)用户登录均为在右上角,而且许多网站都在强化了用户的这一习惯。因此,好豆网不应改变其习惯。用户因为喜欢一个网站才会去注册、而不是因为该网站的登录框很大就喜欢登录。只需放在其常登录的固定位置即可。

最后,说的一点。给用户真正需要的信息,而不是给他一大堆乱七八糟的信息,让用户自己来挑选。两屏有用的信息,要比让用户在5屏幕的信息堆里面找自己想要的东西要更让用户满意。

本文的修改意见仅是我的个人观点,希望对好豆网有些帮助。

–davidW 于Shanghai

点击此处下载pdf电子文档

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

读过的交互书籍整理

2010年05月5日,星期三

读书是个累人的事,特别是读那些自己不想看的书。就像当年上学的时候,老师在上课我却在下面不停的打瞌睡。从一无所知到现在已经对交互设计有段时间的研究。阅读过许多交互的书,将曾经读过的那些书整理下使用树形结构展示出来,希望大家能够根据自己的实际情况各取所需。毕竟,一本针对个人现状所需的书要比读好几本讲一堆不能立即用上的要有用的多。

由于本人才疏学浅,加上个人观点等原因,难免对书做出不公平的评价。敬请谅解。

在读过的书中,我个人推崇的一些书罗列在下(当然,合适我的不一定合适你):

  • 交互设计之路
  • UCD火花集
  • 设计网事
  • 一目了然
  • 设计沟通十器
  • GUI设计禁忌
  • Landing page优化权威指南
  • Web Form Design
  • Web 界面设计
  • Designing Interface
  • 用户体验草图设计

点击查看原图:

我个人不喜欢《About face3》也包括当时红极一时的《About face2》。这本书可以这么形容:A、唐僧 B、苍蝇 C、观音姐姐 可能选择A比较恰当,形容成苍蝇就太不像话了。虽然是交互设计的开山之作,但它的内容实在很罗唆,读到后面都忘记前面讲的是什么了。如果有那位童鞋不但从头到尾看完了,并能深刻理解的不妨我们交流下,顺便也让本人膜拜下高手,哈哈。

还有那本《情感化设计》也不是我喜欢的类型,因为里面讲的东西不能运用到实际工作中去。也许是我功夫不够深吧,要再对交互设计有更进一步的了解才适合看这些书的缘故了。

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

译文:如何精简用户界面

2010年01月2日,星期六

简洁、易用、友好、直观。这些词语经常被提及,但在执行过程中经常被遗忘。这是因为软件功能的复杂性所导致的。如何处理好软件的复杂功能往就可以决定它的命运。一个复杂的界面会让用户不知如何操作。如果,减少复杂的操作过程并精简操作界面,那该软件的用户体验就大大的提升了。

去除无用的功能

研究发现:80%的用户仅仅使用软件20%的功能。而那些没用的功能不仅浪费开发时间,也使得软件更加难以使用(这些功能对用户的阻碍作用大于有用价值)。软件试图尽力可以把任何事都做好。而一个成功的软件应是简练精干的,可单独智能化的解决单个问题。

精简的软件可通过削减功能得到。通过默认去除的方法判断一个功能是否有必要保留。将软件所有的功能进行真正的筛选。如果该功能不能帮助大多数用户完成日常的任务,那么可以将其排除在外。删除功能是艰难的,当整理完毕后看到用户顺畅的使用软件。你就会知道多么值得去做这件事情了。

隐藏复杂部分

如果实在无法去除某个复杂功能,那么就将其隐藏。通常情况下,不常使用的功能要比经常使用的功能占据更多的屏幕空间。而优秀的界面应该确保最常用的功能在最显著的位置,将不常用的功能隐藏。

当我们重新设计CMS系统时,我们无法去除一个复杂的功能:批量编辑功能。在之前的版本里,在主屏幕上有一整排的批量编辑按钮。约占据了屏幕30%的区域,但我们发觉很少有人会用到此功能。我们的解决方法是,放置一个小图标并在旁边显示数值以示下拉列表里有几个选项。点击图标或数字则显示下拉列表。通过这种方式节省了大量的空间,也不会干扰用户使用那些最基本的功能。

最小化视觉干扰

我们已经讨论了通过去除与隐藏的方式降低界面复杂性的方法。但减少“视觉感知”的复杂性也是很重要的。最小化视觉干扰将使得界面看上去易于使用。减少视觉干扰的两个方法是:空白与对比。

空白,是指介于各个元素之间的间隙。它应是你默认的布局工具。经典法则之一:如果可以使用空白就不要放置其他设计元素。如果用这种方式布局,你会很惊讶调整界面的空白就可以完成布局了。

虽然使用空白多多益善,但也要尽可能的保证有对比感。设计理论家“ddd”说:设计师应使用最小的视觉变化来表达想法。事实上这就是意味着元素之间要有主次感。

你可以看到修改过的版本有很重的黑线,与之前的边框不同。那个版本视觉干扰更小呢?(当然是原来的更好)大量的空白区域减少视觉干扰并让人觉得更舒适。

做减法、重复使用,循环利用

当软件成形后,问题经常发生在程序的各个结合部分。存在的问题往往可以通过相同方法加以解决。界面中应使用相同的组件。使用相同组件的两个好处:减少开发所需时间;给人一致的使用体验,如果用户学会使用一个操作,他们就可以把相同的操作行为运用到进行其他操作中去。

在设计CMS过程中,我们在表单验证上花费了大量的时间。我们用红色框出无效的区域,甚至增加红色的提示框来说明每个填写表单的环节有多少错误。

在之后的开发过程中,我们在需求列表中增加了版本比较的功能。与其创建全新的框架,不如使用在已有的框架上进行改进。我们用蓝框标出已修改的表单,并使用蓝色提示框标注该区域。通过这种方法我们快速部署到用户已经熟悉的界面上。

重复使用元素是另一种可以减少界面复杂的方法,因为用户可以迅速的熟悉软件。

空白状态不应空白

空白状态是指界面无数据时的样子,如用户初次使用软件。作为设计师,我们花费大部分精力用来设计如何最好的展示内容,但时常忘记如何展示无数据的样子。

如何建立合理的默认值是很重要的。软件的空白状态通常是给用户的第一印象,用户通过第一印象来考虑是否来使用软件。好的空白状态可有助于用户学习使用软件的途径,帮助用户学会初次使用软件的基础操作。

Versions的mac版本显然在程序的空白状态投入了很多心思。在首次运行的时候,程序突出了两大人们可能会用得到的功能。

再次重复:不要忘记空白状态!

相关展示

我们已经见过大量界面混乱,复杂的软件。然而,有效的减少程序的复杂性有点难度。

Invoice Machine 的界面十分的简约。示例显示它非常节约扩展部分并注重细节。
Freckle只是确保你可以跟踪自己的时间。简洁的界面闪现活力,将例行任务变得有趣。
Image Spark黑白色的渐变。界面几乎没视觉干扰,易于使用。
Ballpark有简洁的界面,用色不跳。

Krop,其核心就两个表单:地址与关键词。

Fever网站的整个目的就是减少你与感兴趣博客之间的距离。它通过非常简单独特的方式来实现。
Screenr 是个惊人的简单截屏并发布到Twitter的软件。值得注意的是没有的功能它有,但其他类似软件有的功能它都没有。

Squarespace 在隐藏复杂功能方面做得很好。虽然它是网络的发布平台,它把功能隐藏在一个简洁的界面中。

总结

  • 减掉不必要的功能;
  • 然后隐藏那些不能减掉的功能;
  • 减少视觉噪音并重复利用元素;
  • 使用空白帮助用户;

(翻译略有删减)

原文地址:http://www.smashingmagazine.com/2009/10/07/minimizing-complexity-in-user-interfaces/

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

网站SEO也需要提升用户体验 – 2009年点石大会后记

2009年11月30日,星期一

09点石大会

昨天参加了在张江开的09年点石大会,本次大会可以看出:随着搜索引擎越来越看重于网站的内部。因此,做SEO亦需关注网站自身的用户体验。随着搜索引擎的发展,垃圾网站、糟糕用户体验的网站最终将被抛弃排在很后面的位置。

在大会的第一个演讲《2009中国SEO年末大盘点》中,提到搜索引擎有这样的趋势:搜索引擎正在尽量把好的网站位置往前调,把不好的网站位置往后调。如:百度在一次调整算法中把备案中心网站放在结果的第11位,但用户实际的点击量比前面的要高。于是,百度就会把其位置往上调整,因为搜索引擎知道了这个是用户真正需要的。由此可见,搜索引擎正在慢慢学会知道人们需要的什么样的网站。而有良好用户体验的网站自然会受到更多用户的关注。

即使好的网站现在排名不好也不用担心。搜索引擎会将好的网站往上调的。如果没有搜索引擎没有做到这点,那是搜索引擎的失败,迟早会调整过来的。搜索引擎对网站内在的质量要求越来越高。

SEO不再是单纯的技术,而将是与工具、产品、平台、行业等多方面的结合。

大会的最后一场演讲是关于UCD的《电子商务网站易用性》。现场演示了份在卓越网购买商品的全过程。一个老牌的电子商务电子商务网站用户体验差到如此地步,回来后我去查找了几个b2b的网站竟然也有这样的问题,真令人感到惊讶。关于这个问题会在下篇文章将会谈到。

展望明年的SEO趋势:

  • SEO会越来越火;
  • 国内会有专业的SEO工具推出;
  • google在中国边缘化;
  • 网站外部因素权重会越来越小,越来越关心内部因素(页面的点击量,跳出率);
  • 竞价会更加残酷(广告位减少、百度专业版投放广告词不再有行业的限制竞争加剧);

另附:贰零零玖年上海点石大会(PPT下载)

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)