Now this is my sort of topic! I planned on creating a rough wireframe to express my thoughts but instead decided to mock up a design as a conversation starter. It gave me a nice excuse to check out Adobe XD, anyway!
While there's a screenshot at the end, some caveats first:
- On a real project, I would spend time gathering information that didn't happen here. Stakeholder interviews, sifting through analytics, user testing, etc. This can take a month or more depending on size of the project. Instead, I'm just an audience of one here (which is dangerous!). So the mockup here is just to foster conversation.
- My work usually entails wireframes and prototypes, not actually building out a visual interface. So please be kind
The challenge I see with OOTP is that it has to present a
lot of information. Stats, options, news, four (or more!) levels of navigation. I can't imagine the headaches Markus and the rest of the gang have to go through to figure out how to present the information, much less in a way that scales with resolution and appeals to both new users and the veterans alike.
I usually find browsing the competition to be a good place to start. The problem is, OOTP doesn't have a lot
direct competitors. Football Manager is a good start, but otherwise, I've found that console games don't often present lots of text information well.
What I did find, however, is that there is a place where very similar information has to be presented to users: sports websites. While more like indirect competitors, sites such as ESPN, SI, and even the Premiere League have to organize and display information that is similar to OOTP.
So I took a cue from them and "borrowed" some of how they structure and display their information. After all - it's probably innately familiar to a lot of OOTP users and could make things less overwhelming to new users.
While I'm not usually much of a fan of material design cards, I used them here as they do a decent enough job of segmenting information, something that provides visual hierarchy and makes it easier to find specific pieces of information. I'm an OOTP5 vet and even I have difficulty easily finding what I'm looking for on many screens.
I tried to use dropdowns in the menus to limit the amount of information presented at once. That said, keeping sections highlighted helps provide breadcrumbs to get back. I added hotlinks at the bottom for the pros who want quick access to their pages. Overall, there is less information presented at once, but I believe doing so in a clear visual hierarchy makes it easier to navigate and quickly find what you're looking for.
Anyway, take a look below and let me know if you have any thoughts. There's obviously a lot of functionality assumed in the mockup, but I figure it's a continuation of the dialogue.