Introduction

Welcome to the documentation of the onyx design system! We are very delighted, that you decided to work with onyx!

First things first. User experience is key to us, so we developed 10 commandments to follow. If you stick to those, very happy end users will be the result. So please, feel free to explore whole documentation of onyx!

10 Guidelines for excellent user experience

Expand the boxes to discover more details.

01 Clarity and simplicity

Strive for simplicity in design to facilitate a user experience that is both intuitive and efficient. Prioritize clarity by employing straightforward language, eliminating unnecessary elements, and ensuring that each visual component serves a distinct purpose. Maintain a clean and uncluttered layout to enhance comprehension, allowing users to navigate with ease and focus on essential information.

02 Consistency

Consistency is paramount for creating a visually cohesive and harmonious interface. By adhering to consistent design elements, users experience a sense of familiarity, reducing cognitive friction and reinforcing the brand's visual identity.

03 Recognizable calls to action

Craft compelling calls to action that stand out prominently within the interface. Clearly communicate the desired user action using concise and action-oriented language. Draw attention to CTAs and place them strategically in areas where users naturally focus their attention to guide them through the intended user journey.

04 User feedback

Enhance user engagement by providing immediate and informative feedback for their actions. Implement visual cues, such as hover effects or subtle animations, to signify interactive elements. Offer clear feedback messages, confirming successful actions or providing guidance in the event of errors. Feedback should be timely, reinforcing user confidence and fostering a responsive and dynamic user interface.

05 Efficient navigation

Design an intuitive navigation structure that guides users seamlessly through the interface. Group related items logically and label navigation elements clearly. Prioritize ease of use by organizing content hierarchically and providing straightforward pathways for users to find information. Implement intuitive navigation patterns to reduce cognitive load and enhance overall usability.

06 Accessibility

Prioritize accessibility to ensure an inclusive experience for users with diverse abilities. Opt for color contrasts that meet accessibility standards, choose readable fonts and provide alternative text for images. Consider the use of WCAG attributes and ensure compatibility with screen readers and other assistive technologies. An accessible interface promotes equal access to information and functionality for all users.

07 Form follows function

While the layout undoubtedly plays a pivotal role, a nuanced approach emphasizes that the layout must seamlessly harmonize with the content it encapsulates. Recognizing the diverse nature of data and content is paramount, as each necessitates a unique treatment of layout and UI elements. Emphasizing content and its call to actions as the focal point is key. By prioritizing content, designers shape layouts that not only look visually appealing but also meet functional needs effectively.

08 Minimize cognitive load

Reduce cognitive load by presenting information in a structured and easily digestible manner. Break down complex tasks into manageable steps, allowing users to focus on one task at a time. Prioritize content hierarchy, placing essential information prominently. Avoid unnecessary details that may overwhelm users, fostering a design that encourages seamless comprehension and decision-making.

09 Flexibility and responsiveness

Design with flexibility to accommodate various devices and screen sizes. Utilize responsive design principles to ensure that the UI adapts gracefully to different platforms. Implement fluid layouts, scalable images, and adaptive design techniques. Consider the interface across multiple devices to guarantee a consistent and enjoyable user experience, regardless of the user's chosen device.

10 Progressive disclosures

Embrace progressive disclosure to guide users through the interface progressively. Present information gradually, revealing details as users move through the user journey. Prioritize essential information initially, avoiding information overload. Use intuitive design elements, such as accordions or tooltips, to provide additional information when requested. By progressively disclosing information, the interface maintains user engagement while preventing overwhelming users with unnecessary details.