Category Archives: Web Design

Design Principles To Evaluate Your Product


  

A company proves that it has a strong creative process by developing successful products repeatedly. We see this in companies like Apple, BMW and Google. Founders such as Steve Jobs formed a corporate culture with an intense focus on creativity and design. This culture highlights two core elements in the creative process: the ideas and the team.

Product design preview

The creative process can be described in one sentence: Ideas begin with a small team of creative people at the heart of the company who communicate easily with each other.

The post Design Principles To Evaluate Your Product appeared first on Smashing Magazine.

Design Principles To Evaluate Your Product


  

A company proves that it has a strong creative process by developing successful products repeatedly. We see this in companies like Apple, BMW and Google. Founders such as Steve Jobs formed a corporate culture with an intense focus on creativity and design. This culture highlights two core elements in the creative process: the ideas and the team.

Product design preview

The creative process can be described in one sentence: Ideas begin with a small team of creative people at the heart of the company who communicate easily with each other.

The post Design Principles To Evaluate Your Product appeared first on Smashing Magazine.

What To Consider When Choosing A WordPress Theme

Economists have taught us that a lot of choice is not always a good thing1. Having many options can lead to “analysis paralysis” and a feeling of being overwhelmed, due to the increased effort required and the level of uncertainty in making the right choice.

With a nearly unlimited pool of WordPress themes to choose from, it becomes so easy to feel overwhelmed and resort to inaction or choosing a low-quality theme. In cases where you have a lot of options, it pays to know exactly what you need.

“Premium WordPress themes” Google search.2
“Premium WordPress themes” Google search. (View large version3)

Put another way, how much easier is buying a bottle of wine when you know that you prefer reds and that your favorite red is Australian Shiraz? This small amount of knowledge cuts a choice between 500 bottles in a store down to 10.

In this post, I’ll share what I believe are the most important factors to consider, so that you know exactly what to bear in mind the next time you’re on the hunt for a good theme.

To start off, let’s answer one of the most common questions asked: Is it worth paying for a WordPress theme, or can you get away with a free one?

1. Price: Free Vs. Premium Themes

Several years ago, the price of a theme was a good indicator of its quality. Free themes were often poorly coded at best, and were used to capture sensitive user data at worst. But times have changed, and developers in the WordPress community have created thousands of great free themes to choose from.

As such, there is no conclusive winner. Both free and premium themes have their pros and cons, which are detailed below.

Pros of Premium Themes

  • More updates
    Perhaps the most compelling reason to choose a premium theme is that such themes are typically updated more often. Given the rapid evolution of the WordPress content management system (CMS), having a theme that is regularly updated to patch new security issues is critical.
  • Less recognizable design
    Because free WordPress themes are so popular, it’s not uncommon for tens of thousands of websites to use the same free one. Premium themes are less common, which set them apart a bit more.
  • Better documentation
    Most premium themes include a detailed PDF explaining how to get the most out of them. Such documentation is less common with free themes.
  • Ongoing support
    Premium theme developers certainly offer the best support, usually through a combination of a public forum, live chat and an email ticketing system. Free themes usually just have a public forum for support.
  • No attribution links
    Many free themes often require a link to appear in the footer crediting the theme’s author. While this is becoming less common in free themes, you can be sure that no links are required in premium themes.

Cons of Premium Themes

  • The price
    You’ll have to invest anywhere between $50 to $200 in a premium theme.
  • More configuration
    Most premium themes have their own custom administration panel, with a variety of customization settings, which can take a while to learn and set up.
  • Unwanted features
    Premium themes tend to include a lot of bells and whistles, such as multiple slider plugins, a portfolio manager and extra skins. While these do make a theme very versatile, a lot of unwanted features will bloat the theme.

In general, the most important aspect to look for in a theme, whether free or paid, is the quality and care that’s gone into making it. The quality of the code will influence everything we discuss in this article, from security to page speed.

The easiest way to gauge quality is to read what customers are saying. If a theme has a public support forum, read what kinds of issues people are having, and how responsive the developers are in resolving them.

2. Speed: Lightweight Vs. Feature-Heavy Themes

In my last post here on Smashing Magazine, I emphasized the importance of optimizing website speed4. Fast page-loading speed does not just improve the general user experience of a website, but has also been confirmed to improve search engine rankings, conversion rates and, thus, online revenue.

It should come as no surprise that I recommended avoiding sluggish themes like the plague.

Understanding a problem is the first step to avoiding it. So, what causes a theme to drag a website’s page speed into the gutter?

In general, it comes down to three things:

  • Too feature-heavy
    Be wary of themes that boast 10 different sliders, 20 preinstalled plugins and a lot of JavaScript animation. While this might sound like a good deal, no website that makes HTTP requests to 50 JavaScript files will run optimally.
  • Overuse of large file formats
    The keyword here is “overuse,” which admittedly is a bit subjective. Try to steer clear of themes that use a lot of full-width images, background videos, etc. Less is more.
  • Poor coding
    From wildly scaled images to inline CSS injection, poor coding has a significant impact on website performance. As mentioned, poor code usually means that a theme hasn’t been updated in a long time, so always check a theme’s update history.

Here’s a litmus test you can use to figure out how bloated a theme is. Go to the Pingdom Website Speed Test5, enter the URL of a theme’s demo and see how long the page takes to load and how many HTTP requests are made.

Let me give you a quick comparison as a benchmark. Earlier this year, I built two websites with very different theme frameworks. The first website, BrokerNotes6, was built with the Frank7 theme (a very lightweight theme designed for speed). According to Pingdom, the home page makes 38 HTTP requests and loads in under 1 second. 3.9 Mb in bandwidth is way too heavy though.

