1 / 21

Interaction Design Practice # 1 : UI Design and Prototyping

Interaction Design Practice # 1 : UI Design and Prototyping. Dr. 莊雅量. 1. 本週課程大綱. Design Process Usability Test Paper Prototype Testing Make UI with Photoshop and Illustrator. Generating New Experiences : Requires Two Fundamental Phases. Learning about People C urrent E xperiences

jaden-rosa
Download Presentation

Interaction Design Practice # 1 : UI Design and Prototyping

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Interaction Design Practice #1:UI Design and Prototyping Dr. 莊雅量 1

  2. 本週課程大綱 • DesignProcess • Usability Test • PaperPrototypeTesting • MakeUIwithPhotoshopandIllustrator

  3. Generating New Experiences:Requires Two Fundamental Phases LearningaboutPeopleCurrentExperiences UserResearch Ethnography Anthropology Statistics DesigningNewExperiences Design (Graphics,products,services,interactions) ParticipatoryDesign Business Marketing NewConcepts Time Source: Maschi, S. (2012)。The experience economy. In 2012丹麥服務創新研修行前補充講義。台北市：中國生產力中心。

  4. Dieter Rams’10principles for good designhttps://www.vitsoe.com/us/about/good-design Good design is innovative Makes a product useful Aesthetic Makes a product understandable Unobtrusive Honest Long-lasting Thorough down to the last detail Environmentally-friendly As little design as possible

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

  6. Usability (使用性) and User Model The design model and the user's model (based on Norman 1986, p.46).

  7. 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

  8. Generating New Experiences:Requires Two Fundamental Phases LearningaboutPeopleCurrentExperiences UserResearch Ethnography Anthropology Statistics DesigningNewExperiences Design (Graphics,products,services,interactions) ParticipatoryDesign Business Marketing NewConcepts Time Source: Maschi, S. (2012)。The experience economy. In 2012丹麥服務創新研修行前補充講義。台北市：中國生產力中心。

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

  10. 運用5W1H, 界定你將設計的產品 • Who: 主要顧客、次要顧客、相關協助人員? • What: 你要幫顧客解決的什麼問題? • How: 如何解決? • Why: 為何顧客會願意採用你的設計?你可以帶給他們什麼樣的價值? • When: 顧客何時會使用? • Where: 顧客會怎麼使用你的設計?會不會分享給她的朋友?

  11. How (3) 產品或服務的屬性，可大概分為下列兩類 • Tools: • Things you need, but do not want to spendtime on. • For these type of products a positive emotional engagement isan asset – probably for high-end products -, and negative experiencesshould be avoided. • ForLeisureTime: • Their task is to generate experiences, often positivein nature, but not necessarily so: some elements in movies or artdeliberately evoke negative emotions. Source:P.7inWesterink, 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.

  12. Design Process • Software Architecture -> Function Tree and the Main pageshttp://developer.android.com/design/patterns/app-structure.html • Design the layout of each page • Create the elements within the pages • Make the interactions in the pages and between the pages • Conduct usability test to verify the designs whenever you want to discuss with the users

  13. An example as demonstration http://cutx.catchpo.tw/blog/

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

  15. Design Process 2. Design the layout of the main pages

  16. Design Process 3. Create the elements within the pages

  17. Design Process 4. Make the interactions in the pages and between the pages

  18. Design Process 4. Make the interactions in the pages and between the pages

  19. Design Process Prototyping on Paperhttps://popapp.in/ Axurehttp://www.axure.com/Try my demo with your devices:http://share.axure.com/LY74PR 5. Evaluate the design with your target users

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

  21. UI Design Principles Metrics and Gridshttp://developer.android.com/design/style/metrics-grids.html Typography: http://developer.android.com/design/style/typography.html Iconshttp://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

More Related