{"id":10591,"date":"2017-03-30T00:00:00","date_gmt":"2017-03-29T16:00:00","guid":{"rendered":"https:\/\/brand.gamania.com\/gvoice\/10591\/"},"modified":"2020-06-03T17:45:59","modified_gmt":"2020-06-03T09:45:59","slug":"whats-the-difference-between-ui-and-ux-lets-look-and-see","status":"publish","type":"post","link":"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/","title":{"rendered":"What’s the difference between UI and UX? Let’s look and see"},"content":{"rendered":"\n
\"\"<\/figure><\/div>\n\n\n\n

What’s the difference between UI and UX? Conversion Lab put together a series of comparison graphics from the internet, for a picture is worth a thousand words. Let’s take a look to see what the difference between UI and UX is. Those who already understand the differences can count how many graphics they’ve seen before.<\/p>\n\n\n\n

1. The upside-down ketchup bottle design takes into account the difficulty of getting ketchup out when nearly empty<\/strong><\/h5>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n

\u25b2Photo from: Techtic<\/p>\n\n\n\n

2. Lets start by using definitions to explain the differences between UI and UX, as they have quite different definitions<\/strong><\/h5>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n

\u25b2Photo from: Deptofmarketing<\/p>\n\n\n\n

3. By explaining the differences through professional delegation, we can see the similarities and differences in what each is responsible for.<\/strong><\/h5>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n

\u25b2Photo from: Asinthecity<\/p>\n\n\n\n

4. This graphic is more complicated, but you can generally still see the differences. The similarities are obvious, both are large and bearded\u00a0<\/strong><\/h5>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n

\u25b2Photo from: Abdevlabs<\/p>\n\n\n\n

The bottom graphic is the same as the top picture, the only difference is the style, where the designers go from overweight people with beards to Metrosexual<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

\u25b2Photo from: Uxdesigner21<\/p>\n\n\n\n

5. Let’s use what the designs can accomplish to explain the differences: although UX covers a large range of topics, almost no one can be a master at everything.<\/strong><\/h5>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n

\u25b2Photo from: Uxinterface<\/p>\n\n\n\n

6. This graphic handles the differences a little weird, but as we were collecting a lot of graphics, we figured we’d show you anyways.<\/strong><\/h5>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n

\u25b2Photo from: Linkis<\/p>\n\n\n\n

7. Lets use the two designs capabilities to differentiate them: except UI doesn’t have any professional Branding, so it must depend on how each company determines design positions<\/strong><\/h5>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n

\u25b2Photo from: Thecdm<\/p>\n\n\n\n

8. Let’s look at UI and UX from a product angle, UI is a part of a product, and UX is the experience of using a product<\/strong><\/h5>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n

\u25b2Photo from: Userexperiencerocks<\/p>\n\n\n\n

9. UI Design: Function. Usability design: Action. User Experience Design: Emotion<\/strong><\/h5>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n

\u25b2Photo from: Strategyanddesign<\/p>\n\n\n\n

10. UI is a tool for taking and using content, the experience users have using UI to experience content is UX<\/strong><\/h5>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n

\u25b2Photo from: Icarehealth<\/p>\n\n\n\n

Conversion Lab also made a graphic to explain the differences between UI and UX.<\/strong><\/h5>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n

UI is what is in front of the user, whereas UX is inside the user’s brain. UX designers not only pay attention to interface design, but also pay attention to everything that will impact the user’s experience, such as information structuring, interactive design, content, the user’s cognition, experience, needs, and values. After a UI designer finishes designing an interface, the UX designer’s job is not yet finished: the UX designer’s last job lies within the brain of the user. Therefore, UX designer’s are never able to see the end result of their job, and can only get a sense of whether the user’s experience was correct or not through interviews or through controlled UX research methods.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Some people say that UI design is not UX design. If the user’s experience is only influenced by UI, then UI is the same as UX. However, users don’t just UI, but a complete product. UI is part of product design. User experience also isn’t completely derived from the product alone, but may also be influenced by the situation in which the product is used, the user’s impression of the product’s brand, or other factors.<\/p>\n\n\n\n

Above are the graphics Conversion Lab put together to explain the differences between UI and UX. For more related information shared with you everyday, go to Conversion Lab’s Facebook page and subscribe.<\/p>\n\n\n\n





Article from: Conversion Lab<\/strong>
About Hans Shih
UX Planner & Researcher, primary job is to research and design user experience through easy-to-use, quantifiable methods.
If you wish to become a talented designer and Researcher, just as Alan Cooper emphasized, you must become a UX Researcher in order to effectively take user insights and incorporate them into your design. <\/p>\n","protected":false},"excerpt":{"rendered":"

What’s the difference between UI and UX? Conversi […]<\/p>\n","protected":false},"author":6,"featured_media":19456,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1971,1979],"tags":[1079],"class_list":["post-10591","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_77_en"],"acf":[],"yoast_head":"\r\nWhat's the difference between UI and UX? Let's look and see - \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\/10591\/\" \/>\r\n<meta property=\"og:locale\" content=\"zh_TW\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"What's the difference between UI and UX? Let's look and see - \u6a58\u4eba\u8a8c G!VOICE\" \/>\r\n<meta property=\"og:description\" content=\"What’s the difference between UI and UX? Conversi […]\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/\" \/>\r\n<meta property=\"og:site_name\" content=\"\u6a58\u4eba\u8a8c G!VOICE\" \/>\r\n<meta property=\"article:published_time\" content=\"2017-03-29T16:00:00+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2020-06-03T09:45:59+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/vol.77\/VOL.77-Columns-UX\u7d93\u9a57-1-13.png\" \/>\r\n\t<meta property=\"og:image:width\" content=\"726\" \/>\r\n\t<meta property=\"og:image:height\" content=\"401\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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=\"3 \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\/10591\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/\"},\"author\":{\"name\":\"admin_CAL\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405\"},\"headline\":\"What’s the difference between UI and UX? Let’s look and see\",\"datePublished\":\"2017-03-29T16:00:00+00:00\",\"dateModified\":\"2020-06-03T09:45:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/\"},\"wordCount\":654,\"publisher\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#organization\"},\"image\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/vol.77\/VOL.77-Columns-UX\u7d93\u9a57-1-13.png\",\"keywords\":[\"VOL. 77\"],\"articleSection\":[\"Columns\",\"On UX\"],\"inLanguage\":\"zh-TW\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/\",\"name\":\"What's the difference between UI and UX? Let's look and see - \u6a58\u4eba\u8a8c G!VOICE\",\"isPartOf\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/vol.77\/VOL.77-Columns-UX\u7d93\u9a57-1-13.png\",\"datePublished\":\"2017-03-29T16:00:00+00:00\",\"dateModified\":\"2020-06-03T09:45:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/#breadcrumb\"},\"inLanguage\":\"zh-TW\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-TW\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/#primaryimage\",\"url\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/vol.77\/VOL.77-Columns-UX\u7d93\u9a57-1-13.png\",\"contentUrl\":\"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/vol.77\/VOL.77-Columns-UX\u7d93\u9a57-1-13.png\",\"width\":726,\"height\":401},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u7576\u671f\u7e3d\u89bd\",\"item\":\"https:\/\/brand.gamania.com\/gvoice\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What’s the difference between UI and UX? Let’s look and see\"}]},{\"@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":"What's the difference between UI and UX? Let's look and see - \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\/10591\/","og_locale":"zh_TW","og_type":"article","og_title":"What's the difference between UI and UX? Let's look and see - \u6a58\u4eba\u8a8c G!VOICE","og_description":"What’s the difference between UI and UX? Conversi […]","og_url":"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/","og_site_name":"\u6a58\u4eba\u8a8c G!VOICE","article_published_time":"2017-03-29T16:00:00+00:00","article_modified_time":"2020-06-03T09:45:59+00:00","og_image":[{"width":726,"height":401,"url":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/vol.77\/VOL.77-Columns-UX\u7d93\u9a57-1-13.png","type":"image\/png"}],"author":"admin_CAL","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005:":"admin_CAL","\u9810\u4f30\u95b1\u8b80\u6642\u9593":"3 \u5206\u9418"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/#article","isPartOf":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/"},"author":{"name":"admin_CAL","@id":"https:\/\/brand.gamania.com\/gvoice\/#\/schema\/person\/4685ff8d01aee7a0b2ad40de8ef1d405"},"headline":"What’s the difference between UI and UX? Let’s look and see","datePublished":"2017-03-29T16:00:00+00:00","dateModified":"2020-06-03T09:45:59+00:00","mainEntityOfPage":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/"},"wordCount":654,"publisher":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#organization"},"image":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/#primaryimage"},"thumbnailUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/vol.77\/VOL.77-Columns-UX\u7d93\u9a57-1-13.png","keywords":["VOL. 77"],"articleSection":["Columns","On UX"],"inLanguage":"zh-TW"},{"@type":"WebPage","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/","url":"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/","name":"What's the difference between UI and UX? Let's look and see - \u6a58\u4eba\u8a8c G!VOICE","isPartOf":{"@id":"https:\/\/brand.gamania.com\/gvoice\/#website"},"primaryImageOfPage":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/#primaryimage"},"image":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/#primaryimage"},"thumbnailUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/vol.77\/VOL.77-Columns-UX\u7d93\u9a57-1-13.png","datePublished":"2017-03-29T16:00:00+00:00","dateModified":"2020-06-03T09:45:59+00:00","breadcrumb":{"@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/#breadcrumb"},"inLanguage":"zh-TW","potentialAction":[{"@type":"ReadAction","target":["https:\/\/brand.gamania.com\/gvoice\/en\/10591\/"]}]},{"@type":"ImageObject","inLanguage":"zh-TW","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/#primaryimage","url":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/vol.77\/VOL.77-Columns-UX\u7d93\u9a57-1-13.png","contentUrl":"https:\/\/brand.gamania.com\/gvoice\/wp-content\/uploads\/gvoice\/db\/editor\/vol.77\/VOL.77-Columns-UX\u7d93\u9a57-1-13.png","width":726,"height":401},{"@type":"BreadcrumbList","@id":"https:\/\/brand.gamania.com\/gvoice\/en\/10591\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u7576\u671f\u7e3d\u89bd","item":"https:\/\/brand.gamania.com\/gvoice\/"},{"@type":"ListItem","position":2,"name":"What’s the difference between UI and UX? Let’s look and see"}]},{"@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\/10591","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=10591"}],"version-history":[{"count":4,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts\/10591\/revisions"}],"predecessor-version":[{"id":30589,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/posts\/10591\/revisions\/30589"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/media\/19456"}],"wp:attachment":[{"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/media?parent=10591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/categories?post=10591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brand.gamania.com\/gvoice\/wp-json\/wp\/v2\/tags?post=10591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}