IITM Software Engineering · Software User Interfaces

UI Design ke Complete Notes
— Lectures + Assignment, sab ek jagah

Interaction Design → Usability Goals → UX Goals → Nielsen Heuristics → Prototyping — poora week step by step, easy Hinglish me. End me saare 14 assignment questions with answers & "kyun" wali explanation. 📝

Profs: Sridhar Iyer (IITB) + Prajish Prasad (FLAME) Assignment score analysis included ✓
🖱️✏️
1

Introduction to Interaction Design

UI itna important kyun hai? Pehle yeh samjho 👇

Pichle week humne requirements gather karna aur user stories banana seekha tha. Ab notice karo — almost har user story ko implement karne ke liye ek User Interface (UI) chahiye hota hai: web pages, buttons, text fields, navigation, etc.

UI = user aur system ke beech ka interaction point. Aur yahan ek golden line yaad rakho:

Key idea ✍️ "Form comes before function" — user sabse pehle tumhare product ka form (interface) dekhta hai, functionality baad me aati hai. Agar interface appealing ya intuitive nahi hai, toh user ya toh product reject kar dega ya use karna cumbersome lagega.

Isliye goal simple hai: software easy to use, easy to learn, aur confusing nahi hona chahiye. Yahan tak ki roz-marra ke physical objects (jaise ketchup bottle ka design) bhi kai rounds of discussion ke baad final hote hain!

😤 Users ko kya frustrate karta hai?

🌀Cluttered layout

No hierarchy, no navigation — kuch dhundna hi mushkil.

🔤Poor typography & random colors

Consistent theme nahi, aankhon ko dard.

🐢Slow load time

Page load hone me zamana lag jaye.

📢Too many ads / inconsistent colors

Content kam, distraction zyada.

🎨 Interaction Design kya hai?

Definition (yaad karo): "Designing interactive products to support people in their everyday working lives."

Software companies me iske liye dedicated roles hote hain — Interaction Designers, UX/UI Developers — jo sirf interface ke aspects dekhte hain.

🔁 Process of Interaction Design (4 steps — exam favourite!)

  • Step 1: Identify needs & requirements
  • Step 2: Develop alternative designs jo un requirements ko meet karein
  • Step 3: Build interactive versions (prototypes)
  • Step 4: Evaluate karo — kaunsa design actually usable hai
Connection 🔗 Yeh process Agile jaisa lagta hai na? Similarity ka reason: dono user ko center me rakhte hain. Alternate designs banane ke liye techniques = storyboarding, paper prototyping, etc. (Section 5 me detail me).
2

Usability Goals

Assignment ke aadhe questions isi se aaye the — dhyan se! 🎯

Usability (ISO 9241-11 standard): "The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use."

Paanch (5) usability goals hain — Effectiveness, Efficiency, Safety, Learnability, Memorability. Har ek ka "keyword trigger" pakdo, MCQ me wahi kaam aata hai.

🎯1. Effectiveness

System apna kaam kitna achha karta hai — general goal. Kya system users ko unka kaam karne deta hai, info access karne deta hai, goods kharidne deta hai?

Examples: Google — minimal design, search bilkul center me. Amazon — saari zaroori info (cost, delivery date, offers) ek hi page pe, no scroll needed. Trigger word: "does what it's supposed to do" / "kaam ho gaya properly"

⚡2. Efficiency

Minimum steps me task complete. Ek baar seekhne ke baad user high productivity maintain kar paye.

Example: Amazon "Buy Now" — kam clicks; saved address + saved card = repetitive kaam avoid. Food delivery app jo favourite dishes & payment info yaad rakhta hai = Efficiency! Trigger word: "minimum clicks/steps", "saved details", "fast task completion"

🛡️3. Safety (2 aspects!)

Aspect 1: Dangerous conditions se user ko protect karna (X-ray machines, chemical plants).
Aspect 2: Kisi bhi software me — accidental unwanted actions se bachana + galti ho jaye toh recovery dena.

Therac-25 case ⚠️: Radiation therapy machine — operator ne electron mode (E) ki jagah X-ray mode (X) daba diya → excess radiation → patient ki death. Software-based safety ka classic failure example. Recovery examples: Trash se file recover, Word crash ke baad recovery options, Ctrl+Z (Undo), WhatsApp delete message. Save & Close buttons door-door rakhna = wrong key press ka risk kam. Trigger word: "confirm before delete", "undo", "avoid accidental actions"

