从人机界面设计黄金三法则视角看 ChatGPT 的界面设计的“好”与“坏”

热门文章推荐

  • (1)《为什么很多人工作 3 年 却只有 1 年经验?》
  • (2)《一文掌握大模型提示词技巧:从战略到战术巧》
  • (3)《AI 时代,程序员的出路在何方?》
  • (4)《如何写出高质量的文章:从战略到战术》
  • (5)《我的技术学习方法论》
  • (6)《我的性能方法论》
  • (7)《AI 时代的学习方式: 和文档对话》

省流版:
在这里插入图片描述

一、前言

体验过很多国内外的 AI 工具,近期接触到了人机界面设计的黄金三法则,发现很多 AI 工具的界面设计存在很多违背人机界面设计的黄金三法则的地方。

本文将介绍什么是人机界面设计的黄金三法则,同时从人机交互设计的黄金三法则的角度谈谈 ChatGPT 界面设计的“好”与“坏”。

阅读本文你可以学习到:

  • 人机界面设计的黄金三法则的具体内容
  • ChatGPT 界面设计的长处和问题

希望通过本文让大家学习人机界面设计的黄金三法则,在设计人机界面时能够遵循经典的设计原则,设计更好的交互,给用户带来更好丝滑的体验。

二、人机界面设计黄金三法则

人机交互界面设计的三法则:置于用户控制之下;减少用户的记忆负担;保持界面的一致性。
image.png

2.1 置于用户的控制之下

  1. 不强迫用户进入不必要的或者不希望的动作方式来定义交互方式: 这就像在游戏中,你可以自由探索环境而不是被迫每次都走同一条路径。比如,在一个开放世界的游戏里,你可以选择去完成副任务、探索隐藏地点,或者直接进行主线任务,而不是游戏强迫你必须按照特定的顺序来进行。
  2. 提供灵活的交互: 想象你在使用一款绘图软件,它允许你使用不同的工具和技巧来创作艺术作品。你可以随时切换画笔、调整颜色,甚至撤销你的一些操作,这就是交互的灵活性。
  3. 允许用户交互可以被中断和撤销: 就像在文字处理软件中,你可以随时保存你的工作,或者撤销你的一些编辑,以回到之前的状态。这种能够中断和撤销的功能使用户在操作时感到更加自在和安全。
  4. 当技能级别增加时,可以使交互流水化并允许定制交互: 这就像在游戏中提高了等级后,你可以解锁更多的技能和定制选项,使得操作更加高效,也更符合你的个人喜好。比如,高级玩家可以使用快捷键来快速执行复杂的操作。
  5. 使用户隔离内部技术细节: 这就像使用智能手机一样,你不需要了解它内部的所有技术细节就能进行通话、发送信息或使用各种应用程序。手机为你提供了一个简单的界面,让你可以轻松地完成你想要的操作。
  6. 设计应允许用户和出现在屏幕上的对象直接交互: 这就像触摸屏技术,你可以直接用手指在屏幕上操作,与应用中的元素进行互动,比如放大地图、滑动照片等,这种直接的交互方式比传统的间接操作(如使用鼠标)更加自然和直观。

