JungleDragon Alpha rev4 deployed!
August 27, 2010
This is to announce that JungleDragon Alpha revision 4 is now deployed on the staging environment. If you are a JungleDragon test user, please read the below carefully as it may require some small action on your behalf, for example clearing your cookies or refreshing your cache.
This release contains a few small usability improvements, but is mostly a technical improvement. Below are the changes:
Better thumb hovers
In the previous release, I improved the homepage by showing more images and less image metadata. The solution is to visualize metadata only when hovering a thumbnail. This has been improved further, below is an image without and with hover:
I plan to deploy this way of visualizing thumbs to the other image lists as well in a later release.
Image voting made more clear
In previous releases, the vote up button on the image page was not clear enough, as it only showed a small green vote block with an up icon. This call-to-action is now more emphasized by including the “Vote” text:
Pagination usability improvement
JungleDragon uses pagination for large lists, this works as on other sites, using page numbers that you can click through. The change that I now made only shows a big “More” link on the first page, since you pretty much always want to go to the next page from there. On all subsequent pages, normal number-based pagination is used.
Page rename
I was trying to be cute by calling JungleDragon terms and conditions the “Law of the Jungle”. It is now simply called “Terms and conditions” to avoid confusion.
Hierarchical tag browsing
JungleDragon supports a unique and innovative feature: hierarchical tags. It combines the best of free format tagging and a strict taxonomy of categories. However, the way this is visualized to users needs a lot of improvement, therefore I have temporary disabled the visual part. This part will be redesigned in a later release and then re-enabled.
404 fixed for comment voting
If you were not signed in and tried to vote up a comment, after signing in it would throw a 404. Fixed.
Configurable statistics tracking
I can now configure the Google tracking code for statistics per JungleDragon environment.
Session management drastically improved
JungleDragon uses the CodeIgniter Session setup to manage sessions. It works as follow: You get a client-side cookie that stores a unique session id, your IP and your user-agent. The cookie is encrypted and recycled every x seconds to avoid session theft. The actual session data is stored in a database table.
I had a lot of problems with duplicate entries in the session table. These problems are now fixed, if you are interested in the technical details, go here.
Important: As a result of this change, I had to clear all sessions in the database. If you had a persistent session, it is now lost. Please clear your cookies (or only the one for JungleDragon) and sign in again.
Avatar upload feature dropped!
Before, I gave you the option to use an avatar from gravatar.com or to upload an avatar image to JungleDragon. My avatar upload feature was of course not as good as the gravatar service and it does not make sense to spend a lot of development time on it. Therefore, I decided to drop the avatar upload feature. Your avatar will be picked up from Gravatar.com if you have an avatar configured there for the email address you use for JungleDragon. If you do not have it configured, you get the default avatar. If you uploaded an avatar to JungleDragon, sorry, but it is gone. Use the gravatar service instead.
Javascript improvements
Another technical improvement. I consolidated a lot of javascript libraries so that I make less HTTP requests now. They are loaded at the bottom now to further speed things up. Please clear your cache (shift+refresh) to get the latest javascript!
Concluding
The last 4 revisions have gradually improved JungleDragon based on test and concept feedback. Next week I will discuss how I plan to go from here. Stay tuned!
JungleDragon Alpha rev3: homepage redesign
August 27, 2010
JungleDragon Alpha revision 3 is deployed as of now at http://staging.jungledragon.com
Where revision 1 and 2 fixed and improved dozens of things reported by testers, this release does one thing only: it repurposes the homepage, the entry point of JungleDragon. Here is a somewhat outdated screenshot of the previous homepage:
Many of you recognize this style of homepage from sites like Digg.com, and the many sites that follow this popular pattern. It shows a stream of content on which users can vote. The content is described using a title, a truncated description and other metadata such as the submitter of the post. Finally, there is the possibility to directly vote on an entry.
I’ve come to realize that such a design does not make sense for a photo site like JungleDragon:
- It takes up a lot of vertical space, which means scrolling. This does not match the common audience of JungleDragon who just want to view photos.
- The extra metadata of a photo takes up a lot of space, much more than the actual thumbnail itself. Although the metadata can be interesting, it should not dominate the layout so much. Not on the homepage.
- Allowing for direct voting based on thumbnails allows for fairly superficial voting. It may increase the quantity of votes, but not the quality. If a user is lured into a thumb, I imagine they click on it to see the full size. From there, they can vote on it if they want to.
In an act of simplicity, the redesigned homepage now looks like this:
Much cleaner and simpler eh? A strong emphasis on the photos and much less scrolling. The top image is still large and then followed by a grid of images. The number of rows in the grid depend on your reputation. It starts with 5 rows and could grow to 11 rows based on your class in the food chain. Note thatthe screenshot still shows 3 rows.
The image metadata is not completely gone; upon hovering a thumbnail, a quick inline box shows basic information:
The new homepage: less nonsense, more photo viewing. Agree?
Watch it live at http://staging.jungledragon.com
JungleDragon reputation classes improved
June 28, 2010
JungleDragon has a sophisticated reputation system that works based on karma credits. The amount of karma credits you earn determines your class in the foodchain. A class, in turn, also give you an advantage over lesser classes:
- It determines your voting influence (Influence)
- It determines your defense against negative comments (Defense)
- It determines how much content you see on a single page (Sight)
In addition, some classes give you special abilities, such as:
- The ability to view images in their original size
- A larger upload quota
- The ability to edit image details of images uploaded by others (social image editing)
- The ability to edit tag metadata for special tags (social tag editing)
All of this is of course next to the visibility effect of a good reputation position in the community. Anyway, so far I have visualized such class abilities like this (partial screenshot highlighting the relevant area):
Fairly descriptive, but not attractive. My worry is that it will not be easily understood by end user. Hence, the following improvement:
There are now clear, color-coded progress bars to indicate the strenghts of each class, decorated with icons. Hovering one will explain what it means using a tooltip. Next to class strengths, class abilities are now clearly seperated and called “Powers”. The progress bars animate into their final position, which is a nice effect to see. I hope this visualization makes more sense to users, but only time will tell.
The above screenshot is taken from a dedicated screen that shows classes. However, a user’s class is visualized pretty much everywhere a user is mentioned, so I made the above visualization consistent. For example, here you can see how it is embedded on a user profile (click to enlarge):
The right sidebar shows the user’s reputation quite prominently. This will not only be a trigger to the current users, but also to other users viewing this profile to learn about the reputation system. While we’re at the user profile screenshot, there are two other visual changes I made:
- Notice the country flag on the top right. When a user fills out his country as part of his profile (optional), his country flag will show there. I currently support the flags of roughly 240 countries.
- The user profile holds quite a lot of content, divided into several tabs. As you can see, these tabs are now organized into sections of related options.
You like?
JungleDragon now supports Creative Commons
June 25, 2010
Ever since I started developing JungleDragon, I had some legal aspects in mind, particularly image licenses. You see, JungleDragon will be publicly hosting images posted by users and that means that copyright issues are inevitable. Up until now, I had a very simple implementation where users have to select the license that applies to the image they are uploading.
However, I noticed on other image sharing platforms that such a thing is never asked of users. The reason is quite simple. The legal consensus is that when you upload an image you own to a public website it is automatically copyrighted (all rights reserved). Other users need to ask permission to use that image outside of that website.
Therefore, I adjusted the upload form. The license selection field is gone and any image you upload is automatically marked as copyrighted. Note that this does not stop any user from downloading and distributing the actual image. It is technically not possible to do so. Besides, JungleDragon is a photo community, not a personal photo storage service.
With this change, common users that upload and view images are not “bothered” with the legal aspect of an image, which is great. However, it is still possible for an image owner to explicitly set the license of an image in a dedicated screen called Edit license:
When users find the default license (all rights reserved) not suitable, they can overrule it here. They can choose between All rights reserved, Some rights reserved (showing the different Creative Commons licenses) and No rights reserved (Public domain). Upon hovering each choice, a green tooltip appears explaining the license conditions. With the checkbox at the bottom, one can indicate that they want this license choice to apply to any future images that he or she uploads. There is an integration with the reward system too, the more open your license, the more karma points you get.
Once again, this license choice has no effect at all within JungleDragon. The license only indicates what you can do with the image outside of JungleDragon (redistribution). Whether you settle for the default or choose to overrule the license, JungleDragon will display the applicable license on image pages like so:
It displays the official names and logos of real-word licenses. Clicking through on this license gives you all the details. This set of changes brings a better usability, more control, and a better compliancy with copyright laws.
And then there is the legal aspect of what comes into JungleDragon. It is of course very much possible for a user to upload an image that he does not have permission for. For JungleDragon (me) it is pretty much impossible to find out whether that user owns that image or has a license for it. The recent YouTube versus Viacom trial showed that the legal consensus is that hosters have limited responsibility in such a matter, yet should offer a way for the rightful owners to take their content down. This has been implemented in JungleDragon already, it is called the Image report function:
The other legal requirement is obviously to respond in a timely manner to such reports.
All in all, I think these changes lead to a better legal compliancy and a better usability of JungleDragon. What do you think?
Tagging and the mechanical turk
June 12, 2010
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
JungleDragon tag history
June 12, 2010
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.
JungleDragon user display modes
June 12, 2010
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!
Introducing JungleDragon tag display modes
June 12, 2010
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.
JungleDragon homepage nearing completion
May 22, 2010
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?
JungleDragon image newness
May 14, 2010
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?