🧠4. Learnability

System seekhna kitna easy hai. Users manual padhna nahi chahte — turant start karna chahte hain.

Examples: Facebook/Instagram/WhatsApp — bina manual ke seekh gaye. Complex systems ke liye: tutorials, step-by-step examples (jaise payroll software wala assignment question!) Trigger word: "tutorial", "easy to learn", "step-by-step guide"

💾5. Memorability

Ek baar seekhne ke baad yaad rakhna kitna easy hai — especially jo systems infrequently use hote hain. Mahino baad use karo toh dubara seekhna na pade.

Example: MS Word — meaningful icons, command names, menu options se yaad rehta hai ki kaunsa tool kahan milega. Trigger word: "use after months", "no relearning needed", "meaningful icons"
MCQ Trap Alert 🚨 Efficiency vs Learnability confusion mat karna: tutorial/examples = Learnability; kam clicks/saved info = Efficiency; delete confirmation/undo = Safety; mahino baad bhi yaad = Memorability; overall "kaam sahi hota hai" = Effectiveness.
3

User Experience (UX) Goals

Usability = objective. UX = subjective feelings. Yeh difference Q8 me pucha gaya tha! 💡

Usability goals ke alawa, hum chahte hain ki user software use karte waqt positive emotions feel kare. Yeh hain User Experience Goals — subjective, user ke perspective se.

  • Satisfying (santusht feel ho)
  • Enjoyable / Fun / Entertaining (maza aaye)
  • Helpful (madadgar lage)
  • Motivating (use karne ka mann kare)
Ratta maar line 📌 Usability goals = effectiveness, efficiency, safety, learnability, memorability (system ki objective quality).
UX goals = satisfying, enjoyable, fun, entertaining, motivating, helpful (user ki subjective feeling).
⚠️ "Effective and efficient" aur "safe and less error-prone" UX goals NAHI hain — woh usability goals hain!
4

Evaluation using Design Heuristics

Nielsen ke 10 heuristics → 3 groups: Understanding, Action, Feedback

Heuristics kya hote hain? Previous experiences se nikli hui strategies / rules of thumb. Designers time ke saath guidelines bana lete hain. Sabse famous set: Jakob Nielsen ke 10 design heuristics. Prof. Scott Klemmer ne inko 3 broad categories me group kiya hai — course isi grouping ko follow karta hai:

🧩 Understanding
  • ConsistencyConsistent layout (color, font, button placement — jaise Windows me Yes/No, minimize/close hamesha same jagah) + consistent names (product/feature ke naam har screen pe same).
  • Familiar Language & MetaphorsUsers ke jaane-pehchane words use karo, jargon nahi. E.g. online shopping me "cart", "checkout" (physical store wale terms); "mobile wallet" = physical wallet jaisa add/remove money.
  • Clean & Functional DesignMinimal, easy to understand. Cluttered design (multiple fonts/colors, no theme) = relevant info dhundna mushkil. Clear left navigation + consistent colors = good.
🕹️ Action
  • Freedom(a) Freedom to undo — trash recovery, Ctrl+Z. (b) Freedom to explore — bina login ke products browse karna (purana IRCTC login maangta tha = bad).
  • Flexibility(a) New users → menus; experts → shortcuts (Word me cut/copy/paste menu vs Ctrl+X/C/V). (b) Personalization — interest-based content. (c) Customization — user khud choose kare (news topics).
  • Recognition over RecallYaad karwana mat, pehchanne do. "Spain ki capital?" recall hard; "Kya Madrid capital hai?" recognize easy. CLI me `mv file dest` yaad rakhna padta tha; GUI me right-click. Google icons redesign = bad example (sab same dikhne lage).
📣 Feedback
  • Show StatusUser ko batao kya ho raha hai, reasonable time me — loading animation, download me kitna time bachा hai, next steps after signup, advance warnings (e.g. "Gmail storage running out").
  • Prevent Errors(a) Helpful constraints — return date, departure se pehle select hi nahi hone dena (dates greyed out). (b) Offer suggestions — Google autosuggest.
  • Support Error Recovery(a) Problem clear karo (Facebook signup — empty fields red highlight). (b) Solution do (tooltip: "valid email daalo"). (c) Alternative do (galat spelling pe "Did you mean…").
  • Provide Help(a) Help easy to search ho (Help menu). (b) Help in context — jahan zaroorat wahan (Moodle me har field ke paas ? icon).
