回答考题

1.登陆在注册的右侧,不符合操作习惯;
2.“找回密码”看起来不像链接;
3.登陆与注册按钮的实际点击域如左图看示(这要到实际页面才能发现),与图像表示不符,可能引起误操作。

另外点记住密码时弹出提示,在 windows 下,只有做出某个选择后才能做其它操作,在 *nix 的系统中好一点(焦点可以切换)。这种把焦点集中在一个提示是不被提倡的。Jeff raskin 曾提倡用透明的提示,凭什么我们在有提示的情况下不能做其它操作?他的儿子所在的公司有一个 javascript 的实现。那些滥用 alert 的网站真该学一下了。

标签: ,

By sike On 2007年3月16日 星期五 At 13:25 | 4 Comments

读后感

DMMT看完了,刚好另外几本有关可用性的书也看过,就把有关可用性与易用性方面的想法总结一下。在国外,现在一个可用性方面的工作人员,工资一般比设计师高,它隐含的逻辑可能是:会做什么本身并没有什么了不起的,关键的是知道不去做什么。
好看和好用并不矛盾,好用是属于 must to have,好看则属于 nice to have。
关于把屏幕上的文字去掉一半再去掉一半,这让我想起以前看梁实秋的散文,他提到自己的中文老师在教他们写作时的建议:当你不知道一个句子是否该去掉的时候,说明它已经该去掉了。
此外是书中提到的一些东西,比如下拉框无法很好的分组的问题,其实可以通过optgroup这个标签分组,只不过很少用到。另外关于那家已经倒闭了的 etour,现在 Firefox 有个类似的插件和它的功能相似:stumbleupon,会向你推荐一些好玩的站点。然后是 css 方面的,撇开加快了下载速度,事实上 css 在使网页变得更易使用方面所做的贡献并不明显,而诸如 label、accesskey、alt、title 等 html 标签(或属性)在使网页变得更友好方面所起的作用更大。
提高网站的可用性,尽量不让用户多加思考,并不是把用户想像成白痴(比如,想一下他们正在上大学,接受教育,尽管之前受过高考的摧残),而是多考虑人的弱点(这种弱点有很多,比如同一时间,人的关注点只能有一个,现在我写这篇文章的时候,我的关注点就全部在光标闪烁、文字录入的地方,关于人为什么同一时间只能有一个关注点,心理学上有具体研究。其中一个假设是进化的产物,想一下连体婴儿或双头动物,当遇到危险时,即想往左跑又想往右跑情况会有多糟糕)。或许正如 Jef Raskin 所说的:有时候,让人适应电脑比让电脑适应人相对简单些。
有时候,为了可用性,你可能要把一个链接去掉;而有时候,出于商业考虑,为了 PV,你又想保留这个链接。这得平衡。
改善用户体验,不止在界面上做文章,也包括服务器后台方面的工作,想一下一个经常挂掉、暂停服务的网站,能说它的用户体验好吗?
以上所有这些都在说,维护好一个网站不容易。
最后,感谢代序老大买的书。

标签: ,

By sike On 2006年9月7日 星期四 At 22:26 | 0 Comments

读书笔记

信息架构的原则:
1.尽量减小分类,合并相似的分类,人在短期内一般只能记住7±2不同的事物(好点的记住9个,差点的5个)。为什么电话号码是7位的(现在基本都升到8位了,用户增多),为什么我们不容易记住手机号,短时记忆的容量有限是一个解释。
2.网站的结构尽量与用户的“心智模型”匹配,而不是公司的组织结构。你想买个显示器,会到显示器的目录下去寻找产品,而不是按公司的研发部>产品部>电器类类似的路线找到显示器。
3.?(忘了)
信息架构可以看成是网站可用性的一部分,那天Y问我如何分类、合并一些内容,没想到是这个范畴的东西。

提供相同服务的网站越来越多,用户喜欢那些简单易用的,几年前,没人关心什么可用性&易用性,现在,它已是竟争力的一部分。

标签:

By sike On 2006年6月15日 星期四 At 23:16 | 0 Comments

表单大全

http://www.formassembly.com 收集了许多关于表单的模板与资源,表单是网页设计中很重要的一部分,国内做的较好的如支付宝,确实是State-of-the-Art。尽管 css 可以让表单千百万化,但在一些隐私的信息的填写上,还是保持表单原来的样子好一些,因为用户已经习惯了表单就是那个样子,尽管看起来丑了点,太炫了只会扰乱用户的填写。

