Archive for the ‘UI/UX’ Category

File Under: Identity, UI/UX

Twitter Creator Believes You’re More Than Just a ‘User’

The UserLand Software logo. Image: Dave Winer

What’s in a word? A lot according to Jack Dorsey, the CEO of mobile-payments company Square. Dorsey, who also help create Twitter, believes that the technology industry needs to reconsider the word user and find something less “derogatory” to refer to people that use its products and services.

As he points out, the word user in the context of software has mainly negative origins, often being used to refer to “a person who wasn’t technical or creative, someone who just used resources.”

That’s hardly how most of see ourselves when we log in to Twitter, Gmail or Facebook.

“It’s time for our industry and discipline to reconsider the word ‘user,’” writes Dorsey on his Tumblr blog. “We speak about ‘user-centric design,’ ‘user benefit,’ ‘user experience,’ ‘active users,’ and even ‘usernames’…. While the intent is to consider people first, the result is a massive abstraction away from real problems people feel on a daily basis.”

It’s easy to sympathize with Dorsey’s argument; after all, who wants to be referred to by a word otherwise mainly associated with drug use? Indeed I try to keep the word user out of Webmonkey articles for just that reason, but sometimes writing around user is more awkward than just, er, using it. That combined with the fact that the best alternative Dorsey can come up with the is the word customer, which is better but can still be equally dehumanizing in some contexts.

As with most debates about word choice and language it comes down to the intent the word is being used to convey. As RSS founder and longtime software developer Dave Winer points out:

Every decade or so this question comes up. Why do we use that awful U-word to describe our users? It’s hard to even formulate the question without sounding stupid. And every time the discussion comes up, it lasts a while before everyone gives up because there really aren’t any better words, and this is the word everyone uses so what are you going to do.

What Dorsey is doing is eliminating the word from Square’s vocabulary, telling employees that customer will replace user. He goes on to add that “we have two types of customers: sellers and buyers. So when we need to be more specific, we’ll use one of those two words.”

Dorsey also says he’ll pay out $140 if he ever uses the word again.

Winer believes in a different approach: embracing the word user. Winer even went so far as to name his second company UserLand Software.

In the end what matters is not so much what you call your users, but how you treat them. “The answer” writes Winer, “is to love those users so much that they don’t mind being called users. That’s an art a lot of tech companies have yet to master.”

File Under: CSS, UI/UX, Web Standards

Create More Accessible Color Schemes With ‘Contrast Ratio’

Quick, easy contrast ratios. Image: Screenshot/Webmonkey.

Making websites accessible to users with disabilities — things like poor vision, blindness, limited dexterity — has been central to the mission of the web’s overseers since the dawn of the browser.

Following accessibility guidelines actually helps just about everyone, especially when it comes to making your site readable. And one of the cornerstones of accessibility is making sure your background and text colors have proper contrast ratio. But how do you know what’s a proper contrast ratio? For that turn to WCAG 2.0, a set of accessibility guidelines that most government and many private sector websites adhere to.

Unfortunately, while the W3C has plenty of guidelines for building the web, it’s not in the business of creating tools to go with them, which means bringing the guidelines into the real world can sometimes be a hassle. That’s why developer Lea Verou built this awesome contrast ratio tool. Verou works for the W3C (though the tool is not an official W3C project) and needed a way to ensure that her color choices passed WCAG muster. That’s exactly what the contrast ratio tool does: give it any form of CSS color — hex, rgb(), rgba(), hsla(), etc — and it will automatically calculate the contrast ratio and let you know which level of the WCAG guidelines your contrast meets.

Verou’s contrast calculator even accepts semi-transparent colors for sites using overlays. To make the semi-transparent colors work Verou had to write her own algorithm. For semi-transparent backgrounds, the WCAG contrast ratio is presented with an error margin, since the actual contrast can vary depending on what’s under your semi-transparent overlay.

The contrast ratio tool supports all modern browsers and has “basic support for IE9.” The code is available on GitHub.

Also worth noting is Verou’s blog post on accessibility and contrast ratios. Like many of us, Verou “used to think that WCAG-mandated contrast ratios were too restrictive and basically tried to force you to use black and white.” The truth is, as Verou writes, “in practice, I found that in most cases they are very reasonable: When a color combination doesn’t pass WCAG, it usually is hard to read.”

Cure the High-Res Blurs With SVG and Icon Fonts

The rise of high-resolution displays means that web developers need resolution-independent graphics. The good-old PNG icons we’ve been relying on just aren’t going to cut it for much longer.

It’s true that a slightly blurry icon or logo on the iPad probably isn’t going to ruin a site by driving visitors away in droves, but it is a problem, and one that will only become more obvious as higher-resolution screens proliferate.

