这些成功的交互设计原则可提升你的用户体验 _交互式

本文概述

互动设计原则和最佳实践
交互设计的未来

在有效的交互与无效的交互之间有一条细线。交互设计原则有助于弥合鸿沟。
执行良好的交互设计在出色的UX的实现中扮演着重要角色, 并且毫无疑问是UX设计原理的基础之一。
“ 无法使用” 表示” 我正在继续前进” , 无论视觉设计多么” 好看” (动画的想象力如何)都会使交互设计变得混乱, 而用户体验就变得无足轻重了。正确处理它, 即使在美观方面达不到要求, 你也将继续朝着更好的用户体验迈进。该产品成功的机会更大, 这反过来又有助于提高利润。
交互设计协会(IxDA)将交互设计(IxD)定义为” 交互系统的结构和行为。交互设计师致力于在人与他们使用的产品和服务之间建立有意义的关系, 从计算机到移动设备再到家电等等。”

经验至关重要, 因为经验决定了人们对回忆的喜爱程度。 -唐·诺曼(Don Norman), 《日常事物的设计》。

遵循交互设计原则将极大地促进出色的交互设计, 而交互设计又将有助于体验。

文章图片
移动应用交互设计(由Adam Kalin设计)
可能在一夜之间用完全不同的东西替换当今的所有设备和技术, 但是由于其持久的原理, 仍然可以实现出色的交互设计。这些不变的原则是关于激励人们, 其行为以及思维方式的。
试想一下, 如果每个门上的每个门把手都工作不同。对于一个人, 你必须先推入门然后向下推；对于另一个, 你必须向上拉动而不是向下按, 而对于另一个, 你必须向上拉动两次然后再下降, 这完全是一场灾难。实际上, 短语” 转动门把手” 假定只有一种方法可以做到这一点。
没有人喜欢被” 遵循规则” 的呼喊打败, 但是真正出色的交互设计依赖于一组标准, 最佳实践, 惯例和经验法则(启发式)。这不是一门糊涂的科学, 但它们构成了IxD的基石, 并以最小的摩擦力实现了交互。界面标准不会扼杀创造力-它们不是一成不变的规则, 而是帮助设计人员建立” 可用且熟悉的设计” 基础进行创新的基础准则。
互动设计原则和最佳实践交互设计属于人机交互(HCI)的学科, “ 交互研究的重点是计算机技术的设计, 尤其是人(用户)与计算机之间的交互的多学科研究领域” 。设计基金会。
出色的UI设计通过将基本UI设计原则与目标驱动的交互设计相结合, 实现了纯用户的愉悦。

成功的交互设计采用简单, 明确定义的目标, 强烈的目的和直观的UI。
为了使交互保持简单和容易, 目标驱动的交互设计只为使用户完成任务而在用户面前放置了绝对最低限度的内容。

让我们深入探讨一些最重要的原则(无论如何都不是详尽的清单)：
可发现性
基本上, 如果用户找不到它, 则它不存在。必须清楚地指出, 在不到一微秒的时间内, UI中可以进行哪些操作-例如, 标记图标为最佳做法。未标记的图标无异于将障碍物丢入用户的路径, 因为它们必须停止解读含义。你正在打断” 流程” 。令人震惊的是……他们对学习用户界面不感兴趣。

文章图片
为了消除猜测, LinkedIn, NPR和Facebook为其图标添加了标签。
指示符
有效地使用指示符与可发现性密切相关, 可确保在用户界面中清楚地显示出负担能力(对对象执行操作的可能性)。指示符提供诸如信号或路标之类的强大线索。指示有可用的交互, 它们在用户喊着时闪烁绿灯, “ 我在这里, 你可以点击(单击, 滑动等)我！” 用户界面中可能存在有可负担性, 但是可能会隐藏, 因为如果缺少一个指示符, 它就保持不可见。一个示例可能是” 隐藏手势交互” , 除非用户不小心向左或向右滑动(例如, 删除某些内容), 否则该隐藏交互不会显示出来。

负担定义了可能采取的行动。指示符指定人们如何发现这些可能性：指示符是标志, 是可以做什么的可感知信号。指示符对设计者的重要性远不止于馈赠。 -唐·诺曼(Don Norman)(诺曼, 2013年)

