Background

When designing the Console Onboarding, as it involved the sidebar design, we decided to take this opportunity to improve the issue of navigation generating a scroll bar on computers with smaller screens.

Guideline Research

• The sidebar has no rounded corners in its active state
• There is no space between tabs
• When a sub-tab is in an Active state, the parent tab is not treated with the same state design

Atlassian Design

Use a sidebar to allow users to navigate within projects, spaces and repositories. It lives on the left side of the screen and can be expanded, collapsed and resized. Sidebar header Menu items Secondary menu items Settings/admin: Docked in a sidebar footer Expand/collapse icon The sidebar header includes the container avatar and name.

www.atlassian.design

UI shell left panel

This left panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform. It provides a common set of interaction patterns that persist between and across products.

www.carbondesignsystem.com

Layout - Ant Design

Handling the overall layout of a page. The first level navigation is left aligned near a logo, and the secondary menu is right aligned.

ant.design

Design Decisions

• Reduce project cover photo size
• Improve based on existing guidelines
• Unify the upgrade bot button placement at the top
• Open sub-tabs on hover when collapsed

Design Iterations

First Version

• Issue: Internal feedback encountered immediately after the launch
• No bot-switching functionality
• Layout not left-aligned
• Challenge: Bot switching was initially intended to be implemented on the pink sidebar, but it is pending due to the inability to find a suitable visual presentation method

Second Version

After conducting a second round of research, it was discovered that SaaS software with the concept of "switching workspaces" often uses vertical <> (double arrows) to represent the ability to switch,

中文版：重新設計 Sidebar

在進行 Console Onboarding 設計時，由於牽涉到了 sidebar 的設計，因此決議趁此機會改善在螢幕較小的電腦上，會讓 navigation 產生 scroll bar 的問題

Guideline 調查

• sidebar 在 active 狀態下沒有圓角
• 頁籤之間不會有空間
• 子頁籤處於 Active 狀態時，母頁籤不會以相同的狀態設計處理

設計決策

• 縮小專案封面照片
• 根據現有 guideline 進行改善
• 將升級機器人按鈕統一置於上方
• 收合時子頁籤以 hover 方式開啟

設計迭代

第一版

• 問題：一上線就遭遇內部回饋
• 無切換機器人功能
• 排版未置左對齊
• 挑戰：切換機器人原本因要做在粉紅邊條上，但找不到適合的視覺呈現方式而 pendning

第二版

在進行第二次研究後，擁有發現「切換 workspace」概念的 SaaS 軟體，常使用垂直的 <> (雙箭頭) 來代表可以切換之意，故採用此方案