designing for interaction with web interface

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