New Vertical Nav for Yipit

4 Responses

1. Pro Laura Groetzinger

   Too much blue? Any ideas to improve the active state, given the blue background and dark grey nav?

   10 months ago

2. Adrien Maston

   For info, I don't know Yipit, so I just quickly went to see the website before posting a comment.

   Now, based on what I saw and considering that the the functionalities stays the same, I think what they have right now, the blue font for inactive items and white font for active items works better.
   What's really uncomfortable for me in the current website is the total lack of differentiation between first level items and second level items (the sub-list that opens when you click an item) : sub-list items are bulleted but same font, same size, same color, same background, same line spacing...
   I would change the background on active item and its sub-list to some darker gray, loose the bullet of sub-list items but keep an offset on the left. All of it to draw clear boundaries.
   Again, considering that functionalities stays what they are right know, I think your arrows take too much space for the role they play, leaving little room to put a counter (not in your shot, does it go ?).
   Overall, I think you put too much pseudo-3D here : inset look with the borders , inset look on font, gradients. I would loose all that because I think it doesn't fit with the rest of the website.

   It can be so hard to explain visual stuff with words, I hope I made it understandable.
   And I hope it's ok I made critics, it's just my opinion.

   2likes

   10 months ago

3. Pro Laura Groetzinger

   First of all, thank you so much for taking the time to right such a thorough response! I really appreciate it. I just started at Yipit recently, so I did not design the current nav, but I think that your critiques are right on. Let me describe the challenge I faced with this redesign and if you have any additional thoughts, I'd love to hear them!

   The functionalities of this nav are a bit different than the current one. The requirements for this were very specific...
   -The nav must be fixed (so that users are able to use it while scrolling)
   -Because the nav is now fixed, the sub-lists must pop out to the right so that the longer sub-lists do not extend beyond the screen space
   -no more number/counters on main categories
   -the user must be able to separately click on a main category or click to see the sub-list. it must be very clear that both of these options are available, through separate active and hover states
   -when you select a sub-category and the sub-list fades away, it must be clear by looking at the nav whether you currently are browsing a sub category or a main category

   In reference to the 3D design, you are 100% right that it does not fit with the current site. We are slowly trying to introduce a more tactile interface and this was the first attempt!

   Any ideas or examples of solutions would be greatly appreciated!

   10 months ago

4. Adrien Maston

   You're welcome : if I'm right with my critics, then it'll help you, if I'm wrong, then you'll probably explain why and hopefully, I'll learn something.

   Considering the new requirements, here's things I'd try :

   • First of all, no pseudo-3D-inset, simple 1px borders all the way

   • keep a separation border between items (now I understand why you did some)

   • keep a vertical border between item and its toggle sub-menu icon (maybe just not full height)

   • use a different icon to toggle sub-menu (more like this one)

   • inactive : blue font / blue icon

   • hover : white font / white icon

   • active : white font / white icon and simple (bright blue ?) background

   • if sub-menu item is selected :
   - give the wrapping first level item a little more height to display its selected sub-menu item in it
   - draw borders around this selected sub-menu item and offset it (having it's right side breaking out of the navigation)
   - style the selected sub-menu item with white font and background color used for active item...
   - ... and style the wrapping first level item background with a darker shade of the chosen color

   • If I'm not mistaken, Apple recommend a minimum size of 44pts for touch input elements, and the whole nav must fit in the 768pts height of a landscape iPad, so maybe the nav should be moved on top of the page (include Yipit's logo in it ? make the name of the city appear like is part of the Yipit local logo ?).

   1likes

   10 months ago