9 Dribbble UX troubles, what and why?

“People ignores design which ignores people” is a leading principle in UX design. User should be the center of the media which is for them. I am talking about the online media where users are the only focus. So, I am not judging facebook.com and Boeing.com as a same media. Those have different target audiences.

As a designer, , I like dribbble most for their awesome usability and awesome peoples out there. Every day, I wake up and my first task is to check dribbble. For new inspirations or checking my shots like and followers.

Funny huh! But It’s my routine.

Dribbble is a fantastic and awesome place for designers. But I have been facing some problems in everyday use of it. I thought that is the result of my poor understanding and shorter experience in this carrier. But I got courage to discover and present them as problem before you when Donald A. Norman said in his book Design of Everyday Things: Revised and Expanded Edition;

“If the intended user does not  understand  some usability or become confused, that is not his  fault, but  designers  of that  system”

So, here I am present with 9 UX troubles in dribbble. Which, as a user, I faced as “trouble” to me. I did not explore those, but they explored me.

Hey, don’t worry, I am not going to dig deep, it’s about first few pages which everyone browses.

I describe everyone in three portions;

• The Problem,
• Relevant UX Principles
• Suggestions.

You may accept those as your problem, but cool down man! It’s not yours, as a user, these are actually usability troubles. And also, you may have better usability suggestion than me. If so, please let me know in the comment section below this write up.

Cheers!

1. Description on hover over thumbnails

Now, answer a question. Do you ever read the description displayed on hover effect of tiny preview of every shots? I asked that to many of my colleague, and the answer was “No”.

I usually hover the shot to see when it posted and the shot title. But never read the description. It makes some cognitive load. Because it’s around the information that matters to me, that’s the problem.

It contains 28 previews at a time in my display, so everyone hardly concentrates to those 5-line texts. What purpose this 5-line text with 11px font size serves? I don’t know, but dribbble designers may have explanation of their Conceptual Model. Unfortunately, there conceptual model does not match with their intended users, like us.

Relevant Design Principles:

A. Every single irrelevant information minuses a relevant one.

(ref : Information Architecture: For the Web and Beyond by Jorge Arango, Louis Rosenfeld, and Peter Morville)

Priority of information in an information architecture is very important and sensitive aspect. Suppose, you have a sports wrist watch. Which displays the time, date, and day, alarm, temperature etc. in an almost same font and same size. Will you feel comfortable with it? (Hey, don’t think, I am answering)

Not!

Because you need the view of time most. Every time when you look at the watch, for their almost equal view, you have to think and compare. Ultimately you face cognitive load every time and feel disgusting!

B. Reduce:

“The easiest way to simplify a system is to Remove functionality”.

1st Principle of Laws of Simplicity (by John Maeda in his book: Laws of Simplicity), which defines as to remove less important things is better than placing them. It results in making cognitive load.

C. Principle of Progressive Disclosure.

I like Facebook UX for their clever usability policy. Remember how much personal information you have given to Facebook? “a lot”! Right?

Now, while you are going to sign up into it as first user. Would you give those information if Facebook demanded those at once ? May be or not, but surely this situation would make a huge recalling pressure and take lots of time. (It is good to know that people are more comfortable in recognizing than recalling. Because people hate recalling).

Facebook does that via an important design principle “Progressive Disclosure”. This principle also applicable todays app design trends. While users shown a little information at once from a big information architecture.

So dribbble’s tiny description in shot hover effect serves nothing but it violated this principle.

Suggestion:

Keep information that matters to users, like shot title and time. Please remove others. Because, if one feel interested to a shot, he will click the shot. Then He will read out the descriptions.

2. Comment input box is in bottom

Guys, let’s talk little bit about the comment section the shot preview in dribbble. When you are going to comment a good shot, how often you read out the comments already posted?

Here the phase “how often” matters. In my case, in few shots which I go through a day on dribbble. In 20% shot I read previous comments while I comment a shot in a day. Is it clear what I intended to say?

Yes, my problem is why the comment input box rested in the most bottom? Where most of the time I comment without reading previous comment.

Relevant Design Principle: Conceptual Model

Hmm. Dribbble designers failed to match their Conceptual Model with their users.

Let’s dig into deep a little bit. Shortly, Conceptual Model is the model of the product or system. Which is designed and intended to being used, in specific purpose by specific users, through specific manner. As described by Don Norman in his book “Design of Everyday Things: Revised and Expanded Edition”.

Dribbble designers designed this awesome platform for 2 class of peoples,

• the designers and
• the searchers of designers.

The conceptual model of dribbble is discussion and constructive criticism of design. Like Facebook on social opinion.

So, if you intend to comment a design. You have to go through the previous comments and make a comment which is good one.

That’s awesome! Isn’t it?

