INFOSYS 220 Chap.7 Interface Design and Prototyping
Interface Design and Prototyping
Design for a user's task and context
An interface is the point where a user pursues a goal through the system. Good design makes available actions and current state visible, uses consistent language, gives timely feedback, prevents avoidable error and provides recovery when error occurs. Navigation should preserve orientation and match the task structure.
Mobile and desktop contexts differ in space, input, attention and environment, so copying one layout into another can damage usability.
Prototype as an evidence instrument
Low fidelity prototypes support rapid exploration of structure and alternatives. Higher fidelity interactive prototypes test flows, controls, transitions and visual choices more realistically. Fidelity should match the question.
A convincing demonstration traces a numbered function through a user journey, annotates design decisions, records feedback and explains why alternatives were accepted or rejected. Accessibility should be considered from the beginning through readable contrast, meaningful labels, keyboard or assistive paths and feedback that does not depend on colour alone.
What this chapter covers
- 01
User goals, contexts and task centred interface decisions
- 02
Visibility, consistency, feedback, prevention and recovery
- 03
Navigation structure and user orientation
- 04
Mobile constraints and responsive interaction choices
- 05
Low and high fidelity prototype questions
- 06
Accessibility and documented evidence from feedback
Worked example · free
Repair an ambiguous submission screen
- 2Identify visibility and accessibility failures.
- 2Improve error prevention and recovery.
- 2Specify feedback for uncertain network state.
- 2Choose prototype evidence.
Key terms
- Affordance
- A design cue suggesting how an interface element can be used.
- Feedback
- A perceivable response that tells the user what the system has done or is doing.
- Error Recovery
- Support that explains a failure, preserves useful work and enables a safe next action.
- Navigation
- The structure and controls that help users move among locations while retaining orientation.
- Fidelity
- The degree to which a prototype resembles the detail and interaction of the intended solution.
- Accessibility
- Design that enables people with varied abilities and assistive technologies to use the service.
Interface Design and Prototyping FAQ
Should a prototype look finished?
Only when visual and interaction detail is the question being tested. Early structural questions are often better served by low fidelity work because alternatives are faster and less costly to change. A polished surface can discourage critique and create false confidence about production readiness.
Why is feedback important?
Feedback closes the action loop. It tells users whether input was accepted, work is processing, a state changed or recovery is required. Without it, users repeat actions, abandon tasks or create duplicates because they cannot distinguish delay from failure.
How can navigation be evaluated?
Give users representative goals and observe whether they can predict the next action, maintain orientation and recover from a wrong turn. Record paths, hesitation and language confusion. Do not rely only on whether the designer can explain the structure after the test.
Is accessibility a final compliance check?
It is more effective as an ongoing design condition. Early decisions about structure, labels, contrast, focus order, target size and error feedback shape the whole interface. Testing late may expose costly structural problems that a basic prototype could have revealed sooner.
Exam move
Select one actor goal from your use case model and write the minimum information and actions needed to complete it. Sketch three alternative flows at low fidelity rather than polishing the first idea. For each screen, mark the user's current state, available action, system feedback and recovery path. Test the labels with someone who did not see the requirements, because unexplained designer vocabulary often signals a mismatch.
Move one alternative into an interactive prototype and add realistic states for loading, empty data, validation error, connection failure and success. Check that no meaning depends only on colour and that controls have meaningful names and a logical focus order. Maintain a design decision log with the requirement, option considered, evidence, decision and remaining risk. After feedback, show what changed and why.
For mobile practice, repeat the key task under narrow width and interrupted attention; do not merely shrink desktop controls. Finally, create an annotated journey connecting numbered functions to screenshots and stakeholder needs. This evidence is stronger than a gallery of attractive screens because it demonstrates traceability, behaviour and reasoned rejection of alternatives.
Working through Interface Design and Prototyping in INFOSYS 220? Sia is AskSia’s AI Information Technology tutor — ask any INFOSYS 220 Interface Design and Prototyping question and get a clear, step-by-step explanation grounded in how INFOSYS 220 is taught and assessed. Read this chapter free, then take your hardest questions to Sia.