home & tiles

The home page is the first page people see when they sign in to a portal. It has one job: to take people to the right app quickly, and to show them where something needs their attention.

It does that with tiles, one for each app, sorted into a few groups that always appear in the same order.

The home page, the tile and the tile group are real components. Their React pages show them live, in every variant: the home page, the tile and the tile group.

one page, in a fixed order

People find things by where they were last time. So the home page is a single page, and its groups and tiles keep their places from one visit to the next, in the same order every time. After a few visits, people reach for a tile without reading.

One page works well for up to about 30 tiles. Beyond that, or when different audiences need a different start, such as the people who run the platform and the people who only use it, separate home pages for each audience become worth it. That is the way to grow; until then, one page is simpler for everyone.

search finds the tile

When people know what they want, typing is quicker than looking. That is why the search in the top bar is also the tile finder. On the home page, the tiles narrow in place as people type there: tiles that don't match step aside, and so does every group left with nothing in it. When nothing matches at all, the page says so, and how to get back.

There is no second search box on the page. With only one search, always in the same place, people never wonder which one to use, and the search they know from the home page is the one they find on every other screen. Like the rest of the top bar, it is planned; the top bar page describes it.

The component that draws the home page has a search box of its own. Inside the shell, leave it off, because the search in the top bar narrows the tiles. The component's own box is for a launcher that stands on its own, outside a shell. A launcher that only holds a few number tiles, as a board of key figures, can do without a search at all.

A catalogue that lists every app to browse through becomes useful only once people can arrange pages of their own, to pick the apps they want on them. Until then, the home page is the catalogue.

favourites

Most people use the same two or three apps every day. Where people can pin those, they go in a “my apps” group at the top of the home page, so that they always come first.

when something gets a tile

A tile should lead somewhere worth going on its own. If everything gets a tile, the home page turns into a second menu that competes with the apps' own navigation, and it grows every time someone adds a screen. So before adding a tile, ask what it opens.

• An app with its own job gets one tile, in the group of the people who use it. The tile opens the app where the app opens: on what needs attention.
• A number someone must act on may get a number tile, one per app at most. A number tile that says “needs attention 3” opens the app, showing just those three. The number turns amber or red only when it means attention; otherwise it stays neutral.
• A frequent task with its own way in may get a task tile, but rarely. Requesting a title is one: people do it often, and it has its own entry point.
• An app's views, its setup screens and links to other places get no tile. Views belong in the app's own navigation, setup belongs in settings, and a link to somewhere else belongs inside an app.

groups

Groups help people scan: they look for their group first, then for the tile in it. That only works when there are few groups, always in the same place, named after the people who use them.

• Group by who uses the tiles, and why. For example, one group for everyone's daily work, one for the people who look after the content, and one for the people who may change the platform. Not by addon or by vendor: people don't know, and shouldn't need to know, where an app came from.
• About four groups at most, always in the same order. A group of pinned favourites, where there is one, goes on top.
• An addon joins an existing group. It doesn't bring a group of its own.
• A group with nothing a person may open is hidden. People only see the groups and tiles they can use.
• The same group names in every installation, so people who use more than one feel at home, and guides and screenshots stay true.

what an addon brings

An addon is an app that is installed into the platform on its own. It brings one app tile and, if it helps, one number tile, and both join a group that already exists, usually the one for the people who will use the app.

the tile

A tile is a square that opens an app. Pressing anywhere on it opens the app, so it is one large, easy target. There are two kinds: an app tile, with the app's icon, its name and a few words about it, and a number tile, with a number and how it has changed.

1. Icon. The app's line icon, in blue. It is decoration: the name says what the tile is.
2. Name. The app's name, one or two words, without a verb. Long names are cut to one line, so keep it short.
3. Description. One line on what the app is for, in sentence case. It stops after two lines.
4. Badge (optional). A small label at the top right: how many things wait, like 3, or one word for a state, like “new”, “failed” or “needs setup”.
5. Status dot (optional). A small square that shows how the app is doing: green, amber or red. Use it only when it changes what people do, and put the state into words in the description too, because on screen the dot is colour only.
6. The number (number tiles). The figure, sometimes with its unit, and how it changed since last time, with its sign: +2, −11.

Tiles come in three sizes, small, medium and large; medium is the usual one.

