Company: Ibexa - eZ Systems
Ibexa's eZ Platform v1 introduced the Landing Page Manager, allowing to build Landing pages.
View of Landing Page manager in Ibexa's eZ Platform v1.
Ibexa's eZ Platform users had issues with one specific, but important switcher. Feedback gathered showed that active state wasn't afforded sufficiently. For a sensitive percentage of users it was hard to differentiate active from disabled.
View of Landing Page manager in Ibexa's eZ Platform v1 as well as pain point and personas.
View of Landing Page manager in Ibexa's eZ Platform v1 and pain point in Content view.
View of Landing Page manager in Ibexa's eZ Platform v1 and pain point in Edit view.
Enlarged view of View Edit switcher.
Gif of real interaction when hovering disabled state in v1 switcher.
Switchers are a well known solution for radio buttons, specially in mobile screen sizes. Given the feedback gathered from our users, we decided to test out if what it works for mobile sizes it answers to Ibexa's users too.
View of View Edit switcher testing summary.
Our first attempt improved text color contrasts, without the addition of hover state. But test results indicated that this approach it was still confusing for a group of test users. They still would not be able to differentiate active state from disabled.
View of View Edit switcher, first iteration.
Based on feedback gathered from the first iteration, it was clear that we needed to increase affordability for the active state. We added rounded corners, increased text color contrast and highlighted more active state from disabled. We also added a slight padding within the switcher, giving with it more affordability to the active state by splitting up switcher boundaries from active state.
View of View Edit switcher, second iteration.
Results from second iteration were promising. Adding that extra padding was a move in the right direction. Now it was clear which is the active state. But there were a couple of areas that needed some attention: test users wanted to be able to read the disabled state with ease and we also needed to work on the animation.
View of View Edit switcher, third iteration.
We were closer after each testing session. Results from third iteration showed a clear path now, based on feedback gathered: we needed to work a bit more on color contrast, for both text and switcher, as well as animation easing. Summing up, simplify design as much as possible.
View of View Edit switcher in a live prototype, fourth iteration.
Last step involved addition of icons, instead of text, and final fine-tunning of animation easing.
View of View Edit switcher, final iteration.
View of View Edit switcher, final iteration with tooltips added.
View of View Edit switcher, final iteration and implemented.
Gif of View edit and Page fields switchers with tooltips implemented in eZ Platform v2 that enable Editors to edit content items in a dynamic format (tooltips added in v3.0).