“Whoever best describes the problem, is the one most likely to solve it.”—Dan Roam

I had the recent honor of becoming an author in UX Magazine with my first published article: a review of the Fitbit Flex.

In passing, I mentioned to Josh Tyson (Managing Editor) some of the challenges I was having responding to comments on my article. As a result, he asked me if I’d be willing to do a review of their current social login/commenting system.

Not gonna lie, I hesitated at first because I didn’t want to be perceived as bashing a publication I respect greatly–and one that just had the faith in me to publish my work! He immediately put me at ease by expressing his interest in being transparent and vulnerable in order to make things better.

Here’s what I discovered in the process using Chrome for Mac/desktop: I began my critique at the article level since this is how most users would attempt to leave a comment.

Social Logins

Twitter

Twitter was the first option. Here’s the steps I took:

  1. Clicked Twitter icon
  2. OAuth pop-up window (so far, so good)
  3. Custom loading screen via third-party
  4. Landed back at the top of the article page with some helpful user feedback that stated my account was created and my user name is “X”

Twitter social login on UX Magazine

1. Clicked Twitter icon

Twitter social login on UX Magazine

2. OAuth pop-up window

Twitter social login on UX Magazine

3. Custom loading screen via third-party

Twitter social login on UX Magazine

4. Landed back at the top of the article page

Biggest problem with this experience that I’m convinced could be lending to some loss in engagement is the bold text on 4. I landed back at the top. The ideal UX would be to jump me back down to the comment box with a blinking cursor so I could do what I intended to do all along…leave a comment.

Facebook

Here’s what happened when I did it Zuck’s way:

  1. Clicked FB icon
  2. Pop up for FB Connect > Okay (so far, so good)
  3. Custom loading screen via third-party
  4. Same result as Twitter: Landed back at the top of the article page with some helpful user feedback that stated my account was created and my user name is “X”

Facebook social login on UX Magazine

1. Clicked FB icon

Facebook social login on UX Magazine

2. Pop up for FB Connect

Facebook social login on UX Magazine

3. Custom loading screen via third-party

Facebook social login on UX Magazine

4. Landed back at the top of the article page

Couple of things worth noting here:

  • Notice that the FB pop up screen icon for UX Mag is generic? It would benefit greatly in the trust department to replace that with the UX Mag logo (note: only FB Developer cardholders can do this).
  • I clicked “Reply” to my FB comment I left, and it jumped me to the top of the screen that showed that my Login was successful. I had to scroll down to the bottom of the page again to actually reply.

Facebook social login on UX Magazine

After clicking Reply to my FB comment.

Google+

Now for Google’s social network on life support. This one was a real doozy:

  1. Clicked Google+ icon
  2. Pop up for Google+ > Allow (so far, so good…but stick with me)
  3. Custom loading screen via third-party
  4. Landed back at top of page again with user feedback message that stated: “Once you’ve verified your email address you can then sign-in”
  5. Had to leave and go to my Gmail account > Click verify link
  6. Landed back at UXMag.com “Reset Password” page that confirmed verification but also told me other things like “This is a one-time login and will expire on xx/xx/xxxx. I was also being prompted to change password because that login can only be used once
  7. Clicked “Log in” button
  8. Landed on profile page with helpful user feedback that said “Log in successful”, but now I have to change my password (chick chick, boom)
  9. Entered new password > annnnnd again to confirm
  10. Clicked Save button
  11. Same page refreshed with user feedback that said “Changes have been saved” (now what?)
  12. I had to go to the other tab of the article I originally wanted to comment on and refresh for my login and ability to comment to render

Google+ social login on UX Magazine

1. Clicked Google+ icon

Google+ social login on UX Magazine

2. Pop up for Google+

Google+ social login on UX Magazine

3. Custom loading screen via third-party

Google+ social login on UX Magazine

4. Landed back at the top of the article page

Google+ social login on UX Magazine

5. Clicked “Log in” button

Google+ social login on UX Magazine

6. Landed on profile page with helpful user feedback

Google+ social login on UX Magazine

7. Entered new password

Google+ social login on UX Magazine

8. Clicked Save button

Google+ social login on UX Magazine

9. Same page refreshed with user feedback

Google+ social login on UX Magazine

10. other tab of the article I originally wanted to comment on

LinkedIn

