一个不错的焦点图——“请给我明确的答复”

最近总是遇到一些让人等待的事情,总是没有明确的答复,非常烦恼。
发现中国移动首页 上的一个轮换的焦点图上的一个细节做得非常不错,不知道别处有没有类似的,反正我没见过。

每播一个图时有一个进度条,看下图:

中国移动首页上的焦点图

中国移动首页上的焦点图

 

网页上没有双击?

朋友在玩QQ相册时,我看到她想进入其中一个相册时使用双击,我很快不加思索的说“网页上没有双击”,于是引发我对刚才说的这句话有了思考。“网页真的没有双击吗?”“网页上为什么没有双击?”“什么时候应该设计双击?”。
DOM里有ondblclick事件,说明网页上不是没有双击事件,只是很少在网页上被用到。
双击肯定有单击,没有单击何来双击呢?
那么双击肯定要区别于单击:如果单击能触发全新界面,那么事件触发器很容易就被新界面覆盖。所以双击必须在单击无新界面的情况下设计,如单击可拖动、重命名、选中等操作,由于网页上很少需要上述单击操作,所以也很少出现双击。

登录入口在任务流中的位置

Google.cn将首页的登录入口去掉了,李开复在twitter上解释了这个问题:“Google.cn没有需要登录的服务。需要登录的服务都在Google.com。所以,只有Google.com应该有登录的选择。” 也即是说Google.cn只提供了Google.com里的一些功能入口,而没有提供登录入口。尽管有一些人抱怨为什么要把登录入口去掉,而且改变了用户习惯,但从任务流来看,登录入口确实没有放在首页的必要性。

最近我老爸要和我学电脑时,我从中也理解到一些常见功能的心智模型。正如这个登录入口的问题,电脑上出现的很多文字他都会很仔细的看(甚至广告也要念出来),但他见到登录入口会直接跳过,因为登录对他来说很难理解,为什么要登录。当他有一个任务目标时,他会先找到与目标相关的文字而且鼠标浮上去有手形时(即某项功能入口)便会点击,而这时如果这个功能需要登录时再进入登录页,并提示为什么要登录。
而现在,或者将来,个人电脑的普及,直接用cookies记住用户从而不需要登录是更加接近用户的心智模型的,甚至应该是自动登入所有网站,这就是为什么现在有了OpenID。
那么当我们一个网站有多个主体功能时,我们的登录入口在任务流中应该处在功能入口之后。

而某些网站会有其特殊性,如支付宝的保密性较高,因此他的登录入口甚至没有记住密码的选项,而且他的主体目标功能是单一的,所以他的登录入口直接在首页呈现。

精确处理0信息

对于列表页面或数量提示,我们应当作特殊的处理。
有的时候,我们在原型和用户界面上表现的内容往往会忽视没有数据的情况下对用户的信息传达,而工程

师们也并不会意识到无数据时的潜在需求,或者他们会弹出一个框提示“没有数据”、“无法找到数据”

等,完全脱离用户的心智模型。
“什么叫数据?”
“没有数据我该怎么办?”。
因此,我们应当在没有数据时作特殊处理,比如在搜索结果页时,根据搜索目标源来导航到其它页面。

德龙怡春楼

你不只是一个设计师

我们经常会有这样的话题,设计师不能光从设计师的角度去考虑产品的设计,那么应该从哪些角度去考虑呢?我的观点是需要职根据产品人员提供的素材、需求等从用户的角度、产品的服务思想、开发者的技术原理来考虑,而且应该在相应的时间和空间做相应的身份切换。

1. 设计师本身

设计师本身只起着将其他角色的期望进行综合、把握及生产交互物的组织作用。如通过用户访谈将用户期望归类生交付用户模型,通过现场研究生交付场景描述文档,转化原型以及产品测试(这里有篇:如果你想成为一名交互设计师),于是为了能更好的产出交互物,设计师还需要将自己的身份投入到典型用户、产品、工程师的身份当中。此外,资深设计师还可以根据自己的经验自主一些交互,但并不是被主张的。

