如何设计不难用的UI表单?(实战篇)

1.表单最重要的第一件事情是建立信任(build trust)

2.提供用户足够的意图(intention)

3.使用在情境下最适合的控制元件(UI patterns)以减少认知负荷(cognitive load)

4.提供有效的错误讯息(error message)引导用户更正错误并完成任务

5.测试你的产品,来验证假设成立

那就废话不多说,开始今天的主题“Ep2如何设计不难用的表单?实战篇”

 

主题大纲

1.CRAP 你的表单

2.什么是产品需求?

3.表单入门 — 登入页面(login form)

 

CRAP 你的表单

目前在产品设计领域里,你时常会看到UX、UI、visual、UX/UI Designer等职称,而Visual/ UI 时常被当作产品介面美化或是装饰的角色,但我个人觉得这是一个常被误解的现象,其实视觉在使用者体验中,占了举足轻重的部份,我们可以利用CRAP原则去优化任何介面设计,不仅仅是表单。

事实上,CRAP是从平面设计中衍生出来的原则:对比(Contrast)、重复(Repetition)、对齐(Alignment)、接近性(Proximity)。

对比Contrast

对比在视觉设计(Visual design)当中,帮助观看者的眼睛引导到什么是重要的,而接下来要做什么。也就是说将你想要使用者执行的动作(Call to action),或是任何你想要让使用者注意的东西—做得跟其他元件在同一个页面的元件不同。

哪一个按钮(Button)对你来说你最想点?

来复习一下,假设这三个元素在同一个画面时,从左至右分别是主要动作(Primary action)、次要动作(Secondary action)、第三级动作(tertiary action)。

在表单设计中,最后要确认或送出的按钮通常都会以主要动作为主,因为在良好的对比下,我们可以让使用者不需思考要选择哪个按钮,而达成任务。

重复Repetition

重复主要是在讲一致性(consistency),这个原则主要是让你所用的设计系统(design system)更容易使用跟被记住。而重复分为两种重复,第一是内部一致性(internal consistency),第二为外部一致性(external consistency)。

内部一致性的元素有

• 字型(fonts)

• 颜色(colors)

• 标志(icons)

• 标题(headings)

• 连结(links)

• 表单(forms)

• 页面排版(page layout)

• 空间(space)

…等等,诸如此类的介面元素,也属于设计系统内的范畴,其中最著名的设计系统,也是我们团队使用的设计系统方法为原子设计系统(atomic design system),有兴趣的朋友可以先去买书来读,以后会再分享自己的经验

而外部一致性是指说在整个网路的世界里,其他约定俗成的介面样式(UI patterns),好比说,连结的颜色、标准按钮的形状等等。

Jakob Nielsen (Nielsen Norman Group 共同创办人) 曾说过“使用者较多的时间是在使用其他的网页”。也就是说,人们对于网页的预期是被他们在其他网页上的经验所塑形而成的。为了确保易用性,将页面标题、页面导航、收寻等的元素放在约定俗成的位置,可有效地增进易用性。

对齐Alignment

简单的来说,就是把你的物件垂直&水平对齐,如果要细分的话,可以分为:

1.垂直对齐(Vertical Alignment)

2.置顶或置底对齐(Top or Bottom Vertical Alignment)

3.中心垂直对齐(Central Vertical Alignment)

4.水平对齐(Horizo​​ntal Alignment)

5.左右水平对齐(Left and Right Horizo​​ntal Alignment)

6.中心水平对齐(Central Horizo​​ntal Alignment)

7.媒体物件对齐(Media Object Alignment)

8.边缘对齐(Edge Alignment)

9.视觉优化对齐(Optical Alignment)

而这些会因为情境下的不同,所选用的对齐手法也不同,而对齐也是一个常被使用增进易用性的做法。

接近性Proximity

完形理论(Gestalt theory)学者认为,视觉感知通常会以整体来看,而非单一个体,也就是“整体大于个体的总合” (The whole is other than the sum of the parts.),

接近性的原则是指,当你将元件放在接近的位置,人会自然而然的认为他们之间是有连结的。

想了更多有关完形理论的朋友,可以参考Seal Tseng的“ 用「完形心理学」,增加介面设计有感度! ”在下方会附上连结。

 

什么是产品需求、假设、使用者故事?

在敏捷开发(Agile development)的流程当中,产品经理会将他分析数据的结果,转换成某种假设(hypothesis),基于这种假设上,会衍生出一个或多个产品需求(product requirements),而这些产品需求是要增进团队的关键绩效指标,进而增加公司利润或是其他对于市场的认知与学习。

你可能会问说“Jeremy,这是产品设计师的工作吗?这跟表单设计有什么关系?“事实上,这是产品经理的范畴,但是身为产品设计师,必须了解这些是如何产生的,才能更清楚地去厘清最后的产出是否是与产品经理的想法是一致的。

在我们团队中,简化的流程约为:产出假设(hypothesis)→建立叙事故事(epics)→产品需求(product requirements)→使用者故事(user stories)

什么是假设Hypothesis

所谓的假设是一个可测试的宣言并且是利益关系人(skateholders)所相信的,时常有产品经理提出。

最常见的写法是:我们相信[主题]有[问题]因为[原因],如果我们采取[行动],这个[指标]会有所改善。

例子:我们相信登入页面的转换率较低因为我们没有其他选项可以登入,如果我们在登入页面提供FB和google登入,登入页面的转换率会提高。

什么是叙事故事Epics

叙事故事是由一个或多个产品特征或功能集合而成。通常我们以我们要解决什么样的问题开始,比方说:增加FB登入选项在登入页面上。接下来就是描述产品功能或是需求范围,也就是我们常用的叙述故事规格(Epic spec sheet):

介绍

• 概述你想打造的产品特征以及为什么要做他们

• 哪些数据会透过这个叙事故事而改善

• 详细文件的连结(通常是使用者故事或是专案的连结)

• 行销策略、法务需求

•早期线框图(early wireframes)

产品需求

• 产品特征的需求

设计需求

• 产品经理与设计师共同讨论细节

• 模板(mockups)、原型(prototypes)

工程需求

• 产品经理与工程师共同讨论细节

• 必须包含一定要完成的工程细节

虽然设计需求只是四项中的一项,但是时常会因为产品或工程需求的变动而改变。

 

什么使用者故事user stories

使用者故事是一种用来叙述我们所要打造的产品特征给终端使用者,最常用的模板是:

当我是X,我想要做Y,所以我可以Z (As an X, I want to do Y, so that I can Z)

会这样使用的原因是在于我们可以藉由这段话去跟工程师沟通而不用说实际是怎么做的。

打个比方:“当我是一位该网站的用户,我想要直接用FB登入,所以我可以不需要去记住密码。 ”

而使用者故事通常都是产品经理与设计师开始一个产品特征的媒介,其中会因为多次的讨论而持续修正。最后的结论会被写成验收条件(acceptance criteria)

而验收条件通常列出一系列的条件,而这些条件必须被满足才可以在用户端开启这个产品特征。

 

表单设计入门 — 登入页面

当初任职的第一份任务就是优化APP的登入页面,不要看登入页面好像很简单,从EP1的案例就可以看出来,登入页面可是掌控了使用者流程到命脉,要如何在使用者的第一步尽量的减少摩擦与阻力,是非常值得反覆测试并验证自己的假设。

除非你是从零开始要设计一款APP,大多时候产品经理都会用使用者故事作为沟通的桥梁并且说明产品特征。以下所列举出的案例(Awesome glasses),是希望接近真实的情况让各位新旧朋友进入产品开发过程,并非设计登入页面的铁则且也未经过测试,仅是希望分享我个人如何思考怎么去拆解需求与调整版面以达到易用性优化,在这里再次强调,任何的设计都是需要被验证的。

那废话不多说,马上来看我们的案例的介面以及流程。对于没有接触过这个领域的朋友可能需要多看几遍消化。

