In UI design, fully consider the rationality of layout, following users’ habits of browsing and operating from top to bottom and left to right, and avoid scattering frequently used function buttons so widely that the mouse travels too far. Do more subtraction: hide rarely used function blocks to keep the interface simple, letting users focus on the main business flow, which improves the software’s ease of use and usability.
Menus: keep menus concise and categories accurate; avoid menu depth beyond three levels. If a menu function opens a new page, add an indicator after the menu name (applies to C/S architecture only, ignore for B/S).
Buttons: place the confirm button on the left and the cancel or close button on the right.
Functions: unfinished functions must be hidden, not placed in page content, to avoid misunderstanding.
Typography: keep all text away from page edges, ideally with 10 to 20 pixels of spacing and vertically centred; keep at least 10 pixels between control elements and make sure nothing hugs the page edge.
Table data lists: keep character data left-aligned and numeric data right-aligned for easy reading and comparison, and display decimal places uniformly according to field requirements.
Scrollbars: avoid horizontal scrollbars in page layout design.
Page navigation (breadcrumbs): a breadcrumb bar should appear in a prominent position, letting users know where they are and clarifying the navigation structure, for example: Home > News Centre > Article Title, with the underlined parts as clickable links.
Message boxes: message boxes should be centred on the current page, with the background suitably dimmed to reduce interference and keep attention on the message. The usual practice is a semi-transparent mask layer behind the box.
Want to talk through what you just read?
We work end to end, from product design to launch. Tell us about your scenario and we can start there.
Shenzhen XZS Technology Co., Ltd. · Tel 0755-82494862 · 13760424861