Notice: register_uninstall_hook was called incorrectly. Only a static class method or function can be used in an uninstall hook. Please see Debugging in WordPress for more information. (This message was added in version 3.1.0.) in /home/robrogan/robrogan.com/wp-includes/functions.php on line 4161

Warning: Cannot modify header information - headers already sent by (output started at /home/robrogan/robrogan.com/wp-includes/functions.php:4161) in /home/robrogan/robrogan.com/wp-content/plugins/wp-super-cache/wp-cache-phase2.php on line 1196

Warning: Cannot modify header information - headers already sent by (output started at /home/robrogan/robrogan.com/wp-includes/functions.php:4161) in /home/robrogan/robrogan.com/wp-content/plugins/micropub/micropub.php on line 1225

Warning: Cannot modify header information - headers already sent by (output started at /home/robrogan/robrogan.com/wp-includes/functions.php:4161) in /home/robrogan/robrogan.com/wp-content/plugins/micropub/micropub.php on line 1225

Warning: Cannot modify header information - headers already sent by (output started at /home/robrogan/robrogan.com/wp-includes/functions.php:4161) in /home/robrogan/robrogan.com/wp-content/plugins/micropub/micropub.php on line 1225

Warning: Cannot modify header information - headers already sent by (output started at /home/robrogan/robrogan.com/wp-includes/functions.php:4161) in /home/robrogan/robrogan.com/wp-content/plugins/webmention/includes/class-webmention-receiver.php on line 819

Warning: Cannot modify header information - headers already sent by (output started at /home/robrogan/robrogan.com/wp-includes/functions.php:4161) in /home/robrogan/robrogan.com/wp-content/plugins/webmention/includes/class-webmention-receiver.php on line 821
UX – Rob Brogan

January 21, 2016Comments are off for this post.

Design Thinking

On our work Slack today, someone linked this Wired article:

IBM’s Got a Plan to Bring Design Thinking to Big Business

To which I quickly replied with:

FullSizeRender.jpg

Anyone who knows me will know that I'm always crusading against saying words that don't mean real things, and buzzwords. Design Thinking, in my mind is just thinking! Maybe that's because I'm already a designer, but I feel like anyone can bring this type of thinking about a problem if they simply step outside of their typical problems and concerns of the day and dedicate some thoughtful time to an issue.

Later, someone shared this wonderful, 4 year old diatribe about design thinking by Dan Saffer.

Love. It.

On a more personal note, I suppose a lot of this comes from my perception that I'm not doing anything magical or special. I simply get paid to focus on certain things, and people in these "big corporations" we nebulously try to understand are just other people focusing on other things. I have no problem (and welcome) the inclusion of designers to help solve a problem. I also think that a business person can do a lot of this "design thinking" without involving a designer. You have to be willing to put your train on hold, switch tracks, and dedicate yourself to that problem. I fear the most toxic outcome of sharing vague words about an entire profession is to miss the point, and in some cases, acquire a design firm so that you have "in-house designers" to add value to your company – this won't work.

October 26, 2015Comments are off for this post.

Crème of Abstraction Layers

Evolution of content publishing online

When I slow down to look at my interaction with most web sites, I notice an incongruity for accomplishing the same end goal: publishing.

While different sites offer different levels of sophistication, I’ve noticed that creating or editing content on the modern web is bubbling-up closer to the surface. I liken this to term as used in Computer Science: abstraction.

At first, you had to write binary that worked directly with the processor. Then they created a language that allowed you to write logic gates which were converted to binary. The higher you get, the more programming becomes natural to humans.

Nick Nelson, Web Developer

As Nick sums it up, there is a pretty deep (and technical) background to programming that few of us think of today — even the programmers. Even though a well-versed developer that works in an Object Oriented language might know the logic behind the code, we have long since been removed from considering logic gates and binary code.

Translating this to web development, the abstraction layers could go as far as the binary code, but the fundamental difference between software and what we predominantly see on the web seems to start with HTML. Taking human steps back from HTML, by my count, we are just now seeing mainstream implementation of a fourth layer of abstraction.

facebook

facebook

Layer One

HTML and other languages

It used to be that you had to write everything in the language our browsers speak. Yes, we still build websites like this, but you don’t have to know this language to write a blog or update your status. I consider HTML, CSS, and other browser languages to be the first or bottom layer of abstraction on the web. Kids used to learn HTML if they wanted their MySpace to look a certain way. Later, WordPress says, “no more!” Enter the second layer of abstraction.

Layer Two

Admin panels and WYSIWYG

WYSIWYG editor tool for the Blogger CMS

WYSIWYG editor tool for the Blogger CMS

WYSIWYG (what you see is what you get) has been around before the internet, letting you select a different font style or change your margins, colors, and other preferences. Its implementation in Content Management Systems (CMS) brings about the second layer of abstraction. I’m sure you can count plain text input somewhere in earlier CMS platforms, but this is the more common method of creating content on the Web. Blogger might have been the first prolific example (above), but I haven’t spent enough time Googling to tell you for sure.

Aside:
To be true to the definition of abstraction this comparison should only be made from language-to-language. In that regard, languages like SASS, LESS, and the like are another layer of abstraction on top of CSS. I’m using abstraction liberally to talk about the mode of interaction you have with a computer when creating content online. In that regard, SASS and CSS are in the same bucket of “manually writing out instructions for the browser.”

An important element of this second layer of abstraction is not only the WYSIWYG, but its placement within an administrator’s section of the website. On Blogger, WordPress, or even the relatively modern Tumblr, you must sign in and access a different side of the website to enter new content and publish.

Tumblr’s Content Entry, circa 2013

Tumblr’s Content Entry, circa 2013

What makes Tumblr interesting is that the primary experience of viewing and interacting with other posts within the community takes place in the same logged-in state / administrator view.

Other services fall elsewhere in the spectrum of a definitive edit mode and read mode. WordPress for example has a completely different experience in the edit mode or administrator side of the site, whereas Flickr was one of the first to blur the line and display the same interface for editing as reading — with minor differences when clicking on things.

Wordpress Content Entry

WordPress Content Entry


Flickr Edit in Place Fields. Konigi, 2008

Flickr Edit in Place Fields. Konigi, 2008

It seems that in the development of a new content platform, there’s a defining choice whether to embrace the Content Management System (CMS) or to try and hide it as much as possible, creating the illusion that your draft could just as well be live, published content. This design decision is what carries some products from the Second Layer of abstraction and the Third Layer of Abstraction, where creating and reading content begin to merge.

Layer Three

Always logged-in + squishy CMS

Flickr, circa 2013

Flickr, circa 2013

As you can see above, Flickr has made quite a few changes over the years and I think it’s an excellent example of a third layer of abstraction to creating content online. Yes, there’s a smaller gap between this layer and the second than there was between the first two, but it’s distinct enough to deserve recognition.

In the Flickr example, people are still interacting with a CMS and they are logged in as an “administrator” of their content. What is significant however, is that our identities online have become more solidified and with a more liberal use of browser cookies, we are almost always identified when walking in to a website we commonly use. For example, WordPress, despite its many improvements, will still ask you to sign in to access the administrator part of your blog; whereas Facebook, Flickr, Medium, and many others will remember you, and what’s more: the main mode of interacting with those sites (communities really) is within the logged-in state.

As we lean toward an always logged-in state by default, the CMS necessarily has merged with the published content. Even when interacting with the CMS, it has become standard to do the composing or editing in the same place you’re viewing other content. When making a Facebook status, your browser doesn’t ask you to leave the newsfeed. When publishing a tweet, your browser no longer requires you to refresh the page to view that content. Overall, there a higher sophistication of Front-End web development being employed that makes these CMS interactions quite “squishy” compared to the very distinct moments you will have with a WordPress CMS and reading the blog, for example.

Sitting here in 2015, this doesn’t sound like much of a revelation. My apologies if I didn’t warn you ahead of time, but I don’t see myself as a visionary. I just think its important to document what we see.

Layer Four

Collaborative content

If I am to follow this winding definition of creating content and getting further away from complying with computers to get things done, then the last layer as I see it must be collaborative documents. Hear me out:

  1. Writing code – You’re using HTML, SASS, anything that’s meant for a browser and not a human.
  2. WYSIWYG / Hard CMS – You’re filling in text boxes, clicking formatting buttons, previewing, publishing, and then going somewhere else to see how it looks.
  3. Always logged-in / Squishy CMS – You don’t have to go anywhere else when finished creating or editing content. The line between browsing the web and composing has been blurred, but there is still a very strong line between you and your readers: the save/post/publish button.
  4. Collaborative content – In this state, the CMS is the viewing platform and composing platform at the same time. There’s no line between browsing and composing, nor is there a line between you and your readers:
Google Docs

Google Docs

I think where this notion of the Fourth Layer feels a bit forced is that it’s not a typical use case. Collaborative tools such as Google Docs, Dropbox, Box, and the like are associated with professional use only, and even in a professional setting they are not the norm.

What’s interesting to me however, is a hypothetical type of social media where that line between author and reader is selectively removed. Let’s take Facebook as an easy target. Imagine if you didn’t have to click the Post button on a status.

Oh wow Rob, that would make my life 9,000 times easier!

Yeah, I thought as much. It might even do more harm than good.

Side-note: isn’t there some publication that uses data Facebook has on what people draft as a status update versus what people actually publish?

I think it would be fun in some safe spaces, such as a curated group of your best friends where you could post content live and anyone that happens to be on the page at the same time can be drawn into your activity and then instantly (or simultaneously) begin to respond/react/build on what you’re putting out there.

Facebook

Okay, so let’s back away from the Facebook example a bit. I’m getting very specific just to try to explore what using the web would feel like if we managed to abstract ourselves just a bit more from the already ‘squishy’ CMS. Perhaps there will always be a line, a very minimum confirmation moment when an author does acknowledge something will be born into the Internet or not.

I think this depends on the concept of the web for most people. If you imagine it’s more akin to a book or newsletter than a dinner conversation or phone call, then yes, there will always be an interaction with the machine no matter how minimal. If you’re of the latter opinion however, then maybe at some point all lines will dissolve and we interact with the web as we do in person – maybe that leads to more explaining, and less editing, but that’s a whole other can of worms.


PS

I didn’t want to get too technical while exploring these different ways of creating content online, but I’d like to acknowledge that these layers of abstraction do not imply that we’re detaching from machines, markup languages, or programming of any sort. If anything, a greater layer of abstraction requires more sophisticated code to support such an elegant interface on the outside.

Good design should not aspire to rendering a complicated system into a seamless one; on the contrary, I hope we continue to focus our attention to the seams and learn how to best mold them to fit our needs.*

We used to log in to create blog posts and that was a necessity for security and identifying the author. Now we are logged in everywhere, for social reasons, for our own sense of digital identity.

Some Links:
http://en.wikipedia.org/wiki/Abstraction_(computer_science)
http://en.wikipedia.org/wiki/Abstraction_layer
http://en.wikipedia.org/wiki/WYSIWYG
http://konigi.com/interface/flickr-edit-place-fields
* I’d love to take credit for such an intelligent-sounding stance on design, but I first read about it here: Matthew Chalmers (2003)

January 31, 2015Comments are off for this post.

UI Sketching

I'm trying this new thing where I sketch reference UIs (quickly as I can). I always skip this sketching step because I have such a hard time with drawing a damn square.

December 2, 2014Comments are off for this post.

Most interesting (recent) read

I haven't posted here much, and that's basically because I'm lazy. I'm still here, though!

Quickly now, I'd like to share an article that - in my opinion - has a lot of meat, and all of it is interesting, if you're a designer.

Chinese Mobile App UI Trends

By Dan Grover

Some highlights include:
Chinese culture doesn't make a big deal of meeting strangers nearby through social apps.
CAPTCHA utilized on login screens (not just signup flows).
People really do use QR codes!
Moments – Just scroll to this part. I really dig the philosophy.

May 25, 2014Comments are off for this post.

Placeholder Content

I see it once in a while (latest Facebook update for example), but it's not very common that someone has clearly defined placeholder content that doesn't look like generic grey filler. Sonia Rentsch's site immediately loads with geometric placeholders in the same color scheme as the rest of the site. In fact, from a first impression I would say that this not-so-subtle graphic element really ties the whole site together. Wink, movie reference, wink.

Drag the divider thingy to compare the two screenshots. Or visit the site. Whatever.

April 20, 2014Comments are off for this post.

Dialog Box Wisdom

dialog box wisdom
Out of context, some of these one-liners you've probably seen in a dialog box have a deeper meaning. The last one is an honorable mention; a classic, non-tech artifact.


