CSE566 / HUMAN-COMPUTER INTERACTION
Assignment 1
Explain an Interface Through Human Capabilities
Individual work | Course weight: 3% | Deadline: to be announced
Analyze one everyday interaction, explain its difficulties using the concepts from Lectures 1 and 2, and propose an improved design. Include a numerical comparison of pointing difficulty using Fitts’ law.
1. Choose an interface and a task
Choose a website, application, self-service terminal or physical control panel that you can inspect and illustrate. Define one specific task with a clear starting state and goal, such as locating a course document, selecting a destination or changing a setting. Choose a task that includes selecting a visible target so that you can complete the pointing analysis.
Identify the intended user, relevant experience and context of use. Include an overview screenshot or photograph and briefly describe the steps needed to complete the task. Keep the scope small enough to analyze in detail.
2. Explain three interaction difficulties
Use annotated screenshots or photographs to identify three distinct difficulties. Explain them using at least three relevant concepts across the following areas:
- Perception and organization: contrast, grouping, visual hierarchy, Gestalt principles or color use.
- Attention and memory: competing signals, visual search, remembering information across steps or recognition versus recall.
- Understanding and action: mental models, mappings, feedback, target size or movement distance.
For each difficulty, connect a specific feature to what the person must perceive, remember, understand or do. Explain the likely consequence for the chosen task. “The screen is confusing” is insufficient; identify what causes the difficulty and why it matters.
Example: The item identifier disappears when help opens. A person seeking assistance must remember or retrieve it. Keeping the selected item visible could reduce this memory demand.
3. Show an improved version
Create an annotated before/after comparison addressing all three difficulties. A legible hand sketch, annotated screenshot or slide drawing is sufficient. Number your proposed changes and link each one to the relevant explanation. Discuss at least one tradeoff, such as a larger target using space needed for other information.
ASSIGNMENT 1 / POINTING ANALYSIS
Fitts’ law without coding
4. Compare one pointing action
Choose a rectangular target in your task and show the same action in the original and redesigned layouts. For the simplest comparison, place a marked starting point horizontally level with the target’s center. Use the same pointing device and a consistent task starting state in both versions.
- Mark the pointer’s starting position and the center of the target on both drawings. For a touch or physical-control example, explicitly mark the assumed starting position of the finger or stylus.
- Measure D, the distance from the starting position to the target center. Measure W, the target’s selectable width along the direction of movement. In the suggested horizontal arrangement, W is the target’s horizontal width.
- Use a ruler on a printout, or pixel measurements in an image editor. Keep D and W in the same units and preserve the proportions of each layout. Measure the selectable region, not just the icon drawn inside it.
- Calculate the index of difficulty for each layout and show your substitutions. A calculator or spreadsheet is sufficient.
ID = log2(D / W + 1)
ID is measured in bits. If your calculator has no base-2 logarithm, use log(x) / log(2), using the same logarithm base in the numerator and denominator.
Worked example
| Layout | D | W | Calculation | ID |
|---|---|---|---|---|
| Original | 120 mm | 10 mm | log₂(120 / 10 + 1) | 3.70 bits |
| Redesigned | 80 mm | 20 mm | log₂(80 / 20 + 1) | 2.32 bits |
The index decreases by approximately 1.38 bits. The closer, wider target predicts easier pointing under comparable conditions. Apply this procedure to your own layouts; do not simply submit these example dimensions.
Explain what the comparison means
Explain whether changing distance, width or both produced the difference. State how you chose the starting position. If your redesign changes that position, explain why the preceding task step changes it.
The time model is MT = a + b × ID. This assignment asks only for ID: you do not need to estimate a and b or predict milliseconds. A reduction in ID is not a percentage reduction in task time. Explain one factor outside this calculation, such as finding the target, interpreting its label or understanding the feedback.
No programming, participant recruitment or timed experiment is required. The purpose is to connect interface geometry to a model of pointing difficulty.
ASSIGNMENT 1 / SUBMISSION AND ASSESSMENT
Make your reasoning visible
5. Describe how you would check one improvement
Choose one proposed change and describe a short check: who would perform the task, what goal you would give them, what you would observe, and what result would support or challenge your explanation. For example, check whether the person can ask for help about the correct item without returning to retrieve its identifier. Describe the check; you do not need to conduct a study.
What to submit
Submission: Upload your PDF to the Assignment 1 entry in the Assignments section of the class Microsoft Teams group.
Submit one 4–6-page illustrated PDF, excluding any reference list. Put your name and student number on the first page. Use a clear filename such as CSE566-A1-StudentNumber.pdf. Include:
- The interface, intended user, context, task and starting state.
- Three numbered difficulties with readable annotated screenshots or photographs and explanations grounded in course concepts.
- An annotated redesign, the rationale for each change and at least one tradeoff.
- Both measured pointing layouts, D and W values, the two ID calculations, and an interpretation of their difference.
- A proposed check for one improvement and references to the interface and any external material you used.
Keep labels and measurements readable at normal viewing size. Cite an interface by its application/product name or URL and identify the screen you analyzed. Use the Lecture 1 and Lecture 2 readings to support your explanations. A working prototype and source code are not submission requirements.
Marking criteria
| Criterion | Points | What earns credit |
|---|---|---|
| Analysis and reasoning | 40 | Three specific difficulties; accurate use of concepts; clear links between design features, human capabilities and the task. |
| Redesign and justification | 30 | Changes address the analysis; before/after views are understandable; rationale and a tradeoff are explained; proposed check addresses one improvement. |
| Fitts’ law comparison | 20 | Clear start and target; suitable D and W measurements; correct calculations; sound interpretation and a factor outside the model. |
| Clarity and visual communication | 10 | Organized report, readable annotations, traceable references and complete submission. |
Total: 100 points for this assignment, contributing 3% to the course grade. Assessment emphasizes the quality of your explanation and design reasoning; drawing polish is secondary.
Before submitting
Can a reader follow the task, locate each difficulty, understand why it matters, and see how your redesign addresses it? Can they reproduce your Fitts’ law calculations from the dimensions shown? Does your proposed check test the improvement you actually made?