预览模式: 普通 | 列表

[转载]弹窗与浮层的争论

 

在从传统的Software逐渐转换到Webware的大潮中,设计模式与技术实现双重变革和推进下。我们提倡页面中的任务对应用户群明确,任务少而精。回到我们传统的后台软件系统中,对于面对系统与流程再造。我们顺其自然得想到把在Web服务中的设计思想迁移到后台软件系统中。多数情况来说,这会使系统变得更加轻便,结构清晰,对软件的用户群开始洞察和优化。

但是,是不是有助于提升可用性的改进在软件系统中都需要改进呢? 今天分享一个例子。

 

 

 

背景是:

1,  一个页面中包含一个主要任务和若干分支任务及完成主要任务所需的页面信息架构。

2,  用户角色繁多,信息量大,页面区域有限,只能展示主要任务所需信息。

 

我们面临其中这样一个挑战:

1,  做出主要任务的决策时,若干条件下需要查看分支任务的详细情况以支持决策。

2,  做出分支任务的决策时,若干条件下需要查看主要任务信息以支持决策。

 

 

在开始阶段,我们很自然的对任务所需信息进行归类和梳理,页面更加结构化。大量使用展示层脚本语言,希望让页面更加瘦小,让操作更加流畅。从图中可以看到,把之前的页面跳转改为当前页面弹出一个蒙板浮动层。此时,我们发现忽略了一个问题。页面使用浮动层之后,主要任务和分支任务之间关系由并列变成了包含关系,分支任务又在系统其他环境中处于主要任务地位,任务之间并不存在包含关系。在长达3屏的页面中,浮动层虽然可以做到之前并列关系结构中的自由信息组合、信息对比和自由移动。但是信息量繁复的情况下,移动浮动层,拖拽滚动条,浮动层遮盖部分信息等原因让用户在环境测试时皱紧了眉头。因为之前主次任务之间并列结构、自由打开和隐藏、不规则对比和拖动的习惯不能被延续了。此时,如果不考虑到系统结构本身的问题,此处使用弹出层的使用可以让用户更加自由无束缚,也减小了业务扩展和张力所带来系统调整成本,而时下常用的浮动层反而会限制使用过程。

 

衡量一个可以提升软件系统可用性特性,它能否适合一套软件系统。不只需要从可用性的角度来审视,还需要深入了解系统结构、用户习惯和技术成本等因素。如果是Web服务产品,需要更加周全地衡量。

Tags: 用户体验

分类:UE/UI | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 44

[转]怎样设计“帮助”最有效?

彪悍的设计不需要解释,那么我们是不是也不需要帮助呢?

从小的方面讲,帮助一般是指:手册、说明书、文档、FAQ 等等。从大的方面讲,可以是交互过程中的提示、指引、演示等信息,帮助无处不在!这一切,可以一并称为“帮助系统”。

无论怎样,帮助系统的目的,是解决使用者遇到的问题、帮助使用者更好、更快的完成任务。

不同产品的帮助系统有很大区别,我觉得讨论下比如 PHP 语言的帮助系统、电视机的帮助系统、数码相机的帮助系统可能会更有意思。但如果大家都是搞网络的,那么谈谈 Web 2.0 网站的帮助系统设计,或许更容易引起共鸣。

如果要我来为“帮助系统”分类,那么我会分为以下三种:

文档型帮助:详细,大而全。一般是 FAQ 形式,可以由情景式帮助链接过来,或者从页面的其他地方链接到某一个问题的解答上。实际上就是一本帮助手册,噢,让我想起了 RTFM(Read The Fucking Manual)。文档性帮助必须有比较好的组织方式和搜索。

可能大家会直接把文档型帮助给枪毙了。但是,别忘了我们还有专家用户!

情景式帮助:即时,针对性强。情景式帮助最常见的例子就是:“忘记密码?”。还有比如一些应用具有帮助开关,打开的时候,就会出现气泡提示,告诉你这里是什么那里是什么。哦,还有,就是 Office 那个恶心的戴高帽的老头和长着眼睛的回形针。

这么一说,可能很多人会觉得情景式帮助是最有效的,因为最直接,并且符合在需要的时候出现这样的设计原则。但是情景式帮助最忌讳宾主倒置,过多的情景式帮助会影响用户的使用。

演示型帮助:生动,易学。主要用在富应用的新手教学上,比如游戏里面的 Tutorial,比如安装一个软件的向导,安装完了之后的 Samples 等等。对于网站,演示型帮助可以放在首页上,我印象中,有一个在线的 Mindmap 应用(MindMeister),首页看上去是一张再普通不过的脑图,但点击后会发现,那居然可以在线操作!

从商业角度讲,演示型帮助可以引导和培养用户习惯。

除了以上三种,还有那些帮助系统呢?导航是帮助吗?一本书的目录,算不算帮助?快捷键,算不算帮助?

帮助的帮助:如果你来设计一款 GPS 导航,它本身就是一个帮助系统,那它的帮助是什么?

载体:文字,声音,图像,视频,Flash,三维虚拟…想象一下,你在使用一个三维浏览器,给你介绍你打算买的一套房子,并且有美女全程导购解释……

帮助的描述:需要学会用用户的思维去考虑问题……图形往往是具备良好的解释性……

 

分类:UE/UI | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 539

kuler.adobe.com

[隐藏日志]

这是隐藏日志,只有管理员或文章的作者可以查看。
分类:文字垃圾桶 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 945

[隐藏日志]

这是隐藏日志,只有管理员或文章的作者可以查看。
分类:Text | 固定链接 | 评论: 4 | 引用: 0 | 查看次数: 1527

黄昏下的天空


  

Tags: photo

分类:Photography | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 2000

黄昏

   
  

Tags: photo

分类:Photography | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 2036

嘿嘿,去BLZ没戏了,本本也没了,希望这次可以捧个打印机回来,呵呵
视频的2:40秒左右就是我的拉,
播放视频文件
分类:Design | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 2339
播放视频文件


帮忙投票阿~~

Tags: wow

分类:Design | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1930