• 1. 报名支付 用户体验报告 User Experience Center@优秀网页设计
    • 2. 目标: 浏览器: 输出: 角色: 背景:报名支付 IE9 常规逻辑顺序 UE,清除cookie 账户内无爱学币,尝试到爱学网购买课程学习。体 验PPT 15 页附体验对比图一张,需另存观看。谢谢。体验报告最佳浏览工具:OFFICE2010,可能因您使用的2003版本而无法看到部分动画效果。
    • 3. 新用户注册进入个人中心后,用户信息和设置不够直观易用。修改密码等常用操作隐藏在侧栏的二级菜单中,网龄较小的用户会不易查找设置。还有巨幅活动海报干扰用户对个人中心的学习了解。海报已过期,建议去除。 课程介绍页面下方的推荐搭配与购买课程的费用堆砌在一起,主次混搭严重阻碍了用户购买课程的流程。目前的推荐让用户有强硬推销的感觉。 对于还没有养成依靠爱学币来购买课程习惯的用户,在核对订单页面会对上方的“爱学币支付”方式感到突兀,然后下方结算信息中出现的“总计”“总额”等字眼,会产生疑虑。且“网银在线”的使用过于隐晦。 用户在购买完课程后,网站对于用户的下一步指引,及刚购买课程放置在何处没有做明显的引导。当用户人为或其他因素关闭这个页面后,很有可能会不知道自己刚购买的课程应该在哪里看,这也是目前我们需对“个人中心”要优化的一点。报名支付主要问题简述
    • 4. 导航栏调整后导航栏现状根据用户hits数据将导航栏顶部做了优化,将鲜有问津的链接移除。【“免费试听”“推荐课程”等用户呼声很高的链接经过讨论直接放置在了导航上。 (该优化下方设计稿暂无体现)】将新手指南放置在用户ID右侧,个人中心换成了我的课堂。并当用户有新课程购买后,会有icon提示用户上课啦,暗示在这进行课程的操作学习。养成用户对我的课堂的重视。这里也将是用户归属感最强的地方。Icon提示Point:个人中心的字眼在学生心中没有很强的操作性和归属感,特别是感觉不到和课程有多大联系,而用户操作时间最长的地方就是在个人中心里,为了提升权重,并让用户更易理解和加强记忆及互动。可在文案上尝试进化成我的课堂。
    • 5. 词域大词域适中操作感辨识度归属感操作感个人中心我的课堂上课啦~!个人中心的字眼在学生心中没有很强的操作性和归属感,特别是感觉不到和课程有多大联系。 而用户操作时间最长的地方应该就在个人中心里,改进后能提升权重,并让用户更易理解,互动性也增强。 我的课堂相对个人中心也更符合爱学网的学习氛围。 当新增课程后,配合“上课啦”ICON也不会觉得突兀,更有操作感和亲和力。升级说明
    • 6. 登 录资料栏信息不健全,需功能最大化。并将位置调整至侧栏顶部。Point:个人信息栏需增配头像(后台获取用户自定义的头像)。增强用户的归属感。同时也达到丰满该区域的目的。充值 和余额尽可能不要放置在一起,避免强制消费嫌疑,放置左下角比较谦和。按钮经视觉优化后,用户也能轻易找到。Icon搭配 文字描述,会提升用户对该区域的关注度,比单一的icon也更有信息传达力。修改意见图对于使用爱学币的用户,会对帐号有一定的忧虑,借鉴360安全意识。在此处用等级来提示用户将密码设置强壮。并在设计上消除了用户对账户隐患的担心。
    • 7. 登 录此处标签页切换方式不够温和即时,较显生硬。Point:此处的三个标签是有一定点击率的,用户会根据自己情况考虑分类模式进行切换。所以在切换的过程中视觉呈现和用户期盼结果应该是即时的,不应该有刷新等待的时间产生。希望在技术实现和商业SEO上进行合适的权衡定夺。英语
    • 8. 登 录Point:前期课程的数量不够多,所以采用了较分散布局,行列之间都有教大空隙。后期的版本设计中,课程应该考虑table呈列 信息。在设计上通过深浅背景颜色来区分阶段类别。(以上颜色只为演示不做设计参考)英语为什么这里是空白的?在数据堆中留空容易误导用户数据缺失不严谨。老师的头像切割抠图应该处理好,把握好细节并居中。背景色块可用圆角,直角太生硬。
    • 9. 登 录Point:1、改进了课程名称布局,将“试听”合并到课程栏,为了便于用户无视觉阻扰汲取课程内容,将试听颜色弱化,并横向排列。2、调整字段顺序:将“适用年级”和“老师”重新排序,将常规关注度高的字段位列靠前。3、视觉上有按钮倾向的“已报名”提醒做了样式调整,并在“报名栏”改变按钮状态。4、学费单列出来。5、增加鼠标移动至信息行时的背景色标识。英语筛选与数据没有较大视觉联系,操作类型较少,改进后和title缝合。但会增加一部分低网龄用户学习成本。而且在筛选方式上也需进一步优化。改进 设计稿
    • 10. 在说下面的体验问题前,不妨先来看一个生活实例用户体验 不仅仅只在网络, 更多源于生活。
    • 11. 盲道是为盲人提供行路方便和安全的道路设施。盲道经由两类砖铺成: 条形引导砖,引导盲人放心前行,称为行进盲道; 圆点的提示砖,提示盲人前面有障碍,该转弯了,称为提示盲道。 个人观察,天河大部分盲道都和这里一样。 全无用户体验可言。照片摄于员村二横路1、功能滥用。圆点提示砖泛滥,盲人无法根据脚底感知判断是直走还是转弯。此功能形同虚设,而且造成行路负担。 2、资源浪费。左右两条盲道是否只需一条,而且不应设置在站台人群拥挤的候车带,避开不用盲道的用户。 3、原型不严谨。因为没有前瞻规划,后期二次开发过程中,让用户的操作路径变复杂,而且体验极差。为了一棵树让用户走更多路,做更多的判断。盲道体验综述
    • 12. 那么对于还处在成长学习阶段的爱学网,我们是不是也在上述三点犯错了呢^-^努力向目标改进, 离我们成为中国首家最大中学生个性化 在线自主学习平台 一定不远!!!
    • 13. 登 录广告建议不要放置在此处, 会很大程度上干扰并分散用户的私密操作。 我的课堂可着重展现收藏、学习中、或推荐课程信息, 以及学习计划等。 建议:我的课堂可营造出类似现实中 学生下课后及课堂外 个性化的自主学习氛围。 譬如问题提交、信息采集、知识点整理、考试相关讯息了解。 功能上应该让签名、头像定义、修改密码、账户信息等更直观, 常用设置链接不要藏得太深。 功能放置 不合理
    • 14. 登 录英语课程介绍页面下方的推荐搭配与购买课程的费用堆砌在一起,主次混搭严重阻碍了用户购买课程的流程。目前的推荐让用户有强硬推销的感觉。 价格的颜色上不要都用红色,这里除了用户购买的课程和下方的合计金额标红外,其余用黑灰色即可。防止视觉干扰,权重信息焦点太多。功能放置 不合理
    • 15. 登 录Point:CSS虽然能够模拟出表格,但是当CSS没有加载时,就是一堆没有结构化杂乱无章的数据了,应该考虑用table来展现 数据,优点有两,一是结构化(数据清晰,便于维护)、二是语义化,优点最明显的是利于搜索引擎优化。和css结合后,代码量会比DIV UL更少,而且易于理解。英语源 代 码阶段分类、课程列表、难度分类、三者源码结构都采用冗长的DIV和UI,而没考虑使用更擅长数据表现的table架构。切记一竿子打死。Table在数据的结构化、语义化都比DIV有优势,更利于SEO。且节约代码资源量。 相关知识阅读 淘宝UED 《给这个web标准时代做个表格》http://ued.taobao.com/blog/2006/12/28/web_css_table/资源 浪费
    • 16. 登 录英语核对订单原型需优化对于已经有支付习惯的用户,会比较排斥这里的爱学币支付,甚至会有支付疑惑。可酌情考虑对无爱学币用户隐藏该栏,或者将其与下方的结算信息合并。避免干扰并占取界面。网银在线作为第三方支付平台,将用户熟知的网银都隐藏在自己的网站中,为了避免用户查找困惑和认知困难。很可能用户会认为网银在线是一种支付方式,而非平台。那么当他看不到工行、农行的icon时,可能就抱怨我们提供的在线支付很少了。建议将各银行icon提取出来。如右图。
    • 17. 因对比内容较多,图片较大,您可将图片另存后用看图工具查看:) 另补足说明2点,1、邮编是必填项,而很多家长和同学对邮编不清楚,可能会乱填,或自行查找,这里可以做温馨的提示,譬如当用户上方输入地址后,此处可自行联动。2、因为我们产品的特殊性,需说明为什么要填写收获地址。填了有何用。原型需优化
    • 18. 原型需优化根据当当网优化结算信息栏如下: 1、返回购物车放置右方,因为用户习惯将指针放置右方,此处操作区域也基本都在右方。 2、应付总额用红色标识,并放大至14px,其余勿用红色。以妨干扰。 3、学习当当,在右上方添加学案及包裹大致送至时间。减少用户咨询业务。 4、提交按钮视觉优化,修改成温馨愉悦的橙色。
    • 19. 登 录英语核对订单成功提交订单报名提交成功页面信息量虽少,但是都是重要信息,而且该步骤直接影响到用户有无兴趣完成支付动作。所以这里应该对界面做温和的设计,可酌情添加温馨舒适的icon。 对学案的送抵日期给出一个大概天数。用活“预计”这个字眼^-^爱学网当当网
    • 20. 登 录英语核对订单成功提交订单报名成功除了这里引导用户去我的课堂外,整个页面并没有明示刚购买的课程放置在何处了。如果关闭该页面后,找不到课程,会造成低网龄用户的不安惶恐。广告、活动、建议放置在框外,不要与报名成功信息堆挤在一起。支付的三步流程应该在纯净无干扰的页面下完成。避免其他元素喧宾夺主,影响用户支付。原型需优化
    • 21. Thank You!欢迎各位领导和同事, 对我PPT的展现方式 提出更好的意见。 让我们一起为产品的 用户体验提升到新品质而 努 力