wordpress CMS theme

The 10 Default Serial Number User Interface Design Failures

On 05.17.10, In Design, My Rants, by GamingHorror

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???

5 Comments
Leave A Comment

Tagged with: • • • • • • • • • • •
 

cocos2d LayoutHelper – touch & drag sprites to ease your game’s visual layout

On 02.06.10, In Programming, by GamingHorror


51 Japanese Characters

Today’s cocos2d code sample is a class i wrote to ease the layout of the visual elements in the 51 Japanese Characters app i helped create.

The problem i needed to solve was that i got a 320×480 PNG image from the artist which showed the final layout of one of the japanese characters. But my images were of course 51 seperate head, body and leg images and i needed to position each of the 3 body parts to correctly overlap with the sample character in the layout image. After trying a few times getting the correct coordinates by doing a simple build, check, change coordinates cycle with the layout image as temporary background image i knew i needed something better and more efficient. I was going to have to do this for the buttons as well, so that would have taken a loooong time to figure out each sprite’s and button’s correct image positions.

But before i go on describing the code, here’s one important step that may also be very helpful for your application if you need pixel-perfect placement of anything. Open up cocos2d’s ccConfig.h file and find these lines so they look like this:

/** If enabled, the CocosNode objects (Sprite,Label,etc) will be able
to render in subpixels. If disabled, integer pixels will be used. */
#define CC_COCOSNODE_RENDER_SUBPIXEL  0

/** If enabled, the Sprites rendered with the SpriteSheet will be able
to render in subpixels.  If disabled, integer pixels will be used. */
#define CC_SPRITESHEET_RENDER_SUBPIXEL  0

This will turn off subpixel rendering of sprites and is important because otherwise you will not get a perfect match with the visual element in the background image (which for me was my layout guide). Without these changes what happened was that no matter which coordinates i used, either plus or minus one more towards left/right or up/down the images simply did not seem to align perfectly. This was caused by subpixel rendering and after i turned it off, the images aligned perfectly. If you don’t need pixel perfect alignment, you don’t need to turn it off. Actually, only turn it off if you know you’ll need it, at least that’s what’s been recommended.

Anyhow, way too much text already. So in short the LayoutHelper class simply takes a sprite and (usually) the CCLayer the sprite resides in as “parent” and that allows you to simply touch that sprite and drag it around. Conveniently, it will display the coordinates for that sprite as you move it around, plus it’ll be transparent while dragging so that you can see if it matches with the background. If you don’t drag it, and this is optional, it’ll start blinking to both indicate that it is a draggable sprite in “layout mode” and to help you see if it really aligns perfectly with the background. All you need to make the Sprite draggable is to add this line with “sprite” being the sprite you want to layout by touch & drag and “self” being the CCNode you want the “sprite” to be added to for layouting:

[LayoutHelper helperWithSprite:sprite parent:self];

Go ahead and try it, it’s free: LayoutHelper class for cocos2d

14 Comments
Leave A Comment

Tagged with: • • • • •
 

Nxet Gen?

On 11.21.08, In My Rants, by GamingHorror

My Avatar

So, the NXE (New Xbox Experience) is online for a few days. We all had some time to play with it. There’s two things i find noteworthy:

Now that it’s out, people don’t seem to talk about it that much. Either everyone’s busy exploring it, or most people realized that it’s just a user interface and nothing to get excited about, really. Which can be a good thing … if the interface isn’t the first thing you’re going to be talking about rather than what it enables you to do, they (Microsoft) must have done something right.

Many Avatars look a lot like the gamer who created it. I find it surprising to see that i can actually tell from the Avatar who of my friends it is – not because i’ve made the connection of that particular Avatar with the Gamertag but because i recognize these people. This is weird, i kind of expected everyone to go for something weird and crazy. But since there aren’t so many options to make those crazy Avatars, why not just try to sketch yourself? I like that.

My GamerpictureStill, i scrapped my kinda-looks-like-me Avatar after two days to see what is possible in the crazy direction. I mean, after all, i’m a little crazy (just a little … the rest of me is split equally between foolish and childish). So this “teddy bear” Avatar is what i came up with. Interestingly, the mouth i chose is labeled “angry”. I just hope there will be more costumization options soon, especially in the clothing department there isn’t much to choose from.

0 Comments
Leave A Comment

Tagged with: • • • •
 
© 2010 Steffen Itterheim aka Gaming Horror