Everything not saved will be lost.
Nintendo "Quit Screen" message

Accept Change
Microsoft Word

Wait some time and then reconnect
Canon webcam

Remove all attachments
Microsoft Outlook

Make sure your own mask is secure before assisting others
Airplane safety card

I'm sure you can google for plenty more, but these were my favorites.

April 15, 2014Comments are off for this post.

Form field patterns for email address

Look, a post about UX! This will be quick.

I'm surprised that I haven't seen many design patterns on sign-in fields and how to make them as fast as possible. Yes, I've seen a few design examples, but no patterns that suggest innovation.

Lo and behold, hidden in the rough, the real estate app Trulia has the best email field I've ever seen! No comment on the rest of the app.


The second best has been the Belly iPad app (in-store, not consumer facing). They include an extra row below the iPad keyboard with buttons for common e-mail domains:

belly ipad keyboard

When I first saw that I thought it was incredibly clever. Ever since I've noticed the common domain suffixes on the iOS keyboard while holding down the [.com] key for certain inputs, I've been expecting Apple to integrate a similar email domain shortcut with the [@] key.


My takeaway

Why not use this? I can't think of a down-side.

Since they're using form field input masks (in a clever, auto-complete kind of way) it's not destructive or inhibiting user input. If your domain is not appearing in the masked (grey) suggestion, then simply keep typing the full address.

If your email is: Name@gmail.com
Then you can stop at: Name@g

If your email is: Name@gmaimer.com
Then you'll keep typing... (standard everywhere else).

UX is about making life easier for people, not necessarily solving problems. Yes, you make life easier by solving problems, but one solution will rarely fit all cases. Aim for the majority, and if you can design in such a way that the minority aren't negatively impacted by the design, you get major bonus points.

+2 points to you, Trulia. You go Trulia!

February 7, 2014Comments are off for this post.

Redesigning the Map of the Web

Leverage what information representation can be

It may seem like old news to some, but I very recently got around to reading Frank Chimero’s treatise about the essence of a pixel medium in What Screens Wantand found myself musing about a potential Web that doesn’t conform to our assumptions of what sites and pages are supposed to be made of. I also found myself explaining the whole article to a couple of developer friends that didn’t want to read it themselves.

One key point

The article leverages some historical references with materials in product design, but most convincingly compares the state of the Web as we know it to our centuries-old use of maps.

In the way that a map is a representation of territory, which is likely skewed for one purpose or another, we can use a new one that suits our needs and changing the map doesn’t mean changing the territory. In that same breath, using a different map doesn’t imply the territory was “bad.” The lesson for technology and the Internet here is that we have long since built off of one convenient representation of data, information, and the nature of its exchange. Our concept of a web page is just one map upon the territory of computers and the protocols to connect them.

Chimero quotes Ted Nelson to reiterate our position in the digital world:

"The world is not yet finished, but everyone is behaving as if everything was known. This is not true. In fact, the computer world as we know it is based upon one tradition that has been waddling along for the last fifty years, growing in size and ungainliness, and is essentially defining the way we do everything. My view is that today’s computer world is based on techie misunderstandings of human thought and human life. And the imposition of inappropriate structures throughout the computer is the imposition of inappropriate structures on the things we want to do in the human world."
— Ted Nelson, creator of hypertext

For more context, I recommend that everyone visits — or revisits — the site. The grand takeaway is that we can and should build something greater/better than than web pages. Not only can information be represented differently, but I think we are just barely touching on how flexibly it can respond to, and be interact with users. Laying back in a metaphorical Summer meadow with arms behind your head and eyes tracing the clouds, I could come up with wilder takes on a new Web, but it may be practical to focus on some softer, more accessible points.

Soft Revisions

Web content should branch off into more applications. While this already happens in mobile environments (perhaps too much so), the trend is inverted on desktop. As a service reaches a critical mass of content+popularity, or if the interaction is constrained by browsers, then it should live in more software than just a handful of browsers. Facebook is a great example of this thinking. Most people are using the app on mobile, but there is only a web interface on desktop. In the early days of twitter, I used the website and SMS to send tweets, but as soon as a desktop application appeared, that became my primary interface with the service. In that respect, it’s almost crazy that Facebook is just a website.

