The World Wide Web (WWW), commonly known as the Web, is an information system where documents and other web resources are identified by Uniform Resource Locators (URLs, such as https://www.example.com/), which may be interlinked by hypertext, and are accessible over the Internet. (Wikipedia).
The user, on the other hand, is a person who uses or interfaces with the web.
How the user connects with the web is highly determinant of his possibility of visiting the web at another time. This brings about UI and UX.
UI design and UX design are two of the most often confused and conflated terms in web and app design.
What is UI Design?
The “UI” in UI design stands for “user interface.” The user interface is the graphical layout of the web or an application. It consists of the button 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.
What is UX Design?
“UX” stands for “user experience.” A user’s experience of the Web is determined by how they interact with it.
• Is the experience smooth and intuitive or clunky and confusing?
• Does navigating the web platform feel logical or does it feel arbitrary?
• Does interacting with the web platform 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.
This leads us to “Empathy Mapping: A Guide to Getting Inside a User’s Head”
As UX professionals, it is our job to advocate on behalf of the user. However, to do it, not only must we deeply understand our users, but we must also help our team understand them and prioritize their needs. Empathy maps, widely used throughout agile and design communities, are a powerful, fundamental tool for accomplishing both.
An empathy map is a simple, easy-to-digest visual that captures knowledge about a user’s behaviours and attitudes. It is a useful tool to helps teams better understand their users. It externalizes knowledge about users to
1) create a shared understanding of user needs, and
2) aid in decision making.
Traditional empathy maps are split into 4 quadrants (Says, Thinks, Does, and Feels), with the user or persona in the middle. Empathy maps provide a glance into who a user is as a whole and are not calculated in terms of the passage of time.
The Says quadrant contains what the user says out loud in an interview or some other usability study e.g “I want something reliable.”
The Thinks quadrant captures what the user is thinking throughout the experience. Ask yourself:
what occupies the user’s thoughts?
What matters to the user?
It is possible to have the same content in both Says and Thinks. However, pay special attention to what users think, but may not be willing to vocalize. Try to understand why they are reluctant to share — are they unsure, self-conscious, polite, or afraid to tell others something?
e.g “This is annoying.”
“Am I dumb for not understanding this?”
The Does quadrant encloses the actions the user takes. From the research, what does the user physically do? How does the user go about doing it? E.g Refreshing the page several times.
The Feels quadrant is the user’s emotional state, often represented as an adjective plus a short sentence for context. Ask yourself: what worries the user? What does the user get excited about? How does the user feel about the experience?
Feeing Impatient: pages load too slowly
Feeling Confused: too many contradictory prices
Feeling Worried: they are doing something wrong
As their name suggests, empathy maps simply help us build empathy with our end users. Users are complex humans. It is natural (and extremely beneficial) to see a comparison between quadrants.