I'll try to keep this post as condensed as possible, though be warned - it's not going to be short.
I believe that at some point most of faf client users thought - this could look/behave better and although the client has pretty much everything required to play a game, I believe it's suffering from 'mature software' syndrome. Most of projects developer over a longer period of time tend to loose UI/UX features due to various reasons - time constraints, new contributors, 'functionality over looks'...
This is normal, but in order to attract new users and keep the picky old ones, once in a while a UI refresh is needed.
I want to strongly state one thing here: I'm not picking on the choices, neither am I trying to criticize the developers - as a concerned user, I'm just trying to help, so on with the subject.
Current UI
There are a few things that are inconsistent in the current UI.
Some sections (What's new, leader boards, livestreams, vaults(?)) are a ui wrapper around a web browser whereas others are not. Yes this is a common practice (steam does that and so does origin) but they have the resources to keep the look consistent with the non-web rest of the app - so they can pull this off, faf can't - sorry.
The non-web components (chat lobby, coop missions, find games, tournaments, replays and vaults) have sometimes drastically different UI/UX thus leaving the user confused when switching between them (I remember that it took me a while to get used to this)
The inconsistencies:
the sidebar:
on the right:
on the left:
also left but a bit wider:
and no sidebar... or half the screen sidebar (imagine content here - it's hard to get a screenshot with content on this screen):
as a matter of fact, after a few months of using faf, I'm still confused on how the tourneys screen works - it's just totally different than all the others
search/filter:
this is a filter:
and this is a filter (although it says search):
and this is a filter:
and this is a filter:
and last but not least:
dialogs:
there are a lot of popup dialogs and although it's probably not possible to get rid of them all, it is possible to reduce their number or move the information delivered by them to a less intrusive spot. I mean 'connecting', 'downloading', 'updating'.. and the likes.
navigation:
This image should sum up the problem:
that's 4 levels of tabs, not counting the leaderboard bottom tab - that's too much.
responsiveness:
leaderboards and tourneys are a good example of the client misbehaving. You enter the leaderboard, you get a popup 'connecting'. Sometimes it connects, sometimes it doesn't. Sometimes it connects after switching the tabs a few times. The main issue here - if there's a connection problem - tell the user. Don't leave a blank screen - it leaves the user wondering if the server has a problem, or the client has a problem or maybe something else is a problem.
ladder popper:
Every time you get a notification with the suggested latter match, the screen real estate is reduced. This may be a personal preference, but I'm a bit annoyed by ui elements that shift size suddenly.
sorting:
This is a difficult one. The problem here is that if you're looking for a custom game, the screen refreshes itself periodically (which is understandable) but if you're unlucky, and the game you want to join is the last one in a row, then after that refresh it's often the case that you 'loose sight' of it because something jumped in higher in the list.the edge case of that behavior is you double click in the same moment that the jump occurs and you join a different game that you wanted to. (I was actually a witness of that happening when a guy entered a lobby and after 30sec wrote 'hmm... I think I joined the wrong game').
These are some of the 'big picture' problems, but there are also others like this:
and
These have a very similar structure, though look drastically different
or these:
and
These provide the same thing, the difference is the origin (online or local) but that difference is not that important to the user, so in this case the screens could be exactly the same (except maybe for a link/button to open local dir or open in browser)
If you keep looking, you can find more, but these should be enough to prove my point. Now criticism itself is only good if you provide an alternative, so here's mine. Note that I am not an interaction designer, nor a graphical designer. I'm just a guy who pays attention to these things, so without further ado, here's my suggestion to solve some of the mentioned problems.
First of all, introduce a new chrome. It has 2 'modes' - sidebar or no sidebar. There is a question whether it should be on the left or on the right - perfect solution - make it configurable, suggested solution - on the right (because most current screens have it there)
no sidebar:
with sidebar:
There's also a handle between the sidebar and the content box - that should allow to resize and collapse (just like on the current chat screen)
Here's a screen with some explanations:
There are a few things to be noted here. "What's new", "Tutorials" and "Live streams" are missing. Why? well, mostly because they're the browser-wrapper screens. I'm not suggesting to get rid of them - the content there is precious, I'm just suggesting to move them.
As for "What's new" - I'll touch on that later. "Tutorials" and "Live streams" will have their place in the app main menu. Tutorials are hardly a dynamic section and although it would be great if they were, let's face the facts here. It'll be enough if there's a subsection in the "Help" menu item that lists all the tutorials or better yet - links to the wiki page which contains all of the tutorials. That way we keep the UI clean the the content can still be dynamic. Tutorials are not FAF client functionality.
"Live streams" - same changes here. Either link to twitch with the filter (after all, that's what's done in the current pane) or provide a link to wiki.
There's another reason to remove these form the client's 'direct view'. This is duplicated content. It's available on the website and if you're using the client, there's a huge chance you've visited the website at least once.
Labels are missing - that's just to gain space. It is easier to locate the right thing when you have a label, but the faf client is an app that will be used frequently (at least that's the goal) and icons are a great way to familiarize the user with the UI. It's easier to spot the right icon than to scan for the desired text - that's been proven by UX tests. And for those who are new - tooltips for each icon. If we're on this subject - I'd suggest tooltips for every UI element. They provide the help needed but do not clutter the UI.
Non interactive notifications in the bottom right. These are the notifications that currently appear in modal popups. This should only include short text and possibly a progress bar or progress indicator as well as state error messages (no connection, download error...)
FAF icon in the top right corner. This has twofold functionality. First - it gives the client identity - that's a trick used almost everywhere. Second, this provides an anchor for alerts/notifications/news. Here's how it could look like:
First notice the glow on the icon. That's a visual effect I adapt to notify a user about important interactions. That should be pulsating to catch attention (animations attract the eye).
Second - the 'balloon' has prev/next/close buttons on the bottom. (clicking outside of the balloon should close it as well). The size should be dynamic, although that's more of a suggestion than a rule. It should have max width and height but if the content is small, so should the balloon. This does introduce one problem - the 'jumping size'. I assume that most of the time, there's only going to be one alert item so this should not occur often but will occur eventually.
This is an element that could actually hold web content. Although in the perfect case, the content would be laid out to fill the balloon nicely, this may be technically problematic or just not worth the hassle, to this is actually the only element which I'd consider a valid candidate to host a browser, although - one news at a time, not one big element with scroll bar (btw, a scroll bar should be included in the balloon so that it's possible to fit longer news items - it's not on the design - that's my bad)
Player stats
This will probably (re)trigger a flame debate. Yes, I have tracked the debate concerning rating and am actually a fan of the steps taken. If it were my decision, I'd probably hide the rating everywhere and just present the 'game quality' indicator (this is actually the way quake live solved it) but let's face it - people get attached to their 'numbers' so instead of fighting it, embrace it.
The avatar (not every one has it) is of course a placeholder. If a user does not have/use an avatar a substitute icon should be used (empty rectangle or a generic icon)
The avatar/generic icon is a click anchor which when triggered brings this up:
This element introduces some new functionality, but hopefully not a lot. The chars are taken from the current client, just stripped of the modal window and some controls that ... at least in my case don't work.
The 'last game' part is displayed based on the last replay (either from online vault or local archive - depends which one is newer, although just taking the local replay is a viable choice). APM is already accesible through PattogoTehens replay parser so the code is there. The 'play' icon starts the replay that the stats are taken from.
As for the global stats - I'm not sure if the current data supports this, if it does - great, if not - possibility to improve.
Player stats are a subject that I've seen pop up on the forum a few times. This suggestion is very simplistic. There are tons of other stats that would be useful, but that's a separate subject.
Section icons. These have the same functionality as in the current client - switching content. The reason I placed them on top is simple - save space. The top bar it going to be there anyway so might as well use the space for something.
'The thing under the icons' - that's my take on the ladder match popup. Here's how it looks expanded:
and here are some screens where this is being 'active':
It uses the same pulsating glow effect that the news icon does. Pulsating is an indication of activity so it can replace the progress bar currently used. Also, the 'select maps' button is gone because that's a configuration thing and should be placed in "settings -> ladder -> select maps".
These screens only touch on the window chrome problems. They do not address the design of each screen. They do not provide a solution for consistent search/filter or other layout elements presented earlier.
The reason for this is simple - I want to check if this subject at least catches some attention and if it's to be considered as an implementation possibility. If that's the case, I'd love to spend some more time to try to address these issues.
As I said earlier, I'm no designer. If you're reading this post and you are a designer I encourage to make your suggestions or expand on the ones I posted here - after all, that's what open source is about.
Final note.
I realize that what I'm suggesting here is sort of a revolution and I do not expect anyone to drop all their activities and start working on improving the UI. What I would like to achieve is awareness of the problem.
FAF is struggling for new users, and we all know that it's been referred to as 'the ugly client' in steam forums more than a few times. The game itself is complicated (and that's its beauty), but I don't think that the program used to play it should have the same trait.
EDIT:fixed image links
i personally like that, but i would not show exact rating outside of the player stats window (as it is now) and instead or global rating show league place, and change in points, and 1v1 rating. this will put more importance on 1v1 rating and thats a good thing becuase its what is supposed to be competetive, not a balance tool.
