{"id":30167,"date":"2021-12-13T10:19:06","date_gmt":"2021-12-13T10:19:06","guid":{"rendered":"https:\/\/simyasolutions.com\/?p=30167"},"modified":"2022-02-09T10:34:32","modified_gmt":"2022-02-09T10:34:32","slug":"example-of-good-design-and-bad-design-ux-ui-design","status":"publish","type":"post","link":"https:\/\/simyasolutions.com\/design\/example-of-good-design-and-bad-design-ux-ui-design\/","title":{"rendered":"Example of Good design and Bad Design &#8211; UX UI Design"},"content":{"rendered":"<p>Have you ever used a site on the internet or an application on your smartphone? Then, there is an impression or maybe you&#8217;re annoyed by using it?<br \/>\nThat signals are showing whether it has a good application design or it should be improved.<\/p>\n<p>In this article, I have compiled some examples from various blogs to present.<\/p>\n<p class=\"title\">Actually, UX is presenting everywhere; Real-life UX.<br \/>\nI believe that quite a number of people misunderstand these elevator buttons.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.pinimg.com\/564x\/6c\/5f\/b3\/6c5fb33c2223b8bacca81f9540920df0.jpg\" \/><\/p>\n<p>A good UX has to show users right away what the purpose of the design is.<br \/>\nFor example, the design of the door, if we choose a flat door handle, users will immediately understand that they need to push.<br \/>\nOr handrail door, the meaning is pulling.<br \/>\n<img decoding=\"async\" src=\"https:\/\/i.pinimg.com\/564x\/a4\/ea\/c3\/a4eac36bdc6e97cb99d07d61f147f17f.jpg\" \/><\/p>\n<h2>Using clear, understandable language<\/h2>\n<p>Below is UX\/UI delete account popup. The picture shows a good and bad example that which one is effective to let users understand immediately that if we confirm the account deletion, what information will be lost?<\/p>\n<h5>#1<\/h5>\n<p><img decoding=\"async\" src=\"https:\/\/i.pinimg.com\/564x\/49\/4f\/2e\/494f2e97d656006e48fe06e7bf85cf2e.jpg\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>To be more clear, here is another one. In the example below, the controller on the right uses technical engineering language to describe the action an autonomous robot is going to take. On the left, the action is translated into recognizable, human-readable language. The one on the left is less prone to misunderstanding.<\/p>\n<h5>#2<\/h5>\n<div style=\"width: 1010px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xd.adobe.com\/ideas\/wp-content\/uploads\/2021\/07\/1618031450-1.png\" alt=\"In a software UI for a manufacturing plant, good ux provides clear understandable language: 'deploy vehicle', while bad UX overcomplicates the user option: 'initiate autonomous control sequence.'\" width=\"1000\" height=\"500\" data-wp-editing=\"1\" \/><p class=\"wp-caption-text\">https:\/\/xd.adobe.com\/ideas\/process\/ui-design\/good-bad-ux-design-examples\/<\/p><\/div>\n<h2><\/h2>\n<h2>Design materials<\/h2>\n<p>Here is the last point which is design material. It can also make our UX design better.<br \/>\nIn this example, the information shows the featured app update status.<\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/i.pinimg.com\/564x\/86\/ef\/c7\/86efc79c1ca9cd425e986d90206307a8.jpg\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Let&#8217;s look at a good example.<\/p>\n<ul>\n<li>Button design has different styling between &#8220;Update&#8221; that solid button is used<\/li>\n<li>Apply the outline style button with &#8220;Open&#8221;<\/li>\n<li>Users can understand easily what&#8217;s the status right now.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>Hope this article helps you understand better why UX\/UI is really important.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever used a site on the internet or an application on your smartphone? Then, there is an impression or maybe you&#8217;re annoyed by using<span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>\n","protected":false},"author":16,"featured_media":30179,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[62],"tags":[],"_links":{"self":[{"href":"https:\/\/simyasolutions.com\/wp-json\/wp\/v2\/posts\/30167"}],"collection":[{"href":"https:\/\/simyasolutions.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/simyasolutions.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/simyasolutions.com\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/simyasolutions.com\/wp-json\/wp\/v2\/comments?post=30167"}],"version-history":[{"count":6,"href":"https:\/\/simyasolutions.com\/wp-json\/wp\/v2\/posts\/30167\/revisions"}],"predecessor-version":[{"id":30281,"href":"https:\/\/simyasolutions.com\/wp-json\/wp\/v2\/posts\/30167\/revisions\/30281"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/simyasolutions.com\/wp-json\/wp\/v2\/media\/30179"}],"wp:attachment":[{"href":"https:\/\/simyasolutions.com\/wp-json\/wp\/v2\/media?parent=30167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/simyasolutions.com\/wp-json\/wp\/v2\/categories?post=30167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/simyasolutions.com\/wp-json\/wp\/v2\/tags?post=30167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}