Jungledragon Blog

This week I have been posting tiny JungleDragon updates based on the progress I made last week. I sure hope you are not getting tired of these updates yet, because I’m not done

Today’s topic is untagged images.

Tags are an important way to find and browse images in JungleDragon, so it sucks when an image has no tags. Instead of frustrating users by making tags required, I have a different strategy:

• Tagging an image is rewarded with karma points
• With enough reputation, you can even tag images of other users
• I make tagging as easy and fun as possible

Let’s talk about the fun and easy part, which I improved greatly last week. From the general tags page, one can navigate to the Untagged page, which looks like this (click to enlarge):

Essentially, it looks mostly like all other image lists in JungleDragon. Difference number one is that it is much more simple, it rids of all image details and actions, only the title and image is shown. The other difference is that it frames images that you are allowed to tag as orange. In this screenshot it has framed all images, because I have administrator rights. Normal users will see the orange frame if:

• They own the image
• They have earned the “Image moderation” power, allowing them to edit details of all images

Now, in normal image lists clicking on the image brings you to the image page. In the Untagged list, it brings up a popup for inline tagging:

And if we click “Save”, we are rewarded and the image we just tagged dissapears from the overview:

Like normal image edits, all history is kept so things can be undone by owners and there is a cap on how many edits one can do within the hour or day.

Why is this so important?

I should have created a video to demonstrate this approach. Tagging a lot of images like this is super easy, super fast and dare I say it, fun. It feels like a game. This means that even in a worse case scenario, where users hardly tag their images, it won’t be a royal pain for administrators to do it for them. Users happy, admins happy.

The Mechanical Turk in action

Last week I spent an entire week of leave on JungleDragon development.
This week I will be sharing the progress in little bits and pieces.
This week’s 4th update is about Tag history.

JungleDragon followers know that every action that a user makes is recorded in their karmalog. The resulting activity stream is displayed on the user’s profile. What is new is that tags now also have an activity stream called the tag history (click to enlarge):

The screenshot shows the tag “Animals”. Normally, you simple see the images inside this tag. However, on the screenshot we’ve opened the “History” tab. This tab shows the tag’s activity, including its creator, most valuable contributors and every imaged added to it as a historic entry.

I fully realize this is a nice-to-have feature. I think it can be of value mostly for enthusiasts who are fanatic about a particular topic.

Once again, please ignore the grey tags in the tag bar. This is subject to a future article.

Last week I spent an entire week of leave on JungleDragon development.
This week I will be sharing the progress in little bits and pieces.
This week’s 3rd update is about User display modes.This update is quite similar to yesterday’s update where I demonstrated tag display modes. Nevertheless, here is how it works…

JungleDragon has a dedicated page that allows users to find other users (click to enlarge):

From this page, users can browse, sort and search for users. On the right, one can see who they are following, if signed in. The users in the screenshot above are visualized as mini users, showing their avatar, name and level in the reputation system. This small display of users allows for a lot of entries on one page.

As of now, it is possible to view users in a secondary display mode: user cards. Here is the same list of users in the user card display mode:

In user card mode, more detail of a user is revealed:

• Avatar
• Level
• Class
• Username
• Summary of age, location, gender, if filled out by that user

As with tag display modes:

• the prefered display mode can be saved by members
• how many entries they see per page depends on reputation
• search supports search highlighting

All in all, JungleDragon allows users to view images, tags and users in one’s preferred display mode in one consistent, accessible experience. I hope.

Tomorrow I will talk about tag history. Stay tuned!

Last week I spent an entire week of leave on JungleDragon development. This week I will be sharing the progress in little bits and pieces. Today’s topic is Tag display modes.

Tags are visible across Jungledragon in various places. They are one of the primary ways to navigate content. The dedicated tags screen currently looks like this (click to enlarge):

Note: please do ignore the tags above the search bar, this is food for another forthcoming article.

This screen provides a way to browse, sort and search tags. As you can see, tags are visualized in a table and are all of equal size. What’s new is that JungleDragon now supports two additional display modes for tags. You will find these to the right of the sort bar.

The first new display mode for tags is “Cloud”. This does what you expect, it visualizes tags in different sizes based on tag popularity (click to enlarge):

And of course, sorting and searching works in this tag display mode too. Finally, the coolest and most powerful tag display mode is “Pictures” (click to enlarge):

I’m finding this last display mode to be very usable. For each tag, the most popular image within the tag is visualized as a thumb. Quite a distinguishing feature, especially when combined with type ahead searching.

As with image lists, members are able to save their preferred display mode for tags. From there on, they will always see tags in their preferred display mode. Like image display modes, tag display modes are integrated into the reputation engine: The better your reputation, the more you see per page. Of course you will see a good set of results even without being a member.

Finally, the Tags screen now also supports search highlighting (click to enlarge):

All in all the new tags screen provides a powerful blend between browsing and searching for tags. Do you agree?

Tomorrow I will have a similar post, this time talking about user display modes.

As previously announced, I’m currently working on the JungleDragon homepage. The current status is that it is nearing completion. Have a look at the screenshot below (click to enlarge):

Here’s whats going on:

• The homepage shows images that are recently made popular.
• A popular image is not just determined by its sorting. It is an official event. A scheduled service checks recent image behavior and when conditions are met, it is made popular. This also leads to a karma event and thus a reward for the image owner.
• As discussed earlier, the homepage is set up Digg-style, however note that the first image in the list is shown large.
• You can directly vote from the homepage, unless it is your own image or when you have already voted.
• Each entry has basic image details visible. Note the mini users, combing their avatar and level.
• The popular tab has 4 different filters to check for recent popular images, but also images popular in the last week, month and all time.
• The second tab is called “fresh”. It shows the newest uploaded images, regardless of popularity.
• The third tab is called “surprise”. This showcases a set of random images, no matter their date or popularity.
• The right column shows a general JungleDragon intro, followed by the most popular tags and users.
• The right column is context sensitive. If you switch to the “fresh” tab, you will get fresh tags and users. Likewise for the “surprise” tab.

You like?

The devil is in the details. That’s how I try to approach designing JungleDragon. One such detail is the “newness” indicator. The newsness indicator is a simple image decoration that is layed on top of all images that are newer than x seconds old (I can configure this, currently it is set to 1 day). The overlay sits in the corner, works on all image formats and is reasonably unintruisive:

Although this is a tiny design detail, it is actually quite useful. No matter the context of your image browsing, you can immediately distinguish new content from older content, whilst not wasting screen estate.

How it’s made

There is no need for me to explain in detail how this effect is accomplished, somebody else did it far better than I ever could: Decorate your images with CSS. The short version of that article:

• Create the image you would like to overlay (most likely a png with alpha channel)
• Include its markup below the image you would like to decorate
• Set the positioning of the parent (most likely an a href link) to relative
• Set the positioning of the decoration image to absolute and position it into place

Cool, eh?

JungleDragon news is slow recently. Rest assured, I’m pushing the project forward as much as I can. I am currently working on a cluster of features that cost me a lot of time and are hard to discuss before fully done. Hereby a quick teaser (click to enlarge):

You’re looking at an early implementation of the JungleDragon homepage:

• As you can see, I have chosen for a Digg-like approach. The reason for this design is that I find that approach to be a proven solution for the showcasing of both new and popular content.
• We’re currently looking at the upcoming tab, showing new images not yet made popular. Notice the detail in the vote control, user reputation and “new” indicator.
• There is also a “popular” tab. Images become popular when they meet certain conditions. This is an “official” event, a scheduled service checks for new popular images and promotes them to the homepage. If your image becomes popular, karma is rewarded to you.
• The third tab, called “random”, is a little gimmick that serves a random list of images. There’s a button “surprise me again” to serve a new random list. A fun and unexpected way to find content, no matter their popularity or age.
• In the right sidebar you see a simple introduction block and a block with the most popular tags. This will be extended with recent user activity and/or most popular users, and perhaps a “tips” console.
• Although users cannot vote down images (unlike comments), I will develop a way to report images. This will be useful to report spam, duplicates, copyright infringements, etc.

It is going to take me several weeks to implement this cluster of functionality. Yet, when done, I will be close to a first beta testing program.

I hope you’re not getting tired of my JungleDragon updates. Here are some random updates based on progress I made in the last week:

Scheduled deletes

Deleting an image, as simple as it appears to a user, is a complex operation in JungleDragon. The KarmaEngine needs to calculate how much karma points to do undo based on votes, comments, votes on comments, favorites, moderations and restores. The karma log of all users who interacted with the image need to be updated, since the image is now gone. Various related database rows need to be deleted. Finally, the actual images files need to be deleted, on local and/or on Amazon S3 depending on the storage mode of the image engine.

To make a long story short: This used to take a few seconds per image, which is way too long. It is now instant because the actual removal of files is moved to a scheduled process. Users will not notice this delayed processing because of the flag I am setting.

Related to deleting images is a new parameter to my image engine: soft deletion mode. When enabled, image records are deleted but image files are not.

Class promotions

A while ago I showed you the animations I implemented for karma events in JungleDragon:

• Karma reward
• Level promotion/demotion
• Class promotion/demotion

I’ve now made a special case for class promotions and demotions. This is a significant event in JungleDragon, since when you get upgraded to a new class, you get feature unlocks. I needed a way to better inform the user about his new capabilities. The result is as follow (click to enlarge):

This lightbox approach clearly draws the attention of the user, yet does not break his original navigation context.

Untagged content

Tags are an important way to structure and find content in JungleDragon. Therefore, I want to encourage users to tag their content. For one, I am rewarding users who tag content with karma points. The second part is that I draw attention to untagged content. Everywhere throughout JungleDragon where you see an untagged image, it has an orange indicator. There is even a seperate tab on the tags page for untagged content:

When you click on it, you simple see the image gallery of untagged content, as always giving you various ways to sort and change display modes (click to enlarge):

Whilst the orange acts as a subtle warning, I’m also giving positive feedback. When an image has comments, votes, tags, those blocks turn green. You can vary easily see the “health” of an image in overviews like this. My theory is that these indicators in combination with the reward engine will really boost the use of tagging. As for tag quality, I do have tricks for that as well, but it goes to far to explain it here.

User votes

A simple new functionality is that you can see from a user profile on what images the user voted. This works as expected: You see an image gallery like shown before, this time showing the images voted on:

Announcing JungleDragon themes

Many photo enthusiasts claim that photos are best viewed on a dark background. Initially, I had an idea to implementa light switch; when clicking on it, the background goes dark, similar to for example Adobe Lightroom. I have now extended that idea: I’m going to provide a set of themes, not just light and dark. To stay within the JungleDragon theme (nature), the themes will be associated with natural environments: Desert, Polar, Jungle, Caves, etc. I will be hiring an illustrator to create these. The long term strategy is to provide a few for all users, and to offer a few exclusive themes linked to the reputation model.

That’s all folks. You could say that I’m in the middle of a JungleDragon development rush. As always I really look forward to your feedback.