Worst Nav Bar Ever?

There’s probably something worse out there somewhere, but I certainly haven’t seen anything this bad in a long time. This is the bottom nav bar on all the pages at Roget’s Hyperlinked Thesaurus.

Navigation at roget.org

Any questions?

You actually have to use almost all the sections of the site before the navigation starts to make sense. Oh, and that group of three circles second from the end? That’s an “i” for information. But of course you knew that, right?

Have you seen worse? Comment and let me know!

No Comments


Bad Form Assumptions – Again!

I just learned that an email address I’ve been using for ten years, and through which I’ve received thousands of messages is invalid—at least according to this ISP’s validation script!

Here’s the output I received (of course, I’ve changed my address for this post):

invalid

Invalid? Really? A username with only alphabetical characters, followed by an “@” sign, followed by a domain name, a period, and the world’s most popular top-level domain? I realized the only possible reason (and not a good one) was that the programmer assumed no one could have a two-letter username. Poor guy probably just signed up for Gmail and ended up with something like joeschmoe420toker@gmail.com because all the other joeschmoes were already taken.

Fine and good, but it is a gross error to force your assumptions on users. There are any number of sites which offer email validation scripts and regular expression filters for what actually are valid and invalid addresses. Just making a guess with a less-than-complete ass is inexcusable for a company that provides Internet service to thousands.

Testing my hypothesis, I added a random letter:

valid

Voilà! Satisfied that I was no longer a devious two-letter miscreant trying to slip past the wise validator with bogus credentials, it happily let me continue. I wouldn’t have been so surprised if it were a small online boutique, but from this company?

As the old joke goes, when you assUme, you make an ass out of u and me.

Tags: , ,

No Comments


Bad Form Design – Stupid Choices

For many reasons, thinking about web forms in User Interface / User Experience has generally concentrated on the flow of thought, guiding the eye, visibility of elements, navigation, security and of course, accessibility.

However, one thing that’s often overlooked is just as important, and will stop some people in their tracks from completing a form: stupidity.

Take, for example, this extract from a survey form from an affiliated site a major bookseller. Although I generally have many better things to do than click on links on my email to fill out online surveys, this was a lazy Sunday, so what the heck? First page, no problem. Second page presented me with this train wreck, such that I not only couldn’t continue, but had to post this to vent my frustration:

BordersForm.jpg

In case you’re baffled, wondering where’s the horrible usability issue, the problem is that the form is asking me to make an impossible choice. I’m a book lover, and I buy books from many different sources: Amazon, Borders, B & N, and I try to support my local independent stores as well, (which I wish I did more often). My specific recommendations would depend on which friend this is, and their specific priorities regarding the particular item they’d be interested in, e.g. cost, convenience, immediacy.

The key problem here is either/or choices are being forced upon the user, when the user may not necessarily think of the situation as being remotely exclusive, but as subtle, nuanced, and inclusive of many factors.

Check boxes would be what the doctor ordered here. This is a glaring problem on many forms. Users cannot give detailed, meaningful feedback on how they see things, if the form presumes to know a priori how they see things. This applies to more things than one might initially suspect.

Take the common fieldset “Select Your Religion” that you see on many social sites. Invariably the user is presented with list of popular choices (usually ending in “Other”) and a slew of radio buttons. This design undoubtedly works for many people, but it doesn’t for those who are questioning their religion, leaving it, changing it, or seriously exploring another without intending to make a complete conversion. These people might be better served by something more like: “Please Indicate Your Main Religious Preference(s)” and choices marked by checkboxes.

Is this overly picky? I think not. In the case of the choice of religion on a social networking or dating site, inappropriate either/or choices may indicate a bias against unconventional choices, particularly if the list is short.

In the case of the bookseller mentioned above, it conveyed a sense of not wanting to understand my preferences, which implies to me that they’re also not really interested in changing to help meet my needs and gain more of my business.

Bottom line: If you want honest, detailed feedback from users, or to make a positive impression on them, do not try to force the user’s mind to fit your form. Mold your form to allow them to express their mind.

No Comments


Row-based designs

I wrote an article for the new online Web design magazine, 13things, entitled “Horizontal Flow: The Magic of Row-Based Design.” In it, I examine what the effect of column-based design has been, advantages of using rows to recapture the organizational effects of the grid that were largely lost when we abandoned table-based layouts, and some novel ways of ordering content into rows. Hope you enjoy it.

No Comments


Yes, he does.

Andrew loves one-pagers.

Tags: ,

No Comments


myMac

new-macbook.jpg

Working on a new MacBook is like worshipping in the temple of the Goddess of Beauty.

Tags:

1 Comment


Minefield Set to Explode Chrome

