編輯導語：產品往往需要在不斷的改進中給用戶更加完善的體驗，以更加契合業(yè)務場景，讓用戶更愿意“相信”你的產品和服務。本篇文章里，作者就結合實際案例，對如何在設計層面上提升用戶體驗與用戶信任一事做了總結，一起來看。

一、醫(yī)院簡介?About the hospital

Rainbow 是規(guī)模最大、最先進的綜合醫(yī)療機構之一，為有特殊需要的兒童和家庭提供服務。他們利用最先進的外科技術為醫(yī)患來提供全方位的住院和門診服務。

病人們全心全意地信任醫(yī)院和醫(yī)生，因此醫(yī)院的網站應呈現最真實和可信的信息。

二、為什么決定重新設計？Why did I decide to redesign the website?

2020 年 3 月，我姐姐懷上了她的第一個孩子，我們決定尋找附近最好的醫(yī)院，向醫(yī)生咨詢一下。需要注意，當時印度還處在因疫情封鎖的時期。

這要感謝 Rainbow 的 SEO（ Search Engine Optimization 搜索引擎優(yōu)化），他們的網站是第一個搜索結果，我們想要打電話聯系一下醫(yī)院，但我們找遍整個網站，也沒有郵箱和電話號碼。如果有人遇到緊急情況，不能直接聯系到醫(yī)院，很有可能就會發(fā)生危險。

出于這樣強烈的動機，我決定重新設計 Rainbow 的網站，解決所有我發(fā)現的問題。

三、舊版網站初見面?Do you want to see the old website?

準備好了嗎！讓我們開始吧~

免責聲明：以下羅列的是網站的一些主要問題。然而，并不是所有的問題僅靠設計師就可以解決，很多問題不是僅僅依靠設計師就能解決的，設計師并不是神！

首先我自己進行了一次全面的 啟發(fā)式分析[1]（啟發(fā)式分析用于確定產品的常見可用性問題, 包括讓評估者檢查界面, 并判斷其是否符合公認的可用性原則）。畢竟，我是一名 UI/UX 設計師！

（[1]啟發(fā)式分析是一種為計算機軟件做可用性檢查的方法，以找出在 UI 設計時存在的可用性的相關問題。啟發(fā)式分析一般是由一到三個分析員來執(zhí)行，主要是對 UI 進行檢查，發(fā)現其是否與可用性的原則相符，再將結果反饋給設計者。）

所以這里是我發(fā)現可以改進的機會點：

• 沒有直接的聯系方式
• 預約表單的設計很糟糕
• 整個網站的文字太多（ 感覺就像你在讀一篇文章 ）
• 看起來過時且缺乏置信度
• 缺乏引導和指示
• 有多個 “行動按鈕”（ 會讓用戶對選擇哪個操作產生疑惑 ）
• 色彩對比度差
• 圖標的缺乏一致性，并且有許多無意義的圖形

四、美學可用性效應?Aesthetic Usability Effect

它指的是用戶傾向于認為更漂亮的產品更有用。漂亮的界面設計可以讓用戶對微小的可用性問題更加寬容 —— 即使它們實際上并沒有更有效或高效。

讓用戶覺得產品或服務是合法、可靠且性價比最高的最簡單方法之一就是讓它傳遞給用戶專業(yè)的感覺。因此，通過擁有一個非常漂亮的網站，可以讓用戶覺得產品/服務是優(yōu)質的。

尤其對醫(yī)院來說，可信度和信譽起著至關重要的作用。

五、信息架構?Information Architecture

困擾我的另外一件事是網站內容的架構，我希望網站的每個部分都能夠發(fā)揮自己的作用。

在地基準備好之后，是時候在澆筑水泥了，讓我們深入了解重新設計的過程……

六、設計過程?Design Process

1. “主頁橫幅”板塊

在舊版設計中，重點放在了錯誤的地方。例如有多個 CTA 按鈕會讓用戶感到困惑，不知道首先應該點擊哪一個，在這種情況下“提交” 和 “預約”會引導用戶填寫表單，但只有你點擊之后才知道具體的內容。

除此之外，預約表單的頁面給用戶的反饋是模糊的——如果某人處于緊急情況，他/她不知道接下來會發(fā)生什么？是否需要花費很多時間等待？在提交請求后是否會接到醫(yī)院的電話？

作為設計師，最不應該犯的錯誤就是讓用戶感到困惑，因此要盡可能避免此類的情況。

在新的設計中，地點信息的尺寸變小了，但仍然具備可用性。放大和強化大標題有助于建立可信度，且標題內容很清晰地傳遞了所提供產品和服務的信息，在此處使用正確的詞語和語句非常重要，因為這對用戶來說是醫(yī)院給他們留下的第一印象。

添加了一些重要的鏈接。如主頁、中心服務，幫助用戶在登陸頁就可以找到所有重要信息的入口， 我還在頂部添加了聯系方式，以便在緊急情況下能直接聯系到醫(yī)院。

刪除多余的 CTA （行動按鈕）可以消除用戶對服務產生的困惑。

2. “預約表格”板塊

在舊版設計中，“預約”表格的設計有冗余的部分。像 “我感興趣” 這樣的信息在醫(yī)院網站上完全沒有意義，更適合用在 Netflix 等需要個性化推薦 feed 流的網站，但在這里是多余的。

選擇行業(yè)也是同樣的道理，放在預約表格中會產生混亂的感覺，我們可以增加日期和時間的信息，以確保用戶能在合適的時間收到醫(yī)院的回復。

