Designing The Header/Menu Section, Fotoup
Design of FOTOUP Header/ Done in: 2013
Why the header matters so much in a social network
As explained in depth in the main Fotoup project page , our research resulted in putting the main focus on two pages, the photo page and the profile page. These two pages play a very significant role in the system and are the main content type that the network trafic flow is starts from, Inside or from out side.
The TAB as we called it or the sticky header is the main navigating tool not to only ease but to also guide the user behavior path. It determines how a user or viewer get to a page and gets out of a page.
So it should be designed to be as much as possible intuitive, brief and simple.
Best Practices
For us at the time the best practices of a social network header were socials like linkedin & facbook, And we have some inspirations from them at the time but fotoup is uniquely a combination of both but at the same time not general at all. Fotoup was to be a professional and designed only for photography, while its a social with social features. And Even the social features had to be designed specifically for the photo industry and many of our examples were too general.
What did We do?
We figured out what are the most important pages in our structure. And Based on the study we did on facebook, what are the most used personal pages are for the user.
- In our list we got these as the most visited shared/public content.
- Photo Page
- Profile Page
- And in our personal pages we got to this list:
- Personal homepage
- PM
- Notifications
- Upload
- Setting
From The Ideas To The Final Version
We were happy with some of our ideas and as things were getting shaped we tried the early version and we gathered some feedback and also developed some other ideas. The feedback was injected into the usability in login user menu items and placement of gallery links. Style-vise the early version was changed to a more simple and direct design mostly on login /signup function and how search worked. So the following are the versions that evolved in about 2 to 3 years.
Signed in/ Out And Navigation
We developed a signed in version and a signed out version. The Signed in version includes the top individual links for the user based on our studies and surveys and as mentioned above. And the Public version has the individual items replaced by signup/signin features.
But as we mentioned above Photo page and profile are the most important ones. Because its a social the user has access to his/her own contents with the profile link in the menu.
The access to the photo pages are from the galleries. The public galleries were designed to give access to photos the users wanted to go public and contests. So we designed the access to these pages this way.
In a more recent version we made some face-lift and small changes keeping the same logic and structure.
Complications Of Sub Menus
One of the challenges we had was how to address the need to have changeable tabs or sub pages and have the upper side of the page while the area under the tab is being navigated. We purposeful designed the profile page to manage the traffic to those sub-profile pages from that pages. So to keep ourselves away from making the main header any more complicated with more links and changing items in every page, we decided to go with a secondary sub menu section. For Profile it is horizontal and fro the homepage it is vertical based on the nature of the pages.
In the last version that we had some face-lifts, we actually changed our minds and brought some of those pages to an area under the main header design. The decision was made based on the trafic flow we had to those pages, every user had to go to profile and the access them. We kept some very low trafic ones but we added the highly used ones to the main header ad you can see in the photo.
How search works in relation to the header
Fotoup Professional Search engine
- Search Photos
- Searching Photography people
Search is one of the main features of the network. It let people find the photography professional that they are looking for like a model or photographer or lighting expert. We had it in high priority to have the search in every single page so one of the must stay items in our list always was search box.
Its not limited to finding professionals, it also is connection to all the photos in fotoup public galleries that are made available for sale by their right owner of the photo. In many cases that the photo is a famous one, you can trace the model, photographer or stage experts that are tagged to the photo by fotoup roles.
