Art Design Interaction Design Web Standard

Interaction Design

Archive for the category 'Interaction Design'

亚马逊网站导航栏的变迁史

(转载)可以说是亚马逊网站普及了 Tab 式导航。这么多年来,他们一直在探索着一种用户界面,可以使他们越来越多的产品清晰的呈现在用户眼前。我们现在回头去看看亚马逊网站顶部导航的历史变迁也是一件非常有趣的事情。

在1998年,亚马逊网站只有两个一级大类:书籍和音乐。即使增加了一些分类,比如音像和礼物,水平的 Tab 式导航也能够扩展的非常平滑,并且通过颜色的不同,很容易区分产品。

在1999年到2000年的时候,亚马逊还在不断增加新的分类,并且是它的 Tab 式导航到达极限。店铺(zShops)、玩具与游戏、电器和电子贺卡这些新的产品分类的增加,使得亚马逊的 Logo 也没地方放了,并且页面文字也随之缩小了(当时页面仍然是按 800×600 分辨率设计的)。一直等到把 Tab 标签做成两排,才给 Logo 腾出了空间。很显然,Tab 式的导航已经被拉伸到了极限并且快要控制不住了。

在2000年的时候,亚马逊尝试着把所有的 Tab 去掉,但是在2001年还是增加了商店目录和特色商店 (Store Directory/Featured Stores)。这次重新设计,用一些特色的商店替代了日益增长的分类,并且提供了一个比较方便的途径让用户可以访问剩下的那些商店。当“我的店铺(personal stores)”的概念被提出后,亚马逊再一次回到了单行 Tab 式导航结构,并添加了“see more stores”链接来查看更多 Tab。

2003年到2004年,亚马逊仍然继续增加新的分类。但为了市场推广及促销考虑,Tab 导航反而变短了。Tab 会基于公司的促销活动以及用户的行为变化——增加或减少。很少 Tab 会一直在那里(除了“Welcome”和“Your Store”)。根据市场推广及促销,图片式 Tab 被运用起来,并且切换 Tab 时的颜色变化也变成随机的了。

为了解决 Tab 变化带来的疑惑,亚马逊开始试验一种可替代的方案,即单行动态 Tab 式导航(PPT)。2004年的时候作了一个线上测试,将 Tab 的数量减少至 2(就像 1998 年的设计)。第一个 Tab 是动态的(它取决于你所在的产品分类),第二个就是“所有分类”。在2005 年的一个版本中,导航从两个 Tab 开始,然后将当前分类作为新 Tab 插入其中,替代了之前的解决方案,不会替换掉当前任何 Tab。

归类于: Interaction Design by niuniudesign - 27. 12月 2007, 没有评论

导航的流行趋势

这不仅仅是一个信息爆炸的时代,也是一个服务爆炸的时代。
一切都是因为互联网,随着互联网技术的发展,信息的增多,服务的增多,用户需求的多样化。怎样让用户在最快地获取自己想要的东西,导航的设计显得非常重要。
随着带宽的持续增加,互联网技术的研发,我相信,导航的形式将会更加的多样化,这种多样化带来的将不会是使用的复杂,而是更加地人性化。
下面是我觉得将来会比较流行的几种导航的方向。
借鉴传统软件工程的导航模式

google靠搜索起家,却剑指微软。微软靠一个操作系统的平台整合了计算机的软件行业,google则要搭建一个新的平台来整合所有的网络服务。
从上图可以看到,google的导航和XP的导航有着惊人的相似之处,XP左下角的快速启动,和google左上角的导航,如出一辙。google除了用纯文本没有用图标之外,没有任何的区别了。

归类于: Interaction Design by niuniudesign - 27. 12月 2007, 没有评论

Usability@90mph

(转载)Usability is a conversation
大家平时都是怎么解释可用性给别人听的? 这篇文章用了一种谈话的形式,比较形象化的来解释到底什么是网页的可用性.