BrokerNotes’ website statistics.8
BrokerNotes’ website statistics. (View large version9)

Now, let’s compare this to Qosy10, a website I built using a relatively feature-heavy theme. As you can see, the home page makes 61 HTTP requests and take just over 2.5 seconds to load. While still not bad, that’s a noticeable increase in loading time.

Qosy’s website statistics.11
Qosy’s website statistics. (View large version12)

Themes that make hundreds of HTTP requests before showing any content are not uncommon. Avoid them unless you’re confident that you can slice off some of that fat.

3. Design And User Experience

Of course, the purpose of a theme is to make your website look great and show off your brand in the best possible light. While design can be quite subjective, you will boost your odds of finding a well-designed theme by following a few steps.

Not a pretty website at all!13
Not a pretty website at all! (View large version14)

First, search on websites where the best designers sell their themes. This might sound obvious but is still worth mentioning. ThemeForest15 is my personal favorite, but plenty of other good ones are out there, including StudioPress16 and Elegant Themes17.

Secondly, spend some time browsing the demo. Does the website feel easy to use? Is there enough white space? Do you get a headache looking at it? Does it excite you? This is where your gut feeling plays an important role.

Finally, be sure to choose a theme that is cross-browser compatible and has been built with accessibility in mind.

4. Responsiveness

While mobile traffic varies between industries, most reports seem to agree that, on average, about 30%18 of all website visits now come from mobile and tablet devices.

Regardless of the exact ratios, there’s no excuse to use anything but a responsive theme.

Thankfully, virtually all reputable themes are mobile-friendly out of the box, so the lack of responsiveness in a theme is really a red flag. Most theme vendors allow you to filter out themes that are not responsive. Another good option is to look through a curated list of responsive themes19.

One of the best ways to determine whether a responsive theme is good or not is to run the demo through Google’s new mobile-friendliness tool20.

5. SEO

When enabled with one of the many good SEO plugins, WordPress is one of the most SEO-friendly CMS’ around.

However, plenty of themes render all manner of on-site SEO mistakes, such as the omission of header and alt tags, full-blown duplicated content and dynamic URL errors.

When choosing a theme, look for “SEO optimized” or “SEO ready” in the theme description, but don’t trust it blindly. A lot of developers include this to check of a box and sell their theme. That being said, knowing that a designer has at least considered SEO when developing their theme does offer some assurance.

A good practice is to install an extension for the Chrome browser, such as MozBar21 or SEO Site Tools22, to run some quick SEO checks on a theme’s demo.

MozBar in action.23
MozBar in action. (View large version24)

Explaining what to look for is beyond the scope of this article, but that has been covered in depth by Joost de Valk25.

6. Ease Of Customization

A customization dashboard has become standard in a lot of themes. This saves you the hassle of having to make direct changes to style sheets.

A theme customizer.26
A theme customizer. (View large version27)

In addition, plugins such as Visual Page Editor make it easy to build complex page structures without having to touch code. While some of these WYSIWYG editors are somewhat limiting, I find that overall they’re very beneficial to getting a website looking very nice with little effort. If a developer has a demo of their administration panel, I’d recommend playing around with it to make sure you can customize everything you need to.

7. Security

A lot affects the security of a website, including hosting, plugins and password strength. Daniel Pataki has already covered some great steps to secure your WordPress installation28. This should not be an afterthought; rather, consider it when selecting your theme.

As when you’re buying a home, one of the best things you can do to gauge a theme’s security is to read what customers say about it. Unless a theme was created by a trustworthy developer, I avoid any theme that doesn’t have many downloads or reviews.

My advice is to evaluate themes on community websites like ThemeForest, where all customer reviews are displayed by default. This level of transparency tends to reveal the truth about themes, which you wouldn’t get directly from a developer’s website.

While buying a theme directly from its developer’s website is fine, do so only after evaluating it on a community website with transparent reviews.

Theme reviews.29
Theme reviews. (View large version30)

If a theme has a security loophole, then customers have probably picked up on it and flagged it in their reviews for future customers. While the developer might have fixed such issues, the overall ratings from customers should give you an idea of a theme’s overall quality.

Conclusion

While ticking off all of these boxes might sound ambitious, the truth is that they’re interrelated, and they all come back to a single point: Themes should be built with quality in mind.

One of the best things you can do when choosing a theme is to learn about the person or company who made it. If they have a reputation to live up to, then their themes will undoubtedly be of a higher quality than developers who don’t.

Of course, no theme is perfect, and you’ll almost always have to make some compromises. That being said, with the recommendations in this post, you are hopefully now better informed to avoid the really bad themes and to choose one that is fast, well coded and SEO-friendly and that includes all of the features you need.

(dp, il, al, ml)

