Computing · JC 2 · Computational Thinking Project · Semester 2

User Interface (UI) and User Experience (UX) Design

Students will learn principles of UI/UX design to create intuitive and user-friendly applications.

About This Topic

UI and UX design principles teach students to build intuitive, user-friendly applications. In JC 2 Computing, within the Computational Thinking Project, students design mobile app interfaces based on user needs, evaluate software usability, and explain user feedback's role in iteration. Core ideas cover consistency for familiar interactions, clear feedback for user actions, visual hierarchy to guide attention, and accessibility for all users, including those with disabilities.

This topic strengthens computational thinking through decomposition of user problems, pattern recognition in design heuristics, and abstraction via prototypes. It connects to Singapore's MOE emphasis on practical tech skills, preparing students for app development careers. Students practice empathy by mapping user personas and journeys, fostering iterative mindsets vital for real projects.

Active learning excels with this content because students prototype rapidly using paper or digital tools like Figma, test with peers, and refine based on observations. These methods expose flaws lectures overlook, build collaboration, and make principles memorable through direct application.

Key Questions

1. Design a user interface for a mobile application based on user needs.
2. Evaluate the usability of an existing software application.
3. Explain the importance of user feedback in the UI/UX design process.

Learning Objectives

• Design a user interface for a mobile application that addresses identified user needs.
• Evaluate the usability of an existing software application using established heuristics.
• Explain the iterative nature of UI/UX design, referencing the role of user feedback.
• Compare different UI design patterns for common mobile application features.
• Critique a user interface based on principles of visual hierarchy and accessibility.

Before You Start

Introduction to Programming Concepts

Why: Students need a foundational understanding of how software is built to appreciate the practical implications of UI/UX design choices.

Problem Solving and Algorithmic Thinking

Why: Decomposing user needs into smaller, manageable parts is crucial for effective interface design, mirroring algorithmic thinking.

Key Vocabulary

User Persona	A semi-fictional representation of an ideal user, based on research and data, used to guide design decisions.
User Journey Map	A visualization of the steps a user takes to interact with a product or service, highlighting their actions, thoughts, and emotions.
Usability Heuristics	A set of general principles for user interface design, often used as a checklist to evaluate the ease of use of a system.
Wireframe	A basic visual guide representing the skeletal framework of an application's interface, focusing on layout and content placement.
Affordance	The perceived and actual properties of a thing, primarily those fundamental properties which determine just how the thing could possibly be used.

Watch Out for These Misconceptions

Common Misconception

UI design prioritizes aesthetics over functionality.

What to Teach Instead

UI elements must support UX goals like easy navigation. Prototyping activities let students test pretty but confusing designs, revealing failures through peer use and prompting balanced revisions.

Common Misconception

One interface suits all users.

What to Teach Instead

Diverse users need tailored designs; empathy mapping in groups exposes overlooked needs, such as accessibility for elderly users, building inclusive thinking via shared discussions.

Common Misconception

User feedback is optional after initial design.

What to Teach Instead

Iteration relies on feedback loops; usability testing shows students how early prototypes improve with input, reinforcing the cycle through hands-on refinements and comparisons.

Active Learning Ideas

Pairs: Empathy Mapping Workshop

Pairs select a mobile app scenario and create empathy maps for two user personas. They note goals, frustrations, and behaviors in four quadrants. Pairs then share maps with another pair for quick feedback and refinement.

30 min·Pairs

Small Groups: Paper Prototyping Challenge

Small groups sketch low-fidelity wireframes for a task in a sample app. One student acts as user, another as prototype, narrating interactions. Group records issues and iterates twice based on observations.

45 min·Small Groups

Whole Class: Usability Heuristic Gallery Walk

Display screenshots of apps around the room with Nielsen's 10 heuristics posted. Students walk in pairs, evaluate two apps each, and post sticky notes with findings. Class discusses top issues as a group.

50 min·Whole Class

Individual: Feedback-Driven Iteration

Individuals design a simple UI screen, then swap with a partner for 5-minute think-aloud tests. Incorporate three pieces of feedback into a revised version and justify changes in a short reflection.

40 min·Individual

Real-World Connections

• UX designers at Grab meticulously map user journeys for ride-hailing and food delivery services, ensuring smooth transitions and clear communication for millions of commuters and diners in Singapore.
• Software engineers at NCS, a leading IT services company in Singapore, collaborate with UX specialists to design intuitive interfaces for government portals, making public services accessible to all citizens.
• Product managers at Shopee analyze user feedback and A/B test different interface elements to optimize the online shopping experience, driving engagement and conversion rates on their e-commerce platform.

Assessment Ideas

Discussion Prompt

Present students with screenshots of two different mobile banking apps. Ask: 'Which app's interface do you find more intuitive and why? Identify at least two specific design elements that contribute to your preference, referencing usability heuristics.'

Peer Assessment

Students share their wireframes for a simple task management app. Peers provide feedback using a rubric that includes criteria such as: Is the navigation clear? Is information presented logically? Are interactive elements obvious? Students must identify one area for improvement based on peer feedback.

Quick Check

Provide students with a short description of a user persona and their goal. Ask them to sketch a single screen for an app that would help this user achieve their goal, labeling key UI elements and explaining their design choices in relation to the persona's needs.

Frequently Asked Questions

What UI/UX principles should JC 2 students master?

Focus on consistency for predictable interactions, immediate feedback for actions, visual hierarchy to prioritize content, and accessibility features like adjustable text. Students apply these in mobile designs, linking to MOE standards for user-centered computing. Practice through heuristics ensures intuitive apps that reduce errors and boost satisfaction.

How to evaluate usability of existing apps in class?

Use Nielsen's heuristics: check visibility of system status, match between system and real world, user control. Students conduct think-aloud tests or surveys on apps like banking tools. Score interfaces, discuss fixes; this reveals real flaws and ties to key questions on evaluation.

Why is user feedback essential in UI/UX design?

Feedback uncovers hidden issues like confusing navigation that designers miss. It drives iteration, aligning apps with needs. In projects, collect via prototypes and surveys; students learn cycles improve retention and efficiency, preparing for industry practices in Singapore's tech sector.

How can active learning enhance UI/UX lessons?

Active methods like paper prototyping and peer testing make principles experiential. Students discover usability gaps firsthand, iterate collaboratively, and retain concepts better than passive notes. Gallery walks and think-alouds build critique skills, aligning with MOE's emphasis on practical computational thinking for engaging JC lessons.