Design Matters

Graphical symbols have been used for decades to label knobs, buttons, switches, and of course connectors. This is not just a computer phenomenon. I first became aware of  product related symbols  on my Dad’s 1969 Volkswagen Beetle. I’m sure Volkswagen  decided to use symbols for the same reason we do. Symbols are a very cost effective alternative to traditional language.  It’s much more expensive to create  country unique models with translated nomencalture.  The ISO has been the governing body for such matters for as long as I can remember. ISO is an acronym  for the International Standards Organization.  They have standards for almost anything imaginable, including symbols.

Designers are certainly not strangers to the world of symbols. I would guess that nearly every designer has been pressed into service during their career to design a symbol or two. I’ve certainly designed my share. The one I designed that has achieved the most notoriety is clearly the symbol for ethernet. This appears on pretty much every personal computer in the world to label the ethernet port. I never imagined it would achieve this level of fame when I worked on this back in 1989 with my old IBM collegues Lou Behrens and Win Miller. It was first used on a link protocol converter,  if you know what that is. 

Symbols for local area network connections

The ethernet symbol was designed as part of a set that depicted all possible local area network connections available at the time. The design of the set is based on a common array of blocks to represent computers/terminals. The method by which they are connected is the only variable. The arrangement of the blocks is non-hierarchical to reinforce that no block  is a controller of the local area network symbolized. That sounds so impressive, but it’s right out of the old IBM Technical Disclosure bulletin where they were first published. Volume 32, Number 7 , December 1989, to be exact.

You can file this one in your computer trivia file right beside the origins of the “Ctrl-Alt- Delete”  key combination.  Here’s a test for you, anyone know who invented that?

David Hill

There have been many comments over the last few weeks, fueled I suppose by the T400s keyboard update,  regarding the positioning of the Fn and Ctrl keys on ThinkPad. Any long time ThinkPad fan will know the Fn key has been in the extreme lower left hand corner with the Ctrl key right next door for a very long time. I personally can’t remember it not being there. 

The Fn key  first debuted on the monochrome display ThinkPad 300 in October of 1992.  Yes there was a ThinkPad with a monochrome display.  The Fn key circa 1992 was placed exactly as it is today.  Interestingly enough,  Apple uses the same positions for their Fn and Ctrl keys as ThinkPad. Every other notebook personal computer manufacturer that I know of  has the Fn and Ctrl key positions swapped. Some would say backwards.

The Fn key was originally placed  by the ThinkPad designers in the lower left hand corner to make the key easier to locate when using the keystroke combinations. There was a rationale. This is especially handy for turning on the ThinkLight in the dark. Aim for the two extreme corners. Desktop keyboards have never had the Fn issue to deal with since there are not such stringent  size contraints for their keyboards that require the use of such a key.

This is a often debated topic that quickly divides the room into two highly emotional camps. There are arguements to support both cases. So who is right? Who is wrong? Is there really a right answer or not? People have even gone so far as to write code to swap the keys location in BIOS. Others despise the idea of ThinkPad aligning with the status quo and would rather fight than switch. I thought it would be interesting to poll the Design Matters readers to gauge the strength of voice each camp has. Let the games begin.

David Hill

I mentioned in the T400s sneak peek video that we had tightened up the tolerances between the keys to improve the overall system appearance and reduce the likelyhood of crumbs, or other debris, from slipping into the keyboard scissor mechanisms. We did not do this at the expense of changing the key pitch or altering  the contoured portion of the key that you feel. It was of paramount importance that we did not change the typing feel with this enhancement.

What we did was to increase the size of the skirt at the base of the key in order to make the gaps between the keys tighter. We also made the corner radii smaller for the same reason. The skirt is a technical term for the sidewall of the key that flares out towards the bottom of the key.  The name makes a lot of sense when you think about the key cap shape. The previous ThinkPad keyboards had a nominal key gap dimension of  .7mm. The T400s has a nominal gap of .4mm. A difference of .3mm may not sound like much but it makes a big  difference.

Before moving forward with this change our Yamato engineering team did an extensive tolerance analysis and accelerated wear test to ensure we were on track with the change. We wanted to make certain the keys did not rub each other out of the box, or over time as the keyboard wears in. Yes, all keyboards wear in over time.  People usually don’t notice it since it happens so gradually.

You can immediately see the overall visual impression that the tighter gaps make.  Small design changes can have a big impact to the user experience. You won’t feel this one, but you will be able to see it, and hopefully be less bothered  by stray crumbs. Now back to eating my lunch while typing on my ThinkPad.

David Hill

 T400s control design with  microphone mute indicator illuminated

Over the last 17 years we have continued to evolve the method of controlling  important functions such as speaker volume and mute.  Historically, these controls have been delicate sliders, embedded in the keyboard as a Fn fucntion,  domed shiny black buttons,  domed matte silver buttons, and most recently a black segmented bar as found on the X300 series. I’m sure everyone has favorites from their stable of outdated ThinkPads.

With the proposed introduction of  new ThinkPad platforms comes the opportunity to once again revisit these controls. This time things were a bit different. There was a desire within the  team to further optimize the  T400s for voice over IP use.  VOIP,  as it in known within the industry,  continues to grow in popularity. I find myself on more and more late night conference calls using applications that transmit sound and video to a broad audience of participants. With this increased focus on VOIP came the requirement to add a mute microphone control.  What telephone doesn’t have this feature anymore?

One of the design problems created by adding a mute microphone button was that now we had to deal with even more  controls in a very constrained space. Increasing the overall size of the product to add a single button is just not done. Without a new idea we would end up with a row of 6 buttons,  when you include the ThinkVantage button and the power button. The “Wurlitzer Syndrome”  was starting to creep in. Sure organs sound cool, but not everyone can play them. We did a broad study of alternatives trying to squeeze in the 6th button, but none of them really were appealing to me. They all seemed to have spacing or graphic issues. Fortunately one morning while driving to work I happened to pay particular attention to the volume control on the steering wheel of my car. It was a nice simple rocker rather than two buttons. Why not do this for ThinkPad? Not only did it remove a button, but it made the graphic labelling simpler. A single speaker graphic symbol and a nice clear + and – sign. Thanks for the idea BMW.

Steering wheel volume controls on my car

 Adding a mute control for microphone added a nice convenient  feature, but could also add confusion. Can you imagine how bad it would be to push the mute speaker button when you thought you had muted the microphone. I’ve personally been on a few calls when someone thought they were on mute but weren’t. This can be very embarassing.  A similar issue exists for cameras. We also have a means of linking mute microphone with camera if you like, but thats a different blog topic.  The typical approach would be to rely on graphical symbols to  label the controls, but that is not a guarantee for success.  Symbols, unfortunately, are not always universally understood. We  talked about using a set of  multimedia symbols such as the one below, but the idea never really gained traction beyond the joke of the day . 

Multimedia control graphical symbols?

We ultimately decided to use control location to our advantage by creating a very deliberate separation between the two mute buttons. The two mute buttons cleverly straddle  the volume rocker to achieve that goal. This  improves your  ability to remember that one mute function is on the left and the other is on the right. Our belief was that this would not have been as clear if they were directly side by side. A similar confusion is often made with light switches that share a single swtitch plate. Each mute button also has a unique graphic and a convenient red LED centered within the button to aid in status communication. If the LED is illuminated, the function is muted.

 Hopefully we have helped to minimize those  embarassing moments and have made controlling basic functions easier.

David Hill

 Detail of the T400s tactile cue feature

Touchpad texture has gone relatively unnoticed in the world of ThinkPad design, and perhaps the industry in general.  TrackPoint fans still wonder why we include a pad at all, and would not likely contemplate the advantage a texture could create for those who use them. If you are a pad user, and there are a lot out there, you know that the feel of the pad and the boundries of the pad are both important considerations.  No pad user wants to look to find the pad, they want to feel it while looking at the screen. The desire to thin down the T400s required us to use a totally flush pad. That means no raised borders to define the active area. We were literally on the hunt for fractions of a millimeter. Even the X300 pad was allowed to be recessed by a fraction of a millimeter. This flush requirement neccesitated that we needed to create a new tactile means of locating the pad and its boundries.

The  texture we introduced on the T400s was inspired by several things. One of them was the innovative yellow paving blocks used in Japanese train stations and sidewalks to guide or warn visually impaired pedestrians.  Every time I visit Japan I am intrigued by these blocks. The square Tenji block  system was invented in Japan by Seiichi Miyake in 1965 and first used in Okayama City in 1967. The oblong raised pattern indicate places, and in what direction, it is safe to walk confidently. The “warning”  blocks with the round raised dots indicate edges, corners or other places where greater care or caution is required. The tactile cues developed for these unique blocks help everyone stay clear of train platform edges, crosswalk dropoffs, and other related hazzards. Sighted or not,  it’s really quite amazing how well these blocks work. You can easily discern the difference without looking.

Tenji paving blocks in a Tokyo train station

We studied a tremendous number of seemingly identical design variants of the dotted texture before we decided on the final version. Bumps varied by diameter, height, spacing, gloss, and even hardness.  Every sample was evaluated  by appearance and feel criteria. One test was to compare the surrounding palmrest texture to the pad samples to ensure that you could detect when your fingers moved beyond the pad boundries. We always did this with our eyes closed and then open. We also wanted to make certain the texture was pleasing to touch and look at. Many alternatives were rejected because they were too flashy looking, felt like sandpaper, or just made people giggle. In case you are wondering, we never considered making the pad yellow.

Sampling of prototype tactile samples 

As the product got closer to release we were also able to test the texture with multiple users for extended periods of time. The feedback we gathered was very positive. They were able to detect the border easily and often commented that the subtle texture gave them a sense of precision as they moved their finger across the pad. The bumps provide indication of  distance travelled and speed of movement. We found this effect to be of particular interest with multitouch gesture input.

It’s always rewarding to see our efforts noticed in the media and product reviews. Even more fun if the comments are positive. Nilay Patel at Engadget recently reviewed the T400s and loved the product and the touchpad design.  This is my favorite quote from the review.

“a new texturized multitouch trackpad that’s one of the best we’ve ever used. Seriously. In contrast to the hyper-smooth glass pads found on the MacBook Pro, the T400s’s pad is covered in tiny nubs, which feel amazing under your fingers and make gestures like pinch-to-zoom feel more precise, even if they actually contribute nothing. It’s pretty great — we wish all trackpads were like this.”

I hope you liked reading about how we developed the new touchpad texture, and that you like the resulting design. I intend to keep sharing  stories like this one about how we created the T400s design updates. Keep watching Design Matters for updates over the next few weeks.

David Hill