Information design principles for Web 2.0 design: simple and social
大家对于WEB2.0应该已经非常熟悉了吧, 那什么样的设计和网页的内容能符合它的要求呢?

Usability@90mph
这是一种新型快速进行用户测试的方法. 对于一些时间比较紧, 不能进行详细用户测试的工程特别试用.

Software engineering explained

Getting serious
虚拟世界已经开始不再虚拟, 而且愈来愈接近人们真实的生活. Second life,World of Warcraft对员工的影响已经受到了各大公司的注视.
P.S. 我公司只要你是玩WOW的, 就会被炒!

30 Delightful graphic design books
推荐30本有关美工设计的书

Influencing the customer experience through the internet
不管网络如何变化, 有一个目标是始终不会改变的, 那就是使网络变得直接和易用.
Online customer engagement report 2008
这份报告包括了
-) Importance and benefits of customer engagement
-) New engagement strategies
-) Measurement and research
-) [...]

归类于: Interaction Design by niuniudesign - 18. 12月 2007, 没有评论

导航的问题

如何进行一个产品的交互设计?
第一步:信息构架设计
第二步:界面细节设计
信息构架设计表现在页面上就是导航
导航是个大问题。
导航的关系?

导航应该放在哪儿? 我们来看一个例子(新浪的新闻首页):

