怎样做符合用户预期的设计

fmms 12年前
     <div id="news_body">     <p>        设计中说的最多的就是“用户预期”这个词,但是到底什么样的设计是符合用户预期的?怎样做呢?</p>     <p>        每一个设计都有它的一些特征,这些特征导致了它有一定的暗示作用,从而让用户觉得这个东西应该是这样使用的,但是当我们的设计不是这样支持的时候,那么用户就会产生困惑和抱怨。</p>     <p><strong>        例子1. </strong></p>     <p>        在参与设计手机端地图的时候,有这样一个设计:在地图的顶部有一个搜索地点的搜索框,点击它会引出右面的页面。</p>     <p><img style="width:553px;height:383px;" class="aligncenter size-full wp-image-5398" alt="怎样做符合用户预期的设计" src="https://simg.open-open.com/show/873d29aa450284a03e1b923cd91b91a3.jpg" width="720" height="500" />         明明就是个输入框,但是为什么不能直接进行输入?转到右页面感觉就是进入了另一间屋子,跳转多数都不是一个好的选择,因为它切断了用户使用的流畅感,也 就是说用户的思维需要进行切换。改进就应该在地图上面直接进行输入和显示,这样才有比较好的连贯性,更主要的是直接输入是输入框的基本属性,满足了这个属 性才是符合用户预期的。</p>     <p><strong>        例子2.</strong></p>     <p>        在 QQ 输入法的全键盘英文模式下,当长按一个字母键时,会在字母上方弹出一个框来显示更多的符号或者字母,乍一看好像看不出什么来,但问题是当你的手指离开了按 住的字母想要很自然的去选择上方弹出的其他内容时,就在手指抬离的瞬间弹出框已经消失了,根本来不及选择。</p>     <p><img style="width:564px;height:458px;" class="aligncenter size-full wp-image-5399" alt="怎样做符合用户预期的设计" src="https://simg.open-open.com/show/d763a777797995af4762b8970129dbd3.jpg" width="720" height="586" /></p>     <p>        怎么才能进行选择呢?哦,要求手指不抬离直接进行左右拖动选择—没想到是这样操作的! 所以问题就在于:它是一个弹出框,为什么不等着我的手指点击到它就消失了呢?这样一个弹窗让使用触摸屏的用户习惯认为它应该是可以被点击的。</p>     <p><strong>        例子3.</strong></p>     <p>        在 QQ 输入法的选择皮肤弹框出现的时候,</p>     <p><img style="width:564px;height:458px;" class="aligncenter size-full wp-image-5400" alt="怎样做符合用户预期的设计" src="https://simg.open-open.com/show/30ad8768a7406e3edf4a74ea399ee307.jpg" width="720" height="586" /></p>     <p>        左软键意外的不是“确定”,而是“皮肤下载”,这样看似强化了皮肤下载功能,但是却使得此页面最主要的功能:皮肤的选择变得弱化,甚至是不知道 怎么进行选择皮肤。你会想到直接点击就选择了皮肤么?因为在弹出框最自然的用左键确认的方式被改变了。所以当你改变一种已经形成模式的设计时,如果这种改 变并不是自然直接的,那么就是违背了用户的预期,从而变成了一种强烈的干扰。</p>     <p>        这里引入一个设计原则即功能可见性(affordance)或者叫做预期。</p>     <p>        什么是 affordance:事物可被感知的,最真实的属性直接决定它应该被怎么使用。所以怎么做设计能符合用户的预期呢?</p>     <p><strong>        1.  了解你的 target user 是什么样的人?他们有什么样的特征?他们有什么样的背景?</strong></p>     <p>        用户的心理预期与他的使用经验,知识有直接关系,也就是他建立起来的 mental modal。只有当设计符合他的 mental modal,那么就是和他的预期是一致的,这样的设计才是好的设计,换句话说只有设计师的 design mental modal 更贴近用户的 mental modal 才能设计出贴近用户的产品。</p>     <p><strong>        2.  让设计与外界信息相结合</strong></p>     <p>        比如说你设计的是触摸手机,那么就应用触摸屏的特性来进行设计—–为什么 android 手机的长按一直被诟病着?为什么 iphone 的 home key 可以双击,但是不容易被发现?因为用户对这样的操作没有任何预期,长按之后会有什么操作,这个用户不知道。Home key 可以双击?在触摸屏上,双击是很隐晦的操作,不符合用户的使用习惯,而点击是直接的,是触摸屏的基本属性,不需要思考的。</p>     <p>        所以很多时候要考虑我们的设计是不是符合了它的基本属性,是否按照它最自然的方式被使用。</p>     <p><strong>        3.  可以通过在当前状态下检查用户是否很顺畅的完成任务</strong></p>     <p><strong>        4.  他的目标是什么,设计是否能帮助他完成目标还是阻碍了他的目标</strong></p>     <p><strong>        5.  设计是否让他去猜测了</strong></p>     <p>        做了这么多年的设计,有的时候是凭直觉来感觉到这样做有问题,但其实归根结底要知道在每一个细节其内在的基本属性是什么,只有满足了这些基本属性才能做出最完美的符合用户预期的设计。</p>    </div>