Allow me to introduce “Looking backwards for one value”

How to check for specific variables passed from previous pages using Javascript for your prototypes

I use this technique when I’m prototyping a multi-step form/application and I know what data I want to show on the page depending on whether I’m walking through scenario A, B, or C. It’s good in situations where you’re setting radio buttons on the previous page and just need to know which one was clicked. It’s lousy for situations where you don’t know what value your previous page might’ve sent. It’s best used when your “Review” and “Confirmation” pages are virtually identical except for one or two key pieces of data. There, it saves you time from building 3 review pages and 3 confirmation pages.

It is extremely breakable and probably shouldn’t be used in production code.

This uses forms submitted via GET so all the variables are in the URL.

First, on the page with the form, make sure the value you want to pass is in an input element in the form with a name (and the value) assigned to it. Input type=hidden is handy for this.

Second, make sure you’re submitting the form on the first page. Yes, this sounds obvious but when you’re prototyping sometimes folks take the quick way out and just code a button with a location.href Javascript on it, and that’s not a form submission.

Third, make sure that when you submit the form, the variable you want shows up as a name/value pair in the URL of the next page. That means the value is getting to where you’re going.

Now for the fun part. On the page receiving the value you need to do two things:

  • Get the method out of the URL
  • Tell the page to use it to do something

To get the method out of the URL, we do this:

function getMethod(){
var thisurl = window.location.href;
var locationOfValue = thisurl.search('TheValueYouAreHuntingFor');
if (locationOfValue = -1){
//write yourself an error condition handler in case your value's not there
} else {
//do the thing you want to do if you found it
}
}

(Please excuse WordPress’s built-in CodeMangler for the spacing…sigh)

So what’s that do exactly?

window.location.href grabs the href (URL) of the current window in string format so you can search it.

String.search(regex) tells you the position where a regular expression occurs in a string. If it’s not present, String.search() returns -1. So we take our string (thisurl) and search it for the value of the name/value pair we’re sending, and assign the result to a variable (locationOfValue). (Yes, you can definitely use shorter variables. This is a sanitized version of a function I’m using elsewhere. And it’s more readable this way.)

If locationOfValue is equal to -1 we didn’t find it. Either your value wasn’t passed correctly or you came into the page directly and the first page didn’t get the opportunity to pass anything. This is a good place to put a “if there’s no value here’s what I want you to display” clause.

If locationOfValue is NOT equal to -1 we found the value somewhere in the URL. Do whatever it was you were planning to do when you got it.

Obviously, once you have the tools to grab the location and parse it for a value or three, you can build more complex if/else if/else statements, but this is the simple version.

Now the final challenge is getting your page to call your function. Because we want to read in from the URL and use its results to modify the page, we want to throw a script block on the bottom of the page  that calls getMethod. Something like:

<script>
getMethod();
</script>

Write the page itself to be generic to whatever you want if it all crashes and burns spectacularly. (As they say on Mythbusters, failure is ALWAYS an option.) Then use the getMethod to read in your variables and modify your content accordingly.

I’ll try to build an example at some point soon.

*if you got the titular reference to the video game Catherine, w00t! Also, is that one creepy game or what?!

The manual in the glove compartment

Design principles have been a hot topic this spring, with both Jeremy Keith and Whitney Hess giving talks throughout the country, and lots of folks looking for, and building, lists of principles. (Note: I haven’t heard either talk, but I’ve seen retweeted notes and my understanding is that they were both excellent.)

We have a set of design principles and heuristics at my primary employer, which I’m developing training for. I’m exploring concrete examples inside and outside of the web, since I’m the type that learns from those best.

Error handling: Make it easy to identify an error when it occurs.

I drive an 11-year-old 2001 Saturn SL 1, which I’ve owned since it was 12 miles old. That car and I know each other pretty well. (Her name is Fluffy.)

This morning, a new thing lit up on Fluffy’s dashboard.

Clearly a warning light, it was trying to tell me something, but I’d never seen it before. My first guess was “GO TO THE BEACH”, because it’s June and that’s where I want to be. My second guess was “oil is low” because oil burning is the biggest problem Fluffy has had in her later years, and thus it was fresh in my mind. But low oil hasn’t triggered a light before, so despite being this car’s expert user, all I really knew was what I didn’t know.

Fortunately, I keep Fluffy’s manual in the glove compartment. The manual describes all the obvious error messages and error conditions, what to do about them, and when to contact someone. It’s both unobtrusive in its home in the glove box, and accessible when I needed it, regardless of the error. (well, “passenger seat on fire” might have caused problems, but there’s no light for that anyway.)

I could have chosen to take out my iPhone, and Google the problem. But the book was easily accessible without power, without cell signal, and without searching a half-dozen websites for a solution. It fits perfectly in the lowest reaches of my glove compartment, where it doesn’t interfere with the napkins, pens, and (yes actually) gloves I’ve piled in there over the years. It was designed to be accessible when I need it and out of the way the rest of the time. It was easier for me to look up the light’s meaning than to drive away and worry, which is a triumph in designing against inertia.

(The light, by the way, is a warning that I’m low on engine coolant.)

Error handling design heuristics are tightly coupled with learnability heuristics. A novice user who learns where to look for help will eventually become an expert user that doesn’t use the manual for years, but might need to look up a random light on a sunny July morning. The language and icons need to be as understandable as possible for both the novice and the expert user. (Had I followed up on my first guess and added a quart of unnecessary oil, Fluffy would’ve been smoking for days!)