在新版設計中，我將表單分為三個部分，因為一次性塞給用戶 7-8 個填寫框會給用戶帶來較大的認知負擔。同時還添加了一個進度條，讓用戶可以了解到他執(zhí)行到了填寫的第幾步，還有多久才能完成預約任務。

而且在舊版設計中，無法預約特定日期和時間， 所以我增加了這部分的信息。此外，添加插畫和圖像可以讓表格保持吸引力，如果有人在緊急或緊張的情況下填寫表格，還能起到舒緩情緒的作用。

3. “附加信息”板塊

在舊版設計中，有一些關于醫(yī)院的附加信息，但字體太小，不能引起用戶的任何注意。如果將這些信息良好的呈現給用戶，這將有助于增加醫(yī)院的信任度和可信度。所以我把這段文字移到了主頁橫幅里，并嘗試在新設計中添加一個新板塊。

在新設計中，我添加了一個新板塊，告知用戶預約所需的步驟，它同時也作為用戶指南，以防用戶不清楚如何填寫表格并告訴用戶預約過程是如何進行的。還添加了 Icon 增加用戶的記憶點。

4. “服務內容”板塊

在舊版設計中，“服務”部分的文字內容太多，增加了用戶的認知負擔。同樣在我的啟發(fā)式分析中，我發(fā)現我無法知道是否必須單擊“女性健康”才能找到有關它的詳細信息，因為沒有懸停交互（ 這讓我想到了可用性解釋的問題 ）。

在新版設計中，我刪除了不需要的文本并引入了圖標以讓用戶更加直觀地了解和記住服務。添加箭頭以增強可解釋性，以便用戶能知道如何去查看了解所有的服務。

5. 圖標不一致

在舊版設計中，我發(fā)現一個非?；竞统Ｒ姷腻e誤，那就是圖標的不一致和無意義的使用。您可能沒有意識到這一點，但它確實在可信度方面發(fā)揮了作用，因為圖標與文本的不匹配，這讓用戶的腦海中產生一種疑惑，即“我應該相信這家醫(yī)院嗎？如果他們不解決實際問題怎么辦？” 這聽起來很扯，但實際上是真實發(fā)生的。

此外，在用戶瀏覽網站進行快速閱讀時，諸如“藝術狀態(tài)”和“高級團隊”之類的短語沒有意義，而且用戶不會去閱讀網站上的每一個字。

在新版設計中，我添加了與文本一致且匹配的 Icon。此外，我修改了一些文案的表述，例如“藝術狀態(tài)”改為“重癥監(jiān)護”，“高級團隊”改為“專家團隊”。

文案與視覺效果一樣重要，因為它們都給用戶體驗造成很大的影響。

6. “醫(yī)療中心查詢”板塊

在舊的設計中，這一板塊非常重要，因為它有助于用戶在緊急情況下找到所有最近的分支機構。同理，添加不必要和重復的文字會建立認知障礙，增加認知負擔。

我喜歡他們將谷歌地圖連接到網站的方式，這樣用戶就可以輕松地找到它們的位置。畢竟，還是在某些方面優(yōu)化了用戶體驗的。

在新版設計中，我決定添加等軸測圖以保持用戶的參與度和提升直觀性，易于理解。同時保留了舊版設計中的“查看地圖”功能。

7. “用戶推薦”板塊

在舊版設計中， YouTube 視頻的縮略圖看起來有點奇怪，并且跟網站的配色方案也不搭配。還有太多、不對齊和重復的文本讓這一部分看起來丑。本來推薦的主要目的是為醫(yī)院建立信任和信譽，而上述所有的問題都與這一目的背道而馳。

在新版設計中，我刪除了那些丑陋的縮略圖，并用更富有情感和意義的圖片作為代替，試圖與用戶或患者建立聯系。

使用了主題色并刪除了冗余的文本這一部分變得更加簡潔和美觀。

8. “醫(yī)生簡介”板塊

現在是添加到網站的新板塊“醫(yī)生簡介”。引入此部分的主要原因是讓網站更好地展現出醫(yī)院的權威性，以便患者或其家人不會認為他們是在與機器人溝通。放置醫(yī)生的頭像及其數據可以提高安全感和信任感。

9. “獲獎經歷”板塊

現在我們正在設計網站的底部。這一板塊由彩虹醫(yī)院迄今為止獲得的獎項組成，因此會在用戶心中增加信任感和嚴肅感。但是，不對齊和冗余的文本會影響這種感覺的傳遞。同樣根據慣例，聯系方式也應該出現在網站的頁腳或 SEO 部分，但舊版設計中并沒有。

所以我決定將舊版設計的可滾動部分完全刪除并保持簡潔，此外我還添加了一些比較重要入口的鏈接，如家庭、服務和中心，防止用戶一路跑回到頂部導航欄才能找到它們。

此外，根據網站頁腳的設計原則添加聯系方式。

差不多就是這樣，這就是我重新設計網站的整個過程。希望這篇文章能對你產生幫助和獲得洞察。如果你有任何好的想法，歡迎在評論區(qū)留言，一起交流！

本文翻譯已獲得作者的正式授權（授權截圖如下）

原文作者：Srishti Vashishtha

原文地址：https://uxplanet.org/how-i-improved-user-experience-and-credibility-through-strategic-design-ui-ux-case-study-dcf2c109e606

譯者：陳熠璇；微信公眾號：TCC翻譯情報局（ID：TCC-design）；連接知識，了解全球精選設計干貨

本文由@TCC翻譯情報局 翻譯發(fā)布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議