I’m not advocating for a fragmentation of the Internet into hundreds of desktop applications — that would be disastrous on many levels. When user adoption is no longer a huge issue, it could make sense for some sites tomature into internet-based software. Specifically to Facebook, as many people use it so frequently and often for long periods of time, it deserves an option to break out of the browser.

I think there’s a big opportunity for Finance; not necessarily a single bank, but perhaps a broader service (yes, MS Money tried that but I don’t see newanswers). I’m hesitant to list other recommendations, and can already see the counter-arguments, but I prefer to see that as a point of discussion.


Medium Revisions

No pun intended, but…

It’s already apparent that some sites are innovating how we share and interact — Medium.com being one of my favorites, for the side-line commenting that other sites are starting to adopt.

Hyper-specific sharing

I’m putting this in the bucket of “medium” revisions to the Web because it would require a bit more work than what already exists. With this idea I’m taking a note from two existing functions:

  • With Medium’s comment system, you can highlight a string of text, write a comment, and any user that reads the comment also see the same text highlighted again. This is the digital equivalent of pointing your finger to a point on the page that you’re referring to in a detailed discussion, or a well-loved book borrowed from a friend that shows underlines of passages that directly affected your friend.
  • Anchor links are a classic HTML tag that is seeing interesting use in contemporary websites. Long scrolling pages will use anchor link navigation to push users down to a segment in their single page site. Articles will reference specific explanations in a foot note. A List Aparttakes a subtle, but very useful approach by segmenting their articles so that an HTML literate user can share a specific section of the page to someone else. If you visit an article (example), and hover your mouse on a section title, it will display gray #anchor text that you can’t click but — with an experimental mindset — can append to the article URL as a bookmark you’re referencing when shared (example).

Combining the two features above would be a very interesting, and more personal method of sharing. Posting an article link on your social media account might interest a portion of your friends/followers, but it’s open-ended; a suggestion that “hey, you might be interested in this topic.” If you can highlight a paragraph or sentence, and have the page generate a dynamic anchor link to share with someone, that’s direct and suggests more intention. Akin to reading a book across from a friend, and handing it across the table so they can read just that one pithy paragraph, dynamic anchor linking and highlighting the referenced text is an excellent way to rekindle the human connections that seem to be fading away in our “social” media culture lately.


Hard Revisions

This the domain of true revolutionaries

Having been invited — so to speak — to think about an internet that doesn’t run on HTML, PHP, CSS, or any of these languages it has been raised on, I am starting to dream in abstractions. There must be alternative representations of our information-rich landscape, and most of us can only iterate or improve upon the existing system. These scrolling pages with various media buckets — usually requiring some kind of chrome/framework — that fit inside of a screen (if: responsive web design) are our current maps, representations of information.

What about the integration of more user info? Contextual browsing, listing, etc.? This implies some things that exist (foursquare), some things that don’t (the local paper where you’re online), and might be horrible ideas (who wants to read the local paper), but a very thin slice of that implication might be the turning point of something new and amazing.

Break the rules. If you can!

February 5, 2014Comments are off for this post.

Facebook Paper’s Pinhole Browsing

Read on Medium

Introduction

The following comes from my response to a company email (below) that asked designers for their opinion of FB Paper. I have not spent so much time as to give a critique of all aspects of the app. There are things I’d like to say about post creation, browsing profiles, and the new user onboarding for example, but simply didn’t take the time to go there. This is a hot topic for the moment, and I might continue to write/think about it, but there are a lot of intelligent people sharing diverse opinions out there. I think this can suffice for me.

The Prompt

TO ALL:
I used Paper for about 30 minutes tonight and felt there were some interesting interactions but overall was a bit frustrated. Definitely felt the “hook pain” the author here writes of… What do you guys think?

My Response

The design podcast, On The Grid, talked about their first impressions of Paper in this episode.

Opinions seem pretty polarized. A lot of people love it because it is agreeably much more polished than the regular functional Facebook app. I think if they had replaced their primary app with this one, there would be an uproar; but as a supplemental experience people, seem to like this new lens of the news feed (and other stuff?).

I’m not so kind in my opinion. I had high hopes of Facebook waning enough to go down a slippery slope of MySpacey death, but this app seems to appeal to the masses initially. As mentioned in the podcast and other sources, Facebook’s intent was to slow down our consumption of content with the hope that we pay more attention to each post. I believe these are smart guys, and they undoubtably understand their users better than I do, but I just can’t fathom slowing down Facebook without also reducing the amount of content.

Matas hopes that you’ll flip through slowly. “You really want people to spend a little bit of time with it and appreciate that content,” Matas says, “almost like when you go to a museum and you spend a little bit of time with each thing.” The Verge

I think that’s easier said than done. By only showing two whole thumbnails at a time, I am instead frustrated by the pinhole scope of content that I can browse. Perhaps they’re designing for the future, a vision of Facebook with much more interesting content, but the present feed I get from my connections is a 95:5 crap-to-interesting ratio. Slowing down and smelling the digital roses is not what I want from Facebook. I want to quickly skim frequently updated, vast amounts of content, until I land on an interesting picture, link, or juicy argument to read. Much like trying Windows phone for a week, I felt like my hands were tied. I wanted to zoom out.

This approach might work best for the other editorial sections they’ve vaguely collected (‘tech, culture, cute, etc.’) where content and curation is better. My complaint on this front is the lack of context. Looking at the Tech tab for example, what should I expect to find? Articles from TheNextWeb, NYTimes Tech, Engadget, A List Apart, The Verge? There’s quite a difference in the quality of writing and topics covered between sources. I don’t know how each of these channels are curated, how or if they’re connected to my account, and have no ability to customize them. At least with Flipboard, you can customize your content sources (note: I don’t use that app either).

The one thing I did like is vertical the swipe navigation. It’s nice that I don’t have to stretch my thumb across the screen to hit a specific region that has the link or CTA. I can hold my phone in one hand and a broad gesture moves me up or down in the hierarchy of channel, thumbnails, article preview, article detail. I agree the horizontal motion would get tiring. Maybe if they moved that row of thumbnails to the top of the screen it would be more comfortable, but I don’t like this browsing mode in the first place.

— whew —

Sorry for all the negativity.

I prefer ease of use, and am quickly skeptical idealistic presentations.

This app hinders my personal browsing preference of Facebook content, and does not seem to achieve the ideal they put forth. It might be a nice RSS reader, but then it would just be yet another RSS reader.

Note: This is also a Medium post

December 7, 2013Comments are off for this post.

UX Myth #22

UX MythsSource: UX Myths

When you copy, you don’t know the reasons behind a design, you’re not responding directly to your customer needs, you’re devaluing your own data.
Joshua Porter, Copycat Design

I will admit having looked to Amazon, and other high-traffic sites as a point of authority on certain design patterns. If I might not know where to start - with a product page, for example - then I begin with a reference, but remain en garde about what I choose to carry over to a wireframe. I always try to take a slice of design that I suspect is effective and boil it down; deducing what it is that works about a page element that catches my eye. I make it a point of practice to audit other designs of the same category and see what is repeated among the most effective. Typically the point I eventually arrive at is a "best practice" or slight variation. This may be a roundabout approach to design discovery, when you could just research best practices alone, but I feel this circumspect method gives me more context of how a certain "best practice" can take form, and eventually feel more confident about its use in my own design.

I know that's a really long way to say that I actually do research, instead of steal, but I think it's important to say that you shouldn't avert yours eyes per se from some sites with the longevity of Amazon. A huge user base will let them get away with poor design decisions, but it also means that the same large group of users have also been exposed to certain design patterns several times. Some designers want only to innovate, and I can understand that desire to leave your mark and constantly improve, but I'm of the Steve Krug camp that believes some innovation to be good, but different for the sake of different will leave users confused.

You'll likely shoot yourself in the foot if you just pull something straight out of an Amazon or Facebook, but look at the design and ask yourself "why is this better than this?"

December 3, 2013Comments are off for this post.

Simple Bank: Great UX all over the place

simple-small-applications

Great UX! Let users know when to expect a response, and how to get the urgent help they need, if panicked. It's all about the little big details.

See the notification below my message?
greatux

I could wax on and on about how much I enjoy Simple as a bank, service, and brand... but I'll spare you. If you want to try them out, it's still invite-only, but you can use one of my invites if you like (8 left).

*No, sadly there is no referral bonus in it for me, I just want more people to use it.

December 2, 2013Comments are off for this post.

