User Interface Standards and Guidelines

A software system that follows a design convention and has a consistent look and feel gives predictability to its users and thus make it easy to use. Standards and design guidelines are a set of written rules and recommendations that help designers follow a design convention. For a novice designer, they are helpful guide. For an experienced designer, they are good checklist to make sure that what they make has high quality standard.

For a company that ships software systems, standard and guidelines are useful tools to benchmark the quality of the software systems. Standards also encourage designers to make software systems or system components that have high interoperability. Having an explicitly documented standard and design guidelines also make it possible to hire people from outside the company, increasing the potential number of people who can contribute to design and development of software systems.

A well documented standard and guidelines make it easier for designers meet obligations imposed by customers and regulations. A client could impose requirements beyond functional and data requirements that we discussed in 3. Requirements. Having a design standard that is agreed by both client and the designers could make the design process more effective.

Designers can also test whether a software product meet regulatory obligations. For example, a company like IBM has an internal accessibility checklist, which all products they ship have to satisfy.

User interface design guideline examples include Apple’s Human Interface Guidelines, Google’s Material Design, and Web Content Accessibility Guidelines (WCAG).

User Interface Software Tools

Hi-fi Prototyping Tools

Modern user interface prototyping tools like Figma, Adobe XD, and Axure make it easy to quickly create user interface prototypes. Using these tools over jumping directly into programming software products has multiple benefits:

Design System

https://youtu.be/ZgNuA9Ra9a0

While documents like standard and design guidelines are helpful, designers often use a design system that is a little richer than that. A design system is a set of interconnected patterns and shared approaches coherently organized to achieve the purpose of digital products. It often consists of documentation (e.g., standards, design requirements), sample design elements, and sample code to implement user interface components. Design elements and user interface components are the repeating elements that you could combine to create an interface (e.g., button elements and animations). Prototyping tools like Figma offer a feature to create a design system, which you should take advantage of. See:

Using Figma

UI Software Tool Research

Prototyping tools and other development tools are a product of years of research in user interface software tools. People in both industry and academia have spent time creating tools that are easy to learn and enable people to create sophisticated software quickly.

Why are [user interface software] tools so important and successful? In general, tools help reduce the amount of code that programmers need to produce when creating a user interface, and they allow user interfaces to be created more quickly. This, in turn, enables more rapid prototyping and, therefore, more iterations of iterative design that is a crucial component of achieving high-quality user interfaces [Nielsen 1993]. Another important advantage of tools is that they help achieve a consistent look and feel, since all user interfaces created with a certain tool will be similar. (Myers, Hudson, and Pausch, 2000)