{"id":17022,"date":"2024-04-19T08:18:47","date_gmt":"2024-04-19T07:18:47","guid":{"rendered":"https:\/\/uxstudioteam.com\/ux-blog\/?p=17022"},"modified":"2024-04-19T13:41:50","modified_gmt":"2024-04-19T12:41:50","slug":"barcelona-real-madrid-battle-of-websites","status":"publish","type":"post","link":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/barcelona-real-madrid-battle-of-websites\/","title":{"rendered":"Barcelona vs Real Madrid: Battle of the Websites"},"content":{"rendered":"

Even if you are far from being a football fan, I\u2019m sure you\u2019ve heard of Barcelona and Real Madrid football clubs at least once in your life. These two teams have been at the top of European football for many years now, and their game called <\/span>El Clasico<\/span><\/i> always attracts a lot of attention.<\/span><\/p>\n

Ahead of the upcoming game, we, as a UX\/UI agency, decided to compare the websites of the two Spanish grandees and find out which club has the better one. <\/span><\/p>\n

We studied 11 of the most popular sections and compared their usability, user experience, appearance, and functionality. If the section was better, a goal was scored for the winning team. In case of a draw, a goal was added to both clubs.<\/span><\/p>\n

Let the battle begin!<\/span><\/p>\n

Home page<\/span><\/h2>\n

Both websites start with an almost full-screen \u201cmost recent\u201d article or video. Below, there are three more listed. The only difference is that Barcelona shows the publication date and a team tag. This helps users make sure the content is up to date.<\/span><\/p>\n

\"Screenshot<\/p>\n

Bar\u00e7a is actively using a stories format, and that\u2019s exactly what you’ll see next on the page. It might be a bit surprising for desktop users, but for the young generation that uses smartphones most of the time, it\u2019s a great way to digest the club\u2019s content.\"Screenshot<\/span><\/p>\n

Real Madrid shows content using the same cards throughout the page for articles but does not always include section headings, making it difficult to determine which category these articles\/videos belong to. This can confuse readers and cause unnecessary cognitive load.<\/span>\u00a0\"Screenshot<\/p>\n

Both clubs have trophy sections. Real Madrid has made it interactive: if you drag the stepper, you can see how the number of trophies changed over the years.\u00a0<\/span><\/p>\n

\"Real<\/p>\n

Overall, Barcelona\u2019s home page offers significantly more content and is better structured or grouped than Real Madrid\u2019s.\u00a0<\/span><\/p>\n

 <\/p>\n

\"After<\/p>\n

<\/h2>\n

Navigation<\/span><\/h2>\n

\"\"Clubs take significantly different approaches to navigation bars. Barcelona prefers to show all sections of the site there, while Real Madrid prefers a more minimalistic version. On the Real Madrid page at the top, we see only those buttons that can bring the club money. All team information is hidden under the menu icon in the full navigation menu, requiring users to make an extra click to access the information they need.<\/span><\/p>\n

\"\"As an additional feature, Bar\u00e7a uses a floating bar at the bottom of the screens with buttons, such as \u201cTickets\u201d, \u201cSchedule,\u201d and \u201cBar\u00e7a Store\u201d. Surprisingly, the main navigation bar doesn’t disappear either when you scroll, so you can see both bars at the same time. This duplication can ensure that users always have the menu options available, but on the other hand, the screen space could be utilized more efficiently. For example, the top navigation bar could disappear when the user scrolls down the page to fit more content on the screen.<\/span><\/p>\n

Functionally, both panels are identical, so there’s no winner here.<\/span><\/p>\n

 <\/p>\n

\"\"<\/p>\n

<\/h2>\n

Schedule<\/span>\u00a0<\/span><\/h2>\n

Let’s start with the Real Madrid calendar page. There, we see cards of club events, which, shockingly, are not clickable. Only the “More” button (which has a relatively small clickable area) is an interactive element that allows you to see information about tickets and proceed to their purchase. This is a serious miss that could be an obstacle for some potential buyers.<\/span><\/p>\n

\"\"<\/p>\n

The club also shows training sessions on its calendar you can’t buy tickets for or attend, and if you click on the “More” button, you see a modal that can only take you to the club shop. And yes, the text on the button is in Spanish. All things considered, it’s hard to understand why they were added to the calendar.\u00a0\u00a0<\/span><\/p>\n

I was also surprised by the filters because it took me a few tries to realize that I could scroll down the page and see more of them.<\/span>\u00a0<\/b><\/p>\n

\n