我遇到的usability问题有这些:
1. iframe中的页面变大后,会出现滚动条
2. 被嵌入的按钮被点击,或者被嵌入的表单被提交后,在原位置应该显示什么东西?
3. 被嵌入页面代表一个web flow操作(wizard),web flow进行到一半时,用户刷新浏览器会导致web flow从头开始
1.
iframe里的页面内容变多导致滚动条
这种情况一般出现在表单提交时。iframe的大小以表单页面的大小为准,而提交后的结果页面又比大表单页面大的多
解决办法有:
a. 提供一个宽高的参考值,建议用户采用
b. Mashup消费者不指定宽高,而让服务端根据结果页面的大小自动设定。这时候Mashup消费者一般不会直接写iframe,而是通过服务端现成的javascript来构建自己的widget.
2.
提交后该显示什么结果
提交后的结果页面应该与表单页面具备相当的信息量。如果结果页面只显示“提交成功”几个字,会让用户觉得很奇怪。
按照我对facebook和twitter的观察,大概有以下几种方式:
1. 表单页面即结果页面,结果页面即表单页面。比如facebook的 like button,既提供一个按钮让人点,同时按钮本身上的图案也表征当前的like状态。facebook的comments是另一个例子。这个widget的上方是一个评论输入框,而下方则是最近最新几条评论,所以它既适用于表单页面,又适于结果页面。
2. 提交后强行跳转到第三个页面,规避这种问题。facebook的register plugin就是这样,等你注册后,不允许再呆在原页面。
3. 只准嵌入按钮,不准嵌入页面,也可以规避这种问题。Twitter就是这样干的。用户点了按钮后,浏览器就会弹出一个窗口,然后在窗口里完成未竞的事业; 虽说twitter也可以嵌入比较大的widget,但点击widget中的每个按钮,都会弹出窗口。
3.
被嵌入页面中的web flow被用户的刷新动作中断
一个超过三个页面的web flow执行一半时,如果用户按了一下F5刷新浏览器,那被嵌入的iframe就会显示这个flow的第一个页面,用户辛辛苦苦填入的数据就会化为乌有。
目前我还没发现一种银弹式的解决方案。不过twitter的简单风格可以帮你化解这个问题。前面说了,twitter所有的表单、结果页面都不希望被嵌入,而是作为弹出窗口使用的。弹出窗是独立的,这样就不存在刷新主窗口导致子窗口从头开始的问题。