Announcement

Collapse
No announcement yet.

Main menu/Server browser/Hub Browser

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    [CONCEPT ART] Main menu/Server browser/Hub Browser

    UPDATE 27.07.15
    You can find all images attached to the first post.
    There are two concepts, see the files names. First was inspired by Heart of the Storm menu (MOBA by Blizzard) and second is based on Epic's concepts.
    I tried to focus on what elements to include and where to place them.
    For a better view download them and open in full screen.
     
    Spoiler
    Attached Files
    Last edited by Bosch; 12-10-2015, 09:32 AM.

    #2
    The visual you went with, is not really my thing. But, you have interesting ideas in the way you have organized things. At first I wasn't seeing what you had done internally, and only saw it visually, so I went back to this thread to check it again, and it's cool. Good UI
    work: www.POLEGAR.pt

    Comment


      #3
      Originally posted by HeisenbergTrip View Post
      At first I wasn't seeing what you had done internally, and only saw it visually
      Yep, visuals are secondary here, i'm not an artist, main goal was to explore possible options, usability and show the layout of all permanent elements.
      I'll make some amendments soon.

      Comment


        #4
        Updated the concept. The changes and additions are:
        - more uniform color scheme;
        - status button under the player model;
        - nicer Quick Items icons. Signature button (previously Taunts) supposed to lead to taunts, stingers, custom bullet tracers and other non-wearable items;
        - scrollable news menu with hyperlinks at the top of the screen. If you press team link the team page will open, so you can see the detailed results of recent game played by team member. Player nick will lead you to his profile, message about booster will lead you to your item´╗┐s or to the market and so on;
        - "Scan menu" at the lower right corner. If you searching for game ("scan for available games" button) it will lead you to the server browser, making it sort of quick game button, but the main idea is to use it to find right people ("scan for available players"), when in a lobby and looking for players. If you've set your status to "open for games", you will be shown in the search results and can be invited.

        Comment


          #5
          Interstellar SPOTTED !

          Comment


            #6
            In a meantime made another UI concept. I took what Epic have shown and added all the stuff I think is needed.
            The UI is strongly tied up with systems that are not even there yet or being shaped up, so I had to suggest the best way of how it should work - for this reason besides visual side there is some ideas on various things with "why's" and "how to's" explained.

            1. First thing I want mention is custom avatars for everything - for players, teams and servers/hubs - just like social networks do. Endlessly seeing malcolms and xans will become boring on the first day. Custom avatars could be fee based option (to limit players going mad with it and, well, earn money) and will require premoderation, but it's the nice way to express yourself, people love such things.

            2. Queue and joining matches.
            We don't need Spectate button anywhere, it's enough to have Join and double-click option.
            - if you join a full match you'll join as spectator and be automatically placed in queue;
            - if you just want to spectate you quit queue and spectate;
            - if you join a match with a free player slots, you join as spectator and have to press "join the match" in game, after all of the textures loaded, you looked around and said hi to everyone, because now most players join and do nothing for a minute;
            - the only time you join as a player is from the lobby when the match is created.
            Altogether, it's very simple - you always join as spectator first, and if match is full there is queue mechanism to join when someone leaves.

            3. For player ranks I used numbers from 1 to 99999 (1 being the top place) to show player rankings. Tried to add colors to player ranks, like bronze color for 99999-67999, silver for 679999, gold for 35999-3999 and red for 3999-1, but it looked hideous.
            Any match also has average rank, based on ranks of participating players - it's a nice way to find out what to expect from the match without listing everbody's rank.
            Your team also has separate rank and there is separate team ladder, because all this progression stuff keeps people motivated.

            4. HUB and server filters are very basic and there is specific set for each page of HUB browser - you can limit ping or average match rank and hide empty/full instances.

            5. The difference between friend, team member and a player you follow is that you have easy access to profile page of all three groups, but you can write private messages to friends and team mates only and you can earn points for team ladder with team mates only. Basically "team mates" are the people you play often and competitive, "friends" group is for occasional play and to recruit players for random match, "follow" is for easy access to matches (streams, replays, results) of top wan.. players of the game.

            6. Scroll bars in menu windows - there is space reserved for them, but they appear only if there is something to actually scroll. Just like Twitter or Twitch are engineered.


            More in images below. Basically you'll see two pages of HUB browser - one is preview and the second is specific HUB opened. Absolutely the same interface could be used for Server browser, with a few more columns and smaller font size for the server list.

            1. Basic view, everything is closed.


            2. Here we opened HUB/Server browser and switched on Local news feed (at the top) and .


            3 step. Switched on Friends/Team Mates preview menu (lower right corner) and selected specific HUB to see the details on ongoing matches.


            4. Opened specific HUB and chose specific match to join. Basic team profile is switched to team ladder tab.


            Details on step 3 and 4 explained further:




            The best way to view it is to download and open full-screen images.
            Last edited by Bosch; 07-16-2015, 06:35 PM. Reason: fixed link #4

            Comment


              #7
              This is very reminiscent of the Eve hud; which is very functional but not immediately obvious.

              Comment


                #8
                I can agree with above. It's maybe a little bit busy looking but it has like all kinds of stuff you might possibly wanna have there. One simple feedback I'd have would be to play around with Topic colors... like the ones for "Mutators" "Top players" "Players in match" etc and make the titles in a different color than grey, maybe red or blue (blue makes sense with the current UT logo color) to make them stand out more which makes it instantly easier to read/easier to focus/finding the info you're interested in.
                Last edited by RPGWiZ4RD; 07-16-2015, 02:37 PM.

                Comment


                  #9
                  Originally posted by NATO_chrisjm View Post
                  This is very reminiscent of the Eve hud; which is very functional but not immediately obvious.
                  Eve's interface is overly complex. In a nutshell, it's just a huge number of menus and windows. Most Eve players probably don't know what half of of it is for or how to configure it. One of the reasons Eve players themselves call it "Spreadsheets in Space".

                  Such an interface works ok for a such a slow paced game where huge gangs of players just sit around camping a gate all day and chatting on voice coms while waiting for the one player dumb enough to go through it so they can kill him. Eve doesn't even use movement keys, there is no WASD or w/e equivalent (except inside stations which is just fluff that's completely irrelevant to actual gameplay), movement is point, click and wait... But for an FPS shooter, god no!
                  Last edited by MoxNix; 07-16-2015, 02:58 PM.

                  Comment


                    #10
                    Wouldn't compare it with Eve's UI. First of all there is light years difference in game complexity, EvE is a whole virtual world, while we aim for simpliest form of social network (friends, profiles, links). While it sounds simple, it's complex by definition and if you do it without lists, flags and avatars and similar stuff it will be inconvenient.

                    If you follow the images step by step you'll see that it's quite simple actually - you have four logical strips (columns) of information - list of hubs (or servers), the next strip is server logo and chat window, third strip is server related information and last strip is player related information. That's it. I think anybody will get used to it quickly.

                    Also you can switch off some things like news feed, friend list and it will look even easier.
                    The good thing that browser is the most complex thing in UI and in my concept you have access to all possible information on a single screen, without loads of pop-ups and additional windows.

                    Comment


                      #11
                      What is good about this layout is that you got everything you need in one place, very little clicks needed to browse through it compared to currently when you have to go back n forth between pages so this alone would make me like that GUI a lot. :P

                      Comment


                        #12
                        Originally posted by RPGWiZ4RD View Post
                        I can agree with above. It's maybe a little bit busy looking but it has like all kinds of stuff you might possibly wanna have there. One simple feedback I'd have would be to play around with Topic colors... like the ones for "Mutators" "Top players" "Players in match" etc and make the titles in a different color than grey, maybe red or blue (blue makes sense with the current UT logo color) to make them stand out more which makes it instantly easier to read/easier to focus/finding the info you're interested in.
                        I also felt that it could be improved, firstly because of underlined text, which looks really cheap if it's not a link. Tried a bunch of variants and can say that permanent bright colors look bad on dark background, gradients look even worse, not even worth uploading. But after hour of doodling I came up with something I liked:

                        Comment


                          #13
                          It's amazing how tiny bit edits can make such a big change. :P Yea I immediatly felt this is now easier to read/grasp quickly. For me this is quite perfect now.

                          Comment


                            #14
                            Minimal design elements that contain all relevant information.

                            I really, REALLY want to see the Hub element be removed. It makes browsing the selection of servers a tedious chore.

                            Comment


                              #15
                              Originally posted by Bosch View Post
                              Awesome! Lot of work and thought in there, I hope Epic checks this.
                              work: www.POLEGAR.pt

                              Comment

                              Working...
                              X