Heuristic Evaluation process 🔍 Prototype ready hone ke baad experts multiple passes karte hain aur un issues ki list banate hain jo heuristics violate karte hain. Multiple experts ka feedback = multiple usability issues fix. Yeh heuristics tumhare liye self-check bhi hain.
Assignment ke traps yahi se the! 🚨 Alert/warning message dikhana = "Show Status" (Prevent Errors nahi!) — kyunki app tumhe advance warning de raha hai, tumhe koi action karne se rok nahi raha.
Dates disable karna = "Prevent Errors" — kyunki interface ne galat option select karna impossible bana diya (helpful constraint).
Progress bar = "Show Status". Menus + shortcuts dono = "Flexibility".
5

Prototyping Techniques

Poora UI code karke phir se banana costly hai — pehle prototype banao, feedback lo, iterate karo 🔁

Prototype kyun? Quickly users pe test karo, feedback lo, iterate karo. Purposes:

  • Technical feasibility test karna
  • Vague requirements clarify karna (prototype dikhao → user feedback dega)
  • User testing & evaluation of initial UIs
  • Designers ko alternatives me choose karne me help karna

Fidelity = prototype final product ke kitna real / close hai. Types time + fidelity ke basis pe differ karte hain 👇

FIDELITY →
🎬Storyboardhand-drawn comic
📄Paper Prototypescreens on paper
🖥️Digital Mock-upFigma / PPT / Photoshop
🚀Interactive Prototypeclosest to final product
TIME IN DEVELOPMENT →

🎬 Storyboards 3 S's yaad rakho

Definition: ek hand-drawn comic jisme 3 elements hote hain:

  • Setting — context: kaun log involved hain, environment kya hai, kaunsa task accomplish ho raha hai
  • Sequence — kya steps involved hain, user app tak kaise pahuncha, kaunsa task illustrate ho raha hai
  • Satisfaction — user ko kya motivate karta hai, kya accomplish hota hai, kaunsi need fulfil hoti hai (e.g. "Speak Up" example — banda confidently presentation dene lagta hai)

Benefits: holistic focus (task pe, details pe nahi) · specific UI pe commitment avoid hota hai · sab stakeholders me shared understanding banta hai.

📄 Paper Prototypes

Hand-drawn user interface — multiple papers pe alag-alag screens ka UI draw karte hain (e.g. DHH & speech-impaired students ke liye online library — login screen, options, har screen paper pe).

Benefits: code likhne se bahut easy · user interactions pe conversation start hota hai · feedback milte hi elements turant change kiye ja sakte hain.

🖥️ Digital Mock-ups

Tools: Figma, PowerPoint, Photoshop. Paper prototype ko digital me translate karna easy hai. Final product ke aur close. Clients ko dikhao → feedback lo → final product ki taraf transition.

🚀 Interactive Prototypes

Sabse highest fidelity — final product ke sabse closest. Clickable, real interactions feel hoti hain.

Kaunsa prototype kya conversation start karta hai? 💬 Storyboard → user tasks / goals of the system
Paper prototype → actual interactions
Digital mock-up & Interactive prototype → visual design / final UI details
6

Assignment — 14 Questions Solved

Har question pe "Show Answer" dabao — answer + Hinglish explanation milegi. Q5 & Q8 pe khaas dhyan (yeh galat hue the) ⚠️
Q11 mark · Usability Goals

Ek OS har baar file/folder delete karne se pehle puchta hai "really delete karna hai?" — kaunsa usability goal fulfil hua?

  • A. Effectiveness
  • B. Efficiency
  • C. Safe to use
  • D. Learnability
  • E. Memorability
Kyun? → Confirmation dialog user ko accidental unwanted action (galti se delete) se bachata hai — yeh Safety ka doosra aspect hai: "avoid carrying out unwanted actions accidentally". ✅ C
Q21 mark · Usability Goals

Payroll software har service ke liye tutorial video + step-by-step examples deta hai. Kaunsa usability goal?

  • A. Effectiveness
  • B. Efficiency
  • C. Safe to use
  • D. Learnability
  • E. Memorability
