糟糕的设计 - UCD大社区

设计的“环境”因素

白鸦 — 2008-07-26 22:35:54

规矩是死的，人是活的。规矩在很多场景里是不合理的，”环境”对设计更重要。

上图是锦秋国际楼道的指示牌，我在看这个指示牌的时候对着西边。
第一次去找某个房间的时候我把前当成了后，绕了一圈没找到。后来按照每个门上的号码挨个数，才找到了我想找的房间。
我当时有点责怪自己：太笨，看不懂地图。

后来和keso又一起去了一次，他先到那里，也没看懂，靠着随身的指南针才分清楚应该怎么走。

其实这个图的目的应该是”让我知道该往哪里走”而不是让我分清楚那是南那是北，然后再想想该往那里走…
基本上目前我在北京看到的绝大部分楼道指示都存在这个问题，好一点的地方会在指示图上标一个小人说”您在这里”，让用户自行判断要去的地方和”我在的地方”的方位关系。
但我以为更好的做法应该是：
把指示图的上面干脆改成我现在所朝的方向，这样我会更快的看懂自己该往那边走。别死死的按照地图规矩一定把上面放”北方”。
一般情况下，在一个新的地方新的大厦而且刚从电梯出来的时候都很容易分不清东西南北。而且潜意识会也认为上面的这个方位就是自己现在所对的方向。

其实地图之所以要规定一个”上北下南”只是为了在人们不同阅读角度时形成一种统一的标准（地图为什么是上北下南?）。
但在这个指示图上阅读角度是没法变的，而且目的并非是”读图”，在这个特定环境里其实根本没必要一定按照地图的规矩做。

如果你不考虑”环境”，它会搞砸你所有的好设计。

上图的这个快餐店的门视觉感受很好，有很好的卫生、快捷、好味道的视觉传达。但去过第一趟以后，我就就发现它是目前为止我看到过的设计最糟糕的一个门。。
这个快餐店是在临街十字路口开的(看右下角小图，它旁边一点就是个大路口了)，这种地方的风长年都会很大。
它的外墙和街面是一条平线，门洞专门做成了凹进去的，这样其实等于在风口上专门弄了个漏斗吸引风力进去，这个门洞的设计直接导致门洞口的风力非常之大。
很不巧，而他的门还是设计成了朝外开。
结果如图：两个MM一起拉了足足一分钟恁是没有能把门拉开。（我拿着相机在门口等了1分钟不到就拍到了这个镜头，我数了近10个人他们在开门的时候都需要双手很费力的拉半天，出门的人也需要双手使劲往外推）

其实，这个门的设计如果拿到没有这么强风的地方，从各方面来讲都还是很棒的。

少用或不用有歧义的颜色。

上图是我手机的通话记录，这个设计的本意是：向左(内)的红色箭头标识来电记录，向右(外)的绿色箭头标识拨出记录。
但我不明白：1、”左、右”已经能让用户明白了谁是”来电”谁是”拨出”，何必再用两个不同的颜色区分呢？ 2、为什么要用红色标识拨出？

不知道是我对这个设计的主观意愿干扰太多还是这个设计确实容易被误解，我总是第一感觉红色的是未接通的，绿色是接通了的。

这个设计如果给我，我会这样做：
1、向左的是来电、向右的是拨出。只用方向来标识进去的关系，而不用颜色更不会用方向加颜色。
2、绿色的是接通过的，红色的是未接通的。颜色可以和方向结合来标识是否接通过的状态。

如果我不写结尾，你是不是会感觉意犹未尽？
那就等着吧，下期继续列举”好的设计”…

相关话题：糟糕的设计源地址：http://ucdchina.com/blog/?p=194

哎，那些设计…

Ami — 2008-07-26 22:26:53

互联网上，网站多得数不清楚，网民更是很多很多很多……不同的人、去不同的网站，每一天，都会遇到很多好的、或者是糟糕的体验。今天要说的几个也许带了不少个人色彩，也许有人会说他们都是鸡毛蒜皮的小事儿～但他们都有一定的典型性，也伴着我的不少思考，与大家分享。

只为第一次，还是以后的每一次？
Myspace上线的时候遇到一阵火热的体验和评论，小兔自然也不能落后，去体验了一把。痛苦地注册过程之后，登录、体验。一次一次后，越来越觉得这登录框讨厌：

每一次，输入完之后，我都觉得自己的鼠标老是往那个“注册”飘儿～为此小兔写了那篇“注册”比“登录”更醒目？让注册更加醒目，无非是想吸引人来了就尽量注册。但注册后的每一次，那红红的按钮还摆在那儿，总觉得是种干扰。在自己的工作中也遇到过类似的问题，PM说毕竟是在发展用户希望能够强化——但我们没有那么做。而Myspace呢，直到现在还是这样。

同样问题的，还有Yoho，也许还有不少其它类似的网站。之后去一些国外的网站也遇到同样的问题，难不成这还是从国外学来的？
登录框只是一块小小的地方，但是实用的频率还是很高，也经常有人讨论。比如前一阵子白鸦还发起了一次关于登录区域的设计讨论。除了这块小地方的布局，我心里思考的疑问是：应该多花心思把用户吸引到网站来、吸引到网站的人注册，还是应该花更多心思提供那些已经到来的用户们优质的体验、让他们成为我们的忠实用户呢？是只想到用户第一次的到访，还是考虑今后每一次的体验？
登录区域像是个门，我们当然希望用户都来、来了都要进这个门、当然，还有进来了要流连忘返，不想出去。想吸引门口的人进来，可以把门做大一点醒目一点，也可以靠橱窗吸引门外人进去一探究竟的欲望。门面要装修得吸引人，也要方便每次的进出——更不要忘记，门里面的东西更重要。

别小声说话
抱歉拿蚂蚁改版前的图来说，因为这张图还是挺有代表性的。这年头Ajax用得普遍了，这种问题也出现得多了。不知道有多少人在点击了提交之后，却不明白为什么没有动静呢？只能说，这种提醒像个害羞的小姑娘一样，说话太小声了，容易听不见、注意不到啊!~

当然，说得够“响亮”还不够，还得说清楚。例如Myspace，当初我注册到这一步的时候，困扰了很久，差点就要放弃了……不知阅读本文的各位，能否更快地发现问题所在。

就在我快放弃前，终于发现原来是把自己的出生年份选错了。就不能说句“您的年龄不具备在MySpace上注册的资格”么？
错误信息是交互中非常需要重视的关键，提示的信息应该醒目、清晰、友好，这是始终不能忘记的。

一家人别说两家话
这部分谢谢liliyun提供的例子。原本liliyun是想给我推荐这个好的例子，说网易的注册不错，红色和绿色像交通灯一样有很好的指示作用。于是我去试，却怎么也没看见红色的输入框。交换了截图才发现，原来他说的是网易通行证，而我试的是网易邮箱——一家的产品，却用不同的方式？

虽然网易通行证的注册用了这样的，网易邮箱的注册表单却表现平平，难道不是一家人做的？
惭愧的是最近刚发觉自家的网站也有类似的问题，注册登录做得很认真，但是修改资料的表单的错误提示竟然也是上文提到的“小声说话”型，惭愧惭愧，正在修改ing…
一家人不要说两家话，在交互表现上，也应该统一整体的形象。以前在学校里学企业形象设计，那时候还没有人想过，交互的方式和表现，也是需要统一的，因为它们也在展现企业/品牌的形象。

眼花了啦~从哪儿下手？
我本人还是挺喜欢怪兽的(因为女孩子都喜欢可爱有趣的东西？)不过怪兽的消息经常有这种情况出现，我只有一个感觉，眼花了啦，从哪里下手啊~~~

普通的一个站内消息，却有四个按钮两个单选一个复选，尤其是“确定”和“取消”、“返回”和“删除”似乎都是操作，但是他们就摆在一起，从哪儿下手？实在是没个方向，为此，需要坐下来好好看才行～～

这张图来自随时记，这里有“一些文字”、“多一些文字”和“再来一些文字”，保存的按钮也有两个～第一次看见这个界面的人，都会有什么想法呢？反正我是靠试验了两下才明白的。让我觉得都有些寒了，我这个QQ号6位数的，是不是不能算互联网高级用户？不然怎么面对一个界面都还需要思考一阵子呢？

