Eliminating the email confirmation step streamlines the process from sign-up to system engagement. The user will not have to break from the flow of the site, and thus their attention will remain engaged with the system.

The tradeoff, of course, is that the email is not confirmed. But this could be done later, whenever the user naturally logs into their email account. Once the system has the user’s attention and is getting them to sign up, it’s critical to take steps that ensure that the system will retain their attention.

A solution to the tradeoff would be to display the user’s email address prominently on the screen after sign-up that precedes logging into the system, with a “Hey, that’s not my email address!” link so the user can still verify their email without having to log into their email account.

Anything that makes the sign-up process fun and easy should be considered, but the tradeoffs should always be considered as well.

Harvest does not require first-time users to confirm their email address to start using their account, but rather logs them in as soon as they finish the sign-up form. This shortens the path to using the system, creates positive affect and begins the formation of mutual trust—all important elements for first-time users. This screen could include the user's email address so that they could verify the information before logging in.

Unfortunately when I went to the same URL at a later time, http://joshcoe.harvestapp.com/first_login redirected to http://joshcoe.harvestapp.com/home, a page where I could not log in. A link given to first-time users that could be clicked more than once should at least redirect to a page where existing users can log in.

I was surprised to find that Twitter automatically shortened my URL.

The automatic “bitlying” of URLs is unexpected and a bit jarring for the first-time user. My first thought: “Where did my URL go?” Then, when I tried to replicate the effect with another URL, it didn’t shorten. I tried several different URLs to no avail. What are the factors that cause a URL to be automatically shortened? The complete obliqueness of this feature can cause frustration for the user.

The positive aspect of this is enhanced interface simplicity: The system simply predicts when it thinks a URL should be shortened, and takes care of the shortening for you. The auto-shortening feature parallels Twitter’s modus operandi of absolute simplicity.

But every positive has a negative: The system can’t read the user’s mind. Common use cases exist wherein the user would want enhanced control over URL shortening, especially in a business environment.

The obvious benefit of an unshortened URL is that anyone who sees the address can recognize the site name, which gains trust and leads to more clicks. So let’s say your company, CompanyName, has a new product that they want to showcase, the Widget. If the new products page exists a couple of folders deep within your domain, would your URL get shortened? It depends. URL example 1 (http://www.companyname.com/introducing-the-wonder-widget) would get bitlyed, while URL example 2 (http://www.companyname.com/wonderwidget) would not. Even in example 2, Twitter displays an ellipsis (…) instead of the wonderwidget text. It’s hard to imagine a business that would want bitlying to happen, as displaying the brand name in the URL would be critical. The user may also prefer to display the entire product name in example 2 rather than the ellipsis, but Twitter’s current system seems to make this impossible.

The user may wish to control the way that Twitter shortens URLs, e.g., in order to display domain names for branding purposes.

An easy solution for this would be to add auto-shortening options to the Settings page. An easier solution would be to maintain a default setting of not shortening URLs that match the URL listed in the user’s profile. The second option would be more in line with Twitter’s brand of being automatic and not requiring the addition of more settings, while satisfying the case of the business professional.

What do you think? Let me know.

Wouldn’t it be great if you could update your contact information in all of your social networks at once? What if you could take that idea a step further, and automatically sync your info with organizations’ databases? No more filling out forms in the hospital waiting area. Or anywhere. Ever.

Meet the Social vCard (Sv), a possible key to each of these aims.

vCards are electronic business cards that contain name and address information, phone numbers, URLs, logos, photographs, and even audio clips. The Sv would be similar; but whenever you update the Sv, your personal information on social network systems could be automatically updated. You could choose which information that you’d want to sync to each specific network. For instance, I could choose to sync my name, email address and phone number with Facebook, but only my email for Twitter.

Similar steps have been taken with the OpenID initiative, to allow users to sign into any site with one ID. But OpenID doesn’t leave flexibility for syncing different amounts of information over different accounts. And why not make the ID tactile, readable in the real world? Imagine filling out a hospital form by simply scanning your Sv at the sign-in sheet. Awesome!

The Sv could even be tied to users’ personal ID cards, such as drivers’ licenses. If someone fraudulently tried to use your contact information, they could be flagged and could face consequences, which would deter identity theft.

I came up with the Sv concept during a post-partying bout of insomnia.

What do you think? Let me know.

There should be an intuitive way to permanently ban a site from becoming a Top Site in Apple Safari 4.0.

The design: My favorite feature of Apple Safari 4.0 is Top Sites, where the user can select from a grid of their most visited sites whenever they start Safari or open a new tab.

In this column, Redesigning the best, I consider systems with excellent user interfaces, and I try to determine how to improve one aspect of the user experience.

The problem: Common use cases exist wherein the user does not want certain pages to show up in their Top Sites. For instance, if the computer is used by multiple people, the user might want to extend the courtesy of not filling up Top Sites with pages that would not be used by anyone else.

My redesign: In Mac OSX, holding down the alt key changes options of certain menus; for example, if you right-click an application on the dock and hold the alt key, Quit changes to Force Quit. Apple should extend this design pattern to Safari’s Top Sites. When the user holds the alt key in edit mode, the X above each site should visually change (e.g., to a red circle with a line through it) to signify that the site would be permanently banned upon clicking. Although this redesign would not have an initial visual appearence, it would utilize a common keyboard shortcut, thus being intuitive for the power users who would be most likely to use the feature.

What do you think? Let me know.

As a Hapa and a designer, I'm offended by the denotation of the Asian race with the color yellow.

Designers must consider all aspects of a design, including not only aesthetic but also cultural factors. The graphic designer who created the Asians for Mike Bloomberg logo ostensibly chose vivid primary colors to go with Mayor Bloomberg’s workmanlike no-bullshit brand. But perhaps they did not consider the cultural tradeoffs of assigning the color yellow to the Asian race.

The standard Mike Bloomberg NYC is a classic dark blue and red combination. Why not stick to one color palette for all of the groups? This would not only strengthen the brand but also make all of the groups feel like one unit. This is how Asian Americans for Obama branded themselves, for example. No cultural faux pas brought on by color choice here:

If you really want to choose a different color palette for every group, at least represent Asians with a color that is not equated with cowardice in American culture. Perhaps gold, as Goldsea Asian American Daily suggests. At the very least, switch the colors around so the text Asians for is red and Mike Bloomberg is yellow. Of course, the designer wouldn’t assign the color yellow to a political candidate who must exude strength. So why assign the color to a race, especially when this color has been the cause of so many racial slurs for Asian Americans through history?

On Mike Bloomberg's Facebook fan page, a voter joins the discussion.

Asians aren’t the only group that got stuck with an unfortunate color, natch. The Women for Mike Bloomberg logo is a bright neon pink.

What do you think? Let me know.

Georgia Tech and SCAD Atlanta’s ARhrrrr, An augmented reality shooter.

BMW UK | New BMW Z4 | The BMW Z4 in 3D Augmented Reality.

Kotaku – Augmented Reality Camera Game Coming to DSi – Ghostwire.

GE | Plug Into the Smart Grid | Augmented Reality.

Gizmodo – Augmented Reality App Puts a 3D Starship Enterprise In The Palm Of Your Hand – Experience the enterprise.

Make: Online : Uncomfortably augmented reality.

Augmented Reality: Can the ‘Stars Wars’ Effect Sustain Engagement? – Advertising Age – DigitalNext.

Augmented Reality Devices: See the Online World While Walking the Real One.

Augmented Reality & The Web: Present and Future Scenarios.

AugmentedAdvertising (AugmentedAdvert) on Twitter.

“Reduced object visibility may inversely impact usability unless care is taken to allow the users ways to find objects and inspect their state as needed.”

Jakob Nielsen

Here are some guidelines to consider when creating a web form:

1. Don’t require too much. The designer should consider what information is absolutely necessary, and only require that information. It is hard to believe that the system in the example—a site to get a free t-shirt—has any reason to require a Title field. The main goal is to get the user to sign up for an account. So, as many fields as possible should be removed or made optional.

Any additional information, such as gender or t-shirt size, could be gathered after the user has signed up.

Also consider alternatives to forms. Allowing users to upload a vCard instead of filling in a form could streamline the process.

2. Make requirements visible. If a field is required, call it out with a red asterisk or other identifier when the user lands on the page, not after they have filled out the form and tried to submit it.

Here's a subtler example of form design that could be improved. This is a site for actors that requires gender, but they only allow "male" or "female" and have not accounted for members of one sex who identify as the opposite sex, etc. The gender field should be removed from the signup form altogether to disallow the user from thinking about gender issues when they should be signing up for your site.

Tab Kit 0.5.5

One thing I miss about Firefox 1.5 is the ability for tabs to become gradually smaller as the user opens more of them. The tabs could get a little scrunched, but at least they were all visible on the screen.

After Firefox changed to scrolling tabs from 2.0 on, it became clumsier for me to navigate through the 40+ tabs that I usually keep open. The tabs were no longer visible at once, and the slider arrows accelerated at an uncomfortable rate if I clicked them too fast.

If browsers had options for visualizing tabs, such as placing them vertically on the screen and using a tree structure, my experience would be so much less frustrating and time-consuming.

Now that wide screens are the norm, the pixel space taken by a vertical tab structure is a reasonable trade-off for the increased usability of being able to see all tabs—including titles—on the screen at once. Vertical tabs also make sense in high-tab-count situations; if the tabs go off the screen, the user can use a standard vertical scroll bar to browse through them instead of the less familiar horizontal scroll buttons.

Using a tree structure makes sense because the user will often want to open several tabs pertaining to the same category, and they should be able to collapse that category when they move on to another.

Luckily for me, I found Tab Kit, which implements both vertical tabs and a tree structure. See CyberNet’s video below:

While Tab Kit has already saved me plenty of time navigating, I did find a few major usability problems with the add-on. They turned out to be changeable through the extensive preference options, but they could still use some tweaking:

1. Poor visibility of selected tab. The currently selected tab is barely distinguishable from the others. This is especially important because Tab Kit designates sub-tree tab groups with random colors, so the eye is drawn to the colors and must spend a few seconds identifying the selected tab.

Solution: Go to Tab Kit preferences > Tabs > Appearance and enable Emphasize current tab in black.

Another solution could be to make the selected tab actually look like a tab, i.e., appear in the foreground and have its edge come up against the side of the web page that it represents.

2. Scroll wheel does not control scroll bar. When the vertical tabs extend beyond the screen, a vertical scroll bar appears. The user expects to be able to control that bar with their scroll wheel. Instead, the scroll wheel cycles through the open tabs at an uncomfortably rapid pace.

Solution: Go to Controls > Mouse gestures > Scrollwheel tab switch and disable While mouse is over tab bar. This will make Tab Kit follow the standard of letting the scroll wheel control the vertical scroll bar.

The up and down arrows on the keyboard would be more usable controls for cycling through vertical tabs (i.e., activated after the user clicks inside the vertical tab area).

3. Too many preferences. One issue with free and open source software is the plethora of options that they give the user. Having control is great, but Tab Kit’s five full menus of preferences are overwhelming. A simple solution would be to pick reasonable defaults, and hide or remove most of the non-critical options. For instance, emphasize the current tab more clearly by default, and remove that option from the Appearance section.

Update. Since this post came out, Firefox has improved tab interaction. I’ve switched back to the default tab management, which has in turn made me manage tabs more effectively by myself, i.e., only having a few open at once, and opening a new window if I need a new branch of tabs.

Tab Kit :: Firefox Add-ons.

A notepad is still the most effective tool for low-fidelity prototypes (uistencils.com).

On iPhone mock-up workflow: I’ve always used OmniGraffle for medium-fidelity iPhone mock-ups. The alignment and resizing capabilities of the program make everything feel like it snaps together perfectly, especially when you use the resources listed below. The workflow in Photoshop feels a bit clunkier, but of course for fine-detailed control of hi-fi mock-ups Photoshop is much more robust. I like to create custom details in Photoshop and import them into OmniGraffle, or assemble an OmniGraffle stencil out of custom parts made in Photoshop. This way, I don’t waste time getting lost in a Photoshop unnamed-layer maze.

On mock-up stencil resources: There’s some overlap amongst the three OmniGraffle stencils, of course, but it’s worth having more than one; they complement each other, and each one seems to have something that the others don’t. Theresa Neil’s stencil works for medium-fidelity prototypes, and the other two are great for taking them hi-fi. When I need a more customized element, I use Mercury Intermedia’s UI vector elements so I can stretch and manipulate without worrying about pixelated images.

I’ve listed many of the popular available iPhone stencils and toolkits below. Please let me know if you find any that could be added to the list.

OmniGraffle

Ultimate iPhone stencil (Graffletopia)••
iPhone wire frames (Graffletopia)•
OmniGraffle Stencil Kit (Yahoo!)••

Adobe Illustrator

UI vector elements (Mercury Intermedia)•

Adobe Photoshop

iPhone GUI PSD (Teehan + Lax)••
iPhone design elements (Creative Tech Tips)
iPhone interface elements (320480)
SMS chat bubbles (DeviantArt)
Blank iPhone buttons (DeviantArt)
iPhone icon style kit (Keep the Web Weird)

Adobe Fireworks

Fireworks toolkit for creating iPhone UI mockups (Metaspark)
iPhone GUI as rich symbols for Fireworks (Jorge Correa)