Working on new usability group layout and content

Events happening in the community are now at Drupal community events on www.drupal.org.
kika's picture

One of the Szeged UX sprint task were improve the contents and layout of this group. With great help from Drumm and Moshe we managed to base our layout on panels (e.g. superb flexibility) and we are now free to come up with any type of flexible layout for our home.

We are just starting and there are a lot of room for improvements. Please give feedback if this new layout breaks on your browser -- block droppage has been reported -- and what else should be done. Webchick dropped an idea what they are using over SoC: have a special "featured" or "important" tag on content so we could list/sticky important discussions / going-ons automatically.

Also there are some confusion over content types we are using in this group: "Jobs" have not used once -- should we kill it? -- there are some confusion whenever one should create a wiki or discussion on particular issue, this needs clarification.

In related note, Moshe enabled attachments on comments so we can start having a "Photoshop ping-pong" exchanging ideas visually, at least in theory. Does it make wiki pages obsolete? Discuss!

Also, Niels is working on new and improved "quicklinks" panel what you can see in the right. We are about to get rid of outdated and depreciated links there and have logical chunks for the information. It's a wiki page so everybody is welcome to improve and update it later on.

Comments

Hey, So on the list of

Bojhan's picture

Hey,

So on the list of important things to do with the usability group layout, I would put the major usability issues that need fixing. Feature something usable within drupal and resources. Till this day I still question if anyone acctually reads the resources we give, but for those who do it should definitely be there (resources as lukew, jakob nielsen, jared spool should be sufficient - aggerator?). See http://groups.drupal.org/node/11154#comment-40457

I don't see usability jobs coming up any time soon, so I would say kill the content type.

Sure

kika's picture

We need "Usability Spotlight" items. How to do that?

a) Have another small wiki snippet in frontpage
b) Let's do a group-specific vocabulary, tag certain items as "Usability Spotlight" and have a automatic panels-generated list of these items somewhere up in the page.

+1 on kill jobs. One can list one under http://groups.drupal.org/designers-and-information-architects

And we miss you over here, Bojhan, big time.

I think we should kill jobs

Noyz's picture

If it isnt being used, let's kill it. Secondly, this section is to post/generate ideas, and to guide others.

Wiki pages are useful

ximo's picture

Wiki pages are useful for things like task/status lists when collaborating with other users, I don't think they're obsolote. It is also possible to enable comments on wiki pages, which would be very useful in this group. The group manager (drumm) only has to ask politely in the Maintenance group.

Removing the Job content type gets a +1 from me as well.

kika: I wiped out my name for this task on the whiteboard in Szeged, as I wouldn't be able to help out there and then. I will stick around to help out online though :)

I'm a g.d.o. maintainer

yoroy's picture

So just let me know if you have a wiki page that needs comments enabled.

I thought

ximo's picture

I thought it was a preference that is set per group, not per wiki page? I might've misunderstood though.

Task list block or panel?

heather's picture

Would it be possible to bring a task list into a block? e.g., "How you can help" Or make it... show up somewhere, like a panel?

If I have some spare time, I might like to pop over here, and see what tasks people are working on, and help out. In this way people can concentrate and distribute efforts. Soon, the UX sprint posts will start to trickle down the page, but those tasks are still important.

For example, collecting screencasts http://groups.drupal.org/node/14393 or making screenshot sketches with http://skitch.com/ will be ongoing as you build the Best Practices Guide http://groups.drupal.org/node/14422 - and it would be good to advertise this task.

A good example (though not in a block) is the Documentation team list of ways people on the docs team can help.
For any Drupal user: http://drupal.org/node/302203
For the docs team members: http://drupal.org/node/302146

Use our linkdump wiki

kika's picture

http://groups.drupal.org/node/7074

I added a section down there where you can add "what´s hot" items -- our featured discussions and wikis.
And do use Markdown syntax, it is lovely.

Drupal Dojo

gaele's picture

The Drupal Dojo group page has a very inviting look: http://groups.drupal.org/drupal-dojo

Some tabs that could be useful for us:

  • guidelines & best practices
  • usability issues on d.o
  • tools & documentation (HOWTO help)
  • current discussions
  • results of our work so far (for D6, D7,...)
  • usability test results

