slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Interaction Design Practice # 1 : UI Design and Prototyping PowerPoint Presentation
Download Presentation
Interaction Design Practice # 1 : UI Design and Prototyping

Loading in 2 Seconds...

play fullscreen
1 / 21

Interaction Design Practice # 1 : UI Design and Prototyping - PowerPoint PPT Presentation


  • 136 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


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