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