{"id":1025,"date":"2023-11-01T13:17:08","date_gmt":"2023-11-01T06:17:08","guid":{"rendered":"https:\/\/international.binus.ac.id\/information-system\/?p=1025"},"modified":"2023-11-01T13:17:08","modified_gmt":"2023-11-01T06:17:08","slug":"whats-the-difference-between-ux-and-ui-design","status":"publish","type":"post","link":"https:\/\/international.binus.ac.id\/information-system\/2023\/11\/01\/whats-the-difference-between-ux-and-ui-design\/","title":{"rendered":"What\u2019s the Difference between UX and UI Design?"},"content":{"rendered":"<p style=\"text-align: justify\"><strong>What is UI?<\/strong><\/p>\n<p style=\"text-align: justify\">User interface (UI) is anything a user may interact with in using a digital product or service. It focused on how a product\u2019s look and function. This includes everything from screens and touchscreens, keyboards, sounds and even lights. \u00a0The most effective UI designs are simple, consistent, invisible and empower the user.<\/p>\n<p style=\"text-align: justify\">In website creation, UI plays an important role in a user\u2019s decision to stay on a website or leave immediately. As with the growth of technology, UI designer\u2019s role has evolved as systems, preferences, expectations, and accessibility. Now UI designers work not just on computer interfaces, but mobile phones, augmented and virtual reality, and even \u201cinvisible\u201d or screenless interface (also referred to as zero UI) like voice, gesture and light. The goal of a UI designer is to create a user interface that is engaging and creates an emotional response from the user to make the product more beautiful.<\/p>\n<p style=\"text-align: justify\"><strong>What is UX?<\/strong><\/p>\n<p style=\"text-align: justify\">User experience (UX) refers to a person\u2019s interactions with a product, application, or operating systems. UX evolved as a result of the improvements to UI. The term user experience was first coined by Don Norman as <em>\u201cUser experience encompasses all aspects of the end-user\u2019s interaction with the company, its services, and its products\u201d. <\/em>UX design is the process of researching, developing, and improving all aspects of user interaction with a company\u2019s product to satisfy its users.<\/p>\n<p style=\"text-align: justify\">UX design contributes to a product that provides an effective user experience. To understand what makes an experience a good one, Peter Moreville developed a great visual to highlight what goes into effective UX design.<\/p>\n<p style=\"text-align: justify\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1026\" src=\"http:\/\/international.binus.ac.id\/information-system\/files\/2023\/11\/UX-Rein.png\" alt=\"\" width=\"283\" height=\"283\" \/><\/p>\n<p style=\"text-align: center\"><em>Source: Peter Moreville \u201cUsability Honeycomb\u201d<\/em><\/p>\n<p style=\"text-align: justify\">The \u2018Usability Honeycomb\u2019 has become the foundation for best practices for UX professionals to help guide their efforts across multiple touchpoints with users. Designing a UX means defining the way a product operates and how it meets a user\u2019s needs. A good UX makes website navigation simple even for first time users. UX design takes place during the development stage and focuses on satisfying a customer\u2019s experience through ease-of-use as well as on improving the quality of every interaction between a user and the company.<\/p>\n<p style=\"text-align: justify\"><strong>What is the difference between UX and UI?<\/strong><\/p>\n<p style=\"text-align: justify\">UX and UI design are both crucial to product and work closely together, however the roles themselves are quite different. A great product experience starts with UX followed by UI. UI design is the driving force of UX design.<\/p>\n<p style=\"text-align: justify\">UX design is more analytical and technical field, while UI design is more to graphic design. UX design helps users accomplish meaningful tasks across platforms and services. UI design makes compelling and aesthetically pleasing interfaces that connect with humans. Something that looks great but difficult to use is an example of great UI and poor UX. Whereas something that is very usable but looks terrible is an example of great UX and poor UI.<\/p>\n<p style=\"text-align: justify\"><strong>Conclusion<\/strong><\/p>\n<p style=\"text-align: justify\">UI is how things <strong>look<\/strong>, and UX is how things <strong>work<\/strong>.<\/p>\n<p style=\"text-align: justify\">UX is a <strong>process<\/strong>, while UI is a <strong>deliverable<\/strong>.<\/p>\n<p style=\"text-align: justify\">UX makes interface <strong>useful<\/strong>, UI makes interfaces <strong>beautiful<\/strong>.<\/p>\n<p style=\"text-align: justify\">[editor RS]<\/p>\n<p style=\"text-align: justify\">References:<\/p>\n<p style=\"text-align: justify\"><a href=\"https:\/\/careerfoundry.com\/en\/blog\/ux-design\/the-difference-between-ux-and-ui-design-a-laymans-guide\/\">https:\/\/careerfoundry.com\/en\/blog\/ux-design\/the-difference-between-ux-and-ui-design-a-laymans-guide\/<\/a><\/p>\n<p style=\"text-align: justify\"><a href=\"https:\/\/www.usertesting.com\/blog\/ui-vs-ux\/\">https:\/\/www.usertesting.com\/blog\/ui-vs-ux\/<\/a><\/p>\n<p style=\"text-align: justify\"><a href=\"https:\/\/www.freecodecamp.org\/news\/whats-the-difference-between-ux-and-ui-design-2ca8d107de14\/\">https:\/\/www.freecodecamp.org\/news\/whats-the-difference-between-ux-and-ui-design-2ca8d107de14\/<\/a><\/p>\n<p style=\"text-align: justify\"><a href=\"https:\/\/careerfoundry.com\/en\/blog\/ux-design\/5-big-differences-between-ux-and-ui-design\/\">https:\/\/careerfoundry.com\/en\/blog\/ux-design\/5-big-differences-between-ux-and-ui-design\/<\/a><\/p>\n<p style=\"text-align: justify\"><a href=\"https:\/\/uxplanet.org\/difference-between-ui-ux-6324fc7402ba\">https:\/\/uxplanet.org\/difference-between-ui-ux-6324fc7402ba<\/a><\/p>\n<p style=\"text-align: justify\"><a href=\"https:\/\/www.mockplus.com\/blog\/post\/difference-between-ui-and-ux\">https:\/\/www.mockplus.com\/blog\/post\/difference-between-ui-and-ux<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is UI? User interface (UI) is anything a user may interact with in using a digital product or service. It focused on how a product\u2019s look and function. This includes everything from screens and touchscreens, keyboards, sounds and even lights. \u00a0The most effective UI designs are simple, consistent, invisible and empower the user. In [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31],"tags":[],"class_list":["post-1025","post","type-post","status-publish","format-standard","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/international.binus.ac.id\/information-system\/wp-json\/wp\/v2\/posts\/1025"}],"collection":[{"href":"https:\/\/international.binus.ac.id\/information-system\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/international.binus.ac.id\/information-system\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/information-system\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/information-system\/wp-json\/wp\/v2\/comments?post=1025"}],"version-history":[{"count":1,"href":"https:\/\/international.binus.ac.id\/information-system\/wp-json\/wp\/v2\/posts\/1025\/revisions"}],"predecessor-version":[{"id":1027,"href":"https:\/\/international.binus.ac.id\/information-system\/wp-json\/wp\/v2\/posts\/1025\/revisions\/1027"}],"wp:attachment":[{"href":"https:\/\/international.binus.ac.id\/information-system\/wp-json\/wp\/v2\/media?parent=1025"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/international.binus.ac.id\/information-system\/wp-json\/wp\/v2\/categories?post=1025"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/international.binus.ac.id\/information-system\/wp-json\/wp\/v2\/tags?post=1025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}