Human-Computer Interfaces

Preface

Prerequisites

Learning ethics

Introduction

What is Human-Computer Interface?

Human-Computer Interface is

Understanding how to design

Design, Implementation, Evaluation.

People.

Design for People.

Ergonomics is mechanical research, so they are related.

How humans work, in order to build

HCI is multidisciplinary. Ergonomics, Sociology, and

Ingredients

The user(s). We have an audience in mind —a programmer, a chemical engineer, a cleaning lady, a cook, a bus driver, and so on. Humans have Sensory systems, acting systems, and cognitive processes.

The technology. Computer, software, input peripherals, output peripherals.

The needs. Users use technology in order to accomplish their needs and some goals, as a result of doing tasks. Your system must solve human needs. We have to learn a language and a domain.

So, Your system must support the user’s task, with a focus on its usability. Useful, usable, used. The perfect user interface is one the user doesn’t felt it.

👉🏻

Don’t generalize your own personal experience by saying everybody wants this. Never pretend you understand what another person wants or needs.

Why does the Human-Computer Interface matter to you?

Bad design costs live, money, and time. The Joy of Good Design.

“User is stupid”, indeed listening to the user's needs.

“People first, technology after”.

New Devices change the user experience.

Research

ACM CHI

SIGCHI

Research, Y. Combinator. "HARC." 14 Dec. 2020, harc.ycr.org.

Bret Victor

Ecosystem

Standards, jobs, industry, roles, …

Story

FAQ

Worked examples

Designing Interaction by Human-Centered Design Process

👉🏼

Know your users

Our concern is to implement a good interface to potential user needs, authors call this process “Needfinding”, that is, starting from value for users and ending up in system requirements. “Needfinding” requires some tools and instruments such as observations, online surveys, interviews, and diaries in order to find “what is user need” but not “what users want” since you never can answer what he or she wants since users don’t have the context, programming skill or the language to understand their needs. Indeed, some bad questions are “Is feature X important to you?”, “What would you like in a tool”, “What do you like in X”?

Tools

balsamiqmockups

Web Theme

Fonts

"MatterSQ", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto", "Helvetica Neue", helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

Seravek, 'Segoe UI', 'Noto Sans', source-sans-pro, sans-serif

https://sparanoid.com/lab/opentype-features/

SVG Icons

Stock images and videos

Illustrations

unDraw: A constantly updated collection of customizable illustrations that you can use without attribution. These are available in SVG format, making them easy to edit and scale for your projects.

Humaaans: Mix-&-match illustrations of people with a design library. You can customize their positions, clothing, colors, and hairstyle to fit your project's needs. It's a great resource for creating more inclusive and diverse illustrations.

Ouch! by Icons8: Provides a variety of free vector illustrations in different styles for various projects. While free versions require attribution, they offer high-quality illustrations that can add a professional touch to your project.

Blush: Blush offers customizable illustrations with collections made by artists across the globe. You can personalize the illustrations to better match your project's theme and aesthetic.

IRA Design: This resource offers gradient illustrations that you can build using their collection of components. It's a great way to create unique illustrations without needing extensive design skills.

Open Doodles: A free set of open-source illustrations that includes a variety of characters and elements. You can customize and use them in both personal and commercial projects.

ManyPixels: Offers a royalty-free library of illustrations in various styles. You can use these illustrations in your projects, and they provide a wide range of themes and scenarios.

https://www.freepik.com/

https://github.com/MrPeker/awesome-illustrations

Accessibility

https://www.w3.org/WAI/fundamentals/accessibility-intro/

Programming Interactive Systems

Subsection

Subsubsection

Exercises

Projects

Summary

FAQ

Reference Notes

MAS.962 Common Sense Reasoning for Interactive Applications

User-Centered Design & Testing

6.831 User Interface Design and Implementation

https://lawsofux.com/

Errors

https://wix-ux.com/when-life-gives-you-lemons-write-better-error-messages-46c5223e1a2f?gi=9ae016b988cf

User interface

https://en.wikipedia.org/wiki/User_interface

CLI

GUI

Web

End-user Programming

https://www.inkandswitch.com/end-user-programming/

New interactive technologies

MAS.632 Conversational Computer Systems

Collaboration & Communication

Statistical Methods for HCI

Human Factors & Security

16.400 Human Factors Engineering

Design-Oriented HCI

Mixed, Augmented, and Virtual Reality

Pervasive Human-Centric Computing

MIT 6.883

Ambient Intelligence

Principles and Practice of Assistive Technology

??

Autism Theory and Technology

MIT MAS.771

Music and Technology

MIT 21M.380

Machine Learning for Healthcare

MIT 6.S897

Human Supervisory Control of Automated Systems

MIT 16.422

Next steps

References

Pro, A. (2021, February 07). What is HCI - How do I use it? Youtube. Retrieved from https://www.youtube.com/watch?v=B0lltMFTfv8&ab_channel=ArtificialPro

Interaction Design. (2023, January 17). Retrieved from https://www.coursera.org/specializations/interaction-design

Scott Klemmer (2023, January 17). Human Computer Interaction (HCI) [FULL COURSE] | Stanford University. Youtube. Retrieved from https://www.youtube.com/playlist?list=PLLssT5z_DsK_nusHL_Mjt87THSTlgrsyJ

De Russis, L. (2021, September 28). HCI2021-L01: Course Introduction. Youtube. Retrieved from https://www.youtube.com/watch?v=let7pwikjmc&list=PLs7DWGc_wmwT-1N2vbRkLWrM6LIker9A-&ab_channel=LuigiDeRussis

