符合用户认知的交互才是最自然的交互

为什么有时候只用看一眼就知道这两个东西是什么,如何操作?其实这就是物品所具备的预设用途。物质心理学—研究人和物相互作用方式的心理。一件物品实际上能用来做何用途,或被认为能有什么用途。一个白色的东西加一个按钮在上面,并且一按就会有“奇迹”发生。


为什么有时候只用看一眼就知道这两个东西是什么,如何操作?其实这就是物品所具备的预设用途。

符合用户认知的交互才是最自然的交互

家里一岁两个月的宝宝喜欢用手机做两件事情:

  1. 按「HOME」键,点亮屏幕。
  2. 按住「assistive touch」键,在屏幕上拖动。

符合用户认知的交互才是最自然的交互

并且这些操作都是他自己的发现。

那么问题来了,什么样的设计能够让一个婴儿本能做出正确的操作?

正好最近在调研一些好用的工业用品背后的设计原理,同时把《设计心理学》精读了一遍。

下面就从心理学的角度去思考和分析吧。

先看看下面这个例子:

符合用户认知的交互才是最自然的交互

  • 看见椅子就知道是坐的,还可以搬走。
  • 看见玻璃就知道是透明的,还可以打碎。

为什么只用看一眼就知道这两个东西是什么,如何操作。

《设计心理学》里提到一个理论:

物质心理学—研究人和物相互作用方式的心理。一件物品实际上能用来做何用途,或被认为能有什么用途。

简单来说就是物品具备的「预设用途」。比如:

旋钮–>转

符合用户认知的交互才是最自然的交互

插槽–>插

符合用户认知的交互才是最自然的交互

圆球–>抛、弹

符合用户认知的交互才是最自然的交互

物体的预设用途会提供明显的操作线索,用户一看便知如何操作,无须借助任何的图解、标志和说明。

回到刚刚IPHONE的例子,「HOME键」和「大白点」都是圆形,预设用途体现的非常明显,让人本能的就会去点。

预设用途构成要素

可视性

符合用户认知的交互才是最自然的交互

良好的可视性可以让用户仅通过物体外观就可以清楚明白应该做什么、怎么做、以及预期的结果是什么。比如:

符合用户认知的交互才是最自然的交互

这个门的设计就很好的解决了推和拉的问题。

平板一边=推;竖把手一边=拉;

都不需要文字提示,仅通过外观设计就可以清楚告知操作流程。

匹配性

符合用户认知的交互才是最自然的交互

操作过程和最终结果之间应该是一种自然匹配关系。比如开车时顺时针打方向就会右转。这种关系用户很容易记住,且永远不会忘记。

有几种方式可以实现自然匹配。

1.物理环境类比:

符合用户认知的交互才是最自然的交互

图例是公司的空调操作面板,通过模拟物理空间的布局,很清楚每个空调开关所工作的区域。

2.文化标准暗示:

符合用户认知的交互才是最自然的交互

符合用户认知的交互才是最自然的交互

这种属于常识性的匹配,基本没有认知障碍。包括手机的音量调节,亮度调节显示实际上都是使用这个标准。

符合用户认知的交互才是最自然的交互

再看一个将自然匹配运用的很出色的设计:

符合用户认知的交互才是最自然的交互

汽车电动座椅:通过物理形状模拟靠背和坐垫。通过「前后」、「上下」的操作去匹配座椅的调节方位。汽车上大部分设计都很复杂,但座椅调节的设计应该是最人性化。

反馈

向用户提供信息,使用户知道某一操作是否已经完成以及操作所产生的结果。试想你在和一个人谈话,但却听不到自己的声音,或者你在用铅笔绘画,但却看不到任何笔迹,这两种情况都缺乏信息反馈。

这个相对容易理解,推门–>开、点灯–>亮。让用户及时看到操作结果。

好的设计无需认知门槛

苹果的首席设计师叫乔纳森·艾弗,他以前是做马桶设计。据说IPHONE的「HOME键」设计就是借鉴的马桶。

一个白色的东西加一个按钮在上面,并且一按就会有“奇迹”发生。

除此之外IPHONE里面还有很多操作,比如「滑动解锁」、「点击图标」、「下拉通知栏」等都是自然匹配生活中大家习以为常,并具备明显「预设用途」的物体操作。这就是每个人都觉得好用、简单的原因,哪怕是一个婴儿。

 

作者:思考菌,微信公众号:secondthought

本文由 @思考菌 原创发布于人人都是产品经理。未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-06 13:03
下一篇 2017-05-06 14:49

相关推荐

  • SKD独家 | 美国交互设计排名

    你心目中的交互设计是什么样的 ?也许Google这个产品所创造的场景是你所畅想的交互设计可以被认为是当下最热门的专业,受热捧的程度可以和金融媲美。但是,你真的了解开设这个专业的院校吗?每个院校之间的差异和设置有什么不同?SKD根据院校开设的课程设置、专业排名,特邀我们资深的教研团队根据对自身院校的了解、利用兄弟院校的校友资源、以及院校专业设置等诸多因素的考虑,整理出交互设计的院校申请建议,希望对选择院校的同学有所帮助。注意:本排名仅供参...

    2018-03-28
  • 浅析手机交互设计中的“拇指法则”

    你有没有遇到过一款APP让你用的很不舒服?你的拇指必须要伸得老远才能够得到菜单,或者页面里元素太多导致你经常误操作。这些都是因为交互设计师在设计的时候没有考虑拇指的感受,或者更学术化点说,没有考虑到“拇指法则”。

    2017-05-02
  • 【原创译文】面向对象的用户体验设计

    原文:Object-Oriented UX 2012年6月,我在CNN.com工作时,接到了为“选举之夜”进行用户体验设计的任务。接下来的5个月我为那1个晚上贡献了全部精力——但我的成功对选举的胜利方没啥影响。我所关注的是页面的可读性,…

    2015-11-20
  • 从Surface Studio聊一聊实体设备上的交互细节

    相信小伙伴们这两天的朋友圈基本躲不过微软大法的霸屏。作为工业设计背景的我,也是被它深深地impress到。所以今天我想来聊聊,实体产品上的交互体验。Handles are better for continuous control (e.g. trombone)
    “手柄”对于连续性的控制更加合适。
    Buttons are better for discrete control (e.g. piano keyboard)
    “按钮”对于状态有显著区别的控制更加合适。
    Handles leave you in control (e.g. opening a car door).
    “手柄”是将控制交付于用户手中。
    Buttons are more likely to trigger something automatic (e.g. opening an elevator door).
    “按钮”更倾向于触发一个自动化的过程。

    2017-05-16
  • 【笔记】服务设计方法及手机操作系统设计

    2017年7月9日,UXRen深圳分舵在ThoughtWorks大型培训教室主办了《手机系统设计、服务设计和可视化思维,这次全都有!》的分享活动,本文基于下面2位嘉宾的主题分享整理而成:   嘉宾1:庞博(ThoughtWorks用户体验…

    交互专题 2023-03-03
  • 免费 20个设计优秀的HTML网站模板

    在这个互联网时代,很多企业或是个人都搭建有自己的网站,用于宣传营销或个人网站博客等用途。而对于小企业、个人或不懂设计网站的用户来说使用网站模板将是最好的建站方式,设计达人网致力分享高品质免费素材,所…

    2015-03-17
  • 让视觉设计变得高效+有说服力的4个步骤

    确定情感关键词 -> 情绪版 -> 脑爆概念设计 -> 用户验证

    2017-05-26
  • 赤兔VS脉脉,产品分析、设计是否能驱动产品?

    一、行业综述 随着互联网浪潮的袭来,职场人士已经越来越不满足于传统低效率的设计方式,他们想要快速交友,快速达到自己的潜在目的(找工作、挖人、营造个人品牌等),这部分人群一直都是一个巨大的市场。 领英在2…

    2016-03-09
  • Sketch常用插件介绍

    sketch大家应该都不陌生,在互联网设计尤其是UI设计相对于老牌PS,sketch提升了工作效率,改变了以往的工作模式,sketch的强大除了软件本身,另一个不可磨灭的功劳就是丰富的插件。今天给大家介绍几款常用的插件:一、Sketch Measure一键自动生成 HTML 页面,离线下检查所有设计细节,包括 CSS 样式。在线演示: http://utom.design/news/二、Craft帮你提高效率的自动填充神器a.文本自动填...

    2018-04-12
  • 实例分析:关于上传照片交互逻辑的思考

    最近在重新设计公司APP上传照片的组件,研究了很多移动端上传照片的组件,下面来简单单谈谈自己的总结。

    2017-05-12