A user must always see important information. Hidden elements can stop a user from understanding progress. Design choices must account for all on-screen elements.
By Pawan Nayar · from the LLOS AI Learning record
A user must always see important information.
Hidden elements can stop a user from understanding progress. Design choices must account for all on-screen elements.
A problem in the design made a milestone invisible. The content area had a setting that hid anything outside its box. There was no extra space at the bottom of the content area. A cost bar was fixed at the bottom of the screen. This bar covered the milestone information. The design did not save space for the cost bar.
A developer creates a new screen for an AI model. The screen shows a user's progress toward a goal. A fixed bar at the bottom of the screen shows the cost. The developer does not add space above the cost bar. The progress milestone is hidden behind the cost bar. The user cannot see how much progress they have made.
Resolved from this lesson's own record — real definitions, not invented for this page.
More from the same record, pulled by shared topic — not written new for this page.
A developer must add extra space to the bottom of the main content area. This space is called padding.
Using `overflow:hidden` and `max-height` on a section wrapper can hide content. For example, buttons at the bottom of a section might disappear.
A close button should have a strong visual style. This style should be visible all the time.
A developer can hide the hamburger menu icon on large screens. The developer can hide the regular navigation menu on small screens.
A user must always see important information. Hidden elements can stop a user from understanding progress. Design choices must account for all on-screen elements.