Continuous partial annoyance

Twitter have been rolling out a new redesign. Thanks to Dustin, I got to try it out when the switch was flipped.

As with any redesign, the initial reaction tends to be It’s different! I fear change! Therefore I dislike this. See also: redesigns of The Guardian, Last.fm, Flickr, BBC…

With Twitter, that initial knee-jerk fades pretty quickly because the new site is undeniably beautiful. The visual design is top-notch.

There’s a nice little addition in the markup, too. The body element has a class name that you can hook into for user stylesheets. This is a very, very, very good thing. For example, my class name is .user-style-adactio so I can add some declarations to my user stylesheet.

The first rule simply hides the egregious Trending Topics and Who To Follow features (and I love that Who To Follow abbreviates to WTF):

.user-style-adactio .trends-inner,
.user-style-adactio .wtf-inner {
 display: none !important;
}

By the way, a user stylesheet is the only time it’s acceptable use important! in your CSS.

My other rules adjust the layout a bit when the viewport gets smaller. It’s just a quick little hack and it’s not great but it’s handy if, like me and Norm!, you don’t like a site dictating how wide your browser window should be. Thanks to user stylesheets, you can fix this:

@media screen and (max-width: 995px) {
 .user-style-adactio #page-container,
 .user-style-adactio #page-outer {
  min-width: 590px !important;
 }
 .user-style-adactio .dashboard {
  float: none !important;
  clear: both !important;
  max-width: 0 !important;
 }
}

Handy tip: if you use Dropbox, store your user stylesheet there. That way, you can point multiple machines to the same stylesheet. I’ve got my laptop at home and my iMac at work pointing to the same CSS file.

There’s one aspect of the new Twitter redesign that I really don’t like, and I can’t fix it with a user stylesheet: infinite scrolling. As I said (on Twitter, of course):

I’m allergic to infinite scrolling

Notice that I didn’t say that infinite scrolling is wrong, it’s just wrong for me. There’s nothing wrong with peanuts unless you have a nut allergy.

The reason that I don’t like infinite scrolling is that I actually use the scrollbar to scroll. That is, I move my cursor over the scrollbar, click and drag. Infinite scrolling makes this unworkable: the scrollbar under my cursor jumps around as new content is loaded.

I figured that in this day of mouse wheels and trackpads, I must be in the minority with my old-fashioned scrollbar usage. I asked for data on Twitter, and sure enough, most people who responded said they used the mouse wheel, the trackpad, the space bar or arrow keys. Though some people still found the scrollbar useful as a visual indicator of how long the page is …which is also negated by infinite scrolling.

Interestingly, while most of the people who responded to my query on Twitter said they hardly ever use the scrollbar, the Firefox heatmap shows that it’s one of the most used interface features. That was a much larger sampling: 117,000 users.

Still, I can understand why Twitter have decided to go with infinite scrolling. If I’m in the minority in thinking it’s horrible, that’s my problem. I can’t even claim that it’s an accessibility problem: it requires more manual dexterity to use the scrollbar than to use other methods of scrolling.

Twitter could add a user setting to switch off infinite scrolling—perhaps replacing it with the old style “more” button, which I liked—but that’s a cop-out. Whenever something gets shunted off into a preference, it’s generally a sign of indecision in the design. The Twitter redesign isn’t indecisive: it has a very clear and consistent visual and interactive design vocabulary. It just happens that one aspect of the UI vocabulary doesn’t mesh well with my own usage pattern.

So, in this case, the solution may well be for me to change the way I use the site. It still irks me, though. I’m generally against any interactions that happen without an explicit request from the user, such as revealing data and functionality on hover, for example. Twitter avoids that particular anti-pattern but with infinite scrolling, the act of moving down the page is interpreted as a request to load more data. I would much prefer to request that data explicitly with a button or link. Of course, that requires that the user do more, so it could be argued that infinite scrolling actually reduces the number of interactions that the user is required to do …assuming that the inferred interaction is in fact the desired interaction. That’s a big assumption.

On the face of it, it would seem that Twitter are being somewhat dismissive of the scrollbar as a UI element. But that’s not true. While they are reducing the usefulness of browser-native scrollbars by using infinite scrolling, they are, at the same time, replicating the functionality of scrollbars but non-natively. If you reveal a side panel—by clicking on someone’s Twitter username, for example—and if the content doesn’t fit within the viewport, then a non-native scrollbar is generated.

scrollbars

As I said, the new redesign is wonderful. I’m just nit-picking ..but it’s a big nit.

Have you published a response to this? :

Comments

I often use user agents with no visible scrollbar of any kind (uzbl, android browser, maemo browser). I don’t think I have ever actually clicked on a scrollbar in all of my time using computers… in any application. Alright, maybe I did once or twice.

Tumblr introduced Infinite Scrolling for the Dashboard at one point, and that feature has always been an option, not a mandated implementation. I personally think it’s great, for certain sites—Tumblr and Twitter both fall into that category for me—but I definitely see the value in making it optional for users to choose.

Also, I’m not surprised by the Firefox heatmap showing heavy scrollbar use: as I responded to you on Twitter, my parents both use the scrollbar (though my mom is getting the hang of swiping around the trackpad with multiple gestures, partly due to sudden heavy iPhoto use). I’m fairly confident they represent the casual Internet user a lot more than I do. Where does Twitter’s audience fit in? I don’t know; is it more tech savvy, or not so much anymore these days having gone so mainstream? I think a first week or so of “#NewTwitter” being available to most of its users will reveal a lot about that.

# Posted by Faruk Ateş on Thursday, September 16th, 2010 at 11:22pm

I’m looking forward to trying the new design. The reaction so far from the lucky few does seem very positive.

On the current (soon to be old) Twitter, I find clicking ‘more’ to load the next batch of tweets can quickly make the page use up a lot of memory on my netbook and make scrolling quite slow. It will be interesting to see if the new infinite scrolling suffers from this too.

There’s something to be said for pagination (ideally Ajax driven), as keeping the number of elements on the page down can really make a difference to performance on portable devices with limited memory.

# Posted by Ben on Thursday, September 16th, 2010 at 11:35pm

I applaud you, but you are slightly insane.

Mousing to the scroll bar, mousing to the more button, then mousing back to the scroolbar again is not the best use of time or context. Whatever turns your crank tho.

And I’ll add that with the more button, the true length is still concealed.

# Posted by NICCAI on Friday, September 17th, 2010 at 12:23am

Hi Jeremy, I’ve not used the new twitter yet, but I too use the scrollbar and find the same feature on Facebook very annoying. I have a potential solution that I think would gel well with your use of a user stylesheet.

In the new version, new content is presumably loaded, or at least displayed, when the user scrolls to the bottom of the page. If this new content is given a specific class then you could choose to not display it by adding an entry to your user stylesheet. This would leave the functionality unchanged for everyone else. Then, the "more" button (which I guess may not still exist in the new version) could remove these classes and you would have the original functionality back.

first! ;)

p.s. best part of the #newtwitter design is the new DM UI - it rocks.

# Posted by Tantek on Friday, September 17th, 2010 at 8:04am

I share your feelings on infinite scrolling. I find it uncomfortable. I have a desire to reach to bottom of the page. When I have hundreds of unread items in Google Reader I can never get to the bottom of the page. This is obviously a psychological issue for me though!

I actually would rather have pagination rather than loading more items onto the current page. This is how the mobile version of Twitter used to work. Now it loads more stuff into the page which is a total usability nightmare on my phone (Opera mini browser). Each time "more" is loaded, I end up at the top of the page and have to scroll down to find my place — to remember where the "more" begins!

The Twitter redesign hasn’t been rolled out to me yet. I’m curious how it works on a touch interface—the iPhone in particular. Does the site feel more like a native app? In particular, does infinite scrolling allow the user to update with the flick of a finger as one can with a "pull" gesture within the iPhone app?

The pull gesture is nice because a user can scroll lightly to simply scroll the content or scroll aggressively to request new content and scroll to that content at the same time. Perhaps similar functionality could be build into the desktop site to give the scroll wheel the ability to scroll traditionally and make additional requests for content. Perhaps the user could spin the scroll wheel a second time after reaching the end of the document to request more content? But how would this be communicated to the user?

I think Twitter has a talented team of designers. I’m curious to see if they address this problem and what the solution will be. It may just be that this problem disappears as scrolling comes to take on new meaning as the web and the devices we use to access it continue to change.

Actually, infinite scrolling was one of the things I really liked about the redesign—though for me the downside is that I continue to read and read not realizing at first I’ll never reach the bottom. LOL

I also really like the little arrow on the top right of a post that lets you see the convo—though I wish it showed a bit more of it than 3 tweets (at least that’s what it seems I’m seeing). Still overall, the update is very good.