交互设计黑魔法 |《交互系统新概念设计》

交互设计是我最不熟的一块,一直觉得从定义好功能到出交互图,这之间的过程就是个玄学。去寻找关于交互的书,又发现大部分是一些案例集,或者只是介绍一些交互原则。看到《设计心理学》说到“心理模型”,觉得茅塞顿开,但是实际工作中依然很抽象。

最近终于找到一本书,把这个黑魔法一步步翻译成方法论。这本书介绍的内容比较抽象,但作者写得还算通俗,且非常精炼,全书没有废话(和《信息架构:超越 web 设计》真是形成鲜明对比阿... > <),五星推荐!!

概念模型

概念模型是全书核心概念,它和信息架构非常类似。其实,交互和信息架构的界线,据我目前来看,是非常模糊的。

概念模型或信息架构关注什么呢?作者用了一个很棒的房型图隐喻:

图1.jpg

它提供的是一个给定功能(例如,厨房和卧室)的空间整体布局,每个空间都在相对其他地方的整体架构中。此外,通过对门和通道的描绘,方案还为我们提供了从一处到另一处所需路线的明确信息。

作为最简化的方案,在进行实施前,该图在评估架构计划时是非常有用的:是否提供了所有需要的功能(例如,有一个房屋)?是否有足够的空间分配给每个功能(例如,餐厅和客厅应该是最大的地方)?入口是否合适?从一处到另一处到路线和距离之间支持简单的导航吗?

为什么要有这个全局的概念模型呢?

视觉场景的全局结构往往先于任何局部特征的感知。

例如这个经典的认知实验,对于大字母 H 的识别要快于小字母。

图16.jpg

概念模型分层

图2.jpg

功能层

作者认为功能设计有3种类型,面向任务的、面向对象的和面向内容的。实际设计中可能是不同类型的混合。

图3.jpg

架构层(概念模型)

架构层即概念模型,也是整个概念设计的核心,关注的是:

  • 用户与应用程序交互以完成任务和目标的“空间”
  • 用户需要的从一个“空间”到另一个“空间”的“路径”
    (注意“空间“这个词汇)

作者在全书中举了一个“设置预约”的例子。3 个平台上的不同设计:

图4.jpg

相应的概念模型是:

图5.jpg

可以看到同一个功能设计,会有不同的概念模型。

导航和策略(物理模型)

这个部分首先是将概念元素转为物理元素,然后是其中的导航和策略。

物理空间

这里有一个重要的概念,即上文提到的“空间”。概念元素的“空间”在物理元素里体现为一个页面、或页面上的一个模块等等。

我们在讲元素、模型这样的词汇时,容易把它们理解为物体。但这里所说的元素是一个“空间”的概念。空间和物体有什么区别呢?如果把一个物体和另一个叠加,不管怎么放,始终是两个物体。但两个空间叠加,也可以理解为成为了一个空间。

知晓了这个区别,就比较好理解一个问题,即,概念空间和物理空间有时是一对一的关系,有时可能不是。

如下图,对于 3 个概念元素,上图中是 3 个物理空间,而下图中是放在 1 个物理空间中。

图6.jpg

导航和策略

这部分关注两点。

  • 空间间的路径:出口和入口、路径的方向、数量
  • 模态 or 非模态

我们在设计用户路径的时候需要考虑一个基础问题,即:

用户是否可以同时执行不止一项任务?就交互流而言,这个问题会产生以下影响:用户进行到下一项任务之前是否应该全部完成或部分完成当前的任务?用户是否需要完成给定的任务,然后跳转从而继续完成下一任务,并且完成下一任务后是否应该能够再返回去完成初始任务?

这就引出模态的概念。

非模态概念模型元素允许用户同时与其他概念模型元素进行一对一交互。反之当交互原则限定了用户在同一情景中一次只能与一个概念元素进行一对一的交互时,我们称之为模态交互策略。

我理解,非模态指的是你可以先在这个概念空间交互,再在那个概念空间交互或者反之,而模态是你必须先在这个概念空间交互,再在那个概念空间交互交互。它们的区别是交互顺序是否被指定。

物理空间是否相同、是否模态组成了不同的概念模型:

图7.jpg

再看设置预约例子中的物理空间:

图8.jpg

形式层和细节层

就是交互和视觉的细节

所以总结一下,交互设计遵循从功能到概念模型,再到物理模型再到交互细节的过程。

概念模型的类型

概念模型可分为两个主要类别:

  • 顺序和结构化:单序列结构模型、层级结构或多序列结构模型。
  • 非顺序和非结构化:轴辐型、矩阵型和网络型。
图9.jpg

概念模型越复杂,通常给用户提供的自由度越高。用户执行各种任务时灵活性越高,控制越多,特别适合专家用户。

这个复杂度在于:概念元素的数量、出口和入口的数量、用户可采取路径的数量。

概念模型评价:用户绩效和可用性

如何可知概念模型用户体验如何?作者分了两个指标。

用户绩效

用户绩效指的是

感知、认知、情感以及物质的过程和行为。

评估包括 5 个方面:

  • 心理模型与理解力
  • 位置感知
  • 视觉搜索效率
  • 操作(执行动作)负荷
  • 工作记忆负荷

心理模型与理解力

操作和任务流程是否符合用户心理模型。

