GitBook Navbar and Tab Preview

✋ What is it?

This is a solution found in Gitbook onboarding flow. When setting up an organization in GitBook, the wizard will show in you in real time (as you type) how your organization page navbar and title in a browser tab, will look after the setup. The wizard will also infer the logo of your organization based on available metadata.

🤲 How does this interaction or solution work?

GitBook is an online platform that allows companies to create and collaborate on internal and external documentation (generally developer documentation).

As part of the process of creating a GitBook account, users need to create an organization to host all their documentation spaces. The organization name will show up in the documentation page navbars and titles and will be seen by all the consumers od the documentation.

Since this is not necessarily obvious, GitBook shows a real-time preview on how their organization name will look in the documentation page and tab title. They also have a smart inference system that attempts to extract a logo from available website metadata. They also determine a key-color based on the inferred image.

If the inferred logo is not accurate, the wizard also gives users the ability to swap the logo with an uploaded one.

🙌 How does this interaction or solution work?

Learnability, Automation, Correctness

Onboarding is always a crucial step to give users context of essential concepts about an application or service. In this case, GitBook teaches its customers the heuristic of an 'organization' and how that organization name will appear in the documentation pages.

GitBook also attempts to automate some stylistic choices by inferring or suggesting a logo and a key color.

In general, this solution increases the visibility of the system and gives a glimpse of how their documentation page might look like before even creating it. This solution also ensures correctness and encourages users to pick meaningful names instead of false or placeholder names.