Maxis Kao | Oct. 26, 2016

> User First! 前端的最後⼀一塊拼圖

Maxis Kao

➔ Software Engineer at Yahoo

➔ Top Hack of Yahoo TW/JP Joint Hackday

➔ Winner of Yahoo Bot Challenge

前端⼯工程師的最後⼀一塊拼圖

• Development

• 優化開發環境 無料提升戰⾾鬥⼒力 (Oct. 19)

• Front-End

• 2016 前端⼯工程技術巡禮 (Aug. 10)

• Web Page Performance Optimization (Aug. 31)

• 2016 前端潮玩意兒 (Oct. 12)

• User Experience

• Data Driven UI Design (Aug. 24)

• Web Knowledge

• Backend

“科技始終來⾃自於⼈人性”

UX

傻傻分不清UI & UX

網路上

• What is the difference between UX and UI designer?

• What’s the difference between UI and UX?

• What type of education is needed to work professionally in UI/UX?

• UI vs UX: what’s the difference?

• The Difference Between UX and UI Design

• 使⽤用者介⾯面設計師-Game UI/UX

• UI/UX 使⽤用者介⾯面設計師

• UI/UX designer(使⽤用者經驗/介⾯面設計師)

• 使⽤用者經驗設計師 UX Designer

• 使⽤用者介⾯面設計師

求職

• UX Makes Interfaces Useful

• UI Makes Interfaces Beautiful

• UX Helps Users Accomplish Goals

• UI Makes Emotional Connections

• UX Design Is Done First

• UI Design Is Done Second

• UX Design Is Done First

• UI Design Is Done Second

• UX Is Employed Across Products, Interfaces And Services

• UI Only Pertains To Interfaces

• VD 把⼥女⽣生⾐衣服做得很漂亮

• UI 把⼥女⽣生⾐衣服層次穿搭的很潮

• UX “這位正妹是賽⾞車⼿手，給我蓬蓬裙幹嘛？”

⼼心路歷程UI & UX

⿊黑暗時期拜神祭天

⿊黑暗時期

• 卯起來找神器，想⼀一次殺到終極 BOSS

• “10 個平⾯面設計⽅方法讓你的作品創意⼗十⾜足”

• 瞻仰 Dribbble / Pinterest 上⼤大神作品

城堡時代⼈人類⽂文明的重要分⽔水嶺

城堡時代

• 擁 HTML / CSS ⾃自重

• 跟 F2E 溝通

• 從 prototype 到 real code

撞牆期⽂文藝復興，哲學反思

視覺之外回到⼈人本

> Stay focused“10 Usability Heuristics for User Interface Design”

潮．貳零壹陸UI & UX

RWD

Rear Wheel Drive

Responsive Web Design⾃自適應 / 響應式 網⾴頁設計

FLAT DESIGN

Q : “什麼是⾮非扁平? ”

2006 2016

2006 2016

回到設計的本質

colorn. ⾊色彩

Color Harmonies• Analogous

• Monochromatic

• Triad

• Complementary

• Compound

• Shades

fontn. 字體

Avenir Book Britannic Bold

Title Body

LOUIS VUITTON

LOUIS VUITTONComic Sans

Futura

MICROINTERACTIONS

Feature & Detail

Dan Saffer

It's All In The Detail魔⻤⿁鬼藏在細節裡

• Communicate feedback or the result of an action.

• Accomplish an individual task.

• Enhance the sense of direct manipulation.

• Help users visualize the results of their actions and prevent errors.

Details, for what?

7 個魔⻤⿁鬼1. System status

2. Highlight Changes

3. Keep Context

4. Non-Standard Layouts

5. Calls to Action

6. Visualize Input

7. Tutorials come alive

– Jakob Nielsen

“keep your user informed about what is going on”

1. System status

“Animation will attract their attention and not let users overlook what you think is important”

2. Highlight Changes

“keep clear navigation between different pages”

3. Keep Context

“interact with uncommon layouts without unnecessary confusion”

4. Non-Standard Layouts

“keep on browsing, like, or share content, just because it’s attractive and they don’t want to leave”

5. Call to Action

“turn boring process into something special”

6. Visualize Input

“highlighting basic features for further usage”

7. Tutorials come alive!

UI & UX 先別急著打開軟體

設計流程

idea

sketch

wireframe

mockup

prototype

idea

sketch

wireframe

mockup

prototype

idea

sketch

wireframe

mockup

prototype

idea

sketch

wireframe

mockup

prototype

idea

sketch

wireframe

mockup

prototype

product

Fidelity擬真度

idea

sketch

wireframe

mockup

prototype

Low

Medium

High

Fidelity

• Sketch

• Pixate