位置感知

位置感知是指

我们能意识到我们在哪,我们周围有什么,我们到达我们所在位置的路径以及可能是目的地的其他位置的能力。

影响因素:

  • 访问空间的个数
  • “地标”“您在这儿”的定位帮助
  • 空间之间路径的长度和复杂程度等
  • 是否存在于相同物理空间。

存在于相似物理空间的概念空间之间的导航,比不同物理空间间的,位置感知更有效率。

视觉搜索效率

视觉搜索是我们通过浏览视觉屏幕寻找特定目标的感知过程。在这个过程中,屏幕中任何其他非目标元素都是干扰。

影响因素有:

  • 场景中元素的数量
  • 元素特定的视觉属性,如大小、颜色、形状以及与其他项目的相似性
  • 元素的视觉布置和组织

这里注意位置感知和视觉搜索效率可能会矛盾。同一物理空间,概念元素越多,越容易位置感知,但越会降低搜索效率。

操作负荷

影响因素:

  • 操作的数量
  • 物理空间间的路径

物理空间越少,空间间路径越少,操作负荷越小。

工作记忆

用户记忆负担越少,体验越好。

图10.jpg

可用性

指标有:

  • 易学性:与工作记忆有关
  • 有效性:与位置感知、视觉搜索效率有关
  • 效率:与工作记忆有关
  • 满意度
图11.jpg

怎么做?

功能层

前面用户调研、场景分析就不说了。

这里注意场景分析是进行对象行为分析。这个对象包括三个方面,不是单单分析人。

作者举了一个例子,为一个跑步爱好者做一个跑步时可以使用的应用。

  • 实体对象:物理和有形的实体。例如 GPS 接收器、音乐播放器或道路本身等。
  • 抽象对象:通过“不是xxx“来定义。所有不是人、不是实体对象的都可以。如运动计划、已进行的运动等。

除了关注用户本身的行为,还应关注用户和实体对象、抽象对象的互动等。

图12.jpg

然后还有任务和流程分析。

进行用户调研,关注场景中的对象行为,进行任务流程分析。如此考虑对象、任务、内容,差不多就能整理出功能。

架构层

这一步从功能过渡到概念模型,主要是去抽象出核心的概念元素。

导航和策略

这一步从概念模型过渡到物理模型。

勾勒概念导航图

  • 概念元素的进出口
  • 概念元素之间连接的导航方向
图13.jpg

如何评估呢?

可进行概念模型评估、用户绩效和可用性评估

概念模型评估

  • 它是否能代表所有功能模块?
  • 它是否能表达元素之间的连接关系、并反映出功能模块之间的连接?
  • 导航地图是否支持工作流程?
  • 模型的复杂程度是否适合用户画像和任务结构

定义概念元素的物理空间分配

这一步首先分析我们在任务分析、对象行为分析中得到的结论:

  • 用户做某事的频率是多少?
    相似频率的概念元素可以安排在同一或相邻物理空间。

  • 用户能够同时做些什么?
    同一时间内完成的任务或操作,无论是对于同个对象或不同对象,都可以考虑分配在同一或相邻物理空间。

  • 用户在做了某件事之后会接着做什么?
    一系列连续的操作可以被考虑放在同一或相邻物理空间。

  • 某事是否取决于另一件事?
    具有依属关系的操作可以被考虑放在同一或相邻物理空间。

  • 用户能同时看到什么?
    一个任务或对象的可见性是指其状态能够被用户注意到的等级。我们需要确定哪些任务或状态是需要被用户看到的。被要求可见性程度相同的任务和操作可以被考虑放在同一或相邻物理空间。

  • 直觉性和易寻找性如何?
    具有高度相似性的任务和对象可以被考虑放在同一或相邻物理空间。

图14.jpg

此外还要考虑用户使用情境

  • 物理情境:室内室外、白天晚上、安静吵闹、气温等等
  • 工作流程情境:当前位于的特定阶段、步骤或状态。如初次安装等。
  • 个人情境:新手老手、清醒疲劳等等
  • 社会情境:团队合作、分享互动、本地远程;国籍、文化、种族等。

定义导航策略

定义模态还是非模态。

这里注意通常大屏幕需要考虑更多。需考虑窗口、对话框、屏幕间有无模态上的联系。小屏幕由于物理限制,通常设计出来都是相互排斥的元素,即模态的。

形式层和细节层

考虑操作、参数、信息

操作

区分导航操作和在目标对象上执行的操作。

导航操作是指那些能够使得用户在导航地图和概念模型中转移的操作。例如,打开或关闭一个窗口,点击一个标签页来到另一个概念元素上,或打开一个文件、应用。

在目标对象上执行的操作包括创建、修改、删除对象等。

参数

每个目标对象一般会有参数。例如跑步的例子中,计划跑步里程是一个能帮助用户定义任务的参数。

信息

任何信息,无论是静态的还是动态的,都不是被用户定义的。

这些信息包括任何来自外部但是没有被用户输入或者设置的信息。例如,标题、字幕、描述、解释、参数的标签等。

图15.jpg
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,142评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,298评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,068评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,081评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,099评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,071评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,990评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,832评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,274评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,488评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,649评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,378评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,979评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,625评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,643评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,545评论 2 352

推荐阅读更多精彩内容