Interaction Design Practice # 1 : UI Design and Prototyping
-
Upload
jaden-rosa -
Category
Documents
-
view
37 -
download
2
description
Transcript of Interaction Design Practice # 1 : UI Design and Prototyping
![Page 1: Interaction Design Practice # 1 : UI Design and Prototyping](https://reader031.fdocument.pub/reader031/viewer/2022032016/5681325a550346895d98e9cc/html5/thumbnails/1.jpg)
1
Interaction Design
Practice #1: UI Design and Prototyping
Dr. 莊雅量
![Page 2: Interaction Design Practice # 1 : UI Design and Prototyping](https://reader031.fdocument.pub/reader031/viewer/2022032016/5681325a550346895d98e9cc/html5/thumbnails/2.jpg)
本週課程大綱
• Design Process• Usability Test• Paper Prototype Testing• Make UI with Photoshop and
Illustrator
![Page 3: Interaction Design Practice # 1 : UI Design and Prototyping](https://reader031.fdocument.pub/reader031/viewer/2022032016/5681325a550346895d98e9cc/html5/thumbnails/3.jpg)
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
![Page 4: Interaction Design Practice # 1 : UI Design and Prototyping](https://reader031.fdocument.pub/reader031/viewer/2022032016/5681325a550346895d98e9cc/html5/thumbnails/4.jpg)
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
![Page 5: Interaction Design Practice # 1 : UI Design and Prototyping](https://reader031.fdocument.pub/reader031/viewer/2022032016/5681325a550346895d98e9cc/html5/thumbnails/5.jpg)
General Design Process
Kristof, R., & Satran, A. (1995). Interactivity by design: Creating & communicating with new media. San Jose, CA: Adobe.
![Page 6: Interaction Design Practice # 1 : UI Design and Prototyping](https://reader031.fdocument.pub/reader031/viewer/2022032016/5681325a550346895d98e9cc/html5/thumbnails/6.jpg)
Usability (使用性 ) and User Model
The design model and the user's model (based on Norman 1986, p.46).
![Page 7: Interaction Design Practice # 1 : UI Design and Prototyping](https://reader031.fdocument.pub/reader031/viewer/2022032016/5681325a550346895d98e9cc/html5/thumbnails/7.jpg)
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
![Page 8: Interaction Design Practice # 1 : UI Design and Prototyping](https://reader031.fdocument.pub/reader031/viewer/2022032016/5681325a550346895d98e9cc/html5/thumbnails/8.jpg)
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
![Page 9: Interaction Design Practice # 1 : UI Design and Prototyping](https://reader031.fdocument.pub/reader031/viewer/2022032016/5681325a550346895d98e9cc/html5/thumbnails/9.jpg)
What & Who
• 你要幫人們解決什麼樣的問題 ?滿足什麼樣的需求 ?
• 生活的改善、文明的進步都是在把問題化解,使一切順適而已。如果這樣看設計,設計就是出點子,在我們人生中隨處都需要動腦筋,因此人人都需要有設計的頭腦,只是我們把用在物品的設計上的這份頭腦當成設計的典型,把它的過程加以分析,作為模式來傳播推廣。
9
![Page 10: Interaction Design Practice # 1 : UI Design and Prototyping](https://reader031.fdocument.pub/reader031/viewer/2022032016/5681325a550346895d98e9cc/html5/thumbnails/10.jpg)
運用 5W1H, 界定你將設計的產品
• Who: 主要顧客、次要顧客、相關協助人員 ?
• What: 你要幫顧客解決的什麼問題 ?• How: 如何解決 ?• Why: 為何顧客會願意採用你的設計 ?你可以帶給他們什麼樣的價值 ?
• When: 顧客何時會使用 ?• Where: 顧客會怎麼使用你的設計 ?會不會分享給她的朋友 ? 10
![Page 11: Interaction Design Practice # 1 : UI Design and Prototyping](https://reader031.fdocument.pub/reader031/viewer/2022032016/5681325a550346895d98e9cc/html5/thumbnails/11.jpg)
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.
![Page 12: Interaction Design Practice # 1 : UI Design and Prototyping](https://reader031.fdocument.pub/reader031/viewer/2022032016/5681325a550346895d98e9cc/html5/thumbnails/12.jpg)
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
![Page 13: Interaction Design Practice # 1 : UI Design and Prototyping](https://reader031.fdocument.pub/reader031/viewer/2022032016/5681325a550346895d98e9cc/html5/thumbnails/13.jpg)
An example as demonstration
http://cutx.catchpo.tw/blog/ 13
![Page 14: Interaction Design Practice # 1 : UI Design and Prototyping](https://reader031.fdocument.pub/reader031/viewer/2022032016/5681325a550346895d98e9cc/html5/thumbnails/14.jpg)
Design Process
1. Software Architecture -> Function Tree and the Main pageshttp://developer.android.com/design/patterns/app-structure.html
14
![Page 15: Interaction Design Practice # 1 : UI Design and Prototyping](https://reader031.fdocument.pub/reader031/viewer/2022032016/5681325a550346895d98e9cc/html5/thumbnails/15.jpg)
Design Process
2. Design the layout of the main pages
15
![Page 16: Interaction Design Practice # 1 : UI Design and Prototyping](https://reader031.fdocument.pub/reader031/viewer/2022032016/5681325a550346895d98e9cc/html5/thumbnails/16.jpg)
Design Process
3. Create the elements within the pages
16
![Page 17: Interaction Design Practice # 1 : UI Design and Prototyping](https://reader031.fdocument.pub/reader031/viewer/2022032016/5681325a550346895d98e9cc/html5/thumbnails/17.jpg)
Design Process
4. Make the interactions in the pages and between the pages
17
![Page 18: Interaction Design Practice # 1 : UI Design and Prototyping](https://reader031.fdocument.pub/reader031/viewer/2022032016/5681325a550346895d98e9cc/html5/thumbnails/18.jpg)
Design Process
4. Make the interactions in the pages and between the pages
18
![Page 19: Interaction Design Practice # 1 : UI Design and Prototyping](https://reader031.fdocument.pub/reader031/viewer/2022032016/5681325a550346895d98e9cc/html5/thumbnails/19.jpg)
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
![Page 20: Interaction Design Practice # 1 : UI Design and Prototyping](https://reader031.fdocument.pub/reader031/viewer/2022032016/5681325a550346895d98e9cc/html5/thumbnails/20.jpg)
Design Process
1. Software Architecture -> Function Tree and the Main pageshttp://developer.android.com/design/patterns/app-structure.html
20
![Page 21: Interaction Design Practice # 1 : UI Design and Prototyping](https://reader031.fdocument.pub/reader031/viewer/2022032016/5681325a550346895d98e9cc/html5/thumbnails/21.jpg)
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