Designing For Interaction with Web Interface

2,456 views
2,311 views

Published on

網站互動設計- 初心者限定版
Designing For Interaction with Web Interface

Released for beginners and novices
IxDA Taiwan Group

Published in: Design
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,456
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
59
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Designing For Interaction with Web Interface

  1. 1. Designing for IxD ! Aidan Wu [email_address] with Web Interface
  2. 2. User Interface !?
  3. 3. IPHONE USED BY 1 YEAR OLD BABY http://www.youtube.com/watch?v=oZwKPDvYA2M
  4. 4. WHAT IS USER INTERFACE DESIGN ?
  5. 6. 我們永遠難以掌握 使用者操作系統的方式!
  6. 7. 1 year old baby
  7. 11. UI 設計思考 <ul><li>容錯力:使用者可能會採取不同於你預想的路徑操作 </li></ul><ul><li>識別:要求使用者識別一些東西比回憶 ( 記憶 ) 好 </li></ul><ul><li>安排:一步步的引導使用者 </li></ul>
  8. 12. Design is not just what it looks like and feels like. Design is how it works. —   Steve Jobs
  9. 13. Slide to unlock
  10. 14. PUSH OR PULL … OR SLIDE ?
  11. 15. UI 設計思考 <ul><li>盡可能讓 Controls 是可見的 </li></ul><ul><li>確保 Mapping 是清楚的 </li></ul><ul><li>注意經驗轉移效應 </li></ul><ul><li>提供適度回饋 </li></ul>
  12. 16. 使用者是掃描網頁,而非閱讀
  13. 17. Baba (Father)
  14. 18. USERS DON’T READ, THEY SCAN <ul><li>瀏覽頁面過程中,使用者可能會試著忽略一些看起來類似廣告的區塊 (big, flashy, and colourful) 。 </li></ul><ul><li>瀏覽頁面過程中,使用者不會特別記憶目前所在位置 (navigation, site structure) 。 </li></ul><ul><li>頁面中新物件的出現,能提高使用者停留注意的機率。 </li></ul>
  15. 19. EXAMPLES OF EYE TRACKING RESEARCH USA.gov
  16. 20. BANNER BLINDNESS <ul><li>容易讓 USER 誤以為廣告的因素: </li></ul><ul><li>區塊面積、比例類似廣告格式。 </li></ul><ul><li>動態的內容展示。 </li></ul><ul><li>區塊大小過於龐大。 </li></ul><ul><li>區塊色彩過於繽紛。 </li></ul><ul><li>區塊放於頁面中最常出現廣告的位置上。 </li></ul>
  17. 21. EMBEDDED IN ARTICLE TEXT 頁面自然共融的廣告 AD
  18. 22. 人臉更具有吸引力
  19. 23. 別期望他們會往下捲動頁面
  20. 24. 使用者第一次造訪網站時 只有 23% 進行捲動操作 Nielsen Norman Group
  21. 25. 使用者第一次造訪網站時 只會花不到 2 分鐘 瀏覽 Nielsen Norman Group
  22. 26. 使用者第一次造訪網站時 只看約 60% 內容 Nielsen Norman Group
  23. 27. 關鍵 30 秒 內該傳達的訊息 <ul><li>他們來到什麼樣的網站 </li></ul><ul><li>可以做哪些事情 </li></ul><ul><li>能給他們帶來什麼好處 </li></ul><ul><li>最新產品或最新發展內容 </li></ul>
  24. 28. CASE: GAMESPOT
  25. 29. 簡化&加速任務
  26. 30. UI 設計思考 <ul><li>這個元素或流程  可以簡化使用者的任務嗎? </li></ul><ul><li>這樣的設計  能為使用者帶來更多的便利嗎? </li></ul><ul><li>當多個元素混搭時  是否仍保有原初精神? </li></ul>
  27. 31. THE 3-CLICK RULE 1 2 3 bye~
  28. 32. FITTS' LAW T 行動時間 A 從起始點到目標中心點的距離 W 目標寬度 ( 大小 ) 螢幕上按鈕的『大小』與相隔之『距離』會影響點選的績效 最常用的功能集中在 menu item 下方兩側
  29. 33. CASE: BROWSER’S TAB
  30. 34. CASE: GOOGLE CHROME
  31. 35. 別想一次塞太多資訊
  32. 36. THE MAGICAL NUMBER 7 ± 2 ITEMS 人類一次能處理的資訊數上限 George A. Miller (1956)
  33. 37. CASE: WHAT'S ON THE MENU? ASUS EeePC acer Aspire One
  34. 38. CASE: GOOGLE PRODUCTS MENU
  35. 39. 妥善控制比例與位置
  36. 40. DIVINE PROPORTION (GOLDEN RATIO)
  37. 41. CASE: APPLE IPOD
  38. 42. THE RULE OF THIRDS 三分定律 :畫面最強勢、最有動力位置在交叉處,局部填滿避免過於對稱所產生的呆板 The Principles of Beautiful Web Design by Jason Beaird
  39. 43. CASE: FLYING SEAGULL
  40. 44. GESTALT : PRINCIPLES OF PERCEPTION 知覺完形法則 :人類的認知系統,如何把各自獨立的局部訊息串聯整合成一個整體概念
  41. 45. THE SUM IS GREATER THAN THE PARTS Law of Proximity Law of Similarity Law of Symmetry
  42. 46. UI Design Challenges
  43. 47. CONCLUSION <ul><li>可尋性(資訊結構,導覽設計,連結) </li></ul><ul><li>頁面設計(可讀性,視覺流, 版面配置,捲動) </li></ul><ul><li>圖型設計 (光線 - 立體度、色彩 - 管理焦點動線、顏色對比 - 吸引點控制) </li></ul>
  44. 48. A:  清楚的全站導覽列 B:  簡單易懂的圖示 C:  俐落的頁面抬頭 ( 與目前位置 ) D:  有用的 sidebar E:  次層 uncommon 選單
  45. 49. UI * IxD 未妥善設計的結果…
  46. 51. REFERENCES TAIWAN

×