UX,用户体验与前端开发的关系

·  阅读 1151

一、什么是UX?

UX和UI是一个东西吗?

不是,UI指的是用户界面,交付的仅仅是用户在产品上所看到的界面;UX则更关注用户对产品的体验感受,确保产品逻辑通顺,UI可以说是UX的重要部分,但UX绝不仅限于UI。

1.0 UX的组成

用户体验(User Experience,简称UX/UE)是一种纯主观的,在用户使用产品过程中建立起来的感受。

  • Look - 产品的展示(色彩、声音、图像、文字内容、网站布局、交互体验等)

  • Feel - 使用产品的感受

  • 可用性 (Usability) - 使用产品的难易程度

1.1 可用性 (Usability)

  • 易学性 (Learnability) - 产品是否易于学习

  • 效率 (Efficiency) - 用户使用产品完成具体任务的效率

  • 易记性 (Memorability) - 用户搁置产品一段时间后是否仍然记得如何操作

  • 容错性 (Errors) - 操作错误出现的频率和严重程度

  • 满意度 (Satisfication) - 用户在使用产品过程中所感受到的主观满意和接受程度

引用:

可用性测试 | 人人都是产品经理

二、用户体验设计 (UXD/UED)

2.0 UXD流程

理论上,用户体验设计的流程是:

  1. 用户调研

  2. 用户画像 (Persona) & 用户故事 (User story)

用户画像:

用户故事:作为一个<角色>, 我想要<活动>, 以便于<商业价值>

  1. 线框图 (Wireframe) & 原型图 (Prototyping)

线框图:

原型图:

  1. UI设计和开发

  2. 测试

而事实在应用上,常常被忽略的步骤是2和3,为什么呢?

用户画像和用户故事是两个较为繁琐的部分,用户画像需要根据真实情况虚拟出目标用户,分析用户性格、背景以及使用产品的目的;用户故事则是通过人物画像编撰的一个使用产品某一项功能的故事(包括我是谁?我想用产品做什么事情?从而达成什么目标?)。而很多设计会认为这是这一步骤是“无用功”,但其实如果能够完善这一步骤的话,在UI设计和开发上,会减少更多歧义,也能让设计出的产品更好地实现功能所描述的目标,满足真实用户的需求。

线框图和原型图其实才是交互的原型,因为在原型图中可以展示出一个功能的每一个步骤是如何进行的(如何返回到上一步,如何进行到下一步),但事实上,原型图是需要进行用户测试,也就是让真实的用户体验功能的整体流程、布局安排,交互设计师再根据反馈进行更改,这两个步骤也许会反复很多次(耗时较长),且高质量的原型图和真实的UI设计图会有很大程的类似,这个步骤就常常被省略。

引用:

介绍下 User Experience (UX) Design

对于开发人员来说,在用户体验设计中,能起到的作用是什么呢?

对于开发人员来说,我们很少有机会真正与用户沟通来了解需求,而通过用户调研结果、用户画像和用户故事,我们可以知道我们的目标用户是一群或一群群什么样的人,他们使用我们的产品是想要达成什么样的目的。线框图、原型图和UI图都是帮助我们了解产品功能、交互以及操作流程从而从技术上实现它。

2.1 界面设计的八大黄金法则

让我们以得到App(App版和Web版的🌰都有哦~)开刀,来讲讲这八大法则

1、一致性 (Strive for consistency)

  • 通用组件

  • ✅ 使用组件库开发通用组件

  • ❌ 编辑器上的不统一

  • 使用统一的icon、图片

2、常用用户使用快捷操作 (Enable frequent users to use shortcuts)

  • ✅ 电子书调节字体大小

  • ✅ ESC键退出全屏编辑

  • 💡 写笔记的时候,可以使用快捷键(command + Z)撤销文字输入、图片插入和话题插入

3、提供有用的信息反馈 (Offer informative feedback)

  • ✅ Toast提示

    this.toast = { show: true, type: 'success', tips: '复制成功', };

  • ✅ 页面状态 (loading, error, ...)

  • ✅. 异常处理,根据错误码给出合适的错误信息

  • 💡 开发过程中,我们经常会去控制台或network中判断报错的原因是什么,但面向用户时,我们应该根据错误码的不同告知用户报错原因是什么(例如:404告知用户资源不存在,401告知用户没有权限)

4、设计流程需要一个完结 (Design dialog to yield closure)

  • ✅ Toast提示操作完成(添加购物车)

  • ❌ 购买课程成功提示时间过短(实在是不好意思,小编尽力了,视频不让上传我也没有办法展示案例😮‍💨)​

好的标题可以获得更多的推荐及关注者

5、提供简洁的错误解决方案 (Offer simple error handling)

  • ✅ 用户输入不符合规范(例如:用户昵称不能超过规定字数)

  • ❌ 网络状态异常时,在知识城邦评论,会提示“发送失败”但不会有类似“网络异常,请稍后重试”这样更友好的提示让用户知道发送失败的原因是什么

6、允许撤销操作 (Permit easy reserval of actions)

  • ✅ 赞/取消赞

  • ✅ 发布笔记/删除笔记

  • 💡 在笔记发布时可以有一个草稿箱,允许用户不发布内容,保存在草稿箱内稍后编辑

7、给用户掌控感 (Support internal locus of control)

  • ✅ 给用户自定义设置的权利

  • 💡 异常/报错的时候,给用户选择的权利(例如:视频loading时给用户选择是停留等待还是刷新页面)

