MobileApp七大UX设计经验

  • 阅读(288)
  • 点赞(604)
  • 收藏(393)
  • 日期(2020-06-08)
MobileApp七大UX设计经验

产品使用的第一印象是至关重要的,因为使用者在意的是产品使用过程中是否和当初的 First Impression 一样的令人乐不释手。这观念小编很是认同,因为 2012 年时我大部份时间都在进行 Mobile 相关的专案开发,当时偶然下拜读了 Ivo Weevers 在他的 Blog 分享 Mobile UX 的设计观点,虽然已是一年多前的看法,但相较于现今的 Mobile 设计及市场发展其实大同小异。

Ivo 强调的是设计上的原则,而原则是基于团队在开发 Mobile Product 的经验累积,严格来说这些并不是 Design Guideline,但小编认为这些观点很值得提供予 Mobile「产品开发」者自我省思,重新思考产品 UX 思维。

七大 UX 经验法则

自过去四年来,Mobility 上发生了很大的变化。但是 Mobile 产品设计的 任务究竟是? 相信就产品设计而言,建立产品与 End User 间的关联性,从而推至对产品或品牌的支持,是大家一致认同的目标。然而最困难的就是如何满足使用者的全部期待 ,因此确定产品特色中的 Key Driver 就显得特别重要。

让我们来看看有着高度经验的 Ivo 团队,所归纳出来的这七项 UI 设计经验 ,能否带给我们一些不同的行动设计体验。

一个 App 的 UI 应该优先反映出「品牌」,再进一步提高「忠诚度」和「满意度」。首要工作就是确定 UI Layout 中哪些元素是最有助于品牌形象。再将这些「元素」统一收纳到 UI 模组之中,将有助于后续相关 App 产品的 Reuse,延续品牌形象。

但要如何定义 UI 的构成元素呢?要如何去发展产品的 UI 特徵呢?例如 Microsoft 的 Metro UI 字体、布局和互动方式,就是一种明确的 UI 特徵。

MobileApp七大UX设计经验
图片来源:Wikipedia

寻找您的 UI 特徵,有三种建议作法:

  1. 发现 -- app 的独特性:也就是着重在 app 产品的主要訢求,加强产品的独特性,例如「Path」这个 app 兼具 Instagram 的拍照特色以及 Facebook 的讯息功能,呈现出 UI 独特性之「照片墙/讯息墙」。                       图片来源:Path
  2. 呈现 -- app 的主要功能:假如您的产品是购物 app,则如何快速简单的进行线上订购付款,这个功能的重要性应该优于其他。
  3. 设置 -- app 的 UI 语言:UI 就像是文字语言一般,会建立起使用者的品牌意识,例如:Win8 的动态砖样式,看过后很容易记住那个形态就是 Win8 的长相,故核心的代表元素是最直觉的,因为他们将不断的被使用者在操作过程中体验到。

简单说就是在有限的开发资源及时间下,针对「优先矩阵」中最重要的部份先进行设计和优化,确定有效聚焦于这些功能上,才可以帮助我们获得最佳回报。

MobileApp七大UX设计经验
图片来源:Ivo Weevers

「优先矩阵」的设定範例如上图,主要在表达应该优先投入的设计工作。例如您预期客户使用 An

droid 手机为主,而竞争对手也以他们为目标时,优先投入这个 Android 客群,以具 UI 特徵及效能的 Andr

oid app 进入市场,将优于把开发资源平均分配在每个行动平台上更有价值。

每个开发团队都面临着同时进行多个专案的超人任务,要功能突出又要在时限内完成,这种场景应该是开发人员连做梦都会发生。但企业往往会忽视一个事实,即客户其实只是在找寻方法,一种能帮助他们解决特殊需要的解决方案。

例如开发一个购物 app,主要功能应该是让使用者寻找和购买所要找的东西。虽然有着绚丽功能可以使购物更有趣,但是核心目标「寻找和购买」,千万不能变成配角。要让使用者能够快速寻找和购买,是凌驾于任何功能之上。

如下範例中有两个 Shopping app 的设计,左边的 app 拥有进阶的购物功能,右侧 app 则注重于购买行为以实现 User Story 为主轴。简单来说在 app 的表现上并无严格的对错,只在于是否已确定主要使用情境并且优化核心功能,后续改善再以不妨碍使用经验为前提,进行功能的丰富化。

MobileApp七大UX设计经验
图片来源:Ivo Weevers

使用者最无法忍受的就是等待,所以针对各画面、流程、UI 元素进行优化将有效减少等待时间,让使用者不会认为他们在浪费时间。