Now, if you see the comment section of average shots, most of those are full of comments like “WoW”, “Awesome”, “Hi! Good Shot”, “Awesome color”, “Fantastic” etc.

These are +-80% comments and need not to read previous one to post it.

Here is the problem. To post a comment on a design, is it really needed to go through previous comment?

Certainly not!

So, why I have to scroll all the way bottom every time to post a comment while I brows at least 30 good shots (i.e. comment able and having least 10 comments) every day?

Rather I decline to comment!

Now look at the conceptual model of dribbble designers and the result. The root cause is, dribbble is designed this section following Facebook. At least in this aspect.

But the truth is, dribbble is never facebook!

So, majority users revoked the conceptual model of dribbble. Hence UX is a democratic system governance! We are the majority.

Hey! We are the user!

Here Adobe’s hosted Behance.net solved it and they brought the comment box top.

Now, here is problem with it. In my shot, in a day, I have to reply some comments mentioning their names. Only in this situation, dribbble’s design is perfect. But observe your commenting rate in others shots and reply of comments in your own shots, now which one you do more?

Certainly, the first one.

Suggestions

• Bring the Comment input box top, like behance.net, or
• Keep existing interface but reduce the list of comments by displaying ¾ recent comments. Keep a tiny button to “see all comments” type. People enjoy the freedom.

3. Inappropriate position of “follow” button on the shot preview

How do you follow designers after getting impressed seeing his shot? Ok, more easily, how do you follow designers after seeing their shots? You may have a mixed way to do that. But I have been done funny things to do that.

What I did is, from the shot preview page. I click the name of artist placed top of the shot, then go to their profile and click “follow” button.

Did you done like me? Yes, you are in usability trouble also.

Dribbble is familiar to me till a year. Until recently, I discovered a “Follow button”. Which is tiny, grey and placed in the middle-right side of the page. Clicking which, you can follow the designer without going their respective profiles.

Why I didn’t see that button in this long time of use? Which would make my task much easier!

Yes, that is a problem and as a user, I faced that.

It happened because the design violated 2 important principles.

Relevant Design Principles:

A. Alignment

“Things that are aligned are perceived to be more related than things that are not aligned.”

Says William Lidwell in his famous book Universal Principles of Design.

Alignment is one of the vital principle of design, which ease many things at once. Western users scan a webpage from top to bottom and left to right. Many usability tests prove that, people scan the web pages in “F” shape. View the image below:

So, every content which are aligned to other, are related to that, as the user perceives. So, which aren’t aligned. Skipped from the appearance, like my recently discovered “follow” button in dribbble.

Also, contents that are outside of “F” shape, are skipped from the user scan. Because “users don’t read, they scan” said by Steve Krug in Don’t Make Me Think.

Imagine a webpage. It’s important components like, logo, navigation links, header and CTA button. Where they are placed? You know, within “F” shape of that page!

So, hence the “follow” button in the shot preview is important thing. For the design fault, it left outside of alignment and made users suffer.

B. Similarity

“Strive for consistency. This principle is the most frequently violated. And yet the easiest way to repair and avoid violating”.

A golden rule of design by computer scientist Ben Shneiderman.

Usability and learn ability improve when similar things are depicted and function in similar way. As William Lidwell defines principle of Consistency in Universal Principles of Design.

This principle helps to-

• Efficiently transfer knowledge to new contexts,
• Learn new things more quickly,
• Focus attention on the relevant aspects of a task.

We are talking about the similarity of functionality.

Now with which we have to compare this function to bring similarity?

Good question! But I have answer.

The consistency parameter should be compared with systems comparatively and functionally same models and with which, users are already familiar with.

In this dribbble, the function is to follow a designer, is pretty similar with the “follow/ unfollow button” in Linkedin, Facebook and also Twitter. They placed this functionality aligned closely to left side of the name of user.

These three platforms came earlier than our dribbble. And most of the users are maintain at least two of them each and they are used to it this way.

Suggestion

• Please bring the button beside the artist’s profile picture and name above the shot.
• Bring a gear icon with drop down functions. Like, follow xyz, follow group (if artist is the member of dribbble group), and even unfollow artist.

4. View Counter Confusion

While visiting a shot on dribbble, on the shot description page, you see the shot view counter on the right-side panel. Let’s say it “view counter 1”.

When you click the attachment of the shot. Did you noticed that, there is another view counter in the top left side. ? You may, let’s say it “view counter 2”.

Now if you look at both of them, there is mismatch! Why? I get confused. Because, dribbble does not provided me any clue about which for what?

Steve Krug thought me “Don’t Make Me Think”, but present situation does!

Problem is underlying in the Labeling Trouble.

Relevant IA Principle: Labeling

It is the concept and principle of Information Architecture (IA). Which is, if there are more than one of similar information. Look alike and probable to make confusion in users. label it.