Footnotes

  1. 1 http://www.ted.com/talks/barry_schwartz_on_the_paradox_of_choice
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/11/1-google-search-large-opt.jpg
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2014/11/1-google-search-large-opt.jpg
  4. 4 http://www.smashingmagazine.com/2014/06/25/how-to-speed-up-your-wordpress-website/
  5. 5 http://tools.pingdom.com
  6. 6 http://brokernotes.co
  7. 7 http://www.smashingmagazine.com/2013/01/16/frank-a-wordpress-theme-designed-for-speed/
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/11/2-brokernotes-large-opt.jpg
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/11/2-brokernotes-large-opt.jpg
  10. 10 http://qosy.co
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/11/3-qosy-large-opt.jpg
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/11/3-qosy-large-opt.jpg
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/11/4-uglysite-large-opt.jpg
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/11/4-uglysite-large-opt.jpg
  15. 15 http://themeforest.net
  16. 16 http://www.studiopress.com/
  17. 17 http://www.elegantthemes.com/
  18. 18 http://marketingland.com/mobile-devices-generate-30-pct-traffic-15-pct-e-sales-75498
  19. 19 https://www.ventureharbour.com/premium-responsive-wordpress-themes/
  20. 20 https://www.google.com/webmasters/tools/mobile-friendly/
  21. 21 https://chrome.google.com/webstore/detail/mozbar/eakacpaijcpapndcfffdgphdiccmpknp?hl=en
  22. 22 https://chrome.google.com/webstore/detail/seo-site-tools-site-analy/femogmcmjpjkokoojcljkpfdifkpbbpp?hl=en
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/11/5-moztoolbar-large-opt.jpg
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/11/5-moztoolbar-large-opt.jpg
  25. 25 https://yoast.com/wordpress-seo-theme/
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/11/6-customizer-large-opt.jpg
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2014/11/6-customizer-large-opt.jpg
  28. 28 http://www.smashingmagazine.com/2011/11/10/securing-your-wordpress-website/
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2014/11/7-reviews-large-opt.jpg
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2014/11/7-reviews-large-opt.jpg

The post What To Consider When Choosing A WordPress Theme appeared first on Smashing Magazine.

Don’t Get Lost In Translation: How To Conduct Website Localization

A common mistake with localized websites is considering the translated content to be just another version of the pages in the original language. Translation isn’t everything. Of course, for the user it’s all about the content: Is the content relevant and understandable and in line with the user’s cultural context?

As pointed out in Entrepreneur1:

“According to research firm IDC, web users are four times more likely to purchase from a company that communicates in their own language. Additionally, visitors to websites stay twice as long on sites that are available in their native tongue, according to Forrester Research.”

From a commercial point of view, when you decide to create and maintain a multilingual website, you have to consider many more points than just translation. We’ll explore some of the issues to think about when localizing a website.

Cultural Context Is Everything

The decision to expand one’s operation into other markets should always be preceded by deep and thorough research. Localizing a website is an important business decision that will have a great impact on how well you achieve your business goals in certain markets. Before localizing any content, partner up with local agencies to better understand the target audience, and check whether your product meets local standards and is in line with the core cultural values of the audience. Understanding the basic differences in customs and practices between nations is important.

Take the US and Poland. The US style of business is more relaxed and outgoing than in Poland, where things tend to be more formal. This is why some Polish companies find it difficult to enter the US market — because their business style, language and approach might be considered stiff and overly formal. And to Polish people, the US style of business might come off as too loose, even unprofessional at times.

If you investigate Japanese culture, you will find that the Japanese are very strict about following business protocol. So, if a spontaneous Italian wanted to do business with a rule-following Japanese citizen, they would both need to understand the nuances of and differences between their cultures. An interesting characteristic of Japanese culture is that sarcasm doesn’t exist2. So, if your content is sarcastic in nature, your Japanese clients simply won’t understand it.

Hire a local consultant to compare notes and ensure that your message will be heard and understood by customers.

First Things First: The Translations

Translating a website (especially a complex one) can be a challenge. You need to decide on your core markets first and then choose the language version accordingly. If you don’t have a clue where to start, then hire a translation agency or a localization consultant. They will plan and guide you through the process.

If you’re into challenges and would like to tackle this one on your own, then a good place to start is ProZ.com3, where you can find and test freelancers and agencies. Chances are you’ll find people experienced in your field who already have similar projects on their books.

Beware: Experienced translators tend to be a little pricey, and if you don’t intend to establish a long-term relationship, then they will apply a minimum charge for your project, which means you would have to pay the same amount for a small touch-up or proof as you would for a two-page translation. This can be a deal-breaker for small businesses. If your budget is small, then consider less experienced freelancers; however, expect some difficulties throughout the process — after all, both of you are learning.

4
ProZ.com – community of translation professionals, and a marketplace for translation services. (Image source5)

Tip: This is a good opportunity to try out your negotiation skills because all fees are negotiable, even if the translator’s profile states otherwise. (Been there, done that.)

The vast majority of people on ProZ.com use translation software, such as Trados6, which is helpful with large projects. With translators who charge by the word, overpaying is easy. Trados will help you estimate your word count and will eliminate repetition to save you money.

7
SDL Trados provides software for translation memory and terminology management. (Image source8)

Trados is also a good base from which to maintain a website in multiple languages. It holds a database of all of your previous translations, which can be shared fairly easily with new translators. It comes at a price, but if you are seriously thinking about making your business accessible to many different markets, then at least consider trying it.

Multilingual Websites: So, What You See Is What You Get?

Well, not exactly. With any software localization project, what you see in other languages is a result of close collaboration between localization experts and programmers. Keeping your IT team in the loop is crucial if you plan to add any languages to your website — the most obvious reason being that someone needs to prepare the system for the new content and help with its daily maintenance.

The IT team doesn’t need to be experts in localization, but you do need to prepare them (and yourself) from the start for the possibility that their code will need to be updated. They (and you) will need to consider potential problems:

  • deciding how to display the default language in a locale;
  • displaying the content in a right-to-left layout;
  • determining how much space is needed to present the content in other languages;
  • displaying special characters and choosing the right encoding for them (such as UTF-8, UTF-16, etc.);
  • displaying first and last names in a culturally sensitive way;
  • removing any hardcoding of dates and currencies;
  • displaying the right calendar for the location.

This is just the beginning of challenges to consider in the back end. Smashing Magazine has a nice roundup of the technical issues to address9. Consider reading it and passing it along to your programmers before planning any localization.

Practical Tips

The Layout

People read in an F-shaped pattern, meaning they will scan a website from left to right and focus most of their attention on the left side. But that is only true in the West. If your core market is any of the Arabic countries, bear in mind that they read right to left, which your localization process will need to address. You can’t simply put the translated content into the same layout because it wouldn’t be in line with the cultural code of your audience.

10
English version of the BBC website. (Image source11)
12
Arabic version of the BBC website. (Image source13)

The Space

Remember that every language has a set of characters that occupy a different amount of space in a layout. If your first language is English and you want to localize a website for Germany, then you might be surprised that some words are ridiculously long, even though both languages use Latin characters. Of course, it’s “ridiculous” only from the point of view of an English-speaking person, whose layout would be built to fit English text. Other languages occupy even less space than English. Do your research to fit the content in the layout.

Nomensa illustrates14 this variability for the simple and common words “search” and “basket”:

The word “search” takes up 10 characters in French but only two characters in Japanese. The word “basket” takes up 6 characters in English but when translated to German takes up a massive 13 characters.

Make sure your designers and front-end teams know how to handle this from the beginning, because a localized website might be visually very different from the “original.”

For instance, if you are localizing a website for the Chinese market, then you should know that, even if the translation occupies less space in general, the characters themselves will occupy more space than the individual characters of a standard Western alphabet. Your team will need to address this. Also, some languages do not add contrast the way we do. For example, Japanese does not have italics.  You need to find a way around this if you want your localized content to be read naturally by all audiences.

15
An example of how the same text can look like in various languages. (Image source16)

Special Characters

Almost every language in the world comes with its own set of special characters, such as unique letters and accents. In total, 110,116 characters exist17 among all known languages.

The problem arises when you are not prepared to display special characters. The characters might end up as weird symbols as a result. Or, if you decide not to use the special characters at all, your translations will end up meaning something different.

Solve this by properly encoding your website. Encode in UTF-8 in almost all cases18. But use UTF-16 if your core markets are primarily Asian because it reduces the bandwidth of websites that consist mostly of non-Latin characters.

Another culprit of misrendered special characters is custom fonts that are minified and embedded on websites. Stripping out unnecessary characters to reduce a font’s file size and thus speed up loading time is a common practice. Don’t use a minified font to display user-generated content; comments, for example, might come out wrong even though all other content on the website looks fine.

Changing the Locale and Language

The most obvious guideline is to automatically show users content in their native language when it is available. There are a few ways to do this, and you should plan for it from the beginning.

Will you display a language version based on the user’s IP address or on the browser’s settings? What about countries like Switzerland that have more than one national language? Consider asking visitors to set their language upon arriving on the website, and remember their choice.

Allow the user to select their preferred language… (Image source19)

If your content is not 100% localized, is it better to upload a partial translation or wait until it’s all done? How do you inform visitors that it is incomplete? One strategy is just to show what you have and hide everything else — not a good option, though, if you’re running an e-commerce business. Another strategy is to be straightforward and tell potential customers what level of support they can expect in their language.

GetResponse chose to inform customers about expected level of language support. (Image source20)

Market-Specific Issues (Measurements, Calendars, Holidays, General Tone of Copy)

Market-specific issues can be subtle yet make all the difference with the cultural sensitivities of your audience. Take date-pickers. In the US, date-pickers are displayed as MM-DD-YYYY, whereas in most European countries the day precedes the month (DD-MM-YYYY).

Another example is calendars. As Zack Grossbart notes21:

The US starts the week on Sunday, the UK on Monday and the Maldives on Friday.

Even if a feature as simple as a calendar seems obvious to you, it might not be for customers in other markets.

Imagine users who are accustomed to a certain format for picking a delivery date. If they don’t pay attention to the instructions (which mention that the week starts on Sunday), they might just click on the calendar and expect to see Monday first. Users might feel unhappy and feel misled as a result (according to their cultural code). Consider implementing helpful little fixes with your IT team, like jQuery’s Datepicker22.

What about the tone of your message? Did you know that some languages are more formal than others? For instance, an informal tone is almost taken for granted in English, and addressing your audience as Sir and Madam might sound a little weird. German, French and Japanese are quite the opposite. A familiar tone might come off as rude with those audiences. Bear this in mind when hiring translators; ask them for advice on being culturally sensitive with your tone of voice.

Maintenance

Your website is like a living organism. You, as the owner, product manager or marketer, want it to become better and better and meet customers’ expectations. You will be adding products, running promotions and changing content — it’s a continual development process. When you localize a website, you’ll need to update that version every time you change the original.

Your IT team should be ready to jump on any localization-related issues when something is not displaying right. Cultivate relationships with translators and have them on standby to keep your content up to date.

Most importantly, set aside enough time to finish all of your language versions. Completing a website in one language by the deadline is a big enough task. Doing it in several languages will take much longer. Translating takes time; uploading content takes time; proofreading takes time. Account for this in your timeline, and plan well in advance.

Let Them Find You: Be Where Your Audience Is

Make your localized website visible to search engines. And by search engines, we don’t just mean Google. Put yourself in the customer’s shoes for a while and ask yourself (or ask locals) where you would start looking for the service that your company offers. Google is a popular search engine, but a quick search of, say, China will reveal that Baidu23 is king there. And if you’re thinking about expanding into Russia, you cannot afford not to be easily found on Yandex24.

Remember that some countries have tighter control over the Internet and might censor. You can easily overlook this when planning content for different markets. For example, China blocks certain websites and services, including Facebook, YouTube and Dropbox. So, if you have a product video that you would like to share with a Chinese audience, you will need to find an uncensored local platform, such as Tudou25.

Try to come off as professional, and build your brand through social media. Be visible on various local social networks. For example, in addition to LinkedIn, add Xing26 for German-speaking markets.

Legal Considerations

Each country has its own regulations on privacy, terms of service, complaint procedures, customer support, taxes, data protection and so on. You need to ensure that the content you translate is in line with local law. To make sure you are operating legally in another market, consider hiring a local legal specialist. Their services are pricey, but it’s much better than paying legal fees for violating local law.

Let’s say you do business across Europe and you have three German-speaking countries covered: Switzerland, Germany and Austria. Translating your documents once is not enough. These countries all have different regulations on refunds for products purchased on the Internet. So, not only do you have to translate your pages and make sure that the refund window specified for each country is correct, but you have to figure out how to make this information easily accessible in each of these countries. Do this carefully, or else you might pay for it in legal fees.

Make It Easy to Pay

No business will ever succeed if customers feel that paying for a product is hard or they don’t trust the payment provider. The most popular payment methods are popular only for certain markets.

Residents of some countries do not trust PayPal and will expect you to support locally popular payment methods, such as wire transfer. Brazilians are accustomed to paying in instalments and will expect to be offered that option. In the Netherlands, people are used to paying through a secure system named iDeal27, which redirects them to their own bank.

Always know the regulations behind accepting payments and charging customers. Did you know that if customers in Austria don’t submit to you a printed and signed SEPA form authorizing you to charge their bank account, then you are not legally allowed to charge them? On the other hand, only a digital SEPA form is required in the Netherlands. Do your research.

Test Your Ideas on the Target Audience

Once everything is ready, the work isn’t done. As mentioned, a website is like a living organism. It needs to be continually developed to meet the public’s expectations and deliver on your business goals. Remember to test your website on target users. Targeted recruiting will give you access to valuable insider knowledge of certain countries. One useful tool for finding target users is Cint28, which provides access to the opinions of 10 million people in 60 countries.

You can save a great deal of energy by testing remotely. Methods such as click testing29 and web testing30 are perfect for learning what attracts the most attention on your website. Audiences in different countries could be attracted to different things. Always ask for feedback with a simple survey. You’d be surprised by the answers you get to just a few open questions. With this knowledge, you will be able to adjust your content strategy and localize your website with even greater precision.

Many tools will help you get the ball rolling with remote user research. SurveyMonkey31, SoGoSurvey32 and Marketizator33 are perfect for setting up simple questionnaires in no time. UsabilityTools34 and UserTesting35 enable you to set up remote tests in the back end of your website should you decide to expand your research to other methods.

Customer Expectations

This might not fall under the technical issues related to developing and maintaining a multilingual website, but from a customer’s point of view, it is crucial. If your website is in an audience’s native language, they will have certain expectations.

Visitors will want to talk to customer support in their own language. If you offer telephone support only for your local language, customers in other countries might find it unprofessional. Who wants to pay extra for an international call? Many solutions out there enable you to set up local numbers36 in other countries and redirect calls to your main location. You might also receive email in a language that your team doesn’t understand. Either prepare templates to answer common questions or hire native speakers as support advisors. Visitors want both content and support in their native language.

If you’ve decided to localize your website, then you are thinking seriously about expanding into other markets. This is great for a business of any size. What I hope you get out of this article is that localization is not as simple as straight translation. There are many parts of the equation to consider. If you forget one part, the rest won’t add up. Here’s a handy little list to remember:

  • Prepare a localization strategy. What markets do you consider to be the most important, and which languages will you need? This is the time to check with lawyers as well.
  • Have a solid talk with your team about expansion plans. What are their concerns, and what do they advise?
  • Take time to find the best translators and local advisers. They will make your business look good to potential customers with different cultural sensibilities.
  • The entire process will take time, so be prepared for it. Get an estimate of the time and cost from each party involved, and manage the process well. Don’t forget to set aside time for proofreading and testing!
  • Once you’re up and running, give your clients a voice and listen to it carefully. Run tests, and improve your business based on the feedback.

We hope this article has helped you to identify some misconceptions about creating and running a multilingual website. Do you have an experience of your own? What were your ups and downs? Feel free to share them in the comments.

(il, al)

Footnotes

  1. 1 http://www.entrepreneur.com/article/224742
  2. 2 http://www.smartling.com/blog/2014/06/18/challenges-translating-grammar-nuances-cultural-differences-japanese-language/
  3. 3 http://www.proz.com/
  4. 4 http://www.proz.com/
  5. 5 http://www.proz.com/
  6. 6 http://www.translationzone.com/trados.html
  7. 7 http://www.translationzone.com/trados.html
  8. 8 http://www.translationzone.com/trados.html
  9. 9 http://www.smashingmagazine.com/2012/07/18/12-commandments-software-localization/
  10. 10 http://www.bbc.com/news/world_radio_and_tv/
  11. 11 http://www.bbc.com/news/world_radio_and_tv/
  12. 12 http://www.bbc.co.uk/arabic
  13. 13 http://www.bbc.co.uk/arabic
  14. 14 http://www.nomensa.com/blog/2010/7-tips-and-techniques-for-multi-lingual-website-accessibility/
  15. 15 http://www.omniglot.com/language/articles/multilingual_websites.htm
  16. 16 http://www.omniglot.com/language/articles/multilingual_websites.htm
  17. 17 http://www.smashingmagazine.com/2012/06/06/all-about-unicode-utf8-character-sets/
  18. 18 http://www.smashingmagazine.com/2012/07/18/12-commandments-software-localization/
  19. 19 http://www.vemma.eu/
  20. 20 http://www.getresponse.com
  21. 21 http://www.smashingmagazine.com/2012/07/18/12-commandments-software-localization/
  22. 22 http://jqueryui.com/datepicker/#localization
  23. 23 http://www.baidu.com/
  24. 24 http://www.yandex.ru/
  25. 25 http://www.tudou.com/
  26. 26 http://www.tudou.com/
  27. 27 http://www.ideal.nl/en/
  28. 28 http://www.cint.com/
  29. 29 http://www.usability.gov/how-to-and-tools/methods/first-click-testing.html
  30. 30 http://usabilitytools.com/features-benefits/automated-testing/
  31. 31 https://www.surveymonkey.com/
  32. 32 http://www.sogosurvey.com/
  33. 33 http://www.marketizator.com/
  34. 34 http://www.usabilitytools.com
  35. 35 http://www.usertesting.com/
  36. 36 http://www.callforwarding.com/

The post Don’t Get Lost In Translation: How To Conduct Website Localization appeared first on Smashing Magazine.

The More You Fail, The Greater Your Success: A User-Centered Design Case Study

Jeffrey Zeldman once said, “Usability is like love. You have to care, you have to listen, and you have to be willing to change. You’ll make mistakes along the way, but that’s where growth and forgiveness come in.” If you think of design as a tool it becomes a much more powerful skill set and by putting the user first you can transform your product into something truly remarkable.

This article will be an introduction to the human-centered design process. I’ll tell a personal story in which I built a challenged family member a device to help them communicate more efficient and effortlessly and I’ll share lessons I learned from the failures and successes along the way.

The Learning

Dustin is my 30-year-old brother. He was born with little to no oxygen in his body and underwent two open-heart surgeries before his 10th birthday. He is also autistic. As a result of those health issues combined with the autism, he is not able to speak. Many wrongly confuse his silence with a lack of knowledge and understanding. But Dustin knows what’s going on. He probably has more thoughts than you and me; he just can’t express them fully.

My brother and me when we were children.
My brother and me when we were children. (Image credit: Matt Reamer3128252219161131)

Growing up, I have always seen how much Dustin has struggled to communicate a simple word to anyone in our family, much less a random stranger. He makes only a few sounds, and only one person on Earth mildly understands what he’s trying to say — a magnificent woman I call Mom. I can only imagine the way he feels when she is not at his side to speak for him. So, I’ve always said that if a genie were to grant me three wishes, I would need just one: to make my brother “normal.” But, as time has passed and Dustin and I have gotten older, I have come to realize that “normal” does not exist, and if it does, then maybe he is a bit more normal than me.

Fast forward 20 years, to my last year of graduate school. I was six months away from moving across the country. With this knowledge I had, I wanted to design a tool that would help my brother to communicate his needs and that would relieve a little stress on my family as a whole.

Using my skills as an experience designer and having worked in web development, I planned to build Dustin a web app that would live on an iPad. In its simplest form, he would be able to tap the picture associated with his immediate need, and that tap gesture would trigger an audio file to speak the need to my parents. Simple, right? Everything was set, so I began sketching away and looking for inspiration to get started.

A couple of pages of the early sketch concepts for this tool.2
A couple of pages of the early sketch concepts for this tool. (Image credit: Matt Reamer3128252219161131) (View large version4)

Little did I know that I hadn’t been thinking about how Dustin would actually utilize the functionality of the app. One night at my parents’ house for dinner, the idea popped into my head. Dustin grabbed my phone and started tapping randomly. As I watched him continue to struggle with the phone, I realized that I had already failed. My idea was already dead. That was when I grasped the true importance of a discovery phase in any project.

Lesson 1: Know the End User Inside Out

Observe, research, test, repeat. A “day in the life” of your end user persona is a helpful exercise to do in the research or discovery phase. With persona mapping, you — the designer — choose one representative user and design to their daily needs. The user may be fictitious or real, but most of us use a fictitious persona who brings together attributes from a larger segment. Mapping out this persona’s daily routine during a 24-hour period will help us to pinpoint holes in their routine where your product would be most useful to them, and possibly also help us to find ways to improve other aspects of their daily life in the process. In web design, a day-in-the-life exercise can be beneficial when the budget or time for focus groups is limited. It provides opportunities for key findings on a product’s structure. Jeffrey Rubin identifies a few usability objectives5:

  • Usefulness
    product enables user to achieve their goals — the tasks that it was designed to carry out and/or wants needs of user.
  • Effectiveness (ease of use)
    quantitatively measured by speed of performance or error rate and is tied to a percentage of users.
  • Learnability
    user’s ability to operate the system to some defined level of competence after some predetermined period of training. Also, refers to ability for infrequent users to relearn the system.
  • Attitude (likeability)
    user’s perceptions, feelings and opinions of the product, usually captured through both written and oral communication.
You need to understand your ideal user base, what makes them tick, their motivations, fears, influencers, etc.
You need to understand your ideal user base, what makes them tick, their motivations, fears, influencers, etc. (Image credit: Ben Yoskovitz6)

Lesson 2: The Pivot

For a company to succeed, it should frequently test its product-related predictions or prototypes with users. This will help to validate or contradict any assumptions made during the previous design phases. In subsequent design phases, we use the insights and learning gathered during user testing to pivot the company’s business model or the product’s utility and features.

Pivoting is scary, but don’t be afraid. More often than not, when all of your research and testing is leaning towards it, pivoting the product is the best thing to do. All of the hard work you’ve put into the first round might seem like a waste at first, but think of it as an investment into a better and more user-centric product, one that will now better cater to its consumers and that will prolong the product’s life cycle.

Luckily, I was able to reign in my excitement and focus on the user quickly. As I did more research on autism spectrum disorder (ASD), I recognized behaviors in Dustin that I had always seen but never understood. The majority of people with ASD have difficulty processing everyday sensory information such as sounds, touch, sights and smells. This is usually called sensory integration difficulties, or sensory sensitivity. As the National Autistic Society of the UK explains7, it can profoundly affect a person’s life.

With that in mind, I began to observe Dustin and track his behaviors. I interviewed his closest caregivers at home, showed him different styles of icons (thanks, NounProject8) and tested colors, palettes and textures. I had to take many variables into consideration. The communication device had to be simple to use, be durable, be visually inviting, use some sort of icon language and have a texture similar to what he is used to in his everyday life. This was important because most people affected by autism prefer order and need a routine schedule.

Something else I had to keep in mind was that Dustin would not be the only user. Communication requires two parties. So, I started to view my mom not as a caregiver, but as a user. This revealed the struggles she has faced and enabled me to compare the needs of both end users and create something that bridges this communication barrier.

“Dustin and I communicate pretty well, but that’s after 30 years of being together all day, every day. Sometimes it takes a few minutes of Dustin struggling to express what he wants or needs. I get scared and wonder what he would do if something happened to me? The way we communicate is strange and no one, not even your dad, gets it.”

– Missy Reamer (Mom)

Another factor was thrown my way. My mom mentioned that she was worried for the day when they might not be together, and even worried about the simple pleasure of a vacation. The device had to not only be able to communicate to my mom in a timely manner, but also be interchangeable for other caregivers upon request. To achieve this, I decided to use SMS or, as the general public calls it, text messaging. I had worked on previous projects using SMS, so I was familiar with programming it onto the Arduino board.

You might be wondering what an Arduino board is? It is a small microcontroller whose hardware is an open-sourced board designed around an 8-bit Atmel AVR microcontroller or a 32-bit Atmel ARM. In other words, these various boards serve different purposes but all generally enable you to build interactive objects that serve various functions through APIs and Arduino libraries.

Although there are multiple ways to supply the 5 volts needed to power an Arduino, the best method for my purpose was to connect it to a computer via USB, so that anyone with minimal computer skills would be able to easily plug it in and simply change or add a phone number connected to the device for the day, week, etc. Once I had completed the programming, it would become a simple plug-and-play device.

Now that I knew how the device would work, it was time to move on to the look and feel of the exterior. The surface of the device was blue, and the shell for the electronics was already made. I took it to my parents’ home to show it off to everyone, and Dustin seemed really uninterested and kind of turned off. Frustration set in. Come on, work with me here, Dustin!

Then, another pivotal moment. I noticed Dustin standing in front of the mirror staring at himself. Remembering back to our childhood, I know that he had always been drawn to shiny metallic things: the toy guns he used to play with, the micro machine cars that were strewn around the house, his obsession with new cars, the bouncy new balls he got out of the 25-cent machine. I was onto something. I showed him the metal top of a project enclosure from RadioShack9, and he loved it.

A metallic surface was the perfect answer because it is smooth to the touch and the all-white external shell is soft on his eyes. This was another lesson. If your product is changing as a result of user observation or feedback, then it’s changing for the better.

Lesson 3: Keep Asking “Why”

The more you ask yourself “Why” while designing an experience, the more successful it will be. “Why” is a powerful question that I’ve gotten into the habit of asking myself when designing experiences. “Why is this here?” “Why should it animate like this?” “Why does the end user care?” Why, why, why. Always have a reason for the design decisions you make.

This is an early prototype I worked on, until I realized it was a failure. Failure is a good thing, though.10
This is an early prototype I worked on, until I realized it was a failure. Failure is a good thing, though. (Image credit: Matt Reamer3128252219161131) (View large version12)

The Build

At this point, the product had gone through quite an evolution. It started as a web app concept that requires the physical presence of a caregiver, and it evolved into a device with push buttons that sends text messages to the recipient in real time. Using an Arduino Yun13 and the Temboo library14 allowed me to get free SMS service through a Wi-Fi connection. With the exterior shell for the electronics in place, it was time to roll out functionality for the SMS delivery. Sending an SMS requires some sort of trigger or button.

The choice of arcade buttons was on purpose because their large size would minimize errors and incorrect button hits. Having a tactility that is familiar to Dustin and comfortable for him was also important. Because he has always had a passion for and deep understanding of video games, the arcade-style buttons make perfect sense. On top of each button is an icon representing the six particular needs in his day-to-day life that stood out for my mom in my interview with her.

The build as it progressed and became powered by an Arduino Yun.15
The build as it progressed and became powered by an Arduino Yun. (Image credit: Matt Reamer3128252219161131) (View large version17)

I had to keep in mind some other important factors, too. The product had to have all of the following:

  • a visual indication that a message was successfully sent,
  • a modular design that is easily mountable and moveable by my parents,
  • a push button that has an audible sound to signify its hit state,
  • 5-volt low-energy consumption.
An early demo of the communication device I built for my brother.18
An early demo of the communication device I built for my brother. (Image credit: Matt Reamer3128252219161131) (View video20)

The requirements above are necessary, all for different reasons. Because it is a physical device with no screens, I had to create the simplest way to let Dustin know that an SMS has gone through successfully. This is where the red and green LED lights come in, as well as the recognizable sound that the arcade buttons trigger in their hit states. Still thinking of my parents as secondary users, I had to make sure that the device was low on energy consumption and easy to move because Dustin is not always in one place. In this process, known as future-proofing, the creator thinks of all possible scenarios in which the device might be used in future.

