Design: Group Landing Page Rework

Brians Mockups for reference-

Round 6

Download PSD —>
h1. Round 5

new feeds
show wiki hide wiki public view 1 public view 2

Round 4

tab-like line plone-like

browse 1 browse 2

Round 3

GrouHome bg 1 GroupHome bg 2 GroupHome Browse 1 GroupHome Browse 2 Me Dashboard

Round 2

various touchstone design/placement ideas:

moving away from colorful/blocky little color, no bgs smaller text chat btn on left, simplified more
contribute & chat btn on left smaller streamlined, edited icons

these ideas reflected on the me dashboard coming up.

Round 1

We are moving from the blocky feel of the wireframes to a more streamlined design. Early days, but here are some rough starts. Plus the beginnings of cross section design considerations. O shizzzal, it also turns out that facebook is very good at economizing space. i couldnt help but explore this design direction, and with the same UI priorities that we worked on in the wireframes.


more streamlined and with mesection in mind

more blocky


meghana and i have had a rapid exchange of mockups. moving towards less blocking, more efficient looking. meghana, i uploaded my latest version. not at all satisfying, but you’ll get the idea. see you tomorrow at 11:30.


we also need to think about this holistically otherwise we will have some pretty schitzo design action. we need to keep the me-section frames open / in mind as we design group home.


Round 2

meghana, thanks!

  • i think all left column and center column components are looking sharp! spacious feeling, well articulated. much better visual hierarchy. Body text style between center and left good. It would be good to maybe play with the headers to better direct the eye to the content in the center column. Right now all headers ask for the same attention.
  • we have two design directions to think on now. Facebizal, and standard banner.
  • i’m also questioning the use of top nav tabs, lots of tabs, and not sure its the best way to describe place. lets talk more about that. this is especially true for me-section.

Wow. Some big changes on the way. I’m just hoping that with these changes, wherever you can write text you can insert hyperlinks. The current layout has a few places where you have to display whole URLs which never looks good (in the “summary” space for example).


i updated facebizal sections slightly


two comments

  1. the landing page should be able to support different color themes, so should not have any particular color theme in mind, but allow different areas to be changed.
  2. I object in the strongest possible way to the navigation tabs ‘browse all content’, ‘tasks’, ‘join chat’. I don’t know what this area is being called. I will call it the ‘top group tabs’. These are problematic for several reasons:
    • they are high in the page, yet do not correspond to high level ways to conceptually divide the navigation.
    • they violate the primary rule of navigation tabs, which is that one must be selected at all times.
    • they are big and bulky, distracting, and the icons are likely to clash.
    • a lot more work needs to be put into the relationship between the search, tag, and archive views (as well as the content specific pages). perhaps this is done already? I don’t think all this can be crammed under ‘browse all content’.
    • you should be able to customize the major navigation elements of a group, not just the minor ones.
    • customization does not work very well with a fixed width horizontal layout, unless we only allow a fixed number of slots. I think the navigation links are something that should vary widely, from a few to many, depending on the group.
    • the consequence of this is that the primary navigation of a group should be vertical, not horizontal.

elijah – make sure to say what round you are talking about and which specific mock ups. there are new mockups coming down the pipe based on round 1 and 2 – please check in on these later today or tomorrow.

Your strongly worded objections are pretty late in the game. these mockups are based on wireframes that have been honed over more then a few weeks. we will put your comments into the pot and stir….

1. the landing page should be able to support different color themes, so should not have any particular color theme in mind, but allow different areas to be changed.

  • yes, we have talked about this. there will be per site theming to start with and the possibility of group theming down the road, not this round.

you should be able to customize the major navigation elements of a group, not just the minor ones.

  • on first blush i dont think i agree with this – will think on it more. do you have examples of sites that do this? anyway the path of group landing page customization is different then what we have, different then what we have been considering, and i dont think will make it into this round. that being said, the customizable nav links are there for users to tweak, and are high up in the IA.

I think Elijah makes some good points. Some responses below:

  • the second level navigation/ top group tabs.
    I agree, in the round two designs the second level nav look like buttons, not like nav elements. We talked about this last week, and I thought we were looking in to making them look like tabs? Or are these round 2 designs just exploring this option, and the tabs option will also be explored?
    The only one of the designs that works in terms of navigation is but it’s still not following the conventions of navigation elements, which I think is important from a UI perspective. And even in this design, the icons group the two nav elements to the join chat element very clearly, use of different colors and slight variations in position don’t change that, so they all look like actions rather than “you are here” indicators, which is what nav should do.
  • Search, tags and archive views.
    I think tags are addressed in these designs, but I agree, I can’t see any archiving system, or straight forward way to get at buried content, other than the search, which is at the top of the page, and possibly a little isolated, or “Older posts” which is also a little out of the way. We should talk about some kind of facetted search or something on the groups pages. But not for this development round!
  • Customizing major navigation elements of a group.
    I think the helpful links section can grow with the group, and that will work with these designs, I’m not sure about allowing groups to customize their own second level nav or “top group tabs” as Elijah calls them.
    We should discuss this. Because there is no traditional folder structure in the group areas, we (or maybe just I) need to be clear on how information is organized. I’m still stuck on this.
    I’m pretty sure giving a good structure to groups, and having them stick to that structure, will enable them to find their content easier. Giving them the option of organising the nav themselves, without any parameters to help them, could end up in chaos. I expect this is a longer crabgrass discussion and I need more background on the theories behind self organising content, taxonomies etc. I’m willing to explore the concept of total freedom :-P But not for this round, we don’t have time.
  • Primary navigation of a group being vertical.
    I’m afraid that due to the 800 px decision we need to stay as horizontal as possible. We will be reviewing this in the future, and working out how to offer 1024 layouts too, but not in this development round. We don’t have time. I would say this is also something that can be explored in the next version, along with the ability to customize the groups pages more.