Sender 11

Run for cover

This blogger has moved!

I want to invite you to my new gig over at Rift Labs. We are devloping Open Source Hardware for photographers. Come join us if you are into UX, design or photography at some level. Visit Rift Labs

 

The americans are coming!

Now, Robert Scobble is not my favorite blogger either, but you got to admit that he has an uncanny ability to put the finger where it hurts on interesting stuff.

He has just put up a post on the Travelling Geeks site about the sad state of affairs in European mobile. Just a few years ago the americans were way behind in mobile in most every aspect. Their phones were sad little things - they only turned them on when they had to make a call outside the house. Their operators were terrible and there was no coverage anyway. And they lacked interoperability - they couldn't even send an SMS message to a someone on a different carrier. Not that they would know how to anyway.

But what is the situation now? The iPhone, Android and the Palm Pre is setting the standard. Granted that the tech press is predominantly US based and more or less blind to anything going on outside the home turf. But the press over here in Europe is touting the same. And they are rignt. Not to mention the europeans that are buying iPhone and Android phones by the boatload.

I usually am polite and say I’ve seen some stunningly cool companies, like Spotify (who won four TechCrunch Europa awards last night) but in the back of my head I remember how cocky the same entrepreneurs used to be when showing me their cell phones and noting how far ahead of the world they were. That cockiness is done and that has deep implications for entrepreneurs across Europe. They must now visit Cupertino and Mountain View to get access to customer bases.

Read the post here: Europe no longer matters to lead position in mobile.

Visual Signs and Symbols

This blogger has moved!

I want to invite you to my new gig over at Rift Labs. We are devloping Open Source Hardware for photographers. Come join us if you are into UX, design or photography at some level. Visit Rift Labs

 

When I was travelling last week I spotted this sign on the side of the plane engine:

This is not a men's room? No urinating on the engine please?

What is a men's room sign doing on the side of a jet engine? To me it looks like an example of how symbols evolve over time and take on a different meaning. The symbol used to be a generic "male" symbol. In the, um, waste management context, it was used as a secondary symbol, under a "Toilet" sign to separate the men and women. (If you are American and the topic of toilets troubles you, I'm sorry :-))

The male and female symbol has been promoted to take over the meaning of Toilet. It is so widely used for this that it takes on the meaning of Toilet even out of context. Is this a loss or a gain? I believe it is probably more of a loss than a gain.

There are a number of other examples of symbols taking on new meaning. The peace sign ☮ used to mean peace, it now means "the 60s".

There are also numerous examples of symbols that depicts objects that no longer exists. This is generally the problem with symbols. They don't age well. For example the floppy disk used for "Save" (look it up in Wikipedia, kids). There is a generation growing up who has never seen a floppy disk, yet they a still merrily clicking it to save their torrent files. The floppy disk has gone from being a symbol (a metaphor) to being a sign.

Signs and Symbols are not the same

There is a difference between a Sign and a Symbol, in the semiotic sense. *

A (Visual) Symbol stands for something. It is connected to something through some form of relation (visual similarity, history, etc). It often depicts a real world object and is often metaphorical.

 

A (Visual) Sign on the other hand signifies something. Its form is arbitrary and it simply has to be learned. For example currency.

37signals has recently added currency signs to some of their their software. The sign to the far right is supposedly a generic currency symbol. Even if I have if right here on my home keyboard, look: "¤", I never knew what it was until I read it on their blog today. (The sign is not on my UK work laptop keyboard.) The sign was introduced in 1972. I guess it is a good example as any that you don't learn signs that you don't need in your daily life. It takes a lot of time and effort to establish a sign.

Symbols as metaphors

The advantage of symbols used as metaphors is that they can symbolize "invisible stuff" without requiring learning. You can understand their meaning without explanation or prior experience.(And hopefully it's the same meaning as the designer intended). Many designers believe metaphors are superior for this reason. You don't have to know or learn anything, and that must be the ultimate ease-of-use, right?

Well, it would be if there were an easy to understand metaphor for everything. Unfortunately there isn't. Symbols are limited, they can have a hard time representing abstract notions or verbs. What is the metaphor for "Power", "Stop", "Yes", "No", "Fun", etc? There are a lot more abstract notions and verbs than real world objects that can be given a recognisable shape on an icon.

Signs on the other hand are practically limitless. The number of individually distinguishable shapes are, well, more than plenty. The problem with signs is that their meaning has to be agreed upon beforehand. If you haven't seen a particular sign before, it's hard to know what it means. And to be really useful to designers, signs has to be understood in the same way globally.

Cultural differences

In reality, not many signs are globally understood. What signs are? My guess would be the numbers from 0 to 9, the exclamation mark, the plus sign, Play/Pause/Stop, the dollar sign... maybe a dozen more?

Someone should set up a website to "crowdsource" how various signs and symbols are interpreted around the world. Maybe that already exists(please share in the comments if you know about such a site).

MotoFone

The Motorola design team tried to tackle universal icons a couple of years back with the MotoFone. The phone is an ultra-low-cost phone designed for emerging markets. It uses icons and voice prompts instead of text for the menu system and the design team tried to come up with a set of "universal icons" (shown below) for basic phone functions. Can you understand these without explanation?

Most should be fairly understandable; Trashcan is delete, Envelope is message, Book with plus sign is "add to address book". These metaphors are close enough. The 123, ABC and OK are straightforward direct depictions and not metaphorical.

"No reception" is where the designers ran out of metaphors. The House with a cross means Out of Network. The other icons feels user-centric; it's my contacts, my messages. I own them. The house with a cross over is not my home. It's the the phone operators home so to speak and I don't own it (If you're willing to stretch it, you could say that I rent a place there). It is clearly system-centric. How do you draw a self-explanatory symbol for "no reception"? I'm not sure it's possible.

 

MotoFone icons with explanation

 

Ovi

Another attempt at universal icons, this time with a Web 2.0 slant. These are "Social Networking" icons from the Nokia Ovi website (and will be used in upcoming Nokia phones as well).

Nokia is currently changing the icons and compare the old stylish charcoal gray (standard designer issue) to the new colour version below. The new version is both more detailed and more playful. The game icon has changed from Tic-Tac-Toe to a game controller. A Nintendo game controller has a stronger identity  than Tic-Tac-Toe on a global basis? Well, there should not be any reason to doubt that, as with the Motorola icons above, these has been thoroughly researched according to the respective companies.

Nokia Conversations will post a video interview next week with one of the head designers in the Nokia Design team who were responsible for these icons. Might be worth a look.

 

On and off

You might think that a symbol for a basic function like on/off should be possible to agree on, but no. The US version of the iPhone uses the text ON and OFF on switches, the international version(s) uses the I/O sign. Is the US is less visually literate than the rest of the world?

Btw, a pet peeve of mine is misuse of the IEC power symbol. Look around you right now, and you will probably see it several places. Your mobile phone, your monitor, your PC. The symbol is 0 (zero) for "off", 1 (one) for "on" and a a combination of the two for "standby".

IEC power symbols are universally recognized. Except in the US.

Most mobile phones (Nokia, Sony Ericsson, Samsung, LG and Blackberry) uses the "power on/off" symbol to turn the phone on or off.  Motorola used to use either, but seem to have settled for "on/off" on recent phones. HTC and Palm uses the "standby" symbol on the on/off button. Software like Yahoo Go also erroneously uses the Standby symbol to exit the application.

 

The meaning is in people, not in the symbol

This means interpretation of symbols may and will vary.

Symbols change their meaning according to context. A Crescent moon can mean sleep when printed on a button, but mean other things when printed on a flag, or in a book about astronomy, etc.

The difference between signs and symbols can be unclear. Signs may contain symbolic properties and vice versa. A dollar sign like "$" is a simple sign, but when someone writes Micro$oft, it gets a ton of symbolic meaning. Sign and symbols are a central to a rich visual vocabulary and is really at the core of what visual design is all about.

 

Care for the little ones

The few globally understood symbols we have at our disposal are precious gems. The main reason signs (and symbols) change their meaning over time is that they are introduced into a different context with a slightly different meaning, and the new context may become more prevalent than the old one.

To be truly "intuitive", the meaning of a symbol have to be transparent to someone who have never seen it before, and that happens less often than you may think! Watering down the few globally understood signs, symbols and metaphors that we have might not be in our own best interest as designers. For example, many designers don't like the power symbol, it's ugly, it's designed by engineers, it doesn't feel, um, powerful enough. Let's invent something else! It's like saying "I don't like the form of the letter "A", it doesn't really say 'aaaaah' to me".

Forget it, spend time on stuff that really needs improvement and let's instead try to strengthen the few globally understood symbols we have by using them consistently and correctly.

*) I did not link to the Wikipedia entries for Signs, Symbols and Semiotics in the text because the Wikipedia articles are somewhat contradictory. Semiotics belongs to the soft sciences, where nobody is ever able to agree on anything. (They would be out of a job if they did.) Anyway, my point is the same regardless of nomenclature: Some signs and symbols are worth saving because they are globally understood.

