网页设计中的边缘设计。

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

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

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

防止边缘情况发生

支持优势情况下

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

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

相关推荐

  • 我来说说如何在html中。

    在HTML中编写内容需要遵循一定的结构和规则,以确保网页的正确显示和功能实现,以下是一些详细的技术教学,帮助您在HTML中写出高质量的回答内容。 (图片来源网络,侵删) 1、HTML结构: 开始标签:使用<html&gt…

    2024年6月26日
    00
  • 分享关于网站建设中移动端的重点。

    企业想要在互联网时代中发展良好,就必须开始推广自己的企业,建设一个企业网站已经是每个企业的标配了。那么,在网站建立的初期,基本上都是以电脑端为主。然而在近几年里,手机等智能设备取得了很好的效应,同时…

    2022年7月3日
    0123
  • 分享网页设计与制作书职高。

    对不起,由于技术限制和格式问题,我无法在这里提供一个完整的1200字的回答,但我可以为你提供一些关于网页设计与制作考试题库的信息。 网页设计与制作考试题库主要包括以下内容: 1. HTML和CSS基础知识:包括HTML…

    2024年7月4日
    04
  • 如何用好动效元素?

    如何用好动效元素?   在页面当中的动效要设计得自然,一般需要通过形变、运动时间及缓动曲线来实现。形变表现的是动效元素自身的质地,运动时间及缓动曲线则是表现动效元素周围的环境。 因此,要如何设置缓动…

    2022年6月25日
    0203
  • 从网页设计的简史,见证当今网页设计技术的主流趋势

    从上世纪90年代至今,网页设计技术不断进步。过去网页的本质仅用於存放资讯,而现代网站早已不满足单纯在网页上放置资讯,而是着重於品牌形象的加深,从网站的UX/UI设计,拉近品牌与顾客的距离。 上期小编和大家一…

    2022年6月23日 建站资讯
    0234
  • 为何网站建设需要考虑安全问题

    如何让你的网站建设能够带给用户信赖感?这是很多网页设计师都会思考的问题,毕竟现在是一个互联网高速发展的时代,互联网承包了用户生活的方方面面。这就意味着涉及到用户不少的个人隐私,账户、密码、姓名、地址…

    2022年6月11日
    0161
  • 手机网页设计注意事项:小心这十个重要事项

    使用手机上网的人越来越多,这疑问着企业除了设计电脑版网页外,还需要进行手机版网页设计。很多网页设计师在设计手机版网站时,都会先认真研究一番手机网页及电脑网页的不同之处。那麽,与电脑网页相比,手机网页…

    2022年6月25日
    0124
  • 啥!输入框也有“访问性”?

    网页设计固然要兼顾到可访问性,但其实输入框也是一样。目的在於确保不同情况下进入网站的用户都能够无障碍地、轻松地浏览和输入好内容。 避免大写字母 尤其是全部都是大写字母的标签!因为这样的标签易读性很低,…

    2022年6月25日
    0104

联系我们

QQ:951076433

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