UI：UX 案例研究：通过战略设计提升用户体验和可信度.docx

《UI：UX 案例研究：通过战略设计提升用户体验和可信度.docx》由会员分享，可在线阅读，更多相关《UI：UX 案例研究：通过战略设计提升用户体验和可信度.docx（22页珍藏版）》请在第一文库网上搜索。

1、UI/UX案例研究：通过战略设计提升用户体验和可信度一、医院简介 About the hospitalRainbow是规模最大、最先进的综合医疗机构之一，为有特殊需要的儿童和家庭提供服务。他们利用最先进的外科技术为医患来提供全方位的住院和门诊服务。病人们全心全意地信任医院和医生，因此医院的网站应呈现最真实和可信的信息。二、为什么决定重新设计？ Why did I decideto redesign the website?2020年3月，我姐姐怀上了她的第一个孩子，我们决定寻找附近最好的医院,向医生咨询一下。需要注意，当时印度还处在因疫情封锁的时期。这要感谢 Rainbow 的 SEO（ Se

2、arch Engine Optimization 搜索引擎优化）,他们的网站是第一个搜索结果，我们想要打电话联系一下医院，但我们找遍整个网站，也没有邮箱和电话号码。如果有人遇到紧急情况，不能直接联系到医院，很有可能就会发生危险。出于这样强烈的动机，我决定重新设计Rainbow的网站，解决所有我发现的问题。三.旧版网站初见面Do you want to see theold website?准备好了吗！让我们开始吧免责声明：以下罗列的是网站的一些主要问题。然而，并不是所有的问题仅靠设计师就可以解决，很多问题不是仅仅依靠设计师就能解决的，设计师并不是神!首先我自己进行了一次全面的启发式分析口（启发

3、式分析用于确定产品的常见可用性问题，包括让评估者检查界面，并判断其是否符合公认的可用性原则）。毕竟，我是一名UI/UX设计师！（1启发式分析是一种为计算机软件做可用性检查的方法，以找出在UI设计时存在的可用性的相关问题。启发式分析一般是由一到三个分析员来执行，主要是对UI进行检查，发现其是否与可用性的原则相符，再将结果反馈给设计者。）所以这里是我发现可以改进的机会点:没有直接的联系方式预约表单的设计很糟糕整个网站的文字太多（感觉就像你在读一篇文章）看起来过时且缺乏置信度 缺乏引导和指示 有多个行动按钮（会让用户对选择哪个操作产生疑惑） 色彩对比度差 图标的缺乏一致性，并且有许多无意义的图形四、

4、美学可用性效应Aesthetic UsabilityEffect它指的是用户倾向于认为更漂亮的产品更有用。漂亮的界面设计可以让用户对微小的可用性问题更加宽容即使它们实际上并没有更有效或高效。让用户觉得产品或服务是合法、可靠且性价比最高的最简单方法之一就是让它传递给用户专业的感觉。因此，通过拥有一个非常漂亮的网站，可以让用户觉得产品/服务是优质的。尤其对医院来说，可信度和信誉起着至关重要的作用。五.信息架构 Information Architecture困扰我的另外一件事是网站内容的架构，我希望网站的每个部分都能够发挥自己的作用。OLD DESIGN首屏（网页的颈滚动区域）福介信息点科宣分类我

5、们的客户总部信息推荐语所获奖项&页脚西屏网页的覆滚动区域）项订步爨医生简介新功观我们的服务我们的客户推荐语总部信息所获奖项&页脚NEW DESIGN在地基准备好之后，是时候在浇筑水泥了，让我们深入了解重新设计的过程六、设计过程Design Process1 .“主页横幅板块OLD HERO SECTION强调地理位置w跳乏可信度W2个行刘拎轩1在紧急情况下无法直接获取医院联系方式在旧版设计中，重点放在了错误的地方。例如有多个CTA按钮会让用户感到困惑，不知道首先应该点击哪一个，在这种情况下提交和预约会引导用户填写表单，但只有你点击之后才知道具体的内容。除此之外，预约表单的页面给用户的反馈是模糊

6、的如果某人处于紧急情况,他/她不知道接下来会发生什么？是否需要花费很多时间等待？在提交请求后是否会接到医院的电话？作为设计师，最不应该犯的错误就是让用户感到困惑，因此要尽可能避免此类的情况。NEW HERO SECTION地点的强调减弱（增加文案的可信w度和说服力单个行动按钮HomeRainbow今直接的联系方式Srvtcc$ Centres增加用户较为关注的信息入口在新的设计中，地点信息的尺寸变小了，但仍然具备可用性。放大和强化大标题有助于建立可信度，且标题内容很清晰地传递了所提供产品和服务的信息，在此处使用正确的词语和语句非常重要，因为这对用户来说是医院给他们留下的第一印象。添加了一些重要

7、的链接。如主页、中心服务，帮助用户在登陆页就可以找到所有重要信息的入口，我还在顶部添加了联系方式，以便在紧急情况下能直接联系到医院。删除多余的CTA （行动按钮）可以消除用户对服务产生的困惑。2 .”预约表格板块SUthMoM旧版预约表格GET IN TOUCH WITH USHyderabadSUBMIT在医院网站上，“我感兴趣”的内容没有意义选择行业也没有意义在旧版设计中，预约表格的设计有冗余的部分。像我感兴趣这样的信息在医院网站上完全没有意义,更适合用在Netflix等需要个性化推荐feed流的网站，但在这里是多余的。选择行业也是同样的道理，放在预约表格中会产生混乱的感觉，我们可以增加日

