电子渠道UIUE优化建议的方案课件.ppt

1、广州移动电子渠道UI/UE优化建议方案广州短讯神州网络技术有限公司目录2现状分析1规划背景4方法论与工具3优化方案5项目建设计划项目背景电子渠道发展趋势随着互联/移动互联网民总数的高速增长，电子市场前景看好且竞争对手已在不断整合电子渠道以提升综合竞争能力，所以优化电子渠道势在必行，良好的渠道服务和功能有效提升可以很好提升用户体验和提高业务办理量。2019年将有过半中国人触网互联网移动互联网项目背景电子渠道的要素v 信息架构v 功能设计v 业务流程v 视觉设计UEUI电子渠道Wap的诊断分析会从UE和UI的以下几个方面分别进行：项目背景UE要素分解UE，指用户访问一个网站或者使用一个产品时的全部

2、体验。好的UE会表现出功能强大、易用、易识别的特征。以下几点直接映射和体现UE，是我们作为网站分析的主要线索：信息架构交互功能业务流程说明：其主要任务是为信息与用户认知之间搭建一座畅通的桥梁。它是信息直观表达的载体，负担对信息表达和传递的责任。意义：信息架构隐性引导用户的思维逻辑，其优劣决定用户能否快速的找到想要的信息。说明：功能设计是网站的核心，是用户服务与体验的最本质的表象化内容，是用户与网站发生交互行为的根本。意义：功能设计决定用户在网站上的自我定位，是吸引用户、提升网站粘性的绝对要素。说明：业务流程是基于网站产品和业务的操作使用流程意义：优良的业务流程是提升业务办理量，降低用户跳出率的

3、直接保障。项目背景UI要素分解UI，指对网站或软件应用的人机交互、界面美观的整体设计。好的UI设计不仅是让网站变得个性而富有品味，还会让功能的操作变得舒适、简单、自由、充分体现网站的定位和特点。视觉设计说明：网站在交互、界面美观方面的整体设计。意义：视觉设计是用户对网站的最初体验，它基于图形、色调、组合、搭配与用户发生情感交互，直接体现网站的品味和特色。规范设计说明：网站在字体、图片、设计元素上的运用和设计规范化。意义：帮助形成和维持网站的风格统一，显示网站在细节上的专注，体现自己独有的特色。目录2现状分析1规划背景4方法论与工具3优化方案5项目建设计划现状分析WEB体验分析信息架构交互功能业

4、务流程信息架构维度单一，仅至上而下的将网站内容按性质进行频道划分，未从用户角度出发给予需求引导的感知。业务的了解均需跳转到详情页面，耗费用户的时间和网速资源，信息的传达过于依赖单一的页面，在组织形式和展现形式上未能突出web2.0的便捷特性。视觉设计页面的整体设计风格较统一，页面上的线条感很强，界面效果不够简约大气。且整体布局上未突出“广州”相关的字眼或信息栏，使区域性的特色无法体现。网站页面上均为普通的货架式信息展示，无任何交互功能，难以引起用户兴趣，潜意识传递给用户的自我定位是浏览者角色，导致用户参与度低下。操作易用性界面友好规范设计广告位繁冗以及图片尺寸型号过多，显得界面较杂乱，统一性不

5、够信息架构现状分析用户希望一站式信息推送用户信息之间联系零散网厅用户希望清晰的信息获得界面用户信息表述过于单调，导致大部分用户没有主动获取网厅用户希望信息架构组件是合理易用的用户各模块、搜索、导航等组件过于粗糙网厅web网厅整体规划主线不突出，移动业务办理只是简单的点对点。功能模块之间逻辑性不强，以展示为主，没有更多引导用户深度体验。现状分析WAP体验分析信息架构交互功能业务流程 信息架构维度单一，未从用户角度出发给予需求引导的感知。一部分功能仍然在建设中，业务流程不完备，体验感不佳。业务的展示形式过于单调贫乏视觉设计 页面的整体设计比较简洁 视觉效果稍显单一，美观度有待加强 针对信息展示部分

6、，热门与普通信息的区隔化不够用户身份无辨识，信息推送和需求互动受阻页面以展示和入口提供为主，无任何用户交互的功能流程，用户定位低下操作易用性界面友好规范设计 整体的设计元素统一性比较强现状分析短信营业厅体验分析 短信营业厅的仅能满足部分业务办理、帮助获取的需求 对于短信营业厅的相关信息的获取渠道有限，大部分用户完全不了解短信 营业厅的概念和使用方法短信的信息量有限，针对不同的用户，单项的信息无法完全满足对方需求，使之完全理解并得到帮助。操作易用性信息获取目录2现状分析1规划背景4方法论与工具3优化方案5项目建设计划目录优化方案l WEB站点l WAP站点l 短信营业厅优化方案WEB优化思路WE

7、B的优化需要从用户需求以及网站需求角度综合考虑，取一个平衡点，在满足用户需求的同时，一并达成网站的建设目标。提升WEB的用户体验主要包含以下核心要点：多维度、多层面的组织信息结构 信息展示多样化，亮点突出 减少页面跳转，用户操作流程最简化 界面布局的逻辑化，符合用户浏览习惯优化方案WEBWEB网站的优化按UE和UI两个不同的角度进行，以下为UE部分：UE优化信息架构优化功能策划业务流程优化提升网站的业务办理量和活动参与量则需最大化的推广展示业务和活动信息，并以互动有趣的方式吸引用户关注。如：补充一：营销互动专区，集娱乐营销于一体的业务乐园补充二：个性化订制与推送，让用户行选择关注点个性化订制与

8、推送，让用户行选择关注点摒弃通过界面跳转来了解业务信息的方式，且简化页面布局，帮助节省用户的时间成本，突出WEB2.0的便利特性。如：方式一：增加鼠标悬停效果，以便用户快速浏览信息特点方式二：提炼业务亮点，增设快速办理渠道，简化信息从用户的需求角度出发，将网站的业务信息和活动信息重新分类，建立另一个维度，做到信息展示的客户化。如：维度一：找省钱、找方便、找休闲等维度二：商务、娱乐、家庭、通讯等，便于关注订制优化方案WEBWEB网站的优化按UE和UI两个不同的角度进行，以下为UI部分：突出地域标识，强化用户基于地域的服务体验 在页面细节上化繁为简削弱线条感，凸显大气 色调及布局上处理得更加和谐，

9、彰显气派UI优化视觉设计优化规范化设计 图片尺寸型号不超过三种，图片位置避免相冲 设计元素调整，使之更加整体性更强，美观细致合理的信息结构合理的信息结构包括：v明确的需求定位 服务的是哪类用户；用户的目的是什么；我们能提供什么；v构建信息结构的元素来源于对需求的客观分析 信息结构需要合理，并不是大而全就是好。v信息架构满足运营的需求 合理的信息架构是运营工作 可量化的条件之一；合理的信息架构能使用户在 体验中获取更多收益。v考虑可用性、用户体验因素合理的信息结构需求定位客观分析运营需求用户体验统一规划网站结构改善网站结构按照组织形式不同及维度不同，可分为向下分解和向上归纳两种。分解是一种正向思

10、维方式，而归纳则是倒推的思考方法。最优的方法是，摸清楚用户的需求，按照用户的思维逻辑去进行分解。分类内容内容向下分解从“网站目标与用户需求的理解”开始直接进行架构设计。先从最广泛的、满足决策目标的签注内容与功能开始进行分类，再依据逻辑细分出层次分类。这样的主要分类与次要分类的层级架构就像一个个的空槽，而内容和功能将按顺序填入。根据“内容和功能需求的分析”开始进行架构设计。先从已有的内容及功能开始，把这些内容放到最低级别的分类中，然后再将它们分布归属到高一级的类别，从而逐渐构建出能反映我们的网站目标和用户需求的架构。向上归纳我办业务参加活动话费业务上网业务查话费交话费 GPRSG3上网页面改善页

11、面改善要解决页面布局的问题，通过确定界面外观、导航设计、信息设计、文字大小等细节问题来实现网站的功能和内容。线框图页面中的“F”区域是页面焦点区域，获得用户最高关注。应将重点内容部署在这个区域中。F区：F区是用户视觉的焦点，重点内容需要部署在这个区域，可为导航、及焦点推荐。导航：友好导航、全局导航、局部导航、辅助导航，各尽其用。主体内容：该页面想表达的主要内容。全局导航局部导航焦点内容网站视觉设计分析信息匹配度不高两块内容相互重复视觉缺少一定的信息量用户需要再次点击纯文字介绍视觉上显得苍白这块在视觉上有头重脚轻的感觉并且内容有重复的嫌疑。过多的动态广告，且营销内容含糊不清目录优化方案l WEB

12、站点l WAP站点l 短信营业厅优化方案WAP优化思路Web端建设后移植为WAP形式，突出的矛盾是信息架构不适应小屏幕设备，垂直页面的冗长和WAP表现形式的限制。提升小屏幕浏览的体验，在表现方式上应注意以下几个要点：控制信息的维度 信息布局，更好利用首屏的有限资源 采用合理的导航、有明确的方位感知优化方案WAPWAP网点的主体优化思路与WEB相同，但基于目前的WAP的建设情况以及使用特性，会与WEB存在差异。以下为UE部分：UE优化信息架构优化功能策划页面布局网站对于用户的身份无辨识，地域性不突出，可优化的方向：广州专区的策划，凸显地域性特征 白名单自动甄别用户地域身份，结合地域针对性推送WA