2. 切换到典型用户

尽管典型用户可以被描绘成用户模型,尽管用户模型代表着典型用户,尽管使用场景可以被描述,但用户模型和使用场景都有一定的局限性和非唯一性,交互设计师应当将自身想象成就是典型用户,完全忘记自己是自己,带着典型用户的所有性格去看待产品,表现出期望,对多条支流表现出兴趣,这一点其实是很难做到的,会让自己感觉非常累,与心理学有关,了解各种性格特征,刚开始总是回到自己本身。

3. 切换到产品

我以前将好的产品比拟成“超人+奴才”。为什么是奴才?常有形容会享受的懒人“衣来伸手,饭来张口,”而事实上无顾忌的情况下,每个人都想做这种懒人,这种懒人有需要时便会对自己的奴才呼之,并且这种奴才会察言观色;而为什么又是超人?因为他必须是智能的,多才的,而不是一个普通的奴才。

将产品赋予生命,赋予思想,热忱地服务于主要用户和次要用户。其实她可以像餐馆里的服务生,你的餐碟吐满鱼刺时,她会过来给你倒掉或者换一个;她也可以像游乐园的扫地生,除了会将你乱扔的果屑检起来,有时还会热情的为你指路;她也可以像雷锋那样乐于助人……

将产品比拟成这些人,当他们面对用户时,会如何来服务?

4. 切换到工程师

还必需切换到工程师的角度,什么样的开发是最快的,什么样的功能是简易的等等,了解技术原理。

基于信息理解的信息构建--零散笔记

最近忙里抽闲看了这本《基于信息理解的信息构建》,做了些零散笔记。兔子做了一系列的详细笔记,值得学习。

信息构建(IA)的定义:是共享的信息环境结构的设计;是组织和标识网站、内联网、联机交流和软件以保证其可用性和找到性(findability)的艺术和科学;是一个致力于对子数字园区的设计和建设的、正在出现的实践领域。

——信息构建研究会(Asilomar Institute for Information Architecure)

信息构建的核心内容:IA的核心内容是信息的组织、导航、标引和检索系统。在信息时代,用户的信息满足包括获取和使用的满足两个方面,满足用户的信息需求是IA的基本目的,引导人们从信息通向知识是信息构建的最高目标,用户对信息的理解是用户吸收和利用信息的前提和重要的环节。IA的核心内容包括由浅入深的两个层面,一是“使信息可访问”,二是“使信息可理解”。

信息理解:理解的实质是对信息的外在表现形式和信息的内容的认识、领悟和了解,而“信息理解”是笔者希望通过提出和强调“信息理解”的概念,进一步促使“让信息可理解”更加深入地为学界所关注。

从信息接受者对信息对象的理解这个角度看,信息理解可以分为信息符号理解、信息含义理解和信息结构理解三个层面。

我理解的信息理解的两层含义简单来说是自已理解和用户理解,自已理解即信息理解基础之上建立信息体系结构,用户户理解即建立的信息体系结构和展示的信息内容是可理解的。

值得一看的图,信息构建与信息理解关系模型图:

 

信息构建的基本过程:

信息构建的元素包括导航工具和图标、浏览层次、网站地图、类目矩阵、目录、特别兴趣指南。此外还有用户测试和标准、提供丰富的多存取点的浏览和搜索,以及提供详细类目、信息目标的标识、信息结构中令人感兴趣的和有创新意义的形象化的概念、超链接的连接作为信息的多样化入口等问题。网站信息构建的第一步是定义网站的目标,收集客户或协作伙伴的看法,并将它们按照协调性和重要性次序集合在一起;第二步是在弄清网站的受众是谁之后,开始组织未来网站需要有的内容和功能页;第三步是富有创造性地形成一个架构,选择网站的隐喻,制定导航系统,生成规划图,设计框架和模型并开始建造。

