The presentation I used in the two sessions I did on introduction to UI/UX Engineering for undergraduate students in the Vavuniya Campus of the University of Jaffna and the Trincomalee Campus, Eastern University.
4. UI/UX Engineering - Roshan Karunarathna 4
As Rahul Varshney, co-creator of Foster.fm puts it:
“User Experience (UX) and User Interface (UI) are some of the most confused and misused
terms in our field. A UI without UX is like a painter slapping paint onto a canvas without
thought; while UX without UI is like the frame of a sculpture with no paper Mache on it. A
great product experience starts with UX followed by UI. Both are essential for the product’s
success.”
“UI is the saddle, the stirrups, and the reins. UX is the feeling you get being able to ride the
horse.”
— Dain Miller, Web Developer
6. Definition
• User interface (UI) design or user interface engineering is
the design of user interfaces for machines and software,
such as computers, home appliances, mobile devices, and
other electronic devices, with the focus on
maximizing usability and the user experience.
• The aim is to make the user’s interaction as simple and
efficient as possible, in terms of accomplishing user goals .
- Wikipedia
UI/UX Engineering - Roshan Karunarathna 6
7. UI/UX Engineering - Roshan Karunarathna 7
.. The design of user interfaces for different software or machines with
a clear purpose
Make a better experience for users when navigating through
your app, platformor website.
8. UI/UX Engineering - Roshan Karunarathna 8
• The visual elements of a product or digital experience.
• A translation of a brand’s vision into a product or a software.
• Common UIs are on:
the phone, computer, or tablet; at the ATM; and in your car.
10. Definition
• User experience design (UXD, UED, or XD) is the process
of supporting user behavior[1] through usability, usefulness,
and desirability provided in the interaction with a product.[2]
• User experience design encompasses traditional human–
computer interaction (HCI) design and extends it by
addressing all aspects of a product or service as perceived
by users.
- Wikipedia
UI/UX Engineering - Roshan Karunarathna 10
11. UI/UX Engineering - Roshan Karunarathna 11
.. UX Design is studying user behaviour and understanding user
motivations with the goal of designing better digital experiences.
Make a better experience for users by understanding
their behaviour and how they interact with a product or a
software.
16. 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. .
UI/UX Engineering - Roshan Karunarathna 16
17. Skill Requirements
UI/UX Designer
• understand and analyze the needs of the users
and formulate concept and design ideas that those
users will love to use.
• graphic designing - needs to know all the
industrial-standard design tools especially the
ones that are commonly used.
• should have a complete idea about the
professional designing process that involves the
UI/UX engineer as well as the application
developers.
UI/UX Engineer
• more practical and technical.
• 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.
• Translate the wireframes and all the concepts into the
practical output
• , apart from having a design skill set, he needs to
know the programming languages used to design the
front-end of any application.
UI/UX Engineering - Roshan Karunarathna 17
18. Aspects Addressed
UI/UX Designer
• research,
• information design, and
• visual design
UI/UX Engineer
• visual design,
• interactive design, and
• front-end development
UI/UX Engineering - Roshan Karunarathna 18
19. The term UX, or user experience, was coined
by Don Norman, a pioneer in the field of UX
design.
He defines UX as the experience that
includes “all aspects of the end-user’s
interaction with the company, its services,
and its products.”
24. UI/UX Engineering - Roshan Karunarathna 24
• A UX engineer (UX= user experience) is usually a front-end engineer who works on a
design team, facilitating collaboration between engineering and design. UX engineers
bring together technical know-how and design aesthetics. They partner with
programmers, researchers, designers, and more to conceptualize to deliver an effective
user experience.
• A UX engineer often has the skillset of a front-end engineer but also the working know-
how of UX design principles. Don’t be confused though; a UX engineer is not a UX
designer.
30. Few UX designers have the same academic and work background. In
fact, the majority of UX Engineers have varying job titles! You do not
need an educational degree to be a UX Engineer. Although a
Bachelor’s degree in Computer Science or IT may be beneficial.
In reality, most UX Engineer are self-taught. They are passionate
about the role and enjoy learning new developing technologies.
Additionally, certifications/online diplomas are an excellent resource
to help boost your career.
UI/UX Engineering - Roshan Karunarathna 30
35. ● What is the problem you are trying to
solve?
● What are your user needs?
● How does your product fit within a
business context (product
objectives)?
UI/UX Engineering - Roshan Karunarathna 35
37. ● Defining functional specifications and content
requirements of your platform.
● What are the features, and how might
you prioritize them?
● The challenge is prioritizing features while
minimizing tradeoffs.
UI/UX Engineering - Roshan Karunarathna 37
39. ● Information architecture is
concerned with how the information
within an app is organized.
● User flows map out the specific journeys
users embark on through the app to help
solve their specific need
UI/UX Engineering - Roshan Karunarathna 39
41. ● Achieve the structure of an
interface design and information
design.
● UX or Product Designers start designing,
testing, and iterating on wireframes.
UI/UX Engineering - Roshan Karunarathna 41
43. ● Communicate the brand, product, value
and functionality in one cohesive image.
● UI Designers and Visual
Designers start their work.
● Tools: Adobe XD, Sketch,
Photoshop, Figma etc
UI/UX Engineering - Roshan Karunarathna 43
44. What makes good UI?
UI Design Core
Principles
UI/UX Engineering - Roshan Karunarathna 44
45. ● There’s nothing worse than ambiguity in an app.
● Understand which design might help a user best achieve their goals.
● Let the user feel confident while navigating through your app.
UI/UX Engineering - Roshan Karunarathna 45
46. ● Every action needs a reaction.
● This includes Loading states, Error and Success messages etc
● Let the user know what is going on !
UI/UX Engineering - Roshan Karunarathna 46
48. ● Be consistent in you UI elements.
● Once your users start learning how to use a product, they shouldn’t have to relearn it.
● Good consistency and structure will make your users feel at home.
UI/UX Engineering - Roshan Karunarathna 48
50. ● Innovation is awesome and encouraged, but it shouldn’t have to be
at the expense of the user experience
● Many of these established design principles are grounded in
human perception.
UI/UX Engineering - Roshan Karunarathna 50
54. ● The arrangement of elements in a way that implies relative importance
● The way we perceive information is affected by several factors that contribute to how we
rank the hierarchy of the content within the layout.
● Typography, White space and Colors are part of this visual hierarchy
UI/UX Engineering - Roshan Karunarathna 54
55. ● The two primary factors that makes a good typography are: Legibility and
Readability.
● Legibility depends on the typeface. It is how each individual letterform is
distinguishable from one another.
● Readability is determined by how you manipulate a particular typeface to make it
easier to comprehend.
UI/UX Engineering - Roshan Karunarathna 55
57. NEVER center
large Blocks of
copy.
The eye knows
exactly where the
next line begins.
UI/UX Engineering - Roshan Karunarathna 57
58. ● White space helps with readability and comprehension immensely.
● Readers find it easier to focus on and process generously spaced content.
● White space can be used to create strong hierarchy.
UI/UX Engineering - Roshan Karunarathna 58
59. On the left side negative
space is applied
on the right there isn’t
significant negative space
considered.
UI/UX Engineering - Roshan Karunarathna 59
60. How line spacing influences
readability and text
comprehension.
UI/UX Engineering - Roshan Karunarathna 60
62. ● Colors have a key role in expressing the brand and intents.
● The more colors there are, the less impact each individual color will have.
● Keeping decent contrast between colors keeps a design accessible.
UI/UX Engineering - Roshan Karunarathna 62
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.
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
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.
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.
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.
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
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.
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
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