为中文而设计的文本框

搜索自动完成.png

我一直觉得,文本框的这个东西,在有输入法的国家,是我们这些懒人的杯具,文本框的自动完成功能,在配合输入法下,简直是个鸡肋。一次次的切换Ctrl+Space,是否有让你崩溃想敲烂键盘呢?

上面的那张图已经很明显的让我们感觉到了三个问题

  1. 输入法把自动完成遮挡住了,我看不见。
  2. 使用键盘↑↓键只能切换输入法内的选字,无法选择自动完成内的选项。想用却用不到。
  3. 当你懊恼的打算用鼠标去点自动完成列表内的文字时,杯具发生了,你发觉,你点了,事实上什么效果都没有。你的文本框变成一遍空白。(在Chrome下多种中文搜索引擎有此问题,杯具啊。)

备注:经过笔者测试多种搜索引擎在不同浏览器的呈现效果,这三个问题出现的几率各不相同,但在chrome下这三个问题非常明显。(Chrome渲染有问题?)

继续阅读

让你的产品更具响应性

在最开始,有两个问题?

  1. 既然人脑是世界上最智能的东西,为啥我们还需要电脑?
  2. 为啥如今web技术发展理论上已经能够实现所有的客户端功能,为什么我们还需要客户端?

原因都很简单,因为后者比前者更快,响应更迅速。

什么是响应性?

过去的几十年当中累积的大量证据表明,响应性(即软件应用程序跟上用户、不让他们等待的能力)是确定用户满意度的最重要因素。相比安全性,稳定性,易用性,响应性无疑是最容易最方便被用户所感知的。在使用计算机或者手持设备的时候,用户对于等待的憎恶比对其他任何事情的喜爱程度都要深。

然而,用户对于响应性的感知其实包括两个因素的:

  1. 速度:指的是机器自身的计算能力,机器性能越强,速度越快。
  2. 流畅感:使用时系统的反馈能否满足用户的时间支配需求。

继续阅读

使用信息提示提高系统的功能可见性

什么是信息提示(Infotips)?

信息提示,用于对一些较为隐性的页面上的元素进行补充说明。通过鼠标悬停来表现。

在这个示例中,用信息提示对链接进行说明

在这个示例中,用信息提示对链接进行说明

在各种提示当中,信息提示是最有效且实现成本最低的一种提示:他的干扰性很小,容易实现,并且不存在平台或者浏览器兼容问题,实在是居家旅行杀人放火必备提示。

有效的利用信息提示,能够快速提高系统的反馈机制,同时,他还能有效的增强一下系统功能的可见性。

继续阅读

高度认知与低度认知

点击查看大图

这是爱情公寓的注册页面,看到这幅图片您一定会乐了,因为两个按钮上的文字;但我们所关注的并不是其情感化的贴心语句,而是其所包含的对于高度认知与低度认知的差异化设计。

高度认知与低度认知是对用户的分类的一种维度,他对按照熟练度区分而出来的新手用户与专家用户既有相同性但也存在差异。高度认知与低度认知的差异的原因更多是文化以及生活习惯的沉淀,他们之间的相互转化也比较困难。在设计上,有必要考虑对两种用户的差异化而进行设计。

什么是高度认知与低度认知?

有些人对于大部分信息都了然于胸,在操作的时候,更加依赖自己的经验或者习惯,因此,他们对于信息的需求量非常的少,有时候他们只需要很少的信息就能了解系统的状态。但有时候他们也容易过渡遵循自己的习惯于经验,即使出错也会一次次的重复操作下去。

继续阅读

WEB应用中导航的思考

导航与站点结构树的关系?

从信息结构上来讲,按照严谨的分类,每个网站结构都可以用一个结构树来表示。

在进行卡片分类等研究过程中,往往会建立一种极其严谨的从属关系;简而言之,卡片分类是让逻辑清晰,但是这个结构树可能非常的宽而且深。在这种情况下,如果导航依然保持与结构树的对应显示,显然会与其浅度要求产生冲突。

一个直白明了的导航可能会打破逻辑关系,采用自然语言能够理解的结构。

事实上无论横排导航还是纵列导航,假如入屏幕足够宽或足够长,那么只需要一级导航就可以。这种好处是用户更快找到自己想要的内容,但也打破了导航的结构树体现。

无论从那种角度上来说,用户并不需要了解网站具体的结构树,导航也不必完全照着结构树来体现,以下是各种交互组件对结构树的体现度的排列。从左到右依次降低。

对于信息分类体现度的示意图.png

对于信息分类体现度的示意图
继续阅读

WEB应用对话框思考

浏览器窗口的中国特色?

浏览器对话框与通用对话框皆为模式对话框。但因为其被用于一些恶意行为(如添加收藏夹,设为首页,无限确认)一些国内的浏览器已经开始屏蔽其独占性。

这些浏览器包括,傲游,世界之窗,搜狗浏览器,360安全浏览器。而主流的IE,FF,Chrome,Oprea,Safari都未进行屏蔽。

同样,弹出窗(Popup Windows)因为常被用于广告,大部分浏览器也存在了对其屏蔽了功能。导致在国内的web应用中极少出现此类窗口,大多数处理方式是直接在框架内嵌入。

但随着国内互联网的成熟,以及弹出窗在Miscrosoft Vista以上系统的轻量级呈现和其本身的良好体验,可以考虑提供弹出窗(Popup Windows)。

关于Web中窗口的深度及其搭配?

理论上,web应用上的所有窗口都可以采用内建对话框的形式。

Web应用缺乏像Windows系统那样一个提供窗口管理以及切换的任务栏,且因为开发难度的问题,web应用也无法向Windows那样提供窗口与窗口的纵深感。

因此,当需要对窗口进行纵深感的呈现时,通常会采用不同类型的对话窗口在进行区分。而常用的做法就是将内建对话框作为其他对话框的父级窗口。

举个例子,大附件面板(这里采用QQ邮箱为例)

当添加文件时,窗口的搭配是这样的。通用对话框在内建对话框前端显示,且为模式对话框。
继续阅读