IT Consultant, Agile Coach, Business Analyst

Archive for the ‘Web设计’ Category

敏捷界面重构 - Agile UI Refactoring

Tuesday, April 24th, 2007

敏捷界面重构 — initial idea

很多人都觉得界面的事情是细枝末节,等功能做好了,找个时间一起清理一下就好,不会占用太多工夫。很多人也都是这样做的。

这里说的界面开发是指系统的交互设计和界面可用性及易用性设计,也包括CSS的界面布局、颜色、字体等基本的视觉元素。这些问题的重要性不用多谈。

我在项目中期加入过几个项目,这时候最令人头疼也最令人兴奋的莫过于在开发中期对于界面和UI进行变更了。一个项目在初期如果没有做良好的界面设计,想要在中间来进行大的变更简直是噩梦一般。在一个敏捷团队中,做这样的事情尤其困难。

敏捷开发中的一个实践,是需要客户的协作和参与,及时由客户认可做完的需求以及由客户决定下一步的开发。这种客户享有决定权能够使开发变得更顺畅,客户关系变得更融洽,是一个很好的实践。

但是,这种实践给界面的改进带来很大的麻烦:如果在项目中期打算进行界面的变更,自然要写出很多跟界面相关的需求,而客户按照需求的价值决定优先 级,他们有时候不理解这样的界面改进如何带来价值,为什么改善一些文字描述和交互方法还要占用开发时间,他们更希望在有限的时间内增加更多的功能和修复更 多的BUG。这时候,这些界面调整的优先级就被排的很低,在几个开发周期内都没有得到采纳。

我们先后尝试了几种方法来改进这个过程,例如给客户培训交互设计和可用性知识;将开发人员分为两组,其中一组专职负责界面改进;或者将界面改进需求单独分成一组,要求客户每个迭代从其中选择一部分等等。但这些办法都不是很理想,没有达到预期效果。

事后总结原因,觉得最大的原因还是在于:客户不是用户。他们虽然负责对项目功能验收,但他们并不最终使用系统。系统使用上的问题不是他们最关心的。他们需要得到投资回报,因此选择了回报更快的功能开发。从这方面看,客户的选择是无可厚非的。

理想的解决方案应当是在一开始就对界面及UI进行控制和把握,并进行持续的度量和改进,或者称为:界面重构。将界面重构和代码重构等同到同样地位,在开发过程中持续随时的进行改进。

我们都知道,代码重构是在不改变代码行为的基础上,改变其内部的结构。通过一系列小的步骤进行重新构造,系统不会因为这些小步骤的改变而停止运转, 仍然会保持顺利正常的运行。重构的结果是一套良好可读的代码,它不仅能够对我们扩展功能有帮助,也是我们适应变化的基本手段之一。

我们将其类比到界面的开发过程中:我们需要在不改变界面功能的情况下,通过一系列细小的步骤,来改变界面的交互行为和可用性。最终结果,不仅仅是一套良好的界面,也是保证我们扩展新的功能和适应变化的基础。

重构的一个要点是测试。测试可以保证重构的正确。而界面开发的过程中,测试工具的缺乏导致我们不得不采用其他的方式来保证功能的正确。一种可行的办 法是维护一个界面原型,纸质或电子形式均可。在不停地开发过程中,不断的维护这个原型,使之先于实际实现被用户感知和体验,提前获得用户的反馈和客户的认 可,并将原型用于指导团队的开发。这种不断的用户体验和用户测试过程,可以在一定程度上保证界面重构的正确性。BA阐述需求或QA进行验收测试的时候,也 不妨考虑使用界面原型作为一个验收条件来展现给开发者。

重构的另一个要点是要经常不断的进行,每当写新代码之前,先进行一点重构,使旧的代码更好阅读。界面重构也应该是这样。对每一个开发完成的需求,提 高界面验收的标准。不仅仅是完成功能就可以,还需要达到一定程度的可用性和可维护性要求。例如必须遵循提前制定的UI Guideline等等。避免因为界面开发的涣散导致的破窗户,这种疏于整理的小细节可能最终成为最头疼的问题。

比如,我们在开发的过程中,以前只以60分作为界面的验收标准,等积累一段时间后再批量修改界面一次,但可能这次修改只能达到80分。现在我们需要 改为以80作为验收标准后,在开发的过程中多花点时间来重构一点点,一直保持80的水平。这样如果我们需要进行更大的改进,可能很容易就能改到90或 100分,从而达到我们最终的目标。

由于开发团队的人员多数不太擅长界面的知识,并且界面的测试和度量工具缺乏所致,界面的持续改进在项目中较难做的很好。这些实践又要求BA或QA能 够有相应的交互设计能力和可用性工程的经验,也限制了其在项目中的实践。但这些确是在一个项目中长期被忽视地方,应当进行一些加强和发展。

总而言之,敏捷过程和界面设计并不是矛盾的,将敏捷的思想应用于界面开发和交互设计的过程中,我们可以获得更多更广泛的想法。

补:4月24日,和Erik谈了谈这个想法,他也认同这类做法,但觉得由于目前没有一个显然的Vision,或者说,不像Code Refactoring那样有良好的OO设计准则和可读性在前方可以到达,这样的UI重构的准则不是很明显。原因可能还是由于Developer大多缺乏这方面的Sense。路还很长。

Tags: ,

登录验证码

Wednesday, November 3rd, 2004

今天在taowen的blog留言,发现需要输入验证码
实际上这是个不良的设计。

难道设计者从没有想过色觉有问题或者手指残疾的人么?
把验证图片弄得花里胡哨的,灰色字花纹底,唯恐人看的清楚
validation code
再看看chinaren校友录的验证码
validation code
Yahoo!Mail的
validation code
补充:Hotmail
validation code

这是把防止垃圾留言的技术负担强加给了客户。
我们可以想想其它的防止垃圾消息的方法
例如,可以写:1+1=? 提供三种答案让选出正确的
而不应该增加击键数目或依赖于图片色彩

虚拟空间与主机托管

Monday, September 6th, 2004

虚拟空间本来是很好的,可是自从有了JSP这东西就很复杂了。

多人共用一台主机,用同一个JDK,一旦某个网站设计的不合理,
耗用了太多的性能,那就会拖垮整个主机上的其他所有用户。

很不幸一个客户遇到了这样的问题,看来还是主机托管比较方便。

万网主机托管:1U 11000元/年
Dell PowerEdge 750, 1U , 10000元
用金钱换稳定, 不知这个机器行不行~ 。

the inmates are running the asylum

Tuesday, August 31st, 2004

这个标题很古怪,居民正在奔向精神病院??
好在有副标题:Why high-tech products drive us crazy and how restore the sanity.
这是Alan Cooper的杰作,中译本名为《软件创新之路》或《软件开发的创新思维》。

举个书上例子,用录像机定时录像。必须要按某个按钮,调时分秒半天。
这就造成了“认知摩擦”,大多数的人,都对这东西有恐惧心理
而如果像手表一样,做成旋钮式的,用户界面就会好很多
你想到过把和时间有关的东西作得和钟表盘一样吗?

有个客服,抱怨说他们每天都耗费大量时间在文件和文件夹上
原因是windows, linux等设计文件系统的时候,用了树形结构。
而很多用户根本无法理解树形结构,
因此,大量的“白痴”用户需要客服一个个教会
但没有任何公司在这上面进行修改

造成这原因就是,在硅谷这样的地方,到处都是程序员,
软件开发人员不了解不懂电脑的人的真正需求
也就是,做出来的都是精英使用的产品
而不是面向金字塔底部的大众产品

因此,用户界面并不是面子工程。
不是由程序员简单的设计一下再加上美工的界面就好的
我们更需要交互设计人员。

换个方向看网站

Tuesday, July 27th, 2004

昨天升级了nVidia的驱动,发现增加了一个nvRotate功能,
允许把显示方向旋转90度。 嘿嘿,立即把俺的液晶显示器竖过来试试看。
768*1024,感觉立即不一样了。 换个视角,换个心情。
这样在QQ聊天,写程序,读文章的时候,可视的行数增多了。

同时这也发现了一些网站的设计问题。例如sina网站,用表格定位的800宽。
在当前解析度下就多出了一个横向的滚动条,右边有点出界。
采用相对表格定位的网站一般没问题,比如www.cmfu.com。
采用webstandard的大多没事,不过有的出现了右边的栏目移位的问题

固定布局的缺点,立即就显出来了。可见用户界面的设计还是很有必要再仔细考虑的。
不管是表格布局还是CSS布局,看来今后都要测试768像素的情况了。

为OO-CSS开启了一个页面

Tuesday, May 25th, 2004

经过几日的修改,原来的OO-CSS的Table已经基本成型,
当然,想要跨浏览器的使用还不太可能,现在用IE6测试的。

专门做了一个页面(见右),试验项目:
http://icecloud.51.net/project/oo-css.html

希望这个东西能够有些价值:〉

如何成为一名优秀的web设计师?

Monday, May 17th, 2004

什么是web设计师?
在我的观念里,web设计师不同于美工。Web设计师是美工和后台程序员之间的那个角色,而且懂一些美术,会用一些Photoshop。这个人主要负责web的建设规划,前端代码,切图等,而不是美术设计。

实际上,这个人才真正的懂得Web,是网站建设的核心。
(more…)