2.2 减少用户的记忆负担

  • 减少用户的记忆负担,可以用生活中的例子来形象理解:
  1. 减少对短期记忆的要求: 想象一下你在做菜时,如果每次查看食谱都要重新翻阅书页找到那个菜谱,这会很麻烦。相反,如果食谱书能自动标记你正在查看的页面,就像一个自动书签,那么每次你再想查看时,就能直接打开到那一页,大大减轻你记忆和查找的负担。
  2. 建立有意义的缺省(默认值): 考虑你用的咖啡机,如果每次都需要设置温度、杯量和咖啡浓度,早上起床时脑子还没完全清醒就得设置这一大堆,很不方便。如果咖啡机有一个“每日咖啡”按钮,按下去就自动根据你平时最喜欢的方式制作咖啡,这样的默认设置就大大减少了你的操作和决策。
  3. 定义直觉性的捷径: 如果你在使用一款应用,每次找到某个功能都需要经过好几步操作,就像是你在一个熟悉的社区里,去朋友家还得绕一个大圈子。如果应用提供了一个“快速访问”栏,让你可以把常用的功能添加到这里,那就像是在社区中开辟了一条直接到朋友家的小径,方便快捷。
  4. 界面的视觉布局应该基于真实世界的隐喻: 使用电子邮件客户端时,如果收件箱的布局和真实世界的文件夹相似,比如有“收件箱”、“已发送”、“草稿”等文件夹,这就像是你的办公桌上有不同的文件夹用来分类文件一样,直观易懂。
  5. 以不断进展的方式揭示信息: 想象你第一次玩一个新游戏,游戏不是一开始就把所有的操作和规则都告诉你,而是随着你的进度逐步介绍新的元素。这就像学习骑自行车,开始时你可能先用三轮车,慢慢地去掉辅助轮,最后学会独立骑行,这样逐步的学习过程使得信息更容易被吸收和理解。

2.3 保持界面的一致性

  1. 允许用户将当前任务放入有意义的语境: 比如你在一个大型购物中心里,每个楼层的指示牌设计风格都相同,而且商店、洗手间等公共设施的位置指示清晰一致。这种设计让你即使在不同的楼层,也能快速找到自己想要的东西,因为你已经习惯了这个购物中心的布局和指示牌的风格。
  2. 在应用系列内保持一致性: 假设你用的是一个品牌的手机和平板,两者的操作系统和界面布局非常相似。这就像是你家的开关插座都是同一品牌,无论你在哪个房间,如何操作都是一样的,这种熟悉感让人使用起来非常自在。
  3. 如过去的交互模型已经建立起了用户期望,除非有迫不得已的理由,不要改变它: 想象一下,如果你所在的城市的红绿灯突然改变了颜色含义,比如绿色变成了停,红色变成了行。即便是这样的变化是出于某种考虑,但长期形成的习惯让人很难适应,可能还会造成混乱。同样,在软件界面设计中,用户已经习惯的操作模式和界面布局如果没有充分的理由,最好不要轻易改变,以免影响用户体验。

三、ChatGPT 界面设计的“好”与“坏”

3.1 符合三法则的 ChatGPT 界面设计

(1) 置于用户的控制之下

  • 以不强迫用户进入不必要的或者不希望的动作方式来定义交互方式
    image.png
    • 支持通过对话的方式创建 Agent:提供用户选择创建Agent的灵活方式。
      image.png
    • 提供了很多快捷键:为高级用户提供了更多的控制选项和快速操作方式。
  • 提供灵活的交互
    • 左侧的聊天历史可以隐藏给聊天界面腾出更大空间:用户可以根据需要调整界面布局。
      image.png
    • 当 GPTs 过多时,只展示几个,其他的可以通过 “再显示 n个”的方式展开:用户可以控制想看的GPT数量。
  • 允许用户交互可以被中断和撤销
    • 对话历史中会显示用户和 Agent 的图标和名称方便区分谁发送的对话:增加了交互的可撤销性,用户可以清晰地识别和回溯自己的操作。
      image.png
    • GPTs 界面支持恢复到上一个保存的版本、查看版本历史:用户无需理解版本控制的技术细节即可管理自己的内容。
  • 当技能级别增加时,可以使交互流水化并允许定制交互
    • 配置 GPTs 的界面允许用户自己修改:允许用户根据自己的技能级别定制化设置。
  • 使用户隔离内部技术细节
    • GPTs 界面支持恢复到上一个保存的版本、查看版本历史:用户无需理解版本控制的技术细节即可管理自己的内容。
  • 设计应允许用户和出现在屏幕上的对象直接交互
    image.png
    • 用户鼠标滑到输入内容上会显示修改图标,修改后自动发起新的请求:直接与界面元素交互,无需通过间接的方式修改内容。

(2) 减少用户的记忆负担

  • 减少对短期记忆的要求
    image.png
    • 主界面非常简洁,下面有个输入框,中间有些可以提问的示例:简化界面设计,减轻用户的记忆负担。
  • 建立有意义的缺省(默认值)
    • 对话历史会自动起个题目:自动生成的标题减少了用户需要记忆和手动输入的信息量。
  • 定义直觉性的捷径
    • 右下角有个问号标识,点击后展示菜单:帮助和常问题、发布说明、条款和政策、键盘快捷键:直观的快捷方式帮助用户快速找到所需信息。
  • 界面的视觉布局应该基于真实世界的隐喻
    • 输入框左侧有回形针标记表示可以上传附件,右上角有分享的图标表示可以将聊天内容分享给其他人:使用了熟悉的图标和元素,方便用户理解功能。
  • 以不断进展的方式揭示信息
    • 点击 GPTs 的下拉图标即可新建对话、了解模型详情、编辑 GPT 、从侧边栏隐藏和进行评价:信息的逐步展开,避免了一次性呈现过多信息导致的混乱。

(3) 保持界面的一致性

  • 允许用户将当前任务放入有意义的语境
    • 用户选中 ChatGPT 的回复的片段后会弹出引用的图标对 ChatGPT 的这句话进行回复:通过上下文引用,增强了任务的语境意义。
  • 在应用系列内保持一致性
    • 配置 GPTs 的界面允许用户自己修改,支持上传知识库、支持用户选择是否开启网页浏览、DALL·E 图像生成 和代码解释器:各个部分的功能和操作逻辑保持一致,方便用户理解和使用。
  • 如过去的交互模型已经建立起了用户期望,除非有迫不得已的理由,不要改变它
    • 用户可以退出登录:保持了常见应用的标准操作,满足用户的预期。

3.2 违背三法则的 ChatGPT 界面设计

(1) 置于用户的控制之下

  1. 提供灵活的交互
    image.png
  • GPTs 应该按照使用频率排序方便查找也符合认知:如果GPTs不能按使用频率或用户偏好排序,用户就不能灵活、高效地找到常用的工具,降低了交互的灵活性。
  1. 使用户隔离内部技术细节
  • GPTs 应该允许用户指定模型 GPT3.5 还是 GPT4,毕竟 GPT4 有次数限制:用户需要能够简单选择使用的模型而不必担心次数限制等技术细节,提高用户控制感。
  1. 不要给用户不可控感image.png
    • 最近 GPT4 的使用次数从 3 小时 40次改为可能存在使用限制:如果用户已经习惯了 3 小时 40次,这个提示并不意味着取消限制,甚至有可能意味着 3 小时允许使用的次数小于 40次,打破用户的期望,给用户带来失控。
    • 用户不应该每次使用去寻找自己的 GPTs ,甚至都不应该需要 @ 自己的 GPTs 用户应该直接发送问题,GPTs 功能自动匹配最佳 Agent,如果没有则直接回答。

(2) 减少用户的记忆负担

  1. 减少对短期记忆的要求
    image.png
  • 对话历史不支持搜索,很难快速找到想要找的历史对话:若无法搜索历史对话,用户必须依赖记忆来找到信息,增加了记忆负担。
  • GPTs 过多是查找使用非常不便,应该支持分组:当GPTs数量多时,不支持分组会迫使用户记住哪个GPT用于哪种任务,也增加记忆负担。
  1. 定义直觉性的捷径
  • 应该支持直接 at GPTs 的方式直接对话而不是每次先选择 GPTs:如果不能通过简单的方式(如@命令)快速访问GPTs,缺乏直觉性的捷径,使用户操作变得繁琐。