Mobile IxD work

This blogger has moved!

I want to invite you to my new gig over at Rift Labs. We are devloping Open Source Hardware for photographers. Come join us if you are into UX, design or photography at some level. Visit Rift Labs

 

Since my self-inflicted work hiatus, I've had time to think about where I want to go next. Some things I know: I'm going to continue designing software for mobile. Getting closer to the metal would be fun. New angles would be interesting.  There are a number of options for a mobile IxD, for example:

A Design Studio

Lots of IxD's work in design companies/design studios. There is a fair number of companies that specializes in mobile. All projects are short term. You work with clients, and a big part of the work is structuring the clients mind. You need people skills and communication skills. In fact, communications skills is what this job is all about. All your design methodology means nothing if you can't pull the client through the generative phase and through the sign off phase. However brilliant you are, the client decides in the end, and often you only see parts or even none of your work in the end product.

You get to do a lot of different things and other designers are usually fun to work with. Offices are in a warehouse or industrial building with a big italian espresso coffee machine in the corner.

You get a MacBook Pro with a 23-inch Cinema Display. Bring a pair of headphones, these places are noisy.

A Phone Manufacturer

Contrary to what they should do, few phone manufacturers actually hire IxDs. Almost all their software design work is done by 3rd party design companies. With few exceptions, in-house design groups mainly spend their time modifying phones to suit operator specifications.

Currently many manufacturers are working on services in addition to phone hardware. Strategy work is in-house but most hands-on work is outsourced. You work in a building that is so big it has its own tube station.

You get a laptop, after all this is a mobile company. You also get your choice of phone, of course. You pick the top smartphone and think you are cool, only to discover that the really cool people are those who walk around with the prototypes, odd looking phones with wires and stuff hanging out of them.

A Dev Company

Dev companies are driven by engineers. They write software for other companies, the ones you want to look at writes for consumer hardware companies. These guys tend to be open-source loving, pinko, commie, tree-huggers with a bad neck-shave, right? Well, yes, but what's wrong with that? If you join the right dev company you can get to work on seriously cool stuff with very dedicated developers. Projects are mostly longer term, with deep involvement.

The down side is that good developers tend to be pretty stubborn individuals. You need to be able to explain your design choices in a way that developers can relate to. And you really need to understand the technical constraints and possibilities or you get zero cred.

You get a Linux box, a 17" crt screen found in the attic, and are asked to download GIMP.

A Startup

All mobile startups are currently making location-based social networking services. With an API. Startups pay next to nothing but you get shares and that entitles you to a tax refund when the company folds.

The good thing about startups is that you get to do everything. You are most likely the only IxD on board so you have an opportunity to really make a difference. The founder is probably a propeller-head, not a techie and that poses some extra challenges as he or she will change everything from the background colour of the site to the business model several times a week.

You bring your own computer. The founder fixes you up with Adobe CS3 Master Collection on a nondescript DVD with the serial number on a Post It note.

An Operator

If you are going to work for the Evil Empire, you want to be Darth Vader, right? But before that can happen, you must endure years as one of the guys with the peculiar looking hats. You know, these guys:

Please note: Stormtroopers don't do IxD. The helmets are laced with tin foil on the inside and that interferes with the cosmic vibes necessary for quality design work.

You get a stationary Windows machine with two 21" screens. Your request to the IT-department for Adobe Illustrator is denied. You get CorelDRAW Lite instead.

Freelancer

Freelancing works for some people. You are your own boss, you do what you want, when you want. Right?

In reality, you have no colleagues and that drives you crazy so you rent space with others. That costs money. You spend most of your time networking trying to sell your services, but most of the people you meet are other freelancers. You need money so you take on projects that are off or too big, you have to hire other freelancers to get things done and before you know it you run a design studio 24/7. I've been down that road.

As an "investment in your future", you order a top of the line MacBook Pro with a second 30 inch HD Cinema Display, Bose speakers, an A3 Canon printer, Nikon D200 digital SLR and an iPod for your spouse on "affordable monthly rates". Ouch.

You can't have responsibility without authority

Options are numerous if you are into small-form-factor design. For me the important thing is that the powers that be understands the importance of design. And that responsibility is accompanied by authority. It's exciting times indeed.

The anatomy of a text input field

This blogger has moved!

I want to invite you to my new gig over at Rift Labs. We are devloping Open Source Hardware for photographers. Come join us if you are into UX, design or photography at some level. Visit Rift Labs

 

