Shop Mobile More Submit  Join Login
About Professional Artist Senior Member rotaneMale/Austria Groups :icondevbug: devBUG
Eats Bugs For Breakfast
Recent Activity
Deviant for 13 Years
Core Member 'til Hell freezes over
Statistics 348 Deviations 14,928 Comments 155,423 Pageviews

Newest Deviations


Keep refreshing the page for a new random image (external link).
You have an awesome picture that you wanna share? Send it to me!
free countersfree counters


re: Watch 2.0

Journal Entry: Thu Nov 26, 2015, 5:30 AM


Alright, where to begin? I guess i'll start with talking about my future plans of deviantNAV v7 – a userstyle that many of you are using. Now that a new version is in the making (read about it here), my style won't be relevant much longer. Do i plan on updating it or not?

Here's the thing: My style never was about simply reverting it to the old version; it was about fixing what was (in my opinion) wrong with it. And i have voiced my thoughts about it in great detail here, amongst other places. With the new navbar, i don't see much that is wrong with it. Okay, there are a few things wrong with it, but it's mostly functionality, rather than aesthetics – so there's not much i can do. What i will do is talk about what's wrong:


… or rather "DeviantArt". Before i can talk about the 2 elephants in the room (the new navbar and the new Watch), i feel like i need to talk a little bit about deviantART in general. And simply by the way i write it (by using the old spelling) you can probably tell that i'm not liking the new way too much. And indeed, the way dA is headed, and has been heading for a while, does not terribly excite me. I mean, sure, i like the new logo, i also like the new brand strategy they unveiled last year, but still, it's not quite that deviantART that i've known for so long.

See, dA used to be more than just a website, more than a social network. It was a real special place at a special time. A place that was years ahead of all the trends and technologies that were around elswhere on the net. But eventually, somewhere along the way, the others started to catch up, while dA stagnated. Still, with all that heritage and culture, dA continued to stay relevant and interesting, and it continued to stay the place i liked to call my "home" on the internet. The problems began when dA tried to play catch-up and expand. Many little details were sacrificed or changed – details i've come to love over the years – in order to become "simpler", in order to attract more people. To me, however, it lost little of its complexity, but lost a lot of what made it unique.

Now, before you think this is going to be nothing more than a long-winded rant or me saying good-bye to this place; nope, i have no plans on leaving, and i didn't want to drag dA through the mud. I was merely trying to convey to you that dA is not "that place" for me anymore that it once was. As such, i'm not wowed by all these changes, because they don't bring me back to this feeling i once had, instead they bring dA closer to what everyone else has. Having said all that, this place is still special to me, that's why i'm still here, that's why i'm writing this. So, sorry for this rather bleak digression!

Flat design

A part of dA's new brand seems to be a focus on flat design. If you're not quite sure what this means, here's a little primer. Wikipedia defines flat design as…
"a style of interface design without any stylistic elements that give the illusion of three dimensions, and is focused on a minimalist use of simple elements, typography, and flat colors."

These days, you see it everywhere: iOS 7+, Windows 8+, even Android, and every other website does it, too. Usually you see it used with a lot of white, while dA chose a rather dark theme – and for that i truly applaud them!

So, is flat design bad? Not necessarily; the removal of visual fluff helps putting the content right in the centre after all. However, many designers are doing it wrong (or, not well enough):
"One of the biggest usability issues introduced by flat design is the lack of signifiers on clickable elements"

say the folks over at the Nielsen Norman Group, professionals in the field of usability (i highly recommend reading that article, by the way). In short, by removing established indicators and visual clues (such as borders, drop-shadows, and gradients), it becomes hard to tell what is what. And dA has fallen right into these traps. Not all traps, mind you, but some – dA has some excellent designers after all, and some of the implementations look really good, to be fair. Usability does suffer on some occasions, however.

If you want to know more about flat design (what it is, and some of its flaws), here are some great articles:
Flat Design by Katherine Barrow
Windows 8 — Disappointing Usability

Mixing flat with traditional

Before we (finally) dive into each part individually, let's address this one (big) gripe i have with the new design: It doesn't mix well with the rest of the site. Only the Watch feed is fully "modern" (for lack of a better term), on every other page these flat elements creep into the old design, and frankly, it looks garish. I know this is going be a temporal problem only, but still, right now, it is there.

Well, with that out of the way, let's dive in!

The Navbar

Removal of message count
By far the biggest issue i have with the new navbar is the removal of the detailed message count. That little (1) indicator is much too whimsical, and more importantly, much too fleeting. Too easy it is to just overlook it or to click it and then to forget you have messages waiting for you. I like to know all the time how many messages i have. The old splintered view was a godsend compared to this. Why is this so important to me? Well, it makes me feel connected. It makes me feel more in control. It makes me feel powerful.

