6

I work for a multinational company. We have a global site, and individual country sites. I am trying to set a width for the search box that will accommodate all of our sites and languages. We've got Japanese, Taiwanese, Thai, Chinese, Korean, and Russian to contend with, as well as several European languages.

Based on this article by NNG:

Search is an important part of any big website. When users want to search, they typically scan the homepage looking for "the little box where I can type," so your search should be a box. [Make your search box at least 25 characters wide,] so it can accommodate multiple words without obscuring parts of the user's query.

(Update: Based on more recent findings, my recommendation is now to make the search box 27 characters wide. This and other new guidelines are covered in our course on Top Web UX Design Guidelines at the annual UX Conference).

Does anyone know if this 27 character width recommendation is global, or are there different width suggestions for languages that don't use Roman lettering?

Improve this question
8
  • @Mo'ath Is say it’s not a duplicate though possibly helpful, OP mentions the 27 character limit suggestion so they likely read that question or the article linked, but they’re specifically asking if it applies to other languages since the character sizes would be different.
    – DasBeasto
    Apr 17, 2019 at 16:32
  • Correct. It is my mistake. I actually was about to delete the comment and add an answer regarding accommodating different languages and still link the question in my comment above.
    – Mo'ath
    Apr 17, 2019 at 16:43
  • 3
    Who recommends the 27-character width? I've never heard of that.
    – Ken Mohnkern
    Apr 17, 2019 at 16:45
  • 2
    @KenMohnkern I think the supposed recommendation of 27 Character width came from this article 10 Useful Usability Findings and Guidelines that is linked in this question Is there a recommended size for search boxes?
    – Mo'ath
    Apr 17, 2019 at 18:07
  • 1
    I tried to find the actual study. Item 5 in this article by Nielsen says these findings were presented at a NNGroup conference.
    – Ken Mohnkern
    Apr 17, 2019 at 18:19

1 Answer 1

Reset to default
8

UPDATE:

You can use a dynamic sized (auto-growing) input field. The search box's size would increase in size as needed while user is typing. Please remember that the initial size should still be sized according to the expected input. Check this for examples of how dynamic inputs behave: Dynamic input field examples

Is the search-box a core/main functionality or not?

If the search-box is a core functionality:

You may consider designs like StackExchange, Google, and Amazon. They are wide enough to accommodate any of the languages provided.

If the search-box is NOT a core functionality, then you may consider doing the following:

1- Design for the longest translation: Find out the proper length of a search in your website in English, then TRANSLATE that to the LONGEST translation of the languages provided. Design your search-box width with consideration to that translation.

2- You may adopt the 27-char search-box width rule (I am not sure if this rule studied different languages or English only).

See examples:

For websites like StackExchange, Amazon and Google. Search is a vital main functionality for these websites, hence it is placed in the middle of the main page and it is a wide search box.

Compare that to Samsung website for example, where Search is not a main functionality, it is placed on the side and has just a reasonable width.

StackExchange StackExchange

.

Samsung enter image description here

.

Very useful reads:

I am providing several resources that I found very useful, not just to help you design a Search-box for different languages/cultures, but also help you UX design the whole website for different languages/cultures.*

- This article Design a Perfect Search Box highlights the importance of having a proper size search-box:

Making the input field too short is a common mistake among designers. Of course users can still type long queries in a short field, but only a portion of the text will be visible at a time and this equates to bad usability, since users cannot review and or edit their full query. In fact, when a search box has a limited number of visible characters, users tend to use short, imprecise queries, since longer queries become inconvenient to read. If input fields are sized according to their expected input they are both easier to read and to interpret for users.

- This article 3 things to keep in mind when designing UI to be translated in different languages discusses how the same message takes different amount of space in different languages and how this difference in the amount of words and characters needed to convey the same message can ruin an interface or make it unusable. See images below:

English vs Ukrainian enter image description here

The word "Views" translation ratio: enter image description here

Resources:

Design a Perfect Search Box

Best Practice for designing UI for a multilingual site?

Design considerations for internationalization

3 things to keep in mind when designing UI to be translated in different languages

UX Design Across Different Cultures — Part 1

UX Design Across Different Cultures — Part 2

Is there a recommended size for search boxes?

Improve this answer
2
  • You are welcome @OliveLankin. I actually learned a lot by trying to answer your question. It opened my eyes to issues that I've never dealt with before. If you believe that I answered your question, you may check this from the help center Help Center - Asking
    – Mo'ath
    Apr 22, 2019 at 18:32
  • I edited it (no change to the answer but I restructured it to make the main points clearer).
    – Mo'ath
    May 8, 2019 at 17:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.