So you got this PC/Mac game and during install or when you’re first starting it, you’re asked to enter a Serial Number like WARZ-DOOD-IROK-4331. Errr….

I would like to indulge on the serial mistakes companies make when it comes to entering serial numbers and why this process, if done wrong, only helps to reinforce software pirates.

#1 – Serial Number is not trivial to locate. Either there is no mention whatsoever in the “Please enter your serial number” dialog where to find the Serial Number, or that information is wrong. It doesn’t happen very often but when it does, it’s a painful experience. There is no standard place where a serial number is printed but it’s very common to see them printed on the backside of the manual, at the bottom, or on one of the disks itself. Hopefully that disk isn’t in the drive while you’re asked to enter the serial number! Less frequent but very annoying are serial numbers printed on the inside of the cover pages, either the first or the last page, along with other text and not visually enhanced with a thick border, red color or something to that effect. One game i know hid the serial number on a label underneath one of the disks of the DVD box. This may actually be a good place if that disk is the first disk and the setup program asks you to enter the serial number right away.

#2 – Serial Number font makes it hard to differentiate certain characters. The game SpellForce i worked on suffered from this very unfortunate problem. Certain characters like 0 and O or 7 and 1 were so hard to differentiate, and printed in a font that was way too tiny and consisted of dots instead of lines (as if it was printed with a needle printer), that consistently users entered incorrect serial numbers. It was a customer support nightmare. A good serial number does not use look-alike characters and either print the zero with a slash inside or do not use either 0 or O in their serial numbers.

#3 – The Serial Number entry box is a simple textbox. Usually the serial number consists of dashes to seperate blocks of 3 to 5 characters. A simple textbox leaves it up to the user to enter the dashes and makes it hard to spot missing or extraneous characters in each block. Take a look at how Microsoft implemented the serial number entry boxes – each block of characters has it’s own box and the dashes are already printed between the boxes. The cursor advances to the next textbox when you filled in the exact amount of characters from the first box. This is the best way to ask users to enter a serial number and it should be standard with all other methods frowned upon and getting a 10% review score deduction if they don’t use it. Game companies, please learn this lesson!

#4 – Dashes are added automatically while entering the serial number. This is the poor man’s solution of Microsoft’s (and other’s) serial entry fields which uses several textboxes with the cursor advancing (see #3). In this case we have just one textbox but someone thought the user needn’t enter the dashes and so they are added while you are typing. It does help to get the number of characters per block right. However, the problem with automatically added dashes is that they’re not immediately visible and the user will type them anyway! Sometimes you’ll even end up with 2 dashes!

#5 – Dashes are not printed at all. In my opinion this and the following are the worst kind of mistakes. Your printed serial number contains dashes but while you enter it in the single textbox it does not allow you to type dashes. Some users may frantically try to type the dashes and get frustrated, they may even think their keyboard is broken. You’ll end up with a long chunk of non-seperated characters and it makes it very hard to spot any mistakes or missing characters. Game Developers: DON’T MAKE THIS MISTAKE!!!

#6 – Serial Number entry box is case sensitive. A serial number never contains lower-case characters. Any serial number entry box that prints the letters as they are typed, which is usually lowercase, is just downright dumb and stupid. I’ve seen it myself: users start entering the serial number, they notice that the letters are printed in lowercase, so they go back and delete them and then enter the characters with the SHIFT key held down. Of course this can lead to other mistakes, like holding the SHIFT key pressed while entering a digit. Major disaster! There is no excuse whatsoever not to automatically uppercase any letter entered in the textbox!

#7 – Serial Number has several entry boxes but cursor does not automatically advance. Someone tried to copy Microsoft’s system but forgot to implement the crucial element to advance the cursor to the next entry box once the correct amount of characters was entered in one. This is a user interface nuisance which simply need not exist. That is a 5-minute task anyone can implement even during a rush to get things done quickly (aka crunch).

#8 – Serial Number is entered using the game’s ornate font. This makes the characters not look at all like the ones that are printed and in some cases makes the characters hard to distinguish even if the serial number itself took care by not using characters like O and 0. Do not use ornate fonts for entering serial numbers, period.

#9 – The Serial Number contains upper and lowercase characters. Yes, seriously, WTF !?!?!?! Use a modern serial key generator service that adheres to certain usability standards. Serial Numbers with upper and lowercase characters should be outlawed.

#10 – The Serial Number entry boxes allow you to enter invalid characters. Developers already know which characters are allowed in the serial number and which aren’t, so why not filter them out? Do not allow the user to accidentally or incidentally type characters which can’t be part of the serial number, like any SHIFT+digit character if the users does happen to hold down shift while entering the key.

Let’s recap, a serial number should:

  • be all UPPERCASE
  • not use similar looking characters
  • be printed in a standard location (back of manual)
  • be printed in a readable and reasonably large font
  • be visually highlighted from surrounding text or images to make it easy to spot
  • not be printed on the disk if it may be in the drive when the user is asked for the serial number
  • not be printed under the disk in the DVD case if the user is asked for the serial number before having had to remove the disk during install

The User Interface Guidelines for entering Serial numbers are:

  • one textbox for each chunk of characters with dashes already drawn between boxes
  • cursor advancing to next textbox when exact number of characters has been entered
  • entered characters are automatically and properly uppercased
  • invalid characters are not allowed to be entered
  • uses a font that closely matches the printed font / does not use an ornate font

It’s really rather simple, so why do i have to see these mistakes repeated over and over again???

Tagged with:  

Your first steps in Mac OS X

On June 6, 2009, in Good Advice, by Steffen Itterheim

In the first part of my series describing what hardware you need to become a developer for Apple’s iPhone platform i’ve already highlighted some aspects which will make your first steps on the Mac OS X platform feel like you’ve had both your legs broken and you’re just learning to walk again, building up your muscles and all. Incidentally, and physically, i’ve gone through that painful process in 2008 due to a ruptured anterior cruciate ligament (some important muscle in the knee). Now i am repeating a similar, although mostly mental process by getting accostumed to the Mac OS X platform. For this reason i’m writing this post on my Mac mini, and as always i’m struggling to find the keys on my “keyboard of the gods” for the angle brackets: < > …. Ha, GOTCHA!

So without further blabla, let’s go to the next part of the series:

  • Investing in the Hardware
  • Getting used to Mac OS X (old habits die hard)
  • Becoming an Apple Developer
  • Learning to code in Objective-C using Xcode
  • Getting the right Game Engine

I’m assuming you’ve just booted your Mac for the first time and went through the initial system preferences setup process. You’re now on the desktop wondering what to do first. You’ll immmediately notice the bar of icons at the bottom, this is called the dock. It harbors the applications that Apple deems important to users but you can modify that quite easily. From the icon’s names you’ll be able to decipher what the program does. For example, “Finder” is Apple’s equivalent to Microsoft’s “Windows Explorer”.

As you run some of these programs you’ll notice they don’t have a menu bar. Well, actually they do but they all share the same menu bar which is always located at the top of the screen. The menu options available change depending on which application is in the foreground. It may seem confusing at first but you’ll quickly rely on the top screen menu. The applications itself carry only the most often used functions in their window frame: drag the title to move the window, drag the lower-right corner to resize the window (for some reason you can’t resize windows by just dragging any frame border) and use the traffic light buttons to close, minimize and maximize the window.

One word about “closing” applications. If you click the red (X) button you might think that this closes the application but on Mac OS X it only hides the application. Click on the application’s icon in the dock once again to unhide it. Minimizing via the yellow (-) button minimizes it to the dock as an additional icon. Now how the heck do you really quit an application on Mac OS X? Simple, you either go through the menu by clicking on the application’s name (next to the Apple symbol) and choose quit, or you right click the icon on the dock and choose quit. At first it will be confusing not to know which application is still running and which is truely closed but there’s actually an indicator for that on the dock as well. Underneath each icon you’ll see a little white light shining as long as that application is still running. And speaking of the red (X) – sometimes it turns into a dot. This is an indicator that the document has changed but isn’t saved, similar to how the asterisk * symbol is usually suffixed to modified but unsaved document name’s on Windows.

One of the first things we programmers like to do with a new system is to toy with the system preferences. We may even have to before we do anything else just to set up our monitor(s) properly. Now where the hell do i get to the Control Panel equivalent on Mac OS X? Here it’s called System Preferences and you can find it either via the dock or by clicking on the Apple symbol in the menu and choosing System Preferences. The Preferences screen should seem familiar, although there’s two things that may seem odd: for one, once you click an icon, it shows the preferences but hides all other icons. To get back to the other preferences you can just click on the back button or on “Show All”, no need to close preferences to re-open it. Secondly, once you have made a change, how do you apply that? Simple: you don’t. All preference screens you’ll see on Mac OS X won’t have an apply command because each change is applied immediately, and if it has a visible effect it will become active right away – otherwise you’ll be asked to log off or reboot which is, especially compared to Windows, rarely the case.

So for a start this should be enough to get you going. You’ll still be a foreigner to this system for the first few days, and if you’re anything like me you’ll be even shouting at it, wrangling the screen and waving your fist to the god’s swearing how they had to make this all so different. Many things can become a showstopper and leave you frustrated. That’s why i do recommend to look back each day and remember what you’ve learned, or even mastered. Even though you’ll be banging your head frequently, running into walls, you’ll learn a lot as well. This is just your brain telling you it doesn’t want to learn, it wants things to be like it is used to because it’s so darn lazy. It’s not a good feeling not to feel productive but at least you can imagine what it feels like, at least mentally, what it’s like to be disabled (i mean physically now). Did you ever injure one of your hands or arms, so you couldn’t even do the simplest things anymore, like taking a shower, getting dressed or opening a can of worms (that’s gagh for you non-trekkers)? Think of it that way: you’re getting better each day!