Acmsiggraph. (2018, August 14). VR@50: Reception Honoring Ivan Sutherland. Youtube. Retrieved from https://www.youtube.com/watch?v=VktqJ5I9aKY&ab_channel=ACMSIGGRAPH

Norman, Donald A. The Design of Everyday Things. Basic Books, 2002. ISBN: 9780465067107.

Nielsen, Jakob. Usability Engineering. Morgan Kaufmann, 1993. ISBN: 9780125184069.

Baecker, Ronald M., Jonathan Grudin, et al. Readings in Human-Computer Interaction: Toward the Year 2000. 2nd ed. Morgan Kaufmann, 1995. ISBN: 9781558602465.

Shneiderman, Ben, and Catherine Plaisant. Designing the User Interface: Strategies for Effective Human-Computer Interaction. 4th ed. Addison Wesley, 2004. ISBN: 9780321197863.

Dix, Alan J., Janet E. Finlay, et al. Human-Computer Interaction. 2nd ed. Prentice Hall, 1998. ISBN: 9780132398640.

Olsen, Dan R. Developing User Interfaces (Interactive Technologies). Morgan Kaufmann, 1998. ISBN: 9781558604186.

Mullet, Kevin, and Darrell Sano. Designing Visual Interfaces: Communication Oriented Techniques. Prentice Hall, 1994. ISBN: 9780133033892.

Tufte, Edward R. The Visual Display of Quantitative Information. Graphics Press, 1983. ISBN: 9780318029924.

Raskin, Jef. The Humane Interface: New Directions for Designing Interactive Systems. Addison-Wesley Professional, 2000. ISBN: 9780201379372.

Jhonson, Jeff. GUI Bloopers: Don’ts and Do’s for Software Developers and Web Designers (Interactive Technologies)
. Morgan Kaufmann, 2000. ISBN: 9781558605824.

Card, Stuart K., Thomas P. Moran, and Allen Newell, eds. The Psychology of Human-Computer Interaction. Lawrence Erlbaum, 1983. ISBN: 9780898592436.

Gonick, Larry. Cartoon Guide to Statistics. HarperCollins, 1993. ISBN: 9780062731029.

Box, George E. P., William G. Hunter, et al. Statistics for Experimenters: An Introduction to Design, Data Analysis, and Model Building. John Wiley & Sons, 1978. ISBN: 9780471093152.

Miller, Rupert G. Beyond Anova: Basics of Applied Statistics. John Wiley & Sons Inc, 1986. ISBN: 9780471819226.

Cook, Albert M., and Jan Miller Polgar. Cook & Hussey’s Assistive Technologies: Principles and Practice. 3rd ed. Mosby Elsevier, 2007. ISBN: 9780323039079.

Preece, J., Rogers, Y. and Sharp, H. (2011) Interaction Design, 3 rd edn, Wiley and Sons. (selected chapters)

Interaction Design: Beyond human-computer interaction by Helen Sharp, Yvonne Rogers & Jenny Preece (multiple editions)

Harris, P. (2008) Designing and Reporting Experiments in Psychology, 3 rd edn, OUP

Marc Rettig and Aradhana Goel, Designing for Experience: Frameworks and Project Stories

Alan Dix, Janet Finaly, Gregory D. Abowd, Russel Beale, “Human-Computer Interaction”, 3d edition.

Marc Rettig, Prototyping for Tiny Fingers

William Horton, Top Ten Blunders by Visual Designers

George Miller, The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information

Thomas Kelley, “The Perfect Brainstorm” (from The Art of Innovation, Profile Books, 2002

Bill Buxton, “The Anatomy of Sketching” (from Sketching User Experiences, Morgan Kaufmann, 2007)

Cairns P. and Cox A. eds, (2008) Research Methods for HCI, Cambridge. (Chaps 1, 6 and 10)

S. Krug, “Don’t make me think: A Common Sense Approach to Web and Mobile Usability - revisited” Pearson Education, 2014, ISBN 0321648781/978032168785

Bruce "Tog" Tognazzini, First Principles of Interaction Design

https://ocw.mit.edu/search/?t=Human-Computer+Interfaces

MIT 6.813/6.831 User Interface Design & Implementation

MIT 6.170 Software Studio

MIT 21W.785 Communicating with Web-Based Technology

Stanford (2023, January 17). Stanford CS547 - Human-Computer Interaction Seminar Series. Youtube. Retrieved from https://www.youtube.com/playlist?list=PLoROMvodv4rMyupDF2O00r19JsmolyXdD

Human Aspects of Computer Science, University of York

FIT3063 Human Computer Interaction, Monash University

CO328: Human Computer Interaction, University of Kent

Human Computer Interaction, University of Cambridge

Human-Computer Interaction, Stanford University

Human Information Processing (HIP), Open University Netherlands

Software and Interface Design, University of Cambridge

Interaction Design: Beyond human-computer interaction by Helen Sharp, Yvonne Rogers & Jenny Preece (multiple editions)

HCI Models, Theories and Frameworks: Toward a multidisciplinary science edited by John Carroll (2003)

Research methods for human-computer interaction edited by Paul Cairns and Anna Cox (2008)

HUMAN INFORMATION PROCESSING Cornell University

Interaction-Design.org entry on Visual Representation by Alan Blackwell (2011) http://www.interaction-design.org/encyclopedia/visual_representation.html

UX Design Courses & Global UX Community. (2023, January 17). Retrieved from https://www.interaction-design.org

Bush, V. (2022). The Atlantic. Atlantic. Retrieved from https://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881