信息构建的基本过程图(借兔子的图一用)

信息结构:

信息结构按信息的组织方式可以分为线性结构、层次结构和网状结构。

自我引申的问题:

IA实战和交互实战中的具体的集是什么?

按钮上的内容

最近UCDChina 以“注意界面上的文字”为主题写了一系列的文章,使我在界面文字上的使用受益匪浅。之后,我对按钮上的内容的表现也做了一些总结与分析,与大家分享并希望得到指正。

1. 不必区分按钮还是链接。(这里列举的不是对他人观点进行攻击,而只是得以借鉴。)

很多人主张区别链接与按钮。这里,思域有一篇“关于鼠标点击对象:哪些应该是按钮,哪些应该是链接的说明。” 臭鱼的“网页按钮的功能与表现”,将按钮分成真正的按钮和伪按钮两类。

而事实上,不管是按钮还是链接,按照用户目标向导来完成任务,链接也完全可以做成按钮来实现用户目标的突出。而且并非一定能定义按钮和链接的功能,如果说按钮是为了发生“功能性的事件”而设计的话,那么链接打开一个新的页面是否也是一个功能性的事件?所以,为了突出让用户完成当前页面重要的功能,哪怕只是个链接,都可以从视觉和表意上,通过按钮来实现。当然,不主张在一个页面使用非常之多的按钮。

如淘宝的商品页上,为了让用户方便的找到当前商品的来源等与店主的相关信息,他们将以前的链接改成了按钮:

 

2. 我点击会“发生什么”

目前,各网站上的按钮上的文字内容没有一个主观的思想,想到什么就是什么,没有在文字上的太多推敲。

前面说到链接可以当按钮,但有时一串很长的文字为链接,如一篇文章标题。而按钮上的文字是需要讲究精短易懂的,能快速理解其含义。

先看几个例子的比较:

 

A:这是NOD32防毒软件在遇到病毒时的窗口,当用户遇到病毒时,会有些恐惧与谨慎,他们想快速的病毒拒之门外,而又不确定是否对系统本身会不会受到威胁。当弹出这个窗口时,会对这个“停止”按钮产生有两种疑问,点击了这个按钮是停止软件的阻止?还是停止病毒的威胁?

 

B:仔细看这两个按钮上的文字,“写日志”是从QQ空间里截来的,有谓语和宾语的,当然主语就是用户自己“我”,组合起来就是“我写日志”;“购买”是从淘宝的商品页面上截的,却只有一个谓语(动作),可以完成的组合是“我购买商品”。但他们都恰到好处的在自己的岗位上完成自己的职责。为什么呢?后面再总结。

 

C:“点击进入”完全多余,只是增加了用户在按钮上停留的时间。

所以,通常情况下:一个按钮,结合页面上的其它交互和信息组织,要能恰到好处的组合成一个完整的句子“我点击会发生什么”,而“我点击”三个字是在我和鼠标之间的事,而不必要在网页上出现。所以例子C中按钮上的“点击进入”是多余的。至于什么是恰到好处,为什么淘宝上那个“购买”就只有谓语动词也能恰到好处,这就与页面交互有关了。我的分析是,当用户与页面在完成某个任务时而产生一系列的交互事件,而这个宾语便随着这一系列事件附带而来,而如果这里再加宾语的话,反而会产生回到这个系列的开始的歧义;反之,如果一个页面包含着多个系列交互事件的话,侧必须在按钮上加上宾语,以明确用户点击发生的是哪一个事件。

 

一个系列事件

 

一个页面多个事件

 

3. 以形表意

中国甲骨文便以形绘意,后来对大量文字达成共识后,也就没有太多在意文字的实际来源了。按钮也如此

 

达成共识的按钮

 

不用共识的按钮反而起不到要起作用

4. 再看一些按钮

 

 

 

为可用性测试做的准备

