Week 3 - Building interfaces with HTML and CSS

Date: 2025-02-05

Overview

Interfaces - theory
Interface design example: Metrocard Machine
Learnability

Readings

A point where two systems, subjects, organizations, etc., meet and interact. –dictionary definition

Earliest concepts for what a computer (and its interface) may look like

Vannevar Bush’s Memex proposal in 1945 - video

Vannevar Bush’s As We May Think - Memex Vannevar Bush’s As We May Think - Memex

C.J. Licklider’s ‘Man-Computer Symbiosis’

1960

Proposed three modes of interfaces with computers:

desk surfaces - can be drawn on and interpreted by the computer
networked wall and desk displays - for collaboration and for input to the computer
speech recognition - to give input to the computer

Psychologist Donald Norman

‘the real problem with the interface is that it is an interface. Interfaces get in the way. I don’t want to focus my energies on an interface. I want to focus on the job. When I use my computer , it is in order to get a job done: I don’t want to think of myself as using a computer, I want to think of myself as doing my job.’

David Reinfurt on designing the MetroCard ticket machine interfaces

Metrocard planning
Four alternative interface sketches

Reinfurt interface flow
Planning the flow of windows for the interface

Metrocard test run
Testing the Metrocard machine interface

MTA ticket machine interface models:

pre-existing system
Parking machine model - User places card in then adds money
Vending Machine model - first you insert money, then you click on what you want
ATM Model - carefully walks you through every step, lots of intermediate steps and feedback

Which did users prefer in tests?

Learnability

Human Memory
interaction styles
user models vs system models
learnability principles

UX Interface

This is the install screen for Testfairy, an app for Android that lets developers test out apps before releasing them to a wider public.

This screen is essentially like a full size dialogue. It contains:

basic info
a link to install the app
info on how to use the app
marketing text
contact info
link to read terms
the ability to report spam
Unsubscribe

That is a lot of text for an app interface. It contains a link to download the app as well as instructions to use the app, which you’d have to memorize as clicking to install and opening the app would be on a separate screen.

This is not very learnable!

Human short-term memory

One model for understanding human memory is that we have working memory and longterm memory. Working memory is where we do our active thinking. Studies generally indicate we have a limited amount of elements we can actively engage with in our short term memory, generally framed as around 7 items.

We need to limit the user’s options so as not to overload their active working memory.

Three types of interaction styles

Command language
Menus / forms
Direct maniulation

1. Command language

The command line is a command language. These are the earliest type of computer interfaces (see week 1 notes).

As an example, a Google/DuckDuckGo/Bing search bar creates a command language query.

computer science site:purchase.edu

We can consider a Voice User Interface as another manifestation of a command language.

2. Menus / forms

Menus / form interfaces are a more recent interaction model than command language but have been around at least since the 80s. The earliest websites (90s) behave this way.

Dialog boxes are essentially simplified forms.

They can provide a clear if unglamorous interface.

3. Direct manipulation

Direct manipulation is the term we use for a interface where a user interacts with a visual representation of a data object.

There are physical actions such as dragging on scrollbars or pressing a button
fast, incremental, reversible
immediate visual indication of an action taking effect

Compare interaction styles

learnability - short-term working memory
consider which requires the user to hold more things in their head at once
error feedback
think of errors on the command line vs the error of dragging a scrollbar too far
efficiency
which is faster for experts?
can direct manipulation be efficient?
user types
which is better for experts?
for beginners?
programming difficulty
command languages are relatively easy to create
direct manipulations requires graphics which require both commands as well as creating the visual interface
accessibility
command languages and menus and forms are based on text so can be easier for vision-impaired users

Model of a system

The model of a system is the sum of the constituent parts of a system and how they work together. It describes how those parts work and interact to make a system do something.

System model - how the system actually works

Interface model - the model that gets presented to the user through its interface

User model - how the user thinks the system works

The interface model must be

simple
match the user’s conception of the needed task
clear

Interface models should give immediate feedback. Consider what happens when you push a button or drag a scrollbar. Feedback should be visual but can also be audio (clicking sound for example).

Interfaces should be consistent, not surprising. For best practices, follow what popular programs or platforms do.

Interfaces should use common words, not technical jargon.

Homework

Reading Response

Read David Reinfurt chapter “Touch Start to Begin” (20 minute read) about his experience as a professional designer that designed the Metrocard machines for the New York City subway.

Response: Write a short response (1/2 a page) to this reading. What did you find surprising or new to you in Reinfurt’s description of the design of the MTA Metrocard screens? In your own words: what was the design methodology (sequence of design) they went through from ideation to implementation, testing, to final public version of the system?

Sources: Learnability Notes and Hall of Fame/Shame concept CC BY-NC-SA 4.0 adapted from MIT OpenCourseWare 6.831

Complete project 1: Command Line Interface

Work with a partner to design a Command Line Interface for a program of your choice. You could make music playing software, a countdown timer, a program that reads aloud to the user, a to-do list maker, a meditation app, a sleep machine, or something else.

Create a menu by printing out options for the user. Use the select command to run a function based on the user selection.

In class we learned you can combine command line software together. In this assignment you should consider what building blocks from BASH you will use to make your software. We can consider gluing these program bits together similar to sticking together lego blocks.

Basic script built out of separate program parts:

# this is a comment. Use them!

echo "some text" # prints text out

echo -e "some text
on two lines"

read -$ "Enter your name " yourname
#Prompts with "Enter your name" and saves in $yourname
#Don't forget variables are used starting with $

say "something" # speaks text out loud

afplay file.mp3 # plays an audio file

sleep 10 # sleeps (waits) 10 seconds

You are welcome to use other BASH commands and programs as well, along with our starter menu scripts.

In addition to a functional piece of software, consider how a prominent title, emojis and/or ascii art could help or hinder your software. How can color help make your interface more useable and/or fun? How can you make the program more discoverable with help?

For homework, finish your program, working with your partner on your CLI program, getting the main concept developed along with creating your working program loop. You will likely have a loop that checks for user input, then displays a result based on what the user selects from a menu.