View
123
Download
0
Category
Preview:
DESCRIPTION
網站互動設計- 初心者限定版 Designing For Interaction with Web Interface Released for beginners and novices IxDA Taiwan Group
Citation preview
TAIWAN
Designing for IxD!
Aidan Wup3p3tw@gmail.com
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
Recommended