Use information space design principles to make web pages better understood

Transcript

1. 1 HPX meetup Feb 2021 謝任軒, Sean Hsieh of_alpha@hotmail.com Software

   engineer @ Garmin International Use information space design principles to make web pages better understood

2. 2 Agenda •  Introduction •  簡述資訊空間設計原則的概念 •  嘗試實際套用資訊空間設計原則

3. 3 Introduction •  資訊空間設計原則旨在塑造人們對於資訊空間的感知- 使用者身在哪裡? 能做什麼? 能期待尋找什麼?  •  由定義可知，產品開發團隊可以期望掌握設計原則後，

   提升使用者對於服務的理解程度以提高服務使用率及 品質。  •  那麼如何套用資訊空間設計原則呢?

4. 4 資訊空間設計原則的概念

5. 5 1. 實體空間的空間營造 人類如何理解當下所處空間的where/how/ what的呢?  •  實體空間是由具備實體空間的物件組合， 如牆壁、屋頂、 家具等

   •  在實體空間中，使用者可以從特定的傢 俱、符號、事物在特定空間的配置方式 中截取片段線索，因此使用者不需要付 出太多注意力去確認身在何處。 source: 台北和平國中籃球館

6. 6 2. 資訊空間的空間營造-資訊架構設計 所以人類是如何理解資訊空間的where/ how/what呢? •  當人類所處的環境由實體轉到資訊空間 的時候，是將對實體片段線索轉移到語 意元素(導覽選單名稱、主標題、次標題、 單元標題、關鍵字等)，資訊元素，語意

   特徵理解網站所呈現的資訊 •  資訊空間設計原則(資訊架構設計)就是安 排語意元素的原則

7. 7 嘗試實際套用資訊空間設計原則

8. 8 •  接著要研究的是有哪些資訊空間設計原則是開發時可 以注意的 (以下由抽象到具體排序) •  實際套用於正在開發的專案試試看  嘗試實際套用資訊空間設計原則 定義資訊空

   間類型 模組化 與延伸 語意結構 

9. 9 1.定義資訊空間類型 (對應建築類型學) 定義或是找到對應的抽象的資訊空間類型相當重要 1. 同個產業的網頁，主功能的導覽列都有相同的主功能 →使用者弄清楚身在何方，有助於使用者理解與移動  2. 符合某種典型網站的架構，僅改變非結構性的差異

   →有助於與同性質網頁產生區隔  因此在這個階段所要做的事情是找到對應的抽象資訊空間作為樣板 (或框架)

10. 10 尋找對應的網頁類型並套用 Daily Learning讓使用者以自己的偏好挑選文章學習自學軟體工程， 對應到實體空間的建築物比較像圖書館或書店

11. 11 2.模組化與延伸 •  shearing layers越內層的變動 速率越高，而相對穩定的階層 如結構或外觀通常是建築的主 導。  • 

    拆解使變動速率不同的地方獨 立出來，依據變動速率拆分的 子區域組成整體架構例如子網 站或子服務。

12. 12 依據變動速率獨立服務 獨立成單獨的網路服務的好處:  1.  對Crawler server的修改將不會影響到Web server  2. 

    對前端頁面上的修改也不會影響Crawler server的運作

13. 13 3.語意結構 •  語意結構是指每個元素在空間 中的相對重要性 (即資訊階層) •  第一階層導覽列的資訊元素可 定義資訊空間被外界認知的形 式

    •  可以用Sitemap作為溝通的工 具

14. 14 調整網頁的韻律 •  Daily Learning在主頁面上 的文章排版方式在還未搜尋 前屬於Gallery的形式  •  套用韻律及慣用模式的概念:

    可以改變搜尋後的排版方式， 讓使用者感到網站的巧思以 及差異化

15. 15 References •  資訊架構學：網站、App與資訊生態系統規劃（第四版） •  Web design — Use information

    space design principles to make web pages better understood •  Day 18 of #100DaysOfCode: Create Sitemap to Improve SEO

16. 16 Thanks! Any questions? You can find me at: of_alpha@hotmail.com