“To minimize  this  disconnect, information architects must try their best to design  labels that speak the same language as a site’s users while reflecting its content. And,just as in a dialogue, when there is a question or confusion over a label, there should  be clarification and explanation.

Labels should educate users about new concepts  and help them quickly identify familiar ones”

-as argued by Peter Morville in his famous book: Information Architecture: For the Web and Beyond.

So, these informations labeled just “views” in both of the cases resulted confusion. And UX suffers for lake of proper labeling.

Suggestions

• Label “view counter 1” as “total views” &
• Label “view counter 2” as “2x views”,( may be, if it is so).

5. Invisible Project “edit” & “delete” button

I remember the moment of making my first shot on dribbble while I just got my account pro. It was very unexpected situation!

Shortly, I uploaded my shot at 02.00am and obviously, that moment was very exciting for me. But my every excitement gone when I realized that, I just done a mistake in my life’s first shot in dribbble!

It had been known to me that dribbble pro account has “edit” and “delete” buttons. But I did not get that, and that was almost mid of night, so I could not call any one for help. I discovered the buttons later on.

That day, I was helpless and dribbble did not provide me any escape or reverse way of that moment. Although there still were options for that…invisibly!

So why these buttons I could not discovered that day? Here is my problem!

Because, in this aspect, the design violated 2 principles of design and made such an important option undervalued.

• Forgiveness &
• Principles of Discoverability and Understandability.

Relevant Design Principles:

A. Forgiveness

“Design should help people avoid errors whenever possible. And protect them from harm when they do occur”.

— William Lidwell in his book Universal Principles of Design.

In the UX design, designers have to give the users total freedom to act. Because, people like to be free. In this activity, if they occur any wrong, which may be intentional or mistakenly. There should be an escape door for that. It is common sense in UX. And characteristics of good usability as well.

You watched the ABS break system in cars or circuit breaker in electric panel. Payment method of popular e-commerce websites. They provide escape door even after you confirm the payment. Because it is true that human make mistakes!

B. Discoverability and Understandability

“Discoverability: Is it possible to even figure out what actions are possible and where and how to perform them?

Understanding: What does it all mean? How is the product supposed to be used? What do all the different controls and settings mean?”

- Stated by Don Norman

My argument is, if you provide an option to work with, you have to make it visible and understandable to users. Otherwise, it acts like no option is present here.

For this reason, I told earlier that, dribbble did not forgave me that day hence they had option for it. Those are undiscoverable and almost invisible!

Suggestion

Please make this button visible. It may be button on upper right corner of the shot preview pop-up.

Or anywhere else users think fit.

6. No notification marker on the tab

The day when I post a shot in dribble. I click the dribbble tab at least 50 time in next 24 hours wishing to get more like and follower as well. I hope most of the designers do that, less or more.

On the other hand, my mail (it’s outlook) is also very important thing to me for my daily life and the profession also. But I enter that may be 3 or 4 times a day.

Here is the problem, the true fact is, I am bound to enter dribbble tab 50 times a day. Because, dribbble notify me nothing about any activity. Like, new like, message or new follower or comments on its tab or via anything else. I.e. notification banner, or sounds or marker in the tab.

On the other hand, I enter my mail only when a there is a little red marker (notification marker) in my mail tab. That means I just received a mail. It made my life easier.

I use many websites at a time. Many of my favorite websites (google analytics, medium.com, skype, facebook etc.) does that by showing a little colorful circle in the tab in concern. That is helpful, and specially for the platform like dribbble. Where every notification is very expected and important to user.

Relevant Interaction Principle: Feedback

4th fundamental principle of interaction according to Don Norman.

The system should always keep users informed about what is going on. Through appropriate feedback in a reasonable time. Don’t keep the users guessing — tell the user what’s happening.

As wrote by Nick Babich on his article Golden Rules of User Interface Design on Medium.com.

So, keeping the user informed is the sign of good usability. Only a single red dot can reduce so much of time and mental tension of users.

Suggestion

The feedback system may vary, if it is a popular one, it will be better. This is may be a solution, see the image below:

7. Disguise Buttons

Suppose, I kept 6 body spray bottles in your table which are 100 % like one another and made of solid metals. And I asked you to say which bottle is empty and which one is full.

How would you make decision?

Ok, hold on. There may be some clever methods to solve it, but every method raises your cognitive load about 150 rpm/secs. Am I right?

Now look at the real picture, which is the properties panel. Placed in the right-side of shot thumbnail in the dribbble shot description page.

Now, as you see, every property contains names and icons and has its value aligned to it, (I.e. “Like” is for how much like it got, “Bucket” is for bucket option and how much it bucketed and go on…). Now, these six properties have respective functionalities. If you want to like a shot, you click the “heart” icon to like it and “Bucket” icon to bucket it.

The appearance of these six icons is similar in color. So, it’s perceivable that, that will function similarly. But if you click “Eye” icon or “Share” icon, you will get nothing. why?

