发表时间: 十二月 22nd, 2009 , 作者: abby
经常网购的TX对专题网页一定不陌生。打开TB的首页,满屏的小广告充斥并吸引着读者的眼球,终极秒杀、特惠抢购等促销信息相当诱惑,点开的那个网页就是专题活动页面。
细心的业内人士不难发现,早期的篇幅很长需要拖动鼠标良久才能读完的专题页面渐渐被简洁的、主题明朗的的web2.0时代的新专题页面所替代。
就拿panli新上线的团购页面(http://www.panli.com/GroupPurchasing/)来说,不到两屏。
然而页面模块很清晰,非常明确地告诉用户:“这是个什么活动?”、“团购对我有什么好处?”、“我该如何参加团购?”,并且主题鲜明突出。
此外,彩色气球的红色背景洋溢着圣诞、元旦的喜悦。从视觉设计的角度,不花哨但有冲击力,既符合市场设计的宣传需求,又与产品设计的理念如出一辙。
拒绝冗余,避免繁琐。让用户在最短的时间内读懂专题活动,是这个时代的IT人共同努力的方向。
发表时间: 十二月 21st, 2009 , 作者: 绝版
产品部和技术部,在网站的开发过程中,是两个需要密切配合的部门,很多网站甚至将这两个部门合并在了一起,不过大部分还是分开的。在互联网开发过程中,这两个部门的沟通效率,对于最终网站的质量有着非常重要的意义。笔者尝试将工作中这方面的一些体会分享出来,供读者参考或者指正。
首先简单的介绍一下在panli代购的一个典型的产品开发流程。
第一步是产品创意阶段,这时候可能是一个很粗线条的点子,或者只是一个问题,还没有答案,然后通过头脑风暴来收集点子,这个阶段由产品部主导,有时候各个部门甚至是网站会员都会参与进来。
第二步是产品设计阶段,这个阶段仍然由产品部主导,将原先很粗线条的点子细化为一个可以实施的方案(文档),并有一些简单的原型出来(页面静态效果)。
第三步是产品评审阶段,这个阶段将由产品部和技术部的人员一起参加,产品部的产品负责人讲述该产品的实施方案并展示效果,参与评审的人将就产品方案的合理性、可实施性乃至更加细节的UI等提出各种意见,而技术部的相关人员除去这些问题之外,还将关注产品的一些隐性需求,而这些需求往往是产品经理容易忽略的。如果产品通过评审,那么该产品将进入到技术部的实现阶段,否则,产品经理将负责修改该产品设计,再进入评审。
第四步是技术设计阶段,这个阶段由技术部负责,在这个过程当中,技术部的负责人将和产品经理进行更加深入的沟通,所有的细节在这个阶段都需要落实,在框架设计评审当中,某些情况还需要产品经理参加,以确认因为一些技术上的要求改变产品设计的可能性,比如由于性能上的要求而不得不放弃一些个性化的设计等等。
第五步是技术开发阶段,这个阶段很容易理解,不多讲述了。
第六步是测试阶段,参与测试的人员包括:开发人员本身,技术部测试人员,产品经理,有时候还会包含部分会员。
第七步当然是发布了。
由以上的开发流程可以看出,产品设计人员与技术开发人员的沟通,主要集中在第三步产品评审阶段和第四步技术设计阶段。在这个过程中,有几个方面是需要特别注意的。
第一点:听
在别人讲述自己的产品设计或者技术设计的时候,先不要急于发表自己的观点,有问题可以先记录下来,让对方完整的表达清楚以后,再发表自己的观点,这样的效率要比随时打断对方好的多,而且往往你想要问的问题,对方其实已经考虑过了,只是还没有到讲述的时候,所以一定要善于听。
第二点:复述
这个非常非常重要,当你听完对方的表述之后,请用简短的话来复述一遍你的理解,而不是用一句“我知道了”,或者“我明白了”来作为你的反馈,往往信息在这个沟通过程中会因此丢失而产生误解,所以,复述一遍,会对提高你们沟通的效率产生极大的帮助。
第三点:去理解设计背后的需求
无论对技术开发人员还是产品设计人员,都应该去尽量理解对方设计背后的真正意图,而不是仅仅关注设计本身,只有这样,你才能在之后很多细节的判断上有足够的判断力而避免更多的沟通成本或者出现差错。
当然,沟通作为一项重要的职场技巧,本身有着很多需要学习的地方,这个不是本文想要讨论的地方。
发表时间: 十二月 20th, 2009 , 作者: echomaomao
周末宅在家里没做什么事情,翻看了一下电话簿,发现很多朋友都好久没有联系了,不知道这些朋友还在吗?
这段时间的工作重点都是在新的项目–团购上。说道团购可能很多朋友都会想到团长、团员的角色。
恩,不错。如果我说到这个概念你能想到,说明你是个很有画面感的人,恭喜你。。嘻嘻,我就自认为自己是个很有画面感的人,别人和我说一个概念,第一呈现在我脑海中的不是如何理解的文字,而是对应的画面呈现。我觉得这样的人是幸福的。HOHO,是不是罗嗦了点,回到正题。
团购,经过团队长久的努力和付出的加班加点,终于下周一要和用户们见面了。这一次的见面是对我们这群幕后的工作人员一次真正的检验。
其实在团购项目的规划过程中,无论是从上层决策还是到具体执行层面的人,都遇到过“冒进”的现象。
*在一开始讨论团购概念、模型的时候,我们讨论了很多很多的内容、很多可能出现的异常情况,针对这些异常情况如何去处理,太多了,我无法一一的列举。
*但是我庆幸的是我们的决策者是英明的,在规划的关键时候,他们做出了明智的决定;阶段性的推出团购功能;第一阶段、第二阶段、第三阶段。。。用户接受我们的产品时有一个循序渐进的过程,那么我们也是需要一步一步的把路走踏实了,再在行走的过程中,总结经验,以便给我们用户更好、更有的操作体验和利益。
下周一,我们就要向用户开放团购申请入口了。希望我们能为海外哪些朋友们提供更优惠、更贴心的服务。
说到这里,我不得不说,在团购项目策划的过程中,我们的亲爱的用户积极的参与到了我们的设计过程中,为我们提供了很多很好的建议。真的很感谢这些用户把你们的心里话告诉我们,以便我们能设计出更适合你们的产品。
做产品也有两年左右的时间了,期间我逐步的明白了用户在我们产品设计中的重要性。但是我们现在很多设计师、产品经理,在设计产品的过程中,更多的是把自己当成了一个用户,来设计一个自己喜欢的产品。或者我们觉得用户应该喜欢这样的产品,那好,我们就这么做吧!
事实,作为产品人员,我们应该这样吗?
我们应该如何让用户和我们交流,如何让用户将自己的心里话告诉我们?我们如何让产品有一个质的飞跃?这些都是需要我再接下来的工作过程中,不断实践、不断总结得到的,如果有幸我能总结出一套可用的方法,将很高兴与大家分享。
就写到这了,周末给自己顿了汤,朋友,想喝不?HOHO。。
have a Nice day!
发表时间: 十二月 11th, 2009 , 作者: lijin
今天讨论一下表格设计,关于表格,表面看起来很简单,要做一个漂亮表格难度可不小,也很少有人对表格进行修饰和设计。表格功能主要是展示数据和记录数据,而过多的文字容易使眼睛疲劳,因此一个的舒适表格有助于用户静心阅读,也是网站注重细节的体现。
首先说说表格的色彩,表格的功能以展示数据为主,因此表格本身的色彩不宜太过鲜艳,适当的柔和。为了能让表格在页面上有一定分量,为表格加了一个淡灰色的背景,然后再在背景里镶白底线框表格,上下左右边距为6px,这样中间内容显得格外明亮,立即突出表格,行与行之间白灰相间,这样防止阅读时出现错觉,方便用户阅读。
关于表格文字颜色,一个表格里文字必须分轻重,如:下图是一个消费记录表格,金额为表格重点,因此用红色突出重点。切记,表格文字颜色不宜太多,多了会显得花,可以根据表格不同来确定重点的栏目数;链接用蓝色,这是用户习惯;其他内容用黑色,这也是表格文字的主要颜色,他不但是有效的数据,还能起到衬托重点的作用。表格的特殊数据展示(如下图),出现几率相对较低,但是视觉冲击一定要强,因此文字颜色用了一个和红色互为补色的绿色,很容易区分出和其他数据的不同。
最后表格需要整洁、大气,因此表格文字的行高、字体大小、边距也必须按好好把握,根据以往的经验,内容距离边线框10px比较合适,当字体大小是12px时,内容行高为20px最合适,当字体大小是14px时,内容行高为22px最合适。
以上是个人见解,仅供参考!
发表时间: 十二月 9th, 2009 , 作者: abby
喜欢一部叫做《喜羊羊与灰太狼》的国产动画片,
喜欢那只懒羊羊。
事实上,在Internet上冲浪的每一位网民,心目中都有一只懒羊羊。
当我随便点开一个网站,我懒得花上一分钟甚至几十秒去思考,这个网站是干嘛的?
这大概和我看报纸的习惯类似。地铁里有免费派送的报纸,而搭地铁的时间却很短暂。每天信手拈来,第一件事就是阅读各大板块的各大标题,除非特别有兴趣的话题,才会看底下的小字正文。
上网站也一样,就拿Panli代购(http://www.panli.com/)为例。
首先,不得不赞一记它的logo:
十分清晰明朗滴告诉我,这是一个为海外华人代购中国商品的网站。
其次,右上角的购物车等导航信息,更加证实了这样一个讯息:在这里可以进行网上血拼。
还有它的一级菜单栏目,表达的意思还是蛮清楚滴。
至少,我没有去点“帮助中心”,更没有使用“在线客服”。
这就是我第一次上Panli代购网站的感受。
作为一名交互设计师,很多时候需要换位思考。
如何让网民在上我们网站的时候,想都不用想,就能够接受到我们所想表达的全部讯息,是设计师们需要深思熟虑的首要问题。
多学习,勤思考。
相信在不久的将来,我们会做得更好!
发表时间: 十二月 4th, 2009 , 作者: daisy
“帮助中心”的内容优化在这一阶段基本完成了,但往后还需不断的修正与追求完美!通过这次为时大半个月的研究与优化,我作为一个网站编辑,对Panli代购的整个操作流程与常见的问题有了更全面的认识,当然不能自大的认为自己已是Panli专家了,有时候用户提到的问题,我还是不能像我们的客服MM那样对答如流,嗯,还要继续努力……
在优化帮助中心的过程中,经过我们产品部老大的提点,让我学会了如何才能让用户从“帮助中心”中得到真正意义上的帮助,而不是让用户越看越迷惑。在这里跟大家分享一下:
1、语言不能生硬、冰冷
在优化常见问题的文案时,语言不要像一个机器人在陈述,生硬而冰冷!
我刚开始优化内容时,就像其他网站的帮助内容那样,以为写得清楚、明了、简洁就OK了,后来给上级初审时,被告知一定要注意语气上的表达!!不但要准确的的传达信息,还要让用户感受到良好的体验。
我想了半天,这种说明性的帮助内容,要怎么注意语气呢?总不可能像在论坛那么随意吧,整天装可爱的用语气词“哦…哈!…呢?…”我使劲地想象自己是一个很有耐心、很有爱心、很有礼貌的客服,如果遇到一个烦躁不安、急不可耐的用户要寻求解答,我该以怎么样的态度去面对他们呢?
(1)最起码,就是回答所有问题时,一律用尊称“您”!用户永远是我们的上帝,是我们的衣食父母,就算他只是个小屁孩,我们都要礼貌而温和地说:您……请您…..
(2)对于一些让用户感到极不理解而觉得生气的问题时,首先要说“很抱歉”….但这个用法并不多,因为目前也没有很多让用户产生负面情绪的问题。
(3)语气要软化。用户不是我们的下属,不是我们的敌人,回答问题时,少用“不予”、“不能”、“不允许”之类的词语,可以改为稍微温柔一点的词语,例如“因为…..所以我们建议”、“无法”(这个比“不能”听起来好受点,“无法”一般是客观原因造成的,而“不能”,更多的是带了主观色彩)。
2、为用户着想
在我看来,语言要按着用户的逻辑思维撰写,这一点应该最能体现“帮助中心”的文案水准。
如果语言的表达顺序糊里糊涂、颠三倒四,或者撰写的人连自己都搞不清楚那道问题的答案,就更谈不上为用户解疑释惑了。当然,编辑我也不是万能的,不可能有机会操作每个代购流程。这时候,我就要厚着脸皮,整天骚扰客服MM了,一遇到问题,就要打破砂锅问到底。只有自己了解了,才能准确的给用户传达答案。
用户希望看到什么形式的内容?该按什么顺序表达?这时候就需要发挥我们换位思考的能力了!
3、文案要具有统一性
做到这一点的前提:就是要对代购流程有透彻的理解,因为这牵扯到了每一个词语的表达!
(1)同义词不能有多种表达方式!举个简单的例子,不能一会说“会员”,一会说“用户”。
(2)弄清楚相近词的不同,例如:代购单、订单、运单,没有对代购的深刻了解,就很容易混淆这几个词的表达意思,也会误导用户的理解。
今天先写到这,欢迎大家提出宝贵意见啦。
发表时间: 九月 13th, 2009 , 作者: 胜哥
发现了一些人们使用网页的习惯以后,我们设计页面的时候就可以有针对性的做一些处理,同时要满足人的心智模型来做一些常规的、通用的设计。我们的每一个网页都要考虑为两种用户的设计。
一种是老用户,这类的用户对我们的网站有一定的了解或者比较熟悉,他们对页面的了解会让他们潜意识里避开他们认为不重要的,或是与他们本次访问目的无关的部分。他们希望的是快速的使用和操作,所以,我们要做好针对老用户的快捷通道和操作,避免一些过分的干扰元素。如果网站推出了一些新的活动或者功能,也可以在重要位置给出提示,让老用户知道。
另一种是新访问者,对于新访问者要做好营销和指引。营销是多方面的,可以是对商品或者资讯的推广,也可以是营造的提升网站信任度和人气的氛围等。相对而言,指引就更加重要了,让新用户在使用网站的过程中,疑惑尽可能的少,产生疑惑时,马上就可以找到相关帮助和指引。
一般网页的设计师或是策划人员都是比较熟悉互联网操作的人,在设计网站时,一般会在潜意识里按照自己的喜好或者是习惯来设计,这就容易造成他们设计的网页或者是交互的流程是自己认为很满意,很少去考虑一些异常的情况或是操作流程。其实绝大多数的网民对互联网的使用都还停留在初级阶段,他们不像网页设计者那样熟悉互联网,熟悉你们公司的流程,熟悉你们术语。所以今天要给大家总结下网站可用性设计的几个经典要素。
1. Don’t make me think
不要让我思考,不要让用户思考,你的网页应该是不言而喻的,一看就懂的,要在三秒钟之内,让用户理解这个网站或是网页是做什么的。
2. 最小化设计
如果把过多的信息都塞进有限的网页中去,用户就很难找到自己感兴趣的东西,可以想象一下密密麻麻的网页,需要滚动好几个屏幕的网页,你作为用户的时候会很有耐心的去看这些东西吗?所以,减少页面的噪音把,尤其是在一些流程的交互页面,更加要注意减少让用户可能中断流程的操作和跳出页面的链接。如果大家留心的话肯定会发现很多网站的注册和充值的页面都非常简单,这里你唯一能做的事情就是把这个流程走完。
要注意图文混排,网页上图片和文字的比例应该遵循一定的规则,比例失调就会造成审美疲劳而失去重点。一般来说,栏目首页的图文比例在3:7为宜。网页或者图片上的文字要尽量简洁,用户不是到你的网页来看做阅读理解的,所以,还犹豫什么,赶紧去精简把,精简到你觉得不能在精简为止。
3. 给用户反馈信息
在适当的时候要提供适当的反馈信息给用户,例如,用户进行了上传文件的操作,那么就告诉他,我正在帮你上传文件,并给出进度条提示,上传成功后,也别忘记夸奖下用户,恭喜你,成功了。
如果用户做了某个操作,却得不到信息,或者要等待很久才知道他所做的操作是否正确,那么他的效率和心情可想而知。
4. 符合人们的心智模型
我们要使用用户熟悉的词汇、惯用语和概念,而不是高深莫测的技术用语和你自认为很酷很炫的名称。同时,界面设计也要遵循一些公认的惯例,体现出控制与效果之间的良好对应关系。打个比方就是,如果它是个按钮,那么就让他长的像个按钮吧,让用户知道这个是可以点击的。
5. 保持一致性和标准化
每个网站都有自己的设计风格,请保持它的一致性,并且为相似的任务或操作使用相似的元素,这就好比我们装修的时候,每个房间的房门都统一是设计成朝里或是朝外拉开,而不是有的房间朝里,有的房间朝外。
对于同样的操作、功能或是其他的事务,命名要保持一致,不要这个按钮叫钮叫OK,在来一个叫确定,还有一个叫好的,这样用户就会莫名其妙。
6. 帮助用户诊断、识别和修复甚至是预防各种错误
标签: 用户体验
发表时间: 九月 11th, 2009 , 作者: lijin
新版一键填单终于上线了!首先表扬下我们Panli程序员,因为有他们出色的技术能力以及认真负责的工作态度,我们UED团队的想法才得以准确实现。当然也希望广大网友对我们产品提出宝贵意见,我们永远不会满足,寻求不断改进。以下为一键填单正常情况下的三个步骤:
一键填单(第一步)
一键填单(第二步)
一键填单(第三步)
新版本不但在视觉上更加迎合网民,更重要的是用户体验的提升。
首先来说说视觉,窗体采用橙色为主色调,根据色彩心里学,橙色可使人心情舒畅,产生兴奋感。文字的颜色也有讲究,一般文字是用黑色或灰色;提示性的语句用相对温馨一点的蓝色;需特别注意的用红色,起警示作用(如下图);成功提示用绿色(第三步),填完代购单需经历两个步骤,而绿色对疲惫与消极情绪有一定的作用。设计版面时,特别注意了网站的层次感以及窗口布局的齐整,这样能让用户感觉舒坦。
用户体验上的改进,第一,增加了商品图片缩略图,这方面的改进能起到心里暗示作用,用户更能确定这确实就是他所要代购的商品;第二,提示信息的改进,引导用户操作,即使初次使用一键填单也会轻松完成代购单填写;第三,表单的改进,这里主要重新设计了几个状态:1.蓝色边框的普通状态;2.抓取成功的是灰色锁定状态;3.未能抓取到数据情况下的警示状态,提醒用户手动输入数据;第四,完成填写后的提示,包括商品的信息和个人购物车的数据,加入这些提示,能让用户消除一切怀疑心态,让其确信商品已代购成功;
感谢大家对Panli的支持,欢迎各位留言。
发表时间: 九月 8th, 2009 , 作者: echomaomao
哈哈,看到标题是不是又被雷到了!赶在青春的尾巴上,偶也想潮一把,想学做做标题党。
今天要说的呢,当然还是关乎用户体验方面的问题咯;今天继续的依旧是昨天拼单购的策划,页面信心结构基本已经搭建成功,漂亮的小阁楼我已经看见了,就等着装修、粉刷验收了。
因为拼单购设计到前台、后台以及我们的业务操作人员很多的环节,所以在做的过程中,还是非常谨慎的。思考了很多用户在进行拼单的过程中,可能遇到的问题的收集,也找到了相应的答案;快下班的时候,我们可爱的d问了我一个问题,发现自己好像没有考虑到,于是找到相关负责人进行“交涉”,讨论的过程中,最终确定了一件事:
原始单形成人(第一个下单买商品的用户)如果原始单有人拼单,此后该原始单的用户撤单了,那么我们对于该用户将要做如何的处理?
1、限制拼单:该用户如果撤单了,那么就再也不能拼这件商品的单了;首先是该订单状态有变更,其次防止用户恶意操作;
2、积分如何奖励?原先是如果用户有人拼了他的单,那么系统是要给予他除了本身商品购买的积分外,还要奖励其他用户产生新单金额对应的积分的;但是现在这个用户他撤单了,我们还要给予他奖励吗?
回答是必须的,其他用户拼了他的单,在一定程度上是该用户促进了用户使用我们panli代购该商品,则即使他撤单了,我们还是要给予他相应的积分。
panli给了用户这么温柔的一双手,用户能感受不到我们的温暖吗?给我你的温柔,还你无限“钞钞”
标签: 用户体验
发表时间: 九月 7th, 2009 , 作者: echomaomao
看到标题,同志们不要被吓坏哦。着实是因为今天一天伤透了脑筋在思考接下来要上的一个功能(栏目):拼单购。
说到拼单,可能很多MM都知道,和姐妹淘们一起拼个单,买个国外某个化妆品。
现在说说panli拼单购得功能在策划过程中,遇到的一些问题,和思考的过程吧!
拼单购,首先我们面向的用户是海外的用户,他们有强烈的购买国内商品的需求。从各方面因素来考虑所以panli推出的这个功能,业务流程其实已经定好了,那么我们剩下的就是将功能体现到前台给用户来使用;
先说说第一阶段我的思路吧。
1、拼单首先要考虑的是,为什么用户要拼单?
2、我们希望用户以怎样的氛围来完成拼单购买?
显性展示用户拼单可获得的好处:
先回答第一个问题:为什么要拼单?MM们一起拼单购买某国外化妆品官网的产品,因为国际运费很贵;这次的促销活动中的产品,我只需要其中某些,需要别人跟我一起拼一下才能买下这套优惠套装。。。。其实归根结底还是因为拼单可以少花钱嘛;panli的会员拼单买东西,能有哪些优惠?省国内运费,还可以送积分(PS:积分可以积累兑换成人民币的说);虽然不能省去昂贵的国际运费,但是能省国内运费还能送积分,能省就省咯;所以页面中要将用户可获得的好处显示的展示出来!
网站起主导作用:
拼单购刚刚推出,与传统的国外代购的拼单有一些区别,在panli网站上用户还没有形成拼单习惯或者还不知道有拼单这么一说的情况下,网站方起到了很重要的作用。panli要推动用户来完成拼单的动作;呈现到页面上,就是我们需要明显的告诉用户当前哪些商品可以拼单;
完成了第一阶段的策划后,觉得页面体现内容还是不够,于是像领导求救;他当头一棒的提醒告诉我,我们要给用户营造一种时间紧迫的氛围,让用户来完成拼单的动作;
于是脑袋中立马闪现一个词:“十万火急“想尽办法勾引用户来拼单。。(想法是否有些恶毒?HOHO)
于是做了第二次的页面改版,在页面的相应位置加上了当前正在进行的拼单、可以拼单的商品数量、拼单进行时等相关内容、信息(因为我们不能用距离不能拼单操作的倒计时,所以要在页面上用隐形的信息,体现出显性的需求)
昨晚第二次改动后,盯着页面看了10分钟;我们的用户都是女生居多,女性对视觉给予的冲击和时间进行的刺激都是非常明显的,那么我们是不是可以将相关信息更加现实的体现?
于是我做了另一个改动:增大图片的尺寸;加大拼单进行时、可拼单商品等字的大小;
准备完成这次策划了,关掉了文档,想了想又打开文档再想想,有个非常重要的一点被我忽略了:用户也许会对拼单的时间、拼单的一些操作会有一些疑问,那么我们是不是可以在页面上增加这些帮助信息呢?
所以我做了第三次改动,在页面上增加了关于拼单可能出现的疑问的帮助信息;
最后综合考虑了一下,将帮助信息链接到论坛去,为后期论坛增加拼单等板块做前期的铺垫。。
+_+头好晕,写了一堆,不知道有没有把东西写清楚,今天先写到这吧。。好的产品时需要深思熟虑的,这是对用户的负责,也是对自己的负责。今天的一版到此为止,明天继续
标签: 用户体验, 设计思路