The Usability of Menus

There’s a concept in software development termed “usability.” The subject of usability focuses on how friendly a given piece of software is for the user. Basically, will people be able to use this and not be frustrated?

The Internet is an incredibly free market, where the slightest inconvenience can easily drive away visitors. The barrier to entry and exit are so low, that it’s crucial. Consequently, it’s a requirement for any substantive web project.

That said, what happens when we apply the principles of usability to other areas? I’m going to focus on videogame and DVD/Blu-Ray menus. If you compare menus in desktop computing software, and the menus in videogames and DVD menus, you’ll see a stark contrast. Software often has a very dry and direct method for navigation, as it’s crucial to make every step perfectly clear. This is completely lacking in our examples. Take the menu from Guilty Gear XX Accent Core

There is a sense out of developers that the interface needs to have extra visual flare, and consequently create non-standard and often unintuitive interfaces. Here we see something of a honeycomb layout where we can’t be sure what will happen is we press a particular direction. Additionally, it’s fairly difficult to differentiate between the different characters.

It’s not uncommon in the genre, as character options get fairly extensive, yet we don’t see much of an effort to categorize or make it easy to find a particular character.

Better, though still not organized in the best way, is Super Smash Bros. Brawl. The characters are easy to distinguish, and include the characters’ names along with the icons in a sensible format.

It doesn’t have to be a matter of overcomplicating things, either. Even simple selections can be bungled an even simpler manner if you don’t take the care to make things clear for the user. This example comes from the DVD set for Season 4 of Angel,

Here we see four episodes, but no indication of the order of episodes. You’d expect the top-left to be first, but you still have to think for a second. From there, it’s more confusing — does it go across or down? Clockwise? Counter-clockwise? Merely labelling the episodes with the episode number would have resolved the issue, but it would still be advisable to order the episodes vertically to eliminate any confusion.

A great example of doing DVD menus right is Azumanga Daioh,

The selected episode is clearly distinguished, the episode numbers are unmistakable, and your options go immediately to the episode select rather than “Play All” or some variant. Also positive is the handling of language; there are only two options, English and Japanese, and it automatically selects the language that isn’t currently selected, and upon selecting, moves your icon to “Main Menu” to minimize button presses.

Usability doesn’t have to be about confusion, though. As soon as you make the user think, you’re creating a problem. You’re not supposed to think about how things are happening. Let’s take a look at the most critically acclaimed title of all-time, even, The Legend of Zelda: Ocarina of Time

Here we see a title screen. We used to see a lot of splash pages on the web, but those have since gone the way of animated backgrounds and Bonzi Buddy. It’s commonly accepted that these waste user’s time. It’s a self-indulgent process that adds an extra step between the user and the content.

Funnily enough, our counter-example to this is a pioneer,

You see fundamentally the same screen — gameplay in the background enticing you get started, but have the menu immediately at your fingertips. No meaningless “Press Start to Continue”.

Then we get down the main event, what I figure everyone assumed I’d be ranting about in the first place. The most egregious breach of usability are the advertisements users are subjected to before they’re able to reach the content. This is a deathwish on the web — Youtube has been successful as it doesn’t (for the most part) subject users to advertisements before a video plays, and that’s free content. When it comes to purchased games and DVDs, there’s no excuse.

The most common complaint is the most obnoxious problem, and that’s the matter of unskippable introductions and screens before it takes you to the main menu. In the same vein as splash screens, these waste users’ time.

Merely picking a game at random from my collection, as this is applicable to almost any modern console videogame, take a look at MadWorld

The SEGA logo, the following two slash screens and the logo animation are all unskippable, every time you turn on to play the game.

Similarly, though without a video to show you, The Wire DVD set also includes several unskippable intros that are becoming more common, particularly on Blu-Ray discs.

Who does it right? I honestly don’t know of one. Some are better, some are worse, but all seem to insist on displaying some form of advertisement to the user before actual use.

These aren’t difficult problems to avoid, but they do require some actual concern for the experience of users, and that unfortunately seems to come second.

Some Things Change

For a long time now I’ve felt like a living contradiction. Everything I used to think about myself has been inverted, and everything I currently think about myself include both ends of the spectrum. Brilliance and idiocy, joyful and sorrowful, sincere and flippant, superior and inferior. There have been some constants, but those appear to be dying.

The latest to fall is probably for the best. I’ve played up my own negativity on things, as I do tend to focus on what the problems are. I think it plays into programming, as handling exceptions is necessary, so picking apart the little things is part of the job. But in a general sense, I’m so sick of the negativity.

It’s one of the best things we had going for us for a long time at The VG Press — the criticisms may have been legitimate when we had them, but they were in good humour. Yet, nowhere’s perfect; here and moreso the Internet at large is creating a great big bastion of hate. I’ll mention up-front that I’m not referring to factual matters; those who, for example, rally against vaccination are doing enormous harm and deserve to be vehemently shot down. It’s the realm of significant subjectivity. It doesn’t have to be videogames and it doesn’t have to be personal; any area where there’s room for reasonable disagreement, there are plenty to take it as an absolutist position.

If there’s a criticism, it’s not enough to just bring it up in the appropriate context, or if as a reaction, to expand on it. With anything and everything, there are some to try to ruin it for everyone else. It also gets worse, as it does spread to personal attacks by relation. Those who support X are amateurish, or any number of other insults for no other reason than a difference of opinion.

So I’m done. Keep it to yourselves, I don’t want it destroying me from the inside out. If you want to berate people for playing “casual” games, or PHP developers as not real programmers, or country music fans as hicks or any other selfish, outwardly hateful, spiteful and utterly immature positions, that’s your prerogative, but you’re not going to ruin it for the rest of us. You’re not going to ruin it for me.

Accessible Forms with PHP and jQuery

A primary challenge of recent web-development is how to make use of the great new dynamic tools provided to us in using libraries such as jQuery, while still providing an accessible website without the use of JavaScript. While there’s more to accessibility than making a site work without JavaScript, it’s a fundamental start. This task looks arduous, but it doesn’t have to be — approach it right from the start and it may actually be trivial.

Let’s start from the no-JavaScript version and work up. Normally your form without JavaScript would look something like this

<form method="post" action="example.php">
    Field: <input type="text" name="field" /><br />
    <input type="submit" value="Submit" />
</form>

To have JavaScript handle the post, we’ll add an onsubmit function to the form.

<form method="post" action="example.php" onsubmit="return formSubmit(this)">
    Field: <input type="text" name="field" /><br />
    <input type="submit" value="Submit" />
</form>

When the onsubmit function returns false, the form does not submit. So by having the formSubmit function return false, we can have the page handle the post via AJAX instead of having to refresh the page. Let’s look at the formSubmit function.

function formSubmit(obj)
{
    var form = $(obj);
    $.post(obj.action, form.serialize());
    return false;
}

The .serialize() function takes the form elements and converts them to query string parameters so they can be passed through post. By using this, we can reuse the same generic formSubmit function regardless of the form — all we have to add is the onsubmit attribute to the form.

Now you may also want to have error and success messages return. A good way to handle this is via JSON objects. JSON is a standard by which objects can be represented in string form, so we can pass a string from PHP to JavaScript, which can then be handled as an object. Let’s update out formSubmit function to handle this behaviour (the script will assume that there are hidden divs with the ID “error” and “success”.

function formSubmit(obj)
{
    var form = $(obj);
    $.post(obj.action, form.serialize(), function(data)
    {
        // Return data is JSON object string, so eval to get object
        var message = eval("("+data+")");
        showErrors(message['errors']);
        showSuccesses(message['successes']);
    });
    return false;
}

function showErrors(messages)
{
    if(typeof messages != "undefined")
    {
        $('#success').css('display', 'none');
        var error = $('#error');
        error.css('display', 'none');
        error.html(getMessageList(messages));
        error.fadeIn();
    }
}

function showSuccesses(messages)
{
    if(typeof messages != "undefined")
    {
        $('#error').css('display', 'none');
        var success = $('#success');
        success.css('display', 'none');
        success.html(getMessageList(messages));
        success.fadeIn();
    }
}

function getMessageList(messages)
{
    var output = '<ul>';
    // iterate through the object properties
    for(i in messages)
        output += '<li>'+messages[i]+'</li>';
    output += '</ul>';
    return output;
}

Now we need to construct the JSON object on the PHP side. The error will be echoed, but remember that we want this to work even if it’s not an AJAX post, so we need different behaviour depending on whether or not it was an AJAX post — echo error/success messages if AJAX, redirect back if it’s not. Let’s go to example.php; the script will assume that the value $_SESSION[‘page’] holds the value of $_SERVER[‘PHP_SELF’] before the post.

<?php
session_start();
$field = $_POST['field'];

if(!isset($field) || $field === "")
    Reporting::setError("Name cannot be blank");

if(!Reporting::hasErrors())
{
    /* Do something with $field */
    Reporting::setSuccess("Operation with <em>$field</em> completed successfully");
}

Reporting::endDo();


class Reporting
{
    public function __construct()
    {

    }

    public static function endDo()
    {
        if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest')
        {
            if(self::hasErrors())
                echo self::getJsonErrors();
            else if(self::hasSuccesses())
                echo self::getJsonSuccesses();
        }
        else
            header('Location: '.$_SESSION['page']);
    }

    public static function hasErrors()
    {
        return isset($_SESSION['errors'][0]);
    }

    public static function hasSuccesses()
    {
        return isset($_SESSION['successes'][0]);
    }

    public static function setError($message)
    {
        $_SESSION['errors'][] = $message;
    }

    public static function setSuccess($message)
    {
        $_SESSION['successes'][] = $message;
    }
    
    public static function getJsonErrors($clear=true)
    {
        return self::getJsonMessages('errors', $clear);
    }

    public static function getJsonSuccesses($clear=true)
    {
        return self::getJsonMessages('successes', $clear);
    }

    public static function showErrors($clear=true)
    {
        return self::showMessages('errors', $clear);
    }

    public static function showSuccesses($clear=true)
    {
        return self::showMessages('successes', $clear);
    }

    private static function showMessages($type, $clear)
    {
        $output = '<ul>';
        foreach($_SESSION[$type] as $val)
            $output .= "<li>$val</li>";
        $output .= '</ul>';
        if($clear)
            $_SESSION[$type] = array();
        return $output;
    }

    private static function getJsonMessages($type, $clear)
    {
        $output = '{ '.$type.': { ';
        $comma = '';
        foreach($_SESSION[$type] as $key => $val)
        {
            $output .= $comma.$key.': "'.$val.'"';
            $comma = ', ';
        }
        $output .= ' } }';
        if($clear)
            $_SESSION[$type] = array();
        return $output;
    }
}
?>

Looks like a lot of work, but with that, we’re all done. Everything from now on is handled identically between jQuery and non-JavaScript versions of the site, and all you have to do is add onsubmit=”return formSubmit(this)” to each form, and in the processing script, close with Reporting::endDo(). Everything else takes care of itself.

You’re Only Fooling Yourself

I rarely relate to characters in movies, books or TV shows. They’ll have the typical character constructs that I, for better or worse, tend not to fall in to. Recently, though, I’ve found a bit of common-ground with the characters in His and Her Circumstances.

His and Her Circumstances is an anime that focuses on the relationship between Yukino Miyazawa and Soichiro Arima. The two come together based on their mutual character flaw of putting up appearances. Each of them, for his and her own reason, had been trying to appear to their peers as perfect; they were model students.

I’ve been doing this for years. It’s not exactly the same situation — Miyazawa would practice all night and day, and lie about interests; I avoided the topic altogether. My most recent blog post focused on the idea of not saying things you aren’t sure about, as it’s become a defining characteristic of my outward appearance; if I don’t know, I don’t speak, lest I be perceived as intellectually inferior.

It’s gotten to the point where I deceive myself. I’ll get praise where I don’t deserve it, and have no idea why others get a positive impression. I’m unable to make decisions because I’m unsure what I actually want. It’s nice to be thought highly of, but it’s not worth it if it’s not real.

If someone asks a question, I search for an answer to appear knowledgeable.
If someone needs help, I find out how to appear useful.
If someone is better than I am, I avoid comparisons as to not appear inferior.
If someone is lesser than I am, I’ll accept challenges to appear superior.
If I’m likely to fail, I’m likely not to try.

Even writing this, my concern is significantly on whether or not I come across as narcissistic for writing about myself too often. You’ve also seen it yourselves; my posts will address objective points where I can provide an explanation, as opposed to posting personal opinion and my daily life. I do get caught up, from time to time, on argumentative points. I’ll talk about technical issues because that’s what I know, and additionally, around a non-technical audience, I don’t have to fear reprisal if I happen to be mistaken.

I fear I may getting lost in my own mind, but I also fear what else may be in there. As of now I’m benign as I drift by unnoticed in the background. False grace is better than genuine malice.

Idle Threats – Wireless Security Misconceptions

There has been a lot of confusion for a long time on the relative effectiveness of wireless security, even among the otherwise tech-savvy crowd. Last week, the other developers at work got on a conversation relating to wireless, and the typical dismissal of WPA and WPA2 was thrown into the mix as well. Simply put, this is wrong.

This attitude likely stems from the genuinely broken Wireless Equivalent Privacy (WEP) standard. WEP uses the RC4 cipher, which over time has had an increasing number of weaknesses found, but that’s not really the primary problem with WEP. RC4 is a stream cipher, so it requires an initialization vector in order to produce proper pseudo-random results. WEP’s initialization vector is too short, and not sufficiently random, and this is the source of the most successful attacks. WEP can be cracked in a matter of a couple minutes on an active wireless connection.

Wi-Fi Protected Access (WPA) is a protocol created to address the critical weakness in WEP. WPA required the use of the TKIP protocol for encryption, while WPA2 refers to WPA with the use of CCMP with AES for encryption. There have been proof-of-concept attacks against certain configurations with WPA with TKIP due to somewhat similar issues as WEP, but to a much lesser extent. The short conclusion is that with insufficiently short key renewal times, a connection with TKIP could potentially be broken in about 12 minutes. Set a key renewal time of less than 12 minutes, and there is no issue.

Meanwhile, WPA with AES encryption (WPA2) has had no such proof-of-concept attacks and remains, with a sufficient password, is perfectly safe.

There is also some confusion as to the nature of personal versus enterprise, as if having the distinction means one of them is insufficient. Enterprise is there for the use of an authentication server (RADIUS) such that user account-specific certificates are distributed. It’s irrelevant to the home or small business user, and it’s not a concern for safety.

Perhaps it’s a bit naive, but I do believe we can, with dedication and sacrifice, keep our mouths shut unless we know what we’re talking about. Someday, someday…

Passion is Overrated

Lately I’ve been thinking more about myself in terms of how I approach my interests. For varying reasons, my gaming has become more and more sporadic, and have been finding myself in a consistent mood for JRPGs. I may not find them the most well executed games most often, but they’ve been the most enjoyable for what I’ve been looking for.

On the daily life side of things, programming has been something I do because I like the way I’m able to create with it, and how I’m able to solve problems. There’s a sense of satisfaction that comes from, say, adding a new feature to The VG Press, or cutting a two hour job down to a two minute one with a clever script.

SteelAttack sparked the thoughts with this post,

SteelAttack said:

What pains me to an extent is watching people like you guys, who I have grown to care about and appreciate, get somewhat worked up because of statements like these, giving them credence when they don’t deserve it, and generally considering them journalists just because they happen to write about games.

By focusing on the conviction of our responses, it highlighted how little conviction I really had. Videogames, more than ever, have become a source of relaxation. I’ve come to have more passion about the community than the games, because that’s where the energy is.

In programming, there is a consistent theme of how programmers have to be passionate about their trade. If you’re not passionate about programming, you need to get out of the field! It’s no an uncommon train of thought, that it has to be your world to succeed.

Simply put, though, I don’t want passion. I’ve had problems with stress for a long time. Pressure situations, though I don’t think it translates to outward appearance, are too much. I burned out on chess in the same way, and simply put, it doesn’t make you any better. You can have all the passion in the world for programming and still be a lousy employee; you can love games more than anyone and still be miserable to be around; you can dedicate your life to one cause and get absolutely no where.

Giving an honest effort, certainly. But I find I’m doing just fine with laid back old me. I don’t think I have many detractors at The VG Press, I can still be as happy as ever playing Sakura Wars, and I seem to be getting pretty consistent praise at work for doing what I considered par the course. Passion? I passionately deny it.

We Made It

It’s been the most up and down, soul-searching, soul-crushing, exhilarating, exhausting, dramatic and dizzying four month span of my life. We started the year with an implosion at The VG Press and the rollercoaster had just started. The details are a story for another time, but now it’s time to take a look back just two months ago to An Open Letter to The VG Press.

The purpose of the post was to iterate the point that I was at a turning point, for better or worse. So, how have things gone? Well, I can’t say it’s all been perfect — things just never are — but I’m at a point where I can say I’ve made it, we’ve made it, and I’m good. I’m not perfect, and I never will be, and that’s okay.

So what does it all mean? I don’t know, but let’s find out.

Children Aren’t Your Props

In an e-mail exchange with Ryan Tate of Valleywag, Steve Jobs repeatedly referred to Apple’s platforms as providing freedom. “Freedom from programs that steal your private data,” he says, “Freedom from programs that trash your battery. Freedom from porn. Yup, freedom.”

Freedom is not from it is of. Freedom of expression, not from it. But that’s not what I’m writing about. Tate’s response included the line, “Porn is just fine! And I think my wife would agree.” Jobs added in a later e-mail,

“And you might care more about porn when you have kids…”

I have simply had enough of the world’s Helen Lovejoy complex. In school, teachers loved to use the word respect. How we should all have respect. I never could quite get a handle on what they meant exactly, but I can tell you this: it’s about time the world’s children were treated with some.

Children aren’t so frail as to be driven to delinquency by seeing a breast. They aren’t so mindless as to be turned into serial killers by playing a videogame. They aren’t so ignorant not to deserve the truth. And they aren’t so worthless as to be used for the sake of pushing a political agenda.

They aren’t your pets and they aren’t your props. Argue all you want about what causes harm, but include yourselves. We’re all people, and quit trying to pretend otherwise.

What is it, America?

Okay, so it’s been more than a year now with Barack Obama as president of the United States. There have been some good things, such as making adjustments to the insane Bush-era corporate tax-breaks, some broken promises, such as a complete avoidance of the topic of Don’t-Ask-Don’t-Tell, and you can decide either way what you think. That said, the right has lost their minds.

There are always those on the far end of either side, yes, but brushing this off as equivalent fringe groups is an act of desperate equivocation. It is becoming increasingly evident that there is about 25% of the population that is so crushingly uneducated and simply put, dangerously stupid. Take for example, this video,

It has affected politics. It has affected media. It has affected education. It has affected diplomacy. When you have a quarter of the population who are completely controllable yet utterly insane, you’re going to have problems.

So, for those who want to know. Obama is not a socialist, he’s not even liberal. The only thing killing America is the systematic undermining of the American science curriculum. And if you don’t want your tax dollars to go toward public health care because you trust the government less than corporations running it for a profit? You’re merely stupid. If you don’t want your tax dollars to go toward public health care because you don’t want to “pay for someone else’s problem” you’re a sociopath.

It’s the job of the still mentally competent to disparage those whose political opinion can be summarized into the words socialist, freedom, Jesus and guns for the harm they cause. It’s not a valid opinion to state talking points which are factually wrong. It’s not a valid position to state unsupported nonsense without backing. And it’s not a valid position that when the other side wins an election, it’s tyranny.

Vim and Emacs – When Programmers Design

There are various immortal battles of loyalty — Coke versus Pepsi, Kirk versus Picard, McDonald’s versus Burger King — but the one closest to programmers’ hearts is Vim versus emacs. Vim and emacs are text editors dating way back. Vim (as in VI Improved) is a “newer” version (as in only ~20 years old) of VI, which was originally written for BSD UNIX in 1976 and is a staple of terminal applications. Emacs is the brainchild of open-source pioneer Richard Stallman that same year.

Why are these crusty old terminal programs so near-and-dear to coders? The short answer is that they work. What they don’t do, however, is make themselves accessible. I’ve been jumping back and forth between both over the past few weeks, and simply put, this is what happens when you have programmers design software, and not just write it.

What I mean by that is there’s no denying the power of both editors. There’s a reason they’re still used, still maintained, and still invaluable. That said, there is simply no concern with making the applications intuitive, user-friendly, or out-of-the-box ready. If you’re going to make significant use of either, not only will it require significant time investment and the effort of learning not only the basics of how to use them, but the features that make them worthwhile, but also the investment of configuring the software to actually be practical for what you need.

The majority of my programming of late is with PHP-based websites. This means writing PHP mixed with HTML, as well as CSS and JavaScript files. Neither do this properly out of the box, and frankly, there isn’t a good solution for PHP mixed with HTML in either. There are relatively poorly performing add-ons that do the job, but not as well as they should.

One could argue that hey, don’t bloat the software. I may want that, but not everyone will. I’m not one for bloat, but there is consideration for convenience versus leanness. It’s part of the reason I use Opera over Firefox — it’s built-in, with no other maintenance required. Given the scope and use of Vim, I don’t think it’s an egregious request that it have more universal options out-of-the-box. Emacs is a 40MB download, so I hardly think fleshing out of the language support is too much to ask, either.

Let’s be realistic here. It’s programmers using this software. Why on earth do these programs have syntax highlighting disabled by default? Why are line-numbers disabled by default? Why does it require additional configuration, even downloads to get highlighting for popular languages?

We’re programmers, we fiddle, but that isn’t an excuse to leave software in a unfriendly state because you feel justified in saying “deal with it.” I do, and will continue, to use both programs; programmers handling design also means some awesome features — so long as you can find them.