标签: ,

By sike On 2006年6月8日 星期四 At 22:34 | 0 Comments

阅读模式

看到一篇讨论rss阅读模式的文章,google reader中,所有更新的内容都掺和到左边显示,它的预设前提是,你对你订阅的每个feed都感兴趣,只要它一更新,你马上就想看到它。事实上,对于一些每日更新的东西你确实希望一有内容更新马上就能看到(如digg,mxna等),而对一些私人的blog,可能少有每日更新的,而你对这个人感兴趣,只在闲暇时间想看一下她最近在干什么(而不是每天都看),然后才点了她的feed。这时候,gmail中那种折叠式的浏览或许是一个好选择。
更新:bloglines有个keep it new 的功能,google reader有个starred 的功能,对那些你需要查阅但不一定要阅读的资料,starred 显然更有优势。

标签:

By sike On 2006年5月29日 星期一 At 22:58 | 0 Comments

眼动研究与网页

眼动研究表明,用户在阅读一个网页时往往呈现“F状”的模式,即两个水平条纹伴随着一个竖直条纹。查看原文
在最近的一次眼动研究中,跟踪了232名被试看上千张网页时的眼动情况,发现用户的阅读行为在不同的站点和任务中保持很高的一致性。这一占优势的阅读模式看起来就像字母“F”,它由以下三部分组成:
1.用户首先以水平运动的方式阅读,一般集中在网页内容的顶端,这一首要元素组成“F”的上面一横。
2.接着,用户往页面下移一点再做水平阅读且覆盖区域一般比上面短些,这一元素组成了“F”的下面一横。
3.最后,用户以水平运动的方式浏览内容的左边。有时这是相当缓慢和系统地,在眼动热成像图中以一条稳固的条纹出现。其它时候用户移动得非常快,在热成像图中以杂点的形式出现。这是“F”的最后一个元素。
更多内容请见原文,这种研究一定很有趣也很有用,至少对广告商来说。
记得上次给被称为“学习之母”的搞交互设计听说后来去了IBM的别人提起常含敬仰之情的学姐发了封信,问她一些大而笼统的关于网页交互设计方面的问题,她直接发给我www.useit.com的网址,并表明对此领域不感兴趣。这是尼尔森---诺曼集团的另一灵魂人物尼尔森搞的一个网站,主要是有关Web usability的东西。

标签:

By sike On 2006年4月18日 星期二 At 03:35 | 0 Comments

别忽视了title属性

原文在:http://www.mondaybynoon.com/2006/04/10/dont-neglect-the-title-attribute/
我们一般会嫌title过于麻烦而省略掉,作者从usabilitySEO的角度谈了这个问题。

还有这个也值得一看:Top 10 CSS Tutorials,先收藏了。

另:继上次有女生问我“听说,你胸口上有颗痣?”后,又有人说我最近写的东西一点也不好看,有点心智不清而且有打肿脸冲胖子的嫌疑,明明没读几本书还要在那文绉绉,我承认,因为最近在做的事与毕业要做的基本没什么关系,而我却还得为此抓狂。或者说,blog是个屁,谁都别装b。那这句话本身呢?

标签: ,

By sike On 2006年4月17日 星期一 At 11:05 | 0 Comments

色盲眼中的网页

colordoctor
图示为蓝色盲所看到的,所需工具下载:http://design.fujitsu.com/jp/universal/assistance/colordoctor/
带有下划线的链接对全色盲来说是多么可贵,因为他们无法从颜色辨别出哪是链接哪里不是。本来录制了一个演示,但文件过大(5.6M),没有上传。

标签: ,

By sike On 2006年4月1日 星期六 At 08:39 | 0 Comments

导航

placeholder for flash movie
参考文章:Mystery Meat Navigation

标签:

By sike On 2006年3月18日 星期六 At 06:18 | 0 Comments

Msn spaces 的与众不同------纯粹从网页制作的角度