国庆前,西贝发了个英文的 《Human-Computer Interaction》文档给我,里面的内容虽然写得不是很详细,但对人机交互所要了解的归纳得比较全。于是我们交流将其译下来。在译的过程中,还交流得到不少没留意过的东西。  将译出来的整理一部份先帖上来。有译得不妥之处还请指正

如果你没有对你的产品进行过测试,那么你的产品就不能正试上线。通过可用性测试可以提高产品的可靠性和有效性。

 

让真正的用户来进行用户测试是基础的可用性测试方式

• 在纸上记录用户使用时的表情和用户的回答

记录实际使用情况,包括每个用户使用每个功能的频率和各类事件发生的频率。

在测试期间,试验人员在正常情况下不应干扰用户的操作,当用户显然陷入困境,并且已经感到绝望时,应当给予一定的提示,同时试验人员要记录下用户的各个举动或回答。

• 当用户执行任务时,边想边说出自己的想法。

边说边做法可能是单个最有价值的可用性测试方法。采用此方法让用户在使用系统的时候大声的说出自己的想法。

• 协同交互方法

协同交互方法是边说边做的一种变形的方法。就是让两个测试用户同时使用一个系统。优点在于测试形式比只用单一的用户进行的标准边说边做测试的更加自然一点,因为人们习惯与在共同解决问题时把自己的想法讲出来。同时西贝提示“关于儿童产品的话,这个可以最佳选择呀”

• 核对测试,恒量,统计分析。

可以使用回顾式测试方法,让用户温习录像的内容来收集额外的信息。

• 查询技术:面谈和问卷。

其他的可用性测试方式:观察法、问卷调查和访谈、焦点小组等。

为什么要进行可用性测试?

很多人认为,以他们的经验可以了解别人的行为。然而经过可用性测试后这种想法完全失去立场。经验可以改变一个人的世界观,而且很难再次改变,但是别人不一定与你有同样的经验。然而有时设计师更容易用上自己的直觉,然而,直觉通常是错误的。

有一个关于键盘与鼠标的例子:在一项研究中有这种现象,测试用户被要求用键盘和鼠标做一个同样的任务。完成任务后,在没有告知测试结果前,每个用户都报告说他们使用键盘操作时要快,但恰好相反,秒表上显示的是他们使用鼠标时要快。

显而易见取走教训

在可用性测试前,不管是忠实哪种观点个人观点都是值得怀疑的,只能让测试结果来证实。

为可用性测试做的准备

确定测试目的

形成性评估:是反复设计过程的一部分,目的是为了改进界面设计;他的目标是理解界面细节方面的优劣,以及如何改进设计。它的典型方法是边做边说式测试。

总结性评估:在于评定界面的整体质量,例如可以在两个备选方案中进行选择,或者作为竞争性分析的一种手段,来了解竞争对手的产品设计好在哪里。典型的总结性评估方法就是度量型测试。

测试环境

1. 一个简单的测试环境:必须确保有一个舒适的测试环境。安排一个安静的房间,门口贴上”用户测试正在进行中-请勿打扰” ,禁用电话(手机和固话),确保适度的光亮,提供不含酒精的点心

2. 使用专用的测试研究室

摄像机

三脚架

好的麦克风

耳机(用来监控声音)

镜子

台灯或录像照明

彩色视频监视器(用来查看相机影像)

录像带记录器/播放器。
视频车。
电源线。
“请勿打扰”的标志。
茶点。
记录软件。

测试角色

1.测试调解人(管理员,主持人,经理,监察)

——负责整个测试过程,负责与测试用户的所有交感

2.数据记录者

——在纸上记录用户的有影响的行为和过程

3.摄像师

——负责用摄像机记录整个测试过程

——确保摄像机视角在用户和界面都可见。

——使用手动调焦(不能在电脑屏幕前使用自动调焦)

——关掉摄像机上的所有数据显示,如时间、日期等。

——确保摄像质量足够高。

——标记,拷贝,编辑录影带。

4.电脑操作员

——在一个纸张原型中担任一个电脑的角色。