The new indicator not only looks like a blatent rip-off of Facebook & co., but it also conveys a different feeling than the detailed counter did: "Messages aren't as important anymore." I think this is definitely the wrong message. Was it intentional? I doubt it, yet there it is.

:bug: Bug report
One tab of my Firefox always has the Notification Centre open. However, i have yet to see this (1) indicator on that specific page. I've seen it on other pages, but never there. I can only assume this is a bug…

Tiny links
Onto a bit of usability. Look at this screenshot:
tiny-hover by rotane
This grey square is the clickable area of a link. This is much too small. What's worse is that it doesn't even expand to the full height of the bar, resulting in an unsatisfying experience when you move your mouse from left to right. Many users won't be able to pin-point this specifically, but they'll feel that something is off.

Tiny text
Continuing with usability, or rather, accessability: The text underneath each icon is pretty small. It doesn't help that it's set in uppercase and letter spacing is rather compressed. Leaning back on my desktop, even i have a hard time reading it – and i'm only 35.

Too flat
Remember what i said above about flat design? Here's a great example: That dropdown blends in way too much with the background. The link in particular seems to be part of the page below:
dropdown-vanilla by rotane

How do we fix it? Easy, by adding a soft drop-shadow around it:
dropdown-shadow by rotane

While the navbar itself employs a rather tiny font, the dropdown has rather huge ones. Compared to its surroundings, it's like none of the fonts match. (Look at the screenshot above again.) The fact that it's different fonts (Calibre vs Verdana) doesn't help.

Continuing… Do you notice something here?
dropdown-inconsistencies by rotane
All 3 of these dropdowns look slightly different. 2 have a headline, 1 does not. The 2 headlines are also styled differently. Font styles and sizes inside the menus differ to various degrees. The corner radius differs (you can easily see this between the 2nd and 3rd). The final link on each dropdown differs in size, background colour, and font… For one who likes some sort of unity, this is a nightmare!

:bug: Bug report
Watch your z-index! While scrolling through the page that advertises the Mobile App, this banner is actually above the navbar:
navbar obscured by banner by rotane

The Watch

The biggest issue i'm having with the Watch: I don't see the need for it. It is very reminiscent of all the other major social networks (Tumblr, Facebook, Twitter), where you simply lean back and consume. Scrolling through tons of big thumbs is a joy indeed, and this is where the Watch works best. The dark theme puts the content in the foreground, which is excellent. But the content is also the problem here. I am one who likes to see what my friends are posting, but i only need to see it once. I will check in several times a day (i'm that invested in dA, yup), but i don't need to see it several times, and i certainly don't need to sit back and consume.

On the desktop, the Notification Centre fulfils my needs perfectly. Everthing that is in any way directed at me is in this one place. (Well, everything but Status updates.) Using the Watch only slows me down: I need to browse through the Deviations part, then i need to head over to the Posts part, and yet i still need to check in my Notification Centre for all the comments and replies. This is just too much work. (The new dropdown to the right also isn't helpful, as it forces me to process one comment/reply at a time, including one full page load for each, which is beyond combersome. On the plus side: It's unobtrusive and i don't have touse it, so i can easily ignore it. And i will.)

As an alternative "sit-back" place to see everything again, okay, sure, let's keep the Watch. But it is not for me. Unfortunately, by removing the message count and by moving the icon all the way to the right, you've essentially degraded the Notification Centre to a second class citizen.

High interaction cost
As i said, leaning back and consuming content works fine when you have lots of big thumbs. (So, i cannot wait until you roll out the new dark style to the other Browse pages!) But exploring all the other content (Journals, Status Updates, etc) doesn't work that well: You're forced to click on every post you want to read, but the thumbnail grid isn't actually all that inviting: The scanning from left-to-right and up-and-down is very tiring when you're just having text. (This is something the 1st iteration of the Watch Feed with its list-like view did better! That's also why Facebook gave up on the 2-column timeline, and that's why browsing Google+ is so uncomfortable.)

Too strong contrast
When i click on a thumb, it opens a modal, which is nice. What is not so nice is the effect when i click to view all comments. The dark theme suddenly switches to bright white, which stings – it looks really out of place.

Dear dA, if you wanna go dark, go dark, but please commit to it! This white bit only waters down the vision. (This also applies to the rather bright drop-downs of the navbar, btw.)

Too flat
I already mentioned earlier how the dropdowns blend in too much with the background. The same is true for this modal. Here is what it looks like now:
Modal-vanilla by rotane

And once we apply a soft shadow and dim the background a bit more, it sticks out way better:
Modal-shadow by rotane
(Click on the images to see bigger versions.)

:bug: Bug report
As proof of why a drop shadow not only looks better and helps distinguish foreground from background but is actually helpful, look at this screenshot. You'd have noticed this at once. (I've outlined it in red.) The content sticks out of the modal. This happens with every Status update and Journal that i tested:
Modal-text-bug by rotane

:bug: Weird commenting prompt
If a deviation has no comments, you give us a line at the bottom of this modal that asks for a comment. While i think they are rather forced, a prompt such as this one should not appear under a Status update:
"What three things do you like most about this deviation? What's one thing that could be improved?"

:bug: Bug report
I have set the "Posts" section of my Watch to display only Status updates, yet there are a handful of Journals to be seen. All of them are hq Journals. And no, they are not Status updates sharing said journals…

:bug: Bug report
This is a bug that i have reported back in september when the new thumbs grid launched into beta, but it is still there. On retina screens, the Journal badge's right border is 1 pixel too thick, compared to the other 3 sides:
Screen Shot 2015-11-26 at 13.38.21 by rotane
(Click for a bigger version.)

The avatar
On top of the Watch page sits your avatar in glorious 60x60 pixels. I have to wonder, why scale it up from 50x50? This only results in a washed out image. (Sidenote: on a retina screen like the one on my MacBook Pro this looks actually pretty good, since it somehow doesn't interpolate the image and blurs it, but uses some sort of nearest neighbour technique, i think. But on non-retina screens it simply doesn't look good.)

Action buttons that are too context-sensitive
Depending on the size of your browser window and the size of thumbs that are next to them, in extreme cases you end up with one of the following two scenarios:
Watch-action-buttons by rotane
On the left one, the action buttons appear rather large and far away from each other; while on the right one, they are very compressed, their content overlaps, and even the buttons themselves bump into each other. There needs to be some sort of limits that this does not happen.

Slow links
The Watch page appears slow. I don't mean it loads or scrolls slowly, not at all. However, across the Watch page you'll find numerous CSS3 transitions: When you hover your mouse over a thumb or link, its appearance fades slowly to the hover-state. While this is a nifty effect, it's too slow. Let me explain with 2 examples:

For the first example, these items mimick the speed of the links on the Watch page. Go and move your mouse across them for a bit. The faster you move, the less of an effect you'll see, which makes the page appear laggy and unresponsive; and you don't want that at all:
item item item item

For the second example, the initial hover is sped up. When you move over an element it changes appearance almost instantly, and only when you move away will you get a slow fade-out. This results in a page that appears much more snappy and responsive, yet retains that desired transition effect:
item item item item

In closing

There you go, my in-depth "review" of the new features after having used them for about a week. Some of these issues make the overal experience more frustrating to me than need be, unfortunately. Not all of them are bugs per se, but just sloppy mistakes – but also a brand strategy that needs some refinement. I will repeat though what i said in the beginning: I do like the new design, and i think it has a lot of potential. It just need to be ironed out a bit more.



Artist | Professional

Boards of Canada stamp by rotane

Delicious Bookmarks


rotane has started a donation pool!
31 / 999
Please help me take over the world!

You must be logged in to donate.


Add a Comment:
Jompie Featured By Owner Nov 19, 2015
Happy birthday by Jompie
rotane Featured By Owner Nov 20, 2015  Professional
Thanks man, really digging those creatures of yours :)
Jompie Featured By Owner Nov 20, 2015
They all shout:"Thank you!!!"
lintu47 Featured By Owner Nov 19, 2015  Hobbyist General Artist
Misc Emoji (Happy Birthday Bunny n Bear) [PMotes] by Jerikuto
rotane Featured By Owner Nov 20, 2015  Professional
Cheers! :aww:
HearseGurl Featured By Owner Nov 19, 2015
Hey Hey Happy Birthday! :iconspinningcakeplz:
Thanks for all you do and being in the community! :la:
rotane Featured By Owner Nov 20, 2015  Professional
Thank you! :)
iytj Featured By Owner Nov 18, 2015
Flowers fella (Love) happy b-day to my e-twin Irish B-Day Happy B-Day To Me 
rotane Featured By Owner Nov 20, 2015  Professional
iytj Featured By Owner Nov 20, 2015
you're most welcome,dearest!:hearts::heart:Floating hearts 1Tiny Pink Heart PixelRainbow heartHeartFREE Emoticon: Heart.:Pastel pink heart:.Heart AnimationHeart Bullet (DL's Purple) - F2U!:bluehearts:Rainbow heartRainbow animated heartturquoise heart bulletBeating Heart Emote (Free to Use)Heart dividerFREE Emoticon: HeartHearts - line 
Add a Comment: