Back to overview

Top navigation bar

User Experience

Use-case 2:

The first thing I started doing when I joined Codecov was walking through the entire product and catch the most obvious UX flaws.

Problem: For instance Codecov's top navigation bar which behaved like breadcrumbs but visually looked like it was just a normal functioning navigation bar (meaning that when you clicked on a menu item it would take you to a different page and the menu would always stay/look the same). Since this is unexpected behavior to a user they might get confused, since they expect it working like a normal functioning navigation bar because so many other websites do it this way (Jakob's Law). I came up with a navigation bar design with interactions to solve this problem:

View Extensive Functional Spec

Solution: By adding chevrons to the top bar it's now indicating it are breadcrumbs, and by adding subtle animations the user can now visually see what is changing. By adding a hover over the breadcrumbs the user can easily select a different organisation, repository, etc and change the breadcrumb path for a better understanding how everything ties together. This is one of the UX items I worked on as an example.



Accessibility color blindness

Use-case 1:

Start Reading
Back to Codecov Article