什么是好的用户体验设计?
好的用户体验设计为你的网站访问者创造无缝和积极的体验。并且可以让访问者在你的网站上停留更长时间,这可能会增加转化率。
在本指南中,我们将向您展示电子商务,技术和其他行业的一些用户体验设计示例。但首先,请确保您了解此实践需要什么。
在大多数情况下,好的用户体验设计是关于:
可用性:你的网站、应用程序或产品应该易于使用和理解。在网站上,客户应该能够在三次或更少的点击中访问重要页面。
功能:您的产品、服务或界面应该实现其预期目的。几乎没有分散注意力的元素。
吸引力:你的网站或手机应用程序应该具有视觉吸引力。所以它可以给用户留下持久的印象,让你的品牌在他们的脑海中萦绕。
可搜索性:访问者应该能够在你的网站上快速找到他们需要的东西。这就是为什么让你的搜索栏突出并添加一些有用的功能很重要,比如放大镜图标和过滤选项。
可访问性:您的网站(或产品)应该对每个人都可访问,包括残疾用户。
可信度:在用户体验设计中,可信度指的是网站、产品或服务灌输信任和信心的程度。
专业技巧
使用Semrush的网站审计来检查网站的运行状况。并检测用户体验问题,如页面加载缓慢,缺少所有文本,断开链接或过多的页面链接。网站审计还将向您展示如何解决这些问题,以获得更好的UX和SEO。
14个鼓舞人心的UX设计例子
现在,让我们仔细看看一些最好的用户体验设计的例子。
我们还将关注具有出色用户界面(UI)的网站。
1. 苹果:极简主义和互动元素
苹果网站的特点是极简主义设计和互动视觉元素。
它运行良好,因为以下设计选择:
该网站很容易导航与直观的导航菜单
按钮都是功能性的
所有的图像都是高质量的,引人注目的
整个网站的品牌都是一致的
该网站的特点是高对比度的调色板和可读的字体
例如,您可以使用iPhone 15产品页面上的滑块来比较不同的手机颜色。或者点击一个按钮来放大相机。
你可以清楚地看到导航菜单(及其内容)在每个页面上:
2. Netflix:直观的用户体验和个性化建议
Netflix可以让你浏览成千上万的电影和电视剧,而不会感到不知所措。通过给你个性化的体验。
以下是一些值得注意的UX设计特点:
Netflix的网站界面简洁,易于浏览
Netflix的算法根据用户行为提供个性化建议
Netflix通过首先呈现新内容来保持节目的趣味性
这些按钮都很有用,很直观
例如,Netflix在主页的顶部显示“新片”。
并在“[用户]最佳选择”下提供个性化建议。
请注意
Netflix和其他品牌进行用户测试,包括A/B测试,以比较不同版本的UI功能、流媒体算法和其他元素。这种做法使他们能够跟上客户需求并保持竞争力。
3. Zappos:可搜索性和个性化
Zappos是电子商务领域最好的用户体验设计范例之一。他们使用面包屑导航使购物变得轻而易举。
其他主要功能包括:
先进的过滤器,无忧的购物体验
从不同角度拍摄的高质量产品照片
个性化推荐,比如相关商品和配套服装
页面缩放,增加可访问性
Zappos网站的每个页面上都有一个搜索栏。一个直观的菜单,让买家在紧要关头找到他们需要的东西。
这家在线零售商还会显示顾客的评论,从而建立信任和信誉。
4. Spotify:音乐爱好者的自定义播放列表
Spotify就像音乐领域的Netflix。用户可以浏览数千首歌曲和播客,创建播放列表,并搜索内容。
它的网站具有高颜色对比度,大按钮,清晰的标签和其他可访问性功能
它也有一个清晰的视觉层次结构,允许用户在播放列表之间切换,发现新歌,并采取所需的行动(例如,嵌入播放列表)。
大胆的字体和鲜艳的色彩有助于品牌的视觉叙事
该平台根据用户的位置、偏好和浏览历史提供定制推荐。这些功能增强了用户的旅程,允许高度个性化的体验。
另一个很酷的功能是Spotify Wrapped,这是一项年度活动,重点是定义这一年的聆听时刻。它利用用户数据来显示消费者的收听历史。
熟悉的“故事”形式和用户与朋友轻松分享自己喜欢的音乐的能力推动了用户粘性和品牌知名度。
5. Trello:用于无缝协作的自定义工作流
Trello允许用户个性化工作流。他们可以创建待办事项列表、管理项目、分配任务和授予权限。
该平台因其对用户控制的强调而在用户体验设计领域脱颖而出。它允许个性化的数字体验和简化的功能。
其简洁的界面简化了用户的旅程,消除了干扰
拖放功能使定制仪表板变得更加容易
占位符文本使导航界面不再需要猜测
把Trello想象成一块白板,你可以在上面直观地组织任务,并与你的团队协作。它的界面使它更容易将复杂的项目分解成更小的块,并保持在最后期限之前。
6. 耐克:为全球顾客提供视觉购物体验
耐克的网站是高度视觉化的。它使用生活方式产品的照片,让顾客沉浸在品牌的宇宙中。
画面生动逼真。让潜在客户很容易想象自己穿着耐克的产品。
使其成为最佳UX设计示例之一的其他关键功能如下:
耐克的网站用中性色设计了简洁、极简的布局,使产品流行起来
它的产品页面提供了您下订单所需的所有信息
该品牌推荐的产品可以与你想买的商品相辅相成,帮助你打造自己的服装
耐克还利用用户生成的内容来建立信任并指导客户决策。
它的产品页面有一个部分,买家可以看到其他人是如何穿他们的产品的。
7. Airbnb:功能与美学的完美结合
Airbnb的设计融入了互动元素,以提供动态的用户体验。
例如,它有一个地图功能,允许旅行者看到每个列表的区域。用户可以用鼠标放大或移动地图以显示新的列表。
其他值得注意的因素包括:
一个用户友好的界面,允许用户找到他们想要的列表
基于搜索历史和位置的个性化推荐
直观的搜索和过滤器,允许用户只看到他们感兴趣的列表
该网站的搜索和过滤选项是一流的。用户可以根据日期范围、类别、可访问性特征和其他标准搜索住宿。
Airbnb将用户置于设计过程的中心。自动补全功能、直观搜索和个性化推荐使预订更容易、更快捷,无论他们的语言或技术水平如何。
8. H&M:无缝导航和高级过滤选项
H&M允许用户直接从主页上按产品类别、受欢迎程度、活跃程度和其他标准进行搜索。
它的网站是优秀用户体验的典型例子。除了干净、现代的设计外,它还具有:
高品质的产品照片与放大功能
作为社会证明的用户评论和评分
基于浏览历史和以前购买的自定义推荐
客人结账,让用户不需要登录购买
视觉搜索(可在H&M应用上使用)
大型菜单是导航的主要形式,它组织了大量的项目。
面包屑允许用户看到他们的位置,并在商店类别和级别之间移动。这些元素是次要的导航形式。
这些特性展示了优秀的信息架构和项目标记。
结果呢?购物者可以在数千种商品中快速选择而不会迷路。或不知所措。
9. Zoom:视频通话变得简单
Zoom使所有用户都能轻松地进行视频通话,包括那些残疾或技术知识有限的用户。这方面的一些值得注意的特性包括:
标题的翻译
屏幕阅读器支持
键盘导航
黑暗的模式
它的界面通过使用导航按钮和图标简化了虚拟会议。登录后,你会在屏幕右侧看到三个选项:
主持会议
安排一个新的会议
加入会议
多亏了这个功能,你不必浏览整个网站或应用程序来弄清楚如何开始。
您还可以切换到对焦模式,以减少视频通话时的干扰。
要获得个性化体验,可以通过点击“更多”来定制应用程序内的工具栏:
10. 特斯拉:极简主义和功能性
特斯拉以其网站的极简主义美学和简洁的线条吸引了人们的眼球。
以下是该品牌在用户体验方面的一些特点:
主页上的文字很少,将重点转移到产品上
清晰而突出的CTA按钮向用户显示下一步要采取的行动
互动测试可以帮助潜在客户选择符合他们需求的车型
一些产品页面有自动播放功能,以提供更吸引人的用户体验
主页上有该公司最新发布的产品以及两个CTA按钮:
点菜了
演示驱动
主导航菜单同样简单,提供快速访问所需信息的功能。
特斯拉的产品页面以逼真的图像、视频和流畅的滚动幻灯片为特色。这些视觉元素具有未来感,反映了品牌对创新的关注。
专业技巧
为了获得更多的灵感,看看网络上最好的用户体验设计作品集的例子。像Josie Allison, Emi Lantz和Gloria Lo这样成功的用户体验设计师在他们的网站或第三方平台上展示他们的作品。
11. 多邻国:强大的视觉设计和高交互性
Duolingo网站有趣的界面与该品牌的信息一致:学习一门语言可以很有趣。让它脱颖而出的是动画的使用。
其他需要注意的UX特性包括:
根据用户的位置自动翻译其网页
无缝注册流程
游戏化元素
即时反馈
自适应学习系统
一旦登录,你就可以进入一个具有互动元素的可视化学习平台。
此外,您可以收到即时反馈,并可以实时跟踪您的进度。
该平台还利用游戏化来提高用户粘性。
例如,学习者可以在排行榜上竞争一个位置。此外,他们还可以参与日常任务以获得奖励。
这种级别的交互性简化了语言学习,减少了认知负荷,增强了用户体验。
12. Dropbox:简单易用
Dropbox网站的界面乍一看很简单。例如,主页只有几张图片,视觉效果不佳。但它的简单性使其具有吸引力。
除此之外,该公司的网站还提供以下内容:
用于上传文件、创建文件夹、编辑PDF文件等的可视化图标
一个突出的搜索栏,让您轻松找到您需要的文件
集成与其他应用程序的超级功能
简单易用的菜单
在主页上,你会看到社交证明:“加入超过7亿信任Dropbox的注册用户。”接下来,有一个可点击的CTA按钮来查找计划。
主页的其余部分显示了应用程序的功能,而不会向用户展示不必要的细节。
Dropbox的仪表板与网站的其他部分一样直观,易于导航。
左边有一个主导航菜单。顶部还有一个搜索栏,以及用于上传文件、编辑文档和其他任务的可视图标。
每个元素都有一个目的,引导用户完成他们想要的任务。
此外,你可以毫不费力地应用搜索过滤器,放大和缩小你的照片,书签文件。
13. Headspace:每个接触点的可访问性
顶空满足优秀UX设计的所有标准:简单的导航、良好的可读性、高对比度的颜色和可访问性特征——仅举几例。
它的一些主要特性包括:
描述性分类,比如“冥想”、“睡眠”和“心理健康”
每次冥想后的即时反馈和整个用户旅程
高级过滤器(例如,按长度、目的或技能级别对冥想进行排序)
客户评论、评级和其他社会证明
大型CTA按钮
大而易读的字体
视觉上吸引人的布局
其主页上的信息根据用户的兴趣被组织成易于浏览的类别。
如果您想了解更多有关心理健康的信息,请单击导航栏中的该部分以查看可用资源。从这里,你可以访问一个数字图书馆,听播客,或阅读专家建议。
每个页面都有明确的CTA按钮,告诉您下一步该做什么。用户界面也是如此,它引导用户完成不同类型的冥想、呼吸和正念技术。
与Duolingo类似,Headspace利用游戏化来吸引用户。它的互动功能个性化您的体验,同时增加了一个有趣的元素。
进一步阅读:30个引人注目的行动呼吁例子
14. 冷静:颜色选择强化了品牌的使命
Calm利用色彩心理学来灌输一种宁静的感觉,吸引用户。例如,主色调蓝色唤起平静和宁静。
它的网站是心理健康领域最好的用户体验设计范例之一,融合了美学和功能。我们对下列因素印象特别深刻:
极简导航菜单
可读的字体
高对比度的颜色
无缝的登记
每种冥想类型的描述性图像
一致的调色板
Calm的网站还设有清晰的CTA按钮,指导您进行所需的操作。
此外,它还展示了建立可信度的社会证明。
例如,主页上有一个名为“被业界最优秀的人信任”的部分。在这里你可以看到推荐或评论这款应用的出版物。
提升你的用户体验设计以获得更好的参与
一些最好的用户体验设计范例来自于顶级品牌。然而,这并不意味着你不能用一个小团队获得类似的结果。
首先,使用网站审计工具检查网站的运行状况,找出需要改进的地方。你也可以尝试Semrush的网站测试应用,看看你的网站在不同平台上的外观和表现。
接下来,实现Web内容可访问性指南。这一步可以提高你的网站的功能和覆盖面。
最后,继续检查和完善你的用户体验设计。这个过程需要持续的工作,因为客户的需求是不断变化的。随着最新技术的发展,用户体验的世界也在不断发展。
[这篇文章更新于2024年。安德鲁·乔尼(Andrew Chornyy)的原文节选可能会保留。