Windows/macOS New Feature — “Groups in Taskbar/Dock”
I have been using both Windows and macOS for a long time, and recently, while using my smartphone, I noticed something interesting. On a smartphone, you can create folders on the homepage by grouping apps together, making the screen look cleaner and more organized. This got me thinking — why don’t we have a similar feature for the Windows taskbar and macOS dock? (Following the Jacobs Law). So, here’s my analysis of this potential “Groups in Taskbar/Dock” feature.
As noted in the index article, since we’re taking a design-first approach to these “New Features,” let’s start by looking at the User Stories and Use Cases for this idea.
User Stories & Use Cases
Use Cases
- UC01: A user should be able to group two or more applications in the taskbar(Windows) / dock (macOS).
- UC02: A user should be able to view the applications in the group in the taskbar(Windows) / dock (macOS).
- UC03: A user should be able to view the details of an application in the group in the taskbar(Windows) or dock (macOS).
- UC04: A user should be able to remove an application from the group in the taskbar(Windows) or dock (macOS).
- UC05: A user should be able to remove a group in the taskbar(Windows) / dock (macOS).
In this case study, I will focus on the macOS dock, as this feature behaves similarly in both cases, with some operating system-specific changes.
Personas
Erik
- Age: 27
- Device: Apple M2 MacBook
- Personality:
- Erik is a clean and organized individual
- Goals:
- Erik wants to group their applications in the dock according to use cases, such as placing all browsers in one group.
- Frustrations:
- At the moment, Erik is unable to categorize those types of applications into the same group.
User Stories
Story 01: As a user, Erik wants to group web browsers in the dock together.
Definition: Erik wants to group web browsers in the dock together for better organization. They also want to view the browsers in the dock.
Use Cases Covered: UC01, UC02, UC03
Prerequisites
- Erik should have the browsers in the dock.
Narrative
- Erik then moves to another browser and creates a folder (group).
- Erik moves the rest of the browsers to the same group.
- Erik clicks on the group and views the browsers.
- Erik right-clicks on a row in the browser to view additional details.
Story 02: As a user, Erik wants to remove a browser from a group.
Definition: Erik wants to remove a browser from a group in the dock.
Use Cases Covered: UC04
Prerequisites
- Erik should have the browsers in a group.
Narrative
- Erik can drag the browser out of the group and place it in the dock.
- or Erik can right-click the browser properties, and at the bottom, he can find an option to remove it from the group, which will then be added to the dock.
Story 03: As a user, Erik wants to remove a group.
Definition: Erik wants to remove a group in the dock.
Use Cases Covered: UC05
Prerequisites
- Erik should have a group in the dock.
Narrative
- Erik can remove a group by removing all the applications contained within that group.
- Erik can remove a group using the option at the bottom while viewing the applications in the group.
Now we have an idea about the possible user story of the feature, and let’s create a simple user flow to address the pain points identified in the user story.
User Flow
In this diagram, I have included nearly every action a user can take within the group. I designed some actions to replicate the behaviour of a smartphone group, allowing users to transition their experience from a smartphone to a PC easily.
Now that we’ve completed the user stories and user flows, I think we have enough information to move on to wireframing. To be honest, we could conduct further research to improve the final output, but since I want to keep this article brief, let’s now focus on the wireframes of the solution based on the above user stories.
Wireframes
The wireframes for this feature are designed to mimic the dock in macOS. I have documented every action in the user flow. In the second step, you can see that the user has the ability to drag an application (specifically a browser for this user story) on top of another application to create a group. When the user right-clicks on the group, they can view the applications contained within it and other options. The available options may differ from one OS to another, as each has slightly different features, but the overall concept remains the same.
As I mentioned in my previous articles, when designing a feature or application, it is essential to prioritize the user. With this feature, I aimed to replicate the same experience users face when organizing their smartphone homepages and applying it to their PC taskbar or dock. By doing this, we are introducing a feature that will help users keep their PCs organized without requiring a steep learning curve.
Signing off from this episode — see you in the next one!