There are two interface interface elements of typical mobile user interfaces that does the heavy lifting. That is the Text Input Field and the List. I thought I'd share with you some of the usability considerations that is going into Text Input Fields at mBricks.

The keypad is well suited to number entry, but ill suited to text entry. Entering text on a mobile phone is hard, and people tend to avoid it if they can. The less text input you have, the better. But you can't avoid it all together.

Text input fields are suitable for plain text, numbers and passwords. For entering specific data types like date, time, number ranges etc. you should not use a text input field. Instead use Multi-field Input or a selection widget like a Calendar.

Elements of the Text Input Field

Full screen editing

Full screen edit

Edit-in-place is preferable in most cases. A person can see the context, and the visuals is consistent. Full screen editing is preferable when the user is likely to enter a large amount of text. Predictive text (T9, etc) may only be available in full screen edit.

All phone OS'es offers a full screen editor. Use a visual clue like the one above (to the left) to indicate that the full screen editor will open.

Vertical and horizontal layout

Most input fields consists of the control itself and its label. Screen layout may be horizontal or vertical.

In a vertical layout the label is positioned above the field, and both the label and the input field are left aligned. In a horizontal layout the label is right justified and the input field is left justified.

Input prompt

Instead of a label, you can use a prompt displayed inside the field itself. The prompt takes less screen real estate, but is only visible when no text is entered.

Error prevention: constraining input

When the input is to be consumed by a human being, the only limitation is what the system is capable of storing and transmitting. If you send your birthday to another person, the format does not matter as long as the person in the other end is able to understand it. "I was born on Christmas eve 1980" is completely understandable by a human.

However, people are smart and computers are dumb. For most applications, input has to be understood by a computer and the computer needs the information in some predefined format. The application has to tell the person entering data what it expects and can understand.

There are several ways to help humans and computers to understand each other better: Bound Input, Active/passive validation and Formatting.

Bound input

A Text Input Field can alternate between alphanumeric and numeric.

When input is constrained, for example to numbers only, the widget must indicate what the constraints are. People are ok with this arrangement, as long as it is easily to see and understand what the active constraints are.

Active Validation and Passive Validation

Active validation is done character by character as the user types.

Passive validation is performed after the entire input is complete. Either because the data has no meaning until the entire input is entered, or because validation has to be performed at the server.

A field that will be validated should visually indicate this.

Feedback should highlight the error and provide information about what the problem is.

A different approach. The user don't have to select the credit card type. As they type in their credit card number, the right card type is chosen (based on the card number). Looks cool, but I don't know if this has actual merit. Example from Masabi.

Formatting

Sometimes data is commonly displayed in one format, but stored inside the database in a different format.

An example could be a credit card number or a phone number. To make it easier for human beings to read a 16 digit credit card number, it is displayed in blocks of four digits. The human readable form of a date or phone number is probably not identical to the way it is stored in your internal database. Do not allow lazy developers to mess with this, make sure that the application displays data in the appropriate format.

It is worth stressing this issue because the problem is common. Companies print serial numbers or registration keys with spaces and hyphens but do not accept them when a user enters them into a form as they are printed.

The application can strip out any spaces or hyphens as the user types, or before validating.

Overwrite mode

Wherever appropriate, prefill form fields with your best guesses at the values the user wants. Overwrite mode selects all text, so it is easy to type in something else, without having to erase the suggested text.

For more about good defaults, visit Jenifer Tidwells pattern collection. Even better, buy the book.

Autocomplete

This is a large topic, it needs its own post, but the general idea is to guess what a person is about to enter and offer to complete the text. Combine a text input field, a popup list and some logic. Typically seen in URL address fields. Most decent mobile browsers offers autocomplete. This example is from Yahoo! Go:

Handling overflow

Text lines that are too long to display in full can be truncated. This is done by removing characters until the remaining text plus an ellipsis (three dots) fits the screen space. The ellipsis signals that data extends beyond the field boundary.

• Text should be right-truncated, i.e. characters are removed from the end of the string. 
• Numbers should be left-truncated, i.e. removed from the beginning.

Text that is too long can also be displayed as marquee text or auto-scrolling text.

The text moves toward left (opposite direction of reading) and is clipped at both ends. The text starts with a (1 second) pause and then moves smoothly to the left (about 7.5 characters per second). When the text is back to its starting point, it pauses again for 1 second before continuing.

Only the text field that has focus is scrolled, when the text looses focus, the text is immediately reverts to its truncated and static form.