Instead of knowing who has

skilip's picture

Instead of knowing who has recently joined the group, or who's in the group, far more important would be information about the ongoing discussions. Too many discussions are start which have been discussed already. There should also be a way to better group related discussions (using taxonomy). It would be great when we had block displaying all discussion categories for the usability group. In my opinion we could remove the 'Recently joined' block for that.

stylish plugin

yoroy's picture

We'll have to check how much of these wishes can be applied to one (this) group specifically.

In the meantime, I've been playing around with the firefox extension Stylish. It let's you create css for specific webpages. I had a go at cleaning up the look of g.d.o. a little:

http://userstyles.org/styles/10218

It hides the 'recently joined' block, adds some more white space here and there, makes most of the links font-weight:normal instead of bold and hides the rounded corners around blocks. Try it, maybe you'll like it :-)

Please file issues against

drumm's picture

Please file issues against drupal.org theme in the drupal.org infrastructure queue.

We can actually hide the blocks and use all panels, but it would be inconsistent with the site.

Me likes

ximo's picture

Looks much better! Didn't see the font-weight:normal links, but the horizontal margins made the site much easier on the eyes. Moshe should see this :P

updated

yoroy's picture

Some of the changes I mentioned were not in the version I uploaded. I updated the online version now. Are your links non-bold too now?

layout proposal

yoroy's picture

Only local images are allowed.
Omnigraffle document attached, remove the .txt file extension to use it.

Recent posts: great! An

gaele's picture

Recent posts: great! An overview and a what's new in one.
Teaserlist: I'd put that behind a separate tab. As you say it's too much of a repetition of recent posts.
UX spotlights: I'd allow more space for that, and make it a list of all issues (each issue containing links to discussions, d.o issue queue, blog potsts, etc.) as was suggested elsewhere.

graffle file empty?

heather's picture

not sure if the file is actually empty? i downloaded it, changed the extension... but could not see anything within the file. i mocked this up on top of a the .jpg

i really like the tracker from http://groups.drupal.org/drupal-education
- it has useful information, it can handle long-wearing conversations (so someone coming every 2 weeks can still see activity), and it is easy to see where the hot/new topics are with the number of posts in a topic, the terms are also good.

(why can't i post pictures?? grr... )

Hmmm, I guess you'd need the

yoroy's picture

Hmmm, I guess you'd need the stencil I used to be installed with your copy of Omnigraffle. I use this one: http://urlgreyhot.com/personal/resources/omnigraffle_wireframe_palette. I'll see if I can save the file with shapes next time.

I had a look at adding the tracker instead of a simple list, but the available space made it look very cramped and irregular.
So I just went ahead and replaced the teaserlist with the simple title-list on the homepage for now.

Teaserlist on a different

yoroy's picture

Teaserlist on a different page alltogether seems good. I even had added the link to it already :-)
Spotlights of everything kindof defeats the purpose of highlighting a few key issues? I think linking to a summary page per issue that has all the links to discussion, queue, blogs in it might be 'cleaner;.

+1 ( I have very rarely ever

Bojhan's picture

+1 ( I have very rarely ever used this )

UX spotlight: I think as long we take care of it, we don't need a link asking for more input. I am sure people who are involved will find an easy communcation channel to get us notified of stuff that needs to be up there.

@Gaele : I dont think we should list all issues, we should primary be focusing on fixing prominent ones so that we can work on a few issues focused instead of many issues at once.

Resources & tools: Do we have any tools?

Keeping track of discussions

gaele's picture

I was referring to this quote from skilip:

"I recognize the problem of finding out what's being discussed already, or what hasn't. There's no way to keep track on all discussions in such a large community.
[...]
one of the most important achievements would be having easily readable info on what's being discussed already."

(This would be another block and not be labeled spotlight, of course. Sorry for the confusion.)

Resources & tools: e.g. how to create a mockup; links to software?

From the feedback so far I

yoroy's picture

From the feedback so far I think we agree on replacing the teaserlist on the frontpage. So, I replaced it with a simple list of titles. I created a new page 'Archive' which now contains the default teaserlist.

So far so good?

Hooka hey

eigentor's picture

Congratulations to the changes so far - this looks far better!
And it sure won't be the end...

Something we could use is what Lisa Reicheld does for the drupal.org redesign - she uses Flickr and Slideshare as a base for sharing visual things: http://flickr.com/groups/drupalredesign/ http://www.slideshare.net/group/drupalorg-redesign-project

With our God-like programming skills it might even be possible to incorporate an overview of say the latest design ideas of Flickr group into a block? I have seen it done using xml for Flickr images: http://www.drupalcenter.de/node/12609.

The power of APIs and open web is our friend ;) For what is still missing is an all-visual playground. As far as I know you can sort by tags as you want on flickr.

Life is a process

Life is a journey, not a destination

Playground

kika's picture

Cramped tracker

kika's picture

Yoroy, can you post a screenshot of that? (re http://groups.drupal.org/node/14427#comment-48746) I am biased towards a tracker in frontpage, it gives far better overview on what is going on with older issues. We can put the "quicklinks" module back to the top of the page if page width is the issue.

Sure:

yoroy's picture

Sure: Only local images are allowed.

Superb!

skilip's picture

An easy scannable list of active discussions at the frontpage would be a huge improvement. Would there be a way to sort this list on activity (number of posts <-> most recent posts)?

Our focus should be to avoid duplication of issue posts. New users who are experiencing difficulties with Drupal should be able to quickly see whether the issue is being discussed or has been discussed already. Therefore I think the Quicklinks block should be used to display 'We don't want new discussion about this' -topics. I don't think we can automate this, can we?

Sweet

ximo's picture

That looks much better! The list we have now doesn't seem to alert me of new comments to discussions.. The tracker makes it easier to keep track of activity in discussions.

I also suggested here that we could have a short text saying something about when to post an issue in the queue and when to start a discussion in the group. It could also recommend searching first to see if an issue has been discussed before.

Playground reloaded

eigentor's picture

Not letting loose of my idea: then how about a "latest images" (latest mockups) block, whith thumbnails linked to the respective node? (not sure how to solve this with images linked from remote websites)
Well, everyone wants just one block more... (until we have 27 ;) ) yet for the more visual-thinking people it makes a big difference to be picked up that way, and would also be an encouragement for people to produce more mockups and visualize their ideas.

As to the tracker: Number of replies would be the only crucial information, maybe one can even display this without a table (hate tables, pure headings list looks much more relaxed. But maybe scannability is better with alternating background?)

Life is a process

Life is a journey, not a destination

Yup

ximo's picture

Latest images:
Something visual would be really nice. But would it be possible to see what the different thumbnails represent with the block being ~200px wide? And as most people use services like Skitch, getting thumbnail sizes would be hard.. Still, images would be good!

Tracker:
Yea, some columns aren't needed, like terms. What I would like to see though, is the number of unread comments. Think index listing of forum posts, where you can easily spot unread and updated discussions. Hm, g.d.o doesn't have forum.module installed does it?

Replaced the simple list

yoroy's picture

Replaced the simple list with the tracker. Added two main post to collect some inital feedback to get the process started.

dev to the rescue

eigentor's picture

Yoroy, you knew it: once you change it to tracker, everybody complains again.
Scannability is gone completely now.

So isn't this a case for Bèr: please tweak the tracker view, so we get rid of columns we don't need.

Life is a process

Life is a journey, not a destination

what if we kill...

kika's picture

the poor "Quick links" part in current position and push it to the top with other stuff -- allowing tracker to claim the whole width?

How about Something like this?

stevebayerin's picture

First time I'm attaching a JPEG here so I'm not too sure if it can be seen.

You are both saying the same

yoroy's picture

You are both saying the same thing. Updated the page.

Hope you all don't mind the live prototyping! :-)

Here's another layout suggestion

stevebayerin's picture

I'd push for having the "What we are working on" list to be left columned for better focus/readability.

tracker++

heather's picture

thanks for the tracker... i hope it evolves to suit everyone. if it doesn't survive the front page- could i suggest a tab at the top? the tab could link to the full tracker.

am i missing the status/decision of this topic? http://groups.drupal.org/node/14664

Usability

Group organizers

Group categories

UX topics

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: