Archive for the ‘UI/UX’ Category

File Under: Programming, UI/UX

Unleash an Army of Bees With Machine Guns on Your Website

Want to know if your website can stand up to a sudden, massive deluge of traffic? Sure, you could use some of the available tools like Flood, JMeter or The Ginder. But none of those options have bees with machine guns.

The news applications team at the Chicago Tribune, has released a new tool it calls Bees with Machine Guns that uses Amazon EC2 servers to launch what amounts to a distributed DoS attack against your site.

Now only is it an incredibly handy way to load test a website under arguably more realistic conditions than you’d get with other load testing tools, Bees with Machine Guns has awesome print statements that will turn your terminal session into a war zone.

For example:

$ fab -f bees.py attack:http://YOUR-DOMAIN.com/,1000,100
Read 2 bees from the roster.
Connecting to the hive.
Assembling bees.
Each of 2 bees will fire 500 rounds, 50 at a time.
Stinging URL so it will be cached for the attack.
[localhost] run: curl http://YOUR-DOMAIN.com/ >> /dev/null
Organizing the swarm.
Bee 0 is joining the swarm.
Bee 1 is joining the swarm.
Bee 0 is firing his machine gun. Bang bang!
Bee 1 is firing his machine gun. Bang bang!
Bee 0 is out of ammo.
Bee 1 lost sight of the target (connection timed out).
Offensive complete.
     Target failed to fully respond to 1 bees.
     Complete requests:     500
     Requests per second:   81.670000 [#/sec] (mean)
     Time per request:      612.188000 [ms] (mean)
     50% response time:     358.000000 [ms] (mean)
     90% response time:     1541.000000 [ms] (mean)
Mission Assessment: Target successfully fended off the swarm.
The swarm is awaiting new orders.
Done.

Keep in mind that this is essentially a DoS attack. Launch it against a site that isn’t yours and very bad things will happen to you. But for testing your own site’s performance, Bees with Machine Guns is awesome — all you need is an EC2 account and the script.

Major bonus points if your site can fend off the bees with miniature pies:

See Also:

File Under: UI/UX

Design for Serendipity (And Drinking Monkeys)

Part of the beauty of the internet and HTML is its inherent serendipity — links lead you somewhere, and other links lead you somewhere else, beyond, anywhere. Yet, serendipitous as the web may be, few sites encourage this sort of haphazard exploration.

As developer Derek Powazek writes, “Serendipity powers the social web. It’s why every website has a “share this” link. Serendipity is at the core of why Twitter is fun, YouTube is valuable, and everyone you know has a Facebook account.”

In fact, argues Powazek, “we should be designing for serendipity.”

Unfortunately, things like the bottom line, advertising dollars and other external forces mean web designers are tasked with keeping you on a page, not sending you off to discover something else. Even Powazek’s examples, like YouTube’s “related videos” section is inherently designed to keep you on YouTube’s page. But the way it keeps you on YouTube is by creating a potentially serendipitous experience.

Nothing is going to change the need or desire to keep visitors on your page, particularly if eyeballs on those pages are your source of income, but adding the element of the accidental discovery to your site can make it even more valuable for your visitors.

Here’s more advice from Powazak (who is a former Webmonkey, by the way):

If you make a website, take a look at it and ask yourself, “when someone comes here looking for one thing, where do I have the opportunity to tell them about something else?” It could be in a footer, for example. This can be tricky, because you don’t want to interrupt a self-directed experience. Just look for the cracks where you can leave hints about what else is available. Hint: Newspapers have been designed this way for years. Crib, crib heartily.

There are many serendipitous routes that lead people to your stuff. Understand what they are and nurture them. But don’t become over-reliant on them. Design your stuff to create serendipitous connections between things. Look for every opportunity to hint that there’s much more to be discovered. Take the time to design the serendipity in to the experience.

Or, you could watch this video about drinking monkeys and see where that leads you:

Bookshelf photo by Juhan Sonin/Flickr/CC

See Also:

File Under: Browsers, UI/UX

An Alternate Version of Firefox’s Home Button

Back at the beginning of July, we saw the release of Firefox 4 beta 1. The first beta version of Mozilla’s next browser shipped with some important user interface changes — most notably, Windows users got tabs-on-top and the new Firefox Button. It’s a button that sits at the top of the browser window and contains all of the most-used menu options, neatly nested in hierarchical menus and accessible via one click.

The final browser isn’t expected until October, but the team is still experimenting. The picture above is one such experiment, a rough first draft at “flattening” the new Firefox Button, which turns it into something less of a “Greatest Hits” menu and more of a browser dashboard.

Firefox creative lead Aza Raskin, who really did this to satisfy his own curiosity, writes:

Hierarchical menus are almost always slower to use than flattened menus. This is a first-draft pass at flattening the Firefox Button’s menu. For things like accessing bookmarks, I’ve left the menu as a secondary action. In truth, I ran out of time while doing the bottom left hand corner of the mockup and so it is still very raw and not right. I’ve also moved more rich interactions to the right side pane. Letting us bubble up interesting add-ons and extension points inside the Firefox menu, as well as give real indication and controls to Sync.

Keep in mind that this design is just an idea and most likely will not be part of the next Firefox. But Raskin’s design could push the button in interesting directions.

See Also:

File Under: Social, UI/UX

Cliqset Cleans Up Streams, Integrates Twitter

Cliqset completed a significant upgrade to its social sharing website Wednesday.

The site now fully integrates Twitter, and it has refined its aggregation system so you get a much more streamlined, easy-to-digest view of your friends’ activities across multiple social sites.

There are literally dozens of changes, both visible and behind-the-scenes, in the new Cliqset. We’ve been testing out the new version (the company is half-jokingly calling it “Cliqset 2.0″) since midday Tuesday, and we’ve found the site has been given a significant boost that makes its aggregation features both more usable and more useful. The changes should be appearing for everyone on Cliqset sometime Wednesday morning.

Cliqset is a social network in itself, complete with followers, status updates and media sharing. But its sweet spot is as an aggregation service. It funnels all of the posts from the people you follow on the web into one single stream. It pulls in Twitter tweets, photos from your Flickr contacts, posts from your Tumblr network, updates from your friends on Facebook, Google Buzz, Yelp, YouTube, Google Reader — Cliqset connects to over 80 services in all.

It sounds, looks and works a lot like FriendFeed. But unlike FriendFeed, which was acquired by Facebook last year and has largely stagnated since, Cliqset continues to innovate.

Here’s one really cool new innovation: When you’re following somebody across multiple social networks and aggregating their posts in one place, you’re going to get a lot of duplicates. The new Cliqset filters out those dupes.

“If somebody’s on three different networks, we’ll know that,” Cliqset co-founder Darren Bounds tells Webmonkey. “We’ll consolidate their posts, de-duplicate the posts, refine them.”

Continue Reading “Cliqset Cleans Up Streams, Integrates Twitter” »

File Under: UI/UX

Design for Readability First

Safari 5′s seemingly innocuous new Reader feature, which isolates the text on a webpage making it easier to read, has sparked a surprising amount of outrage from web publishers who think Apple is trying to squash online advertisements and attack their livelihood.

But there’s been an equally distinctive and vocal reaction from readers, one that can be summed up quite simply: “Thank you.”

Similar tools have been around for eons, starting with the “Print this page” link of the last century, all the way up to tools like Readability, whose code Apple borrowed for its browser. But the advent of Safari Reader seems to have galvanized a point of view that’s been brewing for a while: Webpages are too cluttered and difficult to read.

So publishers, listen up. Your readers, the people you depend on to reach your bottom line, have something to say. It’s a pretty simple message: Your webpages are hostile to reading. It’s time to start paying much closer attention to the design of your pages — not just to reduce clutter and make everything easier to read, but to make sure your text maintains that readability across the broad range of screen sizes, devices and browser configurations people are using today.

It’s telling that Apple, a company with a history of only adding the most-needed features to its products, decided its browser would benefit from a tool that strips away the clutter on a page. Of course, one could make the argument that Reader is simply a subtle attempt to drive publishers toward Apple’s iOS platform, where you can create apps filled with iAds that can’t be removed. However, it would be a shame if that’s the only message publishers took from Safari’s Reader. After all, Reader is not an ad blocker, and given that there are ad blockers available for every browser, Reader is hardly a new threat. Reader is only presented as an option after the page has loaded, the ads have been displayed and impressions (i.e., the money part) have been registered.

The message of Reader (and tools of its ilk) isn’t that the online publishing model is doomed, but that it desperately needs a reboot to get rid of all the junk that’s clogging up the whole point of the system: connecting readers with the information they want.

Savvy publishers have an inkling that something is wrong. The popular British news site The Guardian, for one. The Guardian notes in its review of Safari 5′s Reader feature, “technologies like Safari Reader sound a salutary warning to media companies and advertisers…. From now on, we must love our readers or die.”

But The Guardian is putting its money where it’s mouth is. The site recently launched its Open Content Platform, complete with a Content API which allows anyone to grab an article from The Guardian and use it how they see fit — within the guidelines of The Guardian‘s terms of service.

One of the best creations to come out of The Guardian‘s new API is Phil Gyford’s Today’s Guardian.

The primary purpose of Today’s Guardian is to make reading news articles easier. For Gyford, that means eliminating distractions — sidebars are gone, comments zapped, menus pared down and page navigation radically simplified. We take issue with the removal of comments, but in short, it’s The Guardian redesigned with ease of reading as the primary goal.

As Gyford notes in his overview, it’s “a shame that such tools are even necessary … if you were creating a site whose purpose is to provide articles to read, wouldn’t you want to make it perform that task really well?”

If you’re wondering what makes a more readable design, read through Gyford’s post first. Also check out Mandy Brown’s In Defense of Readers on A List Apart. It’s filled with excellent advice on what to think about when designing a reader-friendly layout. (She’s the creative director at Etsy.)

“Limit distractions to the full extent possible,” Brown writes. Pull quotes are great, she says, as long as they’re near the top of an article where they can draw a reader in. But they become distracting farther down. She also advises on white space, typographic treatments, and where best to place your visual distractions so you don’t foul up the reading experience (the top and the bottom).

Brown’s own site, A Working Library is an exemplar of usability. Load it in Safari Reader and the only things that are removed are the header and footer.

A clean page layout falls apart when the proper attention isn’t paid to typography, and in that department, Blaine Cook has some homework for you. He gives you a way to calculate the proper text size mathematically by sizing all of your text in ems. This makes it much easier to find the proper pairing of column width and text size, giving your readers an easier time no matter what resolution, browser, or device they’re using.

He points to two useful tools: his own RePublish, which helps solve font-size issues across multiple screen resolutions, and Mathias Nater’s Hyphenator.js, a JavaScript library that intelligently reflows your text with clean hyphenation so you can run justified columns.

Cook’s methods will “make your site look amazing on the shiny new devices,” he says, but they will also improve readability in a good old-fashioned desktop web browser. On that note, he warns against the common practice of designing different layouts and serving different stylesheets for different-size screens.

“You shouldn’t be optimizing for iPads,” Cook writes. “Or iPhones. Or iPhone 4Gs. Or Nexus Ones. Or 30-inch 90ppi screens, or 30-inch 300ppi screens. You should be optimizing for reading experience, and you should be using the best techniques available to do so.”

Advice? Links we should see? Put them in the comments below.

See Also:

Photo: Vlasta2/Flickr/CC