Analysis and research
From the initial sketches, it quickly became apparent that the main component of our functional prototype should be a rotary encoder. In addition to exploring various shapes and sizes of rotary encoders, we also considered incorporating quick functions through button pins, allowing for the grouping of tabs or similar actions. The question of the device's placement arose early in the sketching process: Should the rotary encoder be positioned at the height of the screen next to the tabs, or rather beside the mouse and keyboard?
My team members:
Louis Schiemetschek &
Anja Gutmann
Course:
Interface design
Semester
Supervision:
Prof. Michael Schuhster &
Prof. Carmen Hartmann
- Menzel
Course Briefing
Problem Definition
We are confronted with the issue of time-consuming and disorganized work due to a large number of open tabs and complex navigation. Our objective is to identify and utilize Chrome browser tools to streamline workflow, enhance organization, and save
time, addressing the challenges associated with managing multiple open tabs.
The primary goal of this course was to design an innovative Human Interface Device that addresses a specific software problem. We were able to explore the principles of interface design, user experience, and human-computer interaction to create a functional and user-friendly solution.
Usability testing
Functions
To understand user interaction with our product and identify potential issues early on, we conducted task-based usability testing. Our first step in test planning involved characterizing potential test participants. Factors such as gender, age, and profession were deemed irrelevant, with a focus on participants possessing common PC skills and familiarity with browser extensions. Openness to online research, a preference for Chrome, and a tendency for disorganized behavior with many open tabs were key criteria.
Subsequently, we explored their work environment and setup, including the use of external monitors, preference for a mouse or trackpad, and whether they were right or left-handed. These factors were crucial in determining the positioning of our interface.
The primary goal in test planning was to define the purpose of our usability test and specify what we aimed to uncover. After introducing participants to the topic and instructing them to verbalize their thoughts using the 'Think-Aloud' method, we queried their browser behavior. We were particularly interested in whether they had many open tabs, how they organized them (if at all), and whether they used multiple windows for organization.
Our goal was to use this window to enhance clarity not only in our interface but also in the browser, especially when dealing with numerous open tabs. The extension window is crucial for providing comprehensive feedback alongside our interface.
Extension
Our original intent was to implement a display in the interface for tab management. However, we realized that constantly shifting focus to the display could disrupt workflow. To address this, we conceived the idea of an extension window within the browser, preventing constant distraction and ensuring a seamless workflow. This extension window, also known as a browser extension or add-on window, is a small window within the browser providing additional functionality.
Haptic (& Auditory) Feedback
"One key insight from the usability testing highlighted the need for improvement in the tactile and auditory feedback of the prototype. To address this, we focused on refining the ratcheting mechanism and developed additional prototypes."
From Rotary Encoder to Rotary Push Encoder
The mechanics of a rotary push encoder induce a tilting function, effectively preventing our interface from sliding on the table. The analogy to mouse clicks was appreciated. To refine the function, we created numerous prototypes, with the one below representing the final result.
Visual Light Feedback
To improve the affordance and feedback of our interface, we incorporated an LED ring. It indicates the number of open tabs, the current tab position, facilitates window switching, and displays identical tabs. In the 2D prototype view, the first scenario shows frequently opened tabs, the second demonstrates window switching, and the third illustrates selecting identical tabs using the bookmark button.
Final Functional Prototype
With our final functional prototype, users can switch tabs in the extension window and directly through the tilting function. However, window switching in the browser proved challenging due to confusion caused by multiple windows and tabs. The bookmark button was simulated exclusively in the design prototype.
Interface Design: Tabmate
back to top