身为产品设计人员,我们充份了解「效能表现」是无法完全控制。因为网路可能是造成缓慢的原因之一,或是某些操作需要大量的计算等。所以设计的重心在于「性能感知」,也就是尽可能的让使用者察觉到他们没有失去过多时间,进而对 app 产生良好的印象。但如何具备「性能感知」的设计?

  1. 第一步是识别流程中,可能会发生 Delay 的环节
  2. 第二步是引入额外的步骤,使使用者认为这些程序是必要的,进而降低延迟的强烈感。 性能感知範例一 :如下的 app 操作示意图,是内容搜寻的步骤。
MobileApp七大UX设计经验
图片来源:Ivo Weevers

主要情境是使用者先点击「搜寻」按钮,看到一个载入动画,再显示列表的第一部分,最后显示列表中的全部资讯。目的是让使用者对于 Delay 的感受,经由少许的步骤而得到平衡,流程上将优于自「搜寻」点击后直接跳到显示全部列表资讯。

性能感知範例二: 当启动 app 进行资料载入时,预先显示 app 的布局及图片给使用者,将让使用者对这个 app 有载入速度尚可或不错的印象。若要再加快性能感知,可以思考在空白处添加简单的进度通知。

MobileApp七大UX设计经验
图片来源:Ivo Weevers
  1. 第三步是 优化个别的 UI 元素 :任一个 UI 元素都有可能对性能造成影响,因此所有的 UI 元素应该一併考虑,主要方向是 在萤幕上的元素 数量和类型。而图像元素的 Resolution 及 Image Depth 也会影响 Drawing 时间;而其次是 app 的 UI 绘製技巧,也会影响在萤幕上的载入时间。

有些 UI 元素是极重要的,因为有助于彰显品牌身份;而有些 UI 元素即使在某些显示条件下被去除其影响相对小,这个原则如何拿捏可以自三个方向来思考:

  1. 品牌核心:产品的 UI 品牌核心是必须被保持的。
  2. 替代品:有些替代性方式很实用而且不会造成性能上的负担。
  3. 选项:有些 UI 元素虽然可以增强使用体验,但却是可以被删除以维持效能。
MobileApp七大UX设计经验
图片来源:Ivo Weevers

良好的团队沟通,对造就一个成功的产品非常重要。市场行销人员,设计人员和开发人员对于期望的产品表现皆不尽相同。因此藉由 Performance Dashboard 来帮助衡量,监测和设置目标产品的当前状态、期望和发展重点,是一个有用的沟通方法;而 Dashboard 内的 Key Factors 如下:

  1. 核心 User Story:确保认知上的 User Experience 方向是一致的
  2. 比较基準:产品之主要竞争对手的比较数据
  3. 现况测量数值:显示目前产品的执行性能数据
  4. 目标数值:设定产品的目标性能数据
  5. 效能状态:目前产品表现相对于目标的状态
MobileApp七大UX设计经验
图片来源:Ivo Weevers;假设 3G 网路正常下以秒为单位

对于 Dashboard 上的数据,开发团队可以进行主观上的手动测量及记录,或是客观上的利用工具来测量呈现。

优秀的 Mobile application 开发团队,必须能编写高性能的使用者体验,这表示对于前端的程式开发及产品设计,要同时具备 Engineering 技能和 UI 设计的经验,也因为要考虑的事很多,简单提供两个思考方向:

  1. 智能负载 : 这个机制常见的方式是延迟载入,预载主体及轻量的内容,然后再继续载入较佔用效能的内容。这种技术降低了使用者的等待时间,营造流畅的体验感受。
  2. 背景加载 : 这是一个开发人员皆知的方法,重点在于应用上是否真的发挥效果。如果效能影响因子是在于一张背景图时,那是要载入一个大的图像,或是经由演算法去合併单独的小图像?其实最好的解决方法要视情况而定。

七大 UX 经验分享,只是传达一个设计思维,即产品设计的选择将会影响效能表现,但不幸的是通常我们想要作产品改善时,早已造成部份使用者 UX 体验的负面印象。小编记得 Yammer 创办人 David Sacks 曾发表过一段话:「当我看到使用者界面上缺了东西时,会感觉像是商店地面上有垃圾。」他承认曾与一名工程师争执,原因是画面少了几个像素。身为 CEO 的人却极度重视 UX,恰好与一些产品经理们对 Mobile UX 的漠不关心,呈现出强列对比。

Seven Guidelines For Designing High-Performance Mobile User Experiences

欢迎加入「Inside」Line 官方帐号,关注最新创业、科技、网路、工作讯息
MobileApp七大UX设计经验
MobileApp七大UX设计经验