(3) 保持界面的一致性

  1. 在应用系列内保持一致性
  • 历史对话记录不支持按照应用分组:应用间的操作和界面布局应保持一致,如果历史记录不能像应用那样分组,这与用户期望的一致性不符。
  • 现在的 GPTs 虽然可以作图但调用的是 DALL·E 图像生成,通过文本进行交互用的不是同一个“大脑”导致很多想要的图形画不出来:如果界面在文本生成和图像生成间的操作逻辑不一致,会让用户感到混淆。

四、总结

本文讲解了人机界面设计的黄金三法则,并列举出 ChatGPT 界面设计中符合和违背黄金三法则的地方。
希望借助本文帮助大家理解人机界面设计的黄金三法则,在日常设计界面尤其是由开发主导的 B 端界面时,能够遵循这些原则,给用户带来更丝滑的体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/301525.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jenkins 安装部署

1、安装下载 官网地址:Jenkins 下载 war 包 1、前置环境 JDK 环境(根据 Jenkins 版本不同,需要的 JDK 版本不同,目前需要 JDK11 的版本来支持)Maven maven 官网下载压缩包 ,并将其传输到服务器&#xf…

模拟多模态大模型gradio使用教程

文章目录 前言一、使用change监听demo1、代码3、网页结果显示4、输入信息结果显示 二、Button功能的demo1、代码2、结果显示3、变换参数结果显示 三、参数gr.Slider滑动demo1、代码2、结果显示3、具有下拉参数代码4、具有下拉结果显示 四、模拟多模态大模型网页demo1、代码2、界…

【机器学习300问】59、计算图是如何帮助人们理解反向传播的?

在学习神经网络的时候,势必会学到误差反向传播,它对于神经网络的意义极其重大,它是训练多层前馈神经网络的核心算法,也是机器学习和深度学习领域中最为重要的算法之一。要正确理解误差反向传播,不妨借助一个工具——计…

测开面经(pytest测试案例,接口断言,多并发断言)

pytest对用户登录接口进行自动化脚本设计 a. 创建一个名为"test_login.py"的测试文件,编写以下测试脚本 import pytest import requests# 测试用例1:验证登录成功的情况 # 第一个测试用例验证登录成功的情况,发送有效的用户名和密…

linux:du和df区别

文章目录 1. 概述2. du 命令2. df 命令3. 区别总结 1. 概述 du 和 df 都是 Linux 系统中用于查看磁盘空间使用情况的命令,但它们的功能和用法有所不同。 2. du 命令 du 是 “disk usage” 的缩写,用于显示文件或目录的磁盘使用情况。du 命令用于查看指…

Redis客户端

2.Redis客户端 安装完成Redis,我们就可以操作Redis,实现数据的CRUD了。这需要用到Redis客户端,包括: 命令行客户端图形化桌面客户端编程客户端 2.1.Redis命令行客户端 Redis安装完成后就自带了命令行客户端:redis-…

二分查找 -- 力扣(LeetCode)第704题

题目 https://leetcode.cn/problems/binary-search/description/ 给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target ,写一个函数搜索 nums 中的 target,如果目标值存在返回下标,否则返回 -1。 示例…

计算机网络针对交换机的配置

实验 目的 交换机的基本配置,交换机VLAN配置 实验条件 Windows,Cisco packet tracer 实验 内容 交换机的基本配置,交换机VLAN配置 实验 过程 一、交换机的基本配置 进入特权模式 Switch>enable 进入配置模式 Switch#configure ter…

腾讯电商运营起来竟然这么简单!视频号小店操作玩法一文详解!

大家好,我是电商小布。 在新型电商玩法的兴起下,很多的平台都在电商行业内分到了一杯羹。 腾讯自然也就坐不住了,背靠自身的视频号平台,推出了视频号小店这个项目。 有很多的小伙伴想要趁着这个初期阶段,来加入到其…

数据结构与算法:哈希表

目录 1.哈希表和哈希 1.1.知识引入 1.2.为什么需要哈希表呢? 2.简易的哈希表 2.1.哈希表的基础结构 2.2.如何实现基础的哈希表 2.2.1.增 2.2.2.删 2.2.3.查 2.3.泛型编程下的哈希表 3.简易的哈希桶 1.哈希表和哈希 1.1.知识引入 哈希表(Hash …

代码随想录-算法训练营day02【滑动窗口、螺旋矩阵】

专栏笔记:https://blog.csdn.net/weixin_44949135/category_10335122.html https://docs.qq.com/doc/DUGRwWXNOVEpyaVpG?uc71ed002e4554fee8c262b2a4a4935d8977.有序数组的平方 ,209.长度最小的子数组 ,59.螺旋矩阵II ,总结 建议…

【C++进阶】用哈希实现unordered_set和unordered_map的模拟

🪐🪐🪐欢迎来到程序员餐厅💫💫💫 主厨:邪王真眼 主厨的主页:Chef‘s blog 所属专栏:c大冒险 总有光环在陨落,总有新星在闪烁 前言: 之前我…

烧坏两块单片机,不知道原因?

没有看你的原理图,以下是造成烧毁芯片的几个环节: 1. 最大的可能性是你的单片机电机控制输出与电机驱动电路没有隔离。 我的经验,使用STM32控制电机,无论是直流电机脉宽调制,还是步进电机控制,控制电路与…

Ubuntu 20.04.06 PCL C++学习记录(十六)

[TOC]PCL中点云分割模块的学习 学习背景 参考书籍&#xff1a;《点云库PCL从入门到精通》以及官方代码PCL官方代码链接,&#xff0c;PCL版本为1.10.0&#xff0c;CMake版本为3.16 学习内容 用一组点云数据做简单的平面的分割 源代码及所用函数 源代码 #include<iostr…

机器学习笔记 - 深度学习遇到超大图像怎么办?使用 xT 对极大图像进行建模论文简读

作为计算机视觉研究人员,在处理大图像时,避免不了受到硬件的限制,毕竟大图像已经不再罕见,手机的相机和绕地球运行的卫星上的相机可以拍摄如此超大的照片,遇到超大图像的时候,我们当前最好的模型和硬件都会达到极限。 所以通常我们在处理大图像时会做出两个次优选择之一:…

【频繁模式挖掘】FP-Tree算法(附Python实现)

一、实验内容简介 该实验主要使用频繁模式和关联规则进行数据挖掘&#xff0c;在已经使用过Apriori算法挖掘频繁模式后&#xff0c;这次使用FP-tree算法来编写和设计程序&#xff0c;依然使用不同规模的数据集来检验效果&#xff0c;最后分析和探讨实验结果&#xff0c;看其是…

微服务架构下,如何通过弱依赖原则保障系统高可用?

前言 当我初次接触高可用这个概念的时候&#xff0c;对高可用的【少依赖原则】和【弱依赖原则】的边界感模糊&#xff0c;甚至有些“傻傻分不清楚”。这两个原则都关注降低模块之间的依赖关系&#xff0c;但它们之间的确存在某些差异。 那么&#xff0c;「少依赖原则」和「弱…

15.队列集

1.简介 在使用队列进行任务之间的“沟通交流”时&#xff0c;一个队列只允许任务间传递的消息为同一种数据类型&#xff0c;如果需要在任务间传递不同数据类型的消息时&#xff0c;那么就可以使用队列集。FreeRTOS提供的队列集功能可以对多个队列进行“监听”&#xff0c;只要…

Unity类银河恶魔城学习记录12-4 p126 Item Tooltip源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili UI.cs using System.Collections; using System.Collections.Generic; usi…

xilinx AXI CAN驱动开发

CAN收发方案有很多&#xff0c;常见的解决方案通过是采用CAN收发芯片&#xff0c;例如最常用的SJA1000,xilinx直接将CAN协议栈用纯逻辑实现&#xff0c;AXI CAN是其中一种&#xff1b; 通过这种方式硬件上只需外接一个PHY芯片即可 上图加了一个电平转换芯片 软件设计方面&…