优化UI界面会惹怒用户?你应该这么做

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具

有时,优化网站或移动应用的界面会让用户感到崩溃。人们可能会对新的配色方案、元素的定位或其他类似的东西感到失望。显然,用户这样的反应并不是你所期望的界面优化。

即使是像Facebook、Instagram和Spotify这样的大型成功公司,也经常受到负面的反馈。例如,在2017年2月,Spotify更新了它的网页播放器,引入了新的布局、新的搜索功能和带艺术范的页面。

这一改变导致许多用户在社交媒体上表达了自己的不满。一位推特用户甚至写道: “哦,太酷了,他们升级了Spotify网页播放器,让它变得更糟糕了! ”太棒了!”

那么,如何在你改变UI界面的时候,不会让用户不满意呢?下面,我们一起来看看有哪些技能可以帮你在改变产品界面的同时,又能使你的用户对此改变感到满意。

人们是如何感知信息的

现如今,界面有了多样性,用户每次遇到新的(或更新的)界面都必须学习。因此,要用户花时间寻找功能时就会让他们感觉不愉快。

阿尔托大学(Aalto University)最近进行了一项研究,他们对视觉搜索进行了建模,试图找出人们是如何获取新的或改变的界面。

结果,研究人员认为,用户快速学习的关键在于三个因素:长期记忆,短期视觉记忆和眼球运动。知道人们如何感知视觉信息使UI / UX设计人员能够创建出不妨碍用户找到自己想要功能的高效界面(和微调的UI界面)。

包括尼尔森诺曼集团(Nielsen Norman Group)在内的多家研究公司对人们是如何浏览一页的信息以及他们的眼睛如何移动的问题进行了研究。据该小组的研究表明,用户通常在阅读或观察内容时遵循以下三种模式。

古腾堡图

古腾堡图表反映了西方的阅读文化: 从上到下,从左到右。根据古腾堡图表,页面上的信息应该被分成四个象限,让用户更容易感知丰富的文本内容:

古腾堡图介绍了内容排列原理,阐明了如何让用户更容易找到相关内容。

如你所见,用户选择先浏览左上角的象限;这个象限被称为主视觉区。你应该把你的关键内容,比如标题和标志,放在这个位置。

接下来,用户的眼睛移动到强烈的休闲区域。可考虑在本区域中提供某种后续内容,例如你之前表达的想法的图片说明。

然后,用户就会进入弱的休闲区,这个区域不太可能会引起人们的注意。它是用户在阅读路途上的“休息”区域。最后,在右下角的一个终端区域将引导用户得出合乎逻辑的结论。建议将CTA(行为召唤)在此区域中以文本、视频或链接的形式出现。

在界面上使用古登堡图表可让用户把握阅读节奏和增强对阅读的理解。这种模式还能让你洞察到在那些最有可能被阅读或注意的地方放置重要元素。

F模式

F模式表示元素在页面上的类似F的定位。据尼尔森·诺曼(Nielsen Norman)的研究显示,人们通过横向移动眼睛开始接触内容。接下来,他们扫描一条垂直线,试图找到他们感兴趣的点,如果他们找到他们想看的内容,他们会继续横向浏览内容。

Nielsen Norman对200名参与者进行了研究,结果显示其中一种流行的浏览内容模式是F型的。

为了提高用户体验,可以使用诸如要点、排版、彩色按钮、高亮文本等元素。这些元素赋予界面视觉权重,并指出页面中重要的点。

使用F模式可以确保页面上有一个高效的视觉层次结构,这样用户就可以快速浏览内容并快速找到相应问题的解决方案。

例如,Medium之前的布局利用了F模式,将主要内容(博客文章)放在左边,同时把侧边栏放在右边。侧边栏中包含了非主要内容,但仍然是相关内容,包括每日摘要、标签和“关于我们”和“使用条款”的链接。

Medium之前的排版就是F模式的鲜明案例

现如今,Medium已经没在使用带有图片预览和大标题的经典线程模式。相反,新的博客文章以列表形式显示,因此他们将用户的注意力吸引到文章的作者,而不仅仅是图片预览。

Z模式

Z模式被非官方认为是登陆页面的王者,因为它涵盖了视觉层次结构,内容结构和CTA等重要方面。与更适合文本或展现繁重内容页面的F模式不同,Z模式有效地将用户的注意力集中在带最小副本的登录页面上。

你可能已经猜到,这个模式代表了用户眼睛的类似于z图案的移动。

简约的界面可以从Z模式中获益,它以一致的布局和视觉上令人满意的内容结构为用户带来愉悦。

在使用z模式设计时,应遵循以下结构:

1.顶部的水平线应该包括醒目的内容和元素,比如logo和导航栏(这样用户很快就能访问网站的相应页面)。

2.遵循经典的讲故事方式,对角线应该向用户介绍主要内容,包括主要内容,吸引注意力的图片,幻灯片等。

3.最后,一条较低的水平线应该有一个CTA(行为召唤),它可以刺激用户执行某些动作,比如注册、订阅或购买。

底部线条:

视觉模式的知识使设计师理解用户是如何感知和识别页面内容的。成功地应用这些模式使设计者能够构建和优化出使用户愉悦的界面,并创造整体的易用性。

如何防止用户对界面优化的不满

一个网站或应用程序的成功改版是通过深入的研究,包括各种可用性测试来实现的。可用性测试旨在评估新系统的设计和功能或具有真实用户的现有新系统。以下是设计人员采用的一些有效的测试技术:

A/B测试

A / B测试,或对比测试,是一种比较两个不同概念的方法,如按钮、CTAs、配色方案和广告横幅。A / B测试的目的是找出哪些选项是最成功的; 例如,哪个按钮点击的次数最多。

每一个A / B测试的案例都是独一无二的。测试的元素取决于你的业务目标。虽然如此,在用户界面设计中,通常需要测试以下元素:

●复制(产品说明,按钮文字等)

●号召性用语(例如,他们的刊登位置或措词)

●注册表单

●布局

●图片

●配色方案

请谨记,A / B测试必须同时执行,而不是连续执行,因此你可以获得不受趋势或行为变化影响的相关结果。

做A / B测试可以帮助你避免用户的不满,甚至可以通过对界面进行必要的调整来帮助你获得更好的转化率。

Google Analytics, Optimizely和CrazyEgg这些在线工具可以帮助你进行A / B测试。

走廊测试

走廊测试是一种非正式的利用真实用户来测试你的设计的方法。一个走廊测试需找到一个拥挤的区域,然后,简单地要求路人对你的某一个设计界面进行测试和评估。

当地的星巴克可以是一个好的去处: 一般来说,人们在舒适的环境中与陌生人互动的可能性更大。此外,在星巴克,你可以给帮你测试的人买一个松饼或一杯咖啡作为奖励,这还可以帮你多争取几分钟的宝贵时间。

和你的同事一起测试一个设计也是一种方法。在这种情况下,你可以快速地在走廊上或饮水机旁对你的想法进行测试。此外,有些人更喜欢和他们认识的人交往,而不是和陌生人在街上交往。

要想成功地进行测试,你需要事先计划好一切。准备布局,测试产品,问卷,以及在测试过程中任何可能需要的东西。另外,请记得向参与测试的用户解释测试的目的,这样他们就能完全参与到这个过程中来。

当你展示你的设计时,你可能会问以下问题:

●你明白这个标题/名字吗?

●你觉得按下这个按钮后会发生什么?

●你如何评价这个界面的外观和感觉?

虽然走廊测试是一种测试用户体验设计的首选方法,它可以检查一个界面是否易于导航,但它也常被用于UI设计测试。通过对UI设计的测试,你可以找到界面中哪些元素会让用户困惑,以及你的用户是如何构思整个系统界面的。

五秒钟的测试

5秒测试(也称为印象测试)的目标是引出用户对界面的第一印象,并了解一个网站或应用程序能否将其目的传达给来访者。

尽管此测试的名称意味着在界面评估上只花费5秒钟,但有时会根据界面的视觉复杂性将时间延长到10或15秒。

在5秒的测试过程中,用户查看界面并尝试尽可能多地去记住界里面的元素。之后,你可以问他们一系列问题,这可以帮助你了解他们的反应:

●你对这个网站/应用程序的外观和感觉是怎样的?

●这个网站/应用程序是关于什么的?

●界面中的什么元素吸引了你的注意力?

●在这个网站/应用程序中,你最喜欢的是什么?

●…等等

请记住,作为详细研究的一部分,使用5秒钟的测试是有效的,因为这个测试通常是为了评估一个可视的UI组件而不是整个界面。

像UsabilityHub和Userzoom这样的工具可以帮助你有效地进行5秒的测试。

结语:

全球化的公司的实例告诉我们,用户界面的优化可能会让用户感到不满。但是,当你的UI界面需要做出重大优化而你忽视的时候,一样会让你的用户感到不满。

为了使优化的界面对用户不产生负作用,你可以采用研究策略。去做可用性测试和进行用户研究,这将帮助你做出必要的调整,而不会让你的用户离你而去。

学习工具,但不受限于某种工具。Mockplus做原型,更快更简单,现在下载Mockplus,免费体验畅快的原型设计之旅。

原文作者:Maryna Zavyiboroda 

原文地址:https://speckyboy.com/annoying-ui-changes/

时间: 2024-10-12 12:13:44

优化UI界面会惹怒用户?你应该这么做的相关文章

Sprint 5 summary: UI 界面更新,Azure端部署和用户反馈分析 12/28/2015

本次sprint主要完成的任务有对手机APP的UI界面的更新,同时对Azure客户端的部署进行了相应的学习和有关的程序设计.同时对于ALPHA release的用户反馈做出相应的分析以确定接下来工作的重点. 工作进度: 1. UI 的界面更新和完善工作主要由兆阳负责,主要是对APP中的自动标签和浏览布局进行了相应的改进.其中大部分与Sprint2中的界面有所区别,并且对整体的APP工作性能有了一些改善.相应的改进feature有如下: 1). 个人活动分类浏览: 其中将用户的各个照片依据内容,时

