Archive for the ‘UI/UX’ Category

File Under: UI/UX, Visual Design

Creative UX Designs to Improve Web Forms

Extra options in Gowalla's login form

We’ve looked at how the new HTML5 form tags improve the process of building web forms, but you don’t need to wait for better browser support to improve your forms today. Luke Wroblewski, web developer and co-founder of Bagcheck (which was recently acquired by Twitter), has a great post over at Smashing Magazine detailing various ways of improving the ubiquitous login form.

Pulling examples from Gowalla, which helpfully provides your user id photo, Quora, which immediately offers to create an account if your e-mail isn’t found, and his own Bagcheck, which is experimenting with a drop down list of usernames as you type, Wroblewski’s post is an excellent tour of some of the best UX login forms on the web.

There is one important qualification for these forms — the assumption is that your site has public, searchable profile pages, otherwise exposing user data (like username or photo) would be a privacy no-no. Of course it’s worth considering that, while exposing usernames in the login forms might not actually violate anyone’s privacy (any more than a public profile already does), that doesn’t mean your users won’t perceive it as a privacy violation.

For those worried about security the same caveat applies. If your site already has public profile pages then you’re not exposing any data that can’t be found with a simple Google search. Provided your backend security protocols are built correctly, making a more usable login form won’t make your site any less secure.

See Also:

File Under: UI/UX

Audit Your Site’s Content with ‘Page Trawler’

Need a 50,000-foot overview of your website? Page Trawler is a new web service that will crawl your site and give you a bird’s eye view of your content. While the service is currently limited to crawling the first fifty pages of your site and offering up a .cvs summary of those pages, the developers hope to turn Page Trawler into something much more useful.

If you’d like to try it out, head over to the Page Trawler site and plug in a URL. Note that you’ll need to give up an email address to download the report.

The Page Trawler project, which lists itself as alpha software, began life as part of a contest to build something in a week, but the developers have big plans to turn the site into something more. Among the ideas are integrated analytics, heatmaps, detecting orphan content and, our personal favorite, unlimited bourbon. We’ll be sure to let you know when that last one becomes available, but in the mean time if you’ve got ideas for Page Trawler, head over to the UserVoice page and let the developers know.

See Also:

Is the iPad Sending Design Back to the Dark Ages?

Jeffrey Zeldman thinks so. In his essay, “iPad As the New Flash,” the author and standards guru argues that designers are now coding up device-centric user experiences at the expense of web standards, accessibility and the advancement of open web technologies.

Everything we’ve learned in the past decade about preferring open standards to proprietary platforms and user-focused interfaces to masturbatory ones is forgotten as designers and publishers once again scramble to create novelty interfaces no one but them cares about.

While some of this will lead to useful innovation, particularly in the area of gestural interfaces, that same innovation can just as readily be accomplished on websites built with HTML, CSS, and JavaScript—and the advantage of creating websites instead of iPad apps is that websites work for everyone, on browsers and devices at all price points. That, after all, is the point of the web. It’s the point of web standards and progressive enhancement.

He takes issue not with apps in general, but with the design choices being made by popular magazines as they rush to embrace the new shiny. His ultimate conclusion: “Masturbatory novelty is not a business strategy.”

The comments are enlightening, too. A few make the point that web standards like JavaScript and CSS can now be used to develop experiences that can be delivered both natively and through a browser. Another suggests this is just the Old World struggling to understand a new platform.

See also:

File Under: Social, UI/UX, Web Apps

Take a Tour of the New Twitter

Twitter launched a full redesign to its website Tuesday, showing off changes that lead Twitter.com away from its humble stream-of-updates past and towards a more interactive, app-like future.

The new Twitter went live to a select few users Tuesday afternoon and began rolling out to everyone else Wednesday. If you don’t see it yet, you will soon.

The website now has a new two-panel view. Your familiar stream of tweets runs down the left side. On the right side is a dashboard of sorts, where you can see recent activity from your followers and the people you follow, trending topics, and the list of people you might want to follow.

Continue Reading “Take a Tour of the New Twitter” »

File Under: Ajax, UI/UX

Beautify Broken Links With Catch404

The 404 error is one of the bitter realities of the web.

“The page you’ve requested does not exist.” So cold and unforgiving. Unlike a bad database connection or an unresponsive server, the 404 Page Not Found error has a finality to it — this link is dead and it’s never coming back.

But now we have Catch404 by Addy Osmani, a jQuery plug in that handles broken links with style. Deploy Catch404 on your site, and instead of seeing a page reporting a broken link, the user is presented with an Ajax modal window (also called a hop-up, or a lightbox) informing them the linked page isn’t there. The windows also offers some alternate destinations they might want to check out.

We’ve been trying to make 404s go down a little easier for years now. The custom 404 page is a popular solution. It’s available on just about every web CMS out there. You can do it yourself, too. Browsers are also taking it upon themselves to beautify the broken link with custom pages, offering suggestions or inviting users to search for the page using a built-in search box.

Catch404 takes both of those ideas — the custom alert and the suggestions of what to do next — and places them into the user experience before the link is even loaded. The plugin, which requires the jQuery framework, sends the link off to Yahoo’s YQL engine to check to make sure it’s alive. It only performs this check for external URLs; local URLs don’t require the check. The check is performed behind the scenes, using an Ajax request. If all is good, the user goes about his or her way. If the check results in a 404, the user sees the modal window.

Here’s a demo.

You’ll notice one obvious downside, which is that your users will have to wait an extra half-second or so while the YQL call completes. So why use it?

When a user is browsing your site and clicks on a link you’ve provided, then sees a 404 error, it’s your problem whether you’re responsible or not. Linking to dead pages makes you look like a sloppy curator, and the user will place some, if not all, of the blame for that error on you. Catch404 is more helpful than an impersonal error.

If the speed hit from the cross-site link checking bothers you, consider adding Catch404 only to legacy content — those years-old pages filled with links that may or may not still be alive.

Activating Catch404 is simply a matter of assigning a class to the link, so you can invoke it only where it makes sense.

[via Delicious]

See Also: