What we choose is never what we really need.

12/22/2008

这样的翻译才是牛掰

这样的翻译才是牛掰,崇拜一下:

On the sixth day,God created man in his own image.
第六日讫 神之造人 赋以己貌

And now it's up to us to figure it all out.
时至今日 人之为人 自斟自酌

Right...wrong... Good... Evil...
正之为正 误之为误 善之为善 恶之为恶

To decide what drives our actions.In each of us is the capacity
决断之力 发自人心 显于外表

So what is it, then, that makes some choose selflessness, The need to devote themselves to something greater,
敢问缘何 抉择各异? 投身奉献 立身扬名 自私之人

While others know only self-interest? Isolating themselves in a world of their own making?
自私之人 与世隔绝 独处一己幻境

Some seek only love, even if unrequited,While others are driven by fear and betrayal.
求爱之人 不计回报 沦陷之人 惧与叛者

There are those who see their choices .As dark proof of god's absence,

纠其一生 神之无心 冷漠残酷

While others follow a path of noble destiny.
亦有仁者 命中注定

But in the end, good, evil, right, or wrong...
终于高尚 善恶轮回 对错交织 终我一生

What we choose is never what we really need.For that is the ultimate cosmic joke,
抉择使然 我心所向 永不可得 抉择使然 我心所向 永不可得

The real gift that god has left behind.
上帝所赐 天赋异禀

Heros第三季13集,传说中的伊甸园字幕组

方特一日

周六和和Roy,gogo小夏等人一起去方特玩了,哈~

芜湖很冷,原本天空是暗沉的,隐约有微弱的光,显得云层看起来更厚。

占地没有想像中大,项目也没有想像中多。但好在处于淡季,每个项目几乎都没有什么人排队,大型项目几乎都玩了一遍。

火流星(过山车)看起来那个气势磅礴啊……队伍排到我们,快要坐上座位时工作人员开始宣讲:晕车晕船恐高高血压等不要玩这项游戏。Crap,排到了再说,完全没有考虑良好的用户体验和我的心情。鉴于友情提醒和火流星的规模,我流露出临阵退缩的意图,但被gogo果断的拉住了,并被迫扣上了安全带。之前的空中飞舞项目我尚可以自如的和小夏聊天,但火流星的猛烈程度完全超出我意识可控制范围,我死命靠着右手的保护物,感觉空中翻转4次,差不多是极限了……弱……

恐龙危机很无趣,进入项目仓时工作人员发了呕吐袋,当下一惊。莫非室内也能这么刺激?待开始后才发现只是位置不停的左右前后晃动而已。无趣得紧,而且搞得胃很不舒服。

个人比较喜欢维苏微火山,就一辆莫有驾驶员的火车在山上乱窜的项目。没有上下翻腾和左右捣腾,速度极快,让人安全的处于愉悦与刺激之间。队伍排到我们,工作人员一开闸门,我和gogo如同奔腾的野鸡撒腿就冲第一个位置冲去(因为自以为安全)。坐定等待开始,后面的两个男生开始闲聊:“两个女生开车不安全啊。”离座位比较远的地方有一条横杠,要手够很远才能抓稳。gogo和我开始研究到底这横杠的作用是什么,抓还是不抓。还没出定论呢车就撒开了腿。由于速度狂快,我拿不定注意是靠着椅背坐还是抓着横杠趴,便自觉自愿的趴了下去。中途偷瞄一眼gogo,她也死命的趴着,脸都看不见。过程是愉悦的,虽然一直闭着眼,脸朝着地……事后gogo说中途她也拿不定主意,到底怎么坐合适,也偷瞄了眼我那埋头苦干的形象。下车了,两个男生又开始议论:“前面两个女生一直没抬过头啊~”……后来和Roy他们汇合,他们坐在后面,说起整车的人都直挺挺的坐着,看第一排两个鸵鸟一样的女生……挥汗如雨……

最后玩的项目是神秘河谷。过程so so,但最后刺激得紧,船从20米高的地方掉下来,耳边女生的叫声不似以往一般此起彼伏,而是在自由落体的过程中贯穿始终。虽然穿着严实的雨衣,还是全身湿透。结束后提供吹风机,很贴心:)

总结:还是淡季玩比较好。谁喜欢排队?拖出去斩首。

12/19/2008

帐号的创建和登入

帐号的创建和登入

帐号的创建和登入对用户来说是操作负担。

尤其是创建过程。有的网站需要用户回答几十条设计用户隐私的问题,看起来与网站服务毫无关联。冗长的问题总是让人感觉厌倦,私密的问题更加让人反感。网站要这些数据做什么?用户会放弃注册。若为了特定目的注册被迫填写不愿意提供的隐私数据时,很多用户选择填写虚假数据。

帐号登入看起来只需输入登录名和密码。可是为什么要登入?登入前后会有什么样的差异?用户讨厌必须登入才能使用服务。

那我们为什么要用注册和登入来阻碍用户?为了实现商业目的。把浏览者转变为顾客是大多数商业网站的主要目的。我们需要帐号的创建和登入,我们也需要用户愉快的访问我们的网站、对网站留下深刻的印象,成为我们的会员。

所以,我们的工作是让一切变得简单。负担越少,对用户的阻碍越小,对我们商业目的的实现帮助越大。

帐号创建应注意以下要点:

1 创建帐号前:

1.1 吸引用户注册的第一要点即为:理由充分、有说服力。

网站的特色和价值定位在哪里?用户可以得到什么?用户可以在网站上做什么?
语言应积极友好、简单明了,视觉上应具有可读性并易于浏览(通过逻辑分层,字体变化,图标表征以及站点导视等方式)。

1.2允许用户随时注册

鼓励用户注册、登录的最佳方式是通过情境激发。当用户通过某一情境开始了解网站后会更倾向于注册。允许他们可以随时随地成为网站会员。但不要再用户输入大量数据后告诉他们必须注册或登录才能发布信息。需要用户注册或登录时提供路径。

2帐号的创建:

2.1 指示注册步骤,标识帐号创建进度,简化注册过程

谁喜欢没完没了的回答问题?对用户而言,仅是一种达成目的前一种耗费时间和精力的机械运动。

我们应帮助用户尽快通过这个过程,通过步骤预览暗示用户需要多久完成这个步骤。

最理想的方式是通过循序渐进的方式鼓励用户逐步完成帐号资料的填写,优秀的网站可以近乎隐化的方式让用户在完成目的任务时不知不觉完成整个注册流程。第一步只需简单的创建帐号(创建帐号名、密码)即允许用户使用基础服务。

允许用户跳步并提供路径。

完善用户资料时区别选填项和必填项并将问题分类,便于用户花费最小的精力跨越障碍。

2.2 创建过程中给予明确提示信息

光标聚焦时显示提示信息,聚焦转移时验证填写信息。

完成页面所有输入域,点击动作转移按钮时验证整个页面信息并给予字段错误提醒。

用易于识别的图标区别提示信息、验证通过、报错信息。

3 帐号创建后:

3.1让新会员迅速融入,给予使用指引。

比如成列出待完善模块并通过高亮显示某模块或区域引导用户逐步完成各模块。但若用户多次登录都没有完成对应模块,考虑取消高亮显示。

3.2帮助用户建立在网站的社会关系,增加用户黏度。

帐号登录应注意的要点:

1 登录应当是完成任务的最后一步,永远不要把它作为完成任务的第一步。

登录对用户来说应当是使用网站的辅助手段,而非主要障碍。无论用户习惯于登录网站即登录还是习惯于以游客方式浏览,不要强迫他们。

2 登录域提供密码查找功能。

密码提示问题不应当是必填项。如果用户会丢失邮箱,用户也会忘记那些随手填写的密码提示答案。我们的宗旨是减轻用户负担。不是让用户记忆各种各样的账户名、密码以及密码提示问题的答案。

3 允许用户随时随地均可登陆帐号。

不仅仅是在页首提供登录链接。需要登录的重要功能处显化登录入口,并不要企图在用户登录后把页面统一引导至帐号管理页面,他们会迷失方向。如果用户在某个流程中,登录完成后把他们送回流程中去。不要破坏用户的操作线程。

帐号创建及登入的误区:

误区1:必须首先登录才可进行多种操作


Cisco网站要求用户必须首先登录才可看到待售的高尔夫产品,因为不是所有产品都面向大众。一些仅限员工购买(员工拥有折扣),一些仅限认证Cisco工程师。Cisco需要根据访问者身份区别展示不同产品。

而多数网站无须验证身份即可进行多种操作。

用户喜欢第二种方式。他们讨厌简单的操作(比如下载白皮书或者为选择商品付款)还需事先登录。一个在线购物者近期在可用性测验中表示:“我只想买东西而已,不喜欢和这些家伙建立什么关系。”

一开始就登录在旅游业闻所未闻。Midwest航空无须注册即可购买机票。顾客可以游客身份在线购买。当然,他们依然需要输入姓名、账单信息,但不会被迫创建用户名和密码。

误区2:过早请求登录

Cisco网站在展示产品前要求顾客登录(新顾客必须注册)。若在顾客点击“员工折扣”或“验证”链接后再请求登录,会降低购物者的受挫感。

Amazon就此创立了黄金标准,不到最后一刻不请求用户登录。点击“我的账户”后,用户在验证前可看到完整的帐号支持清单。某些情况下,比如点击即可购买,用户从不需要登录。cookie已经足够。

误区3:注册过程中没有阐述用户会得到的好处

注册对用户而言是负担。他们必须回答问题,甚至有些问题与当前任务毫无关联。他们必须记忆创立的用户名、密码,担心泄露邮箱、个人信息。通过长时间用户观察,会发现大量用户抗拒注册。

用户注册后会得到什么?Midwest航空在登录页面右方写明:用户可登录常用帐号预订获赠旅行,更改24小时内预订内容等好处。

误区4:隐藏登录按钮

Netflix网站的常客会直接登入个人首页查看状态信息、电影推荐。但清除cookies后或使用不同电脑时,则需登录。

Netflix网站的默认页针对潜在顾客出售网站产品,其注册按钮非常显眼。不幸的是,很难发现用户登录链接。这导致Netflix网站电话客服中心经接到询问电话,直到他们将用户登录链接做得更加明显。

误区5:没有把“创建帐号”或者“取回密码”做成按钮或链接

Spirit航空网站提供便于用户创建帐号、取回密码的方式,但指向这些功能的链接被藏在下拉菜单中,看起来似乎不可点击。对用户而言,他们看起来像说明文字。一些用户没有意识到这些功能就在眼皮底下而是在网站上到处搜索。

误区6:没有在关键位置提供登录功能。

Jared M. Spool观察到许多用户倾向于在最后一刻登录,也许是因为用户不希望记忆登录信息导致分心或者也许是因为用户专注于当前的任务。若登录对用户有错帮助时(比如组织用户重复输入账单信息),他们会突然之间很乐意登录。

优秀的网站预测到这些情况,用户可便捷的登录。Orbitz网站允许用户先进入购买程序后给予简单的登录选项以获取航班所需参数,比如用餐、通道、窗口信息。

误区7:注册时要求用户填写过多信息

常见设计误区在于考虑一旦用户开始填表回答问题,网站希望用户填写事它们不能获取的一切信息。(Cisco网站长达4页的注册进程中,要求用户指定搜索结果列表的显示数量。)

但用户希望回答的问题越少越好。优秀的网站仅要求用户提供用户名和密码(若网站使用用户邮箱并已有相关记录,则仅仅要求密码)。其他资料或个人信息尽在以后需要时请求用户填写。

误区8:未明述用户信息的用途


尝试下载工作需要的技术文档时,一位用户问道:“他们为什么需要知道我的宅电?”

显然,用户很敏感。Virgin America航空公司的设计师这样解释他们为何需要用户宅电:“以防需要联系的情况,我们至少需要一个电话号码。”请求用户手机、宅电、公司电话时,告诉用户原因。

Midwest航空公司表述得更加明确:“请提供电话号码,我们会在改变预订航班时通知您。”谁不想在这种情况下得到通知?

简而言之,我们需要让用户在注册前知道我们是做什么的,能为他们带来什么。注册时我们需要帮助用户尽快完成表单填写这一过程。注册完成后需要及时引导用户,把他们转变为真正的深度用户。不要让用户感觉困惑和困难,用各种手段激发他们的兴趣,引起他们的自发注册行为。无论用户是否是网站会员,都不要用登录把他们挡在门外。如果用户感觉受挫,需要付出代价的只会是我们自己。


参考资料:
Jared M. Spool:Account Sign-in: 8 Design Mistakes to Avoid
Alexa Andrzejewski:《Patterns for Sign Up & Ramp Up》

12/05/2008

Back To Top

Back To Top链接是页内链接的一种。同大多数起导航作用的链接不太一样,它不会将用户引导至新页面,而是回到原有页面页首。

很多网站认为Back To Top链接是友好链接,页面较长时提供Back To Top功能可帮助用户节省时间,避免鼠标滚动拖动垂直滚动条。

然而很多用户体验专家给予了反对意见。

Jakob Nielsen主张避免页内链接(Within-Page Links)。

理由在于页内链接违背用户思维模型。

网站尽量不要使用页内链接,道理同不建议使用PDF文档和点击mailto链接没有任何警示就突然冒出邮箱一样。

用户对点击链接已经产生了非常强烈的思维模型,由以下元素组成:

1 链接会引导至新页面。
2 点击后原页面会消失。
3 窗口加载新页面会取代原有页面。
4 首先看到的是新页面顶端。
5 倒退按钮(Back)会引导至之前浏览的页面。

由于几乎所有链接都如此,用户强烈认为网络都是这样运作的。该思维模型意义重大。

页内链接破坏了用户对链接形成的思维模型所有5个要素:

1 页内链接目的在于窗口滚屏而非指向新页面。这让用户感觉疑惑:用户假设将得到新的信息,但若在点击页内链接前使用滚动条,他们会看到已经看过的内容。

2 原页面并不消失,依然出现在窗口。然而,由于用户认为已到达新页面,他们会尝试区分“新”信息和原信息到底有什么不同——很明显,这是徒劳的。

3 浏览窗口不会加载新页面:依旧是同样的数据,只是位置不同而已。

4用户常发现自己在页面中间而非在页首,没有任何导航条或者其他期望的页首设计元素。

5 点击倒退按钮不会引导至前一页,而是同一页滚屏前的状态。这会造成点击页内链接前使用滚动条回到首页用户的加倍困扰。

Jakob Nielsen认为可以使用页内链接的情况为:

事先考虑用户对网站链接的期望。比如使用mailto链接时明确指引用户点击该链接用户会启动邮箱(比如XXX@XXX.com或者“邮件联系售后服务”)。

必须使用页内链接时亦需要说明点击链接后的结果。

若事先告知,页内链接有3项可接受用途:

1 以字母顺序排序的页面很长时,页首可显示排序字母,并链接至页面相关处。

2 FAQ中可在页首列举所有问题并链接至页面相关处。

3 少数其他情况下页面可以以内容列表形式开始,链接至页面下方相关章节。

这些例外共有一种格式:页面过长,页首上方给出总览,链接至用户需要查看的相关章节。

但即便如此,最好尽可能避免页内链接。只有在页面极长的情况下,节省用户时间才比避免让用户感觉困扰更重要。

当然,由于交互(Interactivity)和导航不同,因此只要用户看来并非是指向新页面的动作,同一页内产生交互当然没有问题。

而“Back to top”链接则可以被避免,因为滚动条可提供一样的功能。通常,单一、常用的交互方式较为合适,避免用户思考为了达到相同目的需要思考选择何种交互方式。思考时间常超过采用捷径所需时间。(页面特别长时例外,但我们首先就应当避免出现特别长的页面。)

也有其他人反对“Back to Top”链接。

他们认为:

Back to Top链接并非总是有用。比如页面或文章很短的网站并不需要。由于整个页面始终可见,用户不需跳回页面顶部。若这类页面出现“Top”链接,点击不会产生任何作用,让人气恼。当前多种屏幕分辨率使得该链接不可用、不必要,这是需要设计是不是用它的另一原因。因此,页面较短的情况下不建议使用Back to Top链接。

同时Back to Top链接存在的重大问题在于:对浏览器导航按钮会产生影响,对浏览历史不利。Back to Top链接和其他链接一样是锚点,点击浏览器“后退”按钮会引导用户到现浏览页面底端,而非前一页。

其他反对意见有:

1 Back to Top链接分散了页面实际内容。网页包括了太多组成元素,增加新的元素会让存在认知障碍的用户使用起来更加困难。

2 页面打印时Back to Top链接没有任何意义。(可通过CSS来阻止打印时显示,但大多网站不会这样做。)

3 Back to Top链接阻碍用键盘跳转链接的使用。键盘可替代鼠标点击,对于一些用户尤其有用,比如肌肉运动障碍者。此外很多人更倾向于使用键盘,因为比使用鼠标更快捷。

4 同时,使用Back to Top链接扰乱了基于语音的用户代理。没有人愿意在使用语音合成器听网页内容的时候在每个段落最后听到“Back to Top”。语音类用户代理通常有自己的链接阅读模式,按顺序阅读网页链接。

5 每个浏览器都有一些移动到页首的内置工具(比如使用Home按钮)。

6 Back to Top链接具有误导性,用户也许不会回到整个页面的顶端。也许链接仅指向文档内部。(因此“To Top”或者“Start of page”更适宜。)

7 “Top”意义模糊。什么顶端?若第一次看到这个词,它究竟是指是页首,网站顶端还是其他?(而每天都有无数人有生以来第一次使用网络。)正因为这样,“Start of page”表述更合适,但少有人用。

8 Back to Top链接在整个网站中并非始终显示。

那么到底是否需要Back to Top链接呢?

我们的结论是:

首先避免页面过长。页面较短时,Back to Top链接不仅无用,而且给用户带来困扰。

若出于某些原因页面无法精简时,可以提供Back to Top链接。此时,该链接传达的是友好的用户体验,也印证了优秀设计源于关注细节这一理论。

当然,其他页内链接也并非需要绝对避免。可用性领域中,没有任何一条规则可以通用于所有情况。

美国政府研究页首使用锚链接(study done by the US government)时得出结论:

信息量丰富的网页页首使用页内链接可帮助用户直接找到所需信息,减少拖动滚动条和浏览时间。可用性测试中,当用户必须拖动滚动条或浏览大量内容来查找信息时,常常失败。

同样重要的是,这些锚链接帮助用户立刻明白页面包括的信息要点。

Back to Top链接的位置:

Back to Top链接最常出现在页脚处。一些设计师长将其放在页脚左端,一些出现在页脚中间,也有在右端的案例。将该链接放在内容区域左端,直接呈现在文章下方的情况也常见。

Back to Top链接还常被用户FAQ、帮助和网站地图,有助于分割章节或段落,帮助用户快速回到有主导航的页首。

Back to Top链接的创建:

创建“Back To Top”链接时,大多数情况下定义一个空锚点,放在 <body> 后即可。


然而,老的浏览器,特别是过时的浏览器难以识别这种标记。另一种解决方案是采用真正的anchor,明确定义并放在 <body> 后。


更新:能够达到相同目的另一种方法是使用wrapper或者header ID,由于它避免了多余标记,因此受到推崇。采用wrapper ID的div-container,可使用以下标记:


当然,链接本身不一定是文字,可以是图片、按钮或其他任何元素,前提是必须符合用户期望,避免用户产生困扰。

Back to Top链接的措辞:

确保访问者能迅速理解链接功能,不会感到困扰。比如“返回”(Return)就不合适,用户无法立刻理解点击后会返回到网站首页、浏览历史中的前一页还是页面顶部。

注意:

设置Back to Top时,应当明确表达的含义是回到首页还是回到页首。“Home”链接与“Back to top”链接两者皆然不同。如果决定采用“Back to top”链接,确保访问者能立刻理解它与“Home”链接的不同之处。


错误:图片看起来像首页链接。


首页链接。

页脚首页链接的另一个例子。


案例:







无法理解为何遥控操作被放在此处:本应可点击,事实却不能。
此处Top图标随着垂直滚动条移动。

Top链接为导航的一部分。看起来很好,但乍看会有些困扰。


参考资料:
1 Jakob Nielsen:Avoid Within-Page Links
http://www.useit.com/alertbox/within_page_links.html
2 Jakob Nielsen:Within-Page Links for AJAX, "Return to Top", Skip-Links
http://www.useit.com/alertbox/within_page_links_comments.html
3 A Short Story About “Back To Top” Links
http://www.smashingmagazine.com/2008/11/27/short-story-about-top-links/
4 “Back to Top” links considered harmful
http://www.cs.tut.fi/~jkorpela/www/totop.html
5 “Back to top” links (anchor links)
http://freeusabilityadvice.com/archive/24/back-to-top-links-anchor-links

11/26/2008

Taobao UED招聘, 一点也不UED

1 招聘页面的视觉重点集中在页面中心,而非具体职位,在页面信息量并不多的情况下,招聘职位成功被匿到了第一屏之外。












2 点击职位后,页面中心的电脑屏幕显示出具体信息。看着看着突然职位要求背后默默出现人影开始播放Flash,一时之间无法找到如何让人物“小马”闭嘴的方法,倒抽一口凉气。

3 若点击马上应聘,系统默默的开始出现安装outlook的提示,继续倒抽一口凉气。

4 职位描述可以点击右上角"X"关闭,Flash关不掉?原来这个页面重要的不是招聘,是Flash里的小马哥?接着抽凉气。

5 对用户体验分析师职位的最后一句岗位要求描述如下:"思维活跃,熟悉互联网用户群体英语四级以上,读写熟练。" 如果没有歧义就是对中文的要求过低,有歧义的话只能说明UE做得不细致,这也解释了为何如此之短的句子连断句都断不好。









连续抽了这么多口凉气后终于明白,这些都是蓄意的。故意把UED做差,让应聘者深刻的体会到Taobao并非遥不可及,她也有人性化的一面,也不完美,也易出错……

11/24/2008

电影里的童话




最近看了两部童话风格的电影《Stardust》(星尘)和《The Golden Compass》(黄金罗盘)。

Stardust是一个叫做Tristran男孩为了爱的女孩许诺带回天上的流行的故事。有女巫,有王子公主。星星是美丽的女孩,海盗船长会穿着粉色的裙子跳舞。

The Golden Compass是一个叫做lyra的女孩解救一群被邪恶教会囚禁的孩子的故事。有精灵,有吉普赛族人,有教会。有会战斗的白熊,有片尾莫名冲出来漫天的女巫。叔叔原来是父亲,恶人原来是母亲(—_—)。

先看Stardust,3分钟内就能够吸引童话爱好者继续看下去。后看The Golden Compass,顿觉得童话的开头莫非都是如此。片中一而在再而三的描述Stardust,让人有种置身于姊妹篇的幻觉。

如果前者能得到5分,后者只有3分。

前者的节奏紧凑流畅,看完嘴角都是笑意。童话本应如此。后者节奏也是紧凑的,却断断续续。故事可描述性太多,交代得太少。简单的故事加上丰富的想象力,便处处生花。一旦内容强大,驾驭不了则易处处有败笔。故事结构随处可见软骨,意象也不能证明一个编剧或者导演有多牛掰。

结构很重要。内容很重要。细节很重要。

11/12/2008

[lucy van pelt] nico



听到了美丽的声音。淡淡的,冷冷的,暖暖的。

lucy van pelt 的nico

目を覚ましたら 闻こえてくる
雨音に耳をすます
明けない夜に 升るはずの
阳の位置を思い浮かべる

ふつりあいな程 大きな黒い伞
薄明るい空に

手を伸ばし さしたら
小さな暗になった

近すぎた影 远い嘘
静かすぎる部屋は嫌い
确かめる间もないままに
なぜ急いで沈むのだろう

何も见えない夜は 见失わないように
苛立ちと愿いを
ろうそくに 灯せば
寂し気な天体になった

もしも言叶が星よりも
数えきれない程あるなら
伝えられるかもしれないけど
そんな大切なものではないと思う

そこまで 歩いてゆこう

雨が降りやんだら
穏やかな朝焼けが
眩しいだろう

我们会遇见很多人和事,经历许多突然的沉淀和安静。nico开始的刹那间时间因为声音而静止。顿了一顿,重新开始前行。缓缓的流淌。很多一个人的独孤和温暖袭上心头。


网站搜索结果页建议

网站搜索结果页建议

原文:Tips on site search results pages
作者:Graham Charlton
翻译:october
校对:toMMy

Grok.com网站介绍过电子商务诀窍,这次介绍如何优化网站搜索结果页。

Daniel McGuigan认为,访问者通过导航、登陆页或者首页都找不到需要的东西时,搜索框是访问者能在网站上找到东西的最后一条路。

的确如此,但如果访问者已经有了明确产品,也会一开始就使用搜索框。

根据Coremetrics对英国网络销售的近期统计数据,八月份35%的访问者使用了网站搜索,搜索转化率7.4%。

以下是Daniel的网站搜索建议,其中也有些我自己的想法:

提供分类选项

给用户筛选选项,帮助他们缩小范围,从而避免结果列表很长。

我也推荐将结果页面的产品显示数量限制在10以内,甚至应当在提供筛选之前。

纠正拼写错误

拼写很容易出错,所以Daniel推荐要么提供给用户想要的内容搜索结果链接,要么直接显示出结果。

利用搜索数据改进

绝佳点子,网站搜索提供了更加了解访问者的有效来源。比如,观察客户输入的条目,将来可以用来优化搜索结果。

最近与网站搜索分析专家Lou Rosenfeld交谈时,提到了下面的内容。

为搜索失败提供选项

Daniel建议,搜索结果为空时提供类似产品,如果没有类似产品,就提供特色/热门产品链接。

以下是E-consultancy的建议。

搜索框中保留之前的搜索项。

显示搜索结果页面时,搜索框中保留原始搜索请求,便于用户修正搜索项目而不用重新输入。

显示非产品搜索结果。

有些客户会像搜索产品信息一样搜索退货或运费信息,搜索结果页面应当包含这类信息。

有些网站同时提供比如科技信息或者其他广告等相关内容,将其显示在网站搜索结果中同样是一个好注意。比如,在这个search for a car seat案例中,Mothercare网站提供了安装、法规信息文章。



11/05/2008

Aspects of Design Quality

Jakob NielsenAspects of Design Quality 再次说明了短板理论在用户体验领域的应用。

导航、内容、网站架构固然重要,首页可用性、搜索、可获取性、网络表现一个都不能少。

10/16/2008

何时采用何种用户体验研究方法?

何时采用何种用户体验研究方法?

作者:Christian Rohrer
原文:When to Use Which User Experience Research Methods
翻译:october
校对:toMMy

综述:
用户体验研究方法能够回答很多问题。将研究方法分解到3个关键维度和产品典型发展阶段,就容易理解何时使用何种方法。

用户体验领域总是伴随着大量研究方法,包括已经被证明有效方法,比如基于实验室的可用性研究,最近发展的研究方法,比如赞许研究(衡量美学诉求)等。

每个项目中不可能使用所有研究方法,但大多数设计团队都混合使用研究方法,深刻理解项目,更好的进行设计。关键问题是什么时候做什么事。为了更好理解何时使用哪种方法,应当从以下3个维度了解这些研究方法的差异:

• 态度维度vs.行为维度
• 质量维度vs.数量维度
• 网站或产品使用背景维度

下图是一些常用研究方法的维度表现:





每个维度可从每种研究方法回答的问题以及最适用目的种类区别这些研究方法。

态度维度vs.行为维度


该项区别可总结为:对比“人们说什么”和“人们做什么”(两者常常大相径庭)。态度维度研究的目的通常是理解、衡量、说明人们信念的变化,因此被大量用于市场部。

虽然大多数可用性研究应当依靠行为维度研究方法,但是采用自我陈述式信息的方法依然非常有效。比如,卡片分类法能深入了解信息空间的用户心智模型,决定网站最佳信息构架。调查能衡量态度或收集自我陈述式数据,追踪或者发现网站重要问题。由于多种原因,焦点小组对可用性目的帮助较少。

另一端是主要关注行为的研究方法,通常最小化自身影响来理解“人们做什么”。A/B测试仅更改网站设计,但为了观察网站设计对行为的影响,其他都不做改动,而眼动测试理解用户如何与界面设计进行视觉交互。

维度两端之间是最常用方法:可用性研究和实地调查,使用大量自我陈述式数据和行为数据,既可用于态度维度研究,也可用于行为维度研究。但我们通常倾向于行为维度研究。

质量维度 vs. 数量维度

质量维度研究和数量维度研究的本质区别在于,前者通常直接获取数据,而后者则通过诸如调查或者网络服务日志等方法间接获取数据。比如在实地调查和可用性研究方法中,研究者直接观察人们如何使用(或者不使用)科技来满足自身需要。研究者可以提问,研究行为,或者甚至可以调整研究草案以更好完成目标。数据分析通常不是数学问题。

相反,因为数据收集方法(比如调查工具或者网络服务日志)获取大量数据是数字编码形式,所以数量维度研究方法得到的观点源于典型数学分析。

由于两者之间的本质差别,质量维度研究方法更适合回答为什么或者如何解决问题,而数量维度研究方法更适合回答问题的种类和数量。下图阐述了这些问题在第一组维度中的表现:





产品使用背景维度

最后的维度与参与者在研究中是否/如何考虑使用网站或产品有关。它可被描述为:
• 自然或近似自然的使用产品
• 根据脚本使用产品
• 不使用产品的研究
• 混合型方法


研究自然使用产品时,目标是最小化研究干扰以便尽可能真实理解人们的行为或态度。许多人类学领域研究都尝试这样做,虽然观察时总会存在偏见。比如拦截调查和数据挖掘/数据分析技术。

产品使用的脚本研究(scripted study)是为了以具体形式关注信息,比如重新设计的流程。脚本程度可以根据研究目标有所差异。比如,为了得出可靠的可用性指标,基准研究的脚本通常都很严密。

针对人们不使用产品的研究不局限于使用和可用性问题,比如品牌或者更大的文化行为研究。

混合型研究方法采用产品使用的创新形式达到目标。比如,共享型设计允许用户与设计元素交互、重新安排设计元素并讨论他们为何如此选择。

表中的大多数方法可被用于一个或多个维度,为了迎合多重目的的需要,有些研究方法甚至在同一项研究中可被用于多个维度。比如,实地调查关注人们说什么(人类学访谈)或者人们做什么(延展性观察);赞许研究和卡片分类法均可表现为质量维度和数量维度;有无脚本均可进行眼动测试。

产品开发阶段(时间维度)

选择研究方法依据的另一项重要区别是产品开发阶段以及相关目标。

1. 决策:产品开发的初始阶段,必会考虑新点子和将来的机会。该阶段的研究方法大相径庭。
2. 优化:进入持续优化选择的设计方向时,最终要决定“做/不做”。该阶段主要采用格式化研究方法,减少执行风险。
3. 评测:某些情况下,如果网站或产品可供足量用户使用,就可以开始衡量做得是否出色。

下表总结了这些目标,列出了与相关的阶段典型研究方法:




艺术还是科学?

虽然许多用户体验研究根植于科学实践,他们的目的并非纯科学,依然需要根据利益相关者的需要进行调整。因此,本文这些方法描述是通用准则而非严格划分。

最后,工作成功取决于对提高网站或产品用户体验方面产生多大影响。这些分类能帮助你在合适的时间作出最佳的选择。

10/12/2008

Simple is beautiful——my mint iriver mplayer


刚入手iriver 的mplayer,颜色为mint。

原本打算黑或者白,vanilla不是想像中的乳白,颜色偏暗,据说第二代没有黑色,故此重新选择,在小二的帮助下拿下了mint。颜色很轻,非常别致。

因为个人走路坐车看东西容易晕车,并且没有打算在小屏幕上看视频,对音质也稍有挑剔,所以放弃了mp4。

mp3领域iriver有多牛掰很多同学都深有所感,因为飞利浦的芯片在视频方面没有音频出色,因此很多mp4被迫放弃,但在mp3中飞芯就是王道。iriver 早年一直使用飞芯,此次mplayer与飞芯重新会师,成为让我垂涎的重要理由。

入手后迫不及待的拆装,比起一代的纸盒包装,二代的透明塑料盒包装更加别致,mplayer真空插在盒子中央。拆开细看,实物上印有序列号,光泽度很好,工艺很是精细,外形简单别致,功能和操作非常简洁。现在很多产品一味追求通、大、全,mplayer返璞归真却毫不逊色。

音效和想像中稍有差距,清透有余,浑厚不足。但整体表现力尚佳,很是对得起这个价位。

总之,很喜欢。

Simple is beautiful.

9/27/2008

恋声

总是温柔的声音让人心温暖。

比如KOKIA,温柔而透明。

比如南拳妈妈,安静的温暖。

比如plastic tree,没有杂质的柔声细语。

比如石田彰,比如关俊彦,比如大谷育江,比如藤田惠美。

以前并未觉得Maximilian Hecker的声音特别。今晚重听lady sleep,突然找回了丢失很久的平静。人总是不自觉的陷入假象,逼迫自己紧张而不自知。突然被触发,像昏暗且满是灰尘屋子,被突然拉开了帘子,看到飞扬的尘屑,看到斑驳的光,看到慢慢散去的阴霾。

9/24/2008

反省……

9月20日新版上线的时候跑去北京玩了,愧对所有坚守在一线的同志们……据说小二同志坚守到凌晨一点,汗水哗啦啦的流淌……

更加让我惭愧的是据说上线时英文版庆出现了不少问题……比如不地道的英文等等,心虚到国庆都不敢提前走了……

9/11/2008

网站地图可用性


翻译:october

校对:toMMy

原文:Site Map Usability

概述


网站地图最新的用户测试表明,网站地图作为次级导航助手依然非常有效。在我们长达7年的研究中,网站地图比过去更加容易使用。


通过信息空间的视觉表现帮助用户理解可以去哪,是最老的超文本链接可用性原则之一。网站地图的可视化效果能对网站或者企业内部网的主要导航特征提供有效补充。


网站地图最主要的好处在于让用户一眼就能了解网站概况。它使用一个单独的完整页面来表达网站信息构架(IA)。如果设计良好,该概况会包括层级信息,但信息量又不会多到让用户无所适从。


我们将网站地图定义为充当网站指南的页面。我们研究的网站地图有很多表单形式,包括字母索引,动态图表,二维列表。网站地图包括一系列特征、外观、名称,包括“指南”、“概述”、“索引”、“目录”。


两项研究


为了发现用户如何使用网站地图,我们进行了两轮可用性研究,测试了一系列的网站地图设计,观察用户如何执行代表性任务。


共有30位用户参与了网站地图测试。两组,每组15位。


我们测试了以下20个网站,包括电子商务、营销导向、高科技公司、B2B、内容、非盈利组织和政府机构网站。




Sites
Tested In Study 1
Sites
Tested In Study 2
CDNOW
(e-commerce)

Documentum (high-tech product)

Interwoven (high-tech product)

Mercedes Benz USA (marketing site for cars)

Museum of Modern Art (non-profit)

New Jersey Transit (local transportation)

Novell (B2B)

Salon (online magazine)

Siemens Medical Solutions (B2B)

United States Treasury Department
(government)

Administration
on Aging (government)

BMW USA (marketing site for cars)

Citysearch Boston (visitor info)

Harvard Pilgrim (health insurance)

The Knot (wedding information/e-commerce)

Marriott (hotels, with online booking)

Scholastic (children's books)

Texas Roadhouse (restaurant chain)

TiVo (high-tech product)

 
在两组测试中,我们首先引导用户进入首页,指定任务而不特地提及网站地图。该项测试评估有多少用户会自发使用网站地图。在后续的每组测试中,如果用户没有主动使用网站地图,我们会特地要求用户使用。


测试1七年前就曾经进行过。对比测试1和测试2,我们能够评估网站地图可用性的长期趋势。


几乎没人使用网站地图


几乎没人使用网站地图。测试2中,我们要求用户了解网站结构,仅有7%的用户使用了网站地图。这个数字比测试1低27%。


好消息是用户在少部分需要的情况下能够找到网站地图。测试2中,我们要求用户“找到列出网站每部分的网页”时,67%的用户成功发现了网站地图。


保持简单


网站地图有两条主要可用性指南:
* 以“网站地图”为名,在网站中始终将其作为标签链接至网站地图页面。
* 使用静态设计。不要提供交互网站地图工具。网站地图应当直截了当的呈现(如果需要的话可以使用滚动条)。

这些原则从第一版报告开始就没有变更过。动态或者交互的网站地图在7年前曾导致可怕的失败,在测试2中依然带来了麻烦。网站地图的目标是让用户了解信息概况。如果用户要费力才能查看地图的不同部分,网站地图就失去了优势。


网站地图毕竟只是地图,它不应当成为另一个导航。


我们一再发现,用户讨厌非标准的用户界面。这些非标准的用户界面迫使用户为了某一个网站学习特定的网络使用方式。网站地图应当简洁,链接布局紧凑,用户一眼就能看到所有东西。


我们所要求的唯一有些难度的事就是使用多栏布局。测试2中,使用多栏布局的网站地图中,61%的用户轻松完成任务,在单栏布局的网站地图中,此数据为47%。


多栏网站地图效果更好,因为用户较少使用滚动条就可了解网站结构。在网站地图中使用长滚动条,用户容易迷路。他们的典型行为是会多次上下拖动滚动条,经常有意无意的错过内容。事实上,用户经常在开始时迅速浏览高层目录,然后回到页面上方进行更加细致的搜索,有时多次重复这一过程,目的一次比一次更加明确。相反,多栏布局网站地图便于用户快速浏览所有目录和子目录,便于在深入前把握全局。


网站地图为何而存在?

7年前,我们调查的50个网站中48%使用网站地图。今天,我们调查的150个网站中71%使用网站地图,我们Intranet Information Architecture报告中分析的56个企业内部网59%使用拥有网站地图。同时,两项调研进展过程中,大多数网站地图在一定程度上变得更加有用。


现在虽然流行出色的网站地图,但用户并没有经常使用。那么网站为什么要制作网站地图?因为它们能够帮助用户了解你的网站和你的服务。


我依然推荐使用网站地图,因为它们是唯一能为用户提供网站全局纵览的页面。也许有人主张网站导航提供了同样的功能。比如,一些导航提供下拉菜单,用户能看见网站每个部分的导航选项。但即使有这些菜单,用户也只能一次浏览一项内容选项。


网站地图允许用户在一个页面上看到所有可用内容,并能够将用户直接送至其希望的页面。网站地图同时也能够提供简洁的用户界面和有价值的内容,帮助用户在内容杂乱的网站上找到信息。然而网站地图并非万金油。网站地图无法解决网站结构的固有问题,比如混乱的导航结构,糟糕的版块命名,毫不协调的子站点。


如果网站地图需要大量设计投入,它们不会带来有足够的投资回报率。但由于我们的指南都要求网站地图保持简洁,制作一个网站地图不需要很多工作量,它会给一些用户带来帮助。更重要的是,它会在关键时刻帮助用户:用户在网站迷路,没有找到网站地图时也许会离开你的网站。


网站地图是次级导航栏,与面包屑导航一样。的确,支持网站地图的主张也类似于支持面包屑导航
* 它们不会对不使用者造成影响
* 它们的确对一部分人有帮助
* 它们不需要花费过多成本

9/10/2008

Hey! Cheer up!



看到这张脸心情就会立刻好起来~~

9/09/2008

Last Friends


Last Friends

近期在看的一部日剧。剧里面都是寂寞的等爱的人。每个人心里都有残缺,无法显示真实的自己,却温暖了身边的人。

片头+音乐:
片头制作得非常出色,眼神交错,命运相织,世界和内心原本就是纯白。原本早就听过宇多田光的prisoner of love,但每当片头和剧情中想起她明亮的声音,心依然不由得为之一震。音乐与剧情结合至产生共鸣。

印象很深的话:
Ruka:“不要在想了,不要再想你的事了,不会在这么担心你了,因为什么都做不了,你都说了从来没被爱过。 ”
Michiru:“Ruka,救救我。”

编剧:
浅野妙子 Taeko Asano

演员:
长泽正美 Masami Nagasawa——蓝田美知留
上野树里 Juri Ueno——岸本琉可
瑛太 Eita ——水岛武
水川麻美 Asami Mizukawa——泷川绘里
锦户亮 Ryo Nishikido——及川宗佑
……

要用尽全部的爱。因为时光回不来。因为感情不由人控制。她暧昧的飘过,突然的死亡。

Caroline's Corner: 表单中的按钮——如何放置及命名

Source: Caroline Jarrett, 3 September 2008 Submitted by Caroline Jarrett

翻译:october

校对:toMMy

原文:Caroline's Corner: Buttons on Forms - where to put them, and what to call them

经常有人问我:“OK按钮放在Cancel按钮的左边还是右边?”

还有另一种常见问法,要不要把“Cancel”换成“Back”、“Previous’”,或者“Next’”。


问题简单,答案复杂

我很乐意告诉你:OK按钮放在左边。或者放在右边。或者其他容易描述和记忆的方式。正如表单中的多种情况,最简单的答案不一定真正合适。有谁希望答案总是视情况而定?可用性中视情况而定的问题太多了。然而真正的答案依然是“视情况而定”。但我们可以从“视情况而定”中转移视线,我来告诉你一些规则。


规则1:参考其他表单


首先应当找出用户使用的其他表单,看看那些表单中如何放置按钮。比如,Jakob Nielsen几年前指出大多数用户在其他网站花费的时间远多于在你的网站花费的时间。或者如果你在创建一个与Microsoft Office软件共同使用的项目,那么你的用户倾向于期望你的项目沿用Microsoft Office软件惯例。如果你的用户同时使用PC和Mac,情况会有些棘手,因为这两种操作系统有些冲突的操作习惯。做些市场调研,看看哪种操作系统对用户更重要,你需要仔细考虑表单应遵循哪种操作系统。


规则2:把按钮列放在对话结束的地方


用户点击按钮表示结束本次对话后,表单继续询问用户问题,这是最大的问题。用户提交后接下来就是系统的任务了。此处需要按钮,它通常被称为“OK”、“Send”、“Submit”或者“Next”。要点是点击后任务结束。我见过的一个常见错误是:把重要指示甚至所有问题放在最终按钮的后面。对用户来说那是隐藏区域。不要这么做。


规则3:决定是否需要按钮


不久之前,我写过一个专题“The Piece of HTML created just for me: Reset”。主题是“Reset”按钮对表单设计人员来说很方便,填写表单后点击Reset”按钮清除输入内容。不幸的是,大多数“Reset”按钮都无用,对其他用户来说很招人厌。真的需要其他按钮吗?用户希望放弃辛苦填写的数据吗?如果不是真的需要,就不要用。


规则4:决定按钮是不是看起来可点击


有时表单末尾明确需要两个或更多可能的动作:也许是 “Send” 和 “Throw away my work’”或者 “OK” 和 “Cancel”。Luke Wroblewski将最重要的动作称为“主动作”,其他称为“次动作”。他和Etre公司就表单中如何放置“Submit”和“Cancel”按钮以及是否将“Cancel”做成链接或者降低其视觉比重做了一些测试。


令人惊讶的是,他们发现将两个按钮放在一起的方案效果都差不多。仅有一例失败,就是将“Cancel”放在表单下方,将“Submit”放在远离右边的地方。(题外话:我曾期望将“Submit”放在表单下方,“Cancel”远离右边放置的效果等同于将按钮放在一起的方案,但出于一些原因没有测试该方案。)


就完成表单的时间而言,按钮看起来相似的方案效果最佳。降低Cancel按钮的视觉比重或者做成链接的方案会花费用户稍长时间。然而,重要的是用户倾向于以下方案:“用户在Cancel视觉比重较少的方案中表现得最佳,即使这些方案会降低他们的速度。这表明用户更关心避免数据丢失,而不是快速提交表单。”我认为几乎在所有案例中,精确度和用户舒适度比表单填写时间稍胜一筹。因此我会减少此动作的视觉比重——但也许会带来灾难行为,比如说“Throw away all my data(清除数据)”。


该规则有个补充:确保按钮看起来可点击。我经常使用网络银行,按钮仅是一个加了文字的普通橙色长方形,每次我都感觉困惑,没有阴影效果突出按钮,让其看上去可点击。如果你觉得缺乏创意,尝试搜索“web button(网站按钮)”图片,从特别难看到非常酷,应有尽有。或者更实际的办法是看看你最喜欢的网站是怎么做按钮的。


规则5:用标签说明按钮的功能最后一步是决定按钮应当配以什么样的标签。我经常看见以“OK”和“Cancel”标识的按钮,并没有清楚表达出按钮的含义。设想经常出现的Cancel对话框:你请求系统结束任务,系统跳出标识为“OK”和“Cancel”的对话框。“Cancel”的意思是结束任务,还是取消刚才的请求?请注意,没有规则表明“只能以一个词标识按钮”,很明显,也没有规则表示“必须要用‘OK’和‘Cancel’按钮”。

9/08/2008

表单设计应当避免的常见错误

作者:Philipp Lenssen
翻译:october
校对:toMMy
原文:Pitfalls to Avoid When Designing Forms


1. 危险的重置按钮。大多数情况下,没有必要出现重置按钮。如果用户碰巧点击了,它们几乎总是产生麻烦——因为这会清空表单,而没有任何确认框提示(至少在主流浏览器和主流表单执行动作中)。下图的德语表单虽然精心规划,但设计不佳。这张表单用来计算地铁路线中两地之间的距离:




请注意,这张表单已经是修正版,第一次设计得更糟。你知道右下方按钮写着什么吗(该位置按钮的通常是“OK”或“Submit”按钮)?这里的按钮是“Neue Faht”(新路线)……,点击该按钮会清空已经输入的全部内容。

快速补救:不使用重设按钮。(如果仔细权衡后决定需要重设按钮,一定谨慎使用。)

2. 能够选择很好,是吗?并非如此。至少对网站表单而言并不一定好。仅在用户要完成任务的场景中提供必要选项——其他都会让屏幕看起来杂乱、产生困惑,而且实际上用户无法花时间思考哪些选项是需要的,哪些选项是重要的。讽刺的是,大多数网站表单的功能比Google搜索简单得多,Google要搜索几十亿个网页,但这些表单依然比Google表单复杂上亿倍。

如果真的需要许多选项,考虑使用可展开的高级对话框将极少使用的选项隐藏起来。想想Wikipedia如何更改句法快速集成对话框(编辑页面时,可以点击编辑框下方的链接将其插入页面),避免全部或者过多显示,而是部分显示,并通过主题选项框进行分类。




3. 表格依然是网页和网站的一部分。由此,它们应当遵循网站可用性基本规则,比如字体应足够大以便于阅读,链接和非链接应明确区分。通常使用下划线或者蓝色标识表示链接可点击。但是,请看下图Hotmail登录表单——是不是仅仅查看就能辨别出其中的链接?



事实上,顶端的蓝色文字(“Have an MSN Hotmail…”)看起来可点击,但它仅仅是文字,不能引导到其他地方。另一方面,底部(“Use enhanced security”)是链接,即使没有任何视觉线索能表明这点。

提示表单成功和失败的信息没有使用明确的的配色方案,这是另一个常见问题。无论什么信息,都不要用红色标识成功信息,比如,“恭喜,表单提交成功!”——使用红色会引起一瞬间的疑惑。类似的,纯信息传递中,应当避免使用警告含义的标识。

4. 你在做算数,而不是用户。如果脚本能自动计算,就不要让用户来算。下图是时区转换表单,有个越洋朋友来看你,你可以用它来安排日程。




这张表单提供两个基本选项:转换当前日期,或者转换自定义日期。但是,使用列表中部的输入框自定义日期和时间,点击提交时该项值会被忽略……除非同时选择了“Use the following Date/ Time”(使用以下日期/时间)选项。只要输入自定义日期,系统就应当自动选择“Use the following Date/ Time”(使用以下日期/时间)选项(如果表单不能处理自定义日期,用户为什么还要输入?)。

5.不要让用户一定要点击单选框。而应该是点击单选框旁的文字也可以。这是Windows系统界面惯例,却被许多网络表单忽视……即使HTML提供了非常简便的方法(甚至不必使用JavaScript)。下图表单来自Google站点,点击“Put page under…”时,单选框并未被选中:



6. 不要迫使用户使用自定义日期控件或者其他小工具。日历工具表单中的日期控件的确不错,但有时候用户仅仅希望用纯文本形式输入日期(比如,输入:“2008-12-24”)。如果真的决定需要一个日历控件,那么不要迫使逼用户使用:比如光标移动到输入框中时,弹出日历控件。德国官方铁路路线计算表就是这么个例子——当选择输入框时,弹出日历控件,但即使手动输入后点击表单中的其他输入框,日历控件也不会自动关闭(因此总是需要点击关闭按钮)。




举个更有用的例子,我们来看一看Google Calendar的编辑器。编辑事件的日期或者时间时,会弹出控件。通常如果你不希望使用它时,它也不会产生阻碍,而是允许你自由输入文本。

7. Ajax变化过于细微。是的,Ajax是自从tag以来最伟大的网络产物,但这并不意味着它不会被滥用……因为它会以很多方式被滥用。一种滥用是提供表单反馈——比如,“您已登录”或者“表单输入有误”——用户很容易错过页面上细微的Ajax更新。这种情况下,重复点击Submit(提交)按钮也不会有帮助,反而会导致困惑。过于细微的版面布局对于重要信息来说很糟,但至少如果有页面转换和相应的可视化载入时间,用户也许能留心到该信息。

如果对表单出错或者成功增加Ajax反馈,确保易被查看。用户认为也许会花费一些时间才能提交成功,所以会在点击提交按钮后甚至会切换到其他浏览器窗口;返回原窗口时,用户是否能得到反馈信息或者用户是否会认为表单提交出了问题?

8. 输入框中的3D效果看起来过时,而且有时很难看,但不要移走它们或所有的3D色彩暗示,除非你发现它会增加困惑。若你正使用默认输入框,它会在当前窗口显示一些3D效果的内边缘线。如果在白色背景中使用白框,不要完全去掉3D效果,否则输入区域会不太像输入框。按钮上的3D效果外边缘线也存在同样问题,去掉它们,按钮会不太像可点击项。如果你使用明确的颜色暗示,表单又足够短的话,相信你能够去掉那么多3D效果——比如背景色较暗、白色输入框的搜索表单。虽然对此我有些拿不定注意,但你可以自己判断:


9. 如果数据没问题,就让其通过,而不要要求再次确认,也不要让用户提供的数据和数据库所需要的数据形式完全一致。一些网站表单会进行数据转换,比如将用户自由输入的地址格式转换为“正确的”数据库格式,然后将其用组合框形式呈现并要求用户再次确认。但是如果明确知道组合框选区的确是用户需要的,不需要再次确认来查看结果——相反,结果页面之前或之后应当少一些强加选项,允许用户选择其他,也许效果更好。

甚至有些表单会迫使用户使用精确的数据库格式。比如输入信用卡号码时表单不接受空格,去除即可,不要让用户自己动手去掉空格。

10. 是的,出售详细用户数据能迅速致富(至少我有所耳闻)。但这并不意味着网络服务收集大量信息是正确的事。例如你专门提供邮件服务,那么用户性别、家庭电话号码等等信息真的那么重要吗?最好的网络表单仅要求用户提供该项网络服务绝对需要的信息(此外,如有需要,会有法律、安全等输入框,比如可怕的验证码是现在表单可用性的重大问题)。还有其他有用的可用性指南。比如保持文本简短,对界面来说有利无弊。同样,要求用户做选择时使用正面文字;用“do this”或者“show this”比“don’t do this” or “hide this”更容易迅速理解(更不要提“don’t hide”等其情况了)。表格一旦提交,将用户送至对现有任务(如果任务尚未完结的话)最合适的页面非常重要,而不是一个通用的感谢页面。无论做什么,需要知道用户在其他网站表单中花费了大量时间,因此有时候优化方案也许是只要重复用户习惯并且已经理解的表单就够了——同时也要考虑用户也许打开了多个窗口,你的网站表单仅是其中一个,用户会将表单当成次要任务,倘若发现表单无法实现他们的期望,可能就会放弃填写。

最后,大多数设计优秀表单的要点都是常识,因此只是需要时间反省并以局外人的视角审视表单。尝试想像一个不了解(或者不关心)数据结构、众多考量或者产品历史的人会如何看待表单。对用户而言,表单本身可能并不是任务,而是达成任务的必要障碍。最好能像设计交通标志(时速100 km/h时能一眼看到)一样设计表单,而不能像设计书那样(躺在椅子里有很长时间阅读一本书)。

网站搜索框设计诀窍

翻译:october
校对:toMMy
原文: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网站一样,在搜索框中写入文字解释功能。点击搜索框时,文字自动消失,你可以自由输入搜索项。




如果搜索框中的解释文字无法消失,用户会感觉沮丧,他们必须删除文本再输入搜索项。值得庆幸的是,很少有网站犯这个错误,而迪斯尼英国网店恰恰犯了这个错误。

网络排版十大错误

作者:Steven D.
翻译:october
校对:toMMy
原文: 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属性。这会为以后修改避免很多麻烦。