User Interface for a Prototype Network-Enabled Smart Card

Smart cards are tiny, tamper-resistant, computer systems on a chip that is thin enough to be pressed into a plastic credit card. In 2005, Axalto was a year or two into the R&D for a chip that could access the internet: just plug it into a network jack or a USB port and you could access the chip through your web browser, instead of through proprietary software or a hardware terminal like an in-store kiosk or a bank ATM.

Use Case

The initial demonstration was as a password store. You'd save all your usernames and passwords on this card you kept in your wallet, ensuring your online identity was safe. Even if your wallet was stolen, the thief still wouldn't know your PIN, just like with your ATM cards.

This meant three distinct pieces of UI: the initial launch of the card interface; entering the PIN; and the list of sites, including logging into existing ones, editing them to change usernames and passwords, and adding new ones. I raised questions about each of these in turn before starting on the revised UI.

Initial Launch

This UI will be on every card and in every demo, as well as serve as a reference UI for future customers. As a product used by individual consumers, it may be the general public's first look at “Axalto” and if it is difficult to use it will reflect poorly on the company as a whole. Will the physical cards be branded to reflect their issuing company? Will they say Axalto on them? Will the UI be branded to reflect the issuer? Should the UI look like the card? Does an on-screen “card” form factor help or hinder the branding and interface design?

Axalto promotional materials are color-coded based on product type. Axalto's primary colors are purple and grey, as are their prototype equipment. The existing UI color scheme is purple and grey. Should it be orange to go with the rest of the access control products? Will the Network Card have its own branding independent of Axalto proper?

PIN Entry

Smart cards are the size of credit cards, which are wider than they are tall. An on-screen window approximately the size of a credit card doesn't give you much space for a 3x4 button grid, making it harder to click on individual buttons. Wider buttons improve this, but does it reduce the recognition affordance of a button pad, which is normally taller than it is wide?

Using a single image of a button pad to help foil keystroke loggers hurts accessibility. What is the trade-off between security and accessibility?

Site List

A secure password store could balloon from a handful of sites to dozens, even hundreds. How do you let the user find and log into the site they want to go to without getting in their way? Drop-down lists get unusable very quickly. We would also want to do things like store favicons, making the list of sites more like bookmarks and less like a simple list.

Original Interface

The original interface being demonstrated was purely functional, designed and maintained by programmers.

Revised Interface

No art production was available and Axalto's marketing materials were austere. I patterned the visuals off of the most common Axalto marketing artifact: their PowerPoint template. This image shows a slide, using the template, which also has an image of the prototype card PIN pad UI.

Applications that serve as password stores are common-place, but having a physical token be the store is a unique differentiator and I wanted to keep that idea at the fore. I elected to have the UI approximate the on-screen proportions of a physical card.

If the user enters the URL for their smart card, or if the computer automatically launches a browser on behalf of the card, we do not have the ability to control the size of the browser window to best simulate the physical size of the card. Therefore, I implemented a rather severe splash page that made it quite obvious that a pop-up window would serve as the primary UI. This, of course, came with its own security problems, and these would be addressed in the final Gemalto NIM Reference UI.

On each screen, the top of the layout holds the primary page title or direction, providing a sense of “where you are.” Text is black and links are in blue to provide traditional web affordances to the UI. Lesser-used content, such as help or settings links, is set at a smaller point size and out of the way of the main body content.

Catering to Fitts' Law, the visual PIN pad buttons are wider than they are tall to provide the largest possible clickable area within the vertically restricted space. Plain English words “clear” and “enter” are used instead of the traditional HTML form “reset” and “submit” or ATM button pad icons such as a red X and green arrow, because while functionally similar to a traditional HTML form or ATM button pad, it is neither visually nor tactile-y the same, so we cannot count on those affordances to carry over. Being verbally explicit is the best policy here.

For the list of sites, I felt explicitly providing a list was the best to present the user's stored bookmarks. To improve navigation, sites are presented in alphabetical order by their proper name, and an index is provided at the top with links to each position in the alphabet. Efficiency could be futher improved by scaling the index to the entire width of the window, providing the links with the greatest possible clickable area and compressing the unlinked letters.

This UI never left R&D, but the experience of developing and using it served as the design basis for the Gemalto NIM Reference UI.