TNW + Disqus

UPDATE: Trent Walton's article titled Human Interest has an excellent anecdote on this same topic. Look for the heading: we hope you enjoyed your stay.


I'm glad that a service like Disqus exists because it centralizes my interaction with various pieces of content and any responses I receive. Furthermore, you can take that same authentication to any site that uses the embedded commenting system (like mine) and you don't have to disclose your information or go through a sign-up flow for every site that you'd like to interact with.

I'm also a frequent reader of The Next Web (TNW) for the most recent startup developments, and occasionally the lists of can't miss apps. TNW + Disqus has been great for me. Recently I was adding a comment to one of the articles and got sent through a new authentication flow. This was unexpected, because Disqus is usually a simple interaction of signing in and posting the comment. TNW had an added hook however, and now asks users to sign up for a TNW account regardless of your existing Disqus account.

Why use Disqus if the end result of authenticating is to create a TNW account?

This hook that interferes with a user is what I call link jerking, illustrated in the tweet below:

Link Jerking
def. A design practice that increases the number of clicks between a user and the desired content or interaction with no apparent benefit to the user.

Named as such because they're jerking the user around with unnecessary clicks. It's kind of like an ad-wall, but even worse in my opinion, because it only takes one click to get through an advertisement.

The Next Web in this scenario is making you jump through extra hoops, just to get your name, info, and email subscriptions. Why use Disqus if the end result of authenticating is to create a TNW account? It would be shorter to just make a TNW account and use their own commenting system.

I've used Disqus on TNW many times before, but was disgruntled the other day when I had to follow many more steps than usual, and disclose personal information just to leave a comment. Yes, this sounds like a mountain out of a molehill, but I believe in simple solutions and attention to detail. Hopefully that level of attention helps me be a better designer, but I admit I'm quite sensitive to inconvenience as a user, which I immediately judge to be bad UX.

Typical user flow for a Disqus-enabled site

  1. Click log in to Disqus
  2. Fill in your credentials, hit log in, and wait to be directed back to the article
  3. Write your comment and publish it. The end.

New method on TNW

  1. Click log in to Disqus
  2. Fill in your credentials, hit log in, and wait to be directed back to the article
  3. Write your comment... Oh wait, you can't publish until you "connect with" TNW.
  4. Hit next in order to "connect," and you're redirected to a page requesting profile details and all content you've posted via Disqus.
    It doesn't feel like I am "connecting" with anything. That would imply I get something out of this interaction. Concede, and hit allow — because that's what we've been trained to do on the web.
  5. You're not done yet! The page redirects to a list of things you can subscribe to from TNW. They've taken the liberty of checking all the newsletters for you - how nice of them.
    I hope they don't have a UX Designer working for them, or they should know better. Up-sells should never be preselected, and never come before the desired interaction. This whole page is already one inconvenience; unchecking each of the boxes turns it into five, if we're counting clicks.
  6. After hitting continue to the up-sell, you're brought back to the comment field, and can finally hit post! Whew.

User Flow in Screenshots

Designing for accidents

Let's boil it down. They're designing for accidents. Yes, I happened to find this as a good example, but please don't blame TNW alone; many agencies and brands will do this. The logic goes like this: yeah it's annoying, but a good number of people will just hit 'next' to get through the process and sign up for our newsletters. Once signed up, another sizable chunk of users are too lazy or uninformed about how to unsubscribe.

If you're The Next Web, or any other site, please consider this UX question:

    Would you prefer users accidentally subscribing to a newsletter or clicking an up-sell and likely feeling dissatisfied, tricked, or delayed; or would you want them engaging/interacting with your content?

Users could be trying to comment on an article, or buy a plane ticket. Shouldn't your priority be facilitating that behavior, and have the subsequent positive experience motivate subscriptions or additional purchases?

Click, Feel, Think

Hopefully my personal frustrations haven't overshadowed the basic User Experience lesson above. I love encountering good design, but it's poor design that can teach us the most. While you browse the web and go about your routine, I suggest you pay special attention to seemingly minor emotional responses to different tasks you complete. These responses stick with you regardless, and shape your opinion of a brand and its services. I try to keep a mental notebook of these reactions to inform my own designs. I become a better designer for users by being an observant user more often.

Click, listen to what you feel, and think about why.