网页设计中的边缘设计。

当我们设计我们的产品时,我们经常为快乐的路径场景设计,理想的用户流没有任何障碍。但是在现实生活中,有些情况是不需要计划的。这种情况被称为"边缘案例"。

边缘案例可能非常少见,但它们对用户体验有显著影响。用户很少记得正面的互动,但他们经常记得负面的经历;如果你没有为这种情况做准备,整个过程可能很快就会失败。

在本文中,我将介绍一些您可能需要处理的边缘案例场景,以及如何在设计中为它们进行规划。处理边界情况有两种基本方法:

防止边缘情况发生

支持优势情况下

如果有选择的话,最好是防止出现这种情况。在某些情况下,这可以通过降低系统的复杂性来实现;较低的复杂性降低了出现边界情况的可能性。然而,有时不可能防止边界情况发生,所以您经常会发现支持边界情况是您的用户最好的选择:

1、战斗延迟加载

随着技术的快速发展,用户的等待意愿也降低了。根据谷歌的最新调查,2/3的移动网络用户说,加载页面的速度对他们的整体体验影响最大。为了满足用户的期望,你应该尽你所能让你的应用程序/网站加载速度尽可能快。但是不管你怎么努力,总有一些情况下你不能遵守速度指南。缓慢的加载时间可能是由有限的网络连接造成的。如果你能改善实际的表现,至少试着创造一种速度的感觉,种感觉的快慢往往比它实际的速度更重要。

一种可以帮助你的技术叫做骨架屏幕。骨架布局是页面的一个版本,在加载内容时显示。骨架屏幕给用户以速度的印象(大多数用户会认为加载速度比实际快得多)。

网页设计中的边缘设计(图1)

linkedIn使用框架屏幕给人以速度的印象

在纯CSS中检查这个Codepen例子的骨架效果。脉冲的效果让用户感觉网站是活的,内容是加载的。

2、设计空的状态

在你的应用程序或网站中,应该有数据填充的单独的屏幕在某些情况下是不可能显示的。例如,在一个健身应用程序中,用户挑战的屏幕会在第一次体验中被清空(仅仅是因为用户还没有遇到任何挑战)。作为设计人员,我们需要考虑页面在这种情况下的样子。显示空白页不是正确的做法。相反,我们可以提供如何用数据填充页面的说明。在iOS中,Khaylo的练习是一个很好的例子,说明了如何使用空白空间来创建上下文。

网页设计中的边缘设计(图2)

页面上的空白可以用来清楚地说明如何开始

3、处理用户或系统错误

每个用户与系统的交互都可能是错误的潜在来源。当用户需要提供数据输入时,错误状态尤其常见。我已经提到,最好是防止错误发生在第一个地方,这个规则应该应用于用户输入。但是当涉及到用户输入时,我们应该着重处理以下潜在的问题:

用户输入的数据无效。例如,用户在签出期间可能会将信用卡号错误输入。在这种情况下,应用程序应该提供详细的错误消息,帮助用户检测问题的根源。

由于技术问题,系统无法进行。在这种情况下,错误消息应该声明它的系统问题,而不是用户的。这将防止用户重新提交数据。

在这两种情况下,都应该确保应用程序能够优雅地处理错误。错误信息应该以一种清晰的、用户友好的语言(不允许使用行话)来写,系统应该提供一个精确的解决方案(这可能是一条指令或其他可能有用的方法)。

4、零结果

大多数电子商务网站和应用程序都提供搜索功能。在搜索功能中最常见的可用性问题之一是当用户看到空白页面时,会发现"0结果"。"在没有结果的情况下把某人丢到一个页面上是很令人沮丧的。"特别是如果他们已经尝试了几次。

如果你设计你的搜索功能考虑使用以下技术:

拼写检查和建议。有时,用户没有得到任何结果,仅仅是因为他们错误地输入了一个搜索查询。当系统检测到一个错误的项目并根据最可能的查询提供搜索结果时,它非常有用。另一个对用户非常有用的技术是自动完成建议。这减少了用户输入的工作量,并防止他们在一开始就输入错误的查询。

网页设计中的边缘设计(图3)

Amazon理解这个查询中用户的意思是"Amazon Alexa"。

提供有价值的选择。当没有匹配的搜索结果时,您可以提供特色内容或任何其他有价值的选择。例如,在电子商务网站的上下文中,这可能是同类产品。

网页设计中的边缘设计(图4)

简单地比较HP和Amazon的零搜索结果页面。惠普的零结果页面对用户来说是一个死胡同。相反,亚马逊提供了进一步搜索和推广相关产品的建议。

如何找到边缘案例?

一些设计师认为,设计边缘案例类似于预期的意外。但事实上,绝大多数的边缘案例都可以在产品发布之前预测。有两种方法可以帮助你:

设计回顾:为了创造伟大的设计,你应该积极地寻找边缘案例。设计评审是一个非常有用的技术,可以帮助产品团队发现许多潜在的边缘案例。在产品设计过程的早期进行设计评审。为了获得更好的结果,邀请开发人员和其他团队成员参与这样的会话是很好的。

与真正的用户进行测试:在其他团队成员的帮助下,尽早寻找边缘案例是一个很好的方法,但它不能保证你会发现所有潜在的摩擦源。只有与真正的用户进行测试,才能帮助你了解人们是如何使用你的产品的,以及他们面临的问题。与此同时,值得说的是,严格的适度的可用性测试不会仅仅因为用户经常被告知要做什么和按什么顺序,就会暴露出大量的边界情况。所以最好给用户一个机会去尝试一个系统,给他们更多的时间和更灵活的任务。

结论

当我们设计产品时,我们经常将帕累托原则应用于我们的设计;我们关注的是大多数用户的需求,应用80/20规则,并开发用户体验,以实现最可能的交互场景。在大多数情况下,这允许我们为用户创造良好的用户体验。但是注重细节是区分优秀设计和优秀设计的真正原因。边缘案例的设计是关注细节的一个很好的例子。

本文来自投稿,不代表科技代码立场,如若转载,请注明出处https://www.cwhello.com/217267.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
上一篇 2023年2月14日 01:36
下一篇 2023年2月14日 01:36

相关推荐

  • 网页设计技巧:排版设计的四大黄金原则

    排版是网页设计中最基本的知识,作为专业的网页设计师,如果没有很好地掌握排版设计技巧,你的界面设计可能就会经常出现时好时坏的情况。排版设计需要注意什麽?留意以下排版设计的四大黄金原则,你也能让排版能力...

    2022年6月25日 建站资讯
    0169
  • 2022年即将流行的UI设计趋势:新粗野主义风格

    粗野主义风格,就像他名字所暗示一样,由一堆形态结构粗犷不羁的元素,承载着鲜艳的色彩,在拙稚粗劣的排版布局之下,所呈现出来的UI设计作品。然而,这种简单且粗暴的UI设计风格未必是所有品牌运用。 而新粗野主...

    2022年6月20日 建站资讯
    0329
  • 网站页面交互动画制作的9条基本原则

      时间和节奏:页面当中动画的总时长与每帧动画间的距离(比如是先快後慢,还是先慢後快) 缓入和缓出:页面设计为交互使用动画元素的时候,必须符合现实世界规律,物体不能凭空运动和停止,有特定的加速和...

    2022年6月25日
    0151
  • 浅谈长滚动页设计

      长滚动页面以及无限滚动式页面已经彻底地流行开来,成为了页面设计的常规形式。这两种设计形式并不是巧合,当用户向下进行滚动的时候,所需要的内容与页面会自然地呈现出来,在此过程里通常不会涉及到额外...

    2022年6月25日
    0115
  • 弹窗的系统性概述

    首先,常见的弹窗一般有以下的3种: 系统自动弹出给用户的提醒 需要用户作出选择的类型 对用户的操作给予反馈的类型 其实,除了这点还有最为突出的一种类型:呈现网站的广告。而广告类的弹框类型是如今使用最为频...

    2022年6月25日
    0192
  • 卡片的三个迷人之处

    内容块 卡片形式进行页面设计,能够将信息以区块的样式集合到一起,比较符合如今的碎片化、简短化的浏览喜好。再者,内容块能够让信息更容易被阅读,以及分类明确。 易挖掘 卡片同样是承载故事、情感化设计形式的...

    2022年6月25日
    0126
  • 母婴电商网站设计案例——Bliss & Bless

    随着互联网信息发展,年轻一代父母的育儿观念和消费观念都在逐渐改变,从以前的只求解决温饱,到现在升级到育儿产品及服务消费,未来新一代父母将会在育儿产品及服务方面上投入得越来越多。注重服务和体验的母婴...

    2022年6月25日
    0241
  • 如何做好电商体验设计?6个章节复盘京东电器实战案例。

    随着 3 年疫情影响,全球经济下行,消费者更加关注性价比高的货品,今年京东 11.11 以"给生活多点实在"为主题,以更简单、更大力度的优惠举措,更丰富的趋势新品和爆款好物,更全面、更贴心的服务体验 ...

    2023年3月7日 SEO操作
    04

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息