• framer.js

• Keynote

• Flinto

⼯工具箱

framer.js

– Maxis Kao, 2015 #程序猿⿎鼓勵師

“使⽤用者都是暴⺠民”

Chat Bot

BUT悲劇還是發⽣生了

#UserFirst

“You've got to start with the customer experience and work backwards to the technology.”

- Steve Jobs

– Dan North, 2003

“Behavior-driven Development”

常⾒見問題

• 客⼾戶 要的功能沒 開發

• 開發 的功能不是 客⼾戶 要的

• 客⼾戶 和 ⼯工程師 雞同鴨講

‣ 業務：我要⼀一個計算機

1 + 1 = 2

100 + 5 = 105

99 + 1234 = 1333

12.6 + 5 = 18 // 做⽣生意的很喜歡四捨五⼊入

‣ ⼯工程師：簡單，我⾺馬上給你！

User story• As a X - the person (or role) who will benefit

• I want Y - some feature

• so that Z - the benefit or value of the feature

Acceptance Criteria• Given some initial context (the givens),

• When an event occurs,

• Then ensure some outcomes.

A BDD example1. Feature:  Greeting  

2.    

3.    Scenario:  Say  Hello  World  

4.        Given  I  have  an  application  “Hello”  

5.        When  I  ask  it  to  say  hi  

6.        Then  I  receive  “Hi,  there!”.

client developers

client developers

BDD

CucumberA tool for running automated tests written in plain language

.jsCucumberA tool for running automated tests written in plain language

$  npm  install  cucumber

‣ 業務：我要⼀一個計算機

1 + 1 = 2

100 + 5 = 105

99 + 1234 = 1333

12.6 + 5 = 18 // 做⽣生意的很喜歡四捨五⼊入

‣ ⼯工程師：簡單，我⾺馬上給你！

“不管你選擇哪⼀一條路”

Knowledge

– 朱⽴立倫, 2014 & 2015

“做好，做滿”

Maintainable千古流芳

打開編輯器

Nicholas C. Zakas

Maintainable codeshould works for 5 years without having to rewrite

- Nicholas C. Zakas

Who cares?• 公司

• 同事

• 未來的⾃自⼰己

maintainability• 直觀 • 理解 • 修改 • 擴充 • 除錯 • 測試

- C.A.R. Hoare

Code Conventions

• Code Style

• Programming Practice

Code Style• Formatting

• Comments

• Statement & Expression

• Variables, Functions, and Operators

✓ Linting tools: JSLint / JSHint / ESLint

Programming Practice1. Loose Coupling of UI Layers

2. Avoid Globals

3. Event Handling

4. Separate Configuration from Code

5. Don’t Modify Objects You Don’t Own

6. Browser Detection

1. Loose Coupling of UI Layers

• html / css / javascript 各司其職

• templating: handlebar / {{ mustache }}

2. Avoid Globals

• Naming Collisions

• Code Fragility

• Difficulty Testing    function  sayColor()  {            alert(color);  

   }

3. Event Handling

• Separate Application Logic

• Don’t Pass the Event Object Around

   var  handleClick  =  function(event)  {                showPopup(event);      }      addListener(element,  "click",  function(event)  {              app.handleClick(event);      }

4. Separate Configuration from Code

• Separate configuration data from code.

   function  validate(value)  {                if  (!value)  {                      location.href  =  "/errors/invalid.php";              };      }

• Don’t override methods.

• Don’t add new methods.

• Don’t remove existing methods.

5. Don’t Modify Objects You Don’t Own

6. Browser Detection

• Avoid Feature Inference

• Avoid Browser Inference    if  (document.getElementsByTagName)  {  //  DOM              element  =  document.getElementById;      };  

   if  (document.all)  {  //  IE              id  =  document.uniqueID;      };

Design Patterns嚴以律⼰己

SEO把網站放在五叉路⼝口

User Logs數字會說話

全世界最瘋狂的是新加坡

台灣全世界第⼗十⼀一瘋狂

短短三個⽉月就沒⼈人在玩了

台灣⼀一個⽉月就退燒

相關的 query 都是作弊程式

後端前端

前端開發的五⼤大挑戰

• Compatibility - 兼容性

• Interaction - 交互的複雜度

• Maintainability - 程式可維護性

• Performance - 性能

• Personal development - 個⼈人成⻑⾧長 - 張克軍 @ ⾖豆瓣前端⼯工程師

⼀一秒鐘幾⼗十萬上下

Backend

• Scalability - 規模

• Security - 安全

• Performance - 效率

• Availability - 穩定

後端開發的四⼤大課題

下⼀一個⾥里程碑

Fullstack

Thanks :P

Q / A