CUNY Academic Commons

Sounds cool. It would be neat if one could add and subtract individual filters. So, for instance, if I've searched first for a college and then for a department and then for an interest, I might see, above the tabular data, something that looks like this:

College [x] > Department [x] > Interest [x]

And then clicking X would remove that filter from the search.

Not a huge necessity, but maybe something to consider.

Is there a reason that your labeling the name field "full name" will partial name searches work? And I'll take a stab at the UI.

Is there a reason that your labeling the name field "full name"

Because that's what it's called when you register or edit your profile. Could change that if you think it makes sense.

will partial name searches work?

Yes.

And I'll take a stab at the UI.

Danke schön!

Thanks for this, Michael.

"Search Members" and "Full Name" filter seemed redundant

Sounds good to me. Simpler is better.

The way you have written this up is a bit more complex than what I have currently built, in that it allows you to select and deselect multiple criteria for each item. That said, I like what you have, so I'm going to see if I can make some modifications to make it work. I'll try to make some ajaxy fun as well so that you don't have to do ugly refreshes. More to come.

If others have input in the meantime, please feel free to jump in.

This is getting exciting (but, then, I'm a nerd). Thanks for your work on this, guys.

Thanks for the feedback, Chris.

One potential political problem it addresses is doing things like showing just some of the campuses under College, how do you choose which are shown and which are in more

Meh, alphabetical order. I don't see this as a serious issue.

The thing about auto-suggestion is that it requires a preexisting set of choices. This would for School. It would work less well for Role, where people probably don't really know what they're searching for. And it wouldn't work at all for Academic Interests, because that information doesn't exist in a structured way anywhere in our database.

The immediate thing that is missing here which is not currently part of the profile is department.

Agreed in theory, but this isn't currently a known entity - we don't have a "department" field. We could implement one (and maybe we should) but that should probably be a different discussion, because it will raise all sorts of different issues (do we make it required; do we allow multiple options; do we provide predefined fields or just a text box or both; etc).

So I think next to the search button we might add an "advanced search" link

I kinda like the idea of having a simple search, and then an Advanced Search toggle leading you to something akin to Michael's mockup. I'll leave it to the experts to determine whether that simplifies things or makes them more complex.

FWIW, I have a mostly working version of something akin to Michael's mockup on my local machine right now. No easy way to show it to you, because we're currently without a shared staging environment. But it's kinda neat - all ajaxy, so you just check boxes or enter new search terms, and the list refreshes automatically. One issue with the way that it currently works, however, is that there is some confusion (at least to me) about how the various filters work together. Right now I'm using 'or', so that checking boxes gives you more results, but perhaps it would make more sense for them to be linked with 'and', so that you can drill down more. Or maybe a toggle? How much logic do we want to introduce here?

Let's keep http://redmine.gc.cuny.edu/issues/1294 in mind as we move forward on this.

Looks good, Boone!

Here are a few initial thoughts:

1. I think that the layout needs to be reworked with feedback from Chris; right now, I don't like that the member listing is scrunched into half of the page. I think that what I'd prefer to see, if possible, is the following layout:

-- the members listings stretch across the full horizontal width of the page;
-- the filtering functions are hidden at first, except for a link of that appears parallel to the "Order By" field but aligned to the left side and that says something like "Filter these results"
-- When clicked, "filter these results" would result in a nice ajaxy drop-down that would push the rest of the content down the page

Just some ideas, of course -- looking forward to hearing what others think.

2.Bug -- clicking "clear all" when first coming to the page leads to a grayed out "Loading" process; page needs to be reloaded to interrupt

3. "Order By" should be integrated into this filter, I think. Doesn't make sense to have them separate

4. "Narrow Results" needs some explanation, like "See only members from:" or something that provides an explanation of what clicking "College" does

5. The handling of the code here is really cool! I love the automatic filtering when one clicks a checkbox and the way that you show the academic field description below the text box once it has been entered. Great work.

6. Filtering for NYCCT and English didn't bring up my profile, I guess because "English" appears in my Title field but not my "Academic Interests" field. I wonder whether "Academic Interests" should search the entire profile, since people may list their broad discipline in the title (Prof. of History) and special fields of interest in the "academic interests" field.

Great work overall. Exciting.

The problem with making the filters horizontal is that some of our lists are long. That means that the content will get pushed way, way down the page when the filters are enabled.

That said, it would be nice to get UX help, and soon, so that this can go into the next release. For a project like this, the UI is about 80% of the work, so building it over and over again will take a long time.

I can't reproduce your bug (2). Can you give more details on your setup?

My setup: Chrome 15.0.874.120 on Mac OS X 10.7.2

Boone, I'll get you some comments related to the UI soon. Just wanted to mention a functional issue I encountered. When I typed something into the Academic Interest box and then clicked search it didn't filter on that. It only filtered when I typed in the word and pressed the enter key.

Also, it seemed like when I clicked the (x) by the Academic Interest filter it didn't really remove the filter. Clicking Clear link did clear (as well as clicking clear all).

Chris - I fixed the 'Submit' issue by removing the Submit button altogether (when JS is enabled). There's no need for it if you're using the JavaScript interface.

I couldn't reproduce your Academic Interest (x) issue. It's possible that the item you removed didn't really add many items to the results, so that when you removed it, you didn't really notice a change.

Matt, I'm afraid I still can't reproduce your Clear All issue. Could you try a hard refresh?

Looks great - thanks so much, Chris. Matt, before I get started on implementing some of Chris's suggestions, I want to get the nod from you, so I don't sink time into something that you're not happy with.

(Side note - Chris, what is the name of the program you used for wireframing? I recognize the typeface from a project I've done in the past, and I remember wanting the software, but I can't remember the name. Maybe Matt/CAC can swing a license for me.)

Did a hard refresh; clear all issue still occurring . . .

Did a hard refresh; clear all issue still occurring . . .

Hm, no idea. If you can do some JS troubleshooting with the console, it would help, otherwise we'll just have to wait until I get steps to reproduce.

Thanks for the info on the software, Chris. That name doesn't sound familiar to me, but if you like it, then I want it too :)

Thanks also for the console screenshot. For some reason, Firebug wasn't giving me the error. Fixed in https://github.com/castiron/cac/commit/c0f38c2aacbbac3171259f612dcb9c99c39d82c9

Thanks for your mock-up, Chris. A few thoughts/questions:

-- Do you think that "Order By" should remain over on the top left? Should it not be integrated into the filter menu? I think I can see the argument for why it shouldn't be -- it allows one to change the order of the results of the filtering -- but I do want to get your take on this.

-- What do you think about the space issue I brought up above? Right now, the page looks pretty congested to me. I thought that a horizontal menu might work, but Boone is concerned about space.

-- One way to resolve the space issue would be to put the menu in an ajax drop-down. What do you think of that?

Please let me know what you think, and thanks.

One way to resolve the space issue would be to put the menu in an ajax drop-down. What do you think of that?

Using a jquery slider would solve some of the horizontal issues on page load, but with a long vertical list, it would push all the content way down the page when the options were expanded. On some resolutions, this could mean that users have to scroll up and down whenever they want to use filters.

but with a long vertical list, it would push all the content way down the page when the options were expanded.

And the long vertical list is the list of colleges? What if we created four columns of six colleges each?

I really do think we need Chris's take on this from a design/UX perspective here.

And the long vertical list is the list of colleges? What if we created four columns of six colleges each?

Yes, the list of colleges. Creating multiple columns will be quite hard technically, as there's no native way in CSS to make columns spill like this. I can do

a  b  c  d
e  f  g  h

a  c  e  g
b  d  f  h

I've been thinking on this a bit and don't have a definitive solution. First, in terms of the "Order By", I see that as a separate action of sorting/ordering vs the other stuff which is filtering. Separating them to me says these tools over here change what you will see (filtering now on left) and this other tool changes the order you will see those results.

In terms of the horizontal vs vertical nav that is a bit more tricky. The vertical style in the current version and in my wireframe is pretty common. It's probably the most common when there are a lot of items in the filter options. This is pretty much for the reasons Boone outlined the main one being that it's simpler. However there is also a usability argument in the vertical view which is that people can see all of the options without having to click on anything to reveal them (as they would have to do with any jQuery horizontal version). So it's also a simple way to see what's checked and unchecked.

I do hear your concerns about space though Matt. If we keep the vertical list there are a few things we can do. One suggestion I have that we narrow the filter list from it's current width as I mentioned before. Also giving it a different background, like the background in the navigation options on profile and group pages in BuddyPress, will also help to separate it from the results side. Another solution would have to wait until an overall redesign which is to make the page wider in general. Right now the overall page width for our site is on the narrow side.

If we move to a horizontal list then I would want to do more thinking about the implementation. One idea is to use a mega menu style (http://etnies.com/ roll over shop). This has some advantages and disadvantages and would need some more thought. Like the menu on the example there it would probably work best if the dropdown just covered what was underneath it and then disappeared. I have some other ideas but would want to think about it more if I know we're going in this direction.

BTW Boone, there is a way to do auto flow of text into columns in the CSS3 spec but browser support isn't all there requiring javascript to ensure it works (well, IE isn't supporting it but the rest do).

Whoa, nice http://www.zenelements.com/blog/css3-multiple-columns/

Hi everyone,

This ticket is holding up the 1.3 timeline, so I'd like for us to come to some sort of consensus on what to do about it.

My view: If we're going to include these new features in the 1.3 release, we must go with an implementation that is close to the current one (with some modifications, along the lines of what Chris suggests in his recent wireframe http://redmine.gc.cuny.edu/issues/652#note-17 More substantial modifications to the current implementation will take a long time (both to code, and to vet between the team, as we are all busy at this time of the semester); IMO they would introduce an unacceptable delay, and would mean putting the filters into the 1.4 release instead.

Given that it's built, it seems wasteful to me not to just go ahead and release it with 1.3. We can iterate in future versions, based on feedback. The only reason why we may not want to do this is if we thought that, in the future, we were going to overhaul the filter UI in a massive way, and we were nervous about doing a radical overhaul to an already-introduced piece of functionality. (That's stack of ifs: my own view is that even if we do overhaul down the road, it still shouldn't be an impediment from current release. The current implementation is not that bad.)

Anyway, this largely hinges on what Matt wants, as he's been the vocal dissenter from the current implementation. Matt, would you mind chiming in with your thoughts?

Sure. I don't think we should hold up development. Let's get it out there and then, as you say, improve future versions based on feedback. Thanks for your work on this, Boone.

I've implemented some of Chris's suggestions, and done some general style cleanup to make it more presentable. Functionality is unchanged. http://cdev.gc.cuny.edu/members

I think that, at this point, it'll be possible to do only very small tweaks until after the 1.3 release. IMO it works well and looks pretty good right now, so I hope this is OK with everyone else.

Let's talk about this tomorrow when we meet as a group.

As per community meeting:
- Only show first 8 colleges, with More link that shows all
- Put 'fewer' button at the bottom if it's easy
- If you come back to the page and have one of the colleges checked, don't collapse the menu

The 'More' functionality is implemented in https://github.com/castiron/cac/commit/1dc766603f005c36f2dd40ae1a6ac6943dde39d7, and is on cdev at http://cdev.gc.cuny.edu/members. Here's how I went with it.

- You see the first 8 colleges.
- If you have any colleges checked, leave the page, and then return to the page, the links will not be collapsed (you'll see them all)
- Instead of a Fewer or Less button, I only collapse when you click Clear (or Clear All). That way there is no worry about someone checking a box, collapsing the list, and forgetting about it. I think it's intuitive enough.

I think that sounds fine to me.

Hi Boone -- I tried to view this on three different browsers (Chrome, Firefox, Safari), and I emptied cache on each, but I still can't see the new "more" functionality. Just me?

Click the 'Clear All' button. You probably have a rogue cookie.

That did the trick. Many thanks. Looks and works great!