3. Addressing Design

Macdonalds home pages

Macdonalds home pages on 3rd November, 2013 Top left to bottom right – Germany, Russia, Japan, Spain, China, Qatar.

Most users of technology (especially those using assistive technologies) prefer to have products and services that are designed to be functionally easy to use but also attractive to look at, quick to navigate with consistency of fonts, colours and general style. ��

In terms of website design according to Hubspot in 2011, 76% of consumers said the most important factor was that the website made it easy for them to find what they wanted.  Here are some key points that might help. 

Key Points

  • Think carefully about image sizes that incorporate text – text may cover more of the picture than required when translated or change the shape of a menu item or even become truncated.
  • If an image can be used cross culturally, keep the text separate to avoid extra work and enhance accessibility.
  • Use universal icons for controlling interactions (with text ‘alt tags’ ) so for example ‘play and rewind’ have the same shape button whatever the language.
  • Allow text to reflow – offer the chance to read more elsewhere if the text  when translated takes up more space than is available in a set area.  Be aware of the implications of zoom and magnification.
  • Allow flexible space for titles and headings in particular if these are part of the menu system.
  • Try to avoid having narrow columns or too many columns and do not use tables just to layout text as this will not help screen readers and will be lost in a text only view. Only use tables for content data when really necessary.
  • Choose font sets and styles carefully as some may not be recognised by certain languages and not all are designed for screen reading rather than paper based reading. For example angular and serif fonts may look good on paper but reduce readability when seen on small low resolution screens such as the mobile phone. Examples of useful sans serif fonts would be Arabic Transparent and Simplified Arabic Fixed rather than Koufi or Andalus or in English Helvetica, Arial and Verdana rather than Times New Roman.
  • Icons and symbols will need to be localised, in particular those related to currency using the correct positioning.  For instance in Sweden the code may be SEK 1957,50 (1957 Swedish crowns and 50 öre), 1 957,50 Swedish krona (kr) or 1957,50:-  Some symbols used such as checks in check boxes may have different meanings. There is the much quoted wikipedia example of “In Finnish,  tick stands for väärin i.e. “wrong”. (The opposite, “right”, is marked with \cdot \! / \! \cdot, a slanted vertical line emphasized with two dots).”
  • Never hard code date, time or currency formats – use a code library that has localised files for each required area as even the start of the week may be different in your chosen countries. There are a series of standards dealing with these issues such as ISO 8601.

References

  1. Hubspot (2011) http://blog.hubspot.com/blog/tabid/6307/bid/14953/What-Do-76-of-Consumers-Want-From-Your-Website-New-Data.aspx