分类目录归档:UI Design

UI Design

网站链接打开方式的研究

链接是组成互联网世界最基本的元素,网站链接打开方式有本页面打开(traget=_self)和新窗口打开(treaget=_blank)两种,这两种方式看似不起眼,但却是和用户交互的最基础的一种方式。很多互联网项目在原型的设计阶段没有考虑到页面的打开方式,会造成以后用户使用上的麻烦。

就页面的打开方式而言,本页面打开即在原有页面窗口的基础上显示新的页面,原来的页面丢失,用户可以点击浏览器的后退按钮回到原来页面。新窗口打开的方式,即打开新的浏览器窗口(或标签),显示新页面的内容,原有页面的窗口保留。用户回到原有页面只需关闭新窗口即可。需要注意的是,使用本页面的方式打开的页面中需要有明确的位置标注和返回路径,让用户可以顺利返回原来的页面。

两种方式各有优劣,在选择上需要明确网站的目的、转化目标,也用户的任务。本页面打开的链接会让用户流失原来页面,很有可能让用户中断任务,影响网站的转化,而新窗口打开的链接时间长了会造成大量的窗口,给用户带来不变。淘宝和卓越是两个极端,他们凭借业内老牌资深的优势和长期培养的用户习惯,基本无需在这方面考虑,在这里不做研究讨论。

参考国内排名考前的几个b2b和b2c可以大致看出这些网站在链接的方式上是如何考虑的。(0=本页面打开,1=新窗口打开,*=lightbox)

  1. 首页的频道链接,基本上都是在本页面切换,因为这个时候没有明确的用户诉求,用户的任务操作也没有开始,所以这里推荐使用本页面打开的方式。
  1. 首页的分类链接,京东和凡客采用本页面打开的方式,其他网站均为新页面打开。

两种方式那种好呢?首先分析一下首页的布局组成,有类似网站原型经验的人都知道,网站的访客分两种:有明确购买意向的和无明意向的。频道,分类等文字链接是为有明确目的的一部分用户准备的,他们会直接点击这种链接或进行搜索。而没有明确目的的用户为了吸引其注意力,网站准备了大块banner,商品图片推荐等模块。所以首页分类链接搜索推荐使用本窗口打开;而首页的商品新闻链接新窗口打开,因为此时用户没有明确的目的,很有可能会回到首页继续选择其他内容,所以不能丢失原页面。所以,在这一方面,京东和凡客做的是很到位的。

  1. 列表方面,用户的任务是选择商品,这里不必多说,所有网站几乎毫无意外的选择新窗口打开的方式。
  2. 商品的详情页,用户已经选择的商品,离转化(下单)只差一步,所以这个页面的链接一定不能让用户丢失原页面,否则前面的所有努力前功尽弃。图片基本都是新窗口打开(标注*的为页面中的lightbox)。

总结:频道切换,首页的分类和搜索推荐使用本页面打开;涉及用户选择对比的和目的不明确时发生的链接行为推荐使用新窗口打开,在用户完成转化的转化路径上的一切分支链接,推荐用新窗口打开,如果必须使用本页面打开的方式,务必有明确的返回链接加以引导。

 

 

 

细节魔鬼与精简团队-摘要-转

对此有如下几种常见诠释:

★细节派

-即便是微小的细节愉悦,也能给用户带来惊喜,并提升对产品的信赖感

-在激烈竞争中,核心体验容易同质化,这时细节就成为决定用户倾向度的天平

★大条派

-核心功能需要抠细节,非核心功能无此必要

-主干流程,频发应用情景需要抠细节,分支流程与偶发情景无此必要

表面看上去,这算是细节与大条的两党之争,其实不然。我们常常赞美“细节决定成败”,同时也常常咒骂别人抠细节太无聊,然而这两个极端常常从同一人的嘴巴里讲出来,仅时区不同,让你觉得他简直就是个神经病!换句话说,是否注重细节并不取决于个人偏好,关键是情景判断。不少业内人士在我的微博上对此评论道:

“产品是做给用户使用的,当然要以用户的需求为标准。以自以为是的标准做一款产品,无异于闭门造车。做产品,最起码要读懂人性。”

“产品首先应该是有用、能用的,然后才是易用、想用,现在很多人直接跳到最后2步甚至1步上了。尼玛都不想想这东西有没有用能不能用,搞个P的用户体验。”

“做产品调研时要发散再发散,想到各种可能的方向;做产品设计时要收缩再收缩,重点做最能吸引用户的功能。 ”

“产品体验往往会变成几个人埋头追求完美,用户都感觉不到。在大方向上把握用户真的需要的才比较关键。”

“细节决定成败,是在已经把基础做好的情况下。大面上都过不去,谈何细节。更何况,不是所有的细节都值得去反复推敲。”

这些话是不是都很有道理?

