UX Introduction
Tips for creating a better user experience in your event website
What is UX?

UX, or User Experience, refers to the way people feel and interact with products or services.

When we focus on UX, we ensure that what we create is easy to use, enjoyable, which leads to happier users and a better overall experience when navigating through your website.

To implement good UX on a website, there are several key aspects to consider:
1# Clear and intuitive navigation
Make sure users can easily find their way around the website with a well-organized and easily understandable navigation menu.

navigation

💡 Pro tip:  Be short and precise when choosing the wording. The recommendation number is between 5 and 7

2# Consistent branding and design
This consist in use same font, colours, shapes and design patters accross your website following your brand identity.

typography and colours example

3# Responsive and mobile-friendly design
Ensure the website is optimized for different screen sizes and devices, allowing users to have a seamless experience regardless of the device they're using.
4# Fast loading times
Optimize the website's performance to minimize loading times and provide a smooth browsing experience, avoiding user frustration.

How can I do  that?

Optimize image sizes: Compress images to reduce file size without compromising quality. Use appropriate image formats (e.g., JPEG for photos, PNG for graphics)

Enable browser caching: This way, returning visitors can load the cached resources instead of downloading them again

Prioritize above-the-fold content :This technique, known as lazy loading, improves perceived performance and reduces initial load times

Avoid long pages

⚠️ Avoid long pages
Long content can lead to a poor user experience
When users encounter a lengthy page, they may feel overwhelmed and find it difficult to locate the information they need. Scrolling through a never-ending page can be tedious and time-consuming, causing frustration and a loss of interest. It's important to prioritize and organize content effectively, breaking it into logical sections or using pagination, to make it easier for users to navigate and find what they're looking for. By ensuring a more focused
5# User-friendly forms and interactions

Streamline forms and interactions by keeping them simple, providing clear instructions, and minimizing the number of steps required. 

Streamline forms and interactions by keeping them simple, providing clear instructions, and minimizing the number of steps required. 

Create an intuitive navigation that are natural and easy for users to understand and navigate without the need for extensive instructions or assistance. It focuses on creating a user interface that aligns with users' mental models and expectations, enabling them to interact with the system effortlessly.

See more examples of how you can create an efficient interfaces for a broad set of users

Dos and Dont's

 

6# Readable and scannable content
Mostly applied to your library entries

Break up text into manageable chunks, use headings, bullet points, and formatting to make the content easier to read and scan.

💡  Interesting read: Eyetracking visualizations show that users often read Web pages in an F-shaped pattern

7# The Gutenberg Diagram

The Gutenberg diagram is a concept that describes the natural eye movement patterns when reading or scanning a page. It suggests that the eyes tend to move in an "F" ( mostly for text  ) or "Z" pattern, starting from the top left corner and moving horizontally, then vertically down the page. This concept can help inform the placement of important elements within a design

7# The Gutenberg Diagram
Let's see a bit more:

8# Visual hierarchy

Refers to the arrangement and presentation of elements on a web page or design in a way that guides the user's attention and establishes a clear order of importance. It helps users understand the content hierarchy and navigate through the information more effectively.

Size: Users notice bigger elements more easily

Larger elements tend to attract more attention. By making important elements larger than others, you can communicate their significance and encourage users to focus on them first

See example

Colour: Bright or contrasting colors can draw attention to specific elements.

Strategic use of colour can guide users' eyes towards important information or calls-to-action

See example

Contrast: Elements that stand out from their surroundings create contrast.

Using contrasting colours, font weights, or background shades, you can highlight key elements and make them more noticeable.

Typography: Varied font sizes, weights, and styles can be employed to establish a visual hierarchy

Headlines, subheadings, and body text can be differentiated to indicate their relative importance and guide users through the content.

White Space: Also known as negative space

White space is the empty space between elements. It provides visual breathing room and helps separate and emphasize important elements.

💡 Pro tip: Sometimes, there is a desire to fill the space with as many elements as possible. However, this goes back to the concept of importance: If they all seem equally important, none of them are perceived as important.

Alignment: and proximity: Consistent alignment creates a sense of order and structure

Elements aligned along a grid or in relation to each other can help users understand the relationships and importance between different elements.

Imagery and Icons: Images and icons can be used to catch the user's attention and convey meaning

By choosing or designing appropriate visuals, you can direct the user's focus to important areas or actions.
By utilizing these principles of visual hierarchy, you can effectively guide users' attention, communicate the relative importance of different elements, and create a visually appealing and user-friendly navigation
9# User testing and feedback
Regularly gather user feedback and conduct usability testing to identify areas for improvement and make informed decisions based on user insights.

Both user testing and feedback play a crucial role in CRO by identifying potential roadblocks in the user journey, highlighting areas for improvement, and validating hypotheses for optimizing conversions. By utilizing user insights, businesses can make data-driven changes to their website or product, enhancing the user experience and ultimately improving conversion rates.

10 #Continuous improvement!

Aim for ongoing optimization and updates based on user feedback, analytics, and emerging UX trends to ensure the website remains user-centric and up to date.

This might sound difficult, but we are here to help!