Selçuk Aker · UI & UX Design

What Screen States Should Be Designed in Interfaces with API Integration?

Consider API connectivity from a design perspective: plan for wait, null, access, and retry states.

By Selçuk Aker · Published · 3 min read · Updated

What Screen States Should Be Designed in Interfaces with API Integration? — Selçuk Aker

API is the interface that allows software to access functions or data with specified rules. If a product screen receives stock information from another system, the design cannot consist of only the card that appears when there is stock. Response may be delayed, no product available, or access may not be authorized.

What does the user see before the data arrives?

The loading view should explain where the information will be on the screen, it should not be perceived as a completed result. Skeleton cards may be suitable for a list; It may be more meaningful for the button to change state when sending a transaction. Instead of placing the same animation in every area, choose behavior that describes the work being done.

For example, if the previous products are kept while waiting for the result in the filtered product list, it should be understood that these are old results. Otherwise, the person may mistake the false filter result for the real one. This decision should be determined together with the developer.

Separate empty result from connection error

The “Product not found” message tells you that the request was completed successfully but there was no match. In case of connection error, the system may not know the result. Using the same message in two cases gives incorrect information to the user.

Offer appropriate next step, such as clearing filters on empty list, retry on temporary error. It should be evaluated by the technical team whether continuous automatic repetition or repeated button pressing will reproduce the same action.

Move actual data boundaries to design file

Too long name, missing photo, different currency or hundreds of records affect the design. Ask the developer for sample data structure and field limits. Work with anonymous samples rather than randomly moving actual records containing personal data into the design file.

You can examine the API concept in the MDN guide. With freelance UI/UX designer Selçuk Aker, you can plan not only the ideal flow but also these limit states in prototyping work.

What should be said to the user when connecting CRM, ERP and chatbot?

If the stock comes from ERP and the customer record comes from CRM, define up-to-dateness and transaction status with the relevant teams. No data coming in is not the same as actually having zero stock. If a chatbot is used, there should be a transition to human support or open communication in case it cannot respond. Presenting the bot as a human or presenting unverified answers as accurate information may undermine trust.

Producing a content outline or report summary with artificial intelligence does not remove the responsibility of checking the results. It must be determined which data goes to the external service and which response requires approval. Technical architecture and design delivery and CRM handover of form connect these decisions to concrete screen situations.

Frequently asked questions

Are API design and user interface design the same?

No. One addresses the contract between software, the other addresses the experience the user sees and uses; they affect each other.

Should the technical error code be displayed on every error?

The next step that can be taken should be explained to the user clearly. How much technical detail is shown is determined by security and support needs.

Does loading animation speed up the API?

No. It describes the waiting state; actual performance is also handled on the development side.

Related articles

Have a design project in mind?

Let’s agree on your requirements, deliverables and timeline. Work directly with Selçuk Aker.

Request a design proposal ↗