交互设计实用指南系列(1) – 操作入口明确

2023-11-01

链接:

http://ued.taobao.org/blog/2009/12/the-practice-guidelines-of-interaction-design-clear-operational-entrance-of-effectivity/

“操作入口明确”,就是指产品的任何一个功能都要有明确、合理的入口。“操作入口”,指的是产品内部不同模块之间的转接元素,例如在Web产品中,按钮控件、输入框、文字链等都属于操作入口;“明确”指的是入口的视觉感是清晰的、可识别的;“合理”是指入口的出现是符合用户操作逻辑的,适时的。

之所以要提出“操作入口明确”,是因为用户在使用产品的过程中,往往遵循的是可分析的行为逻辑。对于产品本身而言,必须有相对应的操作提示来引导用户最有效地获取信息,还原为实现层面就是明确、合理的操作入口。如果说首页是整个网站的门户,那么操作入口就是连接各个子页面的枢纽。设计师的终极目的, 就是通过对这些枢纽的优化让用户利用最有效的方式在最短时间内完成自己的预期任务。

对于基于WEB的电子商务而言,核心价值是信息资源,而能否将这些海量数据合理地推送给用户,则是产品生存的关键。操作入口的设计,甚至可以看做 “通过对引导方式的优化间接达到对信息资源的归类”——这很像图书馆中的书类标签管理,用户可以根据不同的类目标签找到自己想看的书。失败的操作入口所带来的后果往往是灾难性的,功能失效、位置隐蔽、信息干扰……都会给用户带来严重的挫败感,使其绝望地湮没在茫茫的信息海洋中。所以,明确合理的操作入口设计,是对产品“有效性”的保障,更是对用户体验的尊重。

那么,在具体的设计中如何做到“操作入口明确”呢?

1、强化重点,弱化周边
星爷《唐伯虎点秋香》中的精彩片段,一声“美女”换来诸多牛鬼蛇神的壮观回眸和秋香MM的惊鸿一瞥——“美女这东西是要需要比较地”。WEB产品也 一样,尤其是海量信息的电子商务网站,由信息架构衍生出的各类功能入口相当复杂,部署在页面的各个角落,一不留心就被疏漏。通常有两种方法来解决这类问题:一是增加入口数量,即“广撒网”,同样的功能入口有多个,以此增加功能模块的使用率,不过这种方法存在较大隐患,后面会详细分析;二是“强化重点,弱化周边”,即在视觉上将入口模块凸显出来,采用精妙的布局,并适当弱化周边的信息展示,加大二者的权重对比,客观上增加用户识别的准确性。

例如地球人最熟悉的Google首页:

001www.google.com

浓郁艺术气息的LOGO作为唯一的色彩元素有效地抓住了浏览者的视觉中心,输入栏和Button作为功能核心占据了页面的心脏位置,这种组合让用户 通过第一视觉便能够准确理解页面所表达的信息逻辑——“输入关键词”+“点击按钮”=“Everything you want”。

再看一个反例,如图:

006download.pchome.net

面对这样一个下载页面,面对这样一个抢眼的大Button(标记②),相信即使是电信用户,也会很大方地支持下网通……但是,点击之后弹出的却是下载遨游浏览器的窗口,崩溃之余再仔细查看,终于发现在华丽的广告位旁边蜷缩着一个毫无特色的“立刻下载”(标记 ①)——刹那间,无数用户被这种饱含“让贤”哲理的设计深深震撼了!

2、入口信息明确易识别
上面提到,增加入口数量虽然在一定程度上有助于提高功能模块的使用率,但也存在致命的缺陷——入口信息不明确。因为“入口”等同于用户的“选择”, 入口越多,选择越多,“过多的选择等于没有选择”,这势必会造成用户使用产品时的疑惑:这几个链接和按钮好像都一样啊,该选哪个呢?所以,要根据页面本身 的信息量严格控制同功能入口的数量,保证有效的识别性,让用户迅速找到正确的入口。

这次用我们可爱的兄弟产品“支付宝”为例,看看改版前后的细节变化:

002改版前
改版前
在这里插入图片描述
改版后

通过对比,我们可以发现,管理页面中部分相同功能的入口出现了多个,对于新手用户来说,很可能造成不必要的困惑;而在新版本中,每个功能模块只有一个入口,明晰简洁。

另外,对于入口元素本身而言,需要通过适合的展现形式来提示用户此入口的功能属性。例如,一个标准的按钮控件,用户会知 道“可以点击”,但点击后会发生什么交互行为,需要通过其他视觉元素进行信息提示(如按钮上的文字或者具有标识性的ICON),告诉用户当前的情况和可行的操作方案,这点有些类似生活中的“指示设计”。

