阅读 133

B端产品如何进行交互优化

C端

即Customer(消费者,泛指用户),我们一般手机上使用的大多数软件都属于C端,是用户接触最为广泛的界面。

C端的设计注重使用简单,流程简洁,更注重个人的用户体验。例如:千家外网、微信、网易新闻、网易云音乐、有道翻译官、网易考拉等等。

B端

即Business(商家,泛指企业)的产品,通常是企业或商家,为工作或商业目的而使用的系统型软件、工具或平台。例如:企业内部的erp、OA系统等;

相同点

1. 都是要给人使用

从每天我们要用的外卖、打车、社交软件,到逻辑复杂的后台的权限系统,无论你是个人用户还是一个一页用户,本质上都是人在使用,由人来进项操作,只不过是产品的类型罢了

2. 兼顾用户体验和业务之间的平衡

既然都是给人来使用的产品,那么我们就要兼顾用户体验和也无需求。无论B端还是C端,谁都不愿意使用一个不好用而且耽误效率的产品,当然,也一定会存在用户体验极差,用户又不得不使用的产品,可能具有一定的垄断性,或者在某个场景下被强迫使用,用户本身是别无选择的,一般这种B端居多;但是不是说明用户体验不重要,只不过对于业务复杂、为工作而工作的B端产品来说有点难

3. 坚守产品设计的核心思想

对于每一个交互设计师和产品经理来说,"在什么场景下为怎样的用户(客户)采取什么方法解决哪些问题(5W1H)”,这句话是再熟悉不过了,也是经常讨论或挂在嘴边的话。可是面对工作中蜂拥而至、突如其来的事情时,却又常常容易忽略掉。就像是一个人如果太饿了,只顾着吃饭填饱肚子,却忘记了自己爱吃什么。

根据我们已知的共同点,如何进行B端用户体验的优化呢?

表单优化

B端产品中,企业的业务操作往往需要录入大量的信息;如何准确高效的录入是我们的设计之重

1. 布局

在确定千家·MIS规范时,我们尝试了很多布局,最后我们通过眼动轨迹最终确定;

1、 顶对齐:最适合快速浏览操作。

2、右对齐:左对齐的标签可以很容易的通览 表单 的信息,节省垂直空间。(不适合布局复杂情况,会很乱)

3、左对齐:操作用时最久,适合布局复杂表单。

4、 标签在输入区内部(不推荐使用) 标签消失,看不到问题,可能会忘记要回答什么

眼动轨迹就是当用户进入一个页面时,眼睛所经过的路线。眼动轨迹的长短意味着阅读速度的快慢,理论上距离越短越好,但是当你在选择顶对齐的方式后,会发现很浪费空间,尤其是在B端的设计中。

由于公司后台配置以及操作需要谨慎,在制定规范时,我们选择了左对齐的方式;

2. 排列顺序

排列顺序说的是表单中字段的排列顺序要符合逻辑。

一般的逻辑在日常生活中形成,不要随意去挑战。

也要对表单信息进行分类,填写过长的表单,用户会失去耐心,对表单信息进行适当的分类或者分步骤,会适当的降低用户的焦虑感

3. 自动匹配

B端用户在输入表单时,会输入一些复杂并且难以记忆的信息或者选项过多时。比如:选择银行卡号、岗位、职级等;

提升用户体验很好的一个点就是在输入时可以进行联想匹配,尽可能给出相关的选项让用户进行直接选择;在很多搜索引擎类的网站很常见,比如百度、谷歌等

4. 能选择尽量别输入

当输入的内容只有固定的几项时,采用选择可以减少出错的概率,也可以提高速度;选项较少,且空间足够时,尽量选择单选,不要用下拉,减少用户的操作;

5. 标注出必填项和非不填

B端产品,不可避免的存在着大量的表单内容,对于业务本身来说,有些表单字段是不必填,这时候需要我们对是否必填做出标记;就像我们注册一个账号你的手机号、昵称等是必填,邮箱不必填,这时候需要有一个标记;

一般采用加红的星号标识

上边是对表单在小的细节上进行的优化方法,不管是web端还是移动端,想要用户体验更好就是减少用户操作,尽可能全的在界面上展示

表格的优化

1. 利用线或者色块区分

可以利用描边或者底色填充的方式,增强视觉突出。一般多采取色块划分的方式,来强调区分,增强横向信息的连贯性;

2. 优化数据的对齐方式

表格中的数据进行规范性的对齐,有助于用户视觉统一;更迅速找到自己需要的内容

对于一般的文本信息通常使用左对齐,因为人的月的习惯是从左往右的,符合正常人的逻辑;但是对于数据信息一般右对齐,更加直观的表示数字的大小对比;

3. 表格的操作

将针对表格的操作进行分类,分为可批量操作和单行操作,批量操作放在表格外,不可批零操作的放在表格里;当表格按钮过多时,可进行收起展开,当然在B端产品中,权限也是很重要的,我们可以通过权限去进行配置按钮的显示隐藏

界面优化

了解需求背景,简化操作

产品经理不是万能的,他们在写文档画原型时,更多的是思考业务逻辑,不会考虑太多交互,比如密密麻麻的表单,不合理的信息分组......

了解了页面逻辑你就会知道每个元素存在的理由及意义,以及他们之间的关系;在了解业务逻辑的情况下完成交互设计就会更加自然,而不仅仅是给原型上个色

增加画面层级

在不适合增加图像元素的情况下,可以考虑增加文本的层级,以及用卡片划分信息的分组;在某种程度上,这有点抽象图像化的概念(大字号、卡片都有些图像化);

根据内容的优先级合理地划分文本的大小、颜色层级可以便于理解内容层级,也起到分组的作用,同时页面也会更加的美观;但文本的字号与颜色的层级都不易过多,而且要统一,例如可点击、置灰颜色全局统一;

根据场景确定展示形式

一般c端设计图文并茂色彩丰富,很容易做的出彩,也比较容易找到同类型产品进行参考;但是枯燥的B端页面就会感觉无从下手,尤其在有设计规范之后,接到需求不会自己去考虑展现的形式,第一反应就是表格、列表;我们应该尽可能多的去思考他的展示,从结构层入手,按照5w1h进行分析,在确定展示形式;

总结

B端界面可能在美观上能够优化的部分有一定的限制,但是交互方面我们可以做的很出色,毕竟对于B端来说,效率、功能才是相对比较重要的。

其实做界面、交互设计和做饭类似,我们不可能做到每道菜都色、香、味俱全,不同口味不同目标作出的菜也不一样;B端页面就类似健身餐,功能优先,味道其次;我们不能为了好吃在里边加各种酱汁调料,这是违背初衷昂的;但我们可以在可用的食材里边做不同的搭配,做到味道,层次、色彩丰富;

关注下面的标签,发现更多相似文章
评论