摈弃其它元素不谈,比如与msn挂钩等等。spaces在纵多的BSP(blog服务提供商)中的设计无疑是最专业的,如果你浏览过5个以上的spaces就会发现,它们有一个布局上的原型(或者叫共同点):圆角的使用,就如我上一篇翻译的文章中提到的,这种圆角的大量应用,在视觉上使内容分块,这一块是照片,那一砣是简介,下面一砣是友情链接。这种泾渭分明感使观众能很快找到相应的内容。这一点我想可能受到传统排版业中的"格式排版"(grid systems)的影响。
而spaces又是如何在差不多只用一种布局方式的情况下做到不使页面显得单调、呆板的呢?聪明的你一定猜到了:颜色。每一类颜色对应一类形容词,不管你扮深沉也好,装可爱也好,还是假装清纯也罢,spaces基本都能满足你想要的感觉,当然,这些感觉都是由颜色派生而来的。
此外,为了消除单调感,spaces中也大量运用背景图,其中分两种:一种是无缝拼接,一种是整张的大图(在实现这种背景上,css显得易如反掌,就如flash在视频方面的优势一样)。背景图与前景色的搭配,哇靠,spaces的模板设计人员想得真绝,像我以前提到的“巴纳姆效应”,想想看,一种设计原型包含了让所有人都喜欢的成份,这是多么可怕,又是多么聪明,特别是在blog这种多用户模板上。大小通吃啊。而这对设计人员来说也是一种福份,修改起来很容易,这与程序设计中的面向对象观点(oop)也是相一致的,把一些共有的特点归入父类(在这里表现为布局),而把一些特有的,个体表现不一样的特点归入子类(在这里表现为颜色)

更新:一直很好奇,为什么没有像样的wordpress做为后台的BSP?毕竟wordpress是一个出色的,自由度很高的blog程序。而那些已有的不是不稳定就是太过吝啬,如wordpress.com,donews。

标签: ,

By sike On 2006年1月16日 星期一 At 09:57 | 0 Comments

我们为何钟爱圆角

原文地址
作为一个界面和图形设计人员,我们都为圆角着迷。网页开发人员则 更远,籍由CSS的创造性应用(有时是javascript),他们很容易做出特定的圆角。在CSS3规范的提议中,更包括了圆角的属性(Firefox已经支持它)。
那为何我们会如此迷恋圆角?我尝试从美学的角度来解释,并希望有所延伸。
首先,我想我们会被以按自然界有机规律形成的东西所吸引。以iPod为例,类似产品的工业设计会给我们提供一条清晰的线索,指明它是如何而来的。Apple发了很多精力来创造一种产品,使它看起来更像是由树上长出来的而不是在工厂里组装而来的。他们不惜重金努力隐藏产品身上的“机器”特征(比如,螺丝钉)。这导致一种顺滑的感觉,同时没有生硬,或是棱角感。这种“顺滑感”不仅实现了可用性,同时在人与产品之间建立一条情感纽带。我们的一些早期记忆依赖于那些并不完美、普遍地带有直角的事物上。边角像在说“滚”,伴随着"hoaky"的声音;平滑,圆角则更像在说“抓紧我”。
除了物体,传达信息和使信息在一个更有组织的上下文关系中也有同样的诉求,不仅仅是盒子和直角。当我们介绍一系列复杂的内容,特别我们对此还不熟悉时,我们首先做的就是浏览全文,并尽可能联系上下文。“这砣内容和那个标题有关。这组按钮显然和那块内容相关。”等等。
作为内容建构和交互设计人员,我们的许多作品致力于使用户对内容建立一种认识并会控制它们。换句话说,我们提供给用户视觉上的线索引导他们顺着眼前的界面提示应用上下文关系。圆角则非常适合干这种事。圆角是一个清晰的线索,使杂乱的内容泾渭分明。当设计人员使有纯色时,上下文关系会更明朗:由颜色重量和体积衍生的幻想。
所有的解释(我上面的胡说八道)有一个共同的特征:它们在我们常识,我们在物理世界中如何与物体相协调并使用它们,起到杠杆作用。世界是由一系列离散的、拥有自身完整性、同时与其它事物截然分开的物体组成的(以一个大充汽球为例,它明显是特有的、与其它事物无甚瓜葛。)有些物体甚至有可控制部分允许你掌握它们。烤面包机上的把手,附属于你的烤面包机,很明显用来控制你的烤面包机而不是冰箱。
圆角被证明是一项“专门技术”,我们支配与使用它与周围世界交互。我确信这不仅仅是美学上的需求。当我们合理利用时,通过这类设计可以创造出直观的体验。

补充:以前老抱怨课本上一些翻译而来的文章不说"人话",自己去做,才知道要说"人话"挺难的。

标签: ,

By sike On 2006年1月15日 星期日 At 04:31 | 0 Comments