Kim Tapia St. Amant

Interactive Space & Design, LLC

Project 4 of 6

Interactive reference for Docs

image
The links in the reference descriptions would snap the code examples into alignment with the reference. The bold text in the code sample linked to the appropriate reference description on the left.
Product:
Microsoft Docs
Job title:
Senior UX PM
Roles:
UX design, visual design, illustration

There are many formats for reference in the wild and some of them are good, but all left me struggling to keep things in a logical order especially when the nesting gets deep. I also really dislike the big content gaps that get created keeping the reference descriptions and code samples horizontally aligned. Working with an awesome PM (thank you Brady) this is what we came up with. Breadcrumbs are used to show nesting and keep orientation as to how deep you are. We have linking between the left and right panes so you could always keep the reference description aligned with the code sample.

image
Reference example with breadcrumbs.
image
Code example.