Introduction
User Experience, often abbreviated as UX, is about designing a seamless, intuitive, and enjoyable experience for your client's users. The more complex the project, the more important having a clear user journey is for the entire team, the client and the end user.
As a creative producer, understanding the fundamentals of UX can heavily influence your ability to communicate and defend creative ideas to a client.
1. What is UX?
User Experience encompasses all the different aspects of a person's interaction with a product, website or experience. It involves elements such as usability, accessibility, performance, design/aesthetics but at its core, UX is about how a user feels when interacting with your digital product.
Here are the key elements you need to know:
Sitemaps:
- Are a visual representation of the structure of a website.
- Organize and show the hierarchy of a website's pages.
- Helps website designers and developers understand the flow and organization.
- Used for both planning and scoping a new project.
User Journeys:
- Describes the path a user takes through a website or experience.
- Often mapped out in stages from the initial contact or discovery to the final interaction.
- Reflects the user’s goals, needs, and the actions they take.
- Helps designers understand and optimize the user experience.
- Can be influenced by content, design, usability, and features.
- Helps your client understand and optimize for key touchpoints and conversions.
Wireframes:
- A basic, visual representation of a webpage's layout.
- Outlines placement and structure of page elements, site features, and navigation.
- Is not a design, it is a functional tool.
- Used in the early stages of the creative process for approval before briefing designers.
- Helps stakeholders and project team understand functionality and layout without getting distracted by design details.
Here’s what this looks like on a project:
2. UX Principles
Here are a few important principles to keep in mind when working on sitemaps, user journeys and wireframes.
- Understand Your User: Before anything else, know who your users are. What are their needs, motivations, and behaviors? In what context are they visiting the experience or product? Building user personas can be a helpful tool here.
- Focus on Functionality: Aesthetics matter, but not at the cost of functionality. Prioritize clear, intuitive navigation and easy-to-use interfaces. We can challenge these elements, but anything too unfamiliar will create additional friction that needs to be justified with am above average reward.
- Simplicity is Key: Keep designs simple and interfaces uncluttered. Less cognitive load leads to a better user experience.
- Consistency Matters: Consistent design helps users feel more comfortable and intuitively understand how to interact with your interface.
- Feedback is Crucial: Feedback, whether visual or auditory, lets users know their actions have had an effect. This could be as simple as a button changing color or a font-size changing.
Laws of UX
A brilliant repository of UX laws which I highly recommend, I've copied the most important for producers and project managers below.
Jakob’s Law
This law suggests that users spend most of their time on other sites, which implies that they would want your site to function similarly to all other familiar sites. The key takeaway here is: don't reinvent the wheel. Stick to conventions that users are accustomed to for a seamless experience.
Hick's Law
Hick's Law plays a significant role in visual storytelling. It postulates that the time it takes to make a decision elevates with the number and complexity of choices. In other words, simplicity is key. Break down intricate tasks into smaller, manageable steps to reduce cognitive load. Emphasize recommended options to guide users and use progressive onboarding to minimize cognitive load for new users.
Serial Positioning Effect
We mentioned this one in the Workshop chapter, but it’s also relevant here! This law highlights that users are inclined to best remember the first and last items in a series. Utilizing this can enhance UX design by placing less important items in the middle of lists as they are less frequently stored in both long-term and working memory. Also, positioning crucial actions on the far left and right within elements such as navigation can bolster memorization.
Doherty Threshold
The Doherty Threshold emphasizes the importance of system responsiveness in holding user attention. Research suggests that any interactive response that takes longer than 400 milliseconds risks losing user attention. More recent studies have found that latency as low as a half a second with interactive graphics profoundly affects how viewers engage with the graphic.
3. Useful Tips
Image Carousels
While widely used, image carousels are not always the most effective tool for engagement. Studies have found that only a minuscule fraction of users (1%-10%) interact with them.
Intrusive Interstitials
Full-screen pop-ups can disrupt user experience, often leading to decreased engagement and increased frustration. Pages with interstitials tend to have higher bounce rates.
Auto-Playing Sounds
Sounds that automatically play upon loading can be annoying to users. Over 80% of users consider auto-playing sounds a negative aspect of their user experience.
Slow Loading Pages
Speed is of the essence. Slow loading pages can lead to higher bounce rates and lower engagement. A study found that a 1-second delay in page load time can result in a 7% reduction in conversions. Google also found that 53% of mobile users will abandon a website that takes longer than 3 seconds to load.
Usability
Usability is critical. Approximately 83% of web users leave a site due to poor usability, whether it's unintuitive navigation or sluggish performance which is why it's crucial not to prioritize aesthetics over usability and load time. Users tend to prefer your site to work the same way as all the other sites they already know, unless you can give them a good reason for that extra effort.
Exercise
Use Figjam to build a sitemap and start a Figma project to wireframe 2 pages of a website! You can also look at the User Stories template I’ve provided, should you wish to start there before sitemapping.
