Use information space design principles to make web pages better understood

HPX meetup February 2021

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
   

   View Slide

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

   View Slide

3. 3
   Introduction
   •  資訊空間設計原則旨在塑造人們對於資訊空間的感知-
   使用者身在哪裡? 能做什麼? 能期待尋找什麼?
   •  由定義可知，產品開發團隊可以期望掌握設計原則後，
   提升使用者對於服務的理解程度以提高服務使用率及
   品質。
   •  那麼如何套用資訊空間設計原則呢?
   

   View Slide

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

   View Slide

5. 5
   1. 實體空間的空間營造
   人類如何理解當下所處空間的where/how/
   what的呢?
   •  實體空間是由具備實體空間的物件組合，
   如牆壁、屋頂、 家具等
   •  在實體空間中，使用者可以從特定的傢
   俱、符號、事物在特定空間的配置方式
   中截取片段線索，因此使用者不需要付
   出太多注意力去確認身在何處。
   source: 台北和平國中籃球館
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. 11
    2.模組化與延伸
    •  shearing layers越內層的變動
    速率越高，而相對穩定的階層
    如結構或外觀通常是建築的主
    導。
    •  拆解使變動速率不同的地方獨
    立出來，依據變動速率拆分的
    子區域組成整體架構例如子網
    站或子服務。
    

    View Slide

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

    View Slide

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

    View Slide

14. 14
    調整網頁的韻律
    •  Daily Learning在主頁面上
    的文章排版方式在還未搜尋
    前屬於Gallery的形式
    
    •  套用韻律及慣用模式的概念:
    可以改變搜尋後的排版方式，
    讓使用者感到網站的巧思以
    及差異化
    

    View Slide

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
    

    View Slide

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

    View Slide