Jungledragon Blog

You would think that since JungleDragon is about sharing images, the majority of my development work is in images. That’s not true though, the vast majority of my development work for JungleDragon evolves around users. Their account. Their content. Their interactions. Their friends. Their reputation.

The whole social glue of JungleDragon is scattered across the application, but for now I will focus on the user profile part. The user profile is the place where everything concerning a single user comes together. What I will show you in this screenshot tour is already the third version of how I implemented user profiles. I threw out many hours of work twice in a row because I was not satisfied with the result. Now I am, although some polishment still remains.

Your own profile

This is what your own profile looks like when you are logged in. Click to enlarge:

As you can see, it has somewhat of a portal design style. We’re currently looking at the home page of our own user profile, yet there are many other pages which can be accessed using the tabs. The left column shows the tab specific content. The right column is the user context, it summarizes basic data about the user and stays consistent no matter which tab you click. So all in all we have a dynamic left column, a static right column, and tabs to move between specific sections of the user profile.

User activity streams

Now, let’s talk about the most powerful aspect of user profiles in JungleDragon: activity streams. JungleDragon records all activity around any user, both active activities (you uploading an image, you commenting, voting, etc) and passive activities (another user voting on your image or comment, another user moderating your image, etc).

The benefit of having all this information is that we can then show an activity stream of a user as can be seen in the screenshot above. An activity stream is similar to a user profile on Twitter, it shows a list of user activities, newest first. With this in place, one can instantly see what a user or friend is up to. No need to click through all tabs to see if anything happened. Cool.

What I think is even more interesting is the way in which it is implemented. A few notable details:

• The karma graph. This is a chart like control that shows the reputation trend of this user. You have to see it to believe it really, you’d think it is Flash but it is plain Javascript with all kinds of cool hover tricks. In essence, this is a picture of how this user is doing, reputation wise.
• Activity context. A system like twitter only has one user event: posting a message, but JungleDragon has 20 user events. So how do you distinguish between these event types? Context is the answer. The image that you see on the left of each activity row represents the context. If you do something around a specific image, it will show that image, if you friend someone, it will show that user’s icon, if you get promoted to a higher class, it will show the new class image. And so on…
• The middle column of an activity row describes the event that took place along with links to the object or users in context, if applicable.
• The right column of an activity row show the karma reward associated with the event, consistent with the plot points in the chart.

All in all I think this makes for quite a rich activity stream. Important are also the differences in what you see. If you look at your own profile, you will see all active and passive events evolving around you. However, if you view a profile of another user, you only see their active events (click to enlarge):

Notice also that the karma chart is not visible for other users, for reasons too long to explain here.

Editing your profile

Let’s take a little break from activity streams and see how a user can edit their profile. The last tab, showing the administration icon toggles the user profile into edit mode. Alternatively, the “Manage your account” block can be used. Click to enlarge:

Profile editing is split into optimized screens for each task in order to keep it friendly. That’s why there are seperate screens for changing your avatar, email and password. The main profile edit screen is shown above. There is not much to tell about this screen other than some usability best practices I tried to follow:

• Large labels and input boxes
• Clear seperation between main action or cancelling
• Each field on a new line to increase readability (exception is the birthdate field, which is a composed field)
• Non-intrusive: only your username is required

An insignificant, but subtle little detail is what happens when you step back out of edit mode. Your “About” block will automatically assemble a natural language sentence that summarizes who you are:

See the sentence in light gray. Since none of the fields are required, it will list what it knows about you.

None of these details are designed by accident or because I think they are just cool. The whole user profile design is designed around how we socialize in real life:

• Who are you (user details)
• How are you (reputation)
• What do you do (activity stream)
• Who are your friends?

Friends

JungleDragon allows you to friend other users and on the “friends” tab of a user profile you can see who they are (click to enlarge):

Here you can see who your friends are. You can also delete individual friends or visit their profiles. Notice the little filter on top which allows you to sort the list of friends in different ways. Cute, but by far the most powerful aspect of the friends feature is the green button named “View friend activity” (click to enlarge):

This works just like the user activity streams we talked about before with two important differences:

• It is a stream that consists of multiple users, not just one. In a single screen you can see what your friends are up to
• Since this concerns multiple users, the left image shows the friend concerned, and the right image shows the context

Should I ever build a group function in JungleDragon, where a user can create a group of interest and others can join, I can easily make a group activity stream.

Tags

Through viewing a user tags, you can quickly see their interests (click to enlarge):

This screen does what it needs to do: show the list of tags, different ways to sort them, and of course a way to see how many images are in a tag.

Comments

From a user profile, one can see an overview of all comments made by that user:

A nice little touch is that it shows the image and image title to indicate the context of the comment. Other than that, I do not feel this is a really useful feature because most comments are part of a discussion with others. Nevertheless, it could be useful to see if a user makes meaningful comments or the opposite.

Community browsing

Most of the time, you will end up at a user’s profile through context. You see a beautiful image and notice that it was user “McCrock” who uploaded it. You click through to see what else he got. However, some users may also actively want to browse the community. For that, there is the Users screen (click to enlarge):

This single screen is powerful, it basically gives you access to the entire community:

• Sort and browse through users by popularity, name, registration age
• Type-ahead Ajax search if you know (part of) a user’s name
• The list of your friends on the right

Todo

• You may have noticed how I skipped over the “Images” and “Favorites” tabs in this blog post. The reason is that showing lists of images is still something I need to work on. It is a very important part of JungleDragon that I should implement right, and then reuse it at the many places where it is applicable.
• Users can use tags for their uploaded content, but they can also favorite tags. This is not yet implemented at the user profile level
• Subscribing. Both RSS and email subscriptions are not yet implemented in JungleDragon, but they will be important particularly for activity streams.

One final consideration that I have regarding user profiles is about user activity streams. I think the implementation is sophisticated, rich and somewhat original, but worry about its verbosity. It would be cool if a user can select which events to show on user profiles, but that would increase complexity for both the user and me, as an implementer.

I hope you made it all the way through this post, if so, I admire your courage. Implementing user profiles was hard. It was a ton of work, I changed my mind a lot and there are quite some complexities to it, more than you would think. I think I finally nailed it for the most part, but would like to know if you agree?

Note: I will tell you about how I created the karma chart in a dedicated blog post.