Interface texts like labels or alerts should not be scrolled. And don’t scroll very long texts.

States

A general purpose text input field needs five editable states and five non-editable states.

Anything that can ease the pain

Text input is not straightforward on a mobile and anything that eases the pain of entering text is likely to make your application more successful.

There is many additional aspects not covered here. Especially if you work with touch-screen keyboards where you might be able to provide context specific shortcuts.

A good resource for more info is the Mobile Design Resources wiki at Little Springs design.

The panda and the blue button

This blogger has moved!

I want to invite you to my new gig over at Rift Labs. We are devloping Open Source Hardware for photographers. Come join us if you are into UX, design or photography at some level. Visit Rift Labs

 

A panda walks into a cafe. He orders a sandwich, eats it, then draws a gun and fires two shots in the air.

"Why?" ask the confused waiter, as the panda makes towards the exit. The panda produces a badly punctuated wildlife manual and tosses it over his shoulder.

"I'm a panda," he says, at the door. "Look it up!"

The waiter turns to the relevant entry and, sure enough, finds an explanation.
"Panda. Large black-and-white bear-like mammal, native to China. Eats, shoots and leaves.

Just like spoken or written language, visual language has its grammar. Without grammar, language would not make sense most of the time.  Without grammar, visual language is just as confusing.

Proximity is the Comma of visual grammar

In the above image we see three separate figures. In the image below we see the two figures on the right as a group, and the figure on the left as not belonging to the group. The only difference is that the figure in the center is moved a few pixels to the right. It's like putting a "visual comma" in between the first and second figure. The entire meaning changes.

(Images liberated from the infamous Artemy Lebedev)

Your brain is not passively receiving and storing visual input. The brain is actively trying to make sense out what you see, whether you want it or not. It can't be turned off. Designers who are not mindful of these principles can (and often do) confuse people.

Some of the rules the brain uses are described by the Gestalt Principles. If there ever was a visual grammar, the Gestalt Principles of Perception is it.

The sum is greater than the parts

The brain tries to give meaning to chaos, divine relationships between objects. The Gestalt approach emphasizes that we perceive objects as well-organized patterns rather than separate component parts. Here are some of the principles:

The Law of Proximity

We see objects close to each other as forming a group.

The Law of Similarity

We group elements if they are similar to each other.

"This is a great example of the gestalt law of similarity employed in interior design. [...] In this case, all of the dining room chairs are black. The shared color makes the chairs form a group based on similarity. The grouping effect is so strong that you really have to look closely to notice that the chairs are a mix of different designs."

(Gary Fisk, Applied Psychology)

The Law of Prägnanz (figure-ground)

Something is always "the object", the rest is "background". This effect is often used in optical illusions like the well known Rubin Vase above. Do you see the vase or the two faces?

In the Mac logo above, you either see the happy face frontal or a face in profile. In cases where two interpretations are possible, your brain can switch between them, but it can only see one interpretation at a time.

The Law of Symmetry

When we perceive objects we tend to perceive them as symmetrical shapes that form around their center.

A typical textbook example of the law of symmetry consists of a configuration of a number of brackets (the illustration above). When perceiving the configuration, we see three pairs of symmetrical brackets as opposed to 6 individual brackets, or two pairs and two singles. This happens despite what is suggested by some of the brackets immediate proximity to each other. (more here).

The Law of Closure

We perceptually complete objects that are incomplete.

The brain is constantly filling in the gaps in order to form whole objects out of separate component parts. Its surprisingly good at it; we identify patterns faster than the separate parts of the pattern. It might be an evolutionary issue. "Is that shadow over there a wolf preparing to attack me, or just a bush behind the three?" You want to make up your mind fairly quickly.

It is not only our visual system that does this. Our brain is a fill-in-the-gaps machine. Check this video interview with David Ariely.

 

Spot the errors:

Yahoo and Blackberry: The Yahoo! Flickr screen is quick to scan and easy to understand. To understand the Blackberry screen, you have to read every single word on the screen. What Gestalt Principles could the Blackberry designers use to make the screen better organized and less confusing?

AccuWeather: There is no way of knowing if the upper or the lower button is selected in the screen above (both states are shown). Is there a Gestalt Principle that the designers could have used to avoid the confusion?

Google Maps: What Gestalt Principle has the Google designers used to ensure that you don't confuse the search results with symbols on the map itself?

The quote is from the book Eats, Shoots & Leaves: The Zero Tolerance Approach to Punctuation by Lynne Truss. Apologies for punctuation errors in the text! :-D