CS - UI/UX

# User Interface / User Experience

Week 14

---

## Review

![](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExM2o1NzQzZThvYWt5NmtiYmdsM2E4cnN0NXh4a3BveHY5N3h5dmkzYiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/h1osuLHnT2RKOZJKi7/giphy.webp)

### Where is the origin (0, 0) of a screen?

Top-left corner

### What is a screen's _resolution_?

Resolution is the number of pixels in each dimension

### What are the primary colors of light?

RGB (Red, Green, Blue)

### What is the maximum value of each color channel?

255

### How can you represent white in hex?

#FFFFFF

### What does the "alpha" channel represent?

Transparency

---

## What is User Interface?

![](https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExb2pxNGdscG9tOXZrdnBpNzBqYmZocmpmYWRxajhkaGlnb2ViaHUzMyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/A2i2xbbpxRSDDLXXZU/giphy.webp)

A **user interface** is the interaction system between a user and a computer program.

Keyboard, mouse, buttons, dials, sliders, etc.

![](https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.minitool.com%2Fimages%2Farticles%2Flib%2Fgraphical-user-interface-1.png&f=1&nofb=1&ipt=c7af2ba2925ca792e11a3cf18d6701c465af2baf6337c9c190117d3a5bb50a9c&ipo=images)

![](https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.trustedreviews.com%2Fwp-content%2Fuploads%2Fsites%2F54%2F2020%2F11%2Fapple_macos-bigsur-availability_redesign_11122020.jpg&f=1&nofb=1&ipt=e01a1e28470a06e91a2c58ad0b7aa887f8c5f371c11fdc5b65d7498217e54118&ipo=images)

![](https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.electronicrecyclingaustralia.com.au%2Fwp-content%2Fuploads%2F2017%2F02%2Fkeyboard-mouse.jpg&f=1&nofb=1&ipt=47e1e2c29472bbf28ad839fb054149de23ffb41fd663a18e2125b6775f315e39&ipo=images)

![](https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fs.yimg.com%2Fny%2Fapi%2Fres%2F1.2%2FuQj3EhlJ1bPL9DMgMw_ncw--%2FYXBwaWQ9aGlnaGxhbmRlcjt3PTEyMDA7aD02ODk-%2Fhttps%3A%2F%2Fs.yimg.com%2Fos%2Fcreatr-uploaded-images%2F2021-07%2Fe35896d1-eb10-11eb-b7ff-c8fd80773144&f=1&nofb=1&ipt=6a1754554ee2bfe142984106d468a73d014ac22f575f27b3bbcb8d3c98edd809&ipo=images)

![](https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi5.walmartimages.com%2Fseo%2FOriginal-Tamagotchi-Mametchi-Comic-Book_1361b667-3587-4f95-aa95-3afa0beaeaf3.0468b0accd8404c5c9283ec0a22ad93a.jpeg&f=1&nofb=1&ipt=902b33c364bf6bf6e1121e486baa3e67e99a53c0e1b488952162d3a0cbaffcbe&ipo=images)

![](https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.pinimg.com%2Foriginals%2F1e%2F35%2Fed%2F1e35ed26dfe1082c6e0fa4e298d16ed8.jpg&f=1&nofb=1&ipt=8ce52e3a61414d96d96acfd3fe07a5ec60d45c168cd051475a9fcd63a12c9433&ipo=images)

### Good UI is Built on Patterns

You can build up _literacy_ of digital interfaces when common patterns are used.

### Common Elements

![](https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fspeckyboy.com%2Fwp-content%2Fuploads%2F2014%2F03%2Fflat_user_interface_kit_large_screenshot.jpg&f=1&nofb=1&ipt=fcaf746edc2fb671bfa5468cf9e80fca695888e71d0c5820d3eefa8079bf144f&ipo=images)

### Material UI

Google’s open-source design system

[Components Collection](https://m3.material.io/components)

### Skeuomorphism

Skeuomorphism is a design practice incorporating real-world elements into digital interfaces to create a sense of familiarity with new interfaces. ([Nielson Norman Group](https://www.nngroup.com/articles/skeuomorphism/))

![](https://media.nngroup.com/media/editor/2024/03/12/skeuo.jpg)

![](https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Redstair_GEARcompressor.png/330px-Redstair_GEARcompressor.png)

![](https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.360ss.com%2F360%2Fuploads%2F554884c0b999208d27694df272aea761.png&f=1&nofb=1&ipt=97db0ff11845e7e07e70bb576aaf47ce85e82c53185d96ecc5043f2dbc044df9&ipo=images)

---

## What is User Experience?

![](https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExZTY1OGM3NjBqdGs4OWVnbmk1YWU5M2R1NTZwbGJzNW5iZWxmMnpzbiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3ohs81rDuEz9ioJzAA/giphy.webp)

**User experience** (UX) is the experience users have when they interact with a product, system, or service.

### Good UI, Bad UX

"There's an app for that"

NOTES:
- "Unlock your car" app
- UI where users are bullied into doing something
- Ask students for other examples

### Related but Different

- **UI** is the interaction system
- **UX** is the experience

---

## Review

![](https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExd3QyaXFxMXFvc2IwbWZwODg5bnp5d28yaTQ4MjIwamloYWM2MjUyeSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Okh1vMtMT1HG4MhC2h/giphy.webp)

### What is UI?

The _interaction system_ between a user and a computer program.

### What is UX?

The _experience_ users have when they interact with a product, system, or service.

### Can you have good UI without good UX?

Yes!

### What is interface literacy?

Acquired knowledge of how to use common interface patterns.

### What is skeuomorphism?

Design practice that incorporates real-world elements into digital interfaces.

---

## Now for Some Coding...

[Pygame - Game State](/2024/fall/computer-science/slides/pygame-game-state)