Ok, I’ve got to admit that Chrome has lost a bit of its luster as far as I’m concerned. For instance, for one of my projects, I need to use Central Desktop, an excellent project management site. Unfortunately, it’s one of several sites that Chrome can’t handle.  Not that Safari or even Opera can either.  I’m revising my earlier assessment of Chrome.  I now regard it as a souped-up version of WebKit, that still has most of the flaws that Safari does.  That’s not to say it’s a bad browser by any means… it’s superb. But for my browsing as well as my Web development, I’m relying on Firefox again.

However, Chrome offers a lot of promise.  According to marketshare.hitslink.com,  Chrome seized 0.78% of the worldwide browser share in less than a month on the scene, a phenomenal achievement. If the Google staff commits to really developing it, with full plug-in capability, solidness in handling intensive Flash-based Web apps. and fixing the long-standing problems with WebKit (such as the alternate stylesheet issue), Chrome will undoubtedly go far.  (Unfortunately, it will also probably go far if they do nothing and leave it at version 0.2 for three years. They’re Google, after all.) I really do want to see the Web improve and browsers improve, and Chrome can offer a lot.

However, this morning I test-drove “Minefield,” the development codename for Firefox 3.1, and I’m amazed. In my not-so-humble opinion as a Firefox fan, Firefox’s sole problem has been its speed. Minefield fixes that with blazingly fast page downloads and a new Javascript rendering engine which “may be the fastest on the planet.”  Kudos to the Mozilla team!

Tags: , , ,

1 Comment


Chrome is shiny!

Chrome logoSince downloading Chrome two days ago, I’ve had the chance both to work and play with it, and I must say I’m tremendously impressed.

Initial reactions:
Chrome is fast. Very fast. The difference is especially noticeable on high-bandwidth connections. (On my DSL connection at home, it’s fast, but not breathtakingly so.)

Chrome uses multi-threaded rendering so each process called for in any Web page or Web app is treated independently. In other words, an infinite Javascript loop won’t cause everything else to stall while waiting for it to complete. What’s more, each tab’s processes are independent of the other tabs. Essentially, each tab is a separate instance of Chrome, and should any tab freeze, it will have no impact on any other tab. A convenient shortcut in case that should happen, is that you can right-click on the title bar and immediately go to Task Manager and close the troublesome tab individually. Tabs can also be dragged-and-dropped out of the main window.

At first, I thought, “Great, Chrome is nice, sleek, and fast, a great Web-surfing tool, but only Firefox has what I need for development.” Well, I was wrong. The “Inspect Element” feature of Chrome (accessed by a right-click) is like a simplified, more intuitive Firebug, combined with the best of Aardvark and most of the best of the Web Developer Toolbar. CSS infomation can be seen for every single element, including default styles and declared styles, and you have the option of showing inherited styles as well. In addition, styles that are overruled are indicated as such by a strike-through, and every declared style affecting the element has its precise location shown.

“Metrics” gives a diagram of the box model on any block-level element, with the rendered padding, border, and margin in pixels. If you select the Resources button and reload the page, it will generate a beautiful chart listing every file loaded and diagraming when it began and finished loading with its order in the entire assembly. The HTML is also be automatically validated. The flip side: The “Size” button is entirely non-functional. No file size or image dimension info is available. Also,there’s nothing that has the functionality of the “Edit CSS” option of Firefox’s Web Developer Toolbar. I miss the capability of a simple right-click to view background images.

Yet overall, Chrome’s development tools are impressive and eminently usable even at this initial level.

A few aberrations in Chrome’s behavior have been noted. Chrome doesn’t like Facebook much. For instance, clicking on “Join this group” simply refreshes the page. Also, apparently Chrome misbehaves regarding some alternate stylesheets. It doesn’t with the alternate stylesheets on my other site, so I’m not sure what is the exact syntax that triggers it.

As a diehard Firefox user, the lack (thus far) of any plugins for Chrome is a definite minus. Different people will have different gripes, but here are mine:

  1. Chrome is ugly! Please let me skin you!
  2. I really, really, really want to be able to use my del.icio.us bookmarks in a sidebar.
  3. Edit CSS and a quick-and-dirty View Background Image, please.

Search EnginesI thought another gripe would be not being able to change search engines in a single click as with Firefox, but with a wonderfully simple and quick hack, you can actually switch search engines faster in Chrome.

Chrome uses the same box for searches and typing URLs. To work with other search engines, right-click in the location bar and choose “Edit search engines…” If you simply want to make a different engine your default search tool, select the “Make Default” option. But it you want to be able to switch to a different search engine on the fly, click the “Edit” button and abbreviate its keyword. On my computer, I abbreviated yahoo.com to just “y,” and amazon.com to “am.” To instantly change the search engine, just type the keyword, a space, and your search term. This is actually much faster than selecting the desired search engine from a dropdown box as in IE7 and Firefox.

Tags: , , ,

4 Comments


Password security