下图是eBay首页的注册区,通过按钮文字和辅助文本信息,新手用户也能够很清楚地了解眼前这两个Button代表的意义。

004www.ebay.com

3、根据用户定制合适的入口
交互设计离开用户研究便是闭门造车,在设计产品操作入口的同时,要充分考虑到不同用户的需求。用户划分维度很多, 《About Face3.0》中根据与产品的相关度将其分为“新手”、“中间用户”和“专家”。这三类用户对产品的了解程度并不一致,操作行为习惯也大相径庭,若再通 过其他维度将其细分(如“有无目的”、“性别年龄”等),会相当复杂,在对产品进行进一步优化时,应当考虑到操作入口对不同用户的适用性。

“在交互和界面设计中,如何用同一个界面满足新手用户和专家用户的需求是长久以来存在的难题之一。虽然大多数中间用户倾 向于保留在这一类型中,但新手不会永远是新手。要维持高水平的技术程度很困难,因此专家门也在快速变化。新手的变化更快,新手和专家随着时间推移都会倾向 于成为中间用户。”(《About Face 3.0》第三章),所以针对用户的定性研究和定量分析会显得尤为重要。不过,无论如何划分用户人群,有一点共性是至始至终的——产品操作入口设计的终极目 的是让用户迅速有效地完成核心需求。

小 结
综上所述,对于信息庞杂的电子商务网站而言,出色的操作入口设计好似科幻片中的“星际之门”,能让用户随心所欲地抵达任意空间,享受完美的交互体验;同样,失败的设计也能让用户犹如坠入希腊神话中恐怖的克里特岛迷宫,郁闷不可自拔。“操作入口明确”,是所有优秀交互产品的 共性之一,也是每一个设计师“想用户之所想”的职责所在。

转载 https://www.cnblogs.com/tonyIt/p/3961868.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

