![\"\"](\"https:\/\/brand.gamania.com\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\")
<\/figure><\/div>\n\n\n\nValidation: It takes a lot of luck to get it right!\u00a0<\/strong><\/h5>\n\n\n\n![\"\"](\"https:\/\/brand.gamania.com\/gvoice\/db\/editor\/VOL.76-Column-UI-1-2.gif\")
<\/figure><\/div>\n\n\n\nHand drawing: Only if I had the time\u2026<\/strong><\/h5>\n\n\n\n![\"\"](\"https:\/\/brand.gamania.com\/gvoice\/db\/editor\/VOL.76-Column-UI-1-3.gif\")
<\/figure><\/div>\n\n\n\nAddition:(000) 000-0001 is marketable.<\/strong><\/h5>\n\n\n\n![\"\"](\"https:\/\/brand.gamania.com\/gvoice\/db\/editor\/VOL.76-Column-UI-1-4.gif\")
<\/figure><\/div>\n\n\n\nDial-up: Very retro…<\/strong><\/h5>\n\n\n\n![\"\"\/](\"https:\/\/brand.gamania.com\/gvoice\/db\/editor\/VOL.76-Column-UI-1-5.gif\")
<\/figure><\/div>\n\n\n\nBasic phone number formatting methods<\/strong><\/h5>\n\n\n\nDomestic numbers usually combine area code(ex.07 for Kaosiung) and phone number. Separating the two fields is hardly confusing. International phone number input formats, on the other hand, are more complicated and confusing. Here are some of the common entering formats:<\/p>\n\n\n\n
Country code + area code (0 should be omitted for some countries)+phone number
ex\uff1a+886 7 123 4567
Country code + cellphone numbers(0 should be omitted for some countries)
ex\uff1a+886 910 123456<\/p>\n\n\n\n
In Taiwan, area codes are 2 or 3 digits and phone numbers are 7 or 8 digits. For example, 035 is the area code for Hsinchu area and 07 is for Kaosiung area. <\/p>\n\n\n\n
Input Field Formats<\/strong><\/h5>\n\n\n\nSingle and multiple fields are the most common methods to capture user inputs. Both methods have their pros and cons. <\/p>\n\n\n\n
Single Field Format<\/strong><\/p>\n\n\n\nA single field is placed after a description or an icon. This is the most common pattern, which requires less coding and less taps. However, long phone numbers may be difficult to read and users would not know if area codes or country codes are required. <\/p>\n\n\n\n
![\"\"](\"\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-6.png\")
<\/figure><\/div>\n\n\n\n
Multiple Fields Format<\/strong><\/p>\n\n\n\nMultiple fields format breaks the number into specific fields. For example, three separate fields are made for entering country code(+886), area code(022) and phone number(111111). With clear instructions, user errors can be largely reduced. However, Different digit numbers from different countries make it difficult to control phone number formats. Users cannot do copy-and-paste.<\/p>\n\n\n\n
![\"\"](\"\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-7.png\")
<\/figure><\/div>\n\n\n\n
Elegant Solution<\/strong><\/p>\n\n\n\nDesign Tongue prefers single field format for its simplicity, but adding some useful details can enhance user experience.<\/p>\n\n\n\n
1. Field masking<\/strong><\/p>\n\n\n\n1.1 Field Name<\/strong><\/p>\n\n\n\nIt’s needless to say that field names are essential. Adding a small icon makes the interface more fun and enhances brand awareness.<\/p>\n\n\n\n
1.2 Input format correction<\/strong><\/p>\n\n\n\n![\"\"](\"\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-8.gif\")
<\/figure><\/div>\n\n\n\n![\"\"](\"\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-9.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-10.png\")
<\/figure><\/div>\n\n\n\n\u25b2 To avoid transcription errors, phone numbers will automatically be placed in the correct format.<\/p>\n\n\n\n
#\u3001x\u3001ext are used for extension numbers. <\/p>\n\n\n\n
![\"\"](\"\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-11.png\")
<\/figure><\/div>\n\n\n\n
1.3 Error detection<\/strong><\/p>\n\n\n\nAutomatically detects errors when users do not use numeric digits or the correct numbers of digits. <\/p>\n\n\n\n
![\"\"](\"\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-12.jpg\")
<\/figure><\/div>\n\n\n\n
Dropdown list<\/strong><\/p>\n\n\n\nIt can be frustrating to enter country codes on international websites. Knowing that only numbers are accepted in input fields, users often get confused whether they should use the plus sign. Those who have gotten used to it may forget that it is not needed to dialing, theose who seldom make international calls simply get confused. Without proper indications, users often have to open another window to check the correct country code, which is even more time-consuming on mobile devices.<\/p>\n\n\n\n
Using a dropdown list is much more time-efficient. However, with a large number of countries displayed, special UI approaches can make choosing country codes easier.<\/p>\n\n\n\n
1. Flag dropdown: Many designers find flags useless due to their small sizes, I believe they still hold functional and aesthetic values. Flag icons can also help users can quickly scan through the list.
2. Country names in English: English is the international language that is easy to be searched in alphabetical order.
3. Country name: Most users recognize the name of their own countries more quickly.
4. Country codes.<\/p>\n\n\n\n
After choosing the country code, the entered data will be automatically placed with the right format. ( DEMO https:\/\/goo.gl\/cxr8cx<\/a>\uff09\u3002 <\/p>\n\n\n\n![\"\"](\"\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-13.png\")
<\/figure><\/div>\n\n\n\n
2-1 Prioritizing frequently used country codes<\/strong><\/p>\n\n\n\nUsers may go insane if they have to choose from more than 200 countries! A more friendly approach would be prioritizing the most frequently used country codes. IP address also helps detecting country codes. <\/p>\n\n\n\n
![\"\"](\"\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-14.png\")
<\/figure><\/div>\n\n\n\n \u25b2Try here=> whoscall https:\/\/whoscall.com\/zh-TW\/<\/a><\/p>\n\n\n\n
2-2 Enquiring country codes<\/strong><\/p>\n\n\n\nAdding search function adds efficiency to the dropdown list format. Designers should provide a mechanism that allows users to search for both country name and country code by typing names or numbers. This searching method is more intuitive and user-friendly. It’s the programmer’s job to do keyword matching and fuzzy search. <\/p>\n\n\n\n
![\"\"](\"\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-15.png\")
<\/figure><\/div>\n\n\n\nThe search function is useful when users remember only parts of the country code and country name. But if users search with only the first letter(b for Brazil), the mechanism would show all data containing the letter(Albania).<\/p>\n\n\n\n
If difficulty in programming is not a concern, the best thing to od is to offer search functions for both country name and country code. When a letter or a number is entered, matching country names are listed in order of relevance. <\/p>\n\n\n\n
![\"\"](\"\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-16.png\")
<\/figure><\/div>\n\n\n\n \u25b2 Modify whoscall elements<\/p>\n\n\n\n
3. Input mask<\/strong><\/p>\n\n\n\nZero is omitted when dialing international number on a cellphone, which is often forgotten. Reminders are oftern ignored by users. The best way is to accept numbers with or without 0 in the front-end and change them in the back-end . <\/p>\n\n\n\n
![\"\"](\"\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-17.png\")
<\/figure><\/div>\n\n\n\n
4. Different options for registraion<\/strong><\/p>\n\n\n\nMost service platforms offer online registrations on mobile devices. To make authentication process easier, it has become popular to use phone number as account name. Depending on company policies, users without cellphone numbers ot local numbers may not be able to register successfully. We suggest using e-mail address or user name as account name. We can also bing users’ registered phone numbers with their email addresses.<\/p>\n\n\n\n
5. Making numbers the only input option for mobile devices<\/strong><\/p>\n\n\n\nEntering date on mobile devices is inconvenient. Default setting should be made to simplify the action. The setting is techically supported.<\/p>\n\n\n\n
Reference- 01 https:\/\/goo.gl\/OzU1Y6 (different mobile input types)
Reference- 02 https:\/\/goo.gl\/pWpqYc (different mobile input types) <\/p>\n\n\n\n
![\"\"](\"\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-18.jpg\")
<\/figure><\/div>\n\n\n\n\n\u25b2 When inputting numbers, number 0 to 9 are used.\n \n<\/p>\n\n\n\n
![\"\"](\"\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-19.jpg\")
<\/figure><\/div>\n\n\n\n \u25b2 When inputting phone numbers, signs(+ * #) can be added.<\/p>\n\n\n\n
Conclusion<\/strong><\/h5>\n\n\n\nIs it worth the investment for companies to modify a simple input field? Design Tongue agrees that building important infrastructures is more important during the initial stage, but well-designed details can set your products apart. This article introduces methods based on user experience. Issues regarding programming have not been further discussed. Please do not hesitate to offer your precious opinions in the forum!<\/p>\n\n\n\n
Reference:
friendly format for Phone Numbers (https:\/\/goo.gl\/Dlm3hb<\/a>)
Multiple vs single field capture for phone number form input (https:\/\/goo.gl\/8O9EVS<\/a>)
Phone number Entry question (https:\/\/goo.gl\/Wa1u8i<\/a>)
E.123 formats (https:\/\/goo.gl\/9d9ppZ<\/a>)
If Satan was a web developer \u2026 (https:\/\/goo.gl\/0wKjnA<\/a>) <\/p>\n","protected":false},"excerpt":{"rendered":"When being asked to fill in our telephone number online […]<\/p>\n","protected":false},"author":6,"featured_media":18395,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1971,1979],"tags":[1075],"class_list":["post-10588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-2-columns_en","category-2-1-columns_on_ux_en","tag-mz_vol_76_en"],"acf":[],"yoast_head":"\r\n
UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE<\/title>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\" \/>\r\n<meta property=\"og:locale\" content=\"zh_TW\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE\" \/>\r\n<meta property=\"og:description\" content=\"When being asked to fill in our telephone number online […]\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\" \/>\r\n<meta property=\"og:site_name\" content=\"\u6a58\u4eba\u8a8c G!VOICE\" \/>\r\n<meta property=\"article:published_time\" content=\"2016-12-29T16:00:00+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2020-06-04T03:51:20+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\" \/>\r\n\t<meta property=\"og:image:width\" content=\"640\" \/>\r\n\t<meta property=\"og:image:height\" content=\"363\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\r\n<meta name=\"author\" content=\"admin_CAL\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005:\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin_CAL\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9810\u4f30\u95b1\u8b80\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 \u5206\u9418\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\"},\"author\":{\"name\":\"admin_CAL\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405\"},\"headline\":\"UI design clinic- Phone number formatting\",\"datePublished\":\"2016-12-29T16:00:00+00:00\",\"dateModified\":\"2020-06-04T03:51:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\"},\"wordCount\":1110,\"publisher\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#organization\"},\"image\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\",\"keywords\":[\"VOL. 76\"],\"articleSection\":[\"Columns\",\"On UX\"],\"inLanguage\":\"zh-TW\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\",\"name\":\"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE\",\"isPartOf\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\",\"datePublished\":\"2016-12-29T16:00:00+00:00\",\"dateModified\":\"2020-06-04T03:51:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#breadcrumb\"},\"inLanguage\":\"zh-TW\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\",\"contentUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\",\"width\":640,\"height\":363},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u7576\u671f\u7e3d\u89bd\",\"item\":\"https:\/\/brand.gamania.com\/gvoice\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UI design clinic- Phone number formatting\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#website\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/\",\"name\":\"\u6a58\u4eba\u8a8c G!VOICE\",\"description\":\"Read it, Know it, Love it!\",\"publisher\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/brand.gamania.com\/gvoice\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-TW\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#organization\",\"name\":\"\u6a58\u4eba\u8a8c G!VOICE\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/2020\/03\/logo.png\",\"contentUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/2020\/03\/logo.png\",\"width\":320,\"height\":93,\"caption\":\"\u6a58\u4eba\u8a8c G!VOICE\"},\"image\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405\",\"name\":\"admin_CAL\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7395194d29138c710a5385102f95c8753874965e1e1b2c83e40c9c1cfe361c9d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7395194d29138c710a5385102f95c8753874965e1e1b2c83e40c9c1cfe361c9d?s=96&d=mm&r=g\",\"caption\":\"admin_CAL\"},\"url\":\"https:\/\/brand.gamania.com\/gvoice\/author\/calvin\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/","og_locale":"zh_TW","og_type":"article","og_title":"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE","og_description":"When being asked to fill in our telephone number online […]","og_url":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/","og_site_name":"\u6a58\u4eba\u8a8c G!VOICE","article_published_time":"2016-12-29T16:00:00+00:00","article_modified_time":"2020-06-04T03:51:20+00:00","og_image":[{"width":640,"height":363,"url":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","type":"image\/gif"}],"author":"admin_CAL","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005:":"admin_CAL","\u9810\u4f30\u95b1\u8b80\u6642\u9593":"5 \u5206\u9418"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#article","isPartOf":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/"},"author":{"name":"admin_CAL","@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405"},"headline":"UI design clinic- Phone number formatting","datePublished":"2016-12-29T16:00:00+00:00","dateModified":"2020-06-04T03:51:20+00:00","mainEntityOfPage":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/"},"wordCount":1110,"publisher":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#organization"},"image":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage"},"thumbnailUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","keywords":["VOL. 76"],"articleSection":["Columns","On UX"],"inLanguage":"zh-TW"},{"@type":"WebPage","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/","url":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/","name":"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE","isPartOf":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#website"},"primaryImageOfPage":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage"},"image":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage"},"thumbnailUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","datePublished":"2016-12-29T16:00:00+00:00","dateModified":"2020-06-04T03:51:20+00:00","breadcrumb":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#breadcrumb"},"inLanguage":"zh-TW","potentialAction":[{"@type":"ReadAction","target":["https:\/\/brand.gamania.com\/gvoice\/en\/10588\/"]}]},{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage","url":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","contentUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","width":640,"height":363},{"@type":"BreadcrumbList","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u7576\u671f\u7e3d\u89bd","item":"https:\/\/brand.gamania.com\/gvoice\/"},{"@type":"ListItem","position":2,"name":"UI design clinic- Phone number formatting"}]},{"@type":"WebSite","@id":"https:\/\/brand.gamania.com\/gvoice\/#website","url":"https:\/\/brand.gamania.com\/gvoice\/","name":"\u6a58\u4eba\u8a8c G!VOICE","description":"Read it, Know it, Love it!","publisher":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/brand.gamania.com\/gvoice\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-TW"},{"@type":"Organization","@id":"https:\/\/brand.gamania.com\/gvoice\/#organization","name":"\u6a58\u4eba\u8a8c G!VOICE","url":"https:\/\/brand.gamania.com\/gvoice\/","logo":{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/logo\/image\/","url":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/2020\/03\/logo.png","contentUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/2020\/03\/logo.png","width":320,"height":93,"caption":"\u6a58\u4eba\u8a8c G!VOICE"},"image":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405","name":"admin_CAL","image":{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7395194d29138c710a5385102f95c8753874965e1e1b2c83e40c9c1cfe361c9d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7395194d29138c710a5385102f95c8753874965e1e1b2c83e40c9c1cfe361c9d?s=96&d=mm&r=g","caption":"admin_CAL"},"url":"https:\/\/brand.gamania.com\/gvoice\/author\/calvin\/"}]}},"_links":{"self":[{"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts\/10588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/comments?post=10588"}],"version-history":[{"count":5,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts\/10588\/revisions"}],"predecessor-version":[{"id":30666,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts\/10588\/revisions\/30666"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/media\/18395"}],"wp:attachment":[{"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/media?parent=10588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/categories?post=10588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/tags?post=10588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/figure><\/div>\n\n\n\nHand drawing: Only if I had the time\u2026<\/strong><\/h5>\n\n\n\n<\/figure><\/div>\n\n\n\nAddition:(000) 000-0001 is marketable.<\/strong><\/h5>\n\n\n\n<\/figure><\/div>\n\n\n\nDial-up: Very retro…<\/strong><\/h5>\n\n\n\n<\/figure><\/div>\n\n\n\nBasic phone number formatting methods<\/strong><\/h5>\n\n\n\nDomestic numbers usually combine area code(ex.07 for Kaosiung) and phone number. Separating the two fields is hardly confusing. International phone number input formats, on the other hand, are more complicated and confusing. Here are some of the common entering formats:<\/p>\n\n\n\n
Country code + area code (0 should be omitted for some countries)+phone number
ex\uff1a+886 7 123 4567
Country code + cellphone numbers(0 should be omitted for some countries)
ex\uff1a+886 910 123456<\/p>\n\n\n\n
In Taiwan, area codes are 2 or 3 digits and phone numbers are 7 or 8 digits. For example, 035 is the area code for Hsinchu area and 07 is for Kaosiung area. <\/p>\n\n\n\n
Input Field Formats<\/strong><\/h5>\n\n\n\nSingle and multiple fields are the most common methods to capture user inputs. Both methods have their pros and cons. <\/p>\n\n\n\n
Single Field Format<\/strong><\/p>\n\n\n\nA single field is placed after a description or an icon. This is the most common pattern, which requires less coding and less taps. However, long phone numbers may be difficult to read and users would not know if area codes or country codes are required. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Multiple Fields Format<\/strong><\/p>\n\n\n\nMultiple fields format breaks the number into specific fields. For example, three separate fields are made for entering country code(+886), area code(022) and phone number(111111). With clear instructions, user errors can be largely reduced. However, Different digit numbers from different countries make it difficult to control phone number formats. Users cannot do copy-and-paste.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Elegant Solution<\/strong><\/p>\n\n\n\nDesign Tongue prefers single field format for its simplicity, but adding some useful details can enhance user experience.<\/p>\n\n\n\n
1. Field masking<\/strong><\/p>\n\n\n\n1.1 Field Name<\/strong><\/p>\n\n\n\nIt’s needless to say that field names are essential. Adding a small icon makes the interface more fun and enhances brand awareness.<\/p>\n\n\n\n
1.2 Input format correction<\/strong><\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n<\/figure><\/div>\n\n\n\n<\/figure><\/div>\n\n\n\n\u25b2 To avoid transcription errors, phone numbers will automatically be placed in the correct format.<\/p>\n\n\n\n
#\u3001x\u3001ext are used for extension numbers. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
1.3 Error detection<\/strong><\/p>\n\n\n\nAutomatically detects errors when users do not use numeric digits or the correct numbers of digits. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Dropdown list<\/strong><\/p>\n\n\n\nIt can be frustrating to enter country codes on international websites. Knowing that only numbers are accepted in input fields, users often get confused whether they should use the plus sign. Those who have gotten used to it may forget that it is not needed to dialing, theose who seldom make international calls simply get confused. Without proper indications, users often have to open another window to check the correct country code, which is even more time-consuming on mobile devices.<\/p>\n\n\n\n
Using a dropdown list is much more time-efficient. However, with a large number of countries displayed, special UI approaches can make choosing country codes easier.<\/p>\n\n\n\n
1. Flag dropdown: Many designers find flags useless due to their small sizes, I believe they still hold functional and aesthetic values. Flag icons can also help users can quickly scan through the list.
2. Country names in English: English is the international language that is easy to be searched in alphabetical order.
3. Country name: Most users recognize the name of their own countries more quickly.
4. Country codes.<\/p>\n\n\n\n
After choosing the country code, the entered data will be automatically placed with the right format. ( DEMO https:\/\/goo.gl\/cxr8cx<\/a>\uff09\u3002 <\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n
2-1 Prioritizing frequently used country codes<\/strong><\/p>\n\n\n\nUsers may go insane if they have to choose from more than 200 countries! A more friendly approach would be prioritizing the most frequently used country codes. IP address also helps detecting country codes. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n \u25b2Try here=> whoscall https:\/\/whoscall.com\/zh-TW\/<\/a><\/p>\n\n\n\n
2-2 Enquiring country codes<\/strong><\/p>\n\n\n\nAdding search function adds efficiency to the dropdown list format. Designers should provide a mechanism that allows users to search for both country name and country code by typing names or numbers. This searching method is more intuitive and user-friendly. It’s the programmer’s job to do keyword matching and fuzzy search. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nThe search function is useful when users remember only parts of the country code and country name. But if users search with only the first letter(b for Brazil), the mechanism would show all data containing the letter(Albania).<\/p>\n\n\n\n
If difficulty in programming is not a concern, the best thing to od is to offer search functions for both country name and country code. When a letter or a number is entered, matching country names are listed in order of relevance. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n \u25b2 Modify whoscall elements<\/p>\n\n\n\n
3. Input mask<\/strong><\/p>\n\n\n\nZero is omitted when dialing international number on a cellphone, which is often forgotten. Reminders are oftern ignored by users. The best way is to accept numbers with or without 0 in the front-end and change them in the back-end . <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
4. Different options for registraion<\/strong><\/p>\n\n\n\nMost service platforms offer online registrations on mobile devices. To make authentication process easier, it has become popular to use phone number as account name. Depending on company policies, users without cellphone numbers ot local numbers may not be able to register successfully. We suggest using e-mail address or user name as account name. We can also bing users’ registered phone numbers with their email addresses.<\/p>\n\n\n\n
5. Making numbers the only input option for mobile devices<\/strong><\/p>\n\n\n\nEntering date on mobile devices is inconvenient. Default setting should be made to simplify the action. The setting is techically supported.<\/p>\n\n\n\n
Reference- 01 https:\/\/goo.gl\/OzU1Y6 (different mobile input types)
Reference- 02 https:\/\/goo.gl\/pWpqYc (different mobile input types) <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n\n\u25b2 When inputting numbers, number 0 to 9 are used.\n \n<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n \u25b2 When inputting phone numbers, signs(+ * #) can be added.<\/p>\n\n\n\n
Conclusion<\/strong><\/h5>\n\n\n\nIs it worth the investment for companies to modify a simple input field? Design Tongue agrees that building important infrastructures is more important during the initial stage, but well-designed details can set your products apart. This article introduces methods based on user experience. Issues regarding programming have not been further discussed. Please do not hesitate to offer your precious opinions in the forum!<\/p>\n\n\n\n
Reference:
friendly format for Phone Numbers (https:\/\/goo.gl\/Dlm3hb<\/a>)
Multiple vs single field capture for phone number form input (https:\/\/goo.gl\/8O9EVS<\/a>)
Phone number Entry question (https:\/\/goo.gl\/Wa1u8i<\/a>)
E.123 formats (https:\/\/goo.gl\/9d9ppZ<\/a>)
If Satan was a web developer \u2026 (https:\/\/goo.gl\/0wKjnA<\/a>) <\/p>\n","protected":false},"excerpt":{"rendered":"When being asked to fill in our telephone number online […]<\/p>\n","protected":false},"author":6,"featured_media":18395,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1971,1979],"tags":[1075],"class_list":["post-10588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-2-columns_en","category-2-1-columns_on_ux_en","tag-mz_vol_76_en"],"acf":[],"yoast_head":"\r\n
UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE<\/title>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\" \/>\r\n<meta property=\"og:locale\" content=\"zh_TW\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE\" \/>\r\n<meta property=\"og:description\" content=\"When being asked to fill in our telephone number online […]\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\" \/>\r\n<meta property=\"og:site_name\" content=\"\u6a58\u4eba\u8a8c G!VOICE\" \/>\r\n<meta property=\"article:published_time\" content=\"2016-12-29T16:00:00+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2020-06-04T03:51:20+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\" \/>\r\n\t<meta property=\"og:image:width\" content=\"640\" \/>\r\n\t<meta property=\"og:image:height\" content=\"363\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\r\n<meta name=\"author\" content=\"admin_CAL\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005:\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin_CAL\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9810\u4f30\u95b1\u8b80\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 \u5206\u9418\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\"},\"author\":{\"name\":\"admin_CAL\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405\"},\"headline\":\"UI design clinic- Phone number formatting\",\"datePublished\":\"2016-12-29T16:00:00+00:00\",\"dateModified\":\"2020-06-04T03:51:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\"},\"wordCount\":1110,\"publisher\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#organization\"},\"image\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\",\"keywords\":[\"VOL. 76\"],\"articleSection\":[\"Columns\",\"On UX\"],\"inLanguage\":\"zh-TW\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\",\"name\":\"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE\",\"isPartOf\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\",\"datePublished\":\"2016-12-29T16:00:00+00:00\",\"dateModified\":\"2020-06-04T03:51:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#breadcrumb\"},\"inLanguage\":\"zh-TW\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\",\"contentUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\",\"width\":640,\"height\":363},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u7576\u671f\u7e3d\u89bd\",\"item\":\"https:\/\/brand.gamania.com\/gvoice\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UI design clinic- Phone number formatting\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#website\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/\",\"name\":\"\u6a58\u4eba\u8a8c G!VOICE\",\"description\":\"Read it, Know it, Love it!\",\"publisher\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/brand.gamania.com\/gvoice\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-TW\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#organization\",\"name\":\"\u6a58\u4eba\u8a8c G!VOICE\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/2020\/03\/logo.png\",\"contentUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/2020\/03\/logo.png\",\"width\":320,\"height\":93,\"caption\":\"\u6a58\u4eba\u8a8c G!VOICE\"},\"image\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405\",\"name\":\"admin_CAL\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7395194d29138c710a5385102f95c8753874965e1e1b2c83e40c9c1cfe361c9d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7395194d29138c710a5385102f95c8753874965e1e1b2c83e40c9c1cfe361c9d?s=96&d=mm&r=g\",\"caption\":\"admin_CAL\"},\"url\":\"https:\/\/brand.gamania.com\/gvoice\/author\/calvin\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/","og_locale":"zh_TW","og_type":"article","og_title":"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE","og_description":"When being asked to fill in our telephone number online […]","og_url":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/","og_site_name":"\u6a58\u4eba\u8a8c G!VOICE","article_published_time":"2016-12-29T16:00:00+00:00","article_modified_time":"2020-06-04T03:51:20+00:00","og_image":[{"width":640,"height":363,"url":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","type":"image\/gif"}],"author":"admin_CAL","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005:":"admin_CAL","\u9810\u4f30\u95b1\u8b80\u6642\u9593":"5 \u5206\u9418"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#article","isPartOf":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/"},"author":{"name":"admin_CAL","@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405"},"headline":"UI design clinic- Phone number formatting","datePublished":"2016-12-29T16:00:00+00:00","dateModified":"2020-06-04T03:51:20+00:00","mainEntityOfPage":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/"},"wordCount":1110,"publisher":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#organization"},"image":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage"},"thumbnailUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","keywords":["VOL. 76"],"articleSection":["Columns","On UX"],"inLanguage":"zh-TW"},{"@type":"WebPage","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/","url":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/","name":"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE","isPartOf":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#website"},"primaryImageOfPage":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage"},"image":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage"},"thumbnailUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","datePublished":"2016-12-29T16:00:00+00:00","dateModified":"2020-06-04T03:51:20+00:00","breadcrumb":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#breadcrumb"},"inLanguage":"zh-TW","potentialAction":[{"@type":"ReadAction","target":["https:\/\/brand.gamania.com\/gvoice\/en\/10588\/"]}]},{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage","url":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","contentUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","width":640,"height":363},{"@type":"BreadcrumbList","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u7576\u671f\u7e3d\u89bd","item":"https:\/\/brand.gamania.com\/gvoice\/"},{"@type":"ListItem","position":2,"name":"UI design clinic- Phone number formatting"}]},{"@type":"WebSite","@id":"https:\/\/brand.gamania.com\/gvoice\/#website","url":"https:\/\/brand.gamania.com\/gvoice\/","name":"\u6a58\u4eba\u8a8c G!VOICE","description":"Read it, Know it, Love it!","publisher":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/brand.gamania.com\/gvoice\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-TW"},{"@type":"Organization","@id":"https:\/\/brand.gamania.com\/gvoice\/#organization","name":"\u6a58\u4eba\u8a8c G!VOICE","url":"https:\/\/brand.gamania.com\/gvoice\/","logo":{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/logo\/image\/","url":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/2020\/03\/logo.png","contentUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/2020\/03\/logo.png","width":320,"height":93,"caption":"\u6a58\u4eba\u8a8c G!VOICE"},"image":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405","name":"admin_CAL","image":{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7395194d29138c710a5385102f95c8753874965e1e1b2c83e40c9c1cfe361c9d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7395194d29138c710a5385102f95c8753874965e1e1b2c83e40c9c1cfe361c9d?s=96&d=mm&r=g","caption":"admin_CAL"},"url":"https:\/\/brand.gamania.com\/gvoice\/author\/calvin\/"}]}},"_links":{"self":[{"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts\/10588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/comments?post=10588"}],"version-history":[{"count":5,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts\/10588\/revisions"}],"predecessor-version":[{"id":30666,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts\/10588\/revisions\/30666"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/media\/18395"}],"wp:attachment":[{"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/media?parent=10588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/categories?post=10588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/tags?post=10588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/figure><\/div>\n\n\n\nAddition:(000) 000-0001 is marketable.<\/strong><\/h5>\n\n\n\n<\/figure><\/div>\n\n\n\nDial-up: Very retro…<\/strong><\/h5>\n\n\n\n<\/figure><\/div>\n\n\n\nBasic phone number formatting methods<\/strong><\/h5>\n\n\n\nDomestic numbers usually combine area code(ex.07 for Kaosiung) and phone number. Separating the two fields is hardly confusing. International phone number input formats, on the other hand, are more complicated and confusing. Here are some of the common entering formats:<\/p>\n\n\n\n
Country code + area code (0 should be omitted for some countries)+phone number
ex\uff1a+886 7 123 4567
Country code + cellphone numbers(0 should be omitted for some countries)
ex\uff1a+886 910 123456<\/p>\n\n\n\n
In Taiwan, area codes are 2 or 3 digits and phone numbers are 7 or 8 digits. For example, 035 is the area code for Hsinchu area and 07 is for Kaosiung area. <\/p>\n\n\n\n
Input Field Formats<\/strong><\/h5>\n\n\n\nSingle and multiple fields are the most common methods to capture user inputs. Both methods have their pros and cons. <\/p>\n\n\n\n
Single Field Format<\/strong><\/p>\n\n\n\nA single field is placed after a description or an icon. This is the most common pattern, which requires less coding and less taps. However, long phone numbers may be difficult to read and users would not know if area codes or country codes are required. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Multiple Fields Format<\/strong><\/p>\n\n\n\nMultiple fields format breaks the number into specific fields. For example, three separate fields are made for entering country code(+886), area code(022) and phone number(111111). With clear instructions, user errors can be largely reduced. However, Different digit numbers from different countries make it difficult to control phone number formats. Users cannot do copy-and-paste.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Elegant Solution<\/strong><\/p>\n\n\n\nDesign Tongue prefers single field format for its simplicity, but adding some useful details can enhance user experience.<\/p>\n\n\n\n
1. Field masking<\/strong><\/p>\n\n\n\n1.1 Field Name<\/strong><\/p>\n\n\n\nIt’s needless to say that field names are essential. Adding a small icon makes the interface more fun and enhances brand awareness.<\/p>\n\n\n\n
1.2 Input format correction<\/strong><\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n<\/figure><\/div>\n\n\n\n<\/figure><\/div>\n\n\n\n\u25b2 To avoid transcription errors, phone numbers will automatically be placed in the correct format.<\/p>\n\n\n\n
#\u3001x\u3001ext are used for extension numbers. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
1.3 Error detection<\/strong><\/p>\n\n\n\nAutomatically detects errors when users do not use numeric digits or the correct numbers of digits. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Dropdown list<\/strong><\/p>\n\n\n\nIt can be frustrating to enter country codes on international websites. Knowing that only numbers are accepted in input fields, users often get confused whether they should use the plus sign. Those who have gotten used to it may forget that it is not needed to dialing, theose who seldom make international calls simply get confused. Without proper indications, users often have to open another window to check the correct country code, which is even more time-consuming on mobile devices.<\/p>\n\n\n\n
Using a dropdown list is much more time-efficient. However, with a large number of countries displayed, special UI approaches can make choosing country codes easier.<\/p>\n\n\n\n
1. Flag dropdown: Many designers find flags useless due to their small sizes, I believe they still hold functional and aesthetic values. Flag icons can also help users can quickly scan through the list.
2. Country names in English: English is the international language that is easy to be searched in alphabetical order.
3. Country name: Most users recognize the name of their own countries more quickly.
4. Country codes.<\/p>\n\n\n\n
After choosing the country code, the entered data will be automatically placed with the right format. ( DEMO https:\/\/goo.gl\/cxr8cx<\/a>\uff09\u3002 <\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n
2-1 Prioritizing frequently used country codes<\/strong><\/p>\n\n\n\nUsers may go insane if they have to choose from more than 200 countries! A more friendly approach would be prioritizing the most frequently used country codes. IP address also helps detecting country codes. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n \u25b2Try here=> whoscall https:\/\/whoscall.com\/zh-TW\/<\/a><\/p>\n\n\n\n
2-2 Enquiring country codes<\/strong><\/p>\n\n\n\nAdding search function adds efficiency to the dropdown list format. Designers should provide a mechanism that allows users to search for both country name and country code by typing names or numbers. This searching method is more intuitive and user-friendly. It’s the programmer’s job to do keyword matching and fuzzy search. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nThe search function is useful when users remember only parts of the country code and country name. But if users search with only the first letter(b for Brazil), the mechanism would show all data containing the letter(Albania).<\/p>\n\n\n\n
If difficulty in programming is not a concern, the best thing to od is to offer search functions for both country name and country code. When a letter or a number is entered, matching country names are listed in order of relevance. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n \u25b2 Modify whoscall elements<\/p>\n\n\n\n
3. Input mask<\/strong><\/p>\n\n\n\nZero is omitted when dialing international number on a cellphone, which is often forgotten. Reminders are oftern ignored by users. The best way is to accept numbers with or without 0 in the front-end and change them in the back-end . <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
4. Different options for registraion<\/strong><\/p>\n\n\n\nMost service platforms offer online registrations on mobile devices. To make authentication process easier, it has become popular to use phone number as account name. Depending on company policies, users without cellphone numbers ot local numbers may not be able to register successfully. We suggest using e-mail address or user name as account name. We can also bing users’ registered phone numbers with their email addresses.<\/p>\n\n\n\n
5. Making numbers the only input option for mobile devices<\/strong><\/p>\n\n\n\nEntering date on mobile devices is inconvenient. Default setting should be made to simplify the action. The setting is techically supported.<\/p>\n\n\n\n
Reference- 01 https:\/\/goo.gl\/OzU1Y6 (different mobile input types)
Reference- 02 https:\/\/goo.gl\/pWpqYc (different mobile input types) <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n\n\u25b2 When inputting numbers, number 0 to 9 are used.\n \n<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n \u25b2 When inputting phone numbers, signs(+ * #) can be added.<\/p>\n\n\n\n
Conclusion<\/strong><\/h5>\n\n\n\nIs it worth the investment for companies to modify a simple input field? Design Tongue agrees that building important infrastructures is more important during the initial stage, but well-designed details can set your products apart. This article introduces methods based on user experience. Issues regarding programming have not been further discussed. Please do not hesitate to offer your precious opinions in the forum!<\/p>\n\n\n\n
Reference:
friendly format for Phone Numbers (https:\/\/goo.gl\/Dlm3hb<\/a>)
Multiple vs single field capture for phone number form input (https:\/\/goo.gl\/8O9EVS<\/a>)
Phone number Entry question (https:\/\/goo.gl\/Wa1u8i<\/a>)
E.123 formats (https:\/\/goo.gl\/9d9ppZ<\/a>)
If Satan was a web developer \u2026 (https:\/\/goo.gl\/0wKjnA<\/a>) <\/p>\n","protected":false},"excerpt":{"rendered":"When being asked to fill in our telephone number online […]<\/p>\n","protected":false},"author":6,"featured_media":18395,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1971,1979],"tags":[1075],"class_list":["post-10588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-2-columns_en","category-2-1-columns_on_ux_en","tag-mz_vol_76_en"],"acf":[],"yoast_head":"\r\n
UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE<\/title>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\" \/>\r\n<meta property=\"og:locale\" content=\"zh_TW\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE\" \/>\r\n<meta property=\"og:description\" content=\"When being asked to fill in our telephone number online […]\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\" \/>\r\n<meta property=\"og:site_name\" content=\"\u6a58\u4eba\u8a8c G!VOICE\" \/>\r\n<meta property=\"article:published_time\" content=\"2016-12-29T16:00:00+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2020-06-04T03:51:20+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\" \/>\r\n\t<meta property=\"og:image:width\" content=\"640\" \/>\r\n\t<meta property=\"og:image:height\" content=\"363\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\r\n<meta name=\"author\" content=\"admin_CAL\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005:\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin_CAL\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9810\u4f30\u95b1\u8b80\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 \u5206\u9418\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\"},\"author\":{\"name\":\"admin_CAL\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405\"},\"headline\":\"UI design clinic- Phone number formatting\",\"datePublished\":\"2016-12-29T16:00:00+00:00\",\"dateModified\":\"2020-06-04T03:51:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\"},\"wordCount\":1110,\"publisher\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#organization\"},\"image\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\",\"keywords\":[\"VOL. 76\"],\"articleSection\":[\"Columns\",\"On UX\"],\"inLanguage\":\"zh-TW\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\",\"name\":\"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE\",\"isPartOf\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\",\"datePublished\":\"2016-12-29T16:00:00+00:00\",\"dateModified\":\"2020-06-04T03:51:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#breadcrumb\"},\"inLanguage\":\"zh-TW\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\",\"contentUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\",\"width\":640,\"height\":363},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u7576\u671f\u7e3d\u89bd\",\"item\":\"https:\/\/brand.gamania.com\/gvoice\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UI design clinic- Phone number formatting\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#website\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/\",\"name\":\"\u6a58\u4eba\u8a8c G!VOICE\",\"description\":\"Read it, Know it, Love it!\",\"publisher\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/brand.gamania.com\/gvoice\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-TW\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#organization\",\"name\":\"\u6a58\u4eba\u8a8c G!VOICE\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/2020\/03\/logo.png\",\"contentUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/2020\/03\/logo.png\",\"width\":320,\"height\":93,\"caption\":\"\u6a58\u4eba\u8a8c G!VOICE\"},\"image\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405\",\"name\":\"admin_CAL\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7395194d29138c710a5385102f95c8753874965e1e1b2c83e40c9c1cfe361c9d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7395194d29138c710a5385102f95c8753874965e1e1b2c83e40c9c1cfe361c9d?s=96&d=mm&r=g\",\"caption\":\"admin_CAL\"},\"url\":\"https:\/\/brand.gamania.com\/gvoice\/author\/calvin\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/","og_locale":"zh_TW","og_type":"article","og_title":"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE","og_description":"When being asked to fill in our telephone number online […]","og_url":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/","og_site_name":"\u6a58\u4eba\u8a8c G!VOICE","article_published_time":"2016-12-29T16:00:00+00:00","article_modified_time":"2020-06-04T03:51:20+00:00","og_image":[{"width":640,"height":363,"url":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","type":"image\/gif"}],"author":"admin_CAL","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005:":"admin_CAL","\u9810\u4f30\u95b1\u8b80\u6642\u9593":"5 \u5206\u9418"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#article","isPartOf":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/"},"author":{"name":"admin_CAL","@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405"},"headline":"UI design clinic- Phone number formatting","datePublished":"2016-12-29T16:00:00+00:00","dateModified":"2020-06-04T03:51:20+00:00","mainEntityOfPage":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/"},"wordCount":1110,"publisher":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#organization"},"image":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage"},"thumbnailUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","keywords":["VOL. 76"],"articleSection":["Columns","On UX"],"inLanguage":"zh-TW"},{"@type":"WebPage","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/","url":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/","name":"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE","isPartOf":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#website"},"primaryImageOfPage":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage"},"image":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage"},"thumbnailUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","datePublished":"2016-12-29T16:00:00+00:00","dateModified":"2020-06-04T03:51:20+00:00","breadcrumb":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#breadcrumb"},"inLanguage":"zh-TW","potentialAction":[{"@type":"ReadAction","target":["https:\/\/brand.gamania.com\/gvoice\/en\/10588\/"]}]},{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage","url":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","contentUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","width":640,"height":363},{"@type":"BreadcrumbList","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u7576\u671f\u7e3d\u89bd","item":"https:\/\/brand.gamania.com\/gvoice\/"},{"@type":"ListItem","position":2,"name":"UI design clinic- Phone number formatting"}]},{"@type":"WebSite","@id":"https:\/\/brand.gamania.com\/gvoice\/#website","url":"https:\/\/brand.gamania.com\/gvoice\/","name":"\u6a58\u4eba\u8a8c G!VOICE","description":"Read it, Know it, Love it!","publisher":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/brand.gamania.com\/gvoice\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-TW"},{"@type":"Organization","@id":"https:\/\/brand.gamania.com\/gvoice\/#organization","name":"\u6a58\u4eba\u8a8c G!VOICE","url":"https:\/\/brand.gamania.com\/gvoice\/","logo":{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/logo\/image\/","url":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/2020\/03\/logo.png","contentUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/2020\/03\/logo.png","width":320,"height":93,"caption":"\u6a58\u4eba\u8a8c G!VOICE"},"image":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405","name":"admin_CAL","image":{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7395194d29138c710a5385102f95c8753874965e1e1b2c83e40c9c1cfe361c9d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7395194d29138c710a5385102f95c8753874965e1e1b2c83e40c9c1cfe361c9d?s=96&d=mm&r=g","caption":"admin_CAL"},"url":"https:\/\/brand.gamania.com\/gvoice\/author\/calvin\/"}]}},"_links":{"self":[{"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts\/10588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/comments?post=10588"}],"version-history":[{"count":5,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts\/10588\/revisions"}],"predecessor-version":[{"id":30666,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts\/10588\/revisions\/30666"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/media\/18395"}],"wp:attachment":[{"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/media?parent=10588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/categories?post=10588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/tags?post=10588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/figure><\/div>\n\n\n\nDial-up: Very retro…<\/strong><\/h5>\n\n\n\n<\/figure><\/div>\n\n\n\nBasic phone number formatting methods<\/strong><\/h5>\n\n\n\nDomestic numbers usually combine area code(ex.07 for Kaosiung) and phone number. Separating the two fields is hardly confusing. International phone number input formats, on the other hand, are more complicated and confusing. Here are some of the common entering formats:<\/p>\n\n\n\n
Country code + area code (0 should be omitted for some countries)+phone number
ex\uff1a+886 7 123 4567
Country code + cellphone numbers(0 should be omitted for some countries)
ex\uff1a+886 910 123456<\/p>\n\n\n\n
In Taiwan, area codes are 2 or 3 digits and phone numbers are 7 or 8 digits. For example, 035 is the area code for Hsinchu area and 07 is for Kaosiung area. <\/p>\n\n\n\n
Input Field Formats<\/strong><\/h5>\n\n\n\nSingle and multiple fields are the most common methods to capture user inputs. Both methods have their pros and cons. <\/p>\n\n\n\n
Single Field Format<\/strong><\/p>\n\n\n\nA single field is placed after a description or an icon. This is the most common pattern, which requires less coding and less taps. However, long phone numbers may be difficult to read and users would not know if area codes or country codes are required. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Multiple Fields Format<\/strong><\/p>\n\n\n\nMultiple fields format breaks the number into specific fields. For example, three separate fields are made for entering country code(+886), area code(022) and phone number(111111). With clear instructions, user errors can be largely reduced. However, Different digit numbers from different countries make it difficult to control phone number formats. Users cannot do copy-and-paste.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Elegant Solution<\/strong><\/p>\n\n\n\nDesign Tongue prefers single field format for its simplicity, but adding some useful details can enhance user experience.<\/p>\n\n\n\n
1. Field masking<\/strong><\/p>\n\n\n\n1.1 Field Name<\/strong><\/p>\n\n\n\nIt’s needless to say that field names are essential. Adding a small icon makes the interface more fun and enhances brand awareness.<\/p>\n\n\n\n
1.2 Input format correction<\/strong><\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n<\/figure><\/div>\n\n\n\n<\/figure><\/div>\n\n\n\n\u25b2 To avoid transcription errors, phone numbers will automatically be placed in the correct format.<\/p>\n\n\n\n
#\u3001x\u3001ext are used for extension numbers. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
1.3 Error detection<\/strong><\/p>\n\n\n\nAutomatically detects errors when users do not use numeric digits or the correct numbers of digits. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Dropdown list<\/strong><\/p>\n\n\n\nIt can be frustrating to enter country codes on international websites. Knowing that only numbers are accepted in input fields, users often get confused whether they should use the plus sign. Those who have gotten used to it may forget that it is not needed to dialing, theose who seldom make international calls simply get confused. Without proper indications, users often have to open another window to check the correct country code, which is even more time-consuming on mobile devices.<\/p>\n\n\n\n
Using a dropdown list is much more time-efficient. However, with a large number of countries displayed, special UI approaches can make choosing country codes easier.<\/p>\n\n\n\n
1. Flag dropdown: Many designers find flags useless due to their small sizes, I believe they still hold functional and aesthetic values. Flag icons can also help users can quickly scan through the list.
2. Country names in English: English is the international language that is easy to be searched in alphabetical order.
3. Country name: Most users recognize the name of their own countries more quickly.
4. Country codes.<\/p>\n\n\n\n
After choosing the country code, the entered data will be automatically placed with the right format. ( DEMO https:\/\/goo.gl\/cxr8cx<\/a>\uff09\u3002 <\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n
2-1 Prioritizing frequently used country codes<\/strong><\/p>\n\n\n\nUsers may go insane if they have to choose from more than 200 countries! A more friendly approach would be prioritizing the most frequently used country codes. IP address also helps detecting country codes. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n \u25b2Try here=> whoscall https:\/\/whoscall.com\/zh-TW\/<\/a><\/p>\n\n\n\n
2-2 Enquiring country codes<\/strong><\/p>\n\n\n\nAdding search function adds efficiency to the dropdown list format. Designers should provide a mechanism that allows users to search for both country name and country code by typing names or numbers. This searching method is more intuitive and user-friendly. It’s the programmer’s job to do keyword matching and fuzzy search. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nThe search function is useful when users remember only parts of the country code and country name. But if users search with only the first letter(b for Brazil), the mechanism would show all data containing the letter(Albania).<\/p>\n\n\n\n
If difficulty in programming is not a concern, the best thing to od is to offer search functions for both country name and country code. When a letter or a number is entered, matching country names are listed in order of relevance. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n \u25b2 Modify whoscall elements<\/p>\n\n\n\n
3. Input mask<\/strong><\/p>\n\n\n\nZero is omitted when dialing international number on a cellphone, which is often forgotten. Reminders are oftern ignored by users. The best way is to accept numbers with or without 0 in the front-end and change them in the back-end . <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
4. Different options for registraion<\/strong><\/p>\n\n\n\nMost service platforms offer online registrations on mobile devices. To make authentication process easier, it has become popular to use phone number as account name. Depending on company policies, users without cellphone numbers ot local numbers may not be able to register successfully. We suggest using e-mail address or user name as account name. We can also bing users’ registered phone numbers with their email addresses.<\/p>\n\n\n\n
5. Making numbers the only input option for mobile devices<\/strong><\/p>\n\n\n\nEntering date on mobile devices is inconvenient. Default setting should be made to simplify the action. The setting is techically supported.<\/p>\n\n\n\n
Reference- 01 https:\/\/goo.gl\/OzU1Y6 (different mobile input types)
Reference- 02 https:\/\/goo.gl\/pWpqYc (different mobile input types) <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n\n\u25b2 When inputting numbers, number 0 to 9 are used.\n \n<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n \u25b2 When inputting phone numbers, signs(+ * #) can be added.<\/p>\n\n\n\n
Conclusion<\/strong><\/h5>\n\n\n\nIs it worth the investment for companies to modify a simple input field? Design Tongue agrees that building important infrastructures is more important during the initial stage, but well-designed details can set your products apart. This article introduces methods based on user experience. Issues regarding programming have not been further discussed. Please do not hesitate to offer your precious opinions in the forum!<\/p>\n\n\n\n
Reference:
friendly format for Phone Numbers (https:\/\/goo.gl\/Dlm3hb<\/a>)
Multiple vs single field capture for phone number form input (https:\/\/goo.gl\/8O9EVS<\/a>)
Phone number Entry question (https:\/\/goo.gl\/Wa1u8i<\/a>)
E.123 formats (https:\/\/goo.gl\/9d9ppZ<\/a>)
If Satan was a web developer \u2026 (https:\/\/goo.gl\/0wKjnA<\/a>) <\/p>\n","protected":false},"excerpt":{"rendered":"When being asked to fill in our telephone number online […]<\/p>\n","protected":false},"author":6,"featured_media":18395,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1971,1979],"tags":[1075],"class_list":["post-10588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-2-columns_en","category-2-1-columns_on_ux_en","tag-mz_vol_76_en"],"acf":[],"yoast_head":"\r\n
UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE<\/title>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\" \/>\r\n<meta property=\"og:locale\" content=\"zh_TW\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE\" \/>\r\n<meta property=\"og:description\" content=\"When being asked to fill in our telephone number online […]\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\" \/>\r\n<meta property=\"og:site_name\" content=\"\u6a58\u4eba\u8a8c G!VOICE\" \/>\r\n<meta property=\"article:published_time\" content=\"2016-12-29T16:00:00+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2020-06-04T03:51:20+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\" \/>\r\n\t<meta property=\"og:image:width\" content=\"640\" \/>\r\n\t<meta property=\"og:image:height\" content=\"363\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\r\n<meta name=\"author\" content=\"admin_CAL\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005:\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin_CAL\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9810\u4f30\u95b1\u8b80\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 \u5206\u9418\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\"},\"author\":{\"name\":\"admin_CAL\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405\"},\"headline\":\"UI design clinic- Phone number formatting\",\"datePublished\":\"2016-12-29T16:00:00+00:00\",\"dateModified\":\"2020-06-04T03:51:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\"},\"wordCount\":1110,\"publisher\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#organization\"},\"image\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\",\"keywords\":[\"VOL. 76\"],\"articleSection\":[\"Columns\",\"On UX\"],\"inLanguage\":\"zh-TW\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\",\"name\":\"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE\",\"isPartOf\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\",\"datePublished\":\"2016-12-29T16:00:00+00:00\",\"dateModified\":\"2020-06-04T03:51:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#breadcrumb\"},\"inLanguage\":\"zh-TW\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\",\"contentUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\",\"width\":640,\"height\":363},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u7576\u671f\u7e3d\u89bd\",\"item\":\"https:\/\/brand.gamania.com\/gvoice\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UI design clinic- Phone number formatting\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#website\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/\",\"name\":\"\u6a58\u4eba\u8a8c G!VOICE\",\"description\":\"Read it, Know it, Love it!\",\"publisher\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/brand.gamania.com\/gvoice\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-TW\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#organization\",\"name\":\"\u6a58\u4eba\u8a8c G!VOICE\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/2020\/03\/logo.png\",\"contentUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/2020\/03\/logo.png\",\"width\":320,\"height\":93,\"caption\":\"\u6a58\u4eba\u8a8c G!VOICE\"},\"image\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405\",\"name\":\"admin_CAL\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7395194d29138c710a5385102f95c8753874965e1e1b2c83e40c9c1cfe361c9d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7395194d29138c710a5385102f95c8753874965e1e1b2c83e40c9c1cfe361c9d?s=96&d=mm&r=g\",\"caption\":\"admin_CAL\"},\"url\":\"https:\/\/brand.gamania.com\/gvoice\/author\/calvin\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/","og_locale":"zh_TW","og_type":"article","og_title":"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE","og_description":"When being asked to fill in our telephone number online […]","og_url":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/","og_site_name":"\u6a58\u4eba\u8a8c G!VOICE","article_published_time":"2016-12-29T16:00:00+00:00","article_modified_time":"2020-06-04T03:51:20+00:00","og_image":[{"width":640,"height":363,"url":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","type":"image\/gif"}],"author":"admin_CAL","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005:":"admin_CAL","\u9810\u4f30\u95b1\u8b80\u6642\u9593":"5 \u5206\u9418"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#article","isPartOf":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/"},"author":{"name":"admin_CAL","@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405"},"headline":"UI design clinic- Phone number formatting","datePublished":"2016-12-29T16:00:00+00:00","dateModified":"2020-06-04T03:51:20+00:00","mainEntityOfPage":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/"},"wordCount":1110,"publisher":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#organization"},"image":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage"},"thumbnailUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","keywords":["VOL. 76"],"articleSection":["Columns","On UX"],"inLanguage":"zh-TW"},{"@type":"WebPage","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/","url":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/","name":"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE","isPartOf":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#website"},"primaryImageOfPage":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage"},"image":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage"},"thumbnailUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","datePublished":"2016-12-29T16:00:00+00:00","dateModified":"2020-06-04T03:51:20+00:00","breadcrumb":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#breadcrumb"},"inLanguage":"zh-TW","potentialAction":[{"@type":"ReadAction","target":["https:\/\/brand.gamania.com\/gvoice\/en\/10588\/"]}]},{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage","url":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","contentUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","width":640,"height":363},{"@type":"BreadcrumbList","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u7576\u671f\u7e3d\u89bd","item":"https:\/\/brand.gamania.com\/gvoice\/"},{"@type":"ListItem","position":2,"name":"UI design clinic- Phone number formatting"}]},{"@type":"WebSite","@id":"https:\/\/brand.gamania.com\/gvoice\/#website","url":"https:\/\/brand.gamania.com\/gvoice\/","name":"\u6a58\u4eba\u8a8c G!VOICE","description":"Read it, Know it, Love it!","publisher":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/brand.gamania.com\/gvoice\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-TW"},{"@type":"Organization","@id":"https:\/\/brand.gamania.com\/gvoice\/#organization","name":"\u6a58\u4eba\u8a8c G!VOICE","url":"https:\/\/brand.gamania.com\/gvoice\/","logo":{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/logo\/image\/","url":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/2020\/03\/logo.png","contentUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/2020\/03\/logo.png","width":320,"height":93,"caption":"\u6a58\u4eba\u8a8c G!VOICE"},"image":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405","name":"admin_CAL","image":{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7395194d29138c710a5385102f95c8753874965e1e1b2c83e40c9c1cfe361c9d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7395194d29138c710a5385102f95c8753874965e1e1b2c83e40c9c1cfe361c9d?s=96&d=mm&r=g","caption":"admin_CAL"},"url":"https:\/\/brand.gamania.com\/gvoice\/author\/calvin\/"}]}},"_links":{"self":[{"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts\/10588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/comments?post=10588"}],"version-history":[{"count":5,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts\/10588\/revisions"}],"predecessor-version":[{"id":30666,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts\/10588\/revisions\/30666"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/media\/18395"}],"wp:attachment":[{"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/media?parent=10588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/categories?post=10588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/tags?post=10588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/figure><\/div>\n\n\n\nBasic phone number formatting methods<\/strong><\/h5>\n\n\n\nDomestic numbers usually combine area code(ex.07 for Kaosiung) and phone number. Separating the two fields is hardly confusing. International phone number input formats, on the other hand, are more complicated and confusing. Here are some of the common entering formats:<\/p>\n\n\n\n
Country code + area code (0 should be omitted for some countries)+phone number
ex\uff1a+886 7 123 4567
Country code + cellphone numbers(0 should be omitted for some countries)
ex\uff1a+886 910 123456<\/p>\n\n\n\n
In Taiwan, area codes are 2 or 3 digits and phone numbers are 7 or 8 digits. For example, 035 is the area code for Hsinchu area and 07 is for Kaosiung area. <\/p>\n\n\n\n
Input Field Formats<\/strong><\/h5>\n\n\n\nSingle and multiple fields are the most common methods to capture user inputs. Both methods have their pros and cons. <\/p>\n\n\n\n
Single Field Format<\/strong><\/p>\n\n\n\nA single field is placed after a description or an icon. This is the most common pattern, which requires less coding and less taps. However, long phone numbers may be difficult to read and users would not know if area codes or country codes are required. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Multiple Fields Format<\/strong><\/p>\n\n\n\nMultiple fields format breaks the number into specific fields. For example, three separate fields are made for entering country code(+886), area code(022) and phone number(111111). With clear instructions, user errors can be largely reduced. However, Different digit numbers from different countries make it difficult to control phone number formats. Users cannot do copy-and-paste.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Elegant Solution<\/strong><\/p>\n\n\n\nDesign Tongue prefers single field format for its simplicity, but adding some useful details can enhance user experience.<\/p>\n\n\n\n
1. Field masking<\/strong><\/p>\n\n\n\n1.1 Field Name<\/strong><\/p>\n\n\n\nIt’s needless to say that field names are essential. Adding a small icon makes the interface more fun and enhances brand awareness.<\/p>\n\n\n\n
1.2 Input format correction<\/strong><\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n<\/figure><\/div>\n\n\n\n<\/figure><\/div>\n\n\n\n\u25b2 To avoid transcription errors, phone numbers will automatically be placed in the correct format.<\/p>\n\n\n\n
#\u3001x\u3001ext are used for extension numbers. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
1.3 Error detection<\/strong><\/p>\n\n\n\nAutomatically detects errors when users do not use numeric digits or the correct numbers of digits. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Dropdown list<\/strong><\/p>\n\n\n\nIt can be frustrating to enter country codes on international websites. Knowing that only numbers are accepted in input fields, users often get confused whether they should use the plus sign. Those who have gotten used to it may forget that it is not needed to dialing, theose who seldom make international calls simply get confused. Without proper indications, users often have to open another window to check the correct country code, which is even more time-consuming on mobile devices.<\/p>\n\n\n\n
Using a dropdown list is much more time-efficient. However, with a large number of countries displayed, special UI approaches can make choosing country codes easier.<\/p>\n\n\n\n
1. Flag dropdown: Many designers find flags useless due to their small sizes, I believe they still hold functional and aesthetic values. Flag icons can also help users can quickly scan through the list.
2. Country names in English: English is the international language that is easy to be searched in alphabetical order.
3. Country name: Most users recognize the name of their own countries more quickly.
4. Country codes.<\/p>\n\n\n\n
After choosing the country code, the entered data will be automatically placed with the right format. ( DEMO https:\/\/goo.gl\/cxr8cx<\/a>\uff09\u3002 <\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n
2-1 Prioritizing frequently used country codes<\/strong><\/p>\n\n\n\nUsers may go insane if they have to choose from more than 200 countries! A more friendly approach would be prioritizing the most frequently used country codes. IP address also helps detecting country codes. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n \u25b2Try here=> whoscall https:\/\/whoscall.com\/zh-TW\/<\/a><\/p>\n\n\n\n
2-2 Enquiring country codes<\/strong><\/p>\n\n\n\nAdding search function adds efficiency to the dropdown list format. Designers should provide a mechanism that allows users to search for both country name and country code by typing names or numbers. This searching method is more intuitive and user-friendly. It’s the programmer’s job to do keyword matching and fuzzy search. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nThe search function is useful when users remember only parts of the country code and country name. But if users search with only the first letter(b for Brazil), the mechanism would show all data containing the letter(Albania).<\/p>\n\n\n\n
If difficulty in programming is not a concern, the best thing to od is to offer search functions for both country name and country code. When a letter or a number is entered, matching country names are listed in order of relevance. <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n \u25b2 Modify whoscall elements<\/p>\n\n\n\n
3. Input mask<\/strong><\/p>\n\n\n\nZero is omitted when dialing international number on a cellphone, which is often forgotten. Reminders are oftern ignored by users. The best way is to accept numbers with or without 0 in the front-end and change them in the back-end . <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n
4. Different options for registraion<\/strong><\/p>\n\n\n\nMost service platforms offer online registrations on mobile devices. To make authentication process easier, it has become popular to use phone number as account name. Depending on company policies, users without cellphone numbers ot local numbers may not be able to register successfully. We suggest using e-mail address or user name as account name. We can also bing users’ registered phone numbers with their email addresses.<\/p>\n\n\n\n
5. Making numbers the only input option for mobile devices<\/strong><\/p>\n\n\n\nEntering date on mobile devices is inconvenient. Default setting should be made to simplify the action. The setting is techically supported.<\/p>\n\n\n\n
Reference- 01 https:\/\/goo.gl\/OzU1Y6 (different mobile input types)
Reference- 02 https:\/\/goo.gl\/pWpqYc (different mobile input types) <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n\n\u25b2 When inputting numbers, number 0 to 9 are used.\n \n<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n \u25b2 When inputting phone numbers, signs(+ * #) can be added.<\/p>\n\n\n\n
Conclusion<\/strong><\/h5>\n\n\n\nIs it worth the investment for companies to modify a simple input field? Design Tongue agrees that building important infrastructures is more important during the initial stage, but well-designed details can set your products apart. This article introduces methods based on user experience. Issues regarding programming have not been further discussed. Please do not hesitate to offer your precious opinions in the forum!<\/p>\n\n\n\n
Reference:
friendly format for Phone Numbers (https:\/\/goo.gl\/Dlm3hb<\/a>)
Multiple vs single field capture for phone number form input (https:\/\/goo.gl\/8O9EVS<\/a>)
Phone number Entry question (https:\/\/goo.gl\/Wa1u8i<\/a>)
E.123 formats (https:\/\/goo.gl\/9d9ppZ<\/a>)
If Satan was a web developer \u2026 (https:\/\/goo.gl\/0wKjnA<\/a>) <\/p>\n","protected":false},"excerpt":{"rendered":"When being asked to fill in our telephone number online […]<\/p>\n","protected":false},"author":6,"featured_media":18395,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1971,1979],"tags":[1075],"class_list":["post-10588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-2-columns_en","category-2-1-columns_on_ux_en","tag-mz_vol_76_en"],"acf":[],"yoast_head":"\r\n
UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE<\/title>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\" \/>\r\n<meta property=\"og:locale\" content=\"zh_TW\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE\" \/>\r\n<meta property=\"og:description\" content=\"When being asked to fill in our telephone number online […]\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\" \/>\r\n<meta property=\"og:site_name\" content=\"\u6a58\u4eba\u8a8c G!VOICE\" \/>\r\n<meta property=\"article:published_time\" content=\"2016-12-29T16:00:00+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2020-06-04T03:51:20+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\" \/>\r\n\t<meta property=\"og:image:width\" content=\"640\" \/>\r\n\t<meta property=\"og:image:height\" content=\"363\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\r\n<meta name=\"author\" content=\"admin_CAL\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005:\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin_CAL\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9810\u4f30\u95b1\u8b80\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 \u5206\u9418\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\"},\"author\":{\"name\":\"admin_CAL\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405\"},\"headline\":\"UI design clinic- Phone number formatting\",\"datePublished\":\"2016-12-29T16:00:00+00:00\",\"dateModified\":\"2020-06-04T03:51:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\"},\"wordCount\":1110,\"publisher\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#organization\"},\"image\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\",\"keywords\":[\"VOL. 76\"],\"articleSection\":[\"Columns\",\"On UX\"],\"inLanguage\":\"zh-TW\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\",\"name\":\"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE\",\"isPartOf\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\",\"datePublished\":\"2016-12-29T16:00:00+00:00\",\"dateModified\":\"2020-06-04T03:51:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#breadcrumb\"},\"inLanguage\":\"zh-TW\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\",\"contentUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif\",\"width\":640,\"height\":363},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u7576\u671f\u7e3d\u89bd\",\"item\":\"https:\/\/brand.gamania.com\/gvoice\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UI design clinic- Phone number formatting\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#website\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/\",\"name\":\"\u6a58\u4eba\u8a8c G!VOICE\",\"description\":\"Read it, Know it, Love it!\",\"publisher\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/brand.gamania.com\/gvoice\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-TW\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#organization\",\"name\":\"\u6a58\u4eba\u8a8c G!VOICE\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/2020\/03\/logo.png\",\"contentUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/2020\/03\/logo.png\",\"width\":320,\"height\":93,\"caption\":\"\u6a58\u4eba\u8a8c G!VOICE\"},\"image\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405\",\"name\":\"admin_CAL\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7395194d29138c710a5385102f95c8753874965e1e1b2c83e40c9c1cfe361c9d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7395194d29138c710a5385102f95c8753874965e1e1b2c83e40c9c1cfe361c9d?s=96&d=mm&r=g\",\"caption\":\"admin_CAL\"},\"url\":\"https:\/\/brand.gamania.com\/gvoice\/author\/calvin\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/","og_locale":"zh_TW","og_type":"article","og_title":"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE","og_description":"When being asked to fill in our telephone number online […]","og_url":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/","og_site_name":"\u6a58\u4eba\u8a8c G!VOICE","article_published_time":"2016-12-29T16:00:00+00:00","article_modified_time":"2020-06-04T03:51:20+00:00","og_image":[{"width":640,"height":363,"url":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","type":"image\/gif"}],"author":"admin_CAL","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005:":"admin_CAL","\u9810\u4f30\u95b1\u8b80\u6642\u9593":"5 \u5206\u9418"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#article","isPartOf":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/"},"author":{"name":"admin_CAL","@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405"},"headline":"UI design clinic- Phone number formatting","datePublished":"2016-12-29T16:00:00+00:00","dateModified":"2020-06-04T03:51:20+00:00","mainEntityOfPage":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/"},"wordCount":1110,"publisher":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#organization"},"image":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage"},"thumbnailUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","keywords":["VOL. 76"],"articleSection":["Columns","On UX"],"inLanguage":"zh-TW"},{"@type":"WebPage","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/","url":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/","name":"UI design clinic- Phone number formatting - \u6a58\u4eba\u8a8c G!VOICE","isPartOf":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#website"},"primaryImageOfPage":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage"},"image":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage"},"thumbnailUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","datePublished":"2016-12-29T16:00:00+00:00","dateModified":"2020-06-04T03:51:20+00:00","breadcrumb":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#breadcrumb"},"inLanguage":"zh-TW","potentialAction":[{"@type":"ReadAction","target":["https:\/\/brand.gamania.com\/gvoice\/en\/10588\/"]}]},{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#primaryimage","url":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","contentUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/VOL.76-Column-UI-1-1.gif","width":640,"height":363},{"@type":"BreadcrumbList","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10588\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u7576\u671f\u7e3d\u89bd","item":"https:\/\/brand.gamania.com\/gvoice\/"},{"@type":"ListItem","position":2,"name":"UI design clinic- Phone number formatting"}]},{"@type":"WebSite","@id":"https:\/\/brand.gamania.com\/gvoice\/#website","url":"https:\/\/brand.gamania.com\/gvoice\/","name":"\u6a58\u4eba\u8a8c G!VOICE","description":"Read it, Know it, Love it!","publisher":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/brand.gamania.com\/gvoice\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-TW"},{"@type":"Organization","@id":"https:\/\/brand.gamania.com\/gvoice\/#organization","name":"\u6a58\u4eba\u8a8c G!VOICE","url":"https:\/\/brand.gamania.com\/gvoice\/","logo":{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/logo\/image\/","url":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/2020\/03\/logo.png","contentUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/2020\/03\/logo.png","width":320,"height":93,"caption":"\u6a58\u4eba\u8a8c G!VOICE"},"image":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405","name":"admin_CAL","image":{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7395194d29138c710a5385102f95c8753874965e1e1b2c83e40c9c1cfe361c9d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7395194d29138c710a5385102f95c8753874965e1e1b2c83e40c9c1cfe361c9d?s=96&d=mm&r=g","caption":"admin_CAL"},"url":"https:\/\/brand.gamania.com\/gvoice\/author\/calvin\/"}]}},"_links":{"self":[{"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts\/10588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/comments?post=10588"}],"version-history":[{"count":5,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts\/10588\/revisions"}],"predecessor-version":[{"id":30666,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts\/10588\/revisions\/30666"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/media\/18395"}],"wp:attachment":[{"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/media?parent=10588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/categories?post=10588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/tags?post=10588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
ex\uff1a+886 7 123 4567
Country code + cellphone numbers(0 should be omitted for some countries)
ex\uff1a+886 910 123456<\/p>\n\n\n\n
Single and multiple fields are the most common methods to capture user inputs. Both methods have their pros and cons. <\/p>\n\n\n\n
Single Field Format<\/strong><\/p>\n\n\n\n A single field is placed after a description or an icon. This is the most common pattern, which requires less coding and less taps. However, long phone numbers may be difficult to read and users would not know if area codes or country codes are required. <\/p>\n\n\n\n Multiple fields format breaks the number into specific fields. For example, three separate fields are made for entering country code(+886), area code(022) and phone number(111111). With clear instructions, user errors can be largely reduced. However, Different digit numbers from different countries make it difficult to control phone number formats. Users cannot do copy-and-paste.<\/p>\n\n\n\n Design Tongue prefers single field format for its simplicity, but adding some useful details can enhance user experience.<\/p>\n\n\n\n 1. Field masking<\/strong><\/p>\n\n\n\n 1.1 Field Name<\/strong><\/p>\n\n\n\n It’s needless to say that field names are essential. Adding a small icon makes the interface more fun and enhances brand awareness.<\/p>\n\n\n\n \u25b2 To avoid transcription errors, phone numbers will automatically be placed in the correct format.<\/p>\n\n\n\n #\u3001x\u3001ext are used for extension numbers. <\/p>\n\n\n\n Automatically detects errors when users do not use numeric digits or the correct numbers of digits. <\/p>\n\n\n\n It can be frustrating to enter country codes on international websites. Knowing that only numbers are accepted in input fields, users often get confused whether they should use the plus sign. Those who have gotten used to it may forget that it is not needed to dialing, theose who seldom make international calls simply get confused. Without proper indications, users often have to open another window to check the correct country code, which is even more time-consuming on mobile devices.<\/p>\n\n\n\n Using a dropdown list is much more time-efficient. However, with a large number of countries displayed, special UI approaches can make choosing country codes easier.<\/p>\n\n\n\n 1. Flag dropdown: Many designers find flags useless due to their small sizes, I believe they still hold functional and aesthetic values. Flag icons can also help users can quickly scan through the list. After choosing the country code, the entered data will be automatically placed with the right format. ( DEMO https:\/\/goo.gl\/cxr8cx<\/a>\uff09\u3002 <\/p>\n\n\n\n Users may go insane if they have to choose from more than 200 countries! A more friendly approach would be prioritizing the most frequently used country codes. IP address also helps detecting country codes. <\/p>\n\n\n\n \u25b2Try here=> whoscall https:\/\/whoscall.com\/zh-TW\/<\/a><\/p>\n\n\n\n Adding search function adds efficiency to the dropdown list format. Designers should provide a mechanism that allows users to search for both country name and country code by typing names or numbers. This searching method is more intuitive and user-friendly. It’s the programmer’s job to do keyword matching and fuzzy search. <\/p>\n\n\n\n The search function is useful when users remember only parts of the country code and country name. But if users search with only the first letter(b for Brazil), the mechanism would show all data containing the letter(Albania).<\/p>\n\n\n\n If difficulty in programming is not a concern, the best thing to od is to offer search functions for both country name and country code. When a letter or a number is entered, matching country names are listed in order of relevance. <\/p>\n\n\n\n \u25b2 Modify whoscall elements<\/p>\n\n\n\n Zero is omitted when dialing international number on a cellphone, which is often forgotten. Reminders are oftern ignored by users. The best way is to accept numbers with or without 0 in the front-end and change them in the back-end . <\/p>\n\n\n\n Most service platforms offer online registrations on mobile devices. To make authentication process easier, it has become popular to use phone number as account name. Depending on company policies, users without cellphone numbers ot local numbers may not be able to register successfully. We suggest using e-mail address or user name as account name. We can also bing users’ registered phone numbers with their email addresses.<\/p>\n\n\n\n Entering date on mobile devices is inconvenient. Default setting should be made to simplify the action. The setting is techically supported.<\/p>\n\n\n\n Reference- 01 https:\/\/goo.gl\/OzU1Y6 (different mobile input types) \n\u25b2 When inputting numbers, number 0 to 9 are used.\n \n<\/p>\n\n\n\n \u25b2 When inputting phone numbers, signs(+ * #) can be added.<\/p>\n\n\n\n Is it worth the investment for companies to modify a simple input field? Design Tongue agrees that building important infrastructures is more important during the initial stage, but well-designed details can set your products apart. This article introduces methods based on user experience. Issues regarding programming have not been further discussed. Please do not hesitate to offer your precious opinions in the forum!<\/p>\n\n\n\n When being asked to fill in our telephone number online […]<\/p>\n","protected":false},"author":6,"featured_media":18395,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1971,1979],"tags":[1075],"class_list":["post-10588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-2-columns_en","category-2-1-columns_on_ux_en","tag-mz_vol_76_en"],"acf":[],"yoast_head":"\r\n<\/figure><\/div>\n\n\n\n
Multiple Fields Format<\/strong><\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n
Elegant Solution<\/strong><\/p>\n\n\n\n
1.2 Input format correction<\/strong><\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n<\/figure><\/div>\n\n\n\n<\/figure><\/div>\n\n\n\n<\/figure><\/div>\n\n\n\n
1.3 Error detection<\/strong><\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n
Dropdown list<\/strong><\/p>\n\n\n\n
2. Country names in English: English is the international language that is easy to be searched in alphabetical order.
3. Country name: Most users recognize the name of their own countries more quickly.
4. Country codes.<\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n
2-1 Prioritizing frequently used country codes<\/strong><\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n
2-2 Enquiring country codes<\/strong><\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n<\/figure><\/div>\n\n\n\n
3. Input mask<\/strong><\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n
4. Different options for registraion<\/strong><\/p>\n\n\n\n
5. Making numbers the only input option for mobile devices<\/strong><\/p>\n\n\n\n
Reference- 02 https:\/\/goo.gl\/pWpqYc (different mobile input types) <\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n<\/figure><\/div>\n\n\n\nConclusion<\/strong><\/h5>\n\n\n\n
Reference:
friendly format for Phone Numbers (https:\/\/goo.gl\/Dlm3hb<\/a>)
Multiple vs single field capture for phone number form input (https:\/\/goo.gl\/8O9EVS<\/a>)
Phone number Entry question (https:\/\/goo.gl\/Wa1u8i<\/a>)
E.123 formats (https:\/\/goo.gl\/9d9ppZ<\/a>)
If Satan was a web developer \u2026 (https:\/\/goo.gl\/0wKjnA<\/a>) <\/p>\n","protected":false},"excerpt":{"rendered":"