A tile can also open another site in a new tab; today nothing on the tile shows that, so say it in the description. And a tile that only shows a figure, with nowhere to go, doesn't react to pointing and can't be reached with the Tab key.

tile groups

A tile group gathers tiles under a name that stays put. It is what the home page is made of, and it also works on its own: a short set of places to go at the end of a page, or a row of number tiles as key figures. A single tile doesn't need a group around it.

1. Title. The group's name, led by a small blue chevron, such as apps, manage or settings. It is a heading, so people can jump to it.
2. Action (optional). One quiet button for the group as a whole, at the end of the title row. Leave out the loud, blue kind: it would compete with the tiles.
3. Description (optional). One short line under the title, only when the name needs it.
4. Tiles. In a grid with as many columns as there is room for, so the grid reflows when the screen gets narrower.

When the search hides every tile in a group, the whole group steps aside with them.

using it with a keyboard

Pressing Tab through every tile on a busy home page would take a long time. So all the tiles together are one stop for the Tab key, and the arrow keys move between them, across groups.

Tiles that can't be opened, and the tiles of a group that steps aside, are skipped. An arrow key pressed on something else among the tiles, such as a group's action, jumps to the first tile. A tile group on its own works the same way. A home page can also give each group a Tab stop of its own, and when people get stuck with the arrow keys, every tile can be its own Tab stop instead.

accessibility

What makes the home page work for everyone, including people who use a screen reader:

• The home page's title is the page's main heading, and each group's title is a heading under it, so people can jump from group to group. The search in the top bar is a region of its own that they can jump to as well.
• While people search, a screen reader says how many apps match. When nothing matches, the message is visible text.
• A tile is read as one thing: its name, its badge, its status, then its description or its number. Keep each part short, because people hear all of it.
• The icon, the chevron and the small triangle beside a change are decoration. The status dot is read out, but on screen it is colour only, so the description says the state in words.
• Write the sign into a change, like +2 or −11, so it is read out, not only drawn.
• The current app's tile is marked as the current page for screen readers too, not only by its blue bar.

Today:

• In the component's own search box, the arrow keys don't work. Tab from the box reaches the first visible tile, and the arrows work from there.
• Esc in that box only reaches the first tile when that tile's group was visible during the search; otherwise the focus stays in the box.
• The count a screen reader hears, and the default message when nothing matches, are in English only, and with one match it says “1 app match”.
• Nothing tells screen-reader users about the arrow keys, and a screen reader's reading mode still reads every tile.
• The component's search box has a fainter frame than other text fields, and its focus is a blue frame rather than the usual focus outline.
• The home page listens for the arrow keys anywhere among its tiles, and with its own search box for / as well, so a text field placed in a group's title row can't receive a /. Keep text fields out of that area.
• The title is always the page's main heading, and a group's title always the level below it, whatever headings are around them.
• A tile that can't be opened is read as plain text, not as a link that is unavailable. If the reason matters, put it in the description.
• A badge with a count is read as a bare number. Say what it counts in the description.

the words

• The home page's title. The name of the place, in one word: “home”. No greeting and no tagline; people skip them on every visit, and they push the tiles down.
• The search. Its placeholder says what it finds, “search apps…”, in the same words as its name, in the top bar and in a launcher's own search box alike.
• Group titles. Who the tiles are for, in one or two words, the same on every visit, such as “apps”, “manage” and “settings”. Avoid “misc”, “other”, or one group for everything.
• Tile names. The app's name, as a noun rather than a verb: “downloads”, not “open downloads”.
• Descriptions. What the app is for, in a few words, in sentence case: “What is on its way”.
• Badges. A count, like 3, or one word: “new”, “failed”, “needs setup”. Not “!”, which says that something is wrong but not what.
• Numbers. The figure and its unit, rounded to what people can act on, and a change with its sign.
• When nothing matches. What didn't match, and what to do, for example: No apps match “backup”. Try another word, or press Esc in the search box to clear it.

specs

The exact values, for designers and developers.

related

• Top bar: its search finds the tiles, and the product's name in it leads back to the home page.
• App navigation: the views of one app, which don't get tiles of their own.
• Settings and setup: the “needs setup” badge on a tile.
• Worklist: where a number tile usually leads.
• Empty states: how to write the message when nothing matches.
• Iconography: which icons a tile takes.