【案例分析】尼尔森十大可用性原则
尼尔森十大可用性原则是作为设计师在学习中必须学习的原则之一,指导我们的设计能为用户提供可用、易用的界面,或者在设计走查中作为参考原则,来辨别我们的设计方案是否合理。本文通过案例分析(个人感兴趣的APP)——好好住,来分析和说明尼尔森十大交互原则在APP设计中是如何使用的。
尼尔森Jokob Nielsen是一位人机交互博士,在1995年1月发表了《十大可用性原则》。这项原则已已发表20多年,是交互设计学习中必学原则之一。作为设计领域中的经典原则,具有一定的可借鉴性。
一、系统状态可见原则 Visibility of system status
系统应该在合理的时间内通过适当的反馈,始终让用户了解正在发生的事情。
系统的可见状态可分三个部分:
1、 用户知道当前所在的位置 :系统导航栏、toast、加载进度等;
2、 用户知道当前可操作部分和该如何往下一步 :控件如按钮可被操作的视觉提示;
3、根据用户的操作后, 系统及时向用户反馈效果 :如下拉刷新、提交成功、等待时的趣味动画等;
案例 :看图页面--选择家具标签筛选相应的图片--点击图片进入详情页
导航栏上显示上一步显示过的标签,让用户能定位自己所在的图片频道属于哪些标签。
案例 :a.内容发布成功,弹出toast提示,比提示已加积分(积分对于用户有价值);
b.发布过程中,显示正在上传的进度;若发布失败,提示状态并提供解决方案;
二、环境贴切原则 Match between system and the real world
系统应该说用户的语言,用户熟悉的单词,短语和概念,而不是系统导向的术语。遵循现实世界的约定,使信息以自然合乎逻辑的顺序出现。
系统所用的图标、语言等元素的表达需要:
1. 符合真实世界的惯例
2. 符合用户的心理预期、语言使用习惯和思考逻辑等
3. 还可以符合用户的身份特性 :年龄、职业,所处环境等
简单来说就是要让用户方便清楚知道一切信息。
案例: a.根据目标用户和好好住平台的特性,用户的个人徽章与家居相关,如“收纳能手”“家务能手”等,符合用户对自己的期望值,也能促使用户去争取徽章,取得成就感;
b.用户根据自己的需求选择与家居装修相关部位的内容,“装修前-中-后”的分类符合用户装修过程所需的知识;内容的分类也使用对应的插画,如“厨房装修‘使用的是厨房部位的插画,与用户的真实环境相呼应;
三、用户可控原则 User control and freedom
用户通常会错误地选择了系统的某个功能,并且需要一个明确标记的“紧急出口”来离开不想要的状态,而不必进行扩展对话。支持撤销和重做。
1. 用户控制操作的自由性
2. 当操作错误时,用户有权利撤销和重做
案例 :a.用户可自定义上传图片的顺序;
b.用户在发布家居文章内容时,可以根据自家实际情况”添加空间“等;
四、一致性原则 Consistency and standars
在系统中的语境、视觉语言、反馈等都需要有统一的规则,避免因为混乱让用户感到迷惑和不习惯。
案例 :a.同一模块中的icon使用一致的设计语言;
b.运营类图片也使用一致的设计语言,避免混乱的设计风格对用户造成视觉负担;
五、防错原则 Error Prevention
尽量在用户操作错误前,能防止错误的发生。可通过:
1.不可点击、不可操作的内容, 通过图标样式提示,颜色置灰等形式
2. 通过文字提示、Tips提示 等提前告知用户需要注意的地方
3.当错误操作容易造成较大影响时,需要 二次确认 ,防止用户误操作
案例 :a.当商品售罄时,购买按钮变为不可点击状态;
b.当优惠券失效时,显示相应状态,告知用户不可领取;
案例 :a.用户编辑文章时,需要填写较多内容,为避免中途退出对用户造成影响,可自动保存用户已填写的内容,并二次确认是否离开编辑页面;
b.好好住限制用户昵称30天只能修改一次,需要在修改页面用文字提示告知用户;当用户修改后保存新昵称,弹出对话框让用户确认是否修改;
六、易取原则——识别比记忆好 Recognition rather than recall
通过使用对象、动作和选项的可视化表达,最大限度地减轻用户的记忆负担。(跨设备)
1.系统的信息、组件控件、选项可视化,可降低用户的记忆负荷
· 选项、动作可视化 :显示已选内容
· 为用户保留查看、搜索记录
·用户编辑较复杂表单时,可随时查看已编辑内容, 预览效果 ,防止用户忘记已填写内容
· 当切换下一页面时,可显示上一页面的关键信息 ,让用户清楚知道当前状态或相关性
2. 系统的帮助文档可见易取 ,方便用户随时查看
案例 :a.用户编辑文章时,可随时预览效果,查看自己文章的实际情况;
b.好好住鼓励用户发布文章或内容,所以为用户已编辑未发布的内容保存在草稿箱,用户可编辑或删除;
案例 :好好住推出商城功能模块,提供相关说明,既能加深用户对商城的信赖度,也能让用户查看在商场购买得到的权利和保障;
七、灵活高效原则 Flexibility and efficiency of use
好的产品需要同时兼顾新用户和资深用户的需求。对新用户来说,需要功能明确、清晰:对于老用户需要快捷高效使用高频功能。不可迎合某一种用户,把不必要的信息占据重要部分。
1.中级用户的数量远高于初级和高级用户, 为大部分用户设计
2. 根据用户当前所在场景或要完成的任务,设计合适的流程和操作交互 ,帮助用户快速达到目的
3. 用户可定制自己需要的内容或功能
案例 :a.好好住的中级用户大部分为已发布过文章或图片的用户;当用户发布经验话题时,可从自己已发布过的图片中选择,可以快速定位到自己想要的图片,减少选择图片的步骤,提升了使用体验;
八、优美简约原则(易扫原则)Aesthetic and minimalist design
不要包含不相关或低频次的信息/操作。页面中的每个额外信息都会降低主要内容的相对可见性。
用户习惯于“扫”而不是阅读信息,为了让用户快速获取有用信息:
1. 去除不相关的信息
2. 增强信息层级显示 :突出重要信息,弱化次级信息
案例 :通过文字的大小、字重、颜色、位置等表现信息层级,主次分明的信息层级能向用户传达有效的信息;
九、容错原则 Help user recognize,diagnose and recover from errors
帮助用户识别、诊断错误,并能从错误中恢复:
1. 用户已删除的内容,提供机会可恢复至原样
2. 不仅是提供报错信息,还可以提供相应的解决办法
3. 帮助用户将损失降至最低
案例 :加入黑名单属于消极性操作,且对用户造成一定的影响,当用户操作时,需要二次确认是否操作;且加入黑名单后,用户有机会能解除黑名单;
十、人性化帮助原则 Help and docementation
适当提供帮助文档,帮助用户在需要的时候获得帮助
1. 根据用户当前的任务或所处操作流程,适当提供帮助文档
2. 系统常规帮助文档,用户可随时查阅
为了方便记忆和应用,可按照以下规则分类和记忆:
·与信息呈现相关:
1.环境贴切原则 :信息的表达需要符合真实世界惯例,用户的心理预期和习惯等;
2.易取原则 :信息可视化,降低用户记忆符合
3.优美简约原则 :明确的信息层级帮助用户高效获取信息
4.人性化帮助原则 :适当的信息提示帮助用户获得帮助
·与用户操作和系统反馈相关:
5.用户可控原则 :用户操作自由性 灵活高效原则:帮助用户高效完成任务,达成目标
6.灵活高效原则 :帮助用户快速高效达成目标;
7.防错原则 :适当的提示防止用户造成错误;重要操作需要二次确认;
8.容错原则 :用户可撤销、重做,恢复至原样;
·与信息呈现和操作反馈都相关:
9.系统状态可见原则 :用户知道当前所在位置,可操作和系统反馈的视觉提示;
10.系统一致性原则: 视觉语言和反馈效果一致性;
通过分析整理之后,对尼尔森十大可用性原则的理解和记忆更深刻了。自己总结案例分析是一项好办法。
绛旓細浠婂ぉ涓轰綘浠嬬粛鐨勫師鍒欐潵鑷叏鐞冪煡鍚嶇殑UX鍏徃璇烘浖路灏煎皵妫泦鍥,杩欎簺鍘熷垯涔熻绉颁负鈥灏煎皵妫崄澶у彲鐢ㄦ鍘熷垯鈥濄備竴.绯荤粺鍙鎬у師鍒(Visibility of System Status)杩欎釜鍘熷垯鏄,绯荤粺闇瑕佸強鏃跺憡鐭ョ敤鎴风幇鍦ㄥ彂鐢熶簡浠涔,甯姪鐢ㄦ埛浜嗚В褰撲笅鐨勬儏鍐,鍙婃椂鍙嶉銆傝鎸佺画涓嶆柇鍦颁负浣犵殑鐢ㄦ埛鎻愪緵淇℃伅,鍛婅瘔浠栦滑鐜板湪璧板埌浜嗗摢涓姝,璁╀粬浠簡瑙h嚜宸卞湪...
绛旓細鐣岄潰璁捐鏂归潰锛岄伒寰灏煎皵妫崄澶у彲鐢ㄦ鍘熷垯锛屽熼壌鎴愮啛骞冲彴濡侴oogle Analytics鐨勫竷灞锛屼繚鎸佺畝娲侀珮鏁堛傛妧鏈璁$殑鏍稿績鍦ㄤ簬鏉冮檺绠$悊锛屼互RBAC鐞嗚涓哄熀纭锛岀‘淇濇暟鎹ā鍨嬩笌鍔熻兘鏉冮檺鐨勭簿纭搴旓紝浠ユ敮鎸佸鏉備笟鍔″満鏅傛渶鍚庯紝鎴愬姛鐨凚绔笟鍔$郴缁熻璁¢渶瑕佷骇鍝佺粡鐞嗗叿澶囨繁鍘氱殑鍟嗕笟鐞嗚В銆佷紒涓氭灦鏋勭煡璇嗗拰鎶借薄寤烘ā鑳藉姏锛岃繖鏄竴涓笉鏂...
绛旓細5W2H鍒嗘瀽娉曞垯鏄竴绉嶅疄鐢ㄧ殑闂椹卞姩宸ュ叿锛岄氳繃鎻愰棶寮曞鎴戜滑鍙戠幇闂鍜屽垱鏂拌璁★紝璁╀骇鍝佹洿鍏锋搷浣滄у拰鏄撶敤鎬с傝孎ogg琛屼负妯″瀷鎻ず浜嗚涓烘敼鍙樼殑绉樺瘑锛屽姩鏈猴紙Motivation锛夈佹墽琛岋紙Ability锛夊拰瑙﹀彂锛圱rigger锛変笁瑕佺礌鑱旀墜锛屽奖鍝嶇潃鐢ㄦ埛浣跨敤浜у搧鐨勪範鎯傝繘涓姝ワ紝灏煎皵妫崄澶у彲鐢ㄦ鍘熷垯鏄骇鍝佽璁$殑榛勯噾鍑嗗垯锛屽鐘舵佸彲瑙佹с...
绛旓細灏煎皵妫鐨鍗佸ぇ鍙敤鎬鍘熷垯锛屽涓鑷存с侀槻閿欏拰浜烘у寲甯姪锛屾槸鎻愬崌浜у搧鏄撶敤鎬х殑鍑嗗垯锛汼MART鍘熷垯鍒欐暀浣犲浣曡瀹氭槑纭佸彲琛¢噺鐨勭洰鏍囥備粠瀹為檯鍑哄彂锛孭DCA寰幆鍜孉ARRR澧為暱妯″瀷鎸囧浣犵鐞嗙洰鏍囧拰鎺ㄥ姩鐢ㄦ埛澧為暱锛孲TAR娉曞垯鍦ㄩ潰璇曚腑灞曠幇浣犵殑闂瑙e喅鑳藉姏锛岃屾紡鏂楁ā鍨嬪拰RFM鍒嗘瀽鍒欏姪鍔涗綘鐨勮惀閿绛栫暐銆傜敤鎴峰垎绫伙細閫氳繃棰戠巼銆佹秷璐...
绛旓細3.3 灏煎皵妫彲鐢ㄦу崄澶鍘熷垯 閫傜敤鍦烘櫙锛氫骇鍝佽璁′笌鐢ㄦ埛浣撻獙璁捐鐨勯噸瑕佸弬鑰冩寚鏍囥1锛塚isibility of system status 绯荤粺鍙鎬у師鍒 2锛塎atch between system and the real world 鍖归厤绯荤粺涓庣湡瀹炰笘鐣岋紙鐜璐村垏锛3锛塙ser control and freedom鐢ㄦ埛鐨勬帶鍒舵у拰鑷敱搴︼紙鎾ら攢閲嶄綔鍘熷垯锛4锛塁onsistency and standards涓鑷...
绛旓細 浜烘満浜や簰浜斿ぇ鍘熷垯 Web鐣岄潰璁捐鍏ぇ鍘熷垯 浜や簰璁捐涓冨ぇ瀹氬緥 灏煎皵妫崄澶у彲鐢ㄦ鍘熷垯 鏍煎紡濉斿師鐞 鏃犻殰纰嶈璁 寰俊灏忕▼搴忚璁″師鍒 ...
绛旓細褰撻渶姹傚拰鐩爣鏄庣‘钀藉疄鍚庯紝鎺ヤ笅鏉ユ垜浠氨闇瑕佸垎瑙h繖浜涘叧閿洜绱狅紝鍐嶄緷渚濆緱鍑鸿В鍐虫柟妗堛傚彲浠ラ氳繃鍒涢犲姩鏈烘潵鍒烘縺鐢ㄦ埛鍘讳娇鐢ㄣ佹帓闄ゆ媴蹇ц鐢ㄦ埛瀹夊績鏀惧績銆佽В鍐抽殰纰嶈鐢ㄦ埛浜彈涓濇粦鑸殑浣撻獙銆備笉鐒剁敤鎴峰嚟浠涔堜娇鐢ㄤ綘鐨勪骇鍝侊紵閭d箞鍙堝浣曞幓璇勪环瑙e喅鏂规鏄惁鍚堥傚憿锛熻繖閲屽彲浠ュ弬鑰灏煎皵妫崄澶у彲鐢ㄦ鍘熷垯锛孠ANO妯″瀷 鎺ヤ笅鏉ユ槸涓嶆槸鍙互...
绛旓細涓嶈繃,瑕佹兂璁捐鏈浣充綋楠岀殑閿欒淇℃伅,鏂囨鐨勯噸瑕佹т篃鏄樉鑰屾槗瑙佺殑,闇瑕佸湪瑷绠鎰忚祬鐨勫悓鏃跺弸濂藉湴甯姪鐢ㄦ埛瑙e喅闂銆 10鏉″彲鐢ㄦу惎杩(缁忓吀鐨灏煎皵妫崄澶у彲鐢ㄦ鍘熷垯)涓缓璁,瑕佹竻鏅颁紭闆呭湴琛ㄨ揪鍑洪敊璇俊鎭傛湁鏁堢殑閿欒鎻愮ず搴旇鎻愪緵濡備笅淇℃伅:鏄庣‘琛ㄨ揪鍙戠敓浜嗕粈涔堟弿杩扮敤鎴峰簲璇ュ浣曞簲瀵瑰敖鍙兘澶氬湴淇濈暀鐢ㄦ埛杈撳叆鐨勪俊鎭 涓嬮潰鏄枃妗堣璁$殑...
绛旓細鑰屾垜瑙佽繃鐨勬瘮杈冪粏鑷淬佷釜浜烘瘮杈冨枩娆㈢殑鐢ㄦ埛浣撻獙璇勪环鏂规硶鏄 Web鏄撶敤鎬уぇ甯 Jakob Nielsen鎻愬嚭鐨勪竴浜涘彲鐢ㄦх殑鏍囧噯,涔熻绉颁负鈥灏煎皵妫崄澶у彲鐢ㄦ鍘熷垯鈥濄傛棤璁烘庢牱鐨勭敤鎴蜂綋楠屾柟娉曢兘鍙互浣跨敤杩欑鍙敤鎬у師鍒欒繘琛屾楠屻 鎵浠ヤ笅闈㈠氨浠庤繖涓搴﹀嚭鍙,鎺㈣鍦ㄨ繖涓鏋朵笅,鎴戜滑瑕佸湪鐢ㄦ埛浣撻獙鏂归潰杈惧埌鐨勭洰鏍囥侸akob Nielsen鏄粠Web璁捐鐨勮搴...
绛旓細鍙兘鏈夊緢澶氶珮绾у姛鑳斤紝绐佸嚭楂樻晥鏄撶敤锛屽鑷存槗瀛︽ф墦鎶樻墸銆侰绔骇鍝佷竴鑸冭檻缁濆ぇ閮ㄥ垎鐢ㄦ埛浣跨敤鍦烘櫙鍜岃瘔姹傦紝楂樼骇鍔熻兘浼氱浉瀵瑰皯鐐广傜獊鍑烘槗瀛︽с傛墍浠ュ湪鍒跺畾璁捐鐞嗗康鏃讹紝鍙牴鎹洟闃熷疄闄呮儏鍐垫潵璁捐鍒跺畾銆俉eb绔璁¤鑼冧箣璁捐鍘熷垯绡囷紱璁捐鍘熷垯鐩墠宸茬粡鏈夊緢澶氾紝渚嬪灏煎皵妫鐨鍗佸ぇ鍙敤鎬鍘熷垯銆佹牸寮忓鍘熷垯銆佸墐鍒娉曞垯銆佽垂鑼ㄥ畾寰...