UI and UX Design

Daffodil International University Faculty of Science & Information Technology Department of Computer Science & Engineering Midterm Examination, Fall 2026 Course Code: CSE 441, Course Title: UI and UX Design Level: 4 Term: 2 Batch: 65 Time: 01:30 Hrs Marks: 25 Answer ALL Questions [The figures in the right margin indicate the full marks and corresponding course outcomes. All portions of each question must be answered sequentially.] 1. a) Distinguish between UI (User Interface) and UX (User Experience). Using a bank money-transfer on a mobile banking app as the context, give one example of each. [2] b) A university's students complain that the semester registration portal is slow and confusing during peak hours. Apply the Design Thinking process to this problem by answering the following: [3] i) Describe one specific Empathize activity you would carry out and what you would look for ii) Write a problem statement in the form: "Students need a way to ... because ...". iii) State which prototype fidelity level you would build first, and one method to test it with real users. 2. a) A mobile-number field on a sign-up form shows an 11-digit number as one unbroken string (01712345678). Its label sits far above the field, closer to the field of the previous question. Apply Miller's Law and the Gestalt principle of Proximity to redesign the form, state one change for each principle and explain how it helps users. [2] b) You are designing a telemedicine app for people in rural Bangladesh. [3] i) Create a persona for a primary user, including name, demographics, one goal and two pain points. ii) Write one user story for this persona in the format "As a "user", I want to "action" so that "benefit". 3. a) A designer has the following six cards for a university student portal: Class Routine, Exam Schedule, Grading Policy, Tuition Fees, Waiver Application, Hostel Application. Perform a closed card sort using the two predefined top menus Academics and Administration. Then state when an open card sort would be the better choice and why. [2] b) A bus-ticket booking app has these problems: [3] (1) The calendar allows users to select dates that have already passed. (2) After tapping "Pay Now", nothing changes on screen for 8 seconds, so users tap again and are charged twice. (3) Tapping "Cancel Booking", placed right beside "Confirm", cancels the ticket immediately. For each problem, identify the Interaction Design principle (Affordance, Feedback, Consistency, Constraints, Error Prevention) that is violated, explain why, and propose one fix. 4. a) A mobile app places a small "Pay Now" button (24 × 24 px) at the top-left corner, while most users hold the phone in one hand and use their thumb at the bottom of the screen. Apply Fitts's Law to suggest two changes to the button, and state the minimum touch target size recommended by Apple iOS or Google Material Design. [2] b) A desktop application's "Export Report" button callback reads a 500 MB file using a synchronous I/O operation. When a user clicks it, the window stops responding and the OS shows "Not Responding". [3] i) Using the event queue, event loop and callback model, explain why the window freezes. ii) Suggest one change in how the callback should be designed to keep the interface responsive. 5. a) Choose the most suitable architectural pattern (MVC, MVP or MVVM) for each scenario and justify your choice in one or two sentences: [2] i) A live social media feed where the Like counter and heart icon update automatically when the underlying data changes. ii) A banking transfer screen where the View must be "dumb", must not know the Model exists, and every UI change is explicitly ordered by a gatekeeper. b) Identify the most suitable UI design pattern (Observer, Command, Strategy or Composite) for each situation and justify it briefly: [3] i) Clicking "Add to Cart" must update the cart badge, the mini-cart list and the button state at the same time. ii) A design tool must support Ctrl+Z (Undo) and Redo for moving, deleting and recolouring shapes. iii) A checkout screen keeps the same layout while its payment logic changes for Credit Card, PayPal and Apple Pay.