分享

从e-learning到iPad:如何设计用户界面

 wendao82 2012-04-09
从e-learning到iPad:如何设计用户界面
E-Learning世界网 | 时间: 2011年08月02日 | 文章来源:SADA Systems

  开发可在iPad上运行的培训资源日益成为一种趋势。虽然这种呼声很高,但目前缺少相应的操作标准。感谢教学设计的同仁们辛勤工作,为我们提供了一套可供参考的规范(当然必要的时候也需进行要改造)。总之过去十年里,我们有很多在其他教学媒体上经过检验而可靠的原则可以借鉴,比如E-Learning

  已经有很多文章讨论了在线教学的有效性。但在本文中,笔者只涉及一个话题:界面设计。有效的界面对于在线教学有着非常重要的意义,它通过导航和定位设计(例如标题和屏幕标识),在屏幕自然流畅转换的同时,让用户自始至终地知道自己在整个过程中的所有活动轨迹。

  有效设计iPhone或iPad界面,需注意的五个问题

  如果你打算将设计对象从已有的e-learning转移到iPhone 或iPad上(或者你是个设计菜鸟),那么关于界面设计,有一个很严肃的问题值得你思考:我们该如何设计一个移动学习程序,使得界面简洁易懂,而且突出了学习过程而不是干扰它?

  有效的界面设计意味着,在某个时刻你需要确定哪些是需要呈现的,以及哪些是需要有所保留、不强调及模糊处理的。根据行业标准(例如Jakob Nielsen的设计原则),当你在做移动学习程序的设计时,要保证用户能够回答以下五个问题:

  我身在何处?

  通过清晰的标题和副标题,以及已经点击过的、被强调的菜单项(改变颜色或者附加的标签),可以回答这个问题。

  我是如何到达这里的?

  你可以用可视化的路径呈现不同的内容组成部分。例如,突出菜单中已经点击过的区域,或者在当前窗口中打开一个新的视窗,或者用“面包屑”导航的方式,线性地呈现几个屏幕内容的操作过程。

  我如何返回上一步?

  通过导航的链接,在不同学习单元之间移动。有一些全局性的导航菜单在整个课程中都会出现,还有一些界面要提供返回按钮或者菜单按钮。简单的屏幕点击也能唤出附加的导航选项。

  我已经走了多远?

  屏幕的标记号例如“第2屏,共24屏(Screen 2 of 24)”就能告诉用户已经走了多远,以及更重要的是,还剩下多少没有学习。请克制使用“页(page)”这个词,例如“第3页,共15页”。因为“页”是书本中的术语,而“屏”才表明你提供的是在线内容。

  我还可以去哪里?

  导航按钮如果标号清楚、放置的位置便于使用,就能在整个移动学习内容中充当好定位工具的角色

  真实的Apps案例

  下面抓取的屏幕内容是为了举例说明以上5条设计原则,图片中的移动学习内容可以从iTunes的参考信息或者苹果网站的教育栏目中获得。笔者随机选择这些内容的目的是:分析这些屏幕设计能否回答以上五个问题。为了专注于界面设计本身而不是被内容所干扰,笔者甚至故意选取了一些自己不懂的语言。 

 

 案例 1.哲学

1.我身在何处?视频左上方有一个屏幕标题,下拉菜单的正下方,有一张与之对应的、模糊处理的图片。

2.我是如何到达这里的?点击名为“Capitulos”的按钮,从下拉菜单选项中选择一项点击。

3.我如何返回上一步?再次点击菜单按钮,选择其他的选项。

4.我已经走了多远?从这个屏幕看,很难回答。

5.我还可以去哪里?可以点击菜单按钮,或者右上角的信息按钮。这个比较容易做出判断。

经验总结:保持界面简单,减少需要用户做出决策的时刻。每一屏的标题要与导航菜单的标题保持完全一致。

 案例 2.斯德哥尔摩文化

 

1.我身在何处?无法回答。这段内容更像是一本书,但至少需要一个章节标题。

2.我是如何到达这里的?点击左上角的书的图标。该图标只有手指接触屏幕以后才会出现,而且看起来它已经处于被按下去的状态了。

3.我如何返回上一步?点击已经被按下去的书的图标,可以返回其他的章节;或者通过触摸屏幕返回页面。

4.我已经走了多远?页顶的正中间显示信息为“148页,共248页”。这个信息非常重要。

5.我还可以去哪里?点击书的图标,可以选择其他章节。

经验总结: 如果你设计的学习内容以书的形式出现(最近使用这种形式的趋势在增长),那么至少应该包含一个章节标题、过程信息 (第×屏,共×屏). 按钮的设计应该能显示出它是被按下的状态或被触摸过的状态。

 案例 3.商业及金融学

 