Kyun? → Tutorials aur step-by-step examples = system seekhna easy banana. Complex systems ke liye learnability ka classic tool hai training material. ✅ D
Q31 mark · Usability Goals

Editor close karte waqt unsaved document ho toh editor save karne ka option deta hai. Kaunsa usability goal?

  • A. Effectiveness
  • B. Efficiency
  • C. Safe to use
  • D. Learnability
  • E. Memorability
Kyun? → Kaam ka data accidentally lose hone se bachaya ja raha hai + recovery ka mauka mil raha hai — pure Safety. Word ke recovery options wale example jaisa hi. ✅ C
Q41 mark · Definition

"How well a system can help its users to avoid carrying out unwanted actions accidentally" — kaunsa usability goal describe hua?

  • A. Effectiveness
  • B. Efficiency
  • C. Safe to use
  • D. Learnability
  • E. Memorability
Kyun? → Yeh line to Safety ki textbook definition hi hai (aspect 2). Direct ratta question. ✅ C
Q51 mark · GALAT HUA THA ⚠️ · Heuristics

Google Drive bulk-download app: storage 90% full hone par alert message dikhata hai aur storage clear karne ko prompt karta hai. Kaunsa heuristic satisfy hua?

  • A. Prevent errors (tumhara answer)
  • B. Show status
  • C. Support error recovery
  • D. Provide help
Kyun galat hua? → Lecture me "Show Status" ke andar explicitly aata hai: "provide warnings in advance" — jaise Gmail ka "storage running out" wala example. App tumhe bas inform kar raha hai ki kya ho raha hai (status = storage 90% full) aur next step suggest kar raha hai. Woh tumhe koi galat action karne se physically rok nahi raha (constraints/greyed-out options nahi hain) — isliye "Prevent errors" nahi. ✅ B — Show status.

Difference yaad rakho: Warning/alert/progress info = Show Status. Option disable / constraint / autosuggest jo galti hone hi na de = Prevent Errors.
Q61 mark · Prototyping

Ek prototype hand-drawn comic hai jisme setting, sequence aur satisfaction hai. Type of prototype?

  • A. Storyboards
  • B. Paper prototype
  • C. Digital mock-ups
  • D. Interactive prototype
Kyun? → "Hand-drawn comic + 3 S's (Setting, Sequence, Satisfaction)" = Storyboard ki exact definition. Paper prototype me comic nahi, UI screens draw hote hain. ✅ A
Q71 mark · Usability Goals

Food delivery app: minimum clicks me order + favourite dishes, address, payment info yaad rakhta hai. Kaunsa usability goal?

  • A. Effectiveness
  • B. Efficiency
  • C. Safe to use
  • D. Learnability
  • E. Memorability
Kyun? → Minimum steps + repetitive tasks avoid (saved info) = Amazon wala Efficiency example ditto. ⚠️ Trap: "remembers" word dekh ke Memorability mat select karna — Memorability = user ko system yaad rehna, yahan system user ka data yaad rakh raha hai! ✅ B
Q81 mark · GALAT HUA THA ⚠️ · UX Goals (Multi-select)

Kaunse options user experience goals me aate hain? (multiple correct)

  • A. motivating (yeh miss hua)
  • B. effective and efficient (galat select hua)
  • C. satisfying
  • D. safe and less error-prone
  • E. entertaining
Kyun galat hua? → Simple filter lagao: Usability goals = effectiveness, efficiency, safety, learnability, memorability → toh "effective and efficient" (B) aur "safe and less error-prone" (D) usability goals hain, UX nahi! UX goals = subjective positive feelings → motivating, satisfying, entertaining, enjoyable, fun, helpful. ✅ A + C + E.

Shortcut: agar word ek "feeling/emotion" hai → UX goal. Agar word system ki "measurable quality" hai → usability goal.
Q91 mark · Prototyping

Kaunsa prototype final product ke sabse closest hota hai?

  • A. Storyboards
  • B. Paper prototype
  • C. Digital mock-ups
  • D. Interactive prototype
Kyun? → Fidelity graph yaad karo: Storyboard → Paper → Digital mock-up → Interactive prototype (top-right, highest fidelity, final product ke sabse paas). ✅ D
Q101 mark · Heuristics

Spreadsheet software: regular users ko menu-based interface, advanced users ko shortcuts. Kaunsa heuristic?

  • A. Flexibility
  • B. Consistency
  • C. Clean and functional design
  • D. Freedom
Kyun? → Flexibility ka pehla point hi yahi hai: naye users menus se, experts shortcuts se — dono efficiently kaam kar paayein (Word cut/copy/paste example). ✅ A
Q111 mark · Heuristics

Registration page pe image upload karte waqt progress bar dikhta hai upload status ka. Kaunsa heuristic?

  • A. Prevent errors
  • B. Show status
  • C. Support error recovery
  • D. Provide help
Kyun? → Progress bar = user ko inform karna ki kya ho raha hai (upload chal raha hai, kitna hua) — "keep users informed through appropriate feedback". Loading status wala classic example. ✅ B
Q121 mark · Heuristics

Employee registration app: joining date select karte waqt calendar weekends aur holidays ko disable kar deta hai. Kaunsa heuristic?

  • A. Prevent errors
  • B. Show status
  • C. Support error recovery
  • D. Provide help
Kyun? → Invalid dates select ho hi nahi sakti = helpful constraint = error hone se pehle hi rok diya. Flight booking wala greyed-out dates example same hai. Q5 se compare karo: wahan sirf warning thi (Show Status), yahan action hi block hai (Prevent Errors). ✅ A
Q131 mark · Prototyping

Speech-impaired students ke liye app — visual details commit karne se pehle stakeholders se early feedback chahiye. Best prototyping method?

  • A. High-fidelity interactive prototype
  • B. Storyboarding
  • C. Writing backend code
  • D. Figma-based mock-up
Kyun? → Keywords: "early feedback" + "before committing to visual details". Storyboard UI pe commitment avoid karta hai, goals/tasks pe focus karta hai, aur stakeholders me shared understanding banata hai — perfect for earliest stage. Interactive/Figma = visual details, backend code = prototype hi nahi. ✅ B
Q144 marks · Usability Goals

E-commerce site pe user sirf 3 clicks me item purchase kar leta hai kyunki address & payment details saved hain. Best illustrated usability goal?

  • A. Learnability
  • B. Efficiency
  • C. Safety
  • D. Memorability
Kyun? → Q7 ka twin question — minimum clicks + saved details = Efficiency (Amazon Buy-Now example). 4 marks ka tha, toh yeh pattern pakka yaad rakhna! ✅ B
7

Rapid Revision — Cheat Sheet

Exam se 10 minute pehle bas yeh table dekh lo 😎
Scenario me yeh dikhe… Answer yeh hoga
Confirmation dialog, undo, recovery, unsaved-work prompt Safety (usability goal)
Tutorial, step-by-step examples, easy to start Learnability
Minimum clicks, saved address/card/favourites Efficiency
Months baad bhi use karna yaad, meaningful icons Memorability
System overall apna kaam achhe se karta hai Effectiveness
Satisfying, fun, motivating, entertaining, enjoyable, helpful UX goals (subjective)
Same layout/names har screen pe Consistency (Understanding)
"Cart", "checkout", "wallet" jaise real-world terms Familiar metaphors & language
Minimal, uncluttered UI Clean & functional design
Undo + bina login browse/explore Freedom (Action)
Menus for beginners + shortcuts for experts; personalization; customization Flexibility
Yaad karwane ki jagah options dikhana (GUI vs CLI) Recognition over recall
Loading/progress bar, time estimate, next steps, advance warning/alert Show status (Feedback)
Options disabled/greyed out, constraints, autosuggest Prevent errors
Error clear dikhana + solution/alternative dena ("Did you mean…") Support error recovery
Help menu, contextual ? icons Provide help
Hand-drawn comic (Setting+Sequence+Satisfaction), early feedback, no UI commitment Storyboard
UI screens paper pe, instant changes, interaction discussion Paper prototype
Figma / PowerPoint / Photoshop Digital mock-up
Closest to final product, highest fidelity Interactive prototype
Last tip 🧷 Sabse zyada confuse karne wale pairs: Show Status vs Prevent Errors (warn karna vs rokna), Efficiency vs Memorability (system yaad rakhe vs user yaad rakhe), Usability vs UX goals (measurable quality vs feeling). Yeh 3 pairs clear hain toh 90% MCQs done. All the best! 🚀