Posts Tagged ‘mobile’

A few weeks ago I published a post on how to write and translate for Mobile, where I explained the three Fs approach: Fast, Focus and Fun.

Some readers asked me how you can possibly be fun when you design something serious as say, a payment flow. Well, here’s an excellent example from what I consider the best app out there in terms of sleek design and crisp content: Hotel Tonight.

Hotel Tonight is a San Francisco’s startup founded in 2010 by Sam Shank, Jared Simon and Chris Bailey. It’s in series D founding round, backed by VCs like, among others, Accel Partners. It’s only on Mobile, their website is just a homepage where you can download the app.

Check out how creative and fun they have been with the Terms and Conditions button: Where everybody else puts a boring button or checkbox to tap, designers at Hotel Tonight come out with this innovative and fun way: You need to trace the contours of their logo with your finger to agree to the terms and complete the booking:

IMG_2806
If there’s an app out there that abides by the three principles I’ve listed in my previous post, this is Hotel Tonight.

Take a look at how fast and focused their content is: The Why We Like It section, for example, only contains 3 bullet points, and at least one of them always says something fun about the hotel:

IMG_2807

When I’m asked for examples of well designed apps with great content, tone of voice and style, Hotel Tonight is the first (and finest) example that comes to my mind. Oh, and one more thing! The app works really well and the deals are fantastic!

Please feel free to post other examples of apps with sleek design and great content!

Advertisements

I’m constantly approached by developers working on new Mobile apps and by translators working on the localization of existing mobile apps asking me for guidelines and best practices on how to write or translate for Mobile. I’ve given the topic a lot of thoughts and I come out with the 3 magic Fs rule: No, the 3 Fs don’t stand for Francesco, Francesco and Francesco; they stand for Fast, Focus and Fun.

When writing for mobile, keep in mind the intended audience: mobile users have less time and shorter attention spam than regular web users. And they want to have fun. So here it goes:

1. Fast: Keep it brief. Be concise and precise. Try to use the same number of characters as in the English source (including spaces), and don’t use more unless absolutely necessary. Describe only what’s necessary, and no more. Don’t try to explain subtle differences. They will be lost on most users.

2. Focus: Keep it simple. Pretend you’re speaking to someone who’s smart and competent, but doesn’t understand technical jargon. Use short words, active verbs, and common nouns. Put the most important thing first. The first words in a sentence should include at least a hint of the most important information in the phrase.

3. Fun: Be friendly. Talk directly to the reader using second person “you”*. If your text doesn’t read the way you’d say it in a casual conversation, it’s probably not the way you should write it. Don’t be abrupt or annoying. Make the user feel safe, happy and energized. Don’t use abbreviations to shorten a word or a phrase. Abbreviations as a shortcut for space restrictions must be avoided at all times.

wiritingformobile
Examples:

1. Keep it brief.

noToo formal
Consult the documentation that came with your phone for further instructions.

yesPreferred
Read the instructions that came with your phone.

2. Keep it simple.

noConfusing
You cannot perform this action with this app because this feature is not supported for your country. Please use the main website instead.

yesCrystal clear
This feature is not supported in your country yet. Please use the website.

3. Be friendly.

noConfusing
Sorry! The app is not responding. Please close it and reopen it.

yes Shorter, more direct, no fake apologetic
The app isn’t responding. Please restart.

4. Put the most important thing first.

noTask last
Tap Next to complete setup.

yesTask first
To complete the setup, tap Next.

5. Describe only what’s necessary, and no more.

noToo wordy
The app needs to communicate with our servers to sign in to your account. This may take a few moments.

yesShort and to the point
The app is connecting to the server. This can take a few moments.

6. Don’t use abbreviations to shorten a word or phrase

noAbbreviation
Go to Intl. settings.

yesSpelled out
Go to International settings.

Being fast means that features are fast to use, therefore the text needs to be fast to read. Focus is about simplicity, therefore the text needs to be easy to read. Fun is about engagement, therefore text needs to be friendly.

When writing for mobile, always keep in mind that the screen of a smartphone is about 4 inches diagonally. Also, keep in mind the intended audience: mobile users have less time and shorter attention spam.

Here are a couple of tips on how to write for mobile:

• Sentences should be no longer than 20 words.
• Nested lists should never be more than 3 levels deep.

How can you think for the small screen? Well, here are some tips:

• Don’t simply try to reuse content that you wrote for the web without repackaging the message in smaller containers.
• Use WYSIWYG editing display to see how much content you have for an iPhone screen while you are writing it.
• Write directly in this mode, don’t simply preview.

The last piece of advice is this one: take your time! Don’t do like Blaise Pascal, the famous 17th century French mathematician, who once apologized to a friend writing “I made this letter very long, because I did not have the time to make it shorter“!

When designing a mobile app, one of the things a designer should keep in mind is translated text expansion. Probably this doesn’t come as something new; there’s a whole literature on the subject.

However, when designing and localizing a mobile app you should also avoid other layout tricks that as a designer you might be tempted to try. I recently stumbled upon an app for iPhone that struck me for its peculiar use of ellipses.

What are ellipses? As a convention, ellipses in UI text are used in the following cases:

  • To indicate that a command needs additional information.
  • To indicate that text is truncated.
  • To indicate that a task is in progress (for example, “Searching…”)

Italian

Japanese

Normally, when the translated text expands too much, the designer would use an ellipsis at the end of the sentence.

In this case Italian expands by approx 40%. Japanse seems to be aprox the same lenght as the English.

English: New message (11 characters)
Italian: Nuovo messaggio (15 characters)
Japanese: 新しいメッセージ

The funny thing is that in this specific app, the designer used an ellipses in the middle of the text, and not at the end where it should normally be.

As a result, the meaning of the Italian translation is not “New Message” but “New essay”. That’s what “saggio” means in Italian.

Why the developer didn’t stick to widely accepted conventions on the use of ellipses? This is still a mystery to me.

I’ve never been a big fan of ellipses used to indicate that a text is truncated. I believe that a better practice would be to implement the convention of scrolling text. Like a ticker message that scrolls across the screen letting the user read the entire string from beginning to end. On mobiles, this is used a lot in lists in the body of a window. And while I haven’t seen it used in the window title of an app, it would be a worthy experiment for design engineers to figure out.

Food for thoughts. What’s your take?