I’ve been thinking about password security recently. Like many people I generally use one “strong” password for most of my access in cyberspace. The memorable strong password idea is definitely an improvement over the oldskool practice of changing a password every several weeks, which invariably led people to write down their passwords, making security as flimsy as the yellow post-its they were written on.

Hence the memorable strong password. To be considered strong, most recommend a generous mix of the various sets of keys available on the keyboard:

  • lowercase letters
  • uppercase letters
  • numbers
  • symbols (e.g. $, @, ., <, etc.)

There are many ways of making a memorable strong password… (the one that should be avoided is simply substituting numbers for vowels… there are hacker dictionaries out there that can automatically try p4ssw0rd as easily as password.) Say you have a strong password that’s memorable to you because it combines the year your parents got married, let’s say 1976, together with a phrase you like, such as “Let the good times roll!” It’s easy to turn those ingredients into a very strong, memorable password, such as, 76/L#gtr!19 in just a few steps:

  1. 1976 Let the good times roll! (the ingredients)
  2. 1976 Ltgtr! (the initials of the phrase with the punctuation intact.)
  3. 76/Ltgtr!19 (splitting the year and inserting another punctuation mark after the first numerical part)
  4. 76/L#gtr!19 (replacing the t for “the” with a symbol)

The latter result is an extremely strong password which should be very easy for the user to remember, so it never needs to be written down.

However, it only takes one shady cybercafe or one phishing site to steal your password, which might very well be the same password you use for your banking, email, and more. Is there a way to create many passwords that are just as strong, but customized for each site you use in such a way you can type it almost automatically?

I believe there is. What if you combined your strong password as a core, customized with an element of the site’s name? The sky is the limit on the possibilities, but if the same pattern is always used, each password should be instantly recallable.

Say you have passwords for Amazon, Gmail, and Paypal. You could take the first two letters of each and put them over the last two numbers of your password to keep it relatively short:

  • 76/L#gtr!Am Amazon
  • 76/L#gtr!Gm Gmail
  • 76/L#gtr!Pa Paypal

The passwords are short, quickly typeable, easily memorable, and completely different. Or if you prefer, you could use the first and last letters, or the first two vowels, or some other consistent rule, and put them in a different place in the strong password structure. Just remember to keep it simple for you and impossible for anyone else. Here’s a variation using three letters of the site name with the second and third letters capitalized, placed in the middle of the strong core:

  • 76/aMAL#gtr! Amazon
  • 76/gMAL#gtr! Gmail
  • 76/pAYL#gtr! Paypal

Again, the passwords are all strong, and all so easily memorable they should never need to be written down. But this technique’s true value lies in the uniqueness of the passwords. Should someone learn your Amazon password, he or she will still not be able to login to your Gmail or Paypal accounts.

A couple of closing thoughts. First,there are unfortunately still many sites, including financial sites that only allow alphanumeric passwords… no punctuation symbols can be used. For these sites, just keep the core password as strong as possible, using lowercase, uppercase, and numbers. Unfortunately, this means you may need two cores, one with symbols for the majority of sites that allow them, and an alphanumeric core for those that don’t. However, the alternate core can also be made very easy to remember. Here are two easy ways to do it:

  1. Use a single letter as a substition for the symbols:

    76/L#gtr!Am for Amazon

    76zLzgtrzSi for SiteWhichDoesNotAllowSymbols.

  2. An alternate solution is to just omit the symbols.

    76/L#gtr!Am for Amazon

    76LgtrSi for SiteWhichDoesNotAllowSymbols.

If you forget which sites allow symbols and which don’t, no problem. Simply try the version with symbols first, and if that doesn’t work, the version without.

Secondly, if you’re a traveler, make sure your password is possible to type quickly on any keyboard of any country you’re likely to be in. Some of the punctuation symbols on the US keyboard layout do not appear on the keyboards of other countries or require “dead keys” to produce which may not register as single characters for password purposes. For instance, our straight double quotation marks are not used in many countries. Symbols like |, [, and ^ also might not appear on international keyboards or could require additional keystrokes to type even if they do. It’s probably best to slightly limit the symbol set for your password to symbols universally used in math or on the Internet, such as # . , @ !  + – / etc. See Wikipedia’s article on keyboard layouts for more information.

9 Comments


Pogo

PogoEye candy is pretty, by definition. But too much is too much, and AT&T’s new browser, Pogo seems to suffer from the vast amount of resources demanded by its attempt to make the most mundane Web tasks (finding a bookmark, for instance) a breath-taking overdose of eye-catching beauty. Here’s Ars Technica’s review of Pogo.

It’s an interesting concept, and I don’t want to go back to the days when a copy of Netscape Navigator 1.22 fit on a single floppy disc, but Pogo seems way too far ahead of its time in terms of realistic user resources. And just when you thought 2 gigs of RAM was enough… Pogo!

Tags: ,

No Comments



SetPageWidth