V5 UI: ShareThis, Tagging, Rating, and Notifications

Published December 16, 2009
Advertisement

I've been quiet for a while now. I've been quiet for a number of reasons; the end of my degree is one, and shifts in my personal life is another. I'm a very different person to how I was a year ago. But those aren't the reasons you're most interested in, are they? [smile]

Work on V5 has kicked up a notch. We've now contracted the services of a professional designer, with whom I'm meeting once a week - and these meetings are epic. He and I spent two hours just going over the top menu bar. At our last meeting, he showed me his first 'renders' of the site (actually mocking up how it will look in the browser). I'll be sharing bits of these renders with you today and in the coming days.

On the back end, not much has changed, but as the user experience solidifies it becomes clearer and clearer how the backend will support that. Search, for example, is not just going to have to be very flexible, but will actually be proactive - the results of common searches will be continually maintained and updated as content changes, instead of only updating in response to user requests. Content control will be increasingly decentralised. There will be an overall shift away from types of content - discussion threads, articles, and so on - and towards what the content actually is. The site will feel like more of an integrated whole, instead of a collection of different sections that are loosely tied together. And the site's content will be even less bound by the www.gamedev.net domain...

Anyway, that's enough blather for now. Let's get on with some pictures!

ShareThis, Tagging, Rating, and Notifications

Today I'm going to talk about the UI for tagging and rating content (plus a couple of other things). This is UI that will be present for every piece of content on the site - be it articles, forum threads, even user profiles - so it's important that we get it done both early and correctly. This is what we're thinking it might look like:

It'll sit in the top right corner of a page, below the banner ad at the top. There are four different parts here, so let's go through them in turn.

ShareThis

You've probably seen a button like this before - we're going to be integrating the ShareThis button into our pages. The button, if you've not seen it before, provides quick links to share whatever you're looking at with a large number of social networks and sharing sites - Facebook, Twitter, Digg, Delicious, Reddit, StumbleUpon, and more. There's something like 48 supported services in total, and they add more without us even having to do anything. So, this will make it a lot easier for you to share interesting threads, articles, journal entries, etc with people in your venue of choice.

Rating

We're going to integrate a five-star rating into every content item. In the diagram above it says 'User rating' - that's because my picture there was cropped from a User Profile render - but it'll be more useful for things like articles or forum threads (we may drop it from the user profiles). By default, the number of stars shown will be an aggregated figure drawn from across the whole community. If you click on the 'Rate them' button, it changes mode:

When popped-out like this, it'll display the rating you've assigned to the content item (if any), and will let you click on a star to assign a new rating.

Tagging

This is an interesting one, as tagging's going to be such an important part of the new site usage patterns; we've spent a lot of time talking about it, asking questions, considering hypotheticals and so on. Let's look at the UI that pops up when you hit the 'Add Tag' button.

The top part of the panel displays tags that are presently applied. Tags in blue are tags that you yourself have applied, while tags in grey are tags that other people have applied - with different shades of grey indicating how many people have applied that tag. If you agree with a tag that other people have applied, you can just click it, and it'll turn blue to indicate that you're applying it too. If you change your mind about a tag, you can hit the cross on the right end of it, and it'll either fade back to grey (if other users are still applying it) or disappear (if nobody else was applying it).

The lower part of the panel is for adding other tags. You can type a tag name into the text box there (which will suggest tags based on what you're typing in), or click any of the 'recent tags' at the bottom - those are tags that you're recently applied to other content items.

Notifications

The last part of the UI today is the Notifications panel. This is so simple that it doesn't even have a popout: you simply click on the tag-like things to toggle the relevant notifications - click 'EMAIL' to turn on email notifications, 'IM' to get instant messenger notifications, 'CHAT' to get IRC notifications, and so on. The exact options that will be available as notifications is still to be worked out, but you get the idea.

Conclusion

So, that's it for today. What do you think?

Next time I'll start talking about the top navigation bar.

Previous Entry Aaargh
0 likes 20 comments

Comments

Wan
Oo, I really like the new design, looks very promising! Can't wait to see a mockup of an entire page. [smile]

Will content tags be limited to objective technical keywords (HLSL, Python, quaternions), or could they also be used to describe the community's opinion of the quality of the content (insightful, cool, funny)?
December 16, 2009 04:39 AM
superpig
Quote:Original post by Wan
Will content tags be limited to objective technical keywords (HLSL, Python, quaternions), or could they also be used to describe the community's opinion of the quality of the content (insightful, cool, funny)?
The latter. We'll encourage people to stick to objective terms, but we won't be explicitly limiting what tags can be.
December 16, 2009 04:50 AM
benryves
That looks great, both aesthetically and from a functionality standpoint. [smile] I can't wait to see what else you've got up your sleeve!
December 16, 2009 05:30 AM
Saruman
I am really looking forward to this :) Looking great so far!
December 16, 2009 09:55 AM
ukdeveloper
Shiny! Looks like GDNet is stepping into the modern era at last [grin].

One feature I'd like to see, if possible: could the theme be set via cookies and not on an account basis? It would be nice to browse the site in my chosen theme without being logged in, as I don't like the Christmas theme (I'm using the blue default) but it only takes effect when I log in and I don't see why I should log in if I'm not posting anything.
December 16, 2009 01:48 PM
ManTis
Honestly? I'm not sure.

I like the features, but the style looks a bit too WEB 2.0 for my tastes. I guess I have reservations because of previous website I used to go to that went all WEB 2.0 - GGE.

But hey, this is gdnet, with grown userbase and established identity. Maybe it'll be good ;)
December 16, 2009 02:31 PM
fastcall22
Are we still going to organize threads in a traditional "folder" hierarchy, or are we going to pool them all together and filter out by tags? (Such as viewing threads tagged as "DirectX" and/or "For Beginners".)
December 16, 2009 03:25 PM
superpig
Quote:Original post by _fastcall
Are we still going to organize threads in a traditional "folder" hierarchy, or are we going to pool them all together and filter out by tags? (Such as viewing threads tagged as "DirectX" and/or "For Beginners".)


The latter. I'm taking Google's mantra of "search, don't sort" and pouring things into an effective and pervasive search engine, rather than trying to create a taxonomy. However, for people who just want to browse, we'll still provide a bunch of 'saved searches' that cover some of the existing categories.
December 16, 2009 04:16 PM
jtagge75
Maybe its been mentioned before and I haven't seen it. But are we finally getting away from HTML tags for something a little more 21st century? With some automatic link parsing? I think people are so used to other forms doing auto linking that they forget about it here and thats why there are so many 'broken' links in posts.
December 16, 2009 05:48 PM
LockeCole
The new designs look very professional and I am stoked to see them live on Gamedev.
Quote:Original post by superpig

Tagging

[...]

The top part of the panel displays tags that are presently applied. Tags in blue are tags that you yourself have applied, while tags in grey are tags that other people have applied - with different shades of grey indicating how many people have applied that tag. If you agree with a tag that other people have applied, you can just click it, and it'll turn blue to indicate that you're applying it too. If you change your mind about a tag, you can hit the cross on the right end of it, and it'll either fade back to grey (if other users are still applying it) or disappear (if nobody else was applying it).

[...]

Imagining myself as not having read this, I think I would find this interface intimidatingly opaque. It would not be clear to me what the highlighting means when I click an existing tag. It would not be clear to me why some times, the tag did not disappear when I try to remove it. And, sadly to say for my intellect, I do not think I would immediately understand what the different shades of grey communicate.

I think a better interface would be showing a visible change in the shade of grey when I click a tag to approve it, not showing the cross if I cannot remove it and let a second click on the tag revert it to its original shade.

When the user clicks a tag she immediately sees how this changes the appearance to other viewers, or rather the idea of how it changes. With so many users on this site the actual change would probably not be visible but what the heck, exaggerate it for the user who clicked the tag, at least until she continues. There is no harm in that.

While the actions of removing a tag and removing your support for a tag might be exactly the same from the server's point of view I think they are very different from the user's. The user interface should be designed for the user.



Knowledge. Wisdom. Quality.
December 16, 2009 07:58 PM
superpig
Quote:Original post by jtagge75
Maybe its been mentioned before and I haven't seen it. But are we finally getting away from HTML tags for something a little more 21st century? With some automatic link parsing? I think people are so used to other forms doing auto linking that they forget about it here and thats why there are so many 'broken' links in posts.
WYSIWYG editing will be supported along with HTML, and the system will be extensible such that we can add other formats later on, like BBCode or MediaWiki markup.
December 17, 2009 02:33 AM
superpig
Quote:Original post by LockeCole

Imagining myself as not having read this, I think I would find this interface intimidatingly opaque. It would not be clear to me what the highlighting means when I click an existing tag. It would not be clear to me why some times, the tag did not disappear when I try to remove it. And, sadly to say for my intellect, I do not think I would immediately understand what the different shades of grey communicate.

I think a better interface would be showing a visible change in the shade of grey when I click a tag to approve it, not showing the cross if I cannot remove it and let a second click on the tag revert it to its original shade.

When the user clicks a tag she immediately sees how this changes the appearance to other viewers, or rather the idea of how it changes. With so many users on this site the actual change would probably not be visible but what the heck, exaggerate it for the user who clicked the tag, at least until she continues. There is no harm in that.



That's great feedback, thanks! As it happens, this is more a deficiency in my explanation than in the design - what you've described (click to toggle endorsement, and not showing the 'remove' cross for tags you can't remove) is exactly how it's supposed to work. Tags that are grey wouldn't have the 'remove' cross and wouldn't be removable; tags that are blue would have the remove cross and would be removable.
December 17, 2009 04:08 AM
_goat
I have a big problem with the 5-star rating thing: They don't work

I frequent Hacker News which implements a thumbs-up/thumbs-down system. It works way better than the ratings on youtube, which are absolutely meaningless. I'd ask that you seriously give this issue some thought, because gradient rating systems that always produce a binary result waste everyone's time. :)

Other than that, it looks exceptionally well-done. I have no other qualms. I am qualmless.
December 17, 2009 04:53 AM
Gaiiden
Quote:Original post by _goat
I have a big problem with the 5-star rating thing: They don't work

True. The star system is already an aggregate result of votes, so instead of having people choose a specific star for a rating, every content item starts with a neutral 3-star rating and people just vote thumbs up/down, which over time effects the status of an item's star rating up or down based on the rater's own community ranking.

Gah did that make any sense?
December 18, 2009 02:14 PM
Servant of the Lord
One thing I don't like about 5-star ratings, is I never know whether zero stars means "bad", or "neutral".

Does the five stars mean:
"meh" "good" "very good" "great" "incredible"
O-------------->


Or does it mean:
"very bad" "bad" "neutral" "good" "very good"
         <-------O------->


I don't know, unless the site tells me. Neither will some other users.

I assume, in GameDev.net's case, the second is used, 1 star = rate--, 2 stars = rate-, 3 stars = no rating, 4 stars = rate+, 5 stars = rate++, but how will other users know?


My suggestion would be to use some sort of coloring on the stars (other sites do this, but I can't think of one atm) to let us know if we are rating someone with a 1-star rating of "slightly helpful", or a 1-star rating of "incredibly unhelpful".

Each star has a different color, shown as you hover over it to rate a user.


Once you actually select a star, all the stars change that color, until the mouse hovers over the stars to change a rating.


December 18, 2009 05:11 PM
superpig
Quote:Original post by Gaiiden
True. The star system is already an aggregate result of votes, so instead of having people choose a specific star for a rating, every content item starts with a neutral 3-star rating and people just vote thumbs up/down, which over time effects the status of an item's star rating up or down based on the rater's own community ranking.
Er, well. Maybe. That's not solid yet, though we will have a 'thanks!' button system on discussion posts that'll we'll use to promote threads that have useful information in.
December 18, 2009 05:17 PM
Matias Goldberg
I'm with Servant Of the Lord, a 5-star system without a reference is crap and confusing.
Also when hovering through the start, it should be noted which star means what (Very Good, neutral, poor, etc) Not all cultures and all people associates red = bad, green = good (not to mention colour-blinded).

There's something I didn't understand: is the user's rating number going away??
Please don't. I find it really really useful. For instance, I do find myself paying more attention to users with a high ranking, usually the higher the ranking, the more attention I pay, even before seeing his rating #.
More over, if, say, someone makes a stupid question and has a rating of 450, I just ignore it. It's worthless since they usually make silly questions, asking just to ask, without listening to the answers (or even understanding the subject at all or at least the question they were asking in the first place).
I like the rating system because it's kind of meritocracy. Of course, there's exceptions to everything (people getting <1000 points without deserving it or dumbass with 1500+ points) but overall, it's a good thing.

I believe a user with i.e. 1900 points means a lot more than a "5-star" user.
Furthermore, we can tell "very appreciated" people from "appreciated" people by just 2 stars (5-star & 4-star people respectively) and newcomers with 3 stars.
The current rating system instead, allows 999+ degrees of "appreciation" (1000 points to infinity, but usually there isn't people with more than 2050 points)

Is someone with me on this?
December 18, 2009 06:36 PM
superpig
The present user rating system is going away, but it's going to be replaced with something better.
December 19, 2009 05:43 AM
evolutional
I like the idea of the star system being an aggregate of the total "thumb up, thumb down" - I agree that the ability of a 5-star voting system is flawed.
December 20, 2009 04:44 AM
jbadams
Quote:Original post by evolutional
I like the idea of the star system being an aggregate of the total "thumb up, thumb down" - I agree that the ability of a 5-star voting system is flawed.
As do I.

If however we're sticking with selecting from 5-stars I agree that some colour coding and additional information would be required. Personally, I'd lean towards the simpler system where the additional help isn't required.

Quote:Original post by superpig
The present user rating system is going away, but it's going to be replaced with something better.
Could we hear some more about this?
December 20, 2009 05:01 AM
You must log in to join the conversation.
Don't have a GameDev.net account? Sign up!
Profile
Author
Advertisement
Advertisement