• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 用一个实战案例,教你一款适合UI设计师的调研方法

用一个实战案例,教你一款适合UI设计师的调研方法

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含ui设计,UX设计,用户调研,经验分享等相关知识,希望在学习及工作中可以帮助到您

@小魔女HOHO :UXD是最近很火的一个词,我也总是在想怎么做才能把自己在交互用研上积累的一些知识融汇贯通到视觉设计领域。尝试着做了一些摸索,很乐意把这些经验写出来同大家分享。作为最初期的探索,可能有很多不成熟的地方,欢迎大家留言,我们一切探讨学习。

可能很多UI设计同学都有过这样的疑虑: 我们作为整个产品设计的最后一环,很容易受到一些局限,冷不丁就成为了交互稿的“填色工具”。越来越多的UI设计师也更倾向于转岗去“话语权”更大的交互岗位(对,我一定是个奇葩)。

很多人都会认为UI设计是一件简单的事:美术。关于设计方案的讨论也总会归结到个人偏好上。当“从用户角度出发”在视觉设计嘴里蹦出,总显得有那么点力度不足。我们总在强调用户体验,但在实际工作中却发现各种各样的测试调研都会较多的落地到流程和操作面,关乎视觉的部分少之又少。

“美感”真的是UI设计的唯一评判标准吗? 在UX六项基本原则中,我们怎么做才能在保证美感的同时让页面中每个元素都“运作良好”,用视觉的手段去促进用户目标和商业目标的双赢?

在这里我打算结合一些经验和探索,用实际案例,从调研分析的角度向大家介绍一款适合UI设计师的调研方法-DIY可用性测试。

Guerrilla Test(又称DIY可用性测试)是一种被国外UE(在Airbnb的官网上就有他们的相关案例)广泛认同并使用的测试方法,它属于小样本定性测试,仅需3~5名用户,每人大约15~20分钟即可完成。它的目的并不要证实什么,而是找出并修复最关键问题,同时捕捉用户的真实情感。

调研目的:针对滴滴代驾车主福利中心,从视觉设计的角度出发,找到用户在产品使用过程中存在的问题,确定后续视觉优化方向。

和传统招募方式不同,在DIY test中可以使用人脉招募的方式,通过朋友、朋友的朋友去找到相关的产品用户。在车主福利中心的测试中,我们通过人脉招募的方式联系到不同等级的代驾会员共4名。

在具体测试中,我们分成提问-浏览-任务-分析这几大步骤。

提问

首先,我们需要对参与者的一些个人情况进行询问,使他们放松并对其做发声思维引导。同时通过这些基本信息,我们能够更好的判断测试用户对产品目标用户而言处于一个怎样的水平。

在车主福利中心的测试中,我们主要针对参与者的职业,爱好、车型、代驾场景等问题进行了一些提问。

界面浏览

提问之后,我们正式进入界面测试环节。界面浏览的目的是通过一系列问题去了解用户对界面的感知是否符合设计预期。

在车主福利中心的测试中,我们针对车主福利中心首页的设计,就三个问题对用户进行了提问:

f4d458efbffaa8012049efc205d9.jpg

(注:该图为设计效果图,实际金卡会员的等级、活动、工具等依线上具体环境而定)

Q1: 这个页面中什么地方最吸引您?

目的:测试页面视觉呈现是否做到了主次分明,对于产品战略的重点部分,是否给予了足够的视觉比重?

Q2: 您认为这个页面的作用是什么?

目的:测试页面视觉设计是否向用户传递了正确功能引导?

Q3: 当您使用这个页面的时候,您会用它提供的哪些功能或服务?

目的:测试页面的视觉设计是否很好符合了我们的商业预期,用户对此是欢迎还是排斥?

在每一个提问环节,设计师都要做到刨根问底,鼓励用户说出最真实的想法和原因,最后很有可能获取到完全出乎意料的结果。

任务测试

任务测试是DIY test的重点,也是从前期准备到后期数据整理花费时间最多的部分, 主要分为问题排查-任务设计-任务执行三个环节。

问题排查

由于是针对视觉设计进行的用户测试,我们首先要按照一定的顺序对页面中的视觉元素进行逐一梳理。

以车主福利中心为例,该页面自上而下分为:会员板块、特权/福利板块、专属福利板块、小工具板块及活动板块。每个板块都由一系列视觉元素构成,我们需要测试的就是每一个视觉元素能否各司其职去完成自己的使命。

在针对这些视觉点准备问题时,我们可以把自己想象成用户,跳出UI设计的框去思考:如果我是用户,我在使用这个界面的时候会对每个视觉元素有什么不同的看法?我知道什么地方可点,什么地方不可点吗?我会先阅读文字还是图形?我能正确理解这些图形元素的意思吗?它们向我提供了正确的引导还是反而让我更加迷惑?

以会员板块为例,它包含的视觉元素有用户头像,用户等级,用户姓名、代驾频次、升级进度以及最右页面跳转引导箭头。我们在问题梳理的时候这么询问自己:如果我是用户,我能清楚判断出当前等级吗(对应元素:背景图及对应icon/文字)?我清楚大概还要多久才能晋升到下一等级吗(对应视觉元素:中间文字信息及进度条)?我知道如何查看到关于会员等级的更多信息吗(对应视觉元素:最右跳转箭头)?

在问题梳理时,可以使用FreeMind对页面视觉元素及对应功能按照自上而下的顺序去做梳理,猜测每个元素可能给用户带来怎样的误解,每个误解背后对应的是怎样的视觉问题。

任务设计

问题梳理完毕后,我们对相关部分进行整合,组织成一个个包含情景及限制条件的小任务,同时每个任务在实际完成的过程中又可以拆分成一个一个的子任务,通过用户完成任务的过程对每一视觉元素的运作问题进行分析判断。

在任务设计的时候需要注意以下几点:

1、不要给出任何相关的线索

2、不要使用专业术语

3、?添加有用的情景,去除无用的情景细节。

在任务设计时,需避免使用页面中的文字提示,以防用户不是去完成任务,而是去寻找相关词语。而添加情景是为了让用户自主的去利用我们提供的视觉元素完成任务,而不是像机器人一样,在接到指令之后“寻找”相关的视觉元素:添加合适的情景是在DIY Test测试中是一个非常重要的环节。

仍旧以顶部会员的UI测试为例,首先我们对每个可能存在的问题都进行了罗列。

在这所有问题中,我们觉得用户可能对不同等级的感知较弱(icon和对应的背景),同时右侧箭头的引导可能不是很明显。这两点会成为该板块引起较差用户体验最主要的部分。因此我们在针对会员板块的任务设置中将主要就这两点疑虑进行测试。

测试目的:判断会员等级设计是否明确,页面跳转引导是否正确

任务执行

在任务执行环节,首先设计师要做到不去打扰到参与者,鼓励他们做每一步操作的时候都尽可能说出自己心中的想法。如果遇到参与者提问,可以巧妙的将问题重新抛还回去,切忌不要给予任何的提示。

其次,当参与者无法顺利完成任务,或者出现一些不良的情绪,比如暴躁,沮丧的时候,应该立刻终止任务的继续,表示感谢后进入下一个任务或下一测试环节。

如果对参与者的某些操作有所疑虑,或者任务的部分无法覆盖到所有需要测试的点,可以将有问题的部分记下,待整个测试结束后再进行询问。

提一下在做调研过程中的一些注意事项:

1、无论如何都不要向参与者提供任务相关的线索;

2、不能回答他们的任何关乎任务的问题,而是用“您觉得呢”直接抛还回去;

3、不能透露出自己的观点,如“这个功能很好用,这个部分很又吸引力”,也不要附和参与者的类似观点;

4、可以说的是“好的”“可以”或者是对参与者话的附属

您可能想查找下面的文章:

  • 2013年网页设计UI最热趋势 最流行的UI设计
  • 通往优秀UI(用户界面)设计师之路的20个路标
  • 这10条认知,可能就是你和大厂UI 设计师的差距
  • 针对零基础新人,我给出这份可能是最详细的UI 自学流程总结
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 想成为互联网设计师?先来看这篇超全面的介绍!
  • 这篇超详细的教程,帮你全面掌握 APP 中的投影设计!
  • 超全UI设计规范,带你了解规范设计全流程
  • UI 设计新人如何接私单?来看高手的经验!
  • 用一篇文章,带你回顾桌面GUI 的设计发展史

相关文章

  • 2017-08-06关于服务器返回的十四种常见HTTP状态码详解
  • 2018-08-23历时7天,168小时,超过100页的「复仇者联盟」PPT 免费下载!
  • 2017-08-06网页设计中flash覆盖弹出层设置z-index属性也不行
  • 2017-08-06div css命名规范 css class命名规则(符合SEO规范)
  • 2017-08-06用@font-face实现网页特殊字符(制作自定义字体)
  • 2018-08-23我们用这个设计方法,从零开始做出了「轻芒杂志」
  • 2017-08-06HTTP头部信息解释分析(详细整理)
  • 2017-09-11nodejs extend包
  • 2018-08-23如何避免产品设计中的「生造方案」和「重新发明轮子」?
  • 2018-08-23高质量好文!人人都在说「产品目标」,今天带你真正了解下

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 浅谈网页颜色的搭配技巧(前端必看)
    • 网页制作常用英文字体
    • html5中几个不容错过的api或者tips小结
    • 进阶高级!帮你做能落地的界面之Tab的小短线
    • 系列三部曲!中国式草根设计师的自我提升(完结篇)
    • rgba alpha 透明度的转换计算表
    • iframe在IE6下出现横向滚动条的解决方案
    • 用这个方法,让你的设计方案轻松通过! 
    • 如何设计支付购买流程?来看这份超全面的UX优化方案
    • CSS样式表与格式布局详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有