User Interface (UI) / User Experience (UX) Design Principles

Active learning works because UI/UX design is inherently hands-on. Students must experience firsthand how poor design choices create friction, while good principles make interactions seamless. By critiquing, prototyping, and testing, they internalise concepts better than through lectures alone.

• Class 12
• Computer Science
• 4 activities
• 25 min–45 min

Learning Objectives

1. Critique existing software interfaces based on established UX best practices, identifying specific areas for improvement.
2. Design a functional user interface prototype for a database application feature, incorporating principles of clarity and ease of use.
3. Explain the core principles of effective UI and UX design, including consistency, feedback, and accessibility, with examples.
4. Compare and contrast the UI/UX of two different database management tools, evaluating their strengths and weaknesses.

Project-Based Learning

⏱ 30 min·Pairs

Pairs: App Interface Critique

Pair students to choose an Indian app like Aadhaar or IRCTC. They list three strengths and three weaknesses using UI principles such as feedback and navigation. Pairs share critiques with the class for group discussion.

Prepare & details

Explain the core principles of good User Interface (UI) and User Experience (UX) design.

Facilitation Tip: During the App Interface Critique activity, provide two contrasting interfaces so students can compare layout and interaction patterns side by side.

Setup: Standard classroom of 40–50 students; printed task and role cards are recommended over digital display to allow simultaneous group work without device dependency.

Materials: Printed driving question and role cards, Chart paper and markers for group outputs, NCERT textbooks and supplementary board materials as base resources, Local data sources — newspapers, community interviews, government census data, Internal assessment rubric aligned to board project guidelines

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Project-Based Learning

⏱ 45 min·Small Groups

Small Groups: Wireframe Prototype Build

In small groups, students sketch paper wireframes for a DBMS login and query screen. Groups exchange prototypes for 5-minute peer tests, noting issues. They refine designs based on feedback.

Prepare & details

Design a user interface prototype for a specific feature of your project.

Facilitation Tip: For the Wireframe Prototype Build, give students a simple data task (e.g., 'Add a new student record') to keep their focus narrow and practical.

Setup: Standard classroom of 40–50 students; printed task and role cards are recommended over digital display to allow simultaneous group work without device dependency.

Materials: Printed driving question and role cards, Chart paper and markers for group outputs, NCERT textbooks and supplementary board materials as base resources, Local data sources — newspapers, community interviews, government census data, Internal assessment rubric aligned to board project guidelines

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Project-Based Learning

⏱ 40 min·Whole Class

Whole Class: Accessibility Role-Play

Assign roles simulating impairments: use blindfolds for screen readers or one hand for navigation. Class tests a projected sample interface. Discuss adaptations like keyboard shortcuts and high contrast.

Prepare & details

Critique existing software interfaces based on UX best practices.

Facilitation Tip: In the Accessibility Role-Play, have students use only screen readers or keyboard navigation to experience barriers directly.

Setup: Standard classroom of 40–50 students; printed task and role cards are recommended over digital display to allow simultaneous group work without device dependency.

Materials: Printed driving question and role cards, Chart paper and markers for group outputs, NCERT textbooks and supplementary board materials as base resources, Local data sources — newspapers, community interviews, government census data, Internal assessment rubric aligned to board project guidelines

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Project-Based Learning

⏱ 25 min·Individual

Individual: Principle Application Sketch

Each student selects a project feature and sketches a UI applying five principles. They self-assess against a rubric. Share one sketch in a class gallery walk.

Prepare & details

Explain the core principles of good User Interface (UI) and User Experience (UX) design.

Facilitation Tip: For the Principle Application Sketch, ensure students label each design choice with the principle it follows.

Setup: Standard classroom of 40–50 students; printed task and role cards are recommended over digital display to allow simultaneous group work without device dependency.

Materials: Printed driving question and role cards, Chart paper and markers for group outputs, NCERT textbooks and supplementary board materials as base resources, Local data sources — newspapers, community interviews, government census data, Internal assessment rubric aligned to board project guidelines

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Teaching This Topic

Teach this topic by grounding principles in real-world examples students use daily, like school portals or banking apps. Avoid abstract definitions; instead, have students analyse why a design succeeds or fails. Research shows that when students create artefacts they care about, retention improves significantly.

What to Expect

Successful learning looks like students confidently identifying design flaws, proposing clear improvements, and building prototypes that demonstrate user-centered thinking. They should articulate why certain choices work or fail based on principles like consistency and accessibility.

Watch Out for These Misconceptions

Common Misconception

During the App Interface Critique activity, watch for students focusing only on colours or images as the primary design elements.

What to Teach Instead

Prompt them to look at layout, button placement, and feedback mechanisms like error messages. Ask: 'Does this design help a user complete a task efficiently, even if it isn’t visually striking?'

Common Misconception

During the Wireframe Prototype Build activity, watch for students dismissing UX as unnecessary for database projects.

What to Teach Instead

Use their prototypes to show how unclear labels or disorganised forms slow down data entry. Ask: 'How would you feel using this if you were a clerk entering 50 records daily?'

Common Misconception

During the Accessibility Role-Play activity, watch for students assuming accessibility features add complexity.

What to Teach Instead

Have them experience how alt text or high-contrast modes make the interface usable for all. Ask: 'How does a simple change like this improve the experience for someone using a screen reader?'

Assessment Ideas

Exit Ticket

After the App Interface Critique activity, provide screenshots of two interfaces. Ask students to write one UI principle well-applied in each and one UX principle that could be improved with a brief explanation.

Peer Assessment

During the Wireframe Prototype Build activity, have students present sketches for database features. Peers use a checklist to assess clarity of navigation, visual hierarchy, and purpose of each element, initialing sketches that meet criteria or suggesting one improvement.

Discussion Prompt

After the Accessibility Role-Play activity, facilitate a discussion using the prompt: 'Consider a common Indian government service website or app. What is one UI/UX aspect that makes it difficult to use, and what specific change would you suggest for better accessibility?'

Extensions & Scaffolding

• Challenge: Ask students to redesign a poorly rated Indian government service website (like railway ticketing) and document changes with UI/UX principles.
• Scaffolding: Provide pre-drawn wireframe templates for students struggling with visual hierarchy to focus on content placement.
• Deeper exploration: Introduce micro-interactions (e.g., hover effects) and discuss how they guide user attention without clutter.

Key Vocabulary

User Interface (UI)	The visual elements and interactive components of a digital product that a user directly interacts with, such as buttons, menus, and screens.
User Experience (UX)	The overall feeling and satisfaction a user has when interacting with a product or service, encompassing usability, accessibility, and desirability.
Usability	The ease with which users can learn and operate a system to achieve their goals effectively and efficiently.
Accessibility	The design of products, devices, services, or environments for people with disabilities, ensuring they can use them.
Visual Hierarchy	The arrangement and presentation of elements on a screen to indicate their order of importance, guiding the user's eye.