Interface Designs

In Software Engineering, Interface Design is the process of defining how the software communicates with itself, other systems, and the people who use it. It is the "connective tissue" of the system.

We generally categorize interface design into three distinct areas:

🖥️ The Three Types of Interfaces

1. User Interface (UI) Design

This focuses on the interaction between humans and the machine. The goal is to make the user's experience easy and intuitive.

• Key Concept: UX (User Experience) is how it feels, while UI is how it looks.

• Tools: Wireframes, mockups, and prototypes.

2. External Interface Design (API)

This defines how the software communicates with other programs or hardware.

• Example: Your app connecting to the PayPal API to process a payment, or a weather app pulling data from a satellite server.

• Format: Usually defined via REST, GraphQL, or JSON.

3. Internal Interface Design

This defines how the various modules or components within the software communicate with each other.

• Goal: To ensure that if the "Payment Module" sends data to the "Invoice Module," the data is in a format both can understand.

🎨 Principles of User Interface (UI) Design

To create a high-quality interface for humans, engineers follow the Golden Rules of Interface Design (originally proposed by Theo Mandel):

1. Place the User in Control:

   • Allow the user to undo/redo actions.

   • Provide "escapes" from long processes.

   • Hide technical complexities that the user doesn't need to see.

2. Reduce the User’s Memory Load:

   • Don't make the user remember information from one screen to the next.

   • Use visual cues (icons like a trash can 🗑️ for delete).

   • Provide meaningful defaults.

3. Make the Interface Consistent:

   • Buttons should look the same across all pages.

   • If "Ctrl+S" saves in one part of the app, it should save everywhere.

🛠️ The Interface Design Process

The design of an interface is an iterative cycle:

1. User, Task, and Environmental Analysis: Who is using the app? What are they trying to achieve? (e.g., An app for a pilot in a cockpit needs higher contrast than a social media app).

2. Interface Design: Creating the layout and navigation flow.

3. Interface Construction: Building the actual interface using code (HTML/CSS, React, Flutter).

4. Interface Validation: Testing if the users find it easy to use (Usability Testing).

📊 Good vs. Bad Interface Design