文章图片
具有隐藏功能的Apple Mail。使用桌面上的魔术鼠标, 人们可以向左滑动。除非他们不知道, 否则交互将保持隐藏, 因为没有指示符。
反馈
在指示符之后, 与用户的下一个最重要的交流是反馈。反馈是指：有关操作影响的明确信息。这也意味着对系统状态的持续可见性, 即系统应确保：

随时向用户通报发生的情况。
有关其操作结果和产品(系统)当前状态的连续信息。
用户对产品的状态, 即处理, 加载, 搜索, 上载等状态或某些其他状态变化, 不会产生任何困惑。
执行动作后, 很容易确定新状态。

文章图片
此上传序列通过连续反馈展示了三种状态：将文档拖到图标上, 上传进度和完成确认。 (作者：Jokubas)
概念模型和心理模型
出色的交互设计可为用户提供创建系统良好概念模型所需的所有信息, 从而使他们理解并获得控制感。使用该系统时, 概念模型可以增强发现性和结果评估能力。
心理模型(或认知图)是用户脑海中的图像, 可传达他们对某种互动的期望以及现实世界中某些事物的工作方式。认知图是我们物理环境的内部表示, 特别是与空间关系有关的表示。通过有效地使用用户的思维模型, 交互设计师可以创建” 感觉” 直观的系统。

文章图片
梅赛德斯(Mercedes)的汽车座椅设置是使用心理模型的交互设计的一个很好的例子。用于控制的汽车座椅形状使其在直观上易于理解和操作。
设计者发明了一个概念模型-设计模型, 这就是设计者希望设备或软件工作的方式。与用户交流此模型的唯一方法是通过UI实施它。然后, 用户与概念模型进行交互, 并创建他们自己的事物运作方式的心理模型。
设计人员无法告诉用户他们打算如何运行应用程序-他们需要适当设计UI以便清楚地传达其用途。换句话说, 使界面易于理解和使用。不良的交互设计会冒为用户创建错误的心理模型的风险。这会导致混乱和用户错误, 因为他们试图以设计人员不希望的方式来运行应用程序。

文章图片
汽车互动设计：方向盘上的音量控制按钮使用自然映射：向右轻按可增加音量, 向左轻按可减小音量, 并且仪表板上会立即产生反馈。
利用自然类比和文化标准的优势, 自然制图可以带来直接的了解。例如, 设计者可以在UI中使用空间类比：

要使用滑块组件增加一些值, 请向右滑动滑块,
要减少它, 请向左滑动。

一些自然映射是生物学的, 如在通用标准中, 上升的水平代表更多, 而下降的水平代表更少。

文章图片
映射到熟悉的物理类比：旋钮和滑块控件(由??Anton Kudin提供)
约束条件
约束的设计概念是一种确定如何限制在给定时刻可能发生的用户交互类型的方法。交互设计约束通过为用户提供” 导轨” 来帮助有效的交互-就像指导手引导可能发生的交互一样。
设计上的约束条件确保仅启用或什至仅特定功能, 以引导用户进行某些交互。它考虑了大小, 比例, 比例, 重点和状态, 以及它们如何和谐地协同工作, 帮助建立层次结构并因此影响用户。正确放置约束也有助于减少用户错误的机会。
约束的反义词是当向用户提供每个选项时, 使他们难以决定下一步要做什么。这是选择的原则。选项越多, 选择其中任何一个就越困难-我们被所有可能性所淹没。
出色的互动设计不会将所有可用选项都放在界面上, 而是将其限制在任何给定时刻最重要的部分。

文章图片
Foursquare使用设计约束来限制可用的交互并专注于用户的任务
一致性, 标准和启发式
这些都是相关的-如果可能的话, 这些都是模式的兄弟(如下)。为了防止用户错误并使应用程序易于学习, 交互模型必须保持一致。一致性提高了用户体验, 通用性以及用户使用数字产品的效率。
一致性意味着使用相似的元素来完成相似的任务, 并且在整个过程中具有相似的功能和行为-一致的接口是遵循规则的接口, 例如使用相同的操作来做某事。

