Step 1: Define the system
The first step in designing a new interface is to define the system you're working with. This involves understanding the type of system, how data is input and output, and how users will interact with it.
Key considerations
Determine what sort of system you're designing for
Is it a web application (e.g. an online store), mobile app (e.g. a fitness tracker), desktop software (e.g. a photo editor), or embedded system (e.g. a smart appliance interface)?
What are the technical constraints and capabilities of the system? For example, a web app may need to support multiple browsers, while an embedded system may have limited processing power.
Define how users input data into the system
Will users input data through forms, voice commands, gestures, scanning barcodes, or other means? For instance, a mobile banking app may allow check deposits by scanning a photo.
What are the security and validation requirements for user input? Consider needs like password complexity, credit card validation, or sanitizing free text fields.
Determine how the system outputs information to users
How will the system display information to users, such as through tables, charts, maps, images, notifications, or audio? A fitness app might show workout progress with charts and give audio cues during exercise.
What are the performance and scalability considerations for data output? For example, a stock trading interface needs to update prices in real-time without lag.
Define how users will interface with the system
Will users access the system through a desktop web browser, mobile app, wearable device, voice assistant, or other platform? Each has different strengths and limitations.
What device capabilities and limitations may impact the interface? For instance, a smartwatch app needs to account for a very small screen size.
Types of systems
As technology evolves, spatial computing systems are deserving of their own considerations. For more information on this, review Apple’s VisionOS guidelines.
Web applications are accessible from any internet-connected device with a browser. This makes cross-platform support easier. They can be updated instantly without user action. However, they have limited access to device hardware and can be slower than native apps. Example: Google Docs.
Mobile apps run natively on smartphones and tablets. They provide fast performance, offline capabilities, and deep integration with device features like the camera, GPS, push notifications, etc. But they require separate versions for iOS and Android. Example: Instagram.
Desktop software runs natively on laptops/desktops. It can leverage the full processing power of the computer and has deep system access. But users need to download/install updates. Example: Adobe Photoshop.
Embedded systems are customized hardware/software interfaces built into physical devices and appliances. They aim to provide simple, task-specific functions. But they have fixed hardware constraints. Example: Interfaces on smart thermostats and appliance control panels.
Best practices
Carefully consider the strengths and limitations of each system type for your specific use case.
Example
A web app may be a good fit for a project management tool to enable easy access across devices. But a native mobile app would be better for something that needs to work offline or access device sensors frequently, like a running tracker.
Ensure data input methods match the needs and contexts of your users.
Example
Voice dictation works well for taking quick notes while cooking, but filling out a complex form is better suited for keyboard entry. When practical, support multiple input options for accessibility.