Skip to content

Instantly share code, notes, and snippets.

@seancolsen
Created July 20, 2022 16:55
Show Gist options
  • Save seancolsen/761d2483bdaa72b9ff8bac721a981c0f to your computer and use it in GitHub Desktop.
Save seancolsen/761d2483bdaa72b9ff8bac721a981c0f to your computer and use it in GitHub Desktop.
Navigation Updates

Context

Users need to be able to quickly browse the data model so that they can complete tasks that involve performing actions in various tables or navigating to related tables. Besides indicating the location, these navigation elements should also be used to show the hierarchical structure and the relationships between the various data model parts.

Hierarchical Structure

The navigation design will be based on the following hierarchical structure:

image

Removing Tabs

Tabs will be phased out as part of the new navigation improvements. The new navigation considers the problems that tabs addressed and incorporates them into the design.

Navigational Elements

URL

The URL should be used to display the navigation structure to users. It should be as simple as possible and built so that a user's path to the desired page may be easily determined.

Top Navigation Bar

Every page has a top-level global navigation bar. Users may add new items or jump to existing ones from the top navigation bar.

Jump List and Search

image

image

  • (A) Input Control
  • (B) Recent Items
  • (C) View All Link
  • (D) Result Filters
  • (E) Matching Items

Breadcrumb

The breadcrumbs are shown on all pages and indicate the current location in the context of the navigation path. For example, the user would see the current record, preceded by the table, schema, and database to which that record belongs while they're on a specific record page.

image

The breadcrumbs are shown on all pages and indicate the current location in the context of the navigation path. For example, the user would see the current record, preceded by the table, schema, and database to which that record belongs while they're on a specific record page.

Table Links

Users may use tables to go to a specific record page. Each row's primary key cell has a link to the record that the user may access by clicking on it.

Record Page

The record navigation is available when a user is on a record page. Aside from identifying the current record, it also gives controls for moving through the records sequentially or jumping to a specific record.

Fields with foreign keys have table references in records, and the user may access those tables by clicking on those links.

Data Explorer

Because it's necessary for both schema- and record-level queries, Users may access Data Explorer from multiple locations. Users should be able to return to the preceding steps to continue the task.

For example, the user might enter edit mode on a schema-level query and then return to that query after the required changes have been made.

Queries

Inspector

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment