Archive for the ‘UI/UX’ Category

File Under: UI/UX, Visual Design
Aug
23
2011

Creative UX Designs to Improve Web Forms

By

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:

Tags:
File Under: UI/UX
Aug
22
2011

Audit Your Site’s Content with ‘Page Trawler’

By

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:

File Under: UI/UX, Visual Design, Web Standards
Oct
18
2010

Is the iPad Sending Design Back to the Dark Ages?

By

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:

Tags: , , ,
File Under: Social, UI/UX, Web Apps
Sep
16
2010

Take a Tour of the New Twitter

By

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

Tags: ,
File Under: Ajax, UI/UX
Jul
21
2010

Beautify Broken Links With Catch404

By

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:

Tags: , , ,
File Under: UI/UX, Visual Design
Jul
20
2010

Get Free Design Advice From Not Pixel Perfect Yet

By

The web is long on opinion, but short on informed, constructive criticism.

Thank goodness then for Not Pixel Perfect Yet, a group of web experts who will critique your website’s design in public for free, offering helpful suggestions and advice on improving your site’s design, readability and usability.

The group is made up of 10 or so Czech web designers who are skilled in graphic design, UI/UX and search optimization.

You submit a link to the group by
e-mail (feedback@divdesign.cz) telling them what areas you’d like them to critique. If your site is chosen, they’ll post a screenshot of your design to their Facebook page. The different members of the group will all chip in and provide comments about your font choices, your use of CSS, the way you use images, your logo — anything you want to improve. They pick one site per week.

All of the discussion happens in the open on Facebook, and since the group is public, anyone can join the group and participate in the discussion. Even better, everyone on the web can view the Not Pixel Perfect Yet critiques, making the group a valuable learning tool for budding web designers or anyone struggling with basic design challenges.

A couple of caveats — first, the designers are all Czech, so the responses are usually written in Czech. But the team members speak English and can comment on your site in English if you ask. For the critiques that are written in Czech, Google Translate does a decent enough job of getting the point across. If you’re using Chrome, the browser will offer to translate the page automatically.

Second, if you just look at the Wall posts, you won’t see much beyond a few sentences about each design. You need to click over to the “Discussions” tab to get to the meatier comments.

Facebook is probably not the best forum for the NPPY mission. The public flow of comments is nice, but you have to be a Facebook member to comment, and the tabbed interface is wonky. Some folks on Twitter are asking the group members to move it somewhere other than Facebook, and NPPY leader Nikol Kokesova says she is considering starting a blog.

You can see a full list of the members at A Digital Moleskine, where blogger Milan Cermak has posted links to NPPY’s Twitter feeds, and where I originally learned about the project. There’s also a NPPY Twitter list you can follow.

See Also:

Tags: ,
File Under: CSS, UI/UX
Jul
14
2010

Video: Top 5 Mistakes of Massive CSS

By

Huge CSS files can gunk up your page loads, creating annoying wait times for your readers and (if things get really bad) even driving people away before the page fully loads.

The trick to avoiding breaking your user experience is to make your CSS as lean, clean and fast as possible. There are tried and true techniques for speeding things up, like using Gzip, or serving one or two files instead of dozens. There are also poor optimization methods you should avoid.

Today, we bring you an informative video from the recent 2010 O’Reilly Velocity conference on how to optimize CSS while avoiding some of the most common mistakes developers make. It’s especially useful for those of you with big CSS payloads. The first speaker is a little dry, but the fun picks up when Nicole Sullivan takes over about five minutes in.

See Also:

Tags: , ,
File Under: Mobile, UI/UX, Web Apps
Apr
5
2010

Test Your Websites in iPad Peek, Save Yourself $500

By

ipadpeek

Want to see what your website looks like on the iPad? Get a load of iPad Peek, a new web-based emulator that shows you how any site renders on the new Apple device.

Click on the black frame above the browser to switch between landscape and portrait modes. You can also test your web forms by mouse-typing on the virtual virtual keyboard.

iPad Peek has a few limitations. There’s no touch scrolling, ads produce pop-ups, and embedded Flash videos and objects will still render inside the emulator even though the real iPad doesn’t do Flash. So, it’s basically a Webkit wrapper set to a fixed width and height. But, it does give you a pretty close approximation of how your site will look on the new shiny.

Also, Mashable has instructions for changing your Firefox user input string to that of the iPad:

Type “about:config” in the address bar, click the right mouse button, select New – String, and name it “general.useragent.override”. Then enter the value “Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10″.

See Also:

Tags:
File Under: JavaScript, UI/UX
Feb
15
2010

Live Thumbnails

By

This is the JavaScript example from the Webmonkey tutorial Make Images Grow and Shrink With JavaScript. This script will allow you to put “live thumbnails” of images on your website. The thumbnails will grow and shrink when users click on them.


Continue Reading “Live Thumbnails” »

Tags:
File Under: UI/UX
Feb
15
2010

Mulders Stylesheets Tutorial – Lesson 1

By

Building Web pages with HTML is like painting a portrait with a paint roller. Only truly determined and tenacious souls can achieve the exact result they want. It’s just not the right tool for precision and flexibility.

Anyone who’s used HTML for more than a week knows it isn’t a very effective tool for making Web pages. That’s why we sometimes resort to making large GIFs when we want just the right font or layout. That’s why we’re forced to use convoluted table tags and invisible spacer GIFs to push things around on a page.

It’s ridiculous, really. Our code gets too complicated, our GIFs too numerous, and our final pages too bandwidth-heavy. It’s not exactly optimal Web page construction.

But in late 1996, stylesheets quietly entered the scene. Officially called cascading stylesheets (CSS), it was an elegant cousin to HTML that promised:

  • more precise control than ever before over layout, fonts, colors, backgrounds, and other typographical effects;
  • a way to update the appearance and formatting of an unlimited number of pages by changing just one document;
  • compatibility across browsers and platforms; and
  • less code, smaller pages, and faster downloads.


Despite lukewarm support from many of our favorite Web browsers, CSS is starting to make good on these promises. It’s transforming the way we make Web pages and is the cornerstone of Dynamic HTML.

We’ll spend the next five lessons taking a tour through the land of stylesheets. You’ll learn the basics of how to create and use cascading stylesheets within your Web pages as well as what’s possible with fonts, typography, colors, backgrounds, and positioning.

Continue Reading “Mulders Stylesheets Tutorial – Lesson 1″ »
Tags: ,
« OLDER POSTS