When we go to a responsive design on our product pages, one of the things we need to figure out a way to handle tabs. Since they require a lot of horizontal space, we need to work out the most lightweight way to change the display for narrow viewports, while still providing a great user experience.
Since we work in an agile environment, we are able to break our work up into logical chunks, and work ahead when we need to. We have worked out a pretty fluid system over the past few years – in one iteration, we may work on production code for one project, wireframes for another, and initial graphic design on a third. This keeps us involved in every facet of UX and UI design on our projects at all times. It’s a bit of a juggling act, but quite fulfilling. It never gets boring.
For this part of our project to make our product pages mobile-friendly, I prototyped the interaction of tabs changing to a modified accordion. I didn’t want to go with a traditional accordion because I wanted to make sure users saw all of the accordion options. I loaded the accordion content below the accordion itself, and scroll down to the content, so the user gets a clear idea of where they are on the page. Once I worked this out, we put it through a round of user testing to see if this approach would confuse people. It passed with flying colors.
Since I wanted to get a real-world feeling of how this would operate, I did a few sketches of what I wanted, but then moved straight into an HTML prototype, bypassing wireframes.
- Tabs to Modified Accordion Prototype. Resize the window to get the full effect. (HTML/CSS/JS)