w10 Human interfaces

Making interface design decisions

2022-03-22T15:30:00-05:00

Agenda

What is a human interface?
Accessibility and Usability
Components and features of an interface
1. Interactions
2. Use flows / pathways
3. Skeuomorphs
4. Information architecture
How do we decide what goes into the interface?
Specifying design parameters

Notes

Design parameter sketch

In class, we sketch out a human interface for our coin-flipping API.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32



<!-- Multiple pages/views
	Nav / menu
	Backend stuff:
		at least 2 endpoints
			login
			action
	-->

<!-- Get a person to flip a coin 
	button
		image-->

<!-- Call a coin flip heads or tails (guess) -->

<!-- Flip a bunch of coins -->

<!-- Present outcome of whatever interaction -->
	<!-- Return one flip -->
	<!-- Present result and comparison of guess/actual -->
	<!-- Present all the flips -->

<!-- Login session 
	web form
		textbox (x2)
		button -->
	<!-- Show previous results -->
	<!-- Leaderboard -->
	<!-- Give statistics -->
	<!-- Last login / last play -->
	<!-- Compete -->

The Browser and the DOM

2022-03-24T15:30:00-5:00

Slides

https://comp426-2022-spring.github.io/slides/w10-01.html

Useful links

Chrome DevTools Documentation

w3schools

Notes

I got ahead of myself on Thursday and had to backtrack a bit. My initial intent was to show you how to add an event listener that would show the active element somewhere on the page when something is clicked and THEN create another listener to manipulate the contents of an element when you interact with that same element.

In this case, a button that stands in for a coin and then a paragraph that tells us what element you just clicked on.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


<html>
	<head>
		<title>Demo Coin</title>
	</head>
	<body>
		
<!-- A "coin" button -->
		<button id="coin">Coin</button>
<!-- A status paragraph -->
		<p id="active"></p>

		<script>
// Event listener for whatever is being clicked 
			document.addEventListener("click", activeNow);
// Replace text in anything with "active" id
			function activeNow() {
				const active_now = document.activeElement
				document.getElementById("active").innerHTML = active_now;
				console.log(active_now)
			}
// Button coin flip element
			const coin = document.getElementById("coin")
// Add event listener for coin button
			coin.addEventListener("click", flipCoin)
			function flipCoin() {
				flip = "FLIPPED"
				document.getElementById("coin").innerHTML = flip;
				console.log("Coin has been flipped. Result: "+ flip)
			}
		</script>
	</body>
</html>

Next week we will work on using Fetch to call our API and replace the “flip” const above with whatever information is returned by a call to http://localhost:5000/app/flip/ so that our coin flip actually returns an emulated flip. Then we can make it look prettier.

For now, the above code should result in something that looks like this:

And then when you click the “coin” button:

w10 Human interfaces