1.我身在何处?无法回答。这段内容更像是一段促销宣传。应该让用户能够快速地分辨正在浏览的内容。

2.我是如何到达这里的?在主屏幕上点击了“测试”按钮。

3.我如何返回上一步?一开始,没有看到中止测试的按钮,因此笔者认为返回主页面唯一的路径应该是关闭这个程序。后来正好看到了“中止测试”按钮。如果给一个直观的标签,比如主菜单,效果会好得多。

4.我已经走了多远?可以看到页顶中间有“第5步,共34步”(为什么不用“问题”,而用“步”),说明已经完成了五个问题。

5.我还可以去哪里?点击“View Descriptio”按钮或者蓝色区域,可以得到弹出窗口。

经验总结: 应该给所有的屏幕都设计一个返回按钮或者主菜单选项作为全局导航,同时使用直观的标签。应预留80%的空间以呈现内容,20%的空间用作导航。但在此案例中,与内容相比,导航占据了太多空间。必须将重点放在设计良好的内容上,同时做到导航简洁易懂,不干扰学习过程。

 案例4. Java

 

1.我身在何处?页顶可看到标题为“Variables”。

2.我是如何到达这里的?从一个庞大的菜单选项中选取的。

3.我如何返回上一步?可以很方便地点击“Select a topic”按钮,已经选中的部分高亮显示为蓝色,有助于进行其他选择操作。

4.我已经走了多远?不清楚。很难判断已经完成了多少内容,以及所隶属的上级内容是什么。

5.我还可以去哪里?可返回选择“Select a topic”并进入其他内容,或者点击向右箭头打印,或者选择齿轮进行设置(比如字号),或者选择向下箭头查看该公司的更多程序。

经验总结:每一页的标题与导航菜单中的名称完全吻合,这是明智的。如果菜单太长,则需要进行较好的层级设计以增加视觉吸引力。在本例中,菜单共有三个层级,第一级为罗马数字,第二级是阿拉伯数字,最后是A, B, C,等。如果对子层级使用锯齿状缩进设计效果会更好,至少第三个层级可以用这个方法。为了降低学习者的心理负荷,也可以考虑用折叠的菜单方式,第一步显示主菜单,选中了主菜单之后才打开相应的二级菜单,以此类推。本案例中的菜单更像是一个目录,不易控制且缺少亲和力。

 案例 5. 其他

 

1.我身在何处?屏幕正上方有一个标题。

2.我是如何到达这里的?点击主界面时,看到了六种不同的书或者手册。

3.我如何返回上一步?点击左上方的按钮,是一个返回按钮。

4.我已经走了多远?不清楚。

5.我还可以去哪里?使用底部的箭头,可以实现页的翻动,或者点击左下角的菜单按钮查看其它章节。使用右上角的按钮可以标记书签,使用“Favorites ”按钮可以随时查看标记了书签的页面。

经验总结:标记可视化过程。我们应该努力寻找到一种方法,它既能标识屏幕序号和章节,也能标识出整个课程或内容的过程。对许多学习者来说一个令人失望的事实是,在线空间就像是物理定位:那感觉就像是你走进了一个杂货铺,你可以分辨出曾经接触过的物件有多少,但是更多的东西却有待你去发现。学习者对教学内容数量的“感受”,是所有教学设计人员需要研究的领域。

  从上面的例子中,你可以看到,有一些案例可以解决全部的五个问题,但有些却不能。即使某个设计并不能回答这五个问题,也并不意味着这个设计有问题。记住:对于设计来说,没有最佳方案。最终的界面设计就是在允许的时间、资金、内容类型、学习者特征以及专业设计人员之间取得平衡。

  一旦你决定开始界面设计,先评估一下设计条件是明智的。你可以召集一个5-8人的用户组(研究表明超过8个人就是多余的),要求他们使用你的设计成果,并根据以下行为记录他们的操作过程。

                                有效移动终端界面设计的条件

完成任务的时间

与专业用户相比,相对有效性如何

学习使用导航系统的时间

用于纠正导航错误的时间

  重复直至大功告成

  记录用户对五个问题的反馈,并重复测试:即召集另一个5-8人的用户小组,按照上面的同一标准,对他们的过程进行跟踪和测试。一直重复这个过程,直到你对过程和反馈都满意为止。

  如果你已经在从事移动学习程序的开发,请不要放过任何精细研究的机会。一定要克制把电子化的内容装入到App外壳就完事的做法。只有这样,我们才能避免浪费了移动学习程序作为教学媒体的潜力。


作者:在线教育资讯常慕樵编译

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多