UX & UI

Overview

User Experience (UX) and User Interface (UI) “describes a set of concepts, guidelines, and workflows for critically thinking about the design and use of an interactive product”.[1] These two arenas play a crucial role in software development as they are intertwined through being user centric.[6] However, UX and UI, though similar in appearance, have different focuses and characteristics. UX follows a human-first approach to web development while UI focuses on the visual and intuitive elements.[5] Both together allow for well-rounded and well-executed content on a web platform.

Terminology Distinctions

Definitions

  • Interaction: a request-result dialogue between a user and a digital object through a computing device [1]

  • Interface: a tool allowing user interaction with a digital object [1]

  • Interface Freedom: the ability for the user to choose

  • Interface Complexity: the degree of complexity a user encounters during use

  • Interface Flexibility: “ability to complete the same objective with an interface through different interaction strategies [1]

What is UX Design?

UX design is an “iterative set of decisions leading to a successful outcome with an interactive tool, as well as a productive and satisfying process while arriving at this outcome”.[1] UX is directly linked to the growth of UI[9], encompassing usability and understanding of user interactions. It is what makes the interactions between users and technology simple and effective.[8]

What is UI Design?

UI design directly influences a set of repetitive decisions leading to the eventual successful use of an interactive tool.[1] It is a functional design interface bridging the gap between users and the product in an attractive and intuitive way.[8] UI design should keep users informed about what is happening, giving appropriate feedback in a timely manner. The visual look and feel of UI design sets the tone for the user experience.[1]

UX & UI Careers

Designer vs Developer

Designers and developers are both technical communicators within the field of UX/UI design. Their work determines the success of a platform's goals as the designer’s responsibility is to examine the product from the user’s world looking inwards and the developer’s responsibility is to examine the product from within the system outwards.[3]


UX/UI designers aim to enhance user satisfaction by improving interface usability.[9] Much of their work involves researching and troubleshooting UX issues, problem solving through creative design, and working with cross-functional engineering teams.


Developers are “initially concerned with issues of machine functionality and efficiency, generally working their way 'out' toward user interface design”.[3] Within the area of developers there are three categories: front-end developers, back-end developers, and full-stack developers. Front-end developers are responsible for a product's visual elements that users interact with. Back-end developers are responsible for invisible elements that help form structure and proper functionality. Full-stack developers are those who are well-versed in both front-end and back-end development and can provide aid to either side depending on what is most required.[10]

Key Responsibilities

UX/UI designers and developers serve as a liaison between the user and engineers or programmers. It is essential that they think from both perspectives. Those in UX/UI are not required to have the same technical background as software engineers, but to be familiar with their languages and methodology is crucial.

Both designers and developers are responsible for relaying information correctly to users and, as such, it is mandatory to be aware of the stages of interaction necessary for successful user outcomes. Those stages are intention, action, execution, and evaluation, and when errors occur in any of these four stages it is the responsibility of the designers and developers to determine the exact point of error. “People look for information to formulate goals, to form an intention for an action, and to check progress. When the necessary information is misleading or absent, they may form an incorrect intention or incorrectly execute the action and hence make errors. These errors may lead to total task failure, and thus impinge on information designer interface dependability or usability.”[4]

As technology has evolved, it has become increasingly important to engage users quickly. Behavioral design, using data from cognitive bias research, is an element often used by UX designers.[2] By creating interactive content that uses stimuli response, it allows designers to guide users through both simple and complex steps. The reward is reaching the user’s end goal. However, it should be noted that a user’s end goals are subject to frequent shifts, creating the need for interface flexibility. Flexibility comes from having both interface freedom and interface complexity.

Other challenges for UX/UI designers come from heterogeneity, “broadly defined as multiplicity of end users, computing platforms (mobile, tablet, computer, etc.), input/output capabilities, interaction modalities, markup languages, toolkits, user working environments, and contextual variability”.[7] In this, creating a system or UI with the ability to adapt will lead to a better overall UX.

References

[1] ^ Roth, Robert. (2017). User Interface and User Experience (UI/UX) Design. Geographic Information Science & Technology Body of Knowledge. 2017. 10.22224/gistbok/2017.2.5.

[2] ^ Verhulsdonck, Gustav, and Nadya Shalamova. “Creating Content That Influences People: Considering User Experience and Behavioral Design in Technical Communication.” Journal of

Technical Writing and Communication, vol. 50, no. 4, 2019, pp. 376–400., https://doi.org/10.1177/0047281619880286.

[3] ^ Haselkorn, Mark P. “From Online Documentation to Intuitive Interfaces: Technical Communicators Join the Design Team.” Journal of Technical Writing and Communication, vol. 19, no. 4, Oct. 1989, pp. 357–370., https://doi.org/10.2190/0kfn-hp46-eyx3-8vcu.

[4] ^ Albers, Michael J. “Design for Effective Support of User Intentions in Information-Rich Interactions.” Journal of Technical Writing and Communication, vol. 39, no. 2, 2009, pp. 177–194., https://doi.org/10.2190/tw.39.2.d.

[5] ^ Lazarovich, Maayan Nuna. “UX vs. Ui Design: What's the Difference?” Elementor, 23 Feb. 2022, https://elementor.com/blog/ux-vs-ui/?utm_source=google&utm_medium=cpc&utm_campaign=10759652828&utm_term=&gclid=CjwKCAjwwL6aBhBlEiwADycBIO4hbU1wRR5eBfoVl9JFaNsRli6QOvjmLGdeQumgrk1Q2ulvWrLJzRoCl6YQAvD_BwE.

[6] ^ Verhulsdonck, Gustav, et al. “Investigating the Impact of Design Thinking, Content Strategy, and Artificial Intelligence: A ‘Streams’ Approach for Technical Communication and User Experience.” Journal of Technical Writing and Communication, vol. 51, no. 4, 21 Sept. 2021, pp. 468–492., https://doi.org/10.1177/00472816211041951.

[7] ^ Hussain, Jamil, et al. “Model-Based Adaptive User Interface Based on Context and User Experience Evaluation.” Journal on Multimodal User Interfaces, vol. 12, no. 1, 1 Feb. 2018, pp. 1–16., https://doi.org/10.1007/s12193-018-0258-2.

[8] ^ Kumar, Amitesh. “UI vs. UX: What Is the Difference between UI and UX Design?” Emeritus, Emeritus India, 27 July 2022, https://emeritus.org/in/learn/what-is-the-difference-between-ui-and-ux-design/.

[9] ^ Tagliaferri, Costanza. “UX/Ui Designer vs. UX/Ui Developer: What's the Difference?” DistantJob, 27 July 2022, https://distantjob.com/blog/ux-ui-developer-vs-ui-ux-designer/.

[10] ^ “What Is a Full Stack Developer & What Do They Do?” UofT SCS Boot Camps, 11 Nov. 2020, https://bootcamp.learn.utoronto.ca/blog/what-is-a-full-stack-developer/#:~:text=What%20is%20a%20Full%20Stack%20Engineer%3F,can%20see%20and%20interact%20with.

Last updated by Selena Wolkenhauer on 11/6/2022