At the moment there are essentially two ways to swap out your PNG icons for something a bit crisper: icon-fonts or SVG graphics. Naturally, neither is perfect — the last time something worked perfectly on the web Tim Berners-Lee and friends were the web’s only users — so it’s worth looking into the advantages and drawbacks of each.

That’s exactly what UIX designer Simon Uray recently did, breaking down the good and the bad of both icon fonts and SVG images. Give Uray’s post a read for the finer details on both, but here’s the short story: icon fonts are probably your best bet at the moment, though you’ll have to live with the fact that some icons are a tiny bit blurry on traditional displays.

Since at the moment the vast majority of screens on the web are not high resolution, adopting icon fonts over the PNGs you’re using now might be a case of premature optimization.

As Uray writes, “sorry, if you’re looking for a silver bullet, I’m afraid it doesn’t exist.” To that we might add “yet.” But SVG support in browsers (one of the chief problems with SVG is that it isn’t as widely supported as icon fonts) continues to improve. There’s also always the option to use them all. “Maybe best,” writes Uray, “is to use PNG served in many different sizes for your high fidelity, multi-color logo and other graphics… SVG icons for your navigation that stays the same size, but also look sharp on Retina displays [and] Responsive inline SVG for bars and charts and an icon font for all your different button sizes.” The best of all worlds.

For more on icon fonts, be sure to check out Chris Coyers interactive write up on how to use icon fonts.

File Under: UI/UX, Visual Design

The Eephus League Magazine: Pitch-Perfect Web Design

Baseball season is already well under way, but it’s never too late for another site about America’s favorite pastime — especially when it’s as awesome as the beautiful Eephus League Magazine.

Even if you have no idea what the name means — and fear not, even some baseball fans aren’t familiar with the Eephus pitch since it isn’t throw much (though current Red Sox reliever Vicente Padilla has something like an Eephus pitch) — the site is well worth a visit for its gorgeous layout and design.

The Eephus League Magazine is written and produced by web designer Bethany Heck, but if the interface and navigation looks slightly familiar it’s probably because the underlying code is the work of Ian Coyle, creator of Nike’s Better World site, which we featured last year.

Since then Coyle has also released Edits Quarterly, an online magazine of photography and short films. Edits is what inspired Heck to put together The Eephus League Magazine. And it’s not hard to see why, with Edits Coyle managed to create something even the so-called pros of the magazine publishing world can’t seem to make — a digital magazine that doesn’t suck.

What makes Edits — and its offspring like Eephus — remarkable is that it manages to feel like reading a print magazine even though you’re really just scrolling down a webpage. For example, there are what you might call “pages” in Coyle’s design, but they aren’t simple skeuomorphs like you’ll find in e-readers. Instead the “pages” just serve to move you through the content and keep articles separate even as they are all together on one page. Scrolling remains vertical; there’s no awkward “page flipping” actions. The Eephus League Magazine uses Coyle’s JavaScript, so moving through it feels just like browsing Edits, but Heck has made a few adjustments to fit Eephus‘s own layout and images.

In the end the experience of both magazines is different enough to catch your eye, but not so much so that it overwhelms the content. But don’t take our word for it, head over to Eephus and be sure to check out Edits Quarterly as well.

File Under: Programming, UI/UX, Web Basics

Video: Progressive Enhancement 2.0

A webpage doesn’t have to look the same in every browser. In fact, a webpage shouldn’t look the same in every browser, according to former Yahoo developer and JavaScript guru, Nicolas Zakas.

Zakas, who spent five years as the front-end tech lead for the Yahoo homepage, recently spoke at the March BayJax Meetup group about what he calls Progressive Enhancement 2.0 — offering users the best possible experience given the capabilities of their device.

Not the same experience, mind you, but the best possible experience. That means progressively enhancing sites according to the device’s (browser’s) capabilities.

Progressive enhancement is perhaps best summed up by the famous Mitch Hedburg quip, “an escalator can never break, it can only become stairs.” In other words, if you’re building websites well they never break, even if you look at them in Lynx. The site may not look the same in Lynx as it does in, say Chrome, it may not function as smoothly, but the core content is still there and can still serve as a stairway that gets people where they want to go even when the enhanced ease of the escalator is absent.

More practically, progressive enhancement means starting with the least capable devices — an older phone, Lynx running on Windows 95 — and then adding more sophisticated features based on screen size, bandwidth and so on.

Zakas also takes on the common assumption that a web “page” is analogous to the printed page. In fact Zakas argues the web is more like television, which has a similar separation of content and device. In that analogy old browsers are like black and white TVs. No one expects a black and white TV to play HD content, but everyone would be disappointed if you served black and white content to an HD TV. Hence the need for progressive enhancement.

If you’re well versed in the history of the web the beginning of the video may be a bit slow, but stick with it. Also be sure to watch the questions at the end where Zakas addresses how to progressively enhance more application-like web pages.