惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

WordPress大学
WordPress大学
O
OpenAI News
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - 三生石上(FineUI控件)
Webroot Blog
Webroot Blog
GbyAI
GbyAI
S
SegmentFault 最新的问题
Cyberwarzone
Cyberwarzone
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
J
Java Code Geeks
Google DeepMind News
Google DeepMind News
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
博客园 - 【当耐特】
S
Secure Thoughts
酷 壳 – CoolShell
酷 壳 – CoolShell
AWS News Blog
AWS News Blog
Engineering at Meta
Engineering at Meta
S
Security Affairs
H
Help Net Security
Microsoft Security Blog
Microsoft Security Blog
D
DataBreaches.Net
云风的 BLOG
云风的 BLOG
Hugging Face - Blog
Hugging Face - Blog
Google DeepMind News
Google DeepMind News
Spread Privacy
Spread Privacy
T
Threatpost
Forbes - Security
Forbes - Security
C
Cisco Blogs
Scott Helme
Scott Helme
Attack and Defense Labs
Attack and Defense Labs
Simon Willison's Weblog
Simon Willison's Weblog
腾讯CDC
The Last Watchdog
The Last Watchdog
Cloudbric
Cloudbric
Last Week in AI
Last Week in AI
Recorded Future
Recorded Future
小众软件
小众软件
V
Vulnerabilities – Threatpost
美团技术团队
人人都是产品经理
人人都是产品经理
有赞技术团队
有赞技术团队
Apple Machine Learning Research
Apple Machine Learning Research
Hacker News - Newest:
Hacker News - Newest: "LLM"
I
Intezer
月光博客
月光博客
C
Cyber Attacks, Cyber Crime and Cyber Security
博客园 - 司徒正美
C
Cybersecurity and Infrastructure Security Agency CISA
Martin Fowler
Martin Fowler
博客园 - 聂微东

囧克斯

奔四了,写给40岁的自己 有序退网 我和 Vue.js 的十年 我参与《代码之外 Beyond Code》的故事 博客站迁移至 VitePress 的备忘 写给我的奶奶 中文格式化小工具 zhlint 及其开发心得 vue-mark-display:用 markdown 语法轻松撰写幻灯片 我对技术会议的一些看法 VueConf Hangzhou 见闻 第四届 CSSConf CN 见闻 [译]苹果正在做一些他们的程序员明摆着不想要的东西 [译]为什么我不会无偿加班且你也不应该 [译]如果管理是唯一可走的路,那就完蛋了 [译]如何撰写 Git 提交信息 [译]C 程序的原则 Vue 2.0 来了! Weex 近 4 个月的开源之路 Weex 在 JS Runtime 内的多实例管理 我理解的 SPA 我理解的 Flux 架构 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 通过一张图走进 Vue 2.0 Code Review for Vue 2.0 Preview Vue 2.0 发布啦! 务实的小而美 Vue.js 1.0.0 发布了! [译]如何成为一名卓越的前端工程师 手机淘宝前端的图片相关工作流程梳理 [译]如何让办公室政治最小化 Vue.js 源码学习笔记 从原型到发布——“团队时间线” 1.0 开发心得 Vue + webpack 项目实践 用 Koa 写服务体验 webcomponents 笔记 之 配置管理 小秀个人的13~14年摄影作品 (共19张) 由今年D2前端论坛想到的 [译]CSS命名神马的真心难 [译]Git 分支的最佳实践 [译]撰写可测试的 JavaScript [译]语义化版本管理 [译]通过HTML5 Canvas API调节图像的亮度和颜色 [译]JavaScript V8性能小贴士 [译]视觉差,走起! [译]Chrome开发者工具中评估性能的五大新特性 精气神儿 细节无微不至,彩屏让人又爱又恨——新老“神机”大对决:Nokia 1050 vs Nokia 1202 秦升拿到红牌之后…… 用Sass重新整理自己的博客主题样式 Connect中间件使用手册 巧用 RequireJS Optimizer 给传统的前端项目打包 编辑器小调查结果 [译]JSLint 文档 烟火——写给蛇年的傲游和我 小秀个人的全年摄影作品 (共15张) 2012年终毫无正能量的总结 标签?ID?还是CLASS? 微创新=伪创新 HTML5峰会归来 分享bookmarklet一则:随意阅读 国际羽联和中国队之间的恶性循环 ZeroClipboard 学习笔记 “思考人生” 听杨东杰弹吉他 学习精髓 网站装修笔记20120426 网站装修笔记20120414 网站装修笔记20120406 分享Typecho插件:百度统计助手 我的得奖感言 网站装修笔记20120331 用CSS3制作尖角标签按钮样式 分享Typecho插件:Markdown 解析器 + 编辑器 分享Typecho皮肤:我的字很大 汇总自己过去的一些HTML5科普文章 html5中的消息通信简介 + 我的新网站开张 网站装修计划 Typed Arrays 是神马? 文明看球 HTML5中的文件处理 之 File Writer API HTML5中的文件处理 之 File API 独生子女、互相等和不耐烦 IndexedDB技术简介(四) IndexedDB技术简介(三) IndexedDB技术简介(二) IndexedDB技术简介(一) 把博客的字体进一步调大,同时去掉了侧边栏 “模仿别人是为了找到自己” 写给我未婚妻的2011年 写给自己的2011年 手把手教你入门EaselJS做HTML5动画 “吃了吧,不吃就浪费了” 写给傲游的2011年 所谓专业 写给HTML5的2011年 对HTML5中LocalStorage的一些使用建议 回味一下我2011年看到的最过瘾的5场足球比赛 浅浅浅谈开饭店被顾客吃出“异物”的用户体验 前端的本职 继续对Mac穷追猛打 之 修改原生按钮文字大小的技巧
[译]Web 表单的未来
勾三股四 · 2017-08-04 · via 囧克斯

