JCL

FEUP/DEI & INESC TEC

User Tools

Site Tools


teach:lbaw:lectures:02

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Previous revision
teach:lbaw:lectures:02 [16/02/2020 18:37]
teach:lbaw:lectures:02 [24/02/2021 18:31] (current)
Sérgio Nunes [Materials]
Line 1: Line 1:
 +====== L: 22/02/2021 ======
 +
 +**Master in Informatics and Computing Engineering\\
 +Database and Web Applications Laboratory\\
 +Instance: 2020/21**
 +\\
 +---
 +\\
 +
 +===== Lecture #2 (part 1) :: 17/02/2021 =====
 +
 +==== Goals ====
 +
 +By the end of this class, the student should be able to:
 +  * Understand the concept of User-Centered Design in Interaction Design.
 +  * Describe each stage of Interaction Design Process.
 +  * Understand how and when to use Design Patterns.
 +  * Learn best practices in Interaction Design.
 +
 +==== Content ====
 +
 +  * What is Interaction Design?
 +  * Interaction Design Process
 +  * User Centred Design
 +  * IxD, UX and UI
 +  * Interaction Design Dimensions
 +  * Mental Models
 +  * Interaction Design Principles
 +  * User Interface Elements
 +  * Design Patterns
 +  * What do Interaction Designers Do?
 +  * Wireflows
 +
 +==== Bibliography ====
 +
 +  * Dix, A., Finlay, J., Abowd, G. D., & Beale, R. (2004). //Human–Computer Interaction//, Third Edition. Pearson.
 +  * Cooper, A., Reimann, R., Cronin, D., & Cooper, A. (2007). //About face 3: The essentials of interaction design//. Indianapolis, In: Wiley Pub.
 +  * Preece, J., Rogers, Y., & Sharp, H. (2015). //Interaction Design: Beyond Human-Computer Interaction//, Fourth edition. John Wiley & Sons, Ltd.
 +  * Kalbach, J. (2007). Designing Web Navigation. Sebastopol, CA: O’Reilly Media, Inc.
 +  * Saffer, D. (2010). //Designing for Interaction --- Creating Innovative Applications and Devices//. Berkeley, CA: New Riders.
 +  * Morville, P., Rosenfeld, L., Arango, J. (2015). //Information Architecture: For the Web and Beyond//, 4th Edition, O'Reilly Media.
 +  * Moggridge, B., & Atkinson, B. (2007). //Designing interactions//. Cambridge, Massachusetts: MIT Press. 
 +  * Tidwell, J. (2005). //Designing Interfaces//, Second Edition, O'Reilly Media.
 +
 +==== Materials ====
 +
 +  * Andreia Pinto de Sousa, //Introduction to Interaction Design//, {{02-interactiondesign.pdf|Illustrations presented in class}}, February 2021
 +  * Interaction Design Foundation [[https://www.interaction-design.org]], last accessed in February 2021
 +  * Nielsen Norman Group [[https://www.nngroup.com/articles/wireflows/|Wireflows: A UX Deliverable for Workflows and Apps]], last accessed in February 2021
 +  * Nielsen Norman Group [[https://www.nngroup.com/articles/usability-101-introduction-to-usability/|Usability 101: Introduction to Usability]], last accessed in February 2021
 +  * Nielsen Norman Group [[https://www.nngroup.com/articles/ten-usability-heuristics/|10 Usability Heuristics for User Interface Design]], last accessed in February 2021
 +  * Nielsen Norman Group [[https://www.nngroup.com/articles/how-to-rate-the-severity-of-usability-problems/|Severity Ratings for Usability Problems]], last accessed in February 2021
 +  * Jenifer Tidwell , [[http://designinginterfaces.com/patterns/|Designing Interfaces]], last accessed in February 2021
 +  * UI Patterns, [[http://ui-patterns.com/|UI Patterns]], last accessed in February 2021
 +  * Martijn van Welie [[http://www.welie.com/patterns/index.php|wellie.com]], last accessed in February 2021
 +
 +===== Lecture #2 (part 2) :: 24/02/2021 =====
 +
 +==== Goals ====
 +
 +By the end of this class, the student should be able to:
 +  * Understand the fundamentals of visual design and the intrinsic complexities of designing interactive systems.
 +  * Understand the impact of visual design on usability and readability.
 +  * Identify common mistakes and pitfalls of visual design, specifically on the web.
 +
 +==== Content ====
 +
 +  * The importance of visual communication on the Web 
 +  * Impact of the visual communication on usability and legibility
 +  * Introduction to elements of visual communication
 +    * Typography
 +    * Color
 +  * Introduction to principles of visual communication
 +    * Proximity
 +    * Similarity
 +    * Continuity
 +    * Closure
 +    * Visual Flow
 +    * Constrast
 +    * Hierarchy
 +
 +==== Bibliography ====
 +
 +  * Lupton, E., & Phillips, J. C. (2008). Graphic Design The New Basics (Second Edi). New York: Princeton Architectural 
 +  * Lupton, E. (2014). Type on screen. (Ellen Lupton, Ed.). A Design Handbook.
 +  * Maria, J. S. (2014). On Web Typography. New York: A Book Apart.  
 +  * Samara, T. (2007). Design Elements: A Graphic Style Manual. Rockport Publishers, Inc. 
 +  * Sherin, A. (2012). Design Elements: Color Fundamentals. Rockport Publishers.
 +  * Stein, B. (2017). Webfont Handbook. New York: A Book Apart.
 +  * White, A. (2011). The Elements of Graphic Design (Second Edi). New York: Allworth Press.
 +
 +==== Materials ====
 +
 +  * Andreia Pinto de Sousa, //Basics of Visual Design//, {{03-visualdesign.pdf|Illustrations presented in class}}, February 2021
 +  * Amy Schade, Yunnuo Cheng, And Samyukta Sherugar [[https://www.nngroup.com/articles/top-10-enduring/|Top 10 Enduring Web-Design Mistakes]], last accessed in February 2021.
 +  * Jakob Nielsen [[https://www.nngroup.com/articles/top-10-ia-mistakes/|Top 10 Information Architecture (IA) Mistakes]], last accessed in February 2021.
 +  * Jakob Nielsen [[https://www.nngroup.com/articles/top-10-application-design-mistakes/|Top 10 Application-Design Mistakes]], last accessed in February 2021.
 +  * Jason Santa Maria, [[https://alistapart.com/article/on-web-typography|On Web Typography]], last accessed in February 2021.
 +  * Jeffrey Zeldman [[http://alistapart.com/article/understandingwebdesign|Understanding Web Design]], last accessed in February 2021.
 +  * Melissa Clarkson [[https://procomm.ieee.org/elements-of-visual-communication/|Elements of Visual Communication]], last accessed in February 2021.
 +  * Nick Babich, [[https://www.smashingmagazine.com/2016/10/icons-as-part-of-a-great-user-experience/|Icons As Part Of A Great User Experience]], last accessed in February 2021.
 +  * Aurora Harley, [[https://www.nngroup.com/articles/icon-usability/|Icon Usability]], last accessed in February 2021.
 +
 +==== Summary ====
 +
 +  * An introduction to Interaction Design, by Andreia Pinto de Sousa. Principles, Patterns, and Usability.
 +  * Introduction to the elements and principles of Visual Communication Design, by Andreia Pinto de Sousa.
 +
 + --- //LBAW, 2020/21//
 +
 +[[01|« Previous]] | [[index|Index]] | [[03|Next »]]