Lesson 4: The Future

If you always think five years ahead (or more), your iteration will be golden. Users of your product are forever evolving, as are their needs. If a product doesn’t iterate and evolve, then its relevance will fade away. My observation of the user (Dustin) operating this device over the next five years will be the basis for future iteration.

Learn from Blockbuster. A big brand let a little startup (heard of Netflix?) creep in their backyard, pitch a tent and camp out. Soon enough, that tent transformed into a shed, which then transformed into a guest house, and eventually the startup demolished the existing house and constructed its own — all this because Blockbuster did not evolve its product. Sorry, Blockbuster, I used to love you.

The inside and outside of the shell prior to soldering.21
The inside and outside of the shell prior to soldering. (Image credit: Matt Reamer3128252219161131) (View large version23)
The build as it progressed and became powered by an Arduino Yun.24
The build as it progressed and became powered by an Arduino Yun. (Image credit: Matt Reamer3128252219161131) (View large version26)
The choice of arcade buttons was due to their large size, which minimizes error and incorrect button hits.27
The choice of arcade buttons was due to their large size, which minimizes error and incorrect button hits. Having a tactility that Dustin is familiar and comfortable with was also important, and playing video games fills his spare time. (Image credit: Matt Reamer3128252219161131) (View large version29)

Back to Dustin. The way the product stands now is not how it will remain, for this is a forever evolving experience and I plan to continue to further it. Future plans are to build a back-end CMS where, after my brother and parents have learned a mode of communication for certain needs together, they can swap the meanings and icons of particular buttons. If we do not have an icon that represents a particular need, we will quickly create an icon for it. This way, the library of icons will grow in an efficient and user-centered way. For a more personal experience, the user could upload a photo into a graphical OLED button for quick communication. Refinement of the construction of the device itself is also planned.

This device was designed and built just for my brother, but variations could help thousands of people who are challenged by speech or motor-function disabilities. In a world where we can customize our Nike’s for only $100, why does it cost upwards of a thousand dollars for someone with a life-altering disability to have what many fortunate people are born with, speech?

The website that is being built will hopefully house the future of this helpful and cheap product.30
The website that is being built will hopefully house the future of this helpful and cheap product. (Image credit: Matt Reamer3128252219161131) (View large version32)

I think variations of this device could help many others. I anticipate creating dozens of use cases and design icons for future users to load onto their devices when connected via Bluetooth, micro-USB or Wi-Fi.

Dustin’s SMS device33

Conclusion

In designing this experience for Dustin, I’ve learned much more about him than I had previously known. Putting user-centered design truly into practice takes research, followed by iteration and testing. Iteration is the key to making any product, experience or service useful. But that experience means little without love: love for what you do and respect for who you are doing it for. I hope that this has inspired or at least has gotten you thinking about how you can push your skills to help the people around you, as well as shed some light on some basic principles of user experience design that are too often overlooked.

The source code and schematics for this project are available on Github34. Feel free to interpret this project in your own way to help someone you know.

To conclude, one of my favorite quotes, from author James Jesse Garrett:

“User-centered design means understanding what your users need, how they think, and how they behave — and incorporating that understanding into every aspect of your process.”

Further resources

(cc, al, ml)

Footnotes

  1. 1 http://iamtheream.io/dustinsWords.html
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/11/02-sketches-opt.jpg
  3. 3 http://iamtheream.io/dustinsWords.html
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/11/02-sketches-opt.jpg
  5. 5 http://www.w3.org/WAI/redesign/ucd
  6. 6 http://www.instigatorblog.com/day-in-the-life/2011/04/26/
  7. 7 http://www.autism.org.uk/sensory
  8. 8 http://thenounproject.com/
  9. 9 http://www.radioshack.com/product/index.jsp?productId=2062285
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/11/04-early-prototype-opt.jpg
  11. 11 http://iamtheream.io/dustinsWords.html
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/11/04-early-prototype-opt.jpg
  13. 13 http://arduino.cc/en/Main/ArduinoBoardYun?from=Products.ArduinoYUN
  14. 14 https://www.temboo.com/arduino/yun/getting-started
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/11/05-build-opt.jpg
  16. 16 http://iamtheream.io/dustinsWords.html
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2014/11/05-build-opt.jpg
  18. 18 http://instagram.com/p/lFkeu-DnfS/?modal=true
  19. 19 http://iamtheream.io/dustinsWords.html
  20. 20 http://instagram.com/p/lFkeu-DnfS/?modal=true
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/11/06-build-opt.jpg
  22. 22 http://iamtheream.io/dustinsWords.html
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/11/06-build-opt.jpg
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/11/07-build-opt.jpg
  25. 25 http://iamtheream.io/dustinsWords.html
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/11/07-build-opt.jpg
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2014/11/08-build-opt.jpg
  28. 28 http://iamtheream.io/dustinsWords.html
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2014/11/08-build-opt.jpg
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2014/11/09-in-progress-web-site-opt.png
  31. 31 http://iamtheream.io/dustinsWords.html
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2014/11/09-in-progress-web-site-opt.png
  33. 33 http://vimeo.com/96746468
  34. 34 https://github.com/iamtheream/brothersSmsDevice
  35. 35 http://www.iso.org/iso/catalogue_detail.htm?csnumber=52075

The post The More You Fail, The Greater Your Success: A User-Centered Design Case Study appeared first on Smashing Magazine.