UI界面用户体验设计原则与规范

UI界面用户体验设计原则与规范 --安阳师范学院互联网+应用技术学院UI设计方向讲师 黄艳芳1:应该遵循的基本原则无论是控件使用,提示信息措辞,还是颜色.窗口布局风格,遵循统一的标准,做到真正的一致. 这样得到的好处:1:使用户使用起来能够建立起精确的心里模型,使用熟练了一个界面后,切换到另外一个界面能够很轻松的推测出各种功能,语句理解也不需要费神理解2:降低培训.支持成本,支持人员不会行费力逐个指导.3:给用户统一感觉,不觉得混乱,心情愉快,支持度增加做法:项目组有经验人士,确立UI规范:美工

用扁平化的界面设计吸引用户

在传统的网页开发乃至现在针对移动设备所做的设计,复杂炫目的效果对产品而言未必是一个好的选择. 尤其在移动设备上,过于复杂的效果非但很少能为应用吸引用户,反而时常让用户在视觉上产生疲劳,对产品界面中最基本的功能产生认知上的障碍.因此我们在设计中就需要参考“扁平化”的美学.UI界面设计 什么是扁平化设计 在实际当中,“扁平化设计”一词所指的是抛弃那些已经流行多年的渐变.阴影.高光等拟真视觉效果,从而打造出一种看上去更“平”的界面.北京UI设计 Layervault的设计师Allen Grinshte

新标杆 华天动力全新OA系统解析之UI界面

日前,国内领先的OA系统品牌华天动力发布了垂直换代的最新版本,新系统在功能与性能上进行了大幅度的全面升级.作为OA系统行业一款重量级的产品,将OA系统提升到一个新的高度,堪称行业新的标杆.为此,我们整理一个系列文章,向您全面解析这个全新的OA系统. 关于软件的UI界面设计,国内软件商显得要比国外同行更为重视.或许,国内的客户也更在乎视觉上的体验.而对于OA系统来说,其界面设计又比ERP等其他管理软件更高级,看起来更赏心悦目. 华天动力新版OA系统的界面进行了很大改动,却也没有面目全非,还是能够看

Flash Stage3D 在2D UI 界面上显示3D模型问题完美解决

一直以来很多Stage3D开发者都在为3D模型在2DUI上显示的问题头疼.Stage3D一直是在 Stage2D下面.为了做到3D模型在2DUI上显示通常大家有几种实现方式,下面来说说这几种实现方式吧. 实现方式1: 在2DUI上挖个洞透过去显示3D层.这种做法的缺陷在于如果两个UI界面同时打开就会UI错层显示错乱.为了解决这问题很多程序员选择了当挖洞显示3D的UI打时把其他界面隐藏掉,用户体验超差. 实现方式2: 利用Context3D 的 drawToBitmapData API 实时将3D

UI界面设计流程

UI界面设计流程 UI界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化优化规范化的设计分支.具体包括软件启动封面设计,软件框架设计,按钮设计,面板设计,菜单设计,标签设计,图标设计,滚动条及状态栏设计,安装过程设计,包装及商品化. 软件UI界面设计的三大原则是:置界面于用户的控制之下.减少用户的记忆负担.保持界面的一致性.一般来讲,软件UI界面设计在工作流程上可分为结构设计.交互设计.视觉设计三个部分. 一.结构设计(Structure Design) 结构设计也称概念设

转载:21个免费的UI界面设计工具、资源及网站

我们刚刚介绍了移动设计初探:触屏网页设计.本文将介绍一些UI界面与设计使用的元素.软件和网站.内容很丰富,适合用户体验设计师.界面设计师.产品设计师.JS前段开发.手机产品设计以及iPad和平板电脑产品设计等使用. Lumzy 官方地址:http://www.lumzy.com/ Lumzy是一个网站应用和原型界面制作工具.使用Lumzy,您可以轻松创建UI模型并即时发送到客户电脑中. Lumzy还具有团队协作编辑工具. Mockingbird 官方地址:https://gomockingbir

alertDialog创建登陆界面,判断用户输入

alertDialog创建登陆界面,需要获取用户输入的用户名和密码,获取控件对象的时候不能像主布局文件那样获得, 需要在onClickListener中获取,代码如下: 1 public boolean onOptionsItemSelected(MenuItem item) { 2 // TODO Auto-generated method stub 3 switch(item.getItemId()){ 4 case 1: 5 Intent intent = new Intent(); 6

25款国外优秀大气的UI界面设计欣赏

界面设计是用户体验里非常重要的一环,小至手机端的程序,大到电脑上的软件,都有它的参与.UI设计师就是为此而生的.给用户创造愉悦的使用体验是设计师的初心,今天我们收集了一组优秀UI设计,涵括APP以及Web的界面设计,希望能给你带来灵感. 无意中在网上发现,现在分享下,很巴适 http://www.missyuan.net/school/show_2014/show_14392.html