My first experience in designing a user interface for a web portal ended up being quite a blooper. Like many projects which start off as something and end up as something completely different, this project too had its own quirks. We started off with a very simple portal application with a few top level menus aligned horizontally, and as the scope of project expanded the number of menu items and sub menus also went up
So with a humble beginning like this
We started screwing it up in this fashion.
Very soon I realized that, horizontal alignment may not be the right thing to do because when the number of menus increase , the expanding horizontal span going out of the screen’s view port looks awful. Of course its not as awful as it looks here inthe figure above because bootstrap handled it for us but still it wasn’t something to be proud of. So what’s the solution ? As it turns out , vertical alignment was the next best option.
And yes indeed, it was also a choice adopted by some of the competitors whose product we were trying to emulate. Now we could just add menus at the bottom and the scrollbar would have taken care of it and as we all know vertical scrolling is much more intuitive and causes less distraction to the viewer.
But I had a problem. As it always happens in the UX world, when I sought feedback about the newly designed vertical layout, I got some mixed reviews from experts which compelled me the think different. And this time I was thinking of a mixed horizontal and vertical alignment, something similar to a tab based view like this.
But is this really different? Absolutely not, and nothing new about it. I have seen many such layouts and moreover this suffers from the same problem as with the expanding horizontal menu span. But still I am going to use it in one of my upcoming projects and I think I have a few valid reasons for using it (from a design stand point). So I will share my experience once I start the project. Till then , GoodBye !!