案例研究｜NASA 網(wǎng)站的現(xiàn)代化再設(shè)計
▲點擊 "TCC翻譯情報局" 關(guān)注，回復(fù) "社群" 加入我們
本文共 4050 字，預(yù)計閱讀 11 分鐘
TCC 情報局的 第 72 篇 干貨分享
2021 年的 第 60 篇
TCC 推薦：大家好，這里是TCC 翻譯情報局，我是張聿彤。本文詳細(xì)介紹了作者作為唯 —— 個用戶體驗設(shè)計師是如何優(yōu)化 NASA 的分公司網(wǎng)站，構(gòu)建良好用戶體驗的。文中闡明了作者在設(shè)計過程中的決策和思考的設(shè)計思維模型，從了解問題到結(jié)構(gòu)問題再到重構(gòu)解決方案，簡潔且行之有效。讓我們一起來看看，作者是如何定義問題，并提出改進(jìn)機會點的，并跟隨作者一起重構(gòu)這一解決方案。
前段時間，我應(yīng)聘了 NASA SEWP（企業(yè)范圍采購解決方案）的 UI 設(shè)計師職位，這是 NASA 的一個的分部門，他們與政府合作并為之提供 IT 相關(guān)的商品和服務(wù)。作為面試過程的一部分，我必須針對關(guān)于他們產(chǎn)品的兩個案例問題提出解決方案：
1. 鑒于 NASA SEWP 從未對其視覺識別（標(biāo)志、排版、配色方案等）進(jìn)行合理的設(shè)計，我們希望看到一些初步的草圖，說明你將如何改進(jìn) SEWP 的品牌形象以使之符合現(xiàn)代美學(xué)，同時又不丟掉作為 SEWP 文化基礎(chǔ)的俏皮精神。（ 預(yù)期成果：大致的Logo、配色方案和排版方案）
2. NASA SEWP 目前的網(wǎng)站更像是一個工具箱，并沒有一個明確的使用邏輯能讓新用戶快速適應(yīng)它。請根據(jù)你的 UX/UI 設(shè)計的經(jīng)驗，評估此網(wǎng)站并概述一些初步的建議，使用戶流更直觀，提供更好的用戶體驗。（請?zhí)峁┐致缘牟輬D和優(yōu)秀的案例參考）
請向我們展示如果這是你的第一個項目，你將如何開始解決這一問題，無需創(chuàng)建原型或任何高保真。
在上次的文章中，我介紹了關(guān)于第一個問題的解決方案，所以在這里我們將對SEWP的主頁和供應(yīng)商查詢工具的頁面布局進(jìn)行一次嘗試，并確定改進(jìn)的機會。
如果你了解我，就知道我喜歡動漫。你可能也知道我認(rèn)為《鋼之煉金術(shù)師：Brotherhood 》是有史以來最棒的動漫。你可能不知道（除非你看過那篇關(guān)于動漫與用戶體驗設(shè)計關(guān)系的文章），設(shè)計就像煉金術(shù)：它包括理解問題，解構(gòu)問題以確定解決方案，并重建新的解決方案進(jìn)行測試或執(zhí)行。我將應(yīng)用這個框架來解決這一問題，我們可以把這一問題陳述為：
我們?nèi)绾沃亟M NASA SEWP 的主頁和供應(yīng)商查詢工具頁面，使其更具吸引力和更直觀？
首先，讓我們明確我們在尋找什么！
1. 了解問題
1. Understanding the Problem(s)
NASA SEWP 當(dāng)前主頁
首先是 NASA SEWP 的主頁，很明顯，在這上面雜亂地擺布著很多信息，沒有一個清晰的流程或方向感，此外該網(wǎng)站也不是響應(yīng)式的。在明確此頁面所存在的問題時，有以下幾點讓我印象深刻：
沒有介紹部分
鏈接和號召性用語太多，層次結(jié)構(gòu)太少
過度擁擠的導(dǎo)航欄
文字太多，沒有圖片
側(cè)面元素可能會分散注意力
灰色的外部背景和頁腳
頁腳鏈接感覺太分散
社交媒體圖標(biāo)的感覺和風(fēng)格不一致
另一個需要優(yōu)化的頁面是供應(yīng)商查詢工具，該工具用于查找可以與政府機構(gòu)簽約的公司，以獲得他們需要的任何服務(wù)或產(chǎn)品。
加載動畫非常不合適，表格滾動了很長時間
該頁面的問題我總結(jié)了以下幾點：
“LOADING” 覆蓋后原圖移位
很難找到過濾器選項
“返回頂部” 按鈕居中，與表格重疊
提供的特定供應(yīng)商的信息很少
非常長的滾動時間（感覺就像無限滾動）
這更多是一個技術(shù)或后端問題，在瀏覽器中按下返回鍵后，理應(yīng)從供應(yīng)商回到表格，但實際情況下卻會讓你回到前一頁而不是表格。
現(xiàn)在我們了解并掌握了問題的背景，現(xiàn)在可以分析如何解決這些問題。在研究解決方案之前，最好有一些靈感來源可供借鑒。讓我們解構(gòu)采購服務(wù)領(lǐng)域的一些案例，看看它們做得好的地方。
2. 解構(gòu)問題
2. Deconstructing Some Examples
采購領(lǐng)域有兩個優(yōu)秀的網(wǎng)站可供我們學(xué)習(xí)，幫助我們實現(xiàn)更新 NASA SEWP 網(wǎng)站的創(chuàng)意，它們就是 IBM 的采購服務(wù)網(wǎng)站和 Carahsoft。首先，這兩個網(wǎng)站都是響應(yīng)式的！在移動設(shè)備上有一個清晰的結(jié)構(gòu)和流程，因此可以任意的擴(kuò)展到更大寬度的屏幕。這兩個網(wǎng)站也有一個浮動導(dǎo)航欄；當(dāng)向下滾動網(wǎng)頁時，用戶隨時可以訪問其他頁面或菜單。首先我們分析一下 IBM 的網(wǎng)站，因為它在 SEWP 當(dāng)前所存在問題的方面做得非常出色。
1）IBM 網(wǎng)站
IBM Procurement Consulting Services 以簡潔而吸引人的方式為用戶提供了場景
IBM Procurement Services 的導(dǎo)航欄簡單但也很完整。他們沒有將所有內(nèi)容都塞在一行中，而是將元素分成兩行。第一行包含 IBM 徽標(biāo)（它會將您帶到 IBM 的主頁）、搜索和賬戶 icon 和一個包含導(dǎo)航鏈接的漢堡式菜單。同時還將移動端可訪問性考慮在內(nèi)，第二行在較大寬度的屏幕上會顯現(xiàn)出來，里面包含了同樣在漢堡菜單中的下拉元素，便于訪問。
還有一個提供背景圖片以及主要和次要 CTA 按鈕的主頁橫幅。在此部分下方是一組浮動鏈接，當(dāng)您向下滾動時，這些鏈接會固定在頁面頂部，對于較長的頁面來說非常有用。IBM 在構(gòu)建良好的用戶體驗方面做得很好。視口右下角還有一個聊天功能，以防人們需要提問或與 IBM 的同事聯(lián)系。
關(guān)于頁面可擴(kuò)展性，從技術(shù)角度來看，IBM 似乎利用了 flexbox 或網(wǎng)格系統(tǒng)來對齊、定位和構(gòu)建其內(nèi)容。內(nèi)容本身也很容易被用戶理解，而且在必要時還使用了圖像和圖表來補充文本。最后，頁腳的設(shè)計很簡單，沒有太多鏈接，并且頁腳中的內(nèi)容（和正上方的 CTA 橫幅）感覺更有條理和整齊。
2）Carahsoft 網(wǎng)站
Carahsoft 遵循與 IBM 類似的結(jié)構(gòu)，因為它具有部分導(dǎo)航元素和內(nèi)容
雖然 Carahsoft 的導(dǎo)航部分占用了更多空間，但它仍然很好地組織了它的元素。第一行包含公司本身的鏈接（職位招聘和介紹等）和一個搜索框，第二行是品牌 LOGO 和聯(lián)系鏈接，占據(jù)了大部分空間，第三行公司的下拉菜單。盡管主頁橫幅較小，但它仍然存在，并以輪播的形式為提供了關(guān)于采購領(lǐng)域的信息。
Carahsoft 通過對信息或鏈接進(jìn)行分組、分割和突出顯示進(jìn)行排版。該網(wǎng)站還包括實時聊天功能，但它確實會占用更多空間，并且在您單擊關(guān)閉按鈕時會完全消失。最后，該網(wǎng)站的頁腳包含了相當(dāng)多的內(nèi)容（比 SEWP 的頁腳內(nèi)容更多），由于其元素的結(jié)構(gòu)是按列排布的，所以當(dāng)縮小視口寬度時，這些列就會折疊成行。
現(xiàn)在我們分析了一些鼓舞人心的例子并總結(jié)出了它們優(yōu)秀的地方，讓我們將這些知識應(yīng)用到重建 NASA SEWP 的主頁中，同時考慮供應(yīng)商查詢工具頁面的相關(guān)元素之間的排版。
3. 重構(gòu)解決方案
3. Reconstructing the Solution
通過將學(xué)習(xí)到的優(yōu)點應(yīng)用到 NASA SEWP 的網(wǎng)頁設(shè)計中，確定了如下的改進(jìn)機會點。
1）主頁
我對主頁提出了如下的改進(jìn)機會點：
包括一個主頁橫幅部分（帶有 1-2 個 CTA 或輪播圖的圖片）
合并和刪除優(yōu)先級較低的 CTA，使用顏色強調(diào)主要 CTA
顯示最重要的導(dǎo)航鏈接，并將其余的放在一個漢堡式菜單里
將文字配以圖像和圖形（也可以考慮使用較短的文本）
在主體或?qū)Ш街邪@些元素
白色是我們的朋友：保持一致的留白
重新排列頁腳元素以使其更具流動性和結(jié)構(gòu)性
使底部的社交 APP 圖標(biāo)保持一致的風(fēng)格（例如從 Font Awesome 中提取）
根據(jù)這些要點，我繪制了主頁概念圖如下圖所示
我嘗試了不同的主頁橫幅結(jié)構(gòu)以及供用戶優(yōu)先瀏覽的內(nèi)容。最終決定當(dāng)然取決于用戶研究和測試，以及對 SEWP 來說 SEO 和轉(zhuǎn)換的優(yōu)先級。為了適應(yīng)當(dāng)代社會現(xiàn)代化發(fā)展程度，尤其是考慮到現(xiàn)在超過一半的網(wǎng)絡(luò)流量發(fā)生在移動設(shè)備上時，我繪制了一些移動 APP 概念圖，以提高該網(wǎng)站的可訪問性。
（說明：我選擇了第一版（V1），因為它占用的垂直空間較少，而且主要內(nèi)容都包含在內(nèi)）
2）供應(yīng)商查詢工具頁面
供應(yīng)商查詢工具本質(zhì)上是一個表格搜索引擎，因此，用戶如果不知道要搜索什么，或者在頁面上得到太多反饋結(jié)果，可能會感到不知所措。牢記這些要點，我提出了以下的改進(jìn)機會點并將它們應(yīng)用到我的草圖中：
將“加載”輪或圖形構(gòu)建到表格中
加入過濾器選項（# 產(chǎn)品、字母、供應(yīng)商類型、合同等）
如果保留 “回到頂部”按鈕，最好將其放在一邊
提供有關(guān)提供商的更多詳細(xì)信息（聯(lián)系方式、經(jīng)常顯示的地址、鏈接等）
每頁顯示一定數(shù)量的搜索結(jié)果（也可以讓用戶控制每頁的瀏覽量）
加入一個后退箭頭按鈕，幫助用戶可返回查找工具頁
與主頁一樣，我也設(shè)計和思考了供應(yīng)商查詢工具頁面的移動端版本， 使用戶在移動端也能夠正常地訪問供應(yīng)商工具及其提供的內(nèi)容。
4. 寫在最后
4. Closing Thoughts
由于 NASA SEWP 從未有過正式的設(shè)計方向，因此承擔(dān)完全改造 UI 以及擴(kuò)展網(wǎng)站的 UX 的角色是一件非常有趣的事情。團(tuán)隊驚喜地發(fā)現(xiàn)我在概述重新設(shè)計概念時考慮了響應(yīng)式設(shè)計和移動端布局，并圍繞是否需要在網(wǎng)站上實現(xiàn)實時聊天的功能進(jìn)行了討論。我主張在用戶測試中將其考慮在內(nèi)，以查看客戶和訪問者是否使用該功能或發(fā)現(xiàn)它的價值。與第一個針對品牌形象改造的測試相同，這個練習(xí)也為我提供了展示設(shè)計方案和促進(jìn)與隊友討論的機會，謝謝閱讀！
原文：https://bootcamp.uxdesign.cc/case-study-a-modernized-redesign-10cefa80e0dd
作者：Ahmed Ayoub
譯者：陳熠璇
審核：吳鵬飛、李澤慧、張聿彤
編輯：孫淑雅
本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）
往期精選文章：
十個技巧幫助你設(shè)計一款在線學(xué)習(xí) APP
這些色彩心理學(xué)知識教你如何傳遞信息
案例研究｜康奈爾大學(xué)副業(yè)社區(qū)網(wǎng)站設(shè)計
Web Vitals —— 谷歌的新一代 Web 性能體驗和質(zhì)量指標(biāo)
網(wǎng)頁設(shè)計師能從日式美學(xué)中學(xué)到什么？
案例研究｜一款為你帶來難忘體驗的美食 APP
如何制作打動面試官的作品集，這里有一份完整的指導(dǎo)手冊
如何做好用戶體驗項目？從一個好計劃開始
如何建立設(shè)計系統(tǒng)
如何把握不同層級用戶的需求：回歸本質(zhì)，打磨信息架構(gòu)
TCC 視野｜2021 年用戶體驗設(shè)計趨勢分析
- 設(shè)計師自習(xí)社區(qū) -
TCC 設(shè)計情報局歡迎小伙伴加入，一起交流設(shè)計知識，了解全球設(shè)計資訊，鍛煉英文能力，發(fā)掘更多可能性～
添加小助手微信，備注「社群」，即可加入讀者群。
