你有没有点击过没有响应的按钮? 还是你发现自己迷路了 在迷宫 混乱的菜单? 你并不孤单! 这种互动导致用户感到沮丧,失去商业机会。
如果你是设计师、开发商或企业主, 毕竟,它帮助你为用户创造更好的数字产品.
我们正走不同的路线。 而不是强调应该做什么, 这种教育绕道可以帮助您节省时间、金钱和使用者的耐心。
互动设计基金会,CC BY-SA 4.0
你可能会问,“为什么关注消极因素? “
识别不良的用户界面示例提醒您在您的工程中做出相同的 mistakes ** 之前会遇到麻烦. 例如,88%的网上购物者表示在用户体验不佳后不会返回网站. 这种洞察力表明,你为什么应该熟悉与坏UI设计**有关的陷阱。
_注:虽然本文章中刊登的网站和应用程序可能自发布以来就已经更新,但它们仍然作为坏UX设计的宝贵例子来学习和避免. 由于平台——尤其是流行的平台——在不断演变,你不妨重新审视其目前的版本,以确定任何新的UX问题。
目录
□例1:重叠元素
X,公平使用
在用户界面设计中,我们的目标是完美. 然而,即使是最显赫的平台有时也会错过这个标记. 以下是X的一个特定的UI例子,以前称为Twitter.
为什么 此实例退出?
该图形展示了X的快照,这个平台每月有3.68亿活跃用户 。 鉴于其突出地位,人们期望设计得完美无缺。 然而,这个片段揭示了一个引人注目的问题,可能令许多用户恼火。 因此,我们认为这个例子值得我们进行分析。
错误
乍一看,你会注意到重叠的"+"图标,部分模糊了微博的文字. 不仅让微博更难阅读,还扰乱了视觉流. 重叠元素,特别是主要内容和动作按钮,可能导致用户混淆,错误点击,以及挫折感.
为什么避免这种重叠?
重叠如所观察到的重叠会减损用户的经验. 今天的用户滑雪并参与。 任何障碍都可能减少用户的参与,甚至导致平台废弃。
此外,由于越来越强调无障碍,平台力求使所有用户都具有包容性。 这种错误可能进一步疏远重要的用户基础。
学习与理想解决方案
我们从这个设计失误中了解到:
- ** 彻底试验的重要性:**
您必须测试多个屏幕大小、 分辨率以及设备 。 理解设计缺陷可能不统一,但需要解决,即使少数人面临这些缺陷。
-
理想的解决办法 -- -- 间隔和优先次序:
-
重新定位、 调整大小或为“ +” 等动作按钮指定空间。
-
避免与微博等动态内容重叠。
-
采用网格系统并保持一致的间隔。
-
迭代反馈循环的重要性:
-
请真正的用户提供反馈。
-
X等大型平台应优先进行定期可用性测试。
-
及时处理和落实用户反馈。
□例2:超载搜索结果显示
Kindle Mac 应用程序, 公平使用
Kindle Mac app以数字格式提供大量书籍收藏. 该平台强调用户经验、便利和可移植性,仅美国就获得3 000万活跃用户。
为什么 此实例退出?
这个Kindle Macapp不同于熟悉的Kindle和其他电子阅读器平台. 如此大胆的开局凸显了审查伊斯兰国际联盟的决定对用户经验的影响的重要性。
错误
最大的错误是搜索结果演示. 搜索功能在数字阅读环境中更为重要. 用户寻找特定章节,引用,或某些部分的复述.
该应用程序不使用熟悉的,有组织的侧边栏或下拉菜单,而是选择了侵入式叠加法. 这扰乱了读取流程,并留下了用户与文本外的片断进行斗争.
- 避免过于复杂
为什么?
创新值得称赞,但不应牺牲用户的经验。 过于重复传统直截了当的特征会吓阻用户。
这提醒了设计者一个金刚规则:保持用户需求前端和中心.
学习与理想解决方案
从中,我们了解到以用户为中心的设计的重要性和不必要的重塑的危险。 理想的解决办法包括:
-
Sidebar搜索结果:可收回的侧边栏可以以非侵入性的方式显示搜索结果。 这可以帮助用户导航结果,同时保持其在文本中的地位.
-
** 带有传奇的清晰图形**:所有图形都应有清晰的指标,传奇,和交互式元素来提供上下文.
-
直观说明和重点: 说明和要点与其集中搜索,不如有专门的章节。 这将使他们易于利用并组织起来。
© 大篮子,公平使用
BigBasket是印度一家知名的在线杂货店, 提供脚步设计, 它列出了它们所服务的众多城市。 在进行更仔细的检查后,这种设计选择暴露出重大的可用性缺陷。
为什么 此实例退出?
BigBasket脚印是一个值得讨论的范例,因为它偏离了典型的UX/UI最佳做法。 网脚是引导用户获取重要链接和信息的二级导航区域. 这种设计使得人们能够平衡综合细节和用户经验.
更深入地了解这段视频中的用户体验概念.
显示隐藏视频记录
- 00:00- > 00:00:34
关联性实际上是一个相当有趣的话题,可能与很多情况下的用户经验没有直接关系,但它确实有其用途. 这就是我们试图决定 两个不同的变量之间 是否有任何关系的地方。 因此,例如,根据用户的经验,我们可能会发现,某人花费在某一页上的时间越长,他们花费在结账上的时间就越多,或者他们为我们的事业捐了更多的钱。
- 00:00:34 - > 00:01:02
或者是否存在反向关系,也就是相反的发生地,或者如果根本没有关系;因此,通过现实世界的例子,如果我们看人高与体重之间的关联,它们是关联的,但没有真正的直接关系. 身高较高的人也往往更重;这仅仅是世界的工作方式. 但是,这并不能确定重量, 偶然的,你不能预测某人的体重。
- 00:01:02 -- > 00:01:32
但是,散点图,它被称作—— 它的字面意思是每一个点都在两个维度上布局. 在右边,我们有高度和体重 每个点代表一个人。 它倾向于显示,随着人们提高体重,体重会上升。 所以,这是一种相关性。 正如我在幻灯片中命名的那样,它也被称为"散块图". 但是,"散"字是重要的. 这其实是一个很好的方法 来查看你的数据, 并试图找出那里有什么有趣的事情发生。
- 00:01:32 -- > 00:02:05
我们首先要谈论一个非常常见的 — — 也许 — — 最常见的 — — 相关性测试。 而它又被称为皮尔逊相关系数(Pearson's Correlation Coubility),有时也只是被称为"皮尔逊r";"r"是常用于相关系数的变量的名称. 而它的工作方式是r表达 关系的力量 从 -1, 这将是完全反向关联 -
- 00:02:05 -- > 00:02:30
– 正如你所看到的,这根本不是真实的—或者最多一个+1,也就是重量上升的地方,高度直接跟随,反之亦然. 当然,在零的中间, 没有相关性。 如果没有关联,你就会看到 散射图或散射图的点 遍布整个白色空间, 不仅仅是朝中间。 关系的性质就是这些.
- 00:02:30 -- > 00:03:07
现在,当然与皮尔逊的r, 我们谈论的是关系。 所以,如果不是线性的,那么皮尔逊不会认为它是相互关联的. 但我们可以看到皮尔逊的产物 因此,左上角是一个很强的正相关. 右侧的一点是一个弱的正相关度, 点不完全遵循我们所画的直线。 右侧的第三个是强烈的负相关联,其中线条正在下降. 因此,随着一个变量在y轴上增加,另一个变量在X轴上减少.
- 00:03:07 -- > 00:03:32
同样,弱的负相关关系 — — 点数在线条上并没有那么紧凑。 然后,温和,最后,没有关联, 这就是我提到的r等于或大约等于0。 现在,有种大拇指与相关系数的规则。 这里显示的是,这个取自"为杜米而统计". 事实上,尽管它的标题是相当好的统计著作。
- 00:03:32 -- > 00:04:06
但这个特别的网页是从他们的网站上取来的. 你可以看到它从 -1 到+1,就像我说的。 大约0.7加或减1是一个很强的关系;0.5中和,0.3弱. 因此,0.3到0之间的任何事物, 或多或少地不是非常相关。 而任何介于0.7和1之间的东西,无论是正的还是负的,都是非常紧密的关联. 让我们来看看用户体验中的关联性. 图表来自谷歌商品商店.
- 00:04:06 -- > 00:04:32
上一个是和会话的长度有关,下一个是和转换值有关——人们在离职时花费的金额. 虽然我们不需要通常地分发这些来进行相关测试,但如果你有两种极其不同的分布,也许一个是正常的,另一个不是,或者它们在不同的地方有缺陷,这有点不太可能。
- 00:04:32 -- > 00:05:00
因为它们是不同的分布 意味着它们没有那么可能相互关联 因此,从特定的例子来看,转换值 — — 也就是第一列 — — 被标记为零。 估计是很少有人检查过,其实不是零,对吧? 略高于零:几斤或一钱. 这些长度并不多,但如果我们在会话长度中看一个类似的位置,那么从长远来看,0到10秒的会话长度是最常见的.
- 00:05:00 -- > 00:05:32
当然,我们知道原因, 原因就是很多人来到一个网站, 决定它不是他们真正想要的地方。 所以,他们已经走了相当快。 也不一定是个问题 我们得试试这个 但重点是我们对会话长度和转换值之间的关联性感兴趣. 对于没有通过结账的人来说,没有转换值。 所以,我们几乎肯定会 扔出0到10秒纵队,无论如何。 所以,我们可能仍然在那里找到一些关联。
- 00:05:32 -- > 00:06:01
请注意,有许多不仅仅是一个相关测试。 皮尔逊的r只是最常见的,最常用的. Pearson's r 在很大程度上是一个线性关联测试,正如我所提到的;因此,如果你们两个变量之间的关系不是线性,那么它不会在某种关联中找到很多. 另一个非常常见和流行的测试叫做"Spearman Rank Coubility"(Spearman Rank Coubility),这对线性性不敏感.
- 00:06:01 -- > 00:06:27
不必是线性关系. 因此,这个散射图显示了非常强烈的关联结果:0.92,它正变得非常接近1. 但肯定不是线性关系. 你可以看到它是弯曲的;曲线性是合适的术语; 所以,如果你不能确切地确定你会有什么样的关系,那实际上可能更相关; 或者如果你看一个散片,你可以看到它肯定不是一个线性关系,尽管那里有某种关联。
页:1 ### 错误
主要缺陷在于城市的呈现。 虽然庞大的清单意味着全面服务覆盖,但这些城市名称的不可点击性阻碍了用户的功能. 通常情况下,这类情况下的城市名称作为本地化内容或特定城市门户的快速链接. 在这里,它们只是作为文本存在,没有为用户提供任何可操作的路径. 它们也没有特定的顺序。 发现一个特定的城市是不必要的耗时.
避免职能监督
要记住每个设计元素,特别是脚步,都应该有明确的目的. 美学特征必不可少,但不能牺牲功能。 在这种情况下,一连串的不可点击城市可能会混淆或挫败期望不同结果的用户.
学习与理想解决方案
这种设计选择表明了使设计要素与精确的功能相一致的重要性. 以下为可能的增强:
1. 可点击的城市链接
将城市名称转换成可点击链接的字母列表是最直观的解决办法。 点击一个城市可以使用户重新定位到一个适合该地点的网页,上面有本地化的报价、新闻或商店列表。
2. 可折叠列表或下拉
用户可能会认为这份广泛的清单是压倒性的。 可折叠部分或下拉菜单可以使导航更加精简. 例如,设计者可以根据州或地区对城市进行分类,在保留功能的同时解析设计。
3⁄4 ̄ ̧漯B 清晰的视觉指标
使不可点击元素与可点击项目相区别。 统一设计可以误导用户思考一切功能相同.
□ □ □ □ 例4:低优先级要素
注意、公平使用
Spotify的移动用户界面作为应用设计的理想模型. 它的直观布局为用户提供了一个平稳的经验,将美学和功能作为优先事项. 这些图像显示音乐、播客和其他音频内容的精确分类,并附有用户朋友