網(wǎng)站建設(shè)通過戰(zhàn)略設(shè)計(jì)提升用戶體驗(yàn)和可信度發(fā)布者：本站     時(shí)間：2022-05-28 11:05:30

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

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

病人們?nèi)娜獾匦湃吾t(yī)院和醫(yī)生，因此醫(yī)院的網(wǎng)站應(yīng)呈現(xiàn)最真實(shí)和可信的信息。

二、為什么決定重新設(shè)計(jì)？Why did I decide to redesign the website?

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

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

出于這樣強(qiáng)烈的動(dòng)機(jī)，我決定重新設(shè)計(jì) Rainbow 的網(wǎng)站，解決所有我發(fā)現(xiàn)的問題。

三、舊版網(wǎng)站初見面 Do you want to see the old website?

準(zhǔn)備好了嗎！讓我們開始吧~

免責(zé)聲明：以下羅列的是網(wǎng)站的一些主要問題。然而，并不是所有的問題僅靠設(shè)計(jì)師就可以解決，很多問題不是僅僅依靠設(shè)計(jì)師就能解決的，設(shè)計(jì)師并不是神！

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

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

所以這里是我發(fā)現(xiàn)可以改進(jìn)的機(jī)會(huì)點(diǎn)：

沒有直接的聯(lián)系方式

預(yù)約表單的設(shè)計(jì)很糟糕

整個(gè)網(wǎng)站的文字太多（ 感覺就像你在讀一篇文章 ）

看起來過時(shí)且缺乏置信度

缺乏引導(dǎo)和指示

有多個(gè) “行動(dòng)按鈕”（ 會(huì)讓用戶對(duì)選擇哪個(gè)操作產(chǎn)生疑惑 ）

色彩對(duì)比度差

圖標(biāo)的缺乏一致性，并且有許多無意義的圖形

四、美學(xué)可用性效應(yīng) Aesthetic Usability Effect

它指的是用戶傾向于認(rèn)為更漂亮的產(chǎn)品更有用。漂亮的界面設(shè)計(jì)可以讓用戶對(duì)微小的可用性問題更加寬容—— 即使它們實(shí)際上并沒有更有效或高效。

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

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

五、信息架構(gòu) Information Architecture

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


在地基準(zhǔn)備好之后，是時(shí)候在澆筑水泥了，讓我們深入了解重新設(shè)計(jì)的過程……

六、設(shè)計(jì)過程 Design Process

1. “主頁橫幅”板塊


在舊版設(shè)計(jì)中，重點(diǎn)放在了錯(cuò)誤的地方。例如有多個(gè) CTA 按鈕會(huì)讓用戶感到困惑，不知道首先應(yīng)該點(diǎn)擊哪一個(gè)，在這種情況下“提交” 和 “預(yù)約”會(huì)引導(dǎo)用戶填寫表單，但只有你點(diǎn)擊之后才知道具體的內(nèi)容。

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

作為設(shè)計(jì)師，最不應(yīng)該犯的錯(cuò)誤就是讓用戶感到困惑，因此要盡可能避免此類的情況。


在新的設(shè)計(jì)中，地點(diǎn)信息的尺寸變小了，但仍然具備可用性。放大和強(qiáng)化大標(biāo)題有助于建立可信度，且標(biāo)題內(nèi)容很清晰地傳遞了所提供產(chǎn)品和服務(wù)的信息，在此處使用正確的詞語和語句非常重要，因?yàn)檫@對(duì)用戶來說是醫(yī)院給他們留下的第一印象。

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

刪除多余的 CTA （行動(dòng)按鈕）可以消除用戶對(duì)服務(wù)產(chǎn)生的困惑。

2. “預(yù)約表格”板塊


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

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


在新版設(shè)計(jì)中，我將表單分為三個(gè)部分，因?yàn)橐淮涡匀o用戶 7-8 個(gè)填寫框會(huì)給用戶帶來較大的認(rèn)知負(fù)擔(dān)。同時(shí)還添加了一個(gè)進(jìn)度條，讓用戶可以了解到他執(zhí)行到了填寫的第幾步，還有多久才能完成預(yù)約任務(wù)。

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

3. “附加信息”板塊

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


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

4. “服務(wù)內(nèi)容”板塊


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


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

5. 圖標(biāo)不一致


在舊版設(shè)計(jì)中，我發(fā)現(xiàn)一個(gè)非常基本和常見的錯(cuò)誤，那就是圖標(biāo)的不一致和無意義的使用。您可能沒有意識(shí)到這一點(diǎn)，但它確實(shí)在可信度方面發(fā)揮了作用，因?yàn)閳D標(biāo)與文本的不匹配，這讓用戶的腦海中產(chǎn)生一種疑惑，即“我應(yīng)該相信這家醫(yī)院嗎？如果他們不解決實(shí)際問題怎么辦？” 這聽起來很扯，但實(shí)際上是真實(shí)發(fā)生的。

此外，在用戶瀏覽網(wǎng)站進(jìn)行快速閱讀時(shí)，諸如“藝術(shù)狀態(tài)”和“高級(jí)團(tuán)隊(duì)”之類的短語沒有意義，而且用戶不會(huì)去閱讀網(wǎng)站上的每一個(gè)字。


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

文案與視覺效果一樣重要，因?yàn)樗鼈兌冀o用戶體驗(yàn)造成很大的影響。

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


在舊的設(shè)計(jì)中，這一板塊非常重要，因?yàn)樗兄谟脩粼诰o急情況下找到所有最近的分支機(jī)構(gòu)。同理，添加不必要和重復(fù)的文字會(huì)建立認(rèn)知障礙，增加認(rèn)知負(fù)擔(dān)。

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


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

7. “用戶推薦”板塊


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


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

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

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


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

9. “獲獎(jiǎng)經(jīng)歷”板塊


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

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