UI UX设计是什么? 8招教你如何提高网站转换率

什么是UI UX设计?

你是不是常听到UI、UX设计师,但不清楚UI、UX是什么? 工作范围上UX、UI有哪些差别? 这篇透过几张图让你快速了解UI、UX差异,并且解析如何运用在网站行动号召CTA(Call to Action)上,提升转换率的方法。

UI(User Interface)使用者介面,主要是设计页面上的功能、顾及使用的便利性、整体网页设计的美学;UX(User Experience)使用者体验,注重使用者的习惯和感受,安排整个网站页面的内容流程规划。


UI是整个互动使用介面,UX是使用者感受与习惯

UI是整个互动使用介面,UX是使用者感受与习惯

讲解到这小编将用几个简单的图片说明UX与UI的差异,让你能更快了解两者间的区别。

UI是整个互动使用介面,就像你拿着手机、IPad等使用互动介面都是属于UI的范畴,UI专注在产品表面、外观功能上,UI如同桌子、椅子、盘子、和餐具。

UX是专注在解决用户问题的过程,是站在使用者角度去设计如何符合使用者的习惯、感受与直觉,UX如同服务、食物口味、灯光、气氛等。

UI与UX的工作范畴差异

 UI、UX工作范畴差异

UI就是事物的表象,UX就是事物的运作方式。

上图指出UX常使用网站骨架设计(Wireframe And Prototype)作为工具,设计版面位置该放哪些内容符合使用者习惯?网站互动如何设计才符合使用者直觉? UX设计师工作还包含,使用者的研究(User Research)的访谈和数据,以及测试情境分析(Scenario),如下图所示。

UX设计图

使用者研究及情境分析必须透过问卷调查、主要目标受众分析、眼球追踪热点分析、背景调查等,才能分析并得到潜在客群的使用习惯报告。

透过上方的使用者研究与情境分析后,网站基本架构出来后,接着UI才将UX设计师的理念加以实践,UI是美学工程师,他必须兼顾网页程式、视觉设计等,包括整个网站的颜色、字型、字体大小、语法运行可行性等。

你是如何爱上UI与UX

UX就像上图中上半段的位置表示,UX的强项在研究并了解心仪对象,并使心仪的对象心理产生变化转折,是一种无形的设计过程,在乎「感受」。

UI则是透过一步步实践所有UX陈述的感受,UI必须思考如何透过「实体」的方式,透过视觉安排设计具体呈现UX想呈现的产品包装样式,以达到UX希望产生的心理转变。


UI和UX工作范围重叠部分

Craig Morrison  —  RecordSetter的产品负责人( Usability Hour的创始人)曾主张:「UX和UI设计之间没有区别,因为它们是两个彼此无法比较的东西。」

UX与UI某些层面上有重叠的部分,且分别包含其他所属的范畴,因此难以相互比较,你可以藉由下方列表更了解UX与UI的范畴。

UX Designer包含:
‧互动设计(Interaction Design)
‧研究(Research): 包含使用者研究/情境分析等
‧资讯设计(Information Design)

-

UI Designer包含:
‧互动设计(Interaction Design)
‧视觉设计师(Visual Design)/视觉界面设计师(Graphic User Interface Design)
‧前端工程(Front-End): 包含html/CSS/JS
UI与UX在CTA按钮的决策标准

以行动号召按钮为例(CalltoAction,简称CTA),看看UX与UI如何分工:

‧UX的使用者行为研究:

提出为什么需要那个按钮,并如何让使用者满意

‧UI的视觉设计:

是负责设计按钮的样貌(如形状、颜色、大小、特效等)

‧UX/UI重叠的互动设计:

当使用者点选CTA后,要导向哪个网页/广告等。其中UI着重在CTA按钮功能可行性;UX是著重在CTA按钮的内容文字、导向的网页是否满足使用者习惯、使用者期待。

 

UI与UX工作内容简图比较

UI设计产品外观,UX发掘使用者需求并由UI改进产品外观

