Archive for the ‘UI/UX’ Category

File Under: Browsers, UI/UX

Try Firefox 4 with Tabs in the Title Bar

Top: Maximized window with tabs in the titlebar. Bottom: Normal tab bar

Firefox 4 has entered the home stretch. The recent release of beta 8 added the last of the major new features for Firefox 4, including a new add-ons interface, better syncing and more hardware accelerated WebGL support. From now until the final release later this year, Firefox development will primarily focus on squashing bugs and refining the user interface.

The Firefox 4 UX roadmap outlines the user interface changes that Mozilla is hoping to complete before Firefox 4 is released. Most of the changes are very small — improving the contrast of the type in the URL bar or tweaking the session restore dialog — but there’s one welcome change in the list that many Firefox fans have been clamoring for — tabs in the titlebar.

The idea of saving screen real estate by smashing tabs up into the title bar of the browser windows started with Google Chrome and has since been copied by other browsers and applications.

It’s a tiny tweak, probably not more than a few dozen pixels are saved, but it can make all the difference when you’re using a netbook or other small screen device. Putting tabs at the top of the browser window also adheres to Fitts’ law, which says that the closer things are to the edge of the screen, the easier they are to click.

In Firefox’s case Fitts’ law seems to be the main reason for the new look — tabs are only pushed into the title bar when the window is maximized, making it easier to flick the cursor to the top of the screen and click a tab.

The new tabs-in-the-title-bar look is expected to arrive in Firefox 4 beta 9 (which will be the next release in Firefox’s beta cycle), but you can preview it today by grabbing a special build of Firefox for Windows and Linux. The builds are the work of Firefox developer Bill Gianopoulos, and as such are not official releases nor are they supported by Mozilla.

Also bear in mind that the code used to create these experimental versions of Firefox comes from Firefox’s nightly builds, which means there may be more bugs than you’ll find in the latest Firefox beta. That said, these builds worked just fine for us on Windows 7 and XP.

If you’ve got a small screen or have been looking for a way to make Firefox’s tabs a bit more like Google Chrome’s, grab the experimental builds. If you prefer to wait for something official, Firefox 4 beta 9 should be released in the relatively near future.

See Also:

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 attack:,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 >> /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.

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” »