8、减少短时间记忆负担 (Reduce short-term memory load)

  • ✅ 单行显示icon数量不超过5个

  • ✅ 帮助用户记忆(例如:登录状态记忆)

  • ❌ App版首页tab展示分类超过5个,且需要左右滑动查看更多分类,不利于用户记忆

这八大黄金法则究竟帮助了我们什么?

1. 在刚接触一个需求的时候,我们常常对照设计稿和需求文档了解一个新功能,但我们常常需要考虑在异常处理的时候,我们需要给用户什么样的提示,并且考虑什么样的提示对于用户来说体验更佳?如果我们有更好的文字提示或方案,我们可以和产品、设计商讨,给用户更好的感受

2. 在开发初期,我们在将功能分组件完成时,可以优先考虑有没有组件是可以复用的,有哪些组件是有可能变成通用组件的,这样在开发过程中可以更高效省时

3. 如果开发中有多余的时间,我们可以用能力站在用户的角度上,考虑简单的优化可以让用户有更好的体验

引用:

完美界面设计秘诀:界面设计的八大黄金法则

题外话:从设计师小姐姐那里知道的UI设计的标准,有兴趣的可以了解一下

www.uisdc.com/web-vitals

三、无障碍设计

3.0 无障碍设计原则

1、提供正确的替换文字 (Provide appropriate alternative text)

  • 给页面的非文字部分提供替换文字(例如:img标签的alt属性)

    <img src="" alt="这是一张图片"

2、允许用户跳过页面重复元素 (Allow users to skip repetitive elements on the page)

  • 页头、页尾部分允许跳过

3、保证链接在内容之外同样合理 (Ensure links make sense out of context)

4、不要依赖于颜色来独自传达含义 (Do not rely on color alone to convey meaning)

  • 对于色盲人群来说不友好

  • 对于屏幕阅读器使用用户来说无法识别颜色的差异,大部分屏幕阅读器只能识别HTML标签,aria属性和文字内容

5、为数据表格提供标题 (Provide headings for data tables)

  • 在数据表格中使用th标签和scope属性

书店

图书1

图书2

图书3

书店1

1本

0本

3本

书店2

10本

2本

4本

<table>
    <tr>
        <th scope="col">书店</th>
        <th scope="col">图书1</th>
        <th scope="col">图书2</th>
        <th scope="col">图书3</th>
    </tr>
    <tr>
        <th scope="row">书店1</th>
        <td>1本</td>
        <td>0本</td>
        <td>3本</td>
    </tr>
    <tr>
        <th scope="row">书店2</th>
        <td>10本</td>
        <td>2本</td>
        <td>4本</td>
    </tr>
</table>
复制代码

这样设置table可以让屏幕阅读器阅读出:

书店1,图书1,1本,图书2,0本,图书3,3本

书店2,图书1,10本,图书2,2本,图书3,4本

6、确保用户可以完成并提交所有表单 (Ensure users can complete and submit all forms)

  • 所有的必填项需要使用属性表示在元素中(aria-required属性)

    First Name (required)

从视觉上,页面的显示会是:

但从屏幕阅读器使用用户上来看,这个input标签并不是一个必填项

  • 错误矫正:提交表单后有错误出现,应该怎么让用户矫正错误?
  1. 错误弹窗 --> 设置focus焦点在输入有问题的input标签上

缺点:每次只能显示并将焦点放在一个错误输入上

  1. 将错误消息放在顶部

缺点:如果有多处错误,很难让用户记住、找到并更改所有错误

  1. 行内显示错误

缺点:需要重新浏览一遍表单来找到错误输入

7、为媒体资源提供字幕或文稿 (Caption and/or provide transcripts for media)

  • 媒体资源包括的不仅是音频和视频,还包括各种格式的文档(例如PDF, Word)

8、确保内容展示清晰、易读 (Make sure content is clearly written and easy to read)

  • 字体清晰

  • heading和列表(ul, ol标签)的使用逻辑清晰

9、使Javascript可访问 (Make Javascript accessible)

  • 事件处理函数与设备独立(不依赖特定设备的使用来触发事件)

  • 与设备无关的事件处理函数包括:onfocus, onblur, onselect, onchange和onclick

引用:

WebAIM: Introduction to Web Accessibility

3.1 WAI-ARIA无障碍Web规范

WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。 

⚠️ 注意:无障碍不仅仅指残疾人,也包括老年人等等一些需要借助其他工具来使用产品的人。

HTML中的ARIA:

1、role 标识元素作用

  • alertdialog

    {{ config.tips }}

借助role属性,屏幕阅读器可以让用户知道Toast是一个提示弹框,里面的内容是提示文字

2、aria-属性名 描述了与之有关的事物(特征)及其是什么样的(状态)

1) www.zhangxinxu.com/wordpress/2…

2) developer.mozilla.org/zh-CN/docs/…

  • aria-hidden

    {{ progress }}%

在显示进度时,有一个图片展示进度条,还有一个文字显示进度,对于屏幕阅读器使用用户而言,图片展示进度条时没有必要的,他们所需要知道是他们的进度数据,所以这个时候可以用aria-hidden把图片进度条对屏幕阅读器隐藏,屏幕阅读器只会对用户朗读进度数字

  • aria-label

在元素本身缺乏文字内容描述的时候,利用aria-label属性可以让屏幕阅读器得到元素的详细描述,让屏幕阅读器使用用户立即知道元素的作用是什么

引用:

WAI-ARIA 无障碍Web规范_WAI-ARIA, 无障碍设计, 会员专栏 教程_W3cplus

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改