← All projects
/ TabMate
A tab-management system
My Role
Description
The goal of TabMate is to enable users to navigate through a multitude of tabs as quickly as possible and to offer them alternatives for structuring, marking, and sorting these tabs so that they can maintain an overview.
3D Modeling and Rendering, UI/UX Design, Prototyping Hardware and Software
/ Problem
Nowadays, there are various ways for users to manage and organize their tabs. But who uses these features? Often, one does not have the time to engage intensively with the features offered by the browser and eventually finds oneself in one or more windows with countless open tabs.
The lack of tab management leads to a multitude of problems that can significantly affect the workflow in the long run.
How can we make working with a very large number of tabs more time-efficient and at the same time more organized ?
/ Concept
The concept of TabMate primarily focuses on developing a functional prototype, with a rotary dial as its main component. This dial not only facilitates basic navigation through turning left or right but also provides haptic and acoustic feedback.
For the dial, we selected a Rotary Encoder from the Arduino Kit, which also includes an integrated button for confirmation functions. We later integrated an additional buttonpin for the quick function of grouping tabs. A significant aspect of the design was the placement of the Rotary Encoder, and we ultimately decided on a position next to the mouse and keyboard.
/ Keyfunctions
/ First Prototyp & Usability Testing
Extension
The extension window enhances clarity in the browser, especially with numerous open tabs, and complements the interface by providing feedback directly within the browser.
The final extension window is dynamic, positioning itself under the currently targeted tab, offering users improved orientation and a clearer preview of their tabs. Additionally, its design has been adapted to match the visual aesthetics of the browser.
/ Why an extension window?
Function Prototyp
/ Haptic Feedback
/ Ratchet mechanism
To enhance the haptic feedback, we used a ratchet mechanism consisting of a gear and a block with parallel grooves, allowing for precise, incremental movements.
From the rotary knob
to the rotary push reset
The final prototype incorporates the mechanics of a rotary push controller, consisting of two elements.
The base plate, which has four buttons mounted on it and a mechanism for the rotary-push function, also provides space for an LED ring. In the second part, the Rotary Encoder is positioned. The separation of these two parts enables the rotary-push function.
/ Visual feedback
The usability testing showed that switching between tabs needs to be more strongly supported by visual feedback.
This led us to immediately think of an LED ring to more prominently indicate the tab switching.
Final Interface
/ How it works