UI设计产品实际呈现样貌,UX设计内容物组合如何满足使用者内心期待

UI重视工具实用性,UX重视内容物及食用感受

UI:「你需要什么样的用户介面?」,UX:「为什么用户会想用这版的介面?」

UI与UX考量层面的不同

看到这大家应该大致上了解UI与UX的差异,也由上图理解到UX必须顾虑的层面广泛,或多或少有与UI重叠的部分,因此大多数的企业很常将UI、UX搞混。

下方将开始介绍如何透过UI及UX设计,增加网站的各项转换率。


利用网站UI与UX设计招提升转换率

1. 一目了然

Ditto透过动画展示两种眼镜型号效果

一个网站最重要的就是一目了然的画面,避免在首页塞入过多的讯息,因此首页只放最重要的卖点内容,除了引起消费者关注外,还要想办法让消费者产生好奇后,往下看看你的产品、点击你的CTA等。

Ditto网站就是一个很好的例子,它利用动画引起消费者注意,接着让消费者知道眼镜戴上的效果,让消费者更想知道Ditto还有哪些眼镜款式。

网站首页的架构设会由UX开始设计,UX需要透过使用者研究、情境分析了解网站架设时需要使用到哪些功能、获得什么资讯,以此来架构网站的选单和层级。而网站的字体、字型大小、粗体、斜体、底线使用上是由UI进行设计,并由UI接收UX指示的功能,做网站实际使用上的设计。

UI网站设计建议:
1. 每一行的文字建议在20–30个字的长度
2. 每行间距不要超过600–650px
3. 内文最小不要小于16px
4. 避免使用手写字体,减少消费者的阅读负担
过多留白、过小字体

crazy egg、各式设计理论书籍皆有提及,标题或内容需要有足够的留白空间,留白除了可以让消费者的注意力提升20%,更能让人感受到活力、专注在你的主要诉求上。

留白上唯须注意,若留白过多容易造成涣散、空洞、懒散的印象。


2. 阅读直觉-响应式设计(Responsive Web Design, 简称RWD)

Google搜寻引擎眼球追踪分析

所有的网页排版、CTA位置设计都需要合乎直觉,而这些直觉分析就是需要UX对使用者进行各项调查,如问卷调查、主要目标受众(TA)分析、眼球追踪热点分析、背景调查等,再设计合乎使用者习惯的网站编排。

Ditto整体网页视觉浏览方向

另外,你可以使用Resizer确定你的响应式设计(Responsive Web Design,简称RWD)可以适用在任何网页架构版型上,不论是手机、平板、电脑都是完整的版面尺寸。

Resizer测试各载具的版面尺寸

每一个版型都是UX需要逐一设计,UI落实在各种尺寸RWD网页上。

3. 恰到好处-使用影片、图片、符号

符号icon

消费者可以藉由符号快速找到网站诉求重点,若icon(CTA)放的位置符合消费者使用习惯,不仅可以增加网站的转换率、CTA点击率,更可以让你的网站更生动。

在分工上,UX设计icon摆放的位置,UI则是设计确定icon大小、颜色、扁平、使用性等。

影片比文字更能抓住消费者的目光,提升消费者对你的商品/服务的信任程度。光是放上客户替你站台,拍摄好评影片转换率就有机会增加30~40%以上,增加消费者与你的网站互动程度。

UX将进行使用者研究后,即可以设计或优化网站的首页、分页哪些位置该放上图片、影片等,增加消费者对你的产品/服务了解程度及购买意愿;UI则是将影片嵌入至网站中,确定其是否可以使用。

4. 搜索功能

Amaozn搜寻功能

电商平台、一般网站、部落格,搜寻功能可以大量减少使用者的搜寻时间,以最有效率的方式找到他们所需要的资讯。

Google进阶搜寻

很多电商平台、部落格网站都包含了「进阶搜寻」功能,让使用者找到精准的资讯、消费者更快找到可能会喜欢的商品。

