Writes a class note and chooses Save.
Group 1
Introduction to
User Interface Design
The point where people and digital systems meet.
Hello.
The interface carries each action and response.
About 30 seconds. Ask: “How many interfaces did you use before arriving in class?” Pause for two answers. Explain that an interface is the meeting point between a person and a digital system. Today we will define UI, see why it matters, look at common interface types, and separate UI from UX.
01
What is a user interface?
A user interface lets a person give a digital system an instruction and understand its response.
Class note
UI recap
UI is where a person and a digital system communicate.
✓
Note savedSynced to class notes
Confirms the result in words and color.
2 The interface carries the instruction.
The screen, controls, words, and feedback all belong to the UI.
About 45 seconds. Follow the numbered sample. A person writes a note, the interface turns Save into an instruction, and the system changes through Saving to Saved. Click the button to replay it. Mention that UI includes more than appearance: controls, labels, sounds, and status messages all help a person understand what happened.
02
Why UI matters
A clear interface reduces guessing and helps people complete a task.
Confusing
Assignment portal
Waiting...4questions before submitting
same task
Clear
Upload assignment
UIui-intro.pdfPDF, 2.4 MB Ready to submit1clear next action
People notice the task. Good UI keeps the interface out of the way.
About 50 seconds. Both samples upload the same file. The left sample responds with “Error 104,” which gives no recovery direction. The right names the file, shows upload progress, and confirms submission. Click either button to replay its result. A useful UI helps users act accurately and confidently without studying the screen.
03
Types of interfaces
The interface changes with the way a person communicates.
One goal: open the class schedule
1 / 5 GraphicalChoose a type to pause
Class schedule
UI presentation, 10:00
Class schedule
“Open my class schedule.”
$ open class-schedule
UI presentation 10:00
☝
Point toward the schedule
Schedule selectedAbout 65 seconds. The enlarged stage uses one goal to compare five interfaces and reports which example is active. A graphical interface uses windows, icons, and menus. Touch uses direct screen gestures. Voice interprets speech. A command line reads typed commands. Gesture responds to movement or position. Select any label to pause on that sample. Modern products often combine several types.
04
UI and UX
UI
The controls and feedback people use at each point of interaction.
UX
The whole experience of reaching a goal, including what happens before and after the screen.
class schedule ⌕
▦Class scheduleToday and upcoming classes
UI presentation10:00, Room 204
Your next class is ready.
↻Class scheduleAdded to recent tools
UIThe controls on the current screen
UXHow all four stages connect
A polished screen cannot rescue a frustrating journey.
About 65 seconds. Use the Campus Portal sample to move through Find, Use, Complete, and Return. Each screen contains UI controls and feedback. UX asks whether those four stages connect into a useful journey. Select a stage to hold it. UI contributes to UX, while the wider experience also depends on content, speed, reliability, and support.
PERSON
SYSTEM
One connected experience
UI shapes each interaction.
UX shapes the complete journey.
Which interface did you use first today?
Thank you.
About 35 seconds. Close with the relationship: UI shapes the individual moments where people interact with a system, while UX describes the complete journey toward a goal. Ask the final question and take one quick answer if time allows. Then thank the audience.