标识红框的部分分别是网站的主导航和当前新闻中心的导航。这样的设计似乎会让人很难察觉到新闻中心的导航?
第二个例子(http://act.qzone.qq.com/polo):

标识红框的部分分别是网站的主导航和玩家作品下的导航。这样的设计引发了一个议论,两行导航,彼此应该有关系,是什么样的关系?
同样,第三个例子(http://blog.qq.com):

两层的导航设计上会有从属关系,但实际上栏目内容并非从属关系。
那么导航的设计,是不是要考虑到他们的从属关系?而不是一味地在视觉上追求好看、突出?而是设计上的一个合理性、逻辑性问题。
导航层级过多怎么办?

我们先看几个已有的处理例子:
(

归类于: Interaction Design by niuniudesign - 17. 12月 2007, 没有评论

UI设计的定义以及定位

界面设计(UI Design),交互设计(interactive design),可用性研究(usability research),人力因素(human factors),信息结构工程师(information architect)
在美国,这些工作职位的区分并不是很容易。也许不同的公司有不同的职位名称和工作重点,但是有一点可以肯定,他们设计的产品与人类都有着强烈的互动性。
在与国内同行探讨中,不止一次有朋友将自己的设计作品Email过来,希望得到我的意见。打开Email,看到的只是一个截图 (Screenshot),就有些纳闷,UI设计怎么能用静态的图像来表现呢?虽然我也接受过一些正式的色彩和Layout训练,可是凭心而论,可能我没 有什么资格对那些作品发表评论,因为他们的确色彩搭配赏心悦目,Layout结构合理,个人风格突出,我只能说,朋友,Good Job,但是你错过了UI设计中最重要的部分… …

UI设计不只是给人提供视觉上的享受,真正UI设计的好坏,必须要设定一个 任务,从头至尾使用一遍才能知道。 UI的概念是动态的过程,是逻辑的推理,也是各种状况的预测。如果衡量UI设计只有一种标准,那就是用户体验(User Experience). 用户体验是以用户为中心的设计(UCD/User Centered Design)中最重要的一个部分,强调的是过程,是软件对用户行为(User Action)产生的反应与用户期待值的误差测试,也就是说,这种误差越小,也就越符合以用户为中心的设计原则。
在西方,UI行业的兴起要归功于以计算机为主的高科技迅速发展,尤其是视窗操作系统的普及,然而广义的UI概念在十七世纪的工业革命阶段就已经开始, 只不过,把易用性带入机械的设计还是一种无意识的举动,再加上当时几乎所有的工业程序都是由熟练工人一手操办,就更加减弱了易用性设计的能见度 (visibility).
在我从事UI设计的最初两年之中,对于UI的定义有个极大的转变,这也从而影响了我的设计风格。在我的定义里,只有两种用户,过程为主的用户(process oriented end user),和结果为主的用户(result oriented end user).
   过程为主的用户的典型例子是电玩族,他们追求的终级目标就是视觉听觉的冲击和享受,最终游戏的结果反而变得不是那么重要了。此类设计对视觉和创意的要求是极为挑剔的,绝大多数设计师都有深厚的美术功底。然而,与结果为主的用户设计相比,它的市场和受众都要小的多。
结果为主的用户不在乎用什么样的方式完成任务,但是任务必须以最短的时间,以最简洁的方式,最精确的运算结果来完成。这些用户通常是工业化软件的受 众,工作环境以大型企业为主,软件最终运算结果对于企业的运行和管理有着重大的意义,稍有偏差,可能会对企业产生重大损失。对于此类用户的产品设计人员来讲,绝大部分部分时间可能用在设计任务的逻辑流程(logical task flow),以期最大幅度的符合人脑的思考方式和认知过程(cognitive process)。
平面设计(包括icon, logo, button, etc.)至多是UI定义中很小的一部分,也是微不足道的一部分。并不是我轻视它,在以前的论述中已经提到过,目的为主的用户对于完成任务的欲望已经大大 超出了对色彩的挑剔。同时,视窗和JAVA环境下的开发更多的朝着工业化和标准化的方向迈进,这已经给专攻色彩和搭配为主的人没有留有太多的发展余地。
在这里花了很多时间探讨对UI的定义,虽然知道我的看法对一些同行来说是偏激的,最主要的目的是要传达一个讯号,从业者以及业界对于UI的定义可能会 决定UI在中国有多大程度的发展,甚至存亡,如果把它转换成眼前的利益,则是UI设计师能否在企业中受到与工程人员同等的重视,以及福利。也许你会说,中 国有自己的国情,美国的东西未必能在中国行的通。其实即使是在美国,不是所有的公司都会有专门的UI组,很多工程部门对UI存有偏见,错误的认知,甚至轻 视和嘲讽。人机交互科学在美国已经经历几十年的发展,过程从未顺利过。然而,随着学术界将此门学科正式列入大学,己及研究所课程,业界更多投资在将研究成 果转换成生产力的过程中,人力因素(human factors) 已经逐渐形成自己一个清晰战略发展态势。
UI在中国发展需要是一个自上而下的推动性改革。中国的软件开发已经很大程度上与西方接轨,我们没有那么多时间让真正意义的UI慢慢渗入开发过程。
在中国,将一个新的概念或产业名称带入产品开发,并使其发展壮大,最大的源动力应该是投入的回报率。这也是许多同业人推荐将UI设计带人尝试性的项目,用成功的案例来让更多的企业信服并采纳用户为中心的设计方法。
然而,能够找到一个有效的商业环境,让相仿产品在其他方面势均力敌,最终凭借UI设计的优势胜出的案例几乎是不可能的。
当一个产品成功打入市场的时候,人们看到的是其强大的功能,上乘的质量,周密的市场策略,合适的价格定为,甚至是美观的包装设计,而很少有人会将亲和性的界面设计放在功劳簿上。
界面设计所倡导的是可用,易用,然而在消费者心中可用,易用是理所当然的,所以当产品具有了以上优势,设计因素会被忽视,而当一个产品因设计不良出现问题,可用和易用便会被揪出来大加鞭挞。
为弥补设计不足的印象,或者说给UI设计找一个正当性,于是某些企业更加强调UI设计中德美观和创意性,而忽略了易用的开发投入。这在短期中可能会有 帮助,因为色彩创意是看得见模的着的东西,会对客户有暂时性的心理暗示,然而长期来讲,会因忽略易用而使产品冠上消极的印象在长时间内很难消除。而对UI错误的定义则可能会导致从业人员沦为产品后期装饰和创意而无法参与产品的早期开发。
毫无疑问,UI设计优势在产品竞争中扮演的重要角色是无庸置疑的,但是,这种优势实现和意识都是长期性的,而非短期行为。他意味着需要相当长的时间让 客户了解到,但是一旦形成此种心理上的优势,就会在很长的时间内存在,会将易用的心理暗示代入整个产品的后续开发甚至整个品牌。
UI以及相关行业在中国的发展应该不是自下而上的,受制与消费者缺乏与之相关的概念要求以及作为专门学科未在大专院校及研究部门广泛设立的现实,无法由消费者和终端用户推动这一行业的发展。
时间上,中国的硬件配置,软件开发技术与西方不相上下,我们没有那么多时间让真正意义的UI慢慢渗入开发过程。
当然UI设计的定位有一个很大的利益分配的问题。任何一个新兴行业的兴起都是以另外一个较老旧的行业作为牺牲代价。在我们们所说的较理想的设计环境 中,它所意味或暗示的东西是目前正在作真正意义上UI设计或结构的那一批人将不得不放弃现有的资源,这些难题不是能用技术来解决的,也无法经由一些人的呼 吁,或者几个个别的案例来说服即得利益的一批人放弃手中的资源。
在企业内部研发部门需要一批能够从战略角度和长期利益出发认识到UI设计重要性的高级管理人才,从而将UI设计在产品生命开发周期中正式的程序化,制 度化,创造工程与设计部门共同探讨产品的早期设计的机制和公司文化,并主动向客户宣传用户为中心的设计理念,增加UI设计的能见度。同时,当UI设计不再 被外界偏视为装饰性的行业,同时不被本公司的工程部门轻视时,与之相关的培训和大学科研部门也会加大投资力度,培养出更专业的人才,行成良性循环。
当然,如何将UI设计合理有效的整合到产品开发过程当中以期产生最大生产力,在美国也是一个未知数的课题。不同公司根据开发部门大小,产品特性,公司 文化等总结出适合自己的一套东西,很难说哪一种更好。我在近两年参与旧金山湾区交互设计特殊兴趣小组(www.baychi.org)活动时,曾非正式的 访问了硅谷几家企业的资深设计师,这其中包括IBM,Adobe,Google, 和WebEx,
他们代表了不同大小,行业,设计平台,以及公司文化。我将在以后的文章里将采访的内容作一个总结,与大家分享。
从业人员的培训是至关重要的,培训方向应该是从实践到理论。
人机交互科学是跨学科的科学,包括了计算机科学,心理学,社会学,人类学,以及工业设计。同时,根据UI部门分工细致程度,对背景要求也不一样。在中国尚无任何一家高等院校提供人机交互学学位教育的情况下,对从业人员的在岗教育显得格外重要。
其中有数次跟国内同行交流中,听到最多的抱怨是对设计总体格局缺乏控制权,或者只能在有限空间发挥自己的设计理念。这里面固然有程序上的问题,但我的 总体感受是,许多设计师把自己的工作范围定义在了狭小的空间而未能在业务的广度和宽度上拓展自己的知识。UI设计本身有很多共通的地方,然而,今年来高科 技的发展,已经将计算机科学分工更细,每一门附属学科每天都在变化。也许穷尽一个人毕生的经历,也只能对某一学科略知一二,所以我无法想像,作为一个UI 设计师如何能在不了解产品和技术的情况下参与与工程部门的决策,如何能在只了解颜色和构图的基础作出精彩的设计,毕竟,我们的产品不是给人看得,而是给人 用的。
目前大部份UI从业人员没有受过正规人机互动教育已经是不争的事实,从实用的角度出发,由实践到理论的培训方法也许更加快速有效。

归类于: Interaction Design by niuniudesign - 17. 12月 2007, 没有评论