# Best general design

## Be Consistent

Consistency is key. If your website behaves in a way consistent with itself (and with things they've seen before) it can help offload the difficult task of understanding how to interact with a tool. If every new page is completely different from the last, the user has to actively think about how to use every page, slowing them down. This consistency can also make your site appear easier to learn, as it will draw on interactions the user already knows.

Consistency isn't just about behavior, but it's also about language, labels, colors, button designs. It's really everything. If you use a word to refer to a particular type of data or a feature in one place, use that same word elsewhere.

{% embed url="<https://uxdesign.cc/design-principle-consistency-6b0cf7e7339f>" %}

## Create a Consistent Mental Model

What is a "mental model"? A mental model is a user's internal model of how they think your tool works and what they expect to do with your tool. This model is likely quite different from how your tool works behind-the-scenes. While designing your tool, it is important to keep your user's mental model in mind and keep to it as closely as possible, or otherwise make it clear what the model is for your application.

When making the model for your application visible to the user, it is good to ground it in familiar tasks. These can be from either elsewhere on the web (screen loading bar) or from real life (odometer-like gauge to show how fast something is running).

{% embed url="<https://www.nngroup.com/articles/mental-models/>" %}

## More Resources

{% embed url="<https://www.smashingmagazine.com/2008/01/10-principles-of-effective-web-design/>" %}

{% embed url="<https://www.toptal.com/designers/ui/principles-of-design>" %}

{% embed url="<https://xd.adobe.com/ideas/principles/web-design/web-page-design/>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ucsc-xena.gitbook.io/ux-resource-for-ucsc-genomics-institute/best-practices/best-general-design.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.