研究会考题01：下面的登录表单好像有点毛病？March 16th 杨掌柜
别纸上谈兵，来来来，咱来说这个实际例子吧：
条件：本图为一个著名的Blog网站(BSP)的首页头部（做过处理）。（从网站的关于我们页面获悉，）该网站为国内外用户提供稳定快捷、简单易用的专业Blog服务。拥有大量的高端用户。定位于”简洁、易用、人性化”的宗旨，在此基础上逐步增加更多的实用功能，帮助用户创立自己的”个人门户”。
问题：下面请大家来分析一下右侧的表单设计。
我将挑选大家的评论，对问题阐述（有图示更好：）），更新到本文当中。
———————————————————————-
关于本问题的分析和解决方案的讨论：
大家都很敏锐的发现了最大的不妥，注册登录两个按钮的位置。
个人比较欣赏freewill 的回复，问题是什么，违反的原则是什么，思路清晰。如果写评估报告，就要按这种思路来写，再配上截图，标记问题区域，就是expert review的格式了。
wangdong，tango等提到了界面元素布局要按不同功能划分，也说到了点子上。
千里驴 ，nana等虽然了解问题所在，但是仅仅用“用户习惯”来解释，说服力弱了一些。还有一位朋友，在回答时，使用到了“个人感觉”怎样才对，感觉很对，但还要深究原因才可以哦。
还有几位大约是Web标准化的朋友，非常细心的提到了在高度，错别字，代码不规范等方面的细节问题，特别是看到Walnut的回答真的替该blog网站倒吸口气～
小甲特别仔细，专门做了改进图，方案如下：
在登录部分的布局，大小重点分割方面都很不错，问题是缺了些必要的文字引导和分区处理，感觉注册那个像是整个表单的标签(Label)了，还有，最好别改人家的按钮样式，样式风格本身没问题。
tigershoo 提到了控件的遵循规范。
BlazingCD ，94smart ，可以从Business角度出发去想问题，谈到了使用该区域的中心定位是什么。
—————————————————————————
下面我再来解析一次：
条件：本图为一个著名的Blog网站(BSP)的首页头部1（做过处理）。（从网站的关于我们页面获悉，）该网站为国内外用户提供稳定快捷2、简单易用3的专业Blog服务。拥有大量的高端用户4。定位于”简洁5、易用6、人性化7“的宗旨，在此基础上逐步增加更多的实用功能，帮助用户创立自己的”个人门户8“。
作为研究，其实里面有8项可以挖掘的特征。
1－首页头部：既然是首页，应该是访客最多的地方，用户注册的关口。 注册是相当的重要。
2－稳定快捷：交互设计师看到这几个字，应该眼前一亮，那意味着，不需要快闪界面，进度条等缓冲用户等待中不耐烦的安抚措施。
3－简单易用：本站的交互风格定位。那意味着步骤尽量的少，文字尽量的直白简短，按用户的行为模式安排步骤和布局。
4－高端用户：什么是高端，是计算机经验、网络经验、经济收入、文化层次？如果是计算机经验，可能就是94smart说的，不需要登录按钮，回车登录那伙的～ 如果是文化层次高端，那么可能影响到审美心理。这种风格，是他们的style（风格品味）不？
5－简洁：视觉风格定位。是否已经尽可能的去掉一切不必要的花哨因素？
6－易用：同3
7－人性化：在易用的基础上进一步的要求网站充分理解用户，设置了一些体贴功能，比如记住密码。
8－个人门户：跟sina这种大众门户不同?只放置我想看的，关于我的。。
这些条件辅助我们了解问题的严重程度的判断：
1。登录按钮的位置错误：使用中错误的点击了注册按钮来登录的几率非常高，属于严重问题。视觉流从用户名－密码－记住密码，一直是直线下来，突然要拐到右侧去才能登录。不够人性化。
2。警告框误用：点记住密码后，会弹出警告对话框，引起用户恐慌，但内容实质是帮助提示性质的。不够人性化。多余步骤，不够简单易用。但本问题并不影响用户完成登录任务。属于中等问题。（Web中的提示信息最好做到页面内，不要用弹出窗口）
3。“注册”的表现形式错误：放在提交表单区域的按钮，造成用户认知挫折。属于严重问题。
4。“注册”的位置问题：注册只是一个链接，跟表单中可能最沾边的元素就是用户名。还没有用户名？马上注册！，可以放在这个文本框后面。但是，这太不起眼了，本页面可是一个网站的首页头部，要吸引用户注册的最好地方。如果从表单中脱离出来，就可以用比较抢眼的视觉元素来装饰，做成链接ok，做成按钮的样式也没错。如果首页的注册只有此处，那应该是一个严重问题。不过表单左侧已经有一个很夸张抢眼的banner引导注册了。所以，这里可以算是轻微问题。（一旦banner变成别的，问题就严重了，哈哈）
5。登录错别字：登陆。本网站的高端用户如果是文化层次高的一群，这个错误会非常影响网站的品牌形象。属于严重问题。
6。忘记密码的链接表现错误：因为和记住密码这个checkbox控件放在一起，容易看作简单的文本信息。属于中等问题。
7。记住密码，忘记密码不在同一条水平线上。美学问题，属于轻微问题。
8。代码不够Web标准化。我是用IE浏览器看的，其他的浏览器不知道有没有问题。如果不影响，那就算轻微问题。但是作为著名的blog网站，有财力有人力，却不肯遵循标准化，罪加一等，算中等问题吧（Joking:P）。
经典的登录元素处理，但它不适合门户首页，因为太大了，可是如果是个人门户的话，也说不定是适用的哦～
奇怪的是，关于记住帐户密码的安全问题，Gmail的登录界面是做了提示的，但Yahoo邮箱的中文登录界面并无提示，难道Yahoo Mail的中国用户对安全的认识普遍比较高？
最后要谢谢所有人的参与交流:)。
作者：油茶研究会
【最后更新】：2007-03-20
千里驴
2007-03-16 12:49
登录的时候容易点到注册上去……
注册和登录按钮的位置对换一下比较符合习惯。
因为大部分操作系统和应用软件中，确认框中的布局都是左边为确定钮，右边为取消按钮。
不过该网站的默认选中是focus在登录上的，输完用户名和密码之后敲回车不会有误操作。
PS：据说MicroSoft当年关于confirm和cancel哪个放左边哪个放右边做的用户调查花了N多钱……
小明
2007-03-16 13:13
把注册做成按钮样式，操作不熟悉的用户可能会认为在上面填了用户名和密码点注册就能进行注册
海涛
2007-03-16 13:27
千里驴 同学都说完了。不过我想了解ms当年调查的结果怎么样？
Ryana
2007-03-16 13:34
千里驴说得很好，小明补充的很不错。:)
有没有人可以解释千里驴说的习惯问题，为什么会形成这种习惯？
还有，分析一下用户群～
nana
2007-03-16 13:35
恩，“註冊”和“登陸”對調一下比較符合用戶習慣。
海涛
2007-03-16 13:50
我弱弱地才猜一下是按照阅读习惯-从左到右!
或者大家看这篇blog《B/S系统中按钮的交互逻辑》http://www.dtell.net/article.asp?id=55
里面就说到确认按钮的左右问题。不过这个blogger的意见是 {确认}按钮应该在右面!
Ryana
2007-03-16 14:23
注意充分利用题目里面给的条件哦～
Reason
2007-03-16 16:40
应该是blogbus的吧
1.”注册”与”登录”按钮应会换位置。可参考Yahoo邮箱http://cn.mail.yahoo.com/
2.”登录”的按钮应写为”登录”而不是”登陆”。
3.”记住密码”， “找回密码” 和 “选择框”在三个不同的高度位置。
4.代码写的一般。
y0ungs
2007-03-16 18:39
比较有意思的问题，支持小明和千里驴
leechael
2007-03-16 18:54
1.找回密码与记住密码应该在不同的高度。感觉是，找回密码的链接在登录按钮下面较好。
2.登录按钮与注册按钮的位置太接近了，用户容易点击错误的按钮。建议是不要注册按钮，另外使用例如“还没有帐号？点击这里注册”的提示语引入注册链接，而不是按钮。又或者放置的位置不同，重要的是，样式不能相同。
千里驴
2007-03-16 18:57
小明说得对，把“注册”改成链接（而不是按钮）比较好。这里两个按钮的功能完全是不一样的（也不是并列关系），而且被用户点击的概率也差很多（我认为大部分的user在这个区域的动作都是填写用户名密码进行登录。而且左侧被ps掉的模糊部分其实就是注册，登录框中又放一个有蛇足之嫌）。没必要把外观弄得那么相近，用户还得仔细观看上面的lable。改为“登录”button+“注册”link更加清晰，不用阅读文字提示了……
另一个瑕疵：“找回密码”链接没有下划线
至于把登录放左边注册放右边，
前面有人提到阅读习惯是从左往右。我认为这里应该是个使用习惯问题，而不是阅读习惯，要和用户的操作系统一致比较好。
查了一下，发现windows和KDE的Linux中一般“确定”按钮在左边，Mac和Gnome的Linux则相反。
题目条件说：“拥有大量的高端用户。定位于”简洁、易用、人性化”的宗旨”
那么，该网站这么设计是因为高端用户更多的使用Mac和Gnome么？呵呵
wangdong
2007-03-16 21:19
我的看法是：
首先，我觉得登录，找回密码，注册是三件事儿，非要混到一起，那就是这德行。
其次，虽然这样有缺点，但也不改也行，算不得大问题，我看中问题也算不上。登录，如果不是特别有安全需要，得让尽量让用户少登。
94smart
2007-03-16 22:42
1、如果填完[用户名]、[密码]后回车可以直接登陆，那[登陆]按钮放在哪里就没什么所谓了。
2、[注册]是不是按钮，得看这个区域的用意，如果单纯只是登陆入口，那就应该[登陆]做成按钮[注册]做成链接，如果这里强调的是新用户注册就没必要改了。
3、[找回密码]最好放在[密码]输入框后面，放在[记住密码]后面也不是不行，最好加上链接。
Walnut
2007-03-16 22:49
我的胡乱作答好像trackback不过来哦……
小甲
2007-03-17 1:48
来交作业了：）
http://pic.xiaonei.com/pic001/20070316/2030/large597767.jpg
多亏这份作业……发现了网站的登陆页改版后竟然忘了一个链接……
tango
2007-03-17 12:09
1. 个人觉得应该是功能区域分割的问题，而不是按钮左右的问题，为什么注册按钮就一定要在登录的旁边（不管是左还是右）？在这个页面上，注册和登录，根本就是不同的2个任务（功能），应该有不同的区域来体现！看看yahoo mail的首页就知道了，右侧的操作区域，上面是登录，下面是注册，gmail的也是一样！
2. 记住密码和忘记密码，也不应该在一个位置，忘记密码，只是提供一个链接入口，将你带到找回密码的页面，根本不是整个登录表单的功能！
Cat
2007-03-17 14:07
“注册”最好改为“注册…”或者“注册>>”，这样比较容易辨别点击注册后将进入另一个对话框页面填写注册信息，否则就很容易让人误解——我是不是在这里输入用户名和密码然后点注册就算是执行了注册操作？
其实本来就不应该如此混排，很容易让人混淆这两个操作的，不是同一个操作就应该分开。如果要让想登录却发现自己没注册人用户进行注册，那就应该给出一个“还没有账号？点击此处注册”的链接。
BlazingCD
2007-03-17 14:52
其实重点在于，这个登录框的中心定位是什么
是希望用户登录，还是吸引注册
如果说是登录框
左注册右登录，确实有些容易使用户操作混淆
较符合用户习惯，并且统一风格的做法，我认为应该还是左登录，右注册，且缩小“注册”按钮的大小，使重心集中于“登录”按钮
“找回密码”和上面的“博贴”、“排行”等都是超链接，但是却与“记住密码”在显示上完全没有区别（鼠标非悬停的状态下），同样会造成一定程度的困扰。
freewill
2007-03-18 13:43
个人觉得两个问题
1:匹配
“登陆”和”记住密码”应该放在同侧,至于左还是右关系不大.
2:模式
相同的任务用相同的模式进行操作,所以”注册”和”登陆”应该设计成不同的视觉样式,连接也好,区域分割也罢
Evans Jia
2007-03-19 10:03
如果高度可以略微放高一点的话，我会作如下调整：
1. 输入框下面只保留记住密码，再往下一行为登录，找回密码可以放在登录按钮的右边
2. 再另起一行，用色块，虚线或文字加空白格出单独区域，放置注册按钮
3. 色彩上，建议登录按钮用如该网站标准登录界面上的那种样式，而注册按钮则可以突出。目前的做法，在一个狭小空间内有两个重点，反为不美
顺便给博客主人提个小意见，能否把下面回复内容的字号放大一点，现在这样看起来累啊。
vipto
2007-03-19 15:47
一个登录界面引发的思考，佩服佩服！
偶用的就是这个blogbus，偶怎么就没发现这些问题呢！
gary
2007-03-19 17:01
这个不算厉害的，有兴趣的朋友可以在blogbus这个界面，故意输错用户名和密码试一下，个人感觉比较抓狂。
tigershoo
2007-03-19 20:51
按钮和链接各自定义的不同,功能也不同.登录需要提交上面的输入内容到服务器,因此应该用按钮形式;注册是提供链接进入注册页面,因此应该用链接形式
wangdong
2007-03-20 15:46
是不是有点过度思考了呢？
Ryana
2007-03-20 16:19
to wangdong，国外的很多帮助说明写得很有意思的，比如原来提到过wii的日本用户手册：http://www.uxstudy.com/2006/12/07/weeklydesign_community_spirits_promotion/ 告诉用户不要把wii吞下去，不可以用wii来烤面包，用它做攻击工具等等。。有很多我们都会觉得没必要。可是如果说明里没有提到，用户做了傻事因此起诉的案件，在国外多半都是用户胜诉。。我就多想了一下下:) 看看中西差异吧。
wangdong
2007-03-21 9:52
嗯，人身安全是一个需要过度思考的领域，人的生命代价无限高，无论如何都是值得的。打官司胜诉，我想主要是法律正确维护了人的利益。
就设计本身论，过度思考页面本身也是没问题的，做为练习，我们想的越多应该越有价值。我想说的是，在实际生产中，“思考一个页面”总是与“及时向用户提供有价值产品”间总是有一个平衡，“对用户提供的有价值产品”与回报之间也有个平衡的，这样看的话，过读思考可能会有害吧。
Ryana
2007-03-21 9:56
very同意 wangdong:)
设计师总是在处理平衡，平衡就存在tradeoff，存在一定条件下的取舍，权衡优先级。。
firepage
2007-05-27 14:53
想起来myspace.com首页那个入口，不知道为什么注册按钮要加高亮。
iqst
2007-05-29 13:18
小甲把注册按钮放在上面，感觉乖乖的
依我的经验，此类网站登录肯定要比注册多，注册放下面才是合适的
yado
2007-07-05 10:39
呜……………………看不到图片，为什么？
bingo
2007-08-29 21:42
我也看不到图片
油茶会 - 研究会考题02：这个水池子好像也有问题
2007-12-26 10:45
[...] 研究会考题01：下面的登录表单好像有点毛病？ [...]