文章图片
所有iPad应用程序中的” 共享” 菜单都是一种一致性模型。它始终以相同的方式工作。
力求高度可用性的产品遵循公认的惯例, 标准, 最佳实践和可用性启发法(广泛的经验法则, 而不是特定的可用性准则)。
例如, 符合约定的方式可能是页面的布局方式。网络用户将69％的时间用于浏览页面的左半部分, 将30％的时间用于浏览右半部分。因此, 如果网站遵循常规布局, 则更有可能获利。
标准可以是面包屑痕迹(可以立即识别的方向和导航设备), 也可以是页面顶部的全局导航菜单(如BCC网站)。
模式和易学性
新用户如何轻松地导航界面？没有人愿意学习一种新的做事方式, 除非它提供了比以前更重要的好处-但是我们总是被未经测试的, 非常规的互动所淹没。
通用组件或模式可提供即时学习能力。学习如何使用勺子后, 你将永远知道如何使用勺子。就像骑自行车, 滑冰一样……同样的构造适用于我们每天使用的UI组件：按钮, 文本字段, 下拉菜单, 复选框, 单选按钮, 微调器, 滑块, 图标, 手风琴, 搜索框等。

文章图片
UI套件使用众所周知的标准模式, 例如表单的组件(由Keynotopia提供)
最佳的交互设计不会尝试重新发明轮子, 而是以一种新的方式有效地利用模式。
模式不仅可以促进学习, 而且还可以提供一致性(上面讨论过的另一项原则), 并使之符合用户对事物应该如何工作的期望。
视觉层次和重点
在与网站或应用程序交互时, 人们正在寻找与搜索最相关的信息。视觉层次结构以暗示重要性的方式关注元素的排列。设计中的视觉层次结构会影响人眼感知所见事物的顺序。并非所有事物都具有相等的” 权重” ；通过感知领域中对象之间的视觉对比来创建顺序。视觉对比(强调)可以通过元素之间的大小, 接近度, 颜色, 不透明度以及实际的色调对比来实现。

文章图片
这些移动屏幕使用视觉层次结构将用户集中在屏幕的特定区域上, 并确定内容的重力级别(Vonn的移动UI套件)
不要低估视觉层次结构的力量。它已非常有效地用于eon的各种设计, 建筑和工业设计以及印刷设计中。查看一些出色的海报设计。在交互设计中很好地使用此技术, 正确的事物似乎在正确的时间以正确的方式出现。
出色的交互设计师使用强调的力量成功地实现了看起来像魔术一样的” 精益求精” 界面设计。
菲茨定律
信不信由你, 该法则来自于早期研究, 该研究着眼于人的肌肉运动以及针对电报操作员和生产线任务性能的目标, 后来被改编为HCI(人机交互)。它基本上说：” 获取目标的时间取决于到目标的距离和大小。”
简而言之, 它是关于目标的距离和大小以及相对于其他目标的距离。鼠标移动或敲击时间越短越好-如果目标距起始位置较近, 则单击或滑动目标总是更快。相关任务也应该彼此靠近, 以便用户不必在与UI交互的屏幕上飞镖。
Fitts的定律可以准确地预测移至并选择目标所需的时间。目标可以是屏幕上的按钮, 下拉菜单或其他互动元素。如果距离太远, 太小或可点击元素之间的距离太近, UI的效率和可用性都会大大降低。

文章图片
大按钮易于定位。利用菲茨定律, 还可以引入约束来防止错误：请注意” 取消” 按钮的最左位置。
古腾堡图, Z型和F型布局
【这些成功的交互设计原则可提升你的用户体验】这些模式适用于不同的情况, 具体取决于内容, 并且大多数由西方受众使用。古腾堡(Gutenberg)图描述了一种一般的模式, 当查看均匀分布的同质信息时, 眼睛会移动通过这些信息, 主要是文本密集型站点, 例如博客或新闻站点。古腾堡(Gutenberg)图表明, 强弱休憩区位于阅读重力路径之外, 除非受到某种形式的视觉强调, 否则它们受到的关注很少。

文章图片
古登堡图表示常见的用户行为, 即阅读重力。
Z模式遵循字母Z的形状。在某些情况下, 此模式也称为Z字形模式。与古腾堡(Gutenberg)图的主要区别在于Z模式表明观众将穿过两个休憩区。否则, 它们仍将在相同的地方开始和结束, 并且仍然穿过中间。与古腾堡(Gutenberg)一样, 设计师会在Z模式的路径上放置最重要的信息。

文章图片
iZettle的网站通过Z模式设计优化了视觉扫描
F表示快速, 表示用户如何阅读内容。 F模式通过NNGroup眼动追踪研究得到了普及, 该研究记录了200多个用户在网上阅读内容。调查发现, 人们在许多不同类型的网站上的扫描方式都非常一致。

文章图片
眼动研究显示扫描页面时(来自NNGroup)的F模式热图
为什么这很重要？例如, 在电子商务网站上, 为了最大程度地扫描, 你可能希望按照F模式排列最重要的内容。
识别而不是召回
识别是指我们” 识别” 事件或信息为熟悉的能力, 而回想则更多地是一种” 认知负担” , 涉及从记忆中提取相关细节。向用户显示他们可以识别的内容可以提高可用性, 而不是需要从头开始回忆项目。

文章图片
标准图标可立即识别
例如, 在UI中使用图标功能强大, 因为它可以立即识别符号。我们的大脑处理(识别)符号的速度比阅读文本快1000倍。如果设计人员在对话框中显示标准的警告标志图标, 则它会立即引起用户的注意, 因为下一个操作可能具有破坏性。但是, 如果将图标设计为迫使用户重新回忆和破译含义(例如举起一只手代替警告图标), 则会降低UI的效率和可用性。
美学和简约设计

你必须深刻理解产品的本质, 才能摆脱不重要的部分。乔纳森·艾夫。

这是最具挑战性的原则之一, 因为它很难。设计师和产品经理倾向于在阳光下添加所有可用选项, 并让用户确定他们要采用的路径。那确实是一种懒惰的方法, 导致产品充满不必要的混乱。

文章图片
苹果公司长期以来一直倡导极好的美学和简约, 简单的设计。
需要清除界面中不必要的元素和内容, 这些元素和内容不支持用户的目标和任务。设计人员不仅应该设计美观的UI, 而且还要在用户流程中优先考虑各个屏幕的信息。使用视觉层次结构和强调魔术, 应该只显示用户完成任务所需的基本信息和绝对信息。
米开朗基罗谈到他的作品时说：” 我看到天使在大理石上雕刻, 直到释放他。”

文章图片
从混乱到简单。凯尔西·雷蒙德(Kelsey Raymond)重新设计的登机牌
设计一种最小化, 美观且简单的交互方式, 要求设计人员了解人们使用该产品的那一刻到底发生了什么, 并摆脱不必要的一切。进行深入的用户研究和测试以了解用户将如何使用该产品通常是最好的方法。
错误预防
用户在执行任务时通常会分心, 因此通过视觉强调, 提供建议和使用精心设计的约束条件来防止潜意识错误是关键。防错的一种形式(也称为Poka-Yoke)是指实施故障保护机制以防止进程产生错误。
防止错误的最佳方法之一是设计一个更好的心理模型。当设计师的模型和对系统工作方式的解释与用户的思维模型不符时, 会发生许多用户错误。
标准设计约定有帮助(上述原则之一), 因为它们可以帮助用户了解他们可以采取的措施。与你的网站或应用程序进行交互的用户已经使用了数以千计的其他网站和应用程序, 并期望通用的交互元素以某种方式进行外观和工作。当你的产品偏离这些约定时, 容易出现错误情况。

文章图片
在犯错误之前发出警告, 并在采取破坏性行动之前进行确认。精心设计可比错误实施的错误消息更好, 它首先可以防止问题发生。尝试消除容易出错的情况, 并继续检查它们。
交互设计的未来新设备, 环境和界面将继续以新的交互可能性发展。视频游戏控制器不断发展, 并提供各种输入控件以及触觉反馈。手势界面将从支持2D和3D手势(例如, iOS和Android设备上的手势)的触摸屏到使用3D空间中的手势与虚拟现实空间, 游戏机和可让我们控制环境的IoT设备交互的成熟。
就像Google的Project Soli一样, 我们可以对鼠标, 触控板和操纵杆说” 说” , 然后使用我们的手和手指控制设备切换到更自然的手势交互。在某些情况下, 例如在对话UI中, 输入法可能会从键盘更改为语音。尽管如此, 仍然需要以某种形式(语音, 触觉和视觉)立即和连续反馈的原理。

文章图片
使用手指的Google Project Soli手势界面控件(滑块说明效果)
基本交互设计原则将始终在未来系统的设计中发挥核心作用, 对于UX / UI设计人员而言, 牢记这些原则非常重要。它们不是一成不变的规则, 但可以使产品和服务更好, 更具吸引力。就像成功的电影使用遵循久经考验的, 真实的, 历史悠久的结构的古老叙事技术一样, 存在交互设计原则是有充分理由的。跟随他们将通过提高可用性和推动其产品的广泛采用而使任何产品设计师受益。
? ? ?
在srcmini设计博客上进一步阅读：