交互设计实用指南系列(1) – 操作入口明确 的相关文章

  • 基于深度神经网络的社交媒体用户级心理压力检测

    User Level Psychological Stress Detection from Social Media Using Deep Neural Network 基于深度神经网络的社交媒体用户级心理压力检测 ABSTRACT It
  • 软件anyconnec-win安装下载

    anyconnec win介绍 1 安装下载地址 http www drv5 cn sfinfo 14287 html softdown 找到适合自己操作系统的版本 下载并安装 2 直接安装下载点击next就ok了 需要注意的是 下载安装完
  • IDEA小技巧

    IDEA小技巧 常用快捷键 Alt Insert 可以自动生成get set toString方法 Alt Enter 可以帮助解决各种报错 抛个异常啊 导个包啊之类的 常见行操作 Shift Enter 添加空行 相比普通换行 不管光标在
  • [Pytorch系列-48]:如何查看和修改预定义神经网络的网络架构、网络参数属性

    作者主页 文火冰糖的硅基工坊 文火冰糖 王文兵 的博客 文火冰糖的硅基工坊 CSDN博客 本文网址 https blog csdn net HiWangWenBing article details 121342500 目录 第1章 Fin
  • python简单作图的一些设置(4.11课堂笔记)

    1图片布局 1 画布大小 宽 高 英寸 A4 21cm 29 7cm 约7英寸 还要减去页边距 fig plt figure figsize 4 7 2 画图 纸的形状决定图的形状 2 1 不能控制图的形状 ax fig add subpl
  • 力扣每日一题:915. 分割数组【思维题】

    给定一个数组 nums 将其划分为两个连续子数组 left 和 right 使得 left 中的每个元素都小于或等于 right 中的每个元素 left 和 right 都是非空的 left 的长度要尽可能小 在完成这样的分组后返回 lef
  • Redis崩了,我成功把锅甩给了隔壁组

    项目起不来了 项目又起不来了 又双叒叕 上周经常听到组里同事说项目又双叒叕挂了 Redis连不上 笔者在另一套正常的环境忙着开发新需求 没空关心这个问题 PS 反正我的环境能用 先忙完我的再说 于是乎 看了一眼日志 连接数过多 emmm 顺
  • nodejs格式化输入

    需求 比如我现在要格式为Axxx xxx xxx是数字 的格式 但是输入有可能为A1 2这种情况 就需要补零 变成A001 002 代码实现 const regex A d d 正则匹配桩号合法格式 const match input ma
  • baidu 百度搜索 命令

    命令 含义 双引号 xx 关键字全匹配 减号 xxx 排除xxx关键字 Inurl xxx 在url中匹配关键字 intitle xxx title标签中进行匹配 Site xxx 指定域名下搜索 Filetype txt 指定文件类型 例
  • 深入理解Python装饰器与闭包

    最初学习Python时 了解到装饰器与闭包的概念 在网上看了很多博客与教程 总觉得自己的理解还是不那么透彻 最近开始学习 流畅的Python 一书 书中对与闭包和装饰器有详细的解释 我觉得写的非常到位 现在把我的理解分享出来与大家共同探讨
  • Android开发失业50天,面了10家公司,唯二的offer也主动拒了

    最近在论坛看到这样一个帖子 坐标深圳 4 月上旬公司解散 现在想想好像是假解散 真裁员 这一个半月以来 从朋友内推 到拉勾 Boss 直聘 再到猎聘 智联招聘 从开始的精准投递 到后来的海投 加起来投递了上百家公司吧 面了差不多 10 家公
  • MinGW下载并配置gcc/g++编译环境

    本文将讲解如何下载MinGW并配置gcc g 编译环境 方案一 官网下载 一 下载MinGW 在MinGW官网中下载 mingw get setup exe 官网传送门 http www mingw org 如果您下载的过程非常艰难 请采用
  • 【马士兵】Python基础--05(循环)

    Python基础 05 文章目录 Python基础 05 range函数 while循环 for item in 迭代对象 break continue else语句 循环嵌套 range函数 这个函数生成的是一个整数序列 他的返回值是一个
  • 动态代理 [用jdk实现]

    一 java 的jdk動態代理 用JDK實現的動態代理 被代理的對象必須實現一個接口才可以 其實現主是通過java lang reflect Proxy類和 java lang reflect InvocationHandler接口 二 本
  • android实现夜间模式_Android中的夜间模式实现

    android实现夜间模式 Easiest way to implement night mode in android 在Android中实现夜间模式的最简单方法 Android has recently introduced Dark
  • Vue环境搭建(node安装,环境配置,运行项目)

    Vue环境搭建 node安装 环境配置 运行项目 一 安装node 1 去官网下载node之后 推荐安装稳定版本 LTS node官网下载地址 2 查看node安装成功否 node v 查看node版本 npm v 查看npm版本 wher
  • ctkPluginFramework编译qt_vs2017_gcc

    ctkPluginFramework编译qt5 12 vs2017 gcc4 8 前言 使用ctkPluginFramework作为插件系统框架的确有着众多开发上的优势 最近收到一些站内信 大家都想使用ctkPluginFramework但
  • Appium+Python自动化测试(二)--运行App程序示例

    在上一篇博客中 已经将环境搭建好了 现在 我们利用搭建的环境来运行一条测试脚本 脚本中启动一个计算器的应用 并实现加法的运算 创建模拟器 在运行App之前 首先需要创建一个Android模拟器 也可以使用真机来运行 效果更佳 进到Andro
  • mysql 1045 错误解决办法

    ERROR 1045 28000 Access denied for user ODBC localhost using password NO ERROR 1045 28000 Access denied for user ODBC lo
  • [Samuel Ko]——我的2020年回顾

    0 写在前面 其实一直以来 CSDN博客就完全是我个人的技术成长方面的记录和总结 由于工作的原因 一些更新 更好的资料没办法上传上来 之前的CSDN对我来讲 更像是一个纯技术文档 在这已经几年了 也完全没有发一些关于个人的动态或者经历 现在

