Bright Matrices

Writings & musings of Mike Zavarello (a.k.a. brightmatrix), a "red mage" web developer.

Category: Web Design

A Confusing User Experience Betwixt Social Sharing Buttons in Twitter and SoundCloud

I recently joined SoundCloud, a social network for music and audio files (or, audiophiles, if you prefer). Overall, their user experience is simple, yet solid. As with other social networks, you can “like” a song, share it with your network (the user the term “repost”), add it to a list, or perform other tasks (download, share, buy). There are prominent buttons with clean, recognizable icons: a heart icon for “like,” a recycling arrow for “repost,” and a box with an arrow leading outwards for “share.” These are notably similar to Twitter’s “favorite” and “retweet” options, and, this is where I’ve noticed some problems.

When you view a single track in SoundCloud, the like, repost, and other icons are to the bottom left. On the right, there is a second set of similar icons with numbers next to them. These are “status” icons that show how many times this track has been played, liked, and reposted. If you click on any of these, you’ll see a page of the SoundCloud users who played, liked, or reposted the track.

A single track in SoundCloud. Note the sharing buttons at bottom left and status icons at bottom right.

A single track in SoundCloud. Note the sharing buttons at bottom left and status icons at bottom right.

Simple enough, right? Now, if you view your stream, which shows a series of tracks in the left-hand side of the page, related tracks will appear to the right in a sidebar. These have the same features as the single track page, except they are condensed in a smaller space.

Here's how the interface changes when you see SoundCloud tracks as related items. The icons are smaller and much closer together.

Here’s how the interface changes when you see SoundCloud tracks as related items. The icons are smaller and much closer together.

The play button is now mixed in with the like, repost, and share buttons, and these only appear when you hover over the track. They are now much closer to the status icons. What I’ve found is that I keep wanting to click on the status icons to perform a task, but, as with the single track page, this shows you who played, liked, or reposted the track. It doesn’t perform the action I expected.

This is a confusing action to me. Why? Because it is so similar to how Twitter handles these actions, and yet, the results are not the same.

On Twitter’s web interface, the main actions, reply, retweet, favorite, and more, are presented with their respective icons. The status icons, however, are shown as numbers (see the retweets and favorites titles below the tweet preview). Clicking on those numbers gives you the same result as SoundCloud (a list of who retweeted or favorited that tweet), but, because Twitter does not repeat the icons, there is a clearer distinction between these pieces of information and the actual actions you can take on this post.

A basic tweet. Notice how the actions are kept separate from the status icons, which are only numbers here.

A basic tweet. Notice how the actions are kept separate from the status icons, which are only numbers here.

The social media management tool Hootsuite does something similar in their interface. In Hootsuite, you view tweets as a series of vertical columns called a “stream.” The number of times a tweet has been retweeted is easily visible below the tweet itself. As with Twitter, clicking on this status icon shows you who did the retweeting. The actions you can take on that tweet appear when you move your mouse over the post. They are kept separate from the status icon, and, since they appear when you hover over the tweet, it’s clear that these are actions you can take right now.

Hootsuite's interface shows very simply the actions you need to take and who's sharing each tweet.

Hootsuite’s interface shows very simply the actions you need to take and who’s sharing each tweet.

I think it’s great that disparate social networks like Twitter and SoundCloud are using similar actions and iconography. It’s forming a universal language that reduces the burden on users, who now need to learn one less set of terms or icons when moving from network to network. The problem, though, is that if you as a user learn to expect one set of behavior on one network, it’s confusing when the expected behavior on the other network doesn’t match up to what you’ve experienced elsewhere.

I think SoundCloud would do itself and its users a great benefit by mimicking how its older cousin, Twitter, manages its action and status icons and limit the number of misclicks.

“Use Browser X”? Spare Me This Mockery of Justice!

Spare me this mockery of justice!Today, I experienced something that, as a web developer, really burns my blood. When I inquired about a specific web application’s flaws within a certain web browser, I was informed that I should be using “browser X” instead. As the doomed Transformer proclaimed when condemned to the Quintesson pit in Transformers: the Movie, “Spare me this mockery of justice!”

There are exceedingly few reasons why you should ever tell the users of your web application to use a specific browser over another. If you’re on the public domain, or, if your users can pick from more than one browser to get to your application, account for it. Don’t force the users to bow to your decision; it comes across as exclusionary and elitist. The days of “best viewed in Internet Explorer/Netscape Navigator” are far, far behind us.

Of course, there are plenty of whiz-bang features in HTML 5, CSS3, etc. that have yet to be adopted by all browser variants. Publishing experimental or proof-of-concept websites and web applications that push the envelope and challenge previous assumptions on how we interact with the web is perfectly acceptable. However, if you intend to have a product that will be used by a broad audience, alienating a key portion of your users will do you no good, especially if the “unworthy” browsers introduce glitches or errors that break a key feature. Even minor flaws will make it seem as though your product is buggy, incomplete, unprofessional, and sloppy.

Now, I certainly don’t advocate building something that conforms to every browser variant throughout time; that’s a fool’s errand. Your web analytics program can educate you about which browsers and variants your audience is using. Pay attention to that data and use it to establish your lowest common denominator. My basic rule of thumb is to code for all browsers with greater than one percent of your total market share. You can also choose to “degrade gracefully,” where any fancy features unreadable or unusable for less modern or less compliant browsers can still be operated effectively and correctly. Check your statistics regularly, as market share can change quickly. Usage can often differ dramatically between countries, so, if, for example, your European users prefer Firefox over Internet Explorer, make sure that version of your website is ready for them.

Pay attention to your mobile users as well. Those folks using iPhones and iPads will show up as Safari users in your web analytics, so keep track of your mobile device usage in tandem with your browser statistics. You may wish to consider a mobile-friendly version of your web application, a dedicated app, or a responsive web design that transitions smoothly no matter where your users are browsing. Again, pay attention to your percentages to decide what path to take. It never hurts to ask your users directly, whether through site intercept surveys, focus groups, or simple e-mail questionnaires.

There are plenty of ways to avoid the “browser X” debacle. Spare us all the mockery of your self-imposed justice and build your web application for everyone. You have no excuses!

Image source, Google Images: http://www.anivide.com/gallery.html?view=158846&pid=1318514144.

What a Difference a Year Makes

What a difference a year makes.

Next month will mark a full year since I succeeded my previous boss as leader of my work’s web team. If you had asked me two years ago whether I’d want to move ahead in my career as a manager/leader or stay in the trenches as a dyed-in-the-wool developer, I wouldn’t have hesitated to tell you I had no desire to administrate. I liked being the specialist, where I could touch the raw code and pixels. I didn’t want to get involved in all the diplomatic back-and-forth that often accompanies a leading role. But, when my boss announced she was moving onward last November, duty called and I accepted the stripe on my sleeve. I’m really glad I did.

Turns out, I actually like management. It’s been gratifying to take the reins on projects and tasks now under my stewardship, building on relationships I had started in my developer years to carry them forward. I’ve also enjoyed taking on career development, making sure the developers on my team have all the tools, resources, and time they need to succeed in their projects and expand their professional expertise. The amount of time I actually touch code these days has decreased to less than 10% (and social media even less, but I’ll get to that in a moment), but that’s OK; my duties are elsewhere now. I’ve learned to rely upon and trust the expert opinions of my staff to carry out the objectives and strategies we craft together. Delegation, something I thought I would have a hard time getting used to, is now working smoothly.

Now comes the hard part. Yes, I’m enjoying management, but the amount of time I have on my hands to handle the “one true love” from my past life, social media, has dwindled dramatically. Whether or not you’ve noticed, this blog has also floundered. I always knew that social media was a time-consuming effort in order to get it done properly, but I’ve come to fully respect the sheer amount of dedication and regimented time management it often requires. I’ve had to peel back my level of involvement to a supervisory and technical support role while others, including some amazingly talented and level-headed junior staffers, have done the heavy lifting.

As with anything else in life, this transition has been a balancing act. Balancing projects, tasks, personnel, time, and making hard choices based on the “situation on the ground.” Have I given up social media altogether? Hardly, but I’m much quieter on Twitter, Facebook, et al. these days. I still have no Pinterest to speak of. I’ve found less to take away from new media these days, but, as an article I read today from Frank Strong aptly indicates, “you get out of social media what you put into it.” It is what it is.

As the saying goes, “change comes from within,” but it also came come from without, your environment shaping your evolution. This past year has been must that for me. An evolution.

Some Helpful Advice from a Nitpicky Web Developer

Ever heard the phrase “the devil’s in the details?” I’m here to tell you it’s true!

For every clean, elegant, and professionally designed website or web application, there are droves of slipshod, sloppy, or just plain lazy pieces of code I encounter every week. What pains me most is that many of these quirks are really simple to fix and can go a long way to adding to your reputation and credibility.

I’ve put together six examples of detail work that you should include in your digital design and development. These suggestions may seem nitpicky, but as a professional web developer who’s been coding and designing websites for over a decade, these “fit-and-finish” items are the ones that always jump out at me when browsing a site or web application.

1. Display Current Copyright Dates

Most websites these days have copyright dates in their footers, usually followed by the formal name of the company or organization and legal text such as “all rights reserved.” Make sure the year displayed here actually matches the current year! Nothing says “out of date” like a mismatched copyright year. This is especially glaring following New Year’s Day. Scripting languages such as ColdFusion, JSP, PHP, and JavaScript can easily handle dynamic dates, as can content management systems.

2. Match Link Names and Page Titles/Document Names

Your users want to get to your content as easily and quickly as possible, so don’t make the process more complicated or confusing by using mismatched names in your website links. Make sure the language you’re using in the link text is a good match, if not exact, to the document or resource at the other end. You want your users to be confident that what they clicked on is what they needed. And please, avoid acronyms or business jargon! Simple language is best.

3. Use Accurate Singular/Plural Descriptors

This is one of my personal pet peeves: if you’re going to display a list of items, show a group of updates, or otherwise show a collection of objects dynamically, always add a condition in your code to change the descriptors from plural to singular when there’s only one item. I can’t stand to see phrases like “1 search results found” or “1 new tweets.”

4. Link Banner Graphics Back to the Home Page

Users have come to expect that clicking on the website’s banner or logo will take them back to the main page of the site. Make sure your banner is linked this way so users won’t get frustrated, or, at the very least, give them an obvious way to get there using a “Home” link or icon (a house is typical). For mobile applications, a “Home” icon in the contextual menu can help solve this problem.

5. Use Clear and Distinct Timestamps

If you’re managing a news website, blog, or any site or application that has time-specific or time-sensitive content, always show the publication date or the “last update” and make sure it’s easy to locate. This is especially important for users arriving at your site from search engines; they’ll want to know that the content you’re providing is the most current or up-to-date for their needs. I personally prefer to see timestamps right below the headline/byline, or, if that’s not possible, at the bottom of the article before any comments.

6. Make Your Social Channels Prominent or Easy-To-Find

Is your organization or corporation on Twitter, Facebook, or YouTube? That’s great, but don’t curtail your efforts by burying the channels in your “Contact Us” or “Resources” pages. If you’re actively using these channels, place social icons in prominent locations, such as the header (near the search box is a great spot for visibility) or anywhere where other contact information, such as phone numbers, is displayed.

What Advice Do You Have?

What about you, my faithful visitors? What common mistakes or omissions do you come across in your browsing that you would suggest as improvements to the site’s owners and developers? Share your recommendations in the comments below.

© 2017 Bright Matrices

Theme by Anders NorenUp ↑