13、P站点的首屏具备最高关注率，也是最能吸引用户的区域，设置最热点的信息，快速吸引用户眼球。可优化的方向：标签式信息展示，突出信息丰富性以及分类明确 减少头部图片的设计，以最大化的展示信息量 业务信息的排列形式丰富化，设计隐藏层等形式WAP网页可支持的页面信息维度较小，将最符合用户直接需求的信息分类在首页呈现出来，可优化的方向：用户需求角度的组织架构 快捷操作的导航指引 网站地图的补充优化方案WAP 色调上更加明快舒适，大气简约，细节突出 整体布局上优先考虑首屏效果，页面层次处理，主次分明UI优化视觉设计优化规范化设计 图片尺寸规范标准化，最利于手机效果显示 设计元素调整，使之更加整体性更强，美观

14、细致WAP网点的主体优化思路与WEB相同，但基于目前的WAP的建设情况以及使用特性，会与WEB存在差异。以下为UI部分：机型显示适配 能支持大部分的手机机型正常的显示页面视觉设计目录优化方案l WEB站点l WAP站点l 短信营业厅优化方案短信营业厅短信营业厅内容简单，其优化点主要体现在短信获取信息的操作流程和宣传渠道的扩展上：将短信表述的内容进行分层，以由浅入深的方式进行整理，针对不同用户的疑问类型，针对性的下发信息注解，避免单一化的信息反馈。拓展更多短信帮助提问的功能，通过关键字判断给予短信反馈。操作流程宣传渠道 目前短信营业厅的使用频率较低，起“营业厅”的概念未深入人心，可在WEB和WA

15、P渠道上进行短厅的推广宣传。短信优化目录2现状分析1规划背景4方法论与工具3优化方案5项目建设计划方法论与工具UED产品优化流程用户意见范围：信息架构、交互设计、视觉设计用户行为评审实施用户主动建议提意见调查访谈专家评审通过各种渠道收集来自客户的需求、诉求、意见、建议，形成输出，最后提交审批、实施，再经过检验，形成闭环。用户行为报表可用性测试检验结果意见收集交付结果实施检验方法论与工具客户意见收集ACSI模型作为满意度的理论模型通过建立固定样本、客户端调查问卷、线下访谈等方式，收集用户意见建议等。1、从客户端用户中，选择50人，建立固定样本群组，群组每个月组织一次座谈，每人每月提交一份体验报告

16、及改进建议。2、在客户端长期投放调查问卷，收集来自客户的意见。3、每月随机约见系统用户，进行访谈，收集其意见。方法论与工具可用性测试可用性测试每次版本上线时，组织5人可用性测试小组，5人测试小组，可以发现85%的可用性问题。可用性测试采用测试对象使用客户端，回答可用性测试问卷的方式进行。可用性测试问卷方法论与工具用户行为分析报表用户行为分析报表通过用户画像系统，收集用户在各平台、各应用的行为习惯，特别是点击，中止操作，退出客户端等动作，分析UI、UE、信息架构对客户行为的影响退出页统计：可以帮助发现哪些页面导致用户退出网站，继而分析该页面的问题，解决问题。最常访问页统计：可以帮助发现哪些页面是

17、用户最经常访问的，可以用户经常访问的页面放置引导。目录2现状分析1规划背景4方法论与工具3优化方案5项目建设计划项目建设计划执行组织架构项目总监产品经理设计经理产品策划流程优化专员前端工程师视觉设计师 项目经理测试经理页面测试流程测试交互优化专员架构优化专员数据分析专员交互设计师项目建设计划优化项目人力投入分类细项数量（人）项目总监（经理）负责项目计划、组织、协调、控制等项目管理工作，保证项目目标的实现2产品组需求分析、需求整理撰写、数据分析、需求管理、低保真策划图、高保真图策划。重点围绕流程优化、架构优化、交互优化开展工作8设计组视觉效果设计、交互效果设计、前端效果实现8测试组负责对所有策划方案执行结果的测试，出具偏离结果报告2合计20项目建设计划项目时间进度电子渠道（WEB、WAP营业厅）诊断梳理；流程优化、信息架构、功能流程整体整体策划；UI/UE设计制作；项目整体架构设计开发；完成项目页面搭建；集成测试（IT）、系统测试（UT）、业务应用测试、功能性测试；项目最后调试；新页面正式上线；建立运营模式C l i c k t o e d i t c o m p a n y s l o g a n .广州短讯神州网络技术有限公司