Learning Objectives / Whāinga Ako

• Define what a "User Interface" (UI) is.

• Explain the role of UI in enabling interaction between end-users and digital systems.

• Identify common components and elements of different UIs.

• Understand the qualities of a good UI design.

• Differentiate between User Interface (UI) and User Experience (UX) Design.

Getting Started / Whakataki (Prior Knowledge Required)

To get the most out of learning about User Interface, it's essential to have a clear understanding of:

• End-User: Do you understand that digital outcomes are designed for people to use?

• Input & Output: Do you know how you send information to a device (input) and how it gives information back (output)?

• Software & Applications: Are you familiar with the programs that run on digital devices?

• Design Process (Iterative Development): Do you understand that digital outcomes are built through a cycle of planning, creating, and refining?

Quick Check: Think about your favorite app or game. What do you see on the screen? What do you tap or click on? All of those visual and interactive elements are part of its User Interface!

What is a User Interface (UI)? 

The User Interface (UI) (atanga kaiwhakamahi) is the space where end-users interact with a digital device or software & application. It's everything you see, hear, or touch that allows you to communicate with the technology. This includes screens, buttons, menus, icons, text, sounds, and even physical controls.

The UI is the visual and interactive part of a digital outcome that directly translates the complex internal workings of a computer program into something an end-user can understand and control.

Think of it like this:

• If a digital device is a car, and its software & applications are the engine, then the User Interface is the dashboard, steering wheel, pedals, and seats. It's how you control and experience the car.

Good UI Design: A good UI is:

• Easy to understand and use without needing complex instructions.

• Similar elements behave the same way throughout the application.

• Allows users to complete tasks quickly and easily.

• Pleasant to look at and interact with.

• Designed so that people with different abilities (e.g., visual impairments) can still use it.

UI vs. UX Design: While closely related, User Interface (UI) and User Experience (UX) Design (which we'll explore next!) are different:

• UI (User Interface): Focuses on the look and feel – the visual design of buttons, typography, colors, layout, and interactive elements. It's about how the product presents itself.

• UX (User Experience): Focuses on the overall feeling and journey a user has when interacting with a product. It's about how the user feels about using the product – is it easy, useful, enjoyable, efficient? UI is a part of UX.

How It Works / Me Pēhea te Mahi

The User Interface brings together various components to enable the Input & Output cycle for the end-user.

Common UI Components:

• Buttons: Interactive elements to trigger actions (e.g., "Submit," "Play," "Next").

• Icons: Small graphical symbols that represent actions or features (e.g., a magnifying glass for search, a house for home).

• Menus: Lists of options or commands (e.g., "File," "Edit," "Help").

• Text Fields: Areas where users can type information (Input).

• Sliders/Toggles: Controls for adjusting values or switching settings.

• Images & Graphics: Visual elements that convey information or enhance aesthetics (Computer Graphics).

• Text/Typography: The style and arrangement of written content.

• Notifications/Alerts: Messages displayed to the user as Output.

Interaction Flow:

1. The Operating System and Software & Applications display the UI (e.g., an app's screen).

2. The end-user interacts with UI components (e.g., taps an icon, types into a text field). This is detected by Input devices and interpreted by the computer program.

3. The computer program runs algorithms based on the input.

4. The program tells the hardware to update the UI (e.g., a new screen appears, a success message pops up, a button changes color). This visual output is powered by Computer Graphics.

A well-designed UI is intuitive, making it easy for the end-user to understand what to do, even for complex tasks. This reduces the need for constant instructions and makes using digital devices a smooth experience.

Assessment / Te Aromatawai

Check your understanding of User Interface.

1. Multiple Choice: Which of the following is an example of a User Interface (UI) component?

   • a) The computer's processor (CPU).

   • b) The physical hard drive.

   • c) A button on a screen to submit a form.

   • d) The electrical cables connecting devices.

2. Short Answer: Explain the primary purpose of a User Interface.

3. Scenario: A digital drawing application has a toolbar with many different tools (like brushes, erasers, and colors) represented by icons.

   • How does this User Interface use Input and Output to allow the end-user to draw?

   • If a new user finds the icons confusing and can't figure out what they do, which quality of good UI design is lacking?

Key Takeaways / Mātauranga

• The User Interface (UI) (atanga kaiwhakamahi) is the visual and interactive point of contact between end-users and digital technology.

• It enables Input & Output and is powered by Software & Applications and Computer Programs.

• Good UI design is intuitive, consistent, efficient, visually appealing, and accessible.

• UI focuses on the look and feel, while User Experience (UX) Design focuses on the overall journey and feeling.

What's Next?

Now that you understand the visual and interactive elements of digital products, you're ready to explore the broader concept of how the entire user journey is shaped:

• User Experience (UX) Design: Dive deeper into the overall experience of the end-user, which goes beyond just the visual interface.

• Computer Graphics: Learn how the visuals you see in a UI are actually created and displayed by digital devices.

• End-User: Revisit the core idea of understanding who you are designing for, as this drives all UI/UX decisions.

• Design Process (Iterative Development): See how UI design fits into the continuous cycle of building and refining digital outcomes, with constant feedback.

• Artificial Intelligence (AI): Explore how AI might influence future UI designs to make interactions even smarter and more personalized.

• Computer Vision: Understand how UIs might be influenced by systems that can "see" and respond to user actions.

Continue your journey by clicking on the links to these exciting topics!