译自:https://blog.prototypr.io/the-future-of-web-forms-4578485e1461 Matt West 的 The Future of Web Forms

license: CC BY-SA 4.0


如何通过会话式的界面让数据收集更加人性化。

Web 表单是从纸质媒介进化而来的。即设计一组标签和线框来限制输入,同时让数据处理变得跟容易。

毕竟,表单的目的是收集数据,以便执行操作。为了执行该操作,我们需要把收集的数据统一汇总。我们在界面上设计了一些约束以便达到统一汇总的目的。表单旨在符合流程上的需求,而非用户本身。

表单经常给人的感觉是冷冰冰的,没有人情味。因此,我们得到的回应往往也是冷酷和不人性的。我们不深入细节,如果一个朋友问你相同的问题,你可能会多一些回复,但这是一台电脑。他想要的只是数据,别的不在乎。就好像你在跟人说话但是人家并没有在听。为什么没人听的话说出来会让人觉得烦呢?

Image by Ken Teegardin.

和许多数字化的东西一样,表单已经被之前的形态严重影响。我们之所以往线框里填东西是因为我们以前在纸上就是这么画的。


我们在纸上主要的输入法是钢笔或铅笔。现在已经不一样了,我们被上百年的约束限制了自己。

技术已经从这些约束中解放了我们。我们已经拥有了创建更人性化的人机交互的工具。

Spike Jonze’s film “Her” provides an interesting prediction for how we might interact with computers in the future.

我们已经很接近在语音识别、自然语言处理和人工智能等方面与人类进行有意义的对话了。甚至我们的工具已经在构建足够优秀的体验了。

所以我们回到表单。我们该如何使用这些工具使得表单更人性化呢?

我们需要摆脱之前对于表单界面的预设。聚焦在通过技术构建一个更佳自然的体验,而不是去除操作层面的约束。

A conversation with Facebooks chat bot “Poncho”.

在过去几年中,我们已经看到了一些新产品致力于通过科技让我们的交互更自然。Siri、Alexa、chat bots 都让我们朝着正确的方向发展,但是我们还没有看到这些创新以某种方式融入到浏览器界面中。

我们有非常多的潜力在更加会话式的 web 界面上,当我们需要收集数据时,我们仍然从一堆输入框和下拉框中构建表单。

有些人在推动这件事。保险服务 Jack 最近发布了一个令人印象深刻的页面来收集保险报价所需的细节。

The “Get a Quote” page from withjack.co.uk

虽然回复依然是被约束的,但是这个收集数据的设计流程已经创造出了更加愉悦和友善的体验。

向用户展示一个标准的 web 表单因此而变得更加容易,但是这样的用户交互更像是一个会话的过程,Jack 已经创造出了更加自然的感受。

Adrian Zumbrunnen’s conversations website azumbrunnen.me

Adrian Zumbrunnen 在发布他的会话式的个人网站之后引起了互联网的关注。Adrian 设计了一个界面,通过一些回复选项来引导用户浏览他的 UI/UX 作品。Adrian 的网站巧妙的考虑到了用户如何到达他的网站并以此为信号来理解用户所处的情景。

我们的方向是对的,但感觉还是少了什么。从技术角度看,构建一个真实的会话式界面需要理解用户的意图和语境,而不仅仅是一些回复选项和位置摆放很聪明的文本框。我们需要基于已经做好的 chat bot 且开发出能够让人们用自然语言与其交流的界面。

界面甚至在开始之前就应该知道我们是谁。底层技术已经有现成的了,那就是浏览器的自动填表。你所有的细节都存在同一个地方,对于一个网站来说,一个简单的请求就可以访问。

该界面应该能够适配当前所处的情境。会话是你是从网站的帮助支持页面开始的还是从营销站点的首页开始的?这些信号可以帮助我们理解用户的语境并为其定制适当的系统回复。这些事情 Adrian 的网站并没有做。

让我们体验一下如何把用户注册流程变得更加会话式。

What would the sign up flow look like if we moved beyond forms?

我们今天拥有做这件事相应的数据,但是把所有的东西一起提供出来以创造这样一个自然的体验是真正难的地方。

再考虑牵连到可访问性、隐私、多语言支持、赋予情绪和同理心的设计。如果我们打算通过技术引入一个全新的更有意义的交互设计,这些都是我们今天要去面临和克服的挑战。

没想到我们已经走到这么远了,但是这里仍然有很多事情要做。未来就在不远处的转角,但我们要敢于去做才行。