——为每个测试用户重置一个电脑环境,如清除缓存,历史记录,cookies等等。

——不要将测试站点设为主页,让用户自己办输入URL。

——当遇到大问题时,重新配制环境到初始状态。

5. 测试参与者或测试用户
——参加测试。

 

图一:一个简单的测试环境

 

图二:一个典型的单间测试环境

 

图三:还是单间,但是测试调解人不在参与者旁边,而是通过电脑和软件来完成。

 

图四:有一个单独的观测室,电子监控系统

 

图五:最经典的可用性测试室,单独的观测室里有电子监控系统还有一面单向镜

Google Reader 的快捷键

 分析Google Reader 的页面结构时发现了Google Reader 的快捷键。不知道使用Google Reader 的人是否都知道,但我是之前不知道的。

Navigation Acting on items
j/k: next/previous item s: star item
space: next item or page <Shift> + s: share item
<Shift> + space: previous item or page v: view original
n/p: item scan down/up (list only) t: tag item
<Shift> + n/p: next/previous subscription m: mark item as read/unread
<Shift> + x: expand folder o/enter: expand/collapse item (list only)
<Shift> + o: open subscription or folder <Shift> + a: mark all as read
    e: email item
Jumping Application
g then h: go home r: refresh
g then a: go to all items u: toggle full screen mode
g then s: go to starred items 1: switch to expanded view
g then <Shift> + s: go to shared items 2: switch to list view
g then u: open subscription selector  
g then t: open tag selector  
g then <Shift> + t: open trends page  

模糊的“或”信息 ——MSN上的“待定请求”折腾记

几次被MSN上的玩弄。

过程:
待定的请求?待定的什么请求呢?点一下看看吧。
结果立即弹出一个可恶的窗口(因为我从不喜欢意外的弹出窗口,这个点击并不像要弹出东西的。)。好吧,看看,可是等了一分钟还不见什么东西显示出来。
——关闭(第一次)

(和第一次进行了同样的捉弄后)
等了很久,终于有些东西出来了。


Alisa? 是我朋友哦,她想做什么?“接收您的个人联系信息更新”,可以,不用拒绝,那就“输入个人信息吧”,可是…… 下面怎么还有“输入商业信息”呢?我点哪个?想想,她是我的朋友,就先输入我的个人信息吧。
点击“输入个人信息”
哎呀!~~~ 怎么又弹出一个网页?刚才那个弱出窗口也不见了!我好像还没搞清楚呀!我要返回到刚才那里啊!好吧,看看是什么。


咦?还要登录?
——关闭(第二次)

(和第二次进行了同样的捉弄后)
输入了我的密码,出现了一大堆的输入框,让我输入我的全名、个人信息、商务信息。
不想输,太多了(其实被折腾得忘记了是从哪里点来的,来这里的目的是什么。我是要来看待定请求的)。
——关闭 (第三次)

这次我看清楚了,到底它是什么,想让我做什么?怎么每次点了以后那几个待定请求总还有!
待定的请求
您可以允许其他人看到您的共享空间或联系信息,您也可以将他们添加到您的朋友列表或 Windows Live Messenger 联系人中。如果您不想看到某人发送的请求,您可以阻止他们。

“共享空间或联系信息”?“朋友列表或Windows Live Messenger” ?这些都不同吗?
咦?我可以先看看别人的“共享空间或联系信息”。


共享空间不可用
您尝试访问的共享空间可能不存在,或该共享空间的创建者限制对其进行访问

是他的空间不存在还是我没有权限访问呢?那我登录吧。可能这样就可以了,但是登录还是同样的提示。哦,可能他确实没有共享空间,但还是有可能他限制了我的访问。
——关闭(第四次)

分析:一个“或”字,让用户感觉自己处在一个分岔路口,走哪条路,只能去碰碰运气。就算跟着自己的感觉走对了自己需要的那条路,但如果走另一条路是什么结果呢?会不会比这条路更好呢?一大串的疑问和猜测。