1

Interaction Design

Practice #1: UI Design and Prototyping

Dr. 莊雅量

本週課程大綱

• Design Process• Usability Test• Paper Prototype Testing• Make UI with Photoshop and

Illustrator

Generating New Experiences: Requires Two Fundamental Phases

Learning about People

Current Experiences

User ResearchEthnographyAnthropology

Statistics

Designing New

Experiences

Design(Graphics, products,

services, interactions)

Participatory DesignBusinessMarketing

3

Source: Maschi, S. (2012)。 The experience economy. In 2012丹麥服務創新研修行前補充講義。台北市：中國生產力中心。

New Concept

s

Time

Dieter Rams’ 10 principles for

good designhttps://www.vitsoe.com/us/about/good-design

1. Good design is innovative2. Makes a product useful3. Aesthetic4. Makes a product understandable5. Unobtrusive6. Honest7. Long-lasting8. Thorough down to the last detail9. Environmentally-friendly10.As little design as possible

General Design Process

Kristof, R., & Satran, A. (1995). Interactivity by design: Creating & communicating with new media. San Jose, CA: Adobe.

Usability (使用性 ) and User Model

The design model and the user's model (based on Norman 1986, p.46).

Usability Test

• Brief Demonstrationhttps://www.youtube.com/watch?v=BrVnBdW6_rE

• Case—Amberlight: https://www.youtube.com/watch?v=XX78WZbzWcQ

• Bookstore Website (process)https://www.youtube.com/watch?v=QckIzHC99Xc

• Usability Testing of Fruithttps://www.youtube.com/watch?v=3Qg80qTfzgU

• Website for Kids (with paper prototype)https://www.youtube.com/watch?v=9wQkLthhHKA

Generating New Experiences: Requires Two Fundamental Phases

Learning about People

Current Experiences

User ResearchEthnographyAnthropology

Statistics

Designing New

Experiences

Design(Graphics, products,

services, interactions)

Participatory DesignBusinessMarketing

8

Source: Maschi, S. (2012)。 The experience economy. In 2012丹麥服務創新研修行前補充講義。台北市：中國生產力中心。

New Concept

s

Time

What & Who

• 你要幫人們解決什麼樣的問題 ?滿足什麼樣的需求 ?

• 生活的改善、文明的進步都是在把問題化解，使一切順適而已。如果這樣看設計，設計就是出點子，在我們人生中隨處都需要動腦筋，因此人人都需要有設計的頭腦，只是我們把用在物品的設計上的這份頭腦當成設計的典型，把它的過程加以分析，作為模式來傳播推廣。

9

運用 5W1H, 界定你將設計的產品

• Who: 主要顧客、次要顧客、相關協助人員 ?

• What: 你要幫顧客解決的什麼問題 ?• How: 如何解決 ?• Why: 為何顧客會願意採用你的設計 ?你可以帶給他們什麼樣的價值 ?

• When: 顧客何時會使用 ?• Where: 顧客會怎麼使用你的設計 ?會不會分享給她的朋友 ? 10

How

1. Tools:• Things you need, but do not want to spend time

on.• For these type of products a positive emotional

engagement is an asset – probably for high-end products -, and negative experiences should be avoided.

2. For Leisure Time:• Their task is to generate experiences, often

positive in nature, but not necessarily so: some elements in movies or art deliberately evoke negative emotions.

11

(3) 產品或服務的屬性，可大概分為下列兩類

Source: P. 7 in Westerink, J., Ouwerkerk, M., Overbeek, J. M. T., & Pasveer, W. F. (Eds.) (2008). Probing experience: From assessment of user emotions and behaviour to development of products. Dordrecht, the Netherlands: Springer.

Design Process

1. Software Architecture -> Function Tree and the Main pageshttp://developer.android.com/design/patterns/app-structure.html

2. Design the layout of each page3. Create the elements within the

pages4. Make the interactions in the pages

and between the pages

12

• Conduct usability test to verify the designs whenever you want to discuss with the users

An example as demonstration

http://cutx.catchpo.tw/blog/ 13

Design Process

1. Software Architecture -> Function Tree and the Main pageshttp://developer.android.com/design/patterns/app-structure.html

14

Design Process

2. Design the layout of the main pages

15

Design Process

3. Create the elements within the pages

16

Design Process

4. Make the interactions in the pages and between the pages

17

Design Process

4. Make the interactions in the pages and between the pages

18

Design Process

5. Evaluate the design with your target users

19

① Prototyping on Paperhttps://popapp.in/

② Axurehttp://www.axure.com/Try my demo with your devices:http://share.axure.com/LY74PR

Design Process

1. Software Architecture -> Function Tree and the Main pageshttp://developer.android.com/design/patterns/app-structure.html

20

UI Design Principles

• Metrics and Gridshttp://developer.android.com/design/style/metrics-grids.html

• Typography: http://developer.android.com/design/style/typography.html

• Icons http://developer.android.com/design/style/iconography.html

• Gestureshttp://developer.android.com/design/patterns/gestures.html

• Navigation http://developer.android.com/design/patterns/navigation.html

• Conventions related to the platformhttp://developer.android.com/design/patterns/pure-android.html