Web用户体验设计总结

最近一直在做APM报表的重构,记录和分享一些看法。希望可以坚持,今天先做Web用户体验设计的总结。因为重点再重构上,所以可能所说的内容有局限性。

最近一直在做APM报表的重构,记录和分享一些看法。希望可以坚持,今天先做Web用户体验设计的总结。因为重点再重构上,所以可能所说的内容有局限性。

一款优秀的产品在用户学习的成本上,应该是慎重且克制的。换一个角度说就是界面应该能教导用户。

这一点非常重要,用户界面需要让用户在不求助于帮助页面的情况下能够使用绝大部分功能。许多开发者和设计人员认为,帮助一栏已经写的非常详细了,一定可以指导用户完成对应用的操作,但大多数情况并非如此。事实上,对于大多数产品来说,往往只有那些想探寻产品的每个角落的高端用户,才会用到(或者被逼着用到)帮助文档一栏。

帮助用户最好的方式是用一种容易理解的方式把帮助信息展示在用户面前。网页设计其实就是为用户创造一个好用的阶梯,帮助他们完成任务并提高这个过程中的用户体验。

当看到像百科全书一样复杂的帮助文档时,就该考虑下页面中心设计的问题了。

对一款你感兴趣的陌生产品,熟悉的过程应该是了解、吸引、专注、最后到依赖。像谈恋爱一样,对产品产生一种情感上的依赖。

但是怎样往这个目标前进呢?或是说怎样做出一个让人依赖的产品呢?

作为产品设计人员,一款产品重构的阶段,第一件事就是评价它的好坏。评价当然可以是感性的、武断的,但是要对网站做专业的系统性的评估,就需要我们更有条理,更全面。

我比较喜欢使用的是多层评估,从表面到核心研究多个层面,包括:网站核心功能;导航和信息架构;表单和输入项;可信度、可靠度;内容质量;搜索;帮助、反馈和容错度;页面布局和视觉;可达性和技术设计。

这是一个思考过程也是一个清单,当我们把每一条进行展开,列出更多问题时,我们就能更全面的评估这个产品。

比如对导航和信息架构的分解:主导航的维度是否一致;信息架构是否按照元数据进行分级;信息层级是否过深或混乱等等。

根据上面的维度画一张雷达图,就可以比较直观的看清目前网站的情况。

好了,知道网站有问题了,现在刻意进行修改了,应该如何下手呢?

可能很多设计师马上对有问题的地方进行调整,比如错乱的信息架构,负责的帮助系统等等。

这时候其实应该站在更高的有一个角度看待网站重构的问题,我们要设计或重构的不是页面,而是流程~你的用户流程和业务流程。

对于APM类的后台,用户的目标是获取信息,性能管理。对于业务目标可能是增加用户对产品的信任程度,增加依赖感。从而转化为付费用户或持续续费。

流程设计可以让你免于调入设计独立页面和交互行为持续优化的怪圈,而是专注于满足用户需求。设置优先级将精力放在对大部分用户和业务带来价值的流程。创造连贯的用户体验,为用户和业务带来更好的结果。

但是。。人在江湖身不由己,付费的亲爹们,你们的需求我这就优先加上。。。。

这也是理想型的产品和做现实中做产品的区别,有些事你知道必须要做了,但是会有人告诉你这个更必须。所谓成熟,就是在两者之间找到一个大家都能接受的平衡点。

好了,说正题,既然站在设计流程的高度看问题了,问题还是要解决的,如何下手呢?

产品功能设计另说,单说报表类产品提高用户体验的方法——数据墨水比

即把墨水分配给必须要展示的数据,这是展示数据的核心要求。怎么做呢?

1、数据第一位

数据图应该把读者的注意力集中在数据本身的意义和形式,而不是其他内容。这里不是说我们要光有图表的无趣设计,也不是美感不重要。我们应该在为数据添加设计元素的时候更加谨慎,每一个元素都必须有特定的功能,并且不能把用户的注意力从数据上分散出来。

举例:目前报表设计中,关于折线图日期标记为06-29  00:00、07-06  00:00    这个00:00是什么鬼。。。

2、有根据的删去不含数据的像素

虽然有时候一些无用的像素能够为数据操作带来帮助,但大多数时候,他们并没有什么卵用。要把注重核心数据的规则应用到重构上,就需要对设计进行一个评估,着手提高数据像素比,简单说就是没用的删了,有理有据的。依据就是这些像素对首要任务并没有直接帮助。比如过度吸引注意力的字体、抢眼的图片。

3、有理有据的删去冗余信息

大量装饰对数据的强调会产生许多冗余的像素,报表类产品更适合实现简单的美感。

4、有理有据的最大化数据像素比

做了以上三步,第四步基本就快做到了。

5、调整

产品设计中花费最多精力的地方应该是审阅。删减、修改、链接、纠正、测试,这些过程比创作更重要。

用户体验优化是一个没有结尾的循环,整个重构和优化的开始是站在更高的角度看待业务流程并从数据像素比的方面切入,来不断的进行优化。

这篇web用户体验设计优化总结就写到这儿了,因为再不睡就要饿了。。。

希望可以共同讨论,一起交流。

作者:性感瓶底儿

来源:http://www.jianshu.com/p/48b592f3d79f

 

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/31940/

(0)
CatherineCatherine
上一篇 2017-06-03 11:31
下一篇 2017-06-03 13:18

相关推荐

  • 网页感知价值研究:UI中的感知价值

    “感知”本身是心理学层面的概念,界限很模糊,以下是围绕网页感知价值研究的一篇文章,来自nngourp。定义:感知价值是指对产品或服务目标的主观感受。

    2017-05-13
  • 对话式交互设计

    关注一下,更多精彩等着你1. 轮流表达在对话中我们基于互相来回传递的微妙信号进行轮流表达。如果会话中缺少这种有效的轮流互换,我们就有可能难以保持信息的同步或无法跟上对方的节奏。2. 对话串联在自然语言中,对话的所有元素通常会被连贯地串联起来,包括上下文以及随时间演进的对话方式。这种串联帮助我们跟进会话过程。能够理解欣赏笑话幽默的人都知道,在交流中的每个回合都要注意上下文的关联性,并加强整体的交流。3. 潜在效率人们经常会用简略的口语交流...

    2018-03-21
  • 网易考拉海购APP产品体验报告(可下载)

    干货分享:网易考拉海购APP产品体验报告,33张幻灯片解析产品体验

    2016-08-23
  • web图像的常见应用策略与技巧

    本文介绍一些关于响应式图像的适配应用策略,回退原理,SVG的换色技巧,雪碧图的百分比定位计算公式等相关的一些小知识点,目的在于帮助一部分同学快速的理清图像应用思路,以及一些web图像的应用技巧。data-src
    data-srcset
    在加载到的时候更换为
    src
    srcset容器元素的尺寸:elW * elH
    单张图片的尺寸:imgW * imgH
    Sprites图片的尺寸:spritesW * spritesH
    单张图片在Sprites图上的位置:imgPosX, imgPosY点的位置为 (x, y)
    容器上的(x, y)点与容器左上角的距离为 cX, cY
    Sprites图上的(x, y)点与本张图片左上角的距离为 sX, sYelW = imgW, elH = imgH
    cX = sX, cY = sYcX = elW * x
    sX = spritesW * x – imgPosX
    elW * x = spritesW * x – imgPosXx = imgPosX / (spritesW – elW) = imgPosX / (spritesW – imgW)
    y = imgPosY / (spritesH – elH) = imgPosY / (spritesH – imgH)

    2017-05-01
  • 如何平衡广告盈利和用户体验?

    如果你是一名手机应用开发者,你肯定知道广告可以为你的应用提供巨大的收入潜力。可以说手机应用就是在为流量主下金子: 到2020年,将会有高达1890亿美元的收入,而其中仅应用内广告带来的收入就会达到1170亿美元。事实上,我们最近对1000多名应用程序开发者进行了调查,发现高达84%的人承认他们通过广告将应用变现 —— 61%的人声称广告带来了最多的收入。但是,一如既往,能力越大,责任越大。作为一名应用开发者,你要负责确保用户的使用体验,...

    2018-04-06
  • "用户体验“真是个万恶的东西。

    前些天跟一个在央企大鳄担任要职的朋友聊天,说起某互联网新闻媒介公司被责令整改的事情,(其实我都不确定每天操劳四化建设工作的他知道不知道这件事)我本人并没有什么观点,只是看周围的人都在吐槽说国家管的太碎了,于是就想听听他怎么说。没想到君付之一笑,言道”活该,就应该封了它,它那么大的用户群体,它那么强的社会传播性,它不负责传播正能量谁负责?难道让警察叔叔们一张张发传单传播吗?你做产品做好了挣钱了就应该想想怎么对社会发展负责,不然国家和这个世...

    2018-05-05
  • 交互设计的两个核心问题:用户体验和以用户目标为导向

    设计师和用户如同在跳交际舞,既要顺应着对方的步伐,也要进行一定的引导。对方是一个人,不只是你感受的到他的温度,他也闻得到你身上的味道,对你时时刻刻进行着评价。

    2017-05-21
  • 这是三种有趣的网页设计趋势,却被低估了

    今天要聊的三种设计趋势其实已经出现一阵子了,但是作为一种相对综合的设计手法,他们并没有引起广泛的关注。只需要使用现有的元素、色彩和排版手法,就可以实现这三种设计效果,但是它们不论是从美学特征上,还是从功能性上,都不输于其他的趋势。有兴趣么?不妨来看看吧。

    2017-05-06
  • 4月最新便民信息!政府、企业、医院、社工...你想要的岗位都在这里!

    各类招聘求职生活信息关注后回复发布查看更多4月啦,又是新的开始没有工作的同学快快看有哪些好工作吧...   ...招聘信息类首先,是我们玩转郫县的招聘啦邀请你一起来和我们玩营销经理▲薪资待遇:社保+底薪+全勤+提成+奖金(4000-10000元)▲职责要求:1.开拓郫都地区美食、休闲、旅游市场2.建立并维护平台与合作商家良好关系3.能熟练运用word、Excel办公软件▲任职资格:1.工作主动、责任心强、具有良好的团队合作精神、抗压能力...

    2018-04-08
  • 芝加哥艺术学院交互设计硕士成功案例

    等你点蓝字关注都等出蜘蛛网了学生档案毕业院校:北京某大学本科专业:网络设计本科平均分:3.45申请学位:硕士申请专业:交互设计TOEFL:95GRE:无案例回放W同学是2015年10月底进入公司服务体系的,想要申请2017年秋季入学的设计类相关专业。通过第一次电话联系,名校规划导师了解到W同学的基本情况是:北京某大学网络设计专业学生,GPA:3.45,TOEFL:77分,没有GRE成绩。再通过头脑风暴课上的深入挖掘,名校规划导师更全面更...

    2018-04-26