網站互動設計- 初心者限定版 Designing For Interaction with Web Interface Released for beginners and novices IxDA Taiwan Group

1. Designing for IxD ! Aidan Wu [email_address] with Web Interface

2. User Interface !?

3. IPHONE USED BY 1 YEAR OLD BABY http://www.youtube.com/watch?v=oZwKPDvYA2M

4. WHAT IS USER INTERFACE DESIGN ?

6. 我們永遠難以掌握 使用者操作系統的方式！

7. 1 year old baby

12. Design is not just what it looks like and feels like. Design is how it works. — Steve Jobs

13. Slide to unlock

14. PUSH OR PULL … OR SLIDE ?

16. 使用者是掃描網頁，而非閱讀

17. Baba (Father)

19. EXAMPLES OF EYE TRACKING RESEARCH USA.gov

21. EMBEDDED IN ARTICLE TEXT 頁面自然共融的廣告 AD

22. 人臉更具有吸引力

23. 別期望他們會往下捲動頁面

24. 使用者第一次造訪網站時 只有 23% 進行捲動操作 Nielsen Norman Group

25. 使用者第一次造訪網站時 只會花不到 2 分鐘 瀏覽 Nielsen Norman Group

26. 使用者第一次造訪網站時 只看約 60% 內容 Nielsen Norman Group

28. CASE: GAMESPOT

29. 簡化＆加速任務

31. THE 3-CLICK RULE 1 2 3 bye~

32. FITTS' LAW T 行動時間 A 從起始點到目標中心點的距離 W 目標寬度 ( 大小 ) 螢幕上按鈕的『大小』與相隔之『距離』會影響點選的績效 最常用的功能集中在 menu item 下方兩側

33. CASE: BROWSER’S TAB

34. CASE: GOOGLE CHROME

35. 別想一次塞太多資訊

36. THE MAGICAL NUMBER 7 ± 2 ITEMS 人類一次能處理的資訊數上限 George A. Miller (1956)

37. CASE: WHAT'S ON THE MENU? ASUS EeePC acer Aspire One

38. CASE: GOOGLE PRODUCTS MENU

39. 妥善控制比例與位置

40. DIVINE PROPORTION (GOLDEN RATIO)

41. CASE: APPLE IPOD

42. THE RULE OF THIRDS 三分定律 ：畫面最強勢、最有動力位置在交叉處，局部填滿避免過於對稱所產生的呆板 The Principles of Beautiful Web Design by Jason Beaird

43. CASE: FLYING SEAGULL

44. GESTALT : PRINCIPLES OF PERCEPTION 知覺完形法則 ：人類的認知系統，如何把各自獨立的局部訊息串聯整合成一個整體概念

45. THE SUM IS GREATER THAN THE PARTS Law of Proximity Law of Similarity Law of Symmetry

46. UI Design Challenges

48. A: 清楚的全站導覽列 B: 簡單易懂的圖示 C: 俐落的頁面抬頭 ( 與目前位置 ) D: 實用性的 Sidebar E: 次層 Uncommon 選單

49. UI * IxD 未妥善設計的結果…

51. REFERENCES TAIWAN