CF Header Redesign

Hi Aurimas,

I do like how you ask the users for feedback before going ahead and making major changes to the site :)

On first glance the main horizontal navigation feels a bit busy with the addition of the sign in or register beneath it.

There are already huge new call to action buttons saying Sign in or register so it seems unecessary to repeat this smaller beneath the navigation.

However, I can see that when signed in you get a nifty drop down thing with a mini profile shown which I really like plus the big sign in or register buttons then are hidden.

So a possible solution could be to simply remove the small sign in or register beneath the horizontal nav and to put the drop down mini profile where the huge sign in and register buttons are now. Or have you already tried this and it doesn't fit?

Another solution could be to just make the entire header a little deeper so the elements don't fight with each other so much.

My next main thing is that the entire header doesn't feel quite cohesive enough. I think this is because of the white space to either side, the relatively small thinking bubble logo in dark followed by more white space with concept feedback on and then the rest of the navigation etc in the header on dark again. The 'stripyness' of the light, dark, light, dark blocks in the header rather than adding visual interest feels like it's not holding it together properly.

One possible solution would be to simply swap the type part of the logo saying concept feedback with the thought bubble part of the logo. Have attached an image to show what I mean.

Overall though the new additions to the menu look good. I know you were talking of a resources section.

I still think you should have your twitter feed link more prominent on the site somewhere too or maybe that will be on the blog page.

I hope this makes sense.

Hi Aurimas,

I'm very happy you recently keep investing more time in user interface of CF. For us who use it everyday small things can be really annoying.

I must say I like this redesign and the new logo (of course in 'emma version')

I don't want to disappoint you so here you are - few usability issues:

1. Significant delay on mouse over will be crucial to user experience. Otherwise the submenus will be whizzing around and driving everybody bananas :) At the moment there is no delay as it's not necessary.

2. Active areas should be as big as possible. It's very important because now we will have 2 rows and the active areas are getting smaller. The top area should even go to the end of the page. I marked it with red stroke on the mockup.

3. I suggest to rearrange user submenu and bring clickable positions to the top. This will shorten the way needed to click them. Also statistics could be on the right. I have introduced 2 extra metrics - votes and awards.

4. Inbox with a new message should draw attention with a contrast colour.

5. Social Icons should be further from search box.

My mockup below :)

Cheers!

Michael

Nice logo you have, we are seeing this great logo every time we log in, of course I don't like that it gets you to a different page but I am sure you will fix that with this new implementation.

Emma's idea is fantastic, the same with Michael so there is not much to say after 2 great reviews and some more from other users.

What I will like to see is some active state for the menu section so I know where I am, I am used to the website so I know I am on the concepts page, but you need some active state for the menu section and maybe add some bradcrumbs.

I think somebody else suggested this already but you could probably make the header a bit bigger in height, it's a bit crowded and with some extra space you could have more padding for the 2 lines.

Now if you add a breadcrumb on the left you could have space for social media icons on the right.

Right now is even more crowded in my jpg, but you get my idea.

There is one more thing if you log in you get to the concept page, but you can't go back to the first page only if you sign out, i don't think that's good especially if you have there some small tour of the website.

I'm glad search is coming finally.

But the biggest drawback is that the whole layout is at your face except for the dark band on the top. It takes quite a while for my eye to focus on anything where the the thumbnails are laid out. It takes even more longer for me to see related thumbnails grouped. The new logo is also bad without any contrast coloring.

For many visits I wondered why there was only one category on the home page called Premium Concepts and why I never noticed the menu with New etc. The answer to all these problems is the absence of visual grouping.

The most commonly used techniques are have different colored backgrounds who's colors had higher contrast ratios between them or have more space between unlike elements than like elements.

For example the premium Concepts can have a color running around them to visually group them and the color used to have a higher contrast than the background to make it stand out. This group should then appear different and space between increased from the next where the New are displayed. This group in turn may have another color running around it.

Billiant. Right on the money. Excellent change. And did I say, I like it?

Seriously I think it's a huge improvement, and it fits well. I honestly don't think I could suggest a better change. I guess you could consider having the "sign in" to the far right instead of Post Concept, and then that disappears when a user is signed in so Post Concept is left. Because logically, the user has to be either signed in or registered before they can Post anyway.

But all in all I like how you've executed the design for this (design including UI/UX). If there was a live preview I might be able to suggest any other insights based on implementation. But as is, really great.

Also, as an FYI, I miss the old style of sign in where you didn't leave the page you were on to sign in. I don't like how now it takes you to a login page. Also, on that page if you enter your email, then hit tab, it doesn't take you right to the password field. I think it should.

And one other misc bit of input on the site - i've noticed there's some issue with button padding or something causing the Submit Review buttons to see more of the sprite than just the button.

i do see more items/links being added to the top band- which is nice. it is now more compact and provides u with all the options you would need on all the pages.

the only feedback i have is on the new logo.. the logo pointer (the talking bubble pointer) is going nowhere- it is going somewhere to the left part of the screen where we have nothing- we could horizontally flip the logo.

Here's what I'd do:

1. Reincorporate the logo into the header. It feels very floaty on it's own and the design looks too disjointed.
2. Skip the "Welcome, sign in or register?" line. You've already got both of those buttons much bigger, there's no need to repeat yourself.
3. Keep the explanatory bit on the signed out homepage, but make it smaller. I'd suggest having it above two lines of work, one line for premium, the other for standard. That way you could kill two birds with one stone.
4. Create a visual link between items on the bar and subsequent menus. Looking at the second image, with the user dropdown, there is no visual message that tells me how I actually got that menu. I'd like to see some sort of visual link between that menu, and the button you hover on to get it. I know you've got little arrows but they're easy to miss and not very noticeable, something stronger. How about making the whole text button change a colour that matches the menu?
5. Keep the inbox link! I had to message someone else to find out how to access my inbox, so that's great.
6. Make the premium concepts more prominent. They've paid good money, but the only real advantage, page wise, is that theyre at the top. I think you could make an even bigger difference by using colour to really make them stand out from the rest of the work.

Right, I think thats it. I've attached two VERY crude ideas which demonstrate my thoughts. I think what I'm feeling here is there should be more use of colour. I know you don't want to go too overboard, but the colour scheme you've got is brilliant - so use it!

Unfortunately I've gotta shoot, but I hope this helps. And thanks so much for working on this :)

The interface seems more solid now. Now I can get to my stuff with less clicks. Kudos.

The big buttons at the top are much better and super easy to see. Nice improvement.

No more gray bar extending across the top: nice touch. I think the new one is clearer and this way the logo will not be trapped.

It seems funny to me that the social media is besides the search box. This has a potential of confusing some people who visit the web site. It looks like that that search is going to search something on twitter.

Even though the big buttons at the top are nice and clear, I would make the text inside them a ted small. Just personal preference.

I would eliminate the little gray line that is in between the main menu and the welcome message. It feels trapped in there. I see that you want to save as much space as possible above the fold, but I would not sacrifice the interface just for the sake of it. The top bar should have more vertical space. Everything else one the website has nice space around things and I think the main navigation should reflect that too.

Is the logo done and gone? It is good but it could be a little more clever. Concept Feedback is a great idea and deserves a clever logo to capture that "great idea". Every time I think of clever logos I think of this: http://38one.com/cleverblog/mother--child. I am sure you guys can come up with something as good as the logos on the link above.

(1) Okay, this isn't that important to start off with, but I'd like to see the logo/mark back to it's original position. It's kind of cool to see it as how you have it in this concept, but it also looks like the cookie monster just came in and took a bite haha :-) The current positioning does a better job at showing it off. :-)

(2) As for the menu. I think you have enough traffic now to see what people click on the most. If you have the numbers that'd be a really great help in making a review :-). I mean we could guess how effective the new menu is going to be, but if you have the information that will actually tell us what users are saying is important, that'd be awesome to study. If we know that, then we can see if there is a clear "winner" that users go to in the concepts drop down menu and maybe pull it out as a special button that users can just click without having to go through the drop down.

(3) I'd also consider moving Blog and Help to the footer. If your goal is to simplify things, then adding more links actually complicates it (just a little :-) ). Blog, Help, and possibly Resources don't really belong in that category of menu's anyway. Concepts, Members, and Categories are about the main content, where as those are related, but really side content that user's aren't going to use to navigate the main purpose of the site. I'd consider them on the same level as the "Contact Us" at the bottom...or at least Blog and Help. I'm not sure what Resources is. If you want to have them up top (as well as at the footer :-) ), then maybe consider adding them as small text, right-aligned under the menu bar. I don't know, just a suggestion of course haha.

(4) As for the drop down menu, if you're only going to do one column, I'd suggest moving all the "actionable" content to the top so that the user has to move the mouse less. It's not that far, but it's twice the amount of space they have the chance to accidentally cross past the borders and lose the drop-down menu. I actually like the current drop down much better with the two columns (the left is the actionable content and the right is the rep/credits content).

(5) I like that you've moved the user menu underneath the main menu. I'd suggest also adding the "Favorites" by the My Concepts. Having that easily available from the menu encourages users to use that feature. If not Favorites, maybe Recent Activity. Some link that is connected to their reviews at least. So that they can easily reach all their reviews (which I'm assuming they would favorite the ones they're trying to regularly see).

(6) I think the "signed in as" might be a little obvious. I wonder how it'd look if you just removed that text. I think, especially for your target audience, seeing the username with a drop down icon is a pretty good indicator of its intent. That should simplify it some as well as make space for a Favorite/Recent Activity link.

(7) Something with the current site that is going to get even worse with this new layout is the size of the menu item. It's pretty much the text only. It'd definitely be a usability improvement to increase the padding to span the whole height of the bar and increase the width as well :-) I don't think you'd actually lose anything by doing this either, so hopefully this is a safe suggestion.

(8) Visually speaking, things look great. I would have one suggestion on the coloring though. I'd maybe move the user menu to a bit darker font color. Just so that when users are glancing at the menu they can easily distinguish the two. Not much darker, but just enough to be noticeable. I was also thinking about suggesting changing the sign out color too. Just to help show that it's not a feature, but an exit. So that when users are glancing through the user menu they can know to skip looking at that.

(9) So for my final point I'd like to bring up the two things that I've ran into that I wish could be changed. The first is the user drop down. But there seems to be a new one live than I remember and I actually like it...so that's no longer an issue (Yay!). The second was having to go through the concept drop-down to get to "new" which I find myself utilizing multiple times in a single viewing session. If I'd be redoing this and knowing that I'd consider moving "new" out and making it in front of the concepts menu so that users can bypass the drop-down straight to what they want.

Well that's it for now. Hopefully these points have helped in deciding the new layout.

Hey Aurimas,

This are some nice features that you design to the new header! They are really coming in handy!

I really missed that search bar but now is there :)

I love that new logo and the idea that Emma suggest! Now that's a really cool improvement on the header!

I don't see other things to change! It's perfect!

Excellent job!