今日的应用市场,几乎每一款应用都具备教学覆盖层(一般是一层透明层,用来指引用户操作),或者,在初次运行应用时,提供操作教程。但实际上,用户对这种教学设计并不感冒,经常挥一挥手,就快速略了过去,看都不看一眼。那么移动应用的教学设计怎样才能行之有效呢?怎样才能在不干扰用户的情况下,巧妙的指出应用的一些特色功能呢?请看本文,提供了很多帮助性建议,通过教学,让用户更深入的了解应用。
1.简短、专精
没人愿意阅读使用手册,因为感觉很麻烦。用户是个矛盾体,既希望不阅读教学指南,又希望能够快速、高效的操作,完成任务。虽然说不阅读教学指南也能完成一些基本操作,但是一些高级操作,还是需要一定的学习成本,一旦学会之后,用户的操作效率会更高。
快速阅读时代,人们的耐心都很差,没人愿意去阅读,手机用户的情况尤为严重,他们不愿意阅读超过2页的内容。而且还有一点:进行手机操作时,用户会经常分心。
即便用户打算阅读操作指南,他们也不希望看到太多内容。内容太多,会导致用户的认知负担。在很多应用的设计中,用户教学作为覆盖层而存在,这样用户就无法边学习,边练习操作了。用户只能去死记硬背,面对繁复的操作指南时,效果往往不佳,原因是短期记忆贮存不了多少信息,而且短期记忆只会在大脑中保存20多秒。因此,用户教学时,倘若一次只传授一种交互方式,收效会好得多,用户能更好的记忆、实践。
反面教材:
Morningstar iPad 应用: 这款应用的教学设计没有做到专一,覆盖层中教学标记展示出了几乎所有可能的交互操作,然而,用户看到这样的界面会很烦,而且很多操作不用解释用户也能明白。(例如点击文章链接来获取全文。)
Mixer应用:同上,繁复、不简约。
Instafocus:估计用户看到了会疯
设计师需要减少每次教学中,教学指示的数目,这样用户就能更专心的学习一种操作。同时要减少文本字数,用户倾向于阅读字数较少的内容。当然,有时候提供文字指示不如教学动画来的实在,人类具有模仿天性,会模仿教学动画中的操作,这样就能更好的理解交互。
正面教材:
YouTube 安卓应用的每个教学标记都只提供一种交互教学。 一次一个,直到用户完全掌握
YouTube安卓应用:一次只教一种交互,减少文本数量,这样用户更乐意去尝试。
Secret for iOS的用户教学
Facebook Paper的用户教学
简短、专精的教学设计,让用户觉得轻松越快,更乐意接受教学内容。
2.不要连环式教学
第一条讲的是用户教学应该“短”、“平”,通俗易懂,那是否应该“快”呢?不应该!很多应用的教学设计确实很简短,但是却采用了连环教学的方式来“轰炸”用户(一些低劣的设计,每一步还带有界面切换,让用户无所适应),频繁的、多步骤的用户教学,让用户不胜其烦。
这种多步骤、连环式的教学,不但用户无法有效记忆,而且还会让用户感到应用的复杂性,新用户会望而生畏。
反面教材:
Makr iPad 应用中,每一次的用户教学都是连环式、系列性的。这种教学模式的弊端很明显:用户第一步还没学好,记牢,你就展开下一步。教学肯定是徒劳。
Makr iPad 应用: 一系列的教学导致了用户的记忆负担,用户在使用应用前,还必须阅读这些教学步骤,“强奸”了用户。
而且,Makr的教学指导是纯文字性的,还不是视觉性的。用户根本无法短时间消化这么多知识。
Foodspotting应用:这是我见过最糟糕的用户教学设计
3.尽可能使用视觉指引
文字性的介绍和视觉性的指引能够让用户更好的理解内容。
文本要简短、要容易理解,不要像Makr那样长篇大论。只介绍功能、怎么操作即可,不要说其他和用户操作无关的事情,用户需要有用的信息。
使用视觉来指引用户,效率更佳,而且能够减少叙述性的文字,一石二鸟。
在下面这份Makr应用的重设计提案中,主要操作通过“图像+简短文本”的形式展现。用户能够迅速理解教学内容,进而选择功能进行练习。不过这份重设计还是不完美,依然具有连环式教学;而且弹出式窗口,也会让用户感到非常烦扰。
正面教材:
Makr iPad 应用的重设计提案: 简单的模态窗口,提供了视觉图像和文本,让用户能够更好的理解教学内容。
Wunderlist应用:视觉指引+简短文本
Rent the runway的教学覆盖层:简单有力
Eyeem的用户教学:
Feedly的用户教学
4.教学覆盖层和常规界面,在视觉风格上要有所区别
必须让用户有效区分,何为教学,何为实际界面。很多用户教学的设计,就没有做到这一点,教学覆盖层和真实界面设计的差不多。用户在观看用户教学时,甚至去尝试操作,因为他们没有意识到这是教学部分。
为了突出区别性,教学覆盖层中的元素可以使用与主界面完全不同的字体、颜色。字体和图形可以使用手绘风格,以凸显“教学”意味。
反面教材:
Wimbledon应用做的就很失败,教学覆盖层做的太亮了(一般教学层采用暗色),用户没有意识到这是教学指引,而是当成了界面来操作。
Wimbledon iPad应用:失败案例, 与真实界面无区别的教学覆盖层
在iPhone的Ness应用中,教学覆盖层的字体和分享界面中字体差不多。这就导致了一定程度的混淆。
Ness iPhone 应用:失败案例,教学覆盖层和分享界面区别不大
正面教材:
Pocket应用:
Youtube安卓:
Googlemaps
来源:ICONFANS
xueui.cn 学ui网发布高质量ui设计教程和设计分享,希望打造一个最好的ui学习教程平台!QQ群:36013311