UX的工作范围是在搜寻功能位置设计、搜寻功能需要有哪些细项分类,又该让搜寻功能在哪些页面出现;而UI的工作范畴,想办法呈现UX所指定的位置、页面,并考量分类功能在页面的整体美观性。


5. 指令清楚的行动号召按钮CTA (Call To Action)

Sparktoro明确CTA

CTA在任何网站中都是高转换率不可或缺的元素。这个CTA的按钮要求必须非常明确,知道在何时导引消费者到网站哪个页面、采取哪些行动。

Sparktoro在CTA上就指令非常明确,甚至在你停滞未动作时,跳出视窗会出现两个选项「订阅Sparktoro电子报跟专家一起学习」、「我不想要学习」,利用看似有选择的方式,引导部落格使用者点击「订阅电子报」的选项,因为UX设计者知道大部分使用者不会希望自己是「不想学习的人」。

而在设计分工上,UX须考量消费者最可能点击CTA位置、最想让消费者关注的内容及配置、CTA需要哪些文字内容等;UI则是要考量CTA整体网站的CTA配色、大小、文字效果、CTA是否加入动画效果等。

6. 特惠活动、热销产品在网站显眼处露出

MOMO购物网

许多消费者研究重复发现:「60%的消费者特别关注商品是否有促销活动?」这也说明大部分的电商平台消费者都在找特价的商品。

这就是UX的使用者研究、调查的成果。因此,任何主打商品、主推活动放在眼球追踪的热点位置至关重要!


7. 网站购物平台必备-「推荐功能」

从提升转换率、每笔订单客单价上,你的网站平台必定要有推荐功能。

「推荐功能」各种型式:

●加价购

●可能也会喜欢…

●其他人也买…

●大家也浏览过…

结帐时,可以这么设计提升客单价

●你还差一本书,即可享有77折优惠

●差50元则享有免运

-

追加销售(upselling)原则:

●推荐加购的商品价格(是原购物车中商品价格60%)<已放在购物车里产品价格

 

工作分配上,UX决定「推荐」网页位置,并且确定出现什么资讯,像是「优惠价格」、「直接加入购物车」、「期间限定」等;UI决定推荐功能中图片内容、文字效果、整体网页协调性。


8. 检查网站各种不必要元素

确认网站正确性

为了提供消费者、使用者良好的网站体验,过多不必要且过时元素都必须定期移除,例如:过期广告、图文不符的图片、恼人的Banner、无人经营社群媒体连结、无助于网站主题正向发展的广告评论及不相干评论、检查网页错字等。

使用Online Broken Link Checker,你可以检查网站连结有误的地方,且即时修复(Google Search Console同样可以办到)。


最后…

PChome纷乱的UX及UI设计

过去时代的产物PChome平台,到现代还是网站处于版面乱糟糟、产品照规格不一致,研究影响用户体验,当然其中有一原因是程式设计停留在过去思维,在商品繁多的情况下,网页优化、语法逻辑修改困难重重,是否仅有「砍掉重练」一途?

在「推荐功能」上PChome不会再推荐更多你感兴趣的商品,与亚马逊平台个性化服务相差甚远。

亚马逊平台之所以能够脱颖而出,就是做到了个性化服务,经过不断测试、优化用户体验等,让各种消费者能拥有个人化选择进行商品选购、产生黏性,进而让消费者成为付费会员,享受亚马逊更多元丰富的服务(Amazon Prime)。

UX需要有更多的背景知识与调查研究,才能有效地让消费者在浏览网页时,影响消费者心理并采取行动,达到网页所需的转换率;若独有UX专业,缺乏UI的网站呈现协调性、程式语法能力,那可能网站难以架设完成,即使辛苦完成了一个网站,也是不够完整的网站。

全球皆有UX及UI分两种专业存在必定有它的道理,最好的方式还是让两种专业的设计师相互配合,才能呈现最完整的网页。

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注