Master in Informatics and Computing Engineering
Database and Web Applications Laboratory
Instance: 2020/21
—

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.

• 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

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

• Andreia Pinto de Sousa, Introduction to Interaction Design, Illustrations presented in class, February 2021
• Interaction Design Foundation https://www.interaction-design.org, last accessed in February 2021
• Nielsen Norman Group Wireflows: A UX Deliverable for Workflows and Apps, last accessed in February 2021
• Nielsen Norman Group Usability 101: Introduction to Usability, last accessed in February 2021
• Nielsen Norman Group 10 Usability Heuristics for User Interface Design, last accessed in February 2021
• Nielsen Norman Group Severity Ratings for Usability Problems, last accessed in February 2021
• Jenifer Tidwell , Designing Interfaces, last accessed in February 2021
• UI Patterns, UI Patterns, last accessed in February 2021
• Martijn van Welie wellie.com, last accessed in February 2021

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.

• 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

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

• Andreia Pinto de Sousa, Basics of Visual Design, Illustrations presented in class, February 2021
• Amy Schade, Yunnuo Cheng, And Samyukta Sherugar Top 10 Enduring Web-Design Mistakes, last accessed in February 2021.
• Jakob Nielsen Top 10 Information Architecture (IA) Mistakes, last accessed in February 2021.
• Jakob Nielsen Top 10 Application-Design Mistakes, last accessed in February 2021.
• Jason Santa Maria, On Web Typography, last accessed in February 2021.
• Jeffrey Zeldman Understanding Web Design, last accessed in February 2021.
• Melissa Clarkson Elements of Visual Communication, last accessed in February 2021.
• Nick Babich, Icons As Part Of A Great User Experience, last accessed in February 2021.
• Aurora Harley, Icon Usability, last accessed in February 2021.

• 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

« Previous | Index | Next »