And to ease your transition a little more, here’s a quick addendum of things you should know because you’ll be wanting to know that very soon:

General hint: drag & drop is a major feature of Mac OS X. It has more support and is more accepted than on Windows, so certain things will just work like you would expect them to – if you weren’t so used to drag & drop frequently not working at all, or as intended. Try to drag & drop often and see for yourself – in many cases it just works. Even for adding additional projects, libraries and source code to your Xcode project. There’s often no need to dig deep inside the build configuration.

General hint: download and install your favorite applications. For example, Firefox and Opera instead of trying to get used to Safari. It will make it easier for you to make the transition just because you’ll have something familiar to use in this new environment. Unless you were still browsing exclusively with Internet Explorer. You weren’t, right?

General hint: be careful when using TextEdit for text editing. It saves new documents as RTF by default. Personally i found Smultron working well for my text editing needs. Plus it’s developed by some person named Borg – as a weak-minded individual i couldn’t resist. But it might have something to do with the keyword “free” as well.

How do i make the Mouse Back/Forward browser buttons work?
Install the driver for your Mouse. My Logitech mouse has a Mac OS X driver which enables the system to make use of the additional buttons. The same goes for Keyboards as well, my Microsoft Natural Keyboard 4000 works just as well as an Apple keyboard with the exception of some strange remappings of keys, eg. the angle brackets key is swapped with the tilde key. Grrrr. But i’ll get used to it.

Where do i find additional applications?
Open the Finder. In the left frame look for “Places” and then select Applications. You can start them from there or drag them onto the dock if you need that application more often.

How do i install applications?
Most come in the form of a single .DMG file. This is sort of like a disc image, just double-click it and it will be mounted as a “drive” which opens a Finder window. The application’s icon then only needs to be dragged and dropped onto the “Applications” place in the Finder to install it. Yes, that’s how you install applications on Mac OS X. Some do have the classic setup wizard though. Others will want you to sudo your commands in the terminal – in that case hope for good instructions, or else take it to google.

How do i make the Home/End keys work like in Windows?
Yeah, that was a big one for me. Home/End moves the view to the end of the document, WTF?!?
Luckily i wasn’t the first one to be frustrated by this behavior, and here are some resources to help you get the behavior that you want:
Simple Mac OS X key bindings for Windows switchers if you need the quick-fix
Costumizing Cocoa Key Bindings, with extensive resources
Another Key Bindings site with additional help
Default Mac OS X System Key Bindings, if you’d rather learn them instead of tampering with them

Sadly, it doesn’t work in all applications. Opera for example.

Tagged with:  

Top or Bottom?

On May 6, 2009, in Design, by Steffen Itterheim

George Fan, Lead Designer of Plants vs. Zombies in an interview:

… regarding the plant cards on the top border of the screen with respect to all WOW players who are used to have their skill buttons at the bottom …

To the extent that it’s actually quite surprising that you didn’t put them at the bottom of the screen just so it would drive it home that that’s the way that you interact with them.

Yeah… [pauses] I don’t know why. That’s a good point. I don’t know why they’re not at the bottom of the screen [laughs]. I think we just put them up top and no one complained. I never thought to rework that. We actually had a little bit of a problem with getting the sun to fall from the top behind or in front of the… Okay, well if there’s a sequel we’ll change it. Thanks for that suggestion!

It’s simple, really … Windows puts the taskbar at the bottom ever since ’95.

So putting essential buttons on the bottom of the screen may just be following a Microsoft standard the wrong way (the Windows taskbar contains non-essential elements) … or id Software’s for that matter – remember Doom?

I say topmost buttons work best if they’re essential and used often (such as a program’s menu for example) … it feels more natural if that’s the main way to interact or if they are elements you need to focus on. Most likely because humans (and possibly Zombies, too) “read” from top to bottom … so i like that they’ve put them at the top in Plants vs Zombies. World of Warcraft isn’t necessarily wrong though – consider that WoW is a 3D world game where most of the interesting game elements reside in the bottom half of the screen (on the floor). So it makes more sense for them to have the action buttons at the bottom.

taskbar Needless to say my Windows taskbar is at the top ever since ’95 … but that’s just me being non-conformist. ;)

I also keep a lot of essential elements up there … maybe too many for some. That’s just me not wanting to use the Start menu.

Tagged with:  
Page 1 of 212