Today, we released a new version of the Hattrick site, where the main change is that we make the site wider. But in the process, we also worked through the entire site, making sure the site would look good with the new extra space, and also taking advantage of the extra space to add new functionalities or more relevant information, where possible.
We changes the width of the size so that it requires a screen resolution of at least 1280×960, replacing our previous requirement of 1024×768. Since our last large design revision, in 2008, desktop screen sizes have grown a lot and there is in most cases no reason at all to restrict Hattrick to a very small site width. Hattrick is, after all, a game where it often makes sense to bring much information together in one place and having wider pages makes that easier. For most desktop users, you will just notice that your browser window needs to be a bit bigger to fit all the information, but it will still not take up your entire screen.
You will notice that team names will be truncated less often. But the real benefit will come as we continue developing the site. We have already started taking advantage of this with the first updated pages we release, but expect more of this to follow.
But what about smaller screens, lots more people use smartphones today and maybe they prefer a more narrow Hattrick? Sure, this happens but also here the trends move in favour of a change. The preferred way, by far, for mobile users to access Hattrick is through our apps, and these are much more capable today than just a few years ago. But even if you prefer to use the web from your phone, and not an app, this is still perfectly possible with the wider site design.
We also took the opportunity to change the font and font size on the site. While the font of the main menu (Tahoma) stays the same as before, on the rest of the site we had been using different fonts on old design pages (Verdana) and new design pages (Fira Sans). We also used lower case headers on the old pages and upper case headers on the new. This was very inconsistent. We have new chosen a new font called Roboto to replace both Verdana and Fira Sans. It is very similar to Fira Sans, but works better as an allround font.
Roboto will be used as the font for submenus and body, with the font size for the body slightly increased, while we keep the lower case submenu and sidebar box headers from the older design and implement them also on the newer pages. We are also standardizing the colour of the box headers from two shades of green to just one, and bringing the small left side icon at the start of all headers from the new design pages to the rest of the site as well.
Another small change is that we now have a universal styling for checkboxes and radio buttons, rather than following browser defaults, which we think will help make the site look more consistent.
The Matches page
The new Matches page will be one of the first changes you notice. Instead of just showing previous and upcoming matches as a list, we are now highlighting the most recently played match and the next upcoming match with a card, summarizing the key aspects of each.
We are also changing the flow of the rest of the page so it matches how the match list is displayed in the app. Instead of strict chronological order, the Past matches list will show most recently played matches first, while the Upcoming matches list will show nearest upcoming matches first. We think this sorting is better, but an option to keep the strict chronological sorting is available on your Preferences page, as well.
Your team name will now be highlighted in the Matches list. A new feature here is also that we show slots where it is possible to book a friendly directly in the Match list, with a link to the Challenges page to set one up quickly.
The Players page
The sidebar box on the Players list, where the whole team is listed as an overview, now includes information such as specialities, homegrown, cards and injuries.
We have also added the possibility to sort players based on injury, card and transfer status.
The Series page
Lots of thing happening here. We have added new sidebar boxes, so you can easily check what is the status of the teams in one series when it comes to cards, injuries and their current cup run. We are also adding more information to the Divisional Battle sidebar box, when that is running.
Given that we now have more space, we re-added the played matches column in the league tables. We now show gem icons of different colours to differentiate the various Challenger cups from each other. And when you hover any team on the Series page, you will now see what region they are from. Like on thge Matches page, your own team will be highlighted here as well.
The series history, historical standings and old series tables pages have been merged into one single page where you can navigate the different historical data using tabs instead. Another change here is that old historic tables now show the full series table.
The Transfer search page
We think the new, updated Transfer Search is a lot more user-friendly! We have added sliders for skills, so you can set up your search quicker in this if you prefer (while the drop-downs are still around if you prefer them).
With the new search icons for specialities it becomes easier to find exactly the player you want. Just use the icons to select the combination of specialities that you want to search for, including “no” speciality or “any” speciality, and search away.
The transfer pages know how much cash your club has available to buy players for. You don’t need to let this restrict your transfer searches, but we make it easy to copy the available cash of your team to the max value filter for a new search. If you do, players above that cash limit will be hidden in the search results.
Another nice new feature is that your previous transfer searches are automatically saved and then pre-loaded when you return to the page, even between sessions. For non-Supporters this includes the last transfer search, for Supporters you can pick between the last five searches.
We added a new page called “Current bids by teams similar to mine”, which is linked to the right of the transfer search page. Here you can check what teams with a similar Power Rating to your own are currently up to.
Finally, we moved the options for price and specialities in transfer search from Advanced search to the default search view.
The Transfer Search Results page
Some new stuff here as well. We now show a text when you have found a player you can’t afford, and disabled the Bid button for you in these cases. We show the number of bids and views on all players, and we show the online icon directly on this page for any bidders, so you don’t need to click through to the user details to figure out whether any sneaky competitors may be planning to increase their max bids when you are not looking.
Supporters gets a goodie here, too: We have integrated Transfer Compare into the search results, so you can immediately check how much similar players have been sold for in the past.
Transfer History page
On this page, we will now also show any ongoing transfers. We have also added a filter so that you can choose to view only bought or only sold players in the list.
In the fan update overview box, to the right of the page, we now show the week number for each update and, more importantly, the total value of fans after each weekly update.
We changed the look of the upcoming and match lists so they were formatted in the same way, with match expectations in the same place, making comparisons easier. The “mood after” for played matches is now available as a mouse over instead.
We also changed the look of the fans chart so it looks more consistent with the design of the finance charts.
Match Details page
Here it is now specified for friendly matches if they are played with normal or cup rules.
We now show both home and away kits at all times.
A new “Mark as unread” option was added to the post footer.
Top Players page
Here we added “Minutes played” as well, and just updated the look and feel of the page a bit.
Ladders & Tournaments
We added more information in the Ladder details box to the right. Instead of just showing your current position, you now also see a trend arrow, as well as your total wins and losses.
For Supporters, we have added the ability to bookmark Tournament matches.
Your Supporters page
On the Your Supporters page, which is linked from your Team details page, we now show the box listing the teams that has the Most Supporters in Hattrick as a sidebar to the right, rather than in the main window. The life goal to appear in that box remains the same!
That’s all for now. Enjoy the last days of your season, and good luck in the seasons ahead!
thanks for the new design! but there is a bug:
the coat of arms won’t displayed on ladder games as seen on the screenshot! (https://imgur.com/a/VrEMW6H)
Hello, there is a bug in CUP screen. Please solve this :
Is it possible to personally change it back how it used to be?
genial los cambios, se ve todo mucho mejor, para dejar solo una sugerencia me gustaría que la vitrina de trofeos (historia del club), se puedan ver por separado los trofeos “oficiales” de los trofeos “de torneos o competencias privados”.. (da una falsa impresión en los equipos que tienen muchos torneos privados no oficiales).
And what about the app?? I only play on the app😕
Any plans to work on the app for iphone or android?
Small typo to correct:
In the text:
“Manage – at your own pace
Hattrick is a football strategy game where you build and manage your team for the long term. Log in every day or just once a week – if you make the rights calls you have the same chance to be a champion! ”
… the word “rights calls” should read: “right calls” (no “s” at rights)
I like it – great use of the increased width! Good work
Thanks for these design updates and for communicating on it.
Really great job! Many new features -even the most little ones- will have a positive impact on the user experience (such as the automatically saved transfer searches, or the bought/sold filters on the transfer history page).
Some improvements may not bring the expected added value though. I’m escpecially thinking about these 2 changes on the transfer page:
– The sliders for skills.
The problem you’re trying to solve here is : «as a user, I want to set up my search quicker ».
I’m not quite sure that this UI change will help solving this problem. Drop-downs are still around and we still need them to check the skills values. It’s highly likely that the users will still use the dropdown, since they’re the only way to actually see the highest/lowest value.
– Icons for specialities.
The problem you’re trying to solve here is : «as a user, I want to find the players with the right specialities ».
But displaying only the icon is confusing. Not sure that the majority of HT players can tell what icon correspond to which specialty. What might happen here is: people will hover each specialty and wait a few seconds for the tooltip to appear. Loss of time 🙁
Anyway, these assumptions need to be validated through user testing. Actually do you have a UX design team working on that? Hattrick is such a deep and complex game that you’re definitely need some UX experts (in design and in research).
I’d be glad to help and to discuss about that, feel free to get in touch with me 😉
Congrats again for the great new features!
Please add a minimum bid price option like it was before, really hard to search for players now.
I love the update, keep it goin’
Update looks good! But I lost access to see chat history from my serie in a computer… I can only see it in mobile app. Anyone with this issue?
OK so I found the problem – the button on/off disappeared – but is still there hidden, after que faces of the ones that are in the chat…
Please make font more biggest! i don’t see anything without zooommiiingg!
are you seriously think – the horizontal scroll bar – great idea? HT – exclusive website that does not fit on a 23 inch monitor – and use scroll where there is nothing to scroll.
I love it!
This new design is fantastic!
Parabéns, pela atualização.
I think a lot of noise, for nothing interesting and new in the end!! I wish you ‘ll try to fix-improve the engine of the game which is the basic for hattrick and its supporters.
Great changes! On my iPad however I have to scroll from left to right to see the entire page. Or is that a setting of my iPad?
I like it !… in particular The new Transfer search page !.. grea stuff.
Myabe I’d made the site a little more wider… but that’s ok 😛
Me gustó mucho la actualización.
Me gustaría también que en el futuro pudieran agregar la posibilidad de tener también un equipo femenino, les dejo la inquietud y espero que algún día sea una realidad y se pueda tener una liga femenina en Hattrick. Saludos.
Wow this was really cool!