UI/UX presentation by Roshan Karunarathna

Editor's Notes

• #13: The “UI” in UI design stands for “user interface.” The user interface is the graphical layout of an application. It consists of the buttons users click on, the text they read, the images, sliders, text entry fields, and all the rest of the items the user interacts with. This includes screen layout, transitions, interface animations and every single micro-interaction. Any sort of visual element, interaction, or animation must all be designed. This job falls to UI designers. They decide what the application is going to look like. They have to choose color schemes and button shapes — the width of lines and the fonts used for text. UI designers create the look and feel of an application’s user interface. “UX” stands for “user experience.” A user’s experience of the app is determined by how they interact with it. Is the experience smooth and intuitive or clunky and confusing? Does navigating the app feel logical or does it feel arbitrary? Does interacting with the app give people the sense that they’re efficiently accomplishing the tasks they set out to achieve or does it feel like a struggle? User experience is determined by how easy or difficult it is to interact with the user interface elements that the UI designers have created. So UX designers are also concerned with an application’s user interface, and this is why people get confused about the difference between the two. But whereas UI designers are tasked with deciding how the user interface will look, UX designers are in charge of determining how the user interface operates. They determine the structure of the interface and the functionality. How it’s organized and how all the parts relate to one another. In short, they design how the interface works. If it works well and feels seamless, the user will have a good experience. But if navigation is complicated or unintuitive, then a lousy user experience is likely. UX designers work to avoid the second scenario.
• #17: UI stands for User Interface while UX stands for User Experience. First of all, a lot of people consider it to be the same which is wrong. They are highly related but quite different. UI is more related to designing aspect while UX is more related to analysis and technical aspects. There are many differences between UI/UX designer and UI/UX engineer even though they are likely to work together in a company. In short, the role of UI/UX designer is to research and design while the role of UI/UX engineer is to design and code it out. But a UI/UX is not necessary an application developer as an application developer mainly deals with the back-end development while UI/UX engineer deals with the front-end development
• #18: UI/UX Designer – The best way to understand the difference between UI/UX designer and UI/UX developer is to understand the skill set they need to possess. Coming first to the UI/UX designer, as stated earlier, they need to research and design. In other words, they need to understand and analyze the needs of the users and formulate concept and design ideas that those users will love to use. Therefore, they need to have an understanding of online users’ behaviors, psychology, and all the relevant aspects. In fact, one needs to walk in the shoes of the online users and get a complete hold of what is cooking inside their heads while they are browsing. But that is all non-technical skills. For a UI/UX designer, the next skill set is more important and they are technical. It is related to graphic designing. A UI/UX designer needs to know all the industrial-standard design tools especially the ones that are commonly used. Not just that, he should have a complete idea about the professional designing process that involves the UI/UX engineer as well as the application developers. The wireframes of the application are designed by UI/UX designer which form the base on any application. Therefore, it is a combinational skill set of research, analysis, and design. UI/UX Engineer – As stated earlier, the role of UI/UX engineer is more practical and technical. After the research and analysis part is done by the UI/UX designer, he collaborates with the UI/UX designer to create the wireframe and also understand the thought process and the concepts and reasons behind all the designs. He has to pay attention to the fact the design looks good and it is functional on all browsers or operating systems or machine configurations. A UI/UX designer may not have any idea whether what he is designing will work on all browsers or not and hence, the collaboration is effective to make the final design that works for the UI/UX engineer as well as the application developer. After the collaboration is done, it is the duty of the engineer to translate the wireframes and all the concepts into the practical output. Therefore, apart from having a design skill set, he needs to know the programming languages used to design the front-end of any application. Among the front-end programming languages, HTML+JS+CSS are a must. Then it depends on the application as well as the technology the company uses for the front-end development. It can also depend on the requirement of the clients. Sometimes, the job of turning wireframes into HTML layouts is done by UI.UX designer and the UI/UX developer fine tunes them so that the application developer can start developing the back-end and integrate with the front-end seamlessly. He has to keep in mind how the designs of front-end he is doing are going to behave in different browsers, how much time it will take to uploading, how many resources it will consume, how the users will respond and much more.
• #19: A UI/UX designer is more concerned with the look and feel of the interface. He is into customer surveying, user analysis, and then doing design research of the competitors, and then conceptualizing the design ideas. After that, he is concerned with the branding and graphics development. On the other hand, a UI/UX engineer is concerned with responsiveness and interactivity. The first thing he pays attention to is UI prototyping. Once that is out of the way, he looks into the interactivity and animation aspects. The adaption to all devices, platforms, and browsers are taken care of and the cons of the design aspects are stroke off. Then he starts the implementation after getting the application developer on board. In technical terms, the job description of UI/UX designer is research, information design, and visual design. The job description of UI/UX engineer is visual design, interactive design, and front-end development. Due to the front-end part, the pay of UI/UX engineers is more than UI/UX designer based on similar years of experience. You can start as a UI/UX designer and make a transition to UI/UX engineer with enough experience.
• #20: With that said, a UX engineer plays an integral part in the end-user’s interaction with a digital product. Without interactivity, a user cannot complete a task. This ranges from clicking a button with a mouse or swiping using a finger. The UX engineer is responsible for making sure that the user is able to do both. Not only that, but they also must anticipate the appropriate interactivity. This means determining if a user should double-tap, or tap and hold, to activate a feature within an application. To make that decision, a UX engineer must be able to communicate with the UX design team. Engineers use their knowledge to identify how a user currently behaves when interacting with specific design elements, which informs UX designers as they conduct usability testing to evaluate the success of an interaction once it’s developed. A UX engineer’s focus on technical elements of a user’s experience is part of what separates them from other types of software engineers. Decisions about what to build and how it’s built are rooted in user research. This data either comes directly from the UX engineer’s conversations with users or by analyzing how those users engage with a prototype. The UX engineer’s job is to reduce any potential friction through the final production stages of the digital product. 
• #25: The difference between the two is that a UX designer is more involved in user research, making sure they’ve considered the look and feel of a product before they actually start designing. They worry about things like color palettes, fonts, and icons. With that said, a UX engineer plays an integral part in the end-user’s interaction with a digital product. Without interactivity, a user cannot complete a task. This ranges from clicking a button with a mouse or swiping using a finger. The UX engineer is responsible for making sure that the user is able to do both. Not only that, but they also must anticipate the appropriate interactivity. This means determining if a user should double-tap, or tap and hold, to activate a feature within an application. To make that decision, a UX engineer must be able to communicate with thus design team. Engineers use their knowledge to identify how a user currently when interacting with specific design elements, which informs UX designers as they conduct usability testing to evaluate the success of an interaction once it’s developed. A UX engineer’s focus on technical elements of a user’s experience is part of what separates them from other types of software engineers. Decisions about what to build and how it’s built are rooted in user research. This data either comes directly from thus engineer’s conversations with users or by analyzing how those users engage with a prototype. The UX engineer’s job is to reduce any potential friction through the final production stages of the digital product. Roles and responsibilities UX engineers are not only advocates for the UX process in the engineering realm, but they are also champions of properly coded digital products. They are the bridge between the designers and software engineers. Ultimately, a UX engineer is a front-end engineer who facilitates effective design collaboration between the design and engineering teams. Much like a UX designer, their job is to turn a complex problem into a more intuitive solution. They should understand the full scope of a project and know what the user needs to complete a task. They should be familiar with the language of basic Guidelines, as well as the technical requirements to build a digital product. A UX engineer is also an integral part of the designer-developer handoff. The UX engineer can help at this point in the process by communicating on behalf of both4/18/2021 What Is a UX Engineer & How to Become One | Adobe XD Ideas https://xd.adobe.com/ideas/career-tips/what-is-ux-engineer/ 7/11 teams. Additional responsibilities of a UX engineer include: User research Concept design Prototyping Advanced visual design (mock-ups) Usability tests User journey analysis
• #27: One important element to point out is that within the UX Engineer field, we have two “lenses” or concentrations — the design and engineering lens. But regardless of title or lens, we are ultimately the glue between design and engineering.
• #29: All UX Engineers have four common traits: A solid understanding of programming fundamentals A strong advocacy for UX, adept at UI implementation Great collaboration skills to work alongside design, research, and product partners Bi-lingual in pixels and pointers
• #30: 1: HTML, CSS, & JavaScript HTML, CSS, and JavaScript are important skills for a good UX engineer to master in order to understand how products work inside and out, and create innovative, useful products for users. Mastering them will help you learn other programming languages and frameworks, like Semantic HTML, Package Managers (NPM), jQuery, Angular, Vue, and React, which are all useful when creating more complex digital products. While frameworks and languages change over time, a solid understanding of the basics will help you strengthen your technical skills and adapt when needed. 2: Version control The UX process is iterative, and changes will always occur when building a digital product. Git and Team Foundation Server (TFS) are platforms that help you manage those changes, so it’s helpful to understand how to use them and other similar platforms. Another bonus soft skill here: being flexible! If you’re not ready for the constant changes, you might struggle as a UX engineer. 3: Testing and debugging Testing is important for a UX engineering role because it helps catch and fix issues before a product ships. UX designers are also responsible for testing their prototypes. However, the goal of a UX engineer is different; they are concerned, first and foremost, with how well the product functions technically. Testing a product lets a UX engineer know if adjustments need to be made to the code or if a new code needs to be written. Testing also allows for a level of interactivity with the user that may have been overlooked during development. A UX engineer is responsible for producing prototypes that require coding and cannot be created using design software. This level of front-end development is valuable and informative to the final development. When prototyping, one of the tools that is unique to a UX engineer is Chrome's Developer Tools (Dev Tools). It’s a simple yet impactful tool designed to help developers edit their code and view the changes before making final adjustments. It’s a form of web4/18/2021 What Is a UX Engineer & How to Become One | Adobe XD Ideas https://xd.adobe.com/ideas/career-tips/what-is-ux-engineer/ 5/11 prototyping tool that doesn’t involve the user but can result in much better user experiences. 4: UI design principles Although it’s not the biggest skill requirement for a UX engineer, having an understanding of user interface (UI) design principles is highly valued. This doesn’t mean a UX engineer is responsible for creating wireframes; it means that they are equipped with the vocabulary and understanding of UI design principles, allowing them to do their job more efficiently. It also helps them communicate better with UX designers, which is a big part of their job. For example, a common UI design principle is the sizing and spacing of buttons on digital interfaces. Buttons are usually spaced between 12 to 48 pixels, and the touch target or the actual size of the button should be a minimum of 48dp x 48dp, with 8dpbetween the different touchpoints. Knowing these standard dimensions helps a UX engineer build a more successful product. The goal of employing UI principles is to ensure that users can quickly get familiar with your product, helping them engage more intuitively and thereby reducing the number of errors in the final product, something that is paramount for the UX engineer. 5: Empathy If you ask anyone in UX what their “superpower” is, many may say empathy. At its core, the field of UX is about understanding your target user and then designing according to what will truly benefit their life. Empathy in particular is the ability to understand and share the feelings of another. Why is this so important? UX engineers draw from their empathetic observations to communicate with UX designers as advocates for both the user and the engineering team and its capabilities. This soft skill is vital and oftentimes overlooked. Working effectively with others is the roadmap to success; not having empathy can cause friction in communication and ultimately negatively impact the end user’s experience. Empathy