FERDY CHRISTANT - JUL 28, 2014 (11:22:09 PM)
(warning: this post contains many screenshots, it may load slowly)
Weird title, right? Ambient glass, what is that all about? I'll get to that in a minute. First, I'd like to explain how I develop new features and improvements for JungleDragon. It's stupidly simple, really. As a heavy user of JungleDragon myself, I am exposed to it a lot, so I tend to notice annoyances, incomplete features or holes in the system. Combined with community feedback there's no shortage of improvement ideas.
Next, I put those improvements on a list and give them a priority, which I regularly change. I allow myself time to think through each idea until it is mature. Once mature, I know exactly what to build and how to build it. It's only a matter of executing it then. It is a rational way of doing things: think, plan, do.
Every once in a while though, I like to be irrational. To build things I didn't plan for, to just go with my creative flow and see where I end up with. The last time I did this for JungleDragon we ended up with the daylight planner.I never planned for it, nor did I think of how to do it, it just arrived out of thin air.
Today I am sharing the result of another completely irrational feature. It can be seen as a worthless design gimmick or as a very elegant design enhancement, I will let you be the judge. Either way, it is a little out of the ordinary.
JungleDragon full screen interactions
Let's get to the point. This post concerns JungleDragon's fullscreen interactions, which are:
- Viewing a single photo fullscreen (as large as your viewport/device is)
- Slideshow: viewing a series of photos fullscreen
- Video: watching an embedded video (Youtube, Vimeo) fullscreen
I'll explain my changes to those interactions in three steps:
- Removing complexity
- Applying a more subtle new design (glass)
- Doing something crazy with backgrounds
Before getting to the good stuff, we have first have to go through the bad stuff. The way the fullscreen interactions were designed before this update was powerful, yet overly complex.
The primary objective of these fullscreen interactions is to show content as large as possible. However, over time I added a ton of other functions to these fullscreen interactions. For example, when viewing a photo fullscreen, you could still view a species panel, vote/favorite the photo or share it. All of those features are already available on the normal photo page (the non-fullscreen one) and I was essentially duplicating them. Not just duplicating them, re-implementing them in a different way since the user interface is different. Given that those added features also have to work on a series of images as well as on any device, things were getting extremely complicated and hard to manage.
Because of this, I took the decision to simplify the fullscreen interactions, by removing the following:
- The info panel (which shows species info, the photo title, description, tags, lists to which the photo was added and EXIF info) is gone.
- Voting, favoriting and sharing a photo from the fullscreen viewer is gone.
- On the fullscreen video player, the related videos and species info is gone.
Again, all of these features are still there on their normal pages (non full-screen), they are only removed from the fullscreen pages. Therefore, the fullscreen interactions are reduced to just doing one thing right: showing content as large as possible.
Some may not agree with this decision, but I hope they understand that the cost of complexity was high whilst the benefits were minor. A proper term for this is "unrewarded complexity".
Applying a more subtle new design (glass)
After removing redundant features, I found myself with a simpler fullscreen image and video viewer. Next, I applied some design changes to the few elements remaining. I call it "glass", because it involves the use of transparency and very fine and thin elements. Here's an example on a large desktop:
(click to enlarge)
Above you can see the "glass" theme in action on a large desktop screen. Both the top bar and the footer (containing the image title and credits) are transparent, yet not entirely. There's both a small lighten as well as a shadow effect, blending in with the image. The top bar contains only two buttons: "load original" and "close". "Load original" does what it says, it loads the highest resolution possible, if the photo owner has it enabled. It has a label and icon that is much more clear than before.
Here's a 2nd example of "glass" in action, this time on a smartphone in landscape mode:
Again you can see the top bar and the title blending in with the image. So that is the result of removing fluff and adding the glass theme to the fullscreen image viewer. Nothing crazy so far, just simplicity and elegance.
Doing something crazy with backgrounds
Now it is time for the design gimmick. The above 2 screenshots are not entirely fair. They are made in ideal circumstances where your viewport matches exactly the orientation and aspect ratio of the photo. Very often this is not the case, and you will either have room on the side or above and below the image.
That empty room is filled with a background color. Before this update, it was a shaded very dark grey color with a noise pattern applied to it. This is a solid and classic choice, as photos on a dark background tend to do well. It is pleasant viewing.
Yet I wanted to do something different to that background. I want that background to mimic the actual content of the photo that lies on top of it. I have tried this before, and failed. My earlier approach had many problems:
- The actual effect was often ugly, it was hit and miss
- It was terribly slow
- It only worked in a few browsers
More than a year later, I gave it another try using a totally different approach. And I believe it works now. It works quite well actually. Let's put in simple terms what I am doing: rather than setting a dark solid color as a background in the fullscreen viewer, that color is now dynamic. The color is decided by the dominant/average color of the actual image you are viewing, which is automatically calculated. Next, that calculated color is set as the background. However, not just as a pure solid color, an additional layer applies a gradient to it as well as semi-transparent "dragon skin" pattern.
If that still doesn't make sense, let's just have a look at it. I have an overwhelming amount of examples, simply because I find the effect to be so cool. Let's go:
(click to enlarge)
See above. This reedbuck in Tanzania isn't surrounded by a dull black background, instead it surrouned by a safari-like green, the result of automatically calculating the average color of the scene.
See above. This creepy wolf spider as seen on a small tablet in portrait mode is not surrounded by black, instead it is surrouned by a blue-ish cold dark color, making the total experience even creepier. The atmosphere of the scene is extended beyond the photo, which is exactly the point of this feature.
(click to enlarge)
This tiny jumping spider in its green-dominated world will naturally get a greenish background. But wait, it can get even cooler:
See above. In Safari on iOS, not only will the background extend the photo's atmosphere, the entire browser will get the atmosphere, since the iOS browser controls happen to be transparent :)
(click to enlarge)
See above. These leopard soul mates will get an Africa-themed background. Automatically.
(click to enlarge)
See above. In this uninviting scene, 2 male lions observe a hippo skull from a distance. It is raw black and white photography, which automatically get's an emotionless grey as a background.
See above. This dreamy autumn macro scene gets a fitting background color. Notice how neatly the glass theme fits in as well.
(click to enlarge)
See above. We're still in autumn, but this time the scene is darker and has more harsh light. The alghoritm automatically selected a dark earth color as the background.
(click to enlarge)
See above. This mysterious scene is viewed on a giant resolution of 2560 x 1440 pixels. As it is a cool and dark scene, a cold dark black/blue is automatically set as the background.
(click to enlarge)
See above. Viewing a portrait photo on a wide screen leaves lots of empty space on the sides. Luckily, that empty space is well toned to match the Africa style color of the actual photo.
(click to enlarge)
See above. Possibly my favorite example of this feature in action. The scene cannot seem to decide between being overly green or blue, so the background is an ideal mixture of both.
See above. An ostrich as seen on a large smartphone in portrait mode, is enriched with a background that slowly goes from light brown to darker brown.
(click to enlarge)
See above. Evil Wildebeest meets Glass meets Africa. It's almost as if the alghoritm can "feel" the scene.
Sorry for the many examples, I just want to showcase the dynamics of the feature and how well it can work. This brings the question: are these just exceptional examples of cases where it just happens to work really well?
Not really. In my testing of a few hundred images, the effect ranges between slightly enhancing to strongly enhancing. The good news is that in my experience, even in the worst case scenario it does not take away from the experience. So worst case, the effect is kind of neutral or slightly enhancing, and in many cases it will be strongly enhancing. It all depends on the actual photo, and of course our subjective opinion.
We're not done yet. Besides the single image fullscreen viewer, we also have a fullscreen slideshow player. For now, I have decided to not apply the ambient effect there, as I figure it would be distracting to see the background changing as you navigate through a set of images. However, I did apply the "glass" theme to the slideshow player as well:
(click to enlarge)
See above. Note the new glass effect on the bottom panel, blending in with the image. Another small change is the "slide" counter being moved to the right.
(click to enlarge)
See above. A 2nd example of a slideshow, this time with thumbs expanded. Excessive glow effects are gone and replaced with fine thin borders.
See above. Even the loading indicator (which is animated) has the glassy theme applied to it.
(click to enlarge)
Another small change to the slideshow player: when pressing "play", all controls will be hidden as before, yet in the top corner there is now a spinning gear indicating that the slideshow is in fact playing, this wasn't always clear before.
Finally we arrive at the 3rd and last fullscreen interaction: watching embedded videos. Although not used often, in JungleDragon you can associate JungleDragon species records with Youtube and Vimeo videos. Next, you can play those videos directly inside JungleDragon, using a fullscreen viewer.
As said before, I removed all content except for the actual video from this screen. In addition, I even beat Youtube into submission by removing virtually every element that is possible, except for the player control (which I themed) and ads (which I can't stop from happening).
(click to enlarge)
See above. This is a still image of a true power test. We're watching a 60 FPS 4K video of Costa Rica. Mind blown. Of course the power of the content comes from Youtube, all that remains of the JungleDragon design is the glassy header bar showing the logo and a close button.
See above. A Vimeo video of a cheetah running captured using a high speed camera, as shown on a smartphone using JungleDragon's video player.
Back to ambient backgrounds
Although I do not want to go into too much detail regarding the technical working of the ambient background feature demonstrated so excessively earlier in the post, there are some notes I must make on how it works.
Basically, I am storing the calculated background color as part of the image in my database. However, it needs to be calculated once, and this will only work in a modern browser (modern IE, Chrome, Opera, Firefox). Once it is calculated, the background color for that image will forever be known, and will display for all browsers.
So here is the experience based on different scenarios:
Somebody has already opened the image fullscreen in a capable browser.
Great. No matter which browser you use, the ambient background will show, as it has already been calculated.
You have a capable browser and you are the first to open the image fullscreen
In this situation, the ambient color will be calculated as a one time activity. The screen will starts out with the default dark background, yet after about 3 seconds, it will switch to the calculated color. And now, it will forever be set. Opening the image again will instantly set the correct background color, no matter your choice of browser.
You have an "incapable" or old browser, and the background color has not yet been calculated
Your browser will not be able to calculate the ambient color, so in this case we'll have to wait for a visit to the image by somebody using a modern browser. This is not a disaster, as the default dark background that you will see is far from ugly.
All in all, this feature basically is deploying itself, by visitors opening images. As over 90% of JungleDragon users have a capable browsers, I expect that soon we can enjoy many ambient backgrounds.
Phew, this was a long post. All to explain a crazy feature. With this big update, I aimed to simpliy full screen interactions at JungleDragon and to make them more elegant and free of clutter. At the same time, I am experimenting with an unusual design choice, that of ambient backgrounds. I like unusual, the question is...do you?
FERDY CHRISTANT - JUL 23, 2014 (06:57:27 PM)
I'm finally enjoying a much-needed week of leave. In between swimming and the BBQ, the weather is great currently in the Netherlands, I've been working on the JungleDragon todo list. That list is never empty, yet I managed to clear many items in the last 3 days, which I'll now present as a single update. There's a bit of everything: new features, bug fixes, UI tweaks, and more. Let's check it out:
Header UI tweak
With the summer games banner and the green on green sub header, I found the header of the site to become a bit too distracting, therefore I simplified it and restored it to its original brown color:
(this concerns the sub header, shown in light brown)
Improved homepage footer
The homepage contains a special footer not shown on other pages. It displays a species browser panel as well as a message about our donation policy. The previous design was a bit harsh, therefore I cleaned up both areas and combined them into a single, much more subtle design:
More dynamic "popular" photos
When you visit the "popular photos" page, you can further refine the popularity period (alltime, last month, last week, today). However, the default was "alltime". The alltime popular photos don't change much, therefore I made this page more dynamic by changing the default to "last month":
You can of course continue to select any period, I only changed the default choice.
A new notification: species identification
I've implemented a brand-new notification. This notification will be send to you when somebody identifies a species on your photo, that person not being you. Here's an example of such an email:
As you can see, the email mentions who identified which species on which of your photos. The green block is optional, and will only be shown when the species was a species intro (first photo of this species on the site). Finally, there is a general block that explains how and why to identify species.
This seems a minor change, but I consider it quite important. Here's why:
- Many new users are not instantly familiar with species identification, this hopefully educates them.
- It makes visible the hard work of moderators doing a job that in most cases the photo owner should have done themselves (unless the photo owner really did not know the species, which is possible)
There's also a slight change in the general email footer. The Twitter link rendering is fixed, and a Google+ link is added.
Maps with labels
Again a subtle change with a large impact. All maps on JungleDragon now have labels enabled, which means country borders, names and major places are visible:
Note also the new "Delete" button, which deletes the geotag info of the photo. This option is only available for administrators, typically to delete accidental geotags (typically set to 0,0 - which is in the middle of the ocean).
Public tags, personal tags, why not both?
On sites like Flickr, people organize photos in many personal ways, such as albums and sets. JungleDragon is intentionally not designed that way. We consider the photo pool to be shared, after which the community as a whole tries to bring structure in a large global set. We organize the total set of photos in a public way, not in a private way.
Tags are one way to organize JungleDragon photos, and they are heavily used and very flexible. Today I am announcing a feature that allows for the best of both worlds: public and personal photo organization use the same single set of tags. Here's how this works...
This tag is used by multiple users, which is exactly how it should be. Now, note how each user's profile also has a tags overview, which lists the tags used by the user. As an example, here's my overview. Before, if you would click a tag on a user's profile, it would take you to all photos within that tag. As of now, it will only show photos within the tag uploaded by that user specifically:
See above. We're looking at the same tag "Africa", but this time we followed it from my user profile. We now see only the subset of photos within that tag belonging to me.
This is again a simple and subtle change, but quite powerful when you think of it. You can now split your personal photos in any way you see fit, using the power of tags, whilst we're still using a public shared set of said tags. To illustrate possible use, before I could not answer the following questions in JungleDragon:
- Show me all photos you took during your trip to [country]
- Show me all your macro photos
- Show me all your fungi photos
Now, we can. And it takes zero additional effort in case you were already tagging things. Note that JungleDragon also auto tags species and locations if you set them on your photos. On top of that, I recommend using tags in your image management program. Personally, I'm a heavy user of hierarchical tags in Adobe Lightroom. Combined with JungleDragon's auto-tagging, it basically means that beyond Lightroom, you don't ever have to tag anything inside JungleDragon itself, yet still have a very detailed, structured and powerful tagging system.
Some of JungleDragon's pages did not yet have the sub header (in light brown), so I added them to the help section, medals screen, and class screens. Here's an example from the class screen:
It's a minor tweak, but it makes the site more consistent.
On top of the above features and improvements, I also fixed several bugs and made other small improvements:
- Admin feature: in my admin panel, I can now see the number of newsletter subscribers (the newsletter is new since last week). In addition, I fixed the wrong species counter there.
- Bug fix: the 404 page no longer shows double headers
- Bug fix: On the "unidentified photos" overview, the photo count did not match the actual photos. This is now fixed.
- Speed improvement: I'm now serving the site's CSS and JS using gzip, which brings a small speed improvement.
- The various "more" buttons are now more explicitly labelled. They will say "more photos..", "more species..", etc.
- I made a few small SEO improvements
This update is a bit messy, as it addresses many items at the same time. Still, I'm happy in that it clears so much of my todo list. I hope you find the fixes and improvements useful.
FERDY CHRISTANT - JUL 18, 2014 (12:15:41 PM)
It's been well over 2 months since I last posted any JungleDragon development news, but here's a brand new feature I'm announcing today: a weekly newsletter, called "JungleDragon Highlights". In this post I will explain all aspects of this newsletter, including the why, how, what, and what it looks like.
Why a newsletter?
I know, when hearing the term "newsletter", few will jump for joy. Email has a bad vibe and newsletter emails even more so. Still, hear me out.
Despite the bad vibe, email has proven time and time again to be the most effective way to engage with community members, far surpassing alternatives such as social networks. I've experienced this also within JungleDragon. Two years ago, the email mechanism of JungleDragon was down for 3 full days. As a result, traffic plummeted. That's how important email notifications are.
So why a weekly newsletter specifically? The idea is to provide a "summary" service to members both new and old. At a glance, members are able to see a summary of the week at JungleDragon, saving them time but also hopefully triggering revisits. I believe it is useful, and those that disagree are unsubscribed in a single click.
Opt-in or opt-out?
Here comes the tricky question: should members automatically be subscribed to the newsletter and unsubscribe when they don't want it, or should they explicitly opt-in to wanting it?
Opt-in is the friendliest approach, however, I have still decided to go opt-out on this one. The reason is not that I am evil, wanting to email you things you did not ask for. I am fine with either decision (subscribe/unsubscribe), it is yours to make. The problem is that I don't have a decision. After signing up, members rarely ever change their settings (profile settings). That means that for 90% of all members, I am unsure of whether they want it. And I am sure that most will never make the decision explicitly.
With very few members ever making an explicit decision, if I would default it to "NO", it would mean that effectively the newsletter will be received by almost nobody. I believe it is useful enough to be seen by most members, therefore, I have set the default to "YES".
Summarizing, here is the situation:
- For new members it is automatically enabled
- For existing members it is not enabled by default, however:
- I am considering enabling it for the "top 100", to get an initial audience.
- They can manually enable it in their profile->notification settings
- Unsubscribing is a single click
Needless to say, I will monitor these choices.
How does it work?
Let's get to it, and see how the newsletter works. Every Friday at 6PM CET, a script runs automatically that will generate the initial part of the newsletter. This part will not yet be sent out to subscribers, instead the administrator (me) will get an email that a new newsletter is ready:
Next, as an administrator I open the newsletter edit form:
In this form, I can craft a custom subject and intro message for this edition of the newsletter. In the bottom panel, I can preview the fixed part of the newsletter that the system generated automatically, getting an idea of what newsletter subscribers will get to see, before actually sending it out.
Once I am done with my edits, placing the newsletter in "ready to sent", I can actually send out the newsletter. This process will create emails in JungleDragon's "outbox", which will then be picked up within a few minutes, and sent out to recipients.
The above publishing and sending process means that the weekly newsletter will not always arrive at the exact same time, since it depends on my edits. Still, in most weeks you should receive it friday evening (CET).
The actual newsletter
Let's see what the actual newsletter looks like. I have tested it in the following popular email clients:
|Gmail|| Exactly as designed
| Yahoo! mail
|| As designed, tiny padding issue
|Outlook.com|| Exactly as designed
| Android Gmail app
|| Exactly as designed
| iOS mail
|| Exactly as designed
| Outlook 2010/2013
|| Some table width issues, yet acceptable
At the start of the email, there is an instruction message. As many email clients disable image downloads by default, the message asks that you enable it for jungledragon.com in your mail client. That same instruction message also shows a link to view the newsletter online, so in any case there is an issue (formatting, or images not downloaded), there is a robust fallback. Here's an email newsletter shown online:
I'll now continue to break the newsletter into parts and explain their purpose:
The first block starts with a branding header, making it clear from which site this newsletter is. Next, is a custom subject (green) and a custom intro message. These I will write manually each week. This blocks provides an attention-grabbing summary of the week at JungleDragon.
The second blocks is an optional block. If any new entries have been made in the "news" forum in the last week, they will appear here, up to a maximum of 5. Therefore, at a glance you get to see important announcements, such as site changes and new contests arriving. If no such news has been published in the prior 7 days, this block will simply not appear.
This also is a great improvement for myself as an administrator, as before I had virtually no way to broadcast key messages to all (or most) members.
Up next is a grid of the 16 most popular photos of the last 7 days, rated by karma points. Needless to say, clicking such photo will take you to that photo at JungleDragon.This block is one of the key features of the newsletter, since in mere seconds you simply see the best photos of the week.
Up next is the species block, which shows the 12 most recently introduced species at JungleDragon. Each new species is a row with the species photo, followed by its common name, binomial name, and an extract of its description.
This block is not strictly tied to a week. In weeks where less than 12 new species have been introduced, some species of the prior week may be repeated. As said, it shows the 12 most recent species, not tied to any particular week.
The next and final block is static. It is basically a feature panel, advertising some powerful JungleDragon features that are often not well known amongst new members.
Finally, we arrive at the unsubscribe link:
I'm not hiding it in small text, nor do I bother you with surveys. Just click it to unsubscribe. You don't even have to be signed in:
The unsubscribe screen confirms that you did indeed unsubscribe and apologizes for any inconvenience caused.
Should you change your mind later on, you can always re-enable your subscription from your profile's notification settings, which holds all notifications:
(it is the last option in the list)
When can I expect my first email newsletter?
This feature has been deployed to JungleDragon, so the code is ready. However, the automatic processs still needs to be scheduled at the time of this writing. I'm working with my host on that. If I'm lucky, it will be scheduled today, after which you will receive the first newsletter this weekend, if subscribed. If the scheduling will be in place later, it means we'll have to wait another week before seeing the 1st edition.
Meanwhile, existing members (for whom it currently is not enabled) can already enable the subscription from their profile's notification settings, as described above.
Newsletters are perhaps not the most sexy feature, but I am glad that JungleDragon finally has one. It is a virtually effortless process and I hope and believe that it can provide a useful service and more revisits. Let's see whether members share this idea, time will tell :)
FERDY CHRISTANT - JUN 30, 2014 (09:54:47 PM)
The JungleDragon Summer Games are 3 contests in a row, during June, July and August. Each contest has a single prize of 100$ for the best photo, awarded by jury. Today, the winner of the June contest was announced, the image is here (not embedded as the author does not allow it):
With over a 1,000 images shared by dozens of new members, the June contest has been succesful, leading to many high quality contributions. As usual, there's also a small portion of participants not bothering to read the rules, sharing images incorrectly (offtopic, or poorly described). This is an issue addressed by moderation, but I'm also thinking of how to clarify the "proper way" better.
The summer games continue, with the July contest open as of now. If you're interested, and haven't signed up yet, you can do so here.
FERDY CHRISTANT - JUN 14, 2014 (01:11:38 PM)