随机推荐

  • MySQL批量插入数据的四种方案(性能测试对比)

    关注后回复 进群 拉你进程序员交流群 本文记录个人使用MySQL插入大数据总结较实用的方案 通过对常用插入大数据的4种方式进行测试 即for循环单条 拼接SQL 批量插入saveBatch 循环 开启批处理模式 得出比较实用的方案心得 一
  • 上传文件(Servlet)

    HttpServletRequest 类 法 Part 类 法
  • Python深度学习-U2:神经网络的数学基础

    理解深度学习 需要熟悉很多简单的数学概念 张量 张量运算 微分 梯度下降等 本章就是建立对这些概念的直觉 MNIST数据集 包括 60 000张训练图片和 10 000张测试图像 解决 MNIST问题是深度学习的 Hello World 神
  • Mybatis Plus基础07 type-aliases-package配置(实体对象扫描包)

    学习目标 简化操作 配置 type aliases package实体对象扫描包 学习产出 1 为什么配置这个 简单的说就是简化一个操作步骤 简化哪里的操作 简化xml文件中resultType中指定路径配置 2 哪里配置 在项目的appl
  • linux部署项目

    linux部署项目 一 安装jdk 1 二 安装tomcat 1 官网下载tomcat 官网地址 https tomcat apache org 2 部署项目 将下载的tomcat文件放入linux文件夹下 输入命令 tar zxvf ap
  • 离线pip安装paddlepaddle时存在的问题

    由于内网限制 只能从清华源安装软件包 而清华源没有满足条件的paddlepaddle安装包 为了成功在内网环境安装paddlepaddle 可以按照如下步骤 在开始使用 飞桨 源于产业实践的开源深度学习平台 官网平台 按照操作系统 计算平台
  • JDBC数据库连接 及JDBC使用讲解

    目录 1 什么是JDBC 2 JDBC 作原理 3 JDBC 使 3 1 创建项目并添加MySQL驱动 DataSource实现操作数据库 3 2 使用代码操作数据库 1 什么是JDBC Java 数据库连接 是 种 于执 SQL 语句的
  • 用Python编写代码,实现输出自己的姓名,班级,学号等信息

    可以使用以下代码实现输出自己的姓名 班级 学号等信息 name 你的姓名 class name 你的班级 student id 你的学号 print 姓名 name print 班级 class name print 学号 student
  • shell-环境变量以及环境变量的配置文件

    环境变量定义 用户自定义变量只在当前的shell中生效 而环境变量会在当前shell和这个shell的所有子shell当中生效 如果把环境变量写入相应的配置文件 那么这个环境变量就会在所有的shell中生效 设置环境变量 export 变量
  • Unity Shader小技巧-制作Shader时在Scene显示实时动态效果

    直接上截图 在编辑shader时 我们会使用到很多动态效果 例如 Time的函数 但是在Unity中会是静态效果 点击这个选项之后就以看到Scene窗口的Shader有动态效果了
  • malloc函数的使用

    调用被调函数 将主函数中动态内存分配的内存中的数据放大十倍 malloc动态分配了1字节的内存空间 最多能存放的整数是255 int型变量并不是一定占4字节 C语言从来没有规定一个整型必须要强制占几字节 C语言只规定了 短整型的长度不能大于
  • ASP.net DropDownList数据绑定及使用详解

    1 dropdownlist 绑定数据 1 1 固定绑定 适合已经固定的数据绑定到dropdownlist 实例
  • vue3中知识点总结(持续更新)

    1 具名插槽 Vue3 具名插槽 Named Slots 文档地址 具名插槽添加
  • java并发怎么理解_java中并发的理解

    在java中谈到并发 我们一定会想到两种锁 一种synchronized锁 一种ReentrantLock 还有一种轻量级的作用在变量上的volatile 那么他们三个有什么具体区别 和具体怎么用呢 下面针对他们三个分别说一下原理和作用 v
  • ArcGIS 正高转换成椭球体高度

    转载 https resources arcgis com zh cn help main 10 1 index html 009t000001vm000000 一 椭球体高度与正高 具体讲解可见 https resources arcgi
  • Fabric加密算法

    BCCSP Blockchain crypto provider 即区块链加密提供商 用于定义选择使用的密码学实现库 负责摘要生成 非对称密钥的签名与验证 根据证书查找私钥等 该模块提供了一系列的接口 这些接口定义了摘要的生成方法 签名 验
  • 负载均衡之Keepalived

    严格意义来说 Keepalived主要是通过虚拟路由冗余来实现高可用功能 但是其也可以借助IPVS实现负载均衡 所以也简要的学习了一下 简介 起初是设计来监控集群中各个节点的状态 根据TCP IP模型中网络层 ICMP控制消息请求 传输层
  • QFileInfo

    一 描述 QFileInfo 提供有关文件系统中文件的名称和位置 路径 访问权限 文件类型等信息 FileInfo 还可用于获取有关 Qt 资源的信息 这个类是隐式共享的 二 成员函数 2 1 判断函数 1 bool isAbsolute
  • python_sqlalchemy

    SQLAlchemy使用和踩坑记 知乎 2 长时间未请求连接自动断开 现象 长时间服务端没有连接数据库 数据库连接自动断开 原因 1 sqlalchemy在create engine时 使用连接池并没有指定连接池回收时间 则连接池的连接不会
  • 交互设计实用指南系列(1) – 操作入口明确

    链接 http ued taobao org blog 2009 12 the practice guidelines of interaction design clear operational entrance of effectiv