很可惜,所有糖水大道理并不能帮助我们解决实际的问题。在发生争执的时候,每个人都会认为,自己的观点最能够代表用户需求。即便对于何谓“核心功能、主干流程”达成共识,这部分哪些细节该抠,哪些不该抠,也会吵个热火朝天。什么才是“用户真的需要”?什么才是“值得反复推敲的细节”?两边恨不得拿起火箭炮豪快地轰杀对方。毕竟细节判断中的主观个性多于客观共识,如果每份争议都去做用户调研、数据挖掘、AB测试来解决,就会把产品设计变成一场漫长的,气呼呼的拉锯战。

 

还有同行说,“产品经理应该更关注逻辑,没有必要在页面、交互上面钻牛角尖。”相当于将细节决定权完全赋予了交互设计师。这么做倒也不错,但要吻合几个先决条件:

1、交互设计师长期研究此产品,对用户群特征有较深了解

2、交互设计师长期参与此项目,能及时响应需求

3、交互设计师与产品经理有一定的磨合经历,配合上比较默契

4、交互设计师的才能可信赖

据我所知,符合以上四点的产品项目环境,在业内不足10%。信任感这种东西不是天上掉下来的,而是在适当的土壤中生长出来的。“土壤”本身多半取决于“体制”,个人的力量很难去改变。所以,更务实的方法还是精简团队,加强个人责任感并减少分歧。多多咨询听取意见没错,但在具体参与、决策的产品面上只安排少而精的人。产品设计的“群策群力”演变成“人多嘴杂”,屡见不鲜,又是何必喃?

正如我的一条微博所说:最好的合作方式是,在大局上想法互补,细节上各逞其能。最差的合作方式是,大局思路一致,结果盲点重合,然后在细节上吵得不可开交,各自都气呼呼地坚持“细节决定成败”。

UIDesigner 2.0 – 腾讯CDC

UIDesigner 2.0是由腾讯CDC设计和研发,专为交互设计师、视觉设计师、用研设计师精心打造的全新软件。

①丰富控件类型,自定义控件样式。
②可创建个性化控件,满足不同设计需求。
更多功能,您可透过视频和图片抢先一窥!

由腾讯CDC自主设计和研发的UIDesigner 2.0,目前已开放下载。全新UI界面、可定制的用户视图、十大功能模块,由你来品鉴!UIDesigner 2.0,协同设计时代!

UIDesigner 2.0:功能介绍腾讯CDC官方主页

Adobe Muse – 零代码网站制作

 

你可能是一名出色的网页设计师,但如果你不会写代码的话,设计好的网页还要请别人去制作。Adobe打算帮你解决这个问题。

Adobe刚刚发布了一个代号为“Muse{缪斯}”网站开发工具。Muse基于AIR平台,其目的是让设计师把精力放在设计上,让那些不懂代码的设计师也可以制作、发布网站。主要包括四大功能。

Muse提供网站地图、主页面、以及覆盖整个网站的工具,你可以很快完成网站规划,为设计做好准备。

让设计师专注于设计而不是工具。精确控制图片、文本、曲线等元素。

Adobe官方人士称,Muse能让平面设计师,设计和发布专业品质的HTML网站,而无需手工编写代码或仅局限于模板内工作,Muse的口称就是让Web设计师从代码中彻底解脱出来。

Muse支持最新的Web标准,包括HTML5和CSS3。另外,Muse与Adobe InDesign可以很好的相结合,创作出具有交互式内容和各种流行元素的Web站点。

支持嵌入Google地图,Facebook feed等元素,结合内置工具可提高网站互动性。支持拖拽自定义导航菜单、幻灯片、面板等内容。Muse支持最新的Web标准,包括HTML5和CSS3。另外,Muse与Adobe InDesign可以很好的相结合,创作出具有交互式内容和各种流行元素的Web站点。

设计完网站之后,你可以在Muse内部预览上线后的效果,然后对网站进行浏览器兼容性等测试,没有问题的话就可以上线。

前不久Adobe发布了一个新工具{Adobe Edge},允许设计师通过HTML5、CSS和JavaScript制作网页动画。无需Flash。

Muse目前还处在免费测试期,点击Adobe官网的“Get Muse”按钮就可以下载试用。

http://muse.adobe.com/

 

注,这个测试版是air版本的,在线安装后首次打开会提示输入adobeID,如果没有,点右边的create建立一个id,输入相关信息一路勾选+NExt即可完成。

网站用户体验(UE)之量化76条军规

一、感官体验:呈现给用户视听上的体验,强调舒适性。

1. 设计风格:符合目标客户的审美习惯,并具有一定的引导性。
网站在设计之前,必须明确目标客户群体,并针对目标客户的审美喜好,进行分析,从而确定网站的总体设计风格。

2. 网站LOGO:确保logo的保护空间,确保品牌的清晰展示而又不占据过分空间。

3. 页面速度:正常情况下,尽量确保页面在5秒内打开。如果是大 型门户网站,必须考虑南北互通问题,进行必要的压力测试。

4. 页面布局:重点突出,主次分明,图文并茂。与企业的营销目标相结合,将目标客户最感兴趣的,最具有销售力的信息放置在最重要的位置。