And a mockery happened to me about color scheme panel. Do you know you can download the entire color palette of a shot from dribbble? Which open in photoshop?

I did not know that until recently I discovered that while I intended to write this article.

Alas! How much I had been striving to save the shots color palette!

That is a usability problem! And it happened because design violated a principle of design. Which is “Similarity” as I mentioned earlier.

And in aspect of “Download color palette” button, it violated “Discoverability and Understandability”.

Relevant Design Principles:

A.Similarity

I do not talk much about this principle. Because I discussed about it earlier (trouble number 3, see above). Also, I value your time, but the context of earlier version and present version is different.

Earlier on is “Similarity in Functionality” as I mentioned there.

And the present context is “Similarity in Appearance”. That is, if all buttons look similar, user perceive that, all are functionally similar. Like, in our case, clickable. got the Idea?

You are brilliant!

B. Discoverability and Understandability

I have discussed the principle earlier also, so I am going straight to the point.

In respect of the “download this color palette” button. Recently, I got a button which is only understandable through a pop-up tag in hover effect!

It’s not proper way. The button should talk itself and should be perceivable in cognition. Should be discover able and understandable by itself.

Suggestion

There may be better one, but, in the image below, it may be a solution.

8. Recent/popular shot option bar dissimilarity

First is first.

Let’s answer the question below?

What is the different between a computer keyboard of different brands and a microwave oven of different brands?

You may think “What type of question is it? Does it matter in this conversation?”

My answer is, yes! It matters.

Fact is, we don’t have to learn the keyboard functionality anew every time we buy new one. But we have to, in case of new Oven. Because, all the standard size keyboards are same in their functionality related to their keys. Every keyboard has letter “Q” as first key in their alphabet keys and have space bar toll.

But, different oven manufacturing companies. They do not share same user interfaces and key functionalities. So, you have to learn anew every time you buy a new one.

I recalled this example in the time when I got the dissimilarity in the “Popular or recent shot view” option in dribbble. If you go to “home”, you get the Popular / recent shot view options by clicking “Shots” key beside the logo.

But, when you are in someone’s or your own profile, you get these options all the way opposite side, (right side). I did not discover this until recently.

So, why I could not see that?

Because, there is design trouble. It violated design principle, that is, “Similarity in functionality”.

Relevant Design Principle: Similarity (in functionality)

As I discussed it earlier, so, I do not repeat that. But the matter of UX is, users hate to follow two methods to perform similar job. You cannot make two different system for a similar work in a single website.

You should not say “Look at left” and “look at right” at a same time for a similar task. Should You?

Suggestion

This may be a solution, for better one, take a user test.

9. Confusing check mark on Message button on profile

Last few months, I got a check mark in my “message” button in profile. First time I thought that some client sent me a message! I clicked and got a format which explains what hirer will see if they want to message me.

No, I do not blame dribbble for this, it’s my stupidity.

But the problem is, till now, I clicked at least 35 times on that button. And every time I realize that, I clicked button and the consequence is known to me!

One more thing, message button containing a marker on it and the button without check mark work same.

So why I clicked that button knowing its consequence? You are surely thinking that, at least in this case, this is my fault, isn’t it?

But hey, I don’t list my fault here! Hah Haa!!! (kidding!)

It’s the tiny little check mark which “pulled me” to click button, and yah, It’s also a interaction fault.

It forgot important thing of how human brain interacts.

Relevant Interaction Principle: Human Cognition and Emotion

As described by Don Norman, human brain processes work in three steps:

• Reflective
• Behavioral &
• Visceral

In case of last 2, we have no control over them hence they are basic emotion.

“The  visceral  system allows us to respond quickly and subconsciously. Without conscious awareness or control.The  basic biology of the visceral system minimizes its ability to learn.”

— Don Norman in his book Design of Everyday Things

So, what we are used to?

We are used to check our notification when we see a marker. In case of iPhone, a red circle containing number on applications, also in desktop, we see it in the tab of browser.

So, the problem happens, when we see the tiny marker on the button. We do not get time to process them because the visceral and behavioral emotion don’t give me enough time to do that. So, my realization comes immediately after I have already click that.

Suggestion

If the message button containing a marker on it and the button without check mark work same. Why it’s needed to make some mistake to place marker here?

Got the idea!

Lastly, some true factors.

I love dribble more than any other websites I daily browse. For this, I am more concern about it. I will be very happy if dribbble reach the #1 website of the world in the race of usability.

If you have any disagreement or edition or subtraction about my observation. Feel free to comment in below.

Hey dear, we are same to same, we are user!

If you wish, let’s get connected on Dribbble

I am full time UX designer. If needed, say me hello on wiki.id@outlook.com

Read the article on Medium and if you think it serves, give some "applause" as appreciation.

Thanks a lot!