亡羊补牢，终是下策
最后，来说个现实生活中的体验。
之前，我在适时的提示和帮助写到了住处附近的地铁自动售票机，那个乘客求助按钮竖立在一排自动机器的旁边。那个后续比较让人吐血：

真不知道，就算听到了喇叭中的提示，乘客就会去按求助钮了吗？此处从左至右的排列是：售票机×3，加值机，验票机，然后才是求助钮。毋庸置疑的是售票机最容易需要帮助，但是当你听见广播的时候，在你的视野里发现得了求助按钮吗？
挂个喇叭是亡羊补牢的做法，可能旁边竖着的求助按钮也是亡羊补牢的。但由于之前设计的欠缺，他们能够弥补的也很有限。更绝的是这次的后续，那个喇叭估计是没有电了，路过的时候，就听见它“@#￥%&^……”不知道在说些什么～
在互联网行业，亡羊补牢似乎更加常见。但事后的更改，很可能能做的改进很有限、还要牵扯到改变用户使用习惯的问题，虽说是比不改的好，但终究只是个下策。

互联网和生活中的点点滴滴，也许糟糕的体验永远都数不完。在平时遇到时叹气之余，今天在此抛几块小砖，希望类似的情况出现得少些～

相关话题：糟糕的设计源地址：http://ucdchina.com/blog/?p=162

那些总是发生的小事

Angela — 2008-07-26 22:23:52

第一件：总是不理我

这种经历就好像你在饭馆大叫：“服务员点菜！”而一身笔挺制服的服务员只是冷冷地撇了你一眼，心情好的呢，可能会从鼻子里哼一声，表示知道了。

比如下面这两个：

这两个好一点，多少还“哼”了一声：

更可恶的是，这位连撇都不撇一眼，点击按钮居然一点反应也无，就算我没填用户名密码嘛，你也告诉我一声啊：

第二件：总是让我猜

有人说，中国用户缺乏探索的主动性；有人说，中国用户比较初级，需要引导。可是，为什么还有那么多网站要让我猜呢？

你猜这里面是什么内容？

你猜这些活动都是什么？

你猜这两个页面是做什么的？

你猜这是个链接还是按钮？

第三件：总是说我错

读书的时候得到的红叉已经够多了，好不容易毕业了，又给我“大红叉”……我过敏！还加那么多叹号！！！！！

注意看这个：

它最可恶的地方是，我好不容易答对了，也不夸夸我：

相关话题：糟糕的设计源地址：http://ucdchina.com/blog/?p=175

大家一起来找茬：糟糕的网站体验

思域 — 2008-07-26 22:22:26

2006视频年，出现了大大小小很多的视频分享网站，思域没事喜欢找茬，于是找了几个比较成熟的视频网站作为目标，因为这类网站多多少少已经有“以用户为中心”的理念，这样的找茬思域觉得是有意义的。下面是其中某视频网站一些糟糕的体验，为了避免炒作之嫌，思域就不公开是什么网站了。这些糟糕的体验可以分以下四类：

页面的不良设计、糟糕的人机交互、注册登陆的烦恼、功能使用的疑惑

这些名词我不做解释了，也不说具体的什么标准，既然是找茬，当然的找到哪说到哪。仅个人观点！

一页面的不良设计

1、页面重心失衡

页面可以利用色彩的布置、文字与图片的协调、一些按钮或者小元素来平衡页面整体的重心，这样对页面－特别是首页的内容展示是很重要的，因为首页不应该出现垃圾内容，如果页面上的某些内容，因为你页面布置不合理，偏离了重心，导致用户根本不会关注，那么这部分内容即使再好，都是垃圾，因为不会引起用户的关注。
比如这个网站的首页，（如图一）

（图一）
这个页面中红色线圈内的分类，就成了牺牲品，百字不如一图，在用户眼里图片要比文字吸引人的视线，所以此页面左侧这些分类往往被用户忽略，可是如果做一些调整，就会带来不同的效果。比如在每个分类前面添加一个小图标，形象的表达该分类的内容。
例如yahoo的首页

2、如果可以，请缩短你的页面长度。

下面这个图是此网站专题频道的首页，

一共有六个专题，而第一屏只显示了两个专题，实在是有点奢侈了，思域认为图片的表达方式不一定非得用大小来衡量吧。按照他的设计方法，这个页面显示了两屏半，能否缩小图片的尺寸，一页就现实完，不要让用户去拉滚动条，就让你的专题一览无遗？

比如下面的显示方式（如下图）

3、不能为了网站自身的利益，牺牲用户的感受。

网站要有广告收入，但是不能让广告排挤内容。下图是此网站的内容单页截图

上图中红色圈里面的数字代表此部分内容在本页的重要程度，思域找了10个用户来分别给出他们心中的顺序，从①到⑦重要性逐级递减，得到了这个图，很明显，作为三处Google AdWords被列为用户认为最不重要的一项，而网站自身似乎觉得Google AdWords,才是本页面最重要的。不是不要广告，而是如何合理的安排广告与内容之间的角色。

4、让用户很容易触摸到网页里的功能

先不说页面是否滚屏，就算是一张A4纸那么大的屏幕，如果页面设计不当，用户仍然很难找到他所需要的东西，即使找到了感觉都很别扭。比如此网站的搜索内容显示页面，

其实上图这些功能完全可以离内容近一些，离用户的视觉中点近一些，这样用户操作起来会方便很多，也很容易看到。

比如下面这样的排列方式

二糟糕的人机交互

网站不要轻易的把责任推卸给用户，不能让用户来承担他使用过程中出现的所有错误。特别是在人机交互的对话框中，一些网站时常责怪用户“你出错啦！”比如这个网站中出现的以下情况。

1 关于输入字数限制的提示

2 关于输入文字形式限制的提示

三注册与登陆的烦恼

这个不仅仅是用户的烦恼，也是很多网站的烦恼，因为注册和登陆是网站的大门，门槛高了用户进不来，门槛低了网站都不知道进来的是猫还是狗。至于网站的烦恼就不多说了，来看看这个网站在注册的时候给用户带来的烦恼。

第一步：输入ID（如下图）

画蛇添足

第二步输入注册信息（如下图）

四功能使用上的疑惑

1 上传前选择文件的疑惑（如下图）

2 上传过程中的彷徨（如下图）

3 上传成功后我进入了死胡同（如下图）

其实上面这些都是小细节，越是细节的地方就越容易被网站工作者忽略，但是却给用户带来很大的麻烦和糟糕的使用感觉。思域还是那句话：“细节决定成败、体验促进消费、文化提高黏性”

感谢大家百忙中的阅读！

相关话题：糟糕的设计源地址：http://ucdchina.com/blog/?p=134

五点建议

千鸟 — 2008-07-26 22:14:25

找茬半月刊，开头先：

1. 图片来自keso博客

如果我来修改，上一张留言，去掉“发表于”后文字的加粗，并且与“评论内容”的颜色对调；下一张文章，可以考虑把“发表于”几个字颜色和上图的灰统一，以便与分割线区分。

2. 图片来自豆瓣小组

活跃度相当高，但这种呈现方式的传达效果，被大打折扣。如果我来修改，直接计算出活跃程度，类似几分前，甚至几秒前，大片的“2007-07-10 22”容易阅读疲劳。

3. 图片来自淘宝注册

注册提示不需要这么多文字，因为大部分用户不会使用怪异字符，普通网民也搞不清楚这么复杂的带限制的“与、或”逻辑关系，下边的“请再输入一遍…”其实是重复。

4. 图片来自搜狐博客

拿新浪方案来做对比，徐静蕾博客先是点击过1000万，现在过1亿。一堆数字只适合用来唬唬眼球，不适合量化和宣传。而且，到了一定程度，用户只关心数量级。

5. 图片来自宝宝树

其中的“详细信息”只是一个链接不是按钮，所以不适合设计为类“搜索”的按钮风格。对此模块信息的强调，应该在风格设计上下功夫。

相关话题：糟糕的设计源地址：http://ucdchina.com/blog/?p=123