When we’re designing a process, we decide what the manual will look like. The manual can’t just be rainbows and puppies, regardless of how badly we want to give the impression that our sites will never fail. Everyone – even our expert users – will occasionally run into an event they weren’t expecting. It’s a task outside the happy path. The more obscure the problem, the better a chance we’re going to want to avoid building both the error notification and the follow-up steps altogether. That’s a temptation we should avoid.

Make sure that your messaging is findable and clear. If you can detect an error occurred, don’t just give a warning light, but also give instructions on what to do about it. Make choices on when to display that message immediately (“GET OUT YOUR CAR IS ON FIRE”) and when to put the error in the manual in the glove compartment. Make good conscious choices about all of the unhappy paths, and you’ll satisfy the people using your process even when things go slightly awry.

JavaScript tip: Variadic functions

Let’s say you have a table of data, and you have a requirement to hide some or all of the data by clicking some “hide” or “show” links. If your data is only one-tier, it’s pretty easy to do. You can wrap the rows that you want to hide or show in a <tbody> tag and use that tag to make the rows it contains display or disappear. Here’s an example.

But while a <table> can have multiple <tbody> tags, they have to be stacked, they can’t be nested.

Good:
<table>
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>
Bad:
<table>
  <tbody>
    <tr>...</tr>
    <tbody> <!-- ack! -->
      <tr>...</tr>
      <tr>...</tr>
    </tbody>
    <tr>...</tr>
  </tbody>
</table>

So what to do when someone designs a table that has multiple levels of expand and collapse and asks you to build it?

(A valid answer is “ask them if they really honestly truly need that much info at one time, because I mean c’mon really? There isn’t an information architecture solution better than that? Are they crazy?” but alas, sometimes that doesn’t cut it.)

If you knew that every time you needed to hide the subcategory’s rows you’d be hiding the same number of rows, you could write a function that accepted exactly that number of rows:

function hide3rows('ID1', 'ID2', 'ID3'){
  document.getElementById('ID1').style.display="none";
  document.getElementById('ID2').style.display="none";
  document.getElementById('ID3').style.display="none";
}

But I tell you as soon as you do that, some pest is going to come along and change the requirements to more rows or fewer rows, or sometimes six rows and sometimes eight. And you certainly don’t want to spend your time building a library of hide1row(), hide2rows(), etc. because you need that free time to follow around the person who wrote these requirements so you can keep asking them if they are in fact crazy.

This is where variadic functions come in. A variadic function is one that accepts a variable number of arguments. Generally, it does the same thing to all of the arguments, like add them together, or print them, or in our case figure out which elements they refer to and change their display attribute from visible to hidden. Different languages support variadic functions in different ways. JavaScript actually makes them pretty easy to use, by treating the arguments passed to the function like an array, so we can check the arguments/array length and iterate over its elements.

function hideThings() {
  for (var i = 0; i &lt; arguments.length; i++) {
    document.getElementById(arguments[i]).style.display='none';
  }
}

Here’s our previous table modified to use this function.
Now we can call our hide function with as many or as few arguments as we need to hide. hideThings(‘mon’, ‘tue’, ‘wed’, ‘thu’, ‘fri’); is just as valid as hideThings(‘birthdays’); and we don’t need to clutter up our files with sixty five versions of the same function.

Javascript tip: Style display and table rows

It seems like about half the world knows this one, but the other half doesn’t.

Let’s say you have a table, and you want to be able to toggle various rows on and off. So you write yourself a couple of simple Javascript functions to hide and show your stuff.

function hide(thingID){
document.getElementById(thingID).style.display = 'none';
}

function show(thingID){
document.getElementById(thingID).style.display = 'block';
}

Here’s the problem: display:block turns a table row into a block element — which is to say it compresses the whole table row into one big chunk and stuffs it into the space for your first table cell in that row.

If you do your research, you’ll quickly learn that the W3C says you’re supposed to use “display:table-row” for tables. But when you change your “show” function to use the preferred method, all the standards-compliant browsers start working, but IE 7 and the other annoying old IE browsers you’re forced to support just flat out drop the rows.

The secret? So obvious almost no one thinks of it until they’re told:

function show(thingID){
document.getElementById(thingID).style.display = '';
}

By setting the display to effectively “ain’t got one”, you tell the browser to display the row the way it would have if you hadn’t messed with it. Which results in what you were looking for:

To check the results in your browser(s) of choice, feel free to fiddle with this test page.

Pet peeves: Review pages you can’t review

There’s security, and then there’s stupidity.

We’re all familiar by now with the security pattern where you set up 2-3 questions that “only you” will know the answer to (well, only you and people who know you really well, anyway) in addition to your username and password. It essentially sets up a two-password system. If you can’t answer the first password (your security question’s answer) you never get to the second password, thus securing it.

Or something.

I have a lot of problems with that security pattern, which I won’t get into here, because this post isn’t about the security, it’s about the stupidity. It’s security when you ask me to set up a double-password system. Since it’s critical information, it’s good design and good sense to ask me to review the information before I submit it, and print it for my records. One password is hard enough to remember, but this pattern essentially asks me to set up three.

It’s stupidity when you decide that your security policies need to be strong that when you ask me to review my information for accuracy, you obscure the answers to my questions.

And yet… that’s what we have here.
Asterisking out the answers to the security questions? Not helpful when part of reviewing is confirming that I spelled them right!
I’m willing to guess that the vast majority of people are not dumb enough to fill out a registration form for a medical billing website on the Jumbotron of their local stadium, or anywhere else that would allow a significant number of people to view the process. So why make that registration even harder by blocking the review of critical account-access-granting information? It’s security absurdity.