Here’s how LinkedIn went down (no pun intended):

  1. Clicked LinkedIn icon
  2. Pop up for LinkedIn authentication/sign-in (thankfully pre-populated for me)
  3. Custom loading screen via third-party
  4. Another popup (this time a modal) stating that “Unfortunately they (they being someone important I’d venture) could not retrieve email from my “LI” account and I must enter my email in the form below in order to continue
  5. Entered email
  6. Ended up back on article (everyone now, at the top of the page) with an error user feedback message that says, “This email is already registered. Please choose another one or link this account via account linking on your profile page.”
  7. No thanks (I’ll stick with the account I have)

LinkedIn social login on UX Magazine

1. Clicked LinkedIn icon

LinkedIn social login on UX Magazine

2. Pop up for LinkedIn authentication/sign-in

LinkedIn social login on UX Magazine

3. Custom loading screen via third-party

LinkedIn social login on UX Magazine

4. Another popup (this time a modal)

LinkedIn social login on UX Magazine

5. Entered email

LinkedIn social login on UX Magazine

6. Ended up back on article page

UX Mag

Not much to say about UXMag.com’s login other than I wished that icon wasn’t so lonely below the social icons. I see no reason why it couldn’t just fall in with the others at the end.

  1. Click UXMag icon
  2. Clicked Log in (pre-populated for me)
  3. Bam! Brought me right to a comment box with blinking cursor!

Login on UX Magazine

1. Click UXMag icon

Login on UX Magazine

2. Clicked Log in

Login on UX Magazine

3. Brought me right to a comment box

Commenting Experience/Engagement

One of the things I ended up noticing (that I wasn’t originally looking for) was the commenting experience itself. For the amount of traffic that UX Mag gets, I was a bit surprised to not see more comment engagement–especially on the four featured hero articles.

Here’s what I noticed:

  • Article 1: 0 Comments
  • Article 2: 2 Comments
  • Article 3: 0 Comments
  • Article 4: 3 Comments

I have some assumptions as to why this is:

1. Form Layout

It’s never good UX to say “Submit” on form buttons—too systemic

  • The form UI feels condensed and the tiny Submit button is about 200 pixels below its intended contextarea (see what I did there?) I would suggest opening up the form UI and button a bit in scale (but bringing the submit button much closer to the comment box). Maybe round the edges, make it feel more friendly and inviting.
  • I also wondered if the default “rich formatting options” were necessary or just more distracting? If necessary, are they really adding that much value, or are they just giving users more cognitive load away from the original task of simply commenting?
  • Another possible distraction being the Switch to plain text editor link (Why?). If anything, I’d start with the plain text and give users the “Switch to rich text editor” option with all the distracting controls after
  • There’s a somewhat scary disclaimer text that mentions spam directly above the Submit button. Wha? I just gave you my email address and now you’re talking about spam??
  • There’s also another potentially distracting (albeit reassuring) text below the email field mentioning that user’s email will not be shown publicly
  • “Submit” button has a real lack of the personality/voice demonstrated in other areas of UX Mag (see Empathy). Plus, it’s never good UX to say “Submit” on form buttons (too systemic). Instead, how about something that reflects what the user is actually trying to do, like…“Post Comment”?

UX Mag commen

UX Mag comment UI

Smashing Mag comment UI

Smashing Mag comment UI

When you look at other similar high-engagement blog platforms, the comment section is pretty barebones. The objective is to remove as much barrier-to-entry as possible for the desired outcome. I believe UX Mag is trying to help a little too much with the simple task of commenting and may be actually subverting their own engagement levels in the process.

2. No Comment Count Indicator

Typically on large blogs, you’ll see a comment count indicator/hyperlink at the top of every blog article that can be clicked jumping the user down to the comments section. Adding this to each post (perhaps near title), could also potentially help increase engagement (as long as social login to comment accessibility fixed with it).

3. Author Notification System

One more assumption I had on lack of comment engagement was that there is no author comment notification system in place. I believe if each author was notified somehow (presumably through email) that someone commented on their article, authors would be more inclined to comment and help spark the conversation and thus help increase engagement/trust with their readers. [ED NOTE: We do have this feature enabled, but clearly need to check that it’s working.]

4. Search Results Comment Cluster

Something took me by surprise when I was doing my research for this. I conducted a search and in order to cover all my bases tried the “Add New Comment” link from the Search Results.

300 Sparta gif

The margin of everything opens up to 100%. I instantly felt like that messenger dude in 300 with King Leonidas kicking my hind-quarters into the abyss!

UX Mag commen

Aaaaaaiiiieeee

UX Mag commen

Aaaaaaiiiieeee

UX Mag commen

Aaaaaaiiiieeee

UX Mag commen

Aaaaaaiiiieeee

Conclusion

The most important thing to consider is that nothing is truly broken here save maybe that Google+ (or minus) process … kill me now. Everything can still be accomplished; it’s just that in most cases, the user has to work a little harder to actually do so. I’d love to see UX Mag dig into to this further and evaluate some of the things I mentioned here. A/B testing could go a long way in this case to determine what’s truly working and what’s not.

I’m thankful to UX Mag for the opportunity to be transparent about the experience I had and their vulnerability in publishing it in order to introduce an accountability factor for affecting change here. This is a great example of UX leadership. Have any thoughts or suggestions on how to make this experience better? Love to hear about it in the comments!

 

Image of man with megaphone courtesy Shutterstock

Article No. 1 528 | August 27, 2015
Article No. 1 191 | February 19, 2014
Article No. 1 446 | June 3, 2015

Add new comment

Comments

A couple of things not mentioned but important to my user experience:

You have a lot of spam comments. Ordinarily I never post to a site where I can see a lot of spam in the comments. The message I get from spam in the comments is that the publisher does not care about comments or commenters. I further assume that serious readers also skip reading the comments because they don't want to sift through the spam. Yes, spam is a problem, but there are tools to fight it. There is also the old fashioned way of simply moderating them.

When I clicked on "reply" I was taken to an Ajax page full of code I assume I was not supposed to see. You might want to fix that, too.

I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well

Freelance Maroc

obat diabetes alami @ http://www.obatdiabetesalamikolesterolasamurat.comobat kolesterol alami @ http://www.obatdiabetesalamikolesterolasamurat.comobat asam urat alami @ http://www.obatdiabetesalamikolesterolasamurat.com

<p>موقع العاب فلاش جديدة وحصرية ويتميز بالسهولة في التصفح ويحتوي علي باقة كبيرة من كل العاب الاولاد والبنات مثل العاب السيارات و العاب الطخ و العاب التلبيس ايضا يحتوي علي العاب السباقات والعاب السا وفروزين وباربي والعاب انا وكل الالعاب الشهيرة والجديدة والعاب اميرات ديزنيوهذة هية باقة من اشهر اقسام الالعاب والاكثر طلبا بين كل العاب الفلاش</p>

<a href="http://www.rounq.com/games/">العاب فلاش</a> - 

<a href="http://www.rounq.com/games/flash-games">العاب فلاش برق</a> - 

<a href="http://www.rounq.com/games/baby-games">العاب اطفال</a> - 

<a href="http://www.rounq.com/games/girls-games">العاب بنات</a> - 

<a href="http://www.rounq.com/games/action-games">العاب اكشن</a> - 

<a href="http://www.rounq.com/games/cars-games">العاب سيارات</a> - 

<a href="http://www.rounq.com/games/ben-ten-games">العاب بن تن</a> - 

<a href="http://www.rounq.com/games/baby-hazel-games">العاب بيبي هازل</a> - 

<a href="http://www.rounq.com/games/tag/%D8%AA%D9%84%D8%A8%D9%8A%D8%B3">العاب تلبيس</a> - 

<a href="http://www.rounq.com/games/">لعبة من سيربح المليون</a> - 

<a href="http://www.rounq.com/games/game-147.html">لعبة زوما</a> - 

<a href="http://www.rounq.com/games/game-171.html">لعبة الفراخ</a> - 

<a href="http://www.rounq.com/games/game-173.html">لعبة السمكة</a> -

<a href="http://www.rounq.com/games/game-176.html">لعبة المزرعة السعيدة</a> -

<a href="http://www.girlsgames5.com/">العاب بنات</a> - 

<a href="http://www.al3bna.com/%D8%A7%D9%84%D8%B9%D8%A7%D8%A8-%D8%A7%D8%B7%D9%81%D8%A7%D9%84/">العاب اطفال</a> - 

<a href="http://sms.t3mq.com/%D8%B1%D8%B3%D8%A7%D8%A6%D9%84-%D8%AD%D8%A8">رسائل حب</a>

I would like to read this:  a review of the Fitbit Flex

When ytou click the hypertext, it takes you back to the same page

Hi Mike, sorry you had trouble with that link. Try this: http://uxmag.com/articles/a-few-fits-about-the-flawed-ux-of-fitbit-flex