{"slug":"orientation","meta":{"title":"Orientation","slug":"orientation","kind":"principle","summary":"Every screen silently answers three questions — where am I, how did I get here, where can I go next. Answer them and people feel confident; fail and they feel lost even when nothing is broken.","problem":"A person cannot act until they know where they are. Disorientation does not look like an error; it looks like hesitation, re-checking, and asking a colleague whether the save worked.","principles":["orientation"],"status":"stable","visibility":"public","related":[{"title":"UX Principles Guide for Building Web Software","url":"/wiki/ux-principles-for-web-software","summary":"The customer-facing version of this principle, with side-by-side demos."},{"title":"Master–Detail Drawer","url":"/patterns/master-detail-drawer","summary":"A pattern whose entire value is that it answers \"where am I in this queue\" continuously."}]},"body":"## The three questions\n\n\u003e **Where am I? How did I get here? Where can I go next?**\n\nEvery screen answers these whether you designed the answers or not. When the\nanswers are absent, people do not report a bug — the screen works. They just\nmove more slowly, re-check things, and lose trust in what they clicked.\n\n## How to tell it is broken\n\nOrientation failures are recognisable by behaviour, not by error rate:\n\n- **Saving teleports.** A save throws the user to a list or a detail page, and\n  the context they built is gone. The tell is someone asking *\"did that\n  save?\"* — the answer left with the screen.\n- **Dead ends.** No breadcrumb, no back, no obvious next action. The browser\n  Back button becomes the primary navigation, which means the app has stopped\n  navigating for the user.\n- **Unnecessary redirects.** Each one is a place a person has to re-locate\n  themselves.\n- **Labels that describe the widget, not the outcome.** \"Submit\" and \"New\" tell\n  you what the control is. \"Save Invoice\" and \"Add Customer\" tell you where you\n  will be afterwards.\n\n## What answers them\n\n- **Persistent navigation and breadcrumbs** answer *where am I* structurally,\n  so no screen has to answer it in prose.\n- **Staying put on save**, and showing the change in place, answers *did that\n  work* without a round trip.\n- **A visible selected state** — the current nav item, the selected row — is the\n  cheapest orientation there is, and the most often skipped.\n- **Empty states that say what to do next** answer *where can I go* at exactly\n  the moment a person has no other cue.\n- **A record's identity in the page title**, so a tab, a bookmark and a shared\n  link all still mean something an hour later.\n\n## Where it shows up in this catalog\n\nOrientation is the principle behind most of the **Orient** family, and it is the\nhidden argument for several patterns filed elsewhere. The\n[master–detail drawer](/patterns/master-detail-drawer) is worth its complexity\nalmost entirely because the list never moves, so *where am I in this queue* stays\nanswered across every inspection. The decision in\n[drawer vs modal vs page](/patterns/drawer-vs-modal-vs-page) is really a decision\nabout which context you are willing to take away.\n\n## The relationship to the other principles\n\nOrientation is the one that fails **silently**. A friction problem shows up as\ncomplaints about too many clicks; a disclosure problem shows up as \"this page is\noverwhelming\". Disorientation shows up as people being slightly slower and\nslightly less sure, forever, and nobody files that.\n"}