5. 页面色彩:与品牌整体形象相统一,主色调+辅助色不超过三种颜色。以恰当的色彩明度和亮度,确保浏览者的浏览舒适度。

6. 动画效果:与主画面相协调,打开速度快,动画效果节奏适中,不干扰主画面浏览。

7. 页面导航:导航条清晰明了、突出,层级分明。

8. 页面大小:适合多数浏览器浏览(以15寸及17寸显示器为主)。

9. 图片展示:比例协调、不变形,图片清晰。图片排列既不过于密集,也不会过于疏远。

10. 图标使用:简洁、明了、易懂、准确,与页面整体风格统一。

11. 广告位:避免干扰视线,广告图片符合整体风格,避免喧宾夺主。

12. 背景音乐:与整体网站主题统一,文件要小,不能干扰阅读。要设置开关按钮及音量控制按钮。

继续阅读

推荐25个提高网站可用性和转化率的工具

网站建设的核心关键是“如何发现潜在客户并有效的转化为合作客户”,这里提到有效的转化也就是说找到的客户不一定会选用我们的产品或者服务,成为了我们的客户的转化才是有效的转化,那么在竞争如此激烈的网络时代,我们该怎么去挖掘潜在客户并提高我们网站的转化率呢?关键之一就是提高网站的可用性。

对于网站来说,可用性是指用户能否有效地找到所需的信息或完成他的任务,效率如何以及是否让人有愉快满意的感受。如果网站可用性较差,会浪费用户的时间,大大降低网站的回头访问率,这对网站的生存是一个至关重要的问题。因此,为网站开发人员提供可用性改善建议和改进工具是十分必要的。

usability testing 25 Tools to Improve Your Websites Usability

如何知道访客是否喜欢你的网站?借助可用性检测工具追踪用户行为可以回答这个问题。跟踪到的数据可以给你提供精确的信息,让你知道用户喜欢你网站的什么地方,哪些区域是最突出,哪些地方是用户最容易忽略的。不要小看这些收集到的数据,因为这些数据可以帮助你有效的提高网站的点击率和转化率。

改善您的网站不要挑时间,当你发现你的网站吸引不了多少访客的时候,就应该立即行动了。 这里收集了很多非常好的工具,通过不同的方法追踪用户的行为并提供给你改进网站可用性的建议。它们中有些可能不是免费的,但一个好的回报是值得去付出的。 为大家猎取所需的工具是一件开心又很有意义的事情!

Userfly

Userfly可以提供免费的网页访客动作记录服务。只需要在网页中添加一段简单的Javascript代码,就可以记录访客从打开该网页到关闭整个过程中的动作。Userfly能够记录的内容包括鼠标的移动、点击以及键盘输入等动作。对于网站拥有者来说,Userfly可以很方便的对用户行为进行检测和分析,通过A/B Testing等方法为网站UI/UE提供非常有价值的信息。

userfly 25 Tools to Improve Your Websites Usability

Attention Wizard

Attention Wizard是一个视觉工具,它可以帮助您提高转换率,轻松地识别目标网页存在的问题。 Attention Wizard用高级人工智能算法来模拟人类视线的轨迹和聚焦点。Attention Wizard能够立刻对你提交的网页样本进行处理并生成“眼球轨迹热力图”。这个“热力图”可以预测你网站的访问者在最初的几秒内是如何浏览的。 生成的结果中,有75%都是通过眼睛跟踪和鼠标跟踪来完成的。Attention Wizard有简易版、高级版和终极版三个版本。

attentionwizard 25 Tools to Improve Your Websites Usability
继续阅读

网站开发人员应该知道的62件事

有人在Stack Overflow上发问,动手开发网站之前,需要知道哪些事情? 不出意料地,他得到了一大堆回答。通常情况下,你需要把所有人的发言从头到尾读一遍。但是,Stack Overflow有一个很贴心的设计,它允许在问题下方开设一个wiki区,让所有人共同编辑一个最佳答案。于是,就有了下面这篇文章,一共总结出六个方面共计62条”网站开发须知”。

我发现,这种概述性的问题,最适合这种集合群智、头脑风暴式的回答方式了。这也是我第一次觉得,Stack Overflow做到了Wikipedia做不到的事。(难怪它最近挤进了全美前400大网站。)

在我的印象中,关于网站开发,这样全面的概述性文章非常少见,因此也就非常有用。大家不妨看看,62件事情中你做到了多少?

继续阅读

如何引导客户

引导客户是个细活,也有不少设计师认为这就是商务人员的工作,其实在今天的商业合作关系中,设计师早就被拎出来作为pre-sales的挡箭牌了,因此行业的压力迫使我们需要掌握一些商业沟通和合作的技巧。
那么为什么要引导客户呢?客户者,衣食父母也。抓不住客户,就搞不来现金,搞不来现金大家都要集体回家数键盘按键,这点在设计公司中尤为明显,而在一个企业的设计部也是一样的道理,这里的客户转变为了公司强势部门和领导层。引导客户无非三个目的:体现自身价值、阐述设计意图和思路、更快的确认设计成果。

继续阅读