使用者故事一:当我是一位Awesome glasses的用户,我希望登入页面用起来更流畅,所以我才不需要需思考怎么注册或登入。

有的朋友会问「这使用者故事听起来怎么好像非常含糊不清,不太清楚产品经理想要表达的意思是什么?」没错,欢迎来到真实世界!使用者故事或产品需求有时候是刻意写很暧昧,因为大多时候产品经理知道要达到什么的效果,却不太清楚要怎么达到,而这就是设计师可以提出解决方案与贡献的机会。

首先来CRAP我们的页面

对比Contrast:将强弱连结进行对比的优化

1.使用Google+的红色增强“使用Google登入”的视觉音量(visual loudness)

2.以主要按钮(Primary button)和次要按钮(Secondary button)做为区隔。同理,调整登入页面的忘记密码

重复Repetition:调整内部一致性与外部一致性

1.内部一致性:元件间的距离与空间,使用8px的倍数去构成页面的间距,以维持垂直韵律(Vertical Rhythm)

2.外部一致性:以线代框,移除白色透明度的框,增加标题与背景的对比度,并使用文中标签,符合现下大部分的表单形式。

对齐Alignment:将大标题对齐“上一页”的按钮,把整个表单向上提升,当键盘出现时,不会挡在主要按钮的前面。

接近性Proximity:将相近功能的选项放在接近的区域,因此把登入与注册分开

看到这边,会感觉这个使用者故事好像不只一个可以改的地方,这时候产品经理会依照开发资源去调整这则故事,或是将这则故事转成叙事故事包含更多小的改动。

 

使用者故事二:当我是一位Awesome glasses的新用户,我想要用FB登入,所以我可以不需要去记住任何密码

由于第一则使用者故事,我们把登入相关的按钮放在同一个区域,所以这则故事处理上来就相对简单。当我在做这类的故事的时候,最常用的手法就是标竿分析(Benchmarking),去调查竞争对手或是你觉得有同样功能及特征的产品,做为参考,但要注意的是,别人测试成功的案例不代表放在你的产品上也会测试成功。

而设计师在阐述自己的设计时,必须要有足够的论点,否则在沟通上就站不住脚:

1.采用相通的手法,以Facebook的蓝色做为按钮的背景色。缺点:按钮的颜色些许融入整个画面的背景,有可能造成易用性的疑虑

2.依照内部一致性的原则,将有关社群网站登入的方法,以同一种颜色去做处理。

3.经过标竿分析与再行销(Retargeting)的考量,强化FB的登入按钮。

通常像这种故事,我都会在第一次的时候提供三个左右的版本给产品经理,原因是当有三个版本时,就不再是二选一的选择题,而是进行对话,更加了解产品经理他的想法,有时候设计师必须利用设计选项来厘清最刚开始的需求。

 

使用者故事三:当我是一位Awesome glasses的新用户,我想再注册的时候了解我注册后会对我有什么好处,所以我愿意花时间去注册

再不改变流程的情况下,通常能做的事情非常有限,但是不代表不能做,换个角度想,可能也是另外一个去验证文案的机会。

原本的文案是:让眼镜不再只是眼镜,更是生活的一部分。

更改过的文案是:登入即可享有最高50%OFF的优惠,快来搭配你每天的风格吧!

更改过的文案提供不一样的动机让使用者会想要登入而获取更大的优惠。在这边你也可以测试你的产品声音与语调(voice & tone),简单的来说,就是把产品拟人化,看看你的目标客群(target customer)对哪一种角色最有兴趣,进而提升参与度(Engagement Rate)。

当然也可以更换背景为更生活的图片,要注意的是图片本身与介面元件的对比度,是否为影响整体阅读而导致易用性下降。

 

感谢你阅读完这篇文章,在撰写的过程中一直反覆思考以及回顾日常的工作流程与经验,希望透过自己的分享,可以帮助到即将踏进这个领域的朋友,或是已经在这个领域许久却还未找到自己设计方法的朋友,一点点思考设计的流程及方式。

 

 

作者:Jeremy 

插画:Joyce

每天更新,
全站高品质素材免费下载!