8、期和时间的信息，以确保用户能在合适的时间收到医院的回复。新预定表格1添加进度条：保证用户对任务的掌控感添加插图让表格保持吸引力增加预约日期与时间的信息在新版设计中，我将表单分为三个部分，因为一次性塞给用户7-8个填写框会给用户带来较大的认知负担。同时还添加了一个进度条，让用户可以了解到他执行到了填写的第几步,还有多久才能完成预约任务。而且在旧版设计中，无法预约特定日期和时间，所以我增加了这部分的信息。此外，添加插画和图像可以让表格保持吸引力，如果有人在紧急或紧张的情况下填写表格，还能起到舒缓情绪的作用。3-附加信息”板块文字太多，并且没有给出有效信息旧版-“附加信息”板块WcKompawM s

9、a Wonen and CMdren Ho$pUis ues mth $pecot nes Our centres utdat upsy, wgcNMnmrou)hs to otter a lull q中 ot 5ben Md outpMient wrvicet在旧版设计中，有一些关于医院的附加信息，但字体太小，不能引起用户的任何注意。如果将这些信息良好的呈现给用户，这将有助于增加医院的信任度和可信度。所以我把这段文字移到了主页横幅里，并尝试在新设计中添加一个新板块。新版-“附加信息”板块4 easy steps to book an appointment通过这一板块添加预约预定的信息ico

10、n让文本更易理解在新设计中，我添加了一个新板块，告知用户预约所需的步骤，它同时也作为用户指南，以防用户不清楚如何填写表格并告诉用户预约过程是如何进行的。还添加了 Icon增加用户的记忆点。4 .“服务内容”板块旧版-“服务内容”板块KEY SPECIALITIES文字内容太多，增加了用户的认知负担CHILO CARE不直观缺乏可解释性在旧版设计中，服务部分的文字内容太多，增加了用户的认知负担。同样在我的启发式分析中，我发现我无法知道是否必须单击女性健康才能找到有关它的详细信息，因为没有悬停交互（这让我想到了可用性解释的问题）。新版-“服务内容”板块使用简洁的文字 增加箭头提升可解释性 Icon

11、和卡片的形式更加直观在新版设计中，我删除了不需要的文本并引入了图标以让用户更加直观地了解和记住服务。添加箭头以增强可解释性，以便用户能知道如何去查看了解所有的服务。5 .图标不一致不一致且无意义的icon 旧版-“为什么选择我们”WHY CHOOSE US?State-of-the-art向 30000*LxJ Morv Mr 30000*NABHActrMMM& Team of highlyKid-fnendlyand糟糕的文案表述在旧版设计中，我发现一个非常基本和常见的错误，那就是图标的不一致和无意义的使用。您可能没有意识到这一点，但它确实在可信度方面发挥了作用，因为图标与文本的不匹配，这

12、让用户的脑海中产生一种疑惑，即我应该相信这家医院吗？如果他们不解决实际问题怎么办？ 这听起来很扯，但实际上是真实发生的。此外，在用户浏览网站进行快速阅读时，诸如艺术状态和高级团队之类的短语没有意义，而且用户不会去阅读网站上的每一个字。一致且符合意义的icon新版-为什么选择我们”nleKive Can?Why Choose Us?NABHAaMtMrc:震 30000.含 Kid Friendi)-优化后的文案在新版设计中，我添加了与文本一致且匹配的Icon。此外，我修改了一些文案的表述，例如艺术状态改为重症监护，高级团队改为专家团队。文案与视觉效果一样重要，因为它们都给用户体验造成很大的影响

13、。6 . ”医疗中心直询板块旧版-“医疗中心查询板块CENTRES不一致且无意义的icon RAINBOW CHILDREN S HOSPITAL & BIRTHRIGHT.BANJARA HILLSMOW*SOOOMihOMlRAINBOW CHILDREN S HOSPITAL & BIRTHRIGHTBY RAINBOW VIKRAMPURIRAINBOW CHILDREN S HOSPITAL & BIRTHRIGHTBY RAINBOW. KONDAPUR在新版设计重同样可以生链接到谷歌地图Hoc Hot M33 2c / U Oppo KocOkkx.M4MMCMMikl WXVR

14、AINBOW CHILDREN S HOSPITAL &BIRTHRIGHT. KONDAPUR3wy加班 Id Ra jte* EncUe. X?K Gx，RAINBOW CHILDREN S HOSPITAL & BIRTHRIGHT-HYDERNAGARRAINBOW CHILDREN S HOSPITAL & BIRTHRIGHT-LB NAGAR, HYDERABADOmwuK$00071在旧的设计中，这一板块非常重要，因为它有助于用户在紧急情况下找到所有最近的分支机构。同理，添加不必要和重复的文字会建立认知障碍，增加认知负担。我喜欢他们将谷歌地图连接到网站的方式，这样用户就可以轻松地找到它们的位置。毕竟，还是在某些方面优化了用户体验的。旧版-“用户推荐”板块