New Improved Onboarding Feedback

Hello Everyone!

As some of you may know, I'm about to finish the new FAF website (which hopefully will release before November ends). However, one of the biggest new things on it is a better onboarding for new players considering that in order to play FAF, you need to do steamlink, download and install FAF, open SCFA at least once locally, find a directory, etc. Which is quite a lot for new users.

Therefore, now instead of letting users just download FAF and figure out all of these issues, I added a "guide"/checklist for new users to have a clear set of steps they need to follow in order to play.

You can check it here https://test.faforever.com/play

211f1b8d-b155-4bc7-894b-f020426335d7-image.png

There will be also improvements on the steamlink and goglink process (putting the guides with images on those pages just in case user is having difficulties linking their accounts correctly).

I take any feedback you have about this page! However just know, I'm trying to keep it as simple and direct as possible. I do not want to scare new users with walls of text but instead easy and simple steps they can follow without being overwhelmed.

TLDR: Give feedback about new onboarding process for new players considering its a bit of a hurdle unlike other games where it is download game then play game.

FAF Website Developer

@femboy do you really using default checkbox?))

Looks good, on the bit about windows not letting you install it ("If your Windows computer stops you from running FAF, click on "More info" and you'll be able to run it."), I wonder if it'd be worth expanding slightly to explain why this happens, e.g. "Windows may try to prevent you from running FAF with the below message - this is because FAF cant afford to pay Microsoft a monthly fee. However clicking the "More info" button should allow you to run FAF: [screenshot of the error with more info circled in red]"? Would lengthen things a bit but might help explain to people why they get the error/make them more likely to believe that FAF is safe to run.

On the 'Reigster for a FAF account' I'd suggest having some text in bold red noting something like 'Gmail has taken to periodically blocking FAF registration emails so if you don't receive a registration email shortly afterwards, try using an email with an alternative provider'

I think the items should all use the imperative mood. For example:

  1. Create a FAF account
  2. Buy and install…

@maudlin27 I might do that, since it already seems very compact.

I'm also working on flash messages so we can have a message at the top bar that people can see (and be done automatically).

@Eternal I forgot I could change the checkboxes xd, I'll style them a bit

@Askaholic You are right, that sounds more natural/better.

Thanks for the feedback everyone

FAF Website Developer

Why at point 3 you link again to discord but not to the forums? I demand equality!

Jokes aside, good work!

Step 2 is perfectly useless to the less tech-savvy users: they won't have any idea about a steamapps/common folder or a /GOG folder; consider adding a short guide on how to actually find said folder on both platforms.

Rant about Fonts

  1. Can we remove font Orbitron from all FAF related things? Its horrible to read for me, painfully wide, my eyes just glaze over the letters. The main font seems to be "Electrolize" anyway, which while im not a fan, Eletrolize has better readability.

  2. Can we look into some other futuristic, but better readable fonts as well maybe? Some proposals:

I think all of these have better readability, Chakra Petch is highly stylistic similar to Electrolize with worse readability than Sunflower and Titillium, which in my opinion would be good for normal text paragraphs while keeping the headers in one of the more stylized fonts.

Of course this is just the result of single Google search for "fonts similar to Electrolize", so there might be much better ones. Imho a professional looking font that has good readability makes an extrely big difference between a page that looks like it comes from people that know what they are doing and a page that looks like a random blog/fanpage from 2010 that was made to look as "cool" as possible by a 13 year old.

I just uploaded the new changes . Please make sure to check again https://www.test.faforever.com/play

@Katharsas I see, I originally used Orbitron since I needed an extra futuristic font. I believe it has okay readability and a lot of style but I do see how it could be difficult for some to read. I really liked Chakra Petch so I might switch Orbitron for it. Thanks for your feedback

However, I completely disagree with you. I believe judging a website or a book by its cover is quite superficial. Specially a website which is much more complex than one font. The current website has fonts with very good readability and its a hot mess of code and lack of functionality. So I'd recommend not judging websites based on fonts unless you want to make an erroneous assessment.

FAF Website Developer

If a site author prefers heavily stylized fonts over readable fonts, that just gives me a negative impression, feels kinda like "style over substance". Sure, its far from the only important thing a site should get right. Thanks for all the hard work on improving the user experience.

@katharsas thanks to you for providing me with more fonts of high quality. I'm switching Orbitron for Chakra Petch thanks to your feedback. Looks much cleaner

New - Chakra
102e3f75-dc52-4f3e-a63a-7393d695b767-image.png

Old - Orbitron
e81e69da-2aaf-4b1d-a51c-5e60be8d61dd-image.png

FAF Website Developer

Btw. do you do all the styling by yourself? Do you need any help? Is there a Github?

@katharsas yes I do the styling myself. A good chunk of the new website is mostly just me. The only parts that don’t have much of my influence are the GET and POST requests of the account/clan management.

https://github.com/FAForever/website
That’s the github. Develop branch is the current website/production and New-Frontend is the new website/test branch. Any help is appreciated.

FAF Website Developer