frontend update discussion and suggestions
Everyone's aware, that while the UI works, and does what's intended to do in general, it's far from very intuitive in certain areas, not that much tablet friendly (even tho the game doesn't have touch screen support yet - or i might be wrong) and it has a lot of sub-menus with little information, while others with a little too much.
This is a a VERY rough (guess you can call it the menu skeleton) main menu redesign, it simply fits 2 sub-menus inside the main one, and eliminates the need to "reserve" all that bottom space for the "quit" button where there is little with this new 16:9 size ration tendency.
The idea for the login part, is simply a 3~4 line mini-log, that keeps the user up to date to the server status and what's happening between pressing the huge button and finally getting into the game lobby. The objective, is to avoid panic, as the servers sometimes fails and people feel confused.
Even tho I've added little icons to the side of the text as an example, it would probably just look best to have the actual area behind the text themed to what's inside.
The "Watch Replays" could be a film reel that "moved" when the mouse was over it (for the mouse users), and the "Options" just have a bunch of animated gears on mouse over.
Regarding the online game menu... I just butchered my latest reorganization patch (which unfortunately wasn't accepted back then, and now it's outdated) screenshot a little, and here it is!
Basically the chat area would have a maximum pixel size, lets say 360, all the rest of the screen belongs to the game list.
Basically just moved stuff around, tho the buttons on the side could still get a little bit bigger in height, would need testing on an actual touch screen before that.
And please ignore the window frame until i decide to cut it out xD
### image removed to make the post more light, check POST #12 for the result. ###
And now... an alternative game filter!
Much much more useful. This example, this would filter out all those Shoppa and Crazy games!
Stay tuned for more updates and
feel free to share your opinion and post your own mockups.
Nice, seriously I like it. But I'll change something. I will upload it later.
Hedgewars Tournament 2015
Go for it, I'll update it when i can myself! ^_^
Who knows if ppl like a certain model\skeleton a lot, we can actually give it some eye candy and make some parts animated.
And what about a completely new side menu for the lobby?
Includes new features, one of them you can already find in .16-dev!
Yeah, I know, no eye candy, but that was never the point, this is just a menu skeleton.
### side menu image removed to save clutter, check it already applied a few posts down ###
Don't think there's a point in having a button saying "Clear" to erase the whole text in the search area, anyone who ever got a chance to use a regular calculator knows what the "C" is, no matter were they're from.
I don't undestand why it say: ''Filter'' if I make the room? I don't need at 'filter' or yes? Nice, I can't wait to see it finished,
Hedgewars Tournament 2015
The filter is not for the room creation, the filter is a separate sub menu to do just that, filter games.
Atm we have 3 drop-down menus to do that, but it feels incomplete, and i find that i usually dont want just 1 game type to appear. It would make some sense if there were always like 100+ games at all times, and you had a good chance of finding exactly the game u wanted but since we usually don't have so many...
This way you can filter out just the stuff you don't want.
For example, I don't like shoppa or crazy games, so I can just unselect them and prevent them from appearing completely.
Oh, and having those drop-down moved to a sub menu also gives space for the game list.
Hmmm,maybe you could add "Other" to gameplay modes,for the custom gameplays.
I wasn't aware of any custom Gameplay modes being used quite a little already, but if that's the case, ill just add a "*Custom" option, for all those that are not the ones included by default.
I've also added some new options that are gonna be available in .16 so everyone has one more reason to be eager for a new release.
The issue now is that the menu feels a little... too full right now. Of course the image is only around 800x600, and people don't really use these resolutions much anymore, 1024x600 would make it look just perfectly fine for example.
Yet another small idea-update, this time for the team list.
It always confused me that connected players, had 2 computers as an icon, around the same as the CPU, but without the difficulty bars. So that clearly needed some change, tho I admin, i still don't think i have the right icon to replace that one.
The colors are very "blew!" but the idea in general is to make it easier to understand who's CPU and who's a player, and of course, who added them, it also reserves the space for the 8 teams from the start.
As a downside, it takes a little bit more space since every team has more information on it.
random improvements:
- Make the CPU difficulty number a different color depending on the difficulty
- Improve the images a lot obviously or even change them
- color the heart with the flag they've chosen
### image removed to save some clutter ###
So my last idea had 1 major flaw... it used too much space, well, not THAT much more but it still made a difference, so I think maybe a more subtle change would do the trick.
Still, I'm keeping the place holders on the mockups, they make sense as it helps fixing the maximum space needed.
The hedge-icons (on the left, the big ones) also need to be replaced, I'm not sure if it's just me, but the hogs used in game are MUCH more awesome than the ones on the icons here.
I think it's proportion related, the ones ingame just have the size of everything (eyes, body, arms, legs, mouth and spikes) better distributed and in better positions.
You can easily compare them using the "little eight hogs on the right" with the one on the left.
The one on the left has smaller eyes, different bigger spikes, smaller hands and smaller feet in a position it makes it look like it's balancing itself on his toes.
And... it's time to make it easier to chose a hat and setup your keys!
The hat selection menu couldn't be more simple, just make it the same as this little page that nemo created: http://m8y.org/hw/hats/hats_js_anim.xhtml and add menus around it. :P
Kind of like this 60sec concept:
As for the key setup...
Yep, out with all those sub menus, and in with a simple streamed interface, this time with some eye candy so you get a better idea.
The bottom buttons still need to be moved, ill work on that later when i have a little more time.
Now, there is one point that is showing itself quite annoying.
There is actually no minimum size for the user interface.
The "minimum res." for the current 0.9.15 Hedgewars UI is 760x580, but this makes at least 2 menus practically unusable.
Most phones sold today, already use 800x480 or 960x640 resolution, (just double checked, even a cheap €100 phone, tax included, had 800x480) which, considering the size or their screens is already quite the overkill. Would much rather see all that extra power used to make better apps and save battery life instead of feeding pixels, but that is not the point!
The point is, the minimum screen size you see in normal computers nowadays is 1024x600, present in most of the so called "notebooks". These computers are fine for normal tasks, but some, depending on their configuration, struggle a little already to run Hedgewars due to their ridiculously crappy GPU. Meaning... you'll likely run it in full-screen anyway, so the laptop can handle it.
The most commonly sold laptops come with 1366x768 screens (yeah... 768... like your 10+ yo screen that already didn't have enough vertical res. back then), which means that you're able to fit a 1024x600 in window mode in there easily.
Also, for portable devices that basically only accept touch input, Koda and Xeli have been using a completely different UI, which means that this one doesn't even have to be "fully optimized for the best touch experience on small screens", like having huge scroll bars in case they're needed and huge buttons, between other things.
All of this being said, think that from now on, for planing purposes, and getting a better idea of how a finished, more polished UI would look like, all mockups will be idealized for a 1024x600 resolution.
So lets add some more eye candy to this mixture.
Yes, there are loads of imperfections, I just use Paint and Gimp to chop stuff and glue them around, no point wasting too much time building these.
...and, yes, it would look MUCH BETTER if you could actually see the usual background due to window and button transparency, but I can't afford to lose time with those details.
Also, the theme is still the same, the button images are just place-holders and the button on the left needs a lot of work.
This is just to present some re-ordering to likely the most used menu in Hedgewars.
This also considers the user would be using only 600px of height res. for this window, the buttons would look further apart if the window was stretched, leaving the Room Creation and the join+refresh+filter options at the top and the filter at the bottom.
The chat area would stay fixed (size) as it brings absolutely no advantages in it being bigger.
As there is no working Password system yet, that could be removed to give it even more space for now.
Hi Im gonna do
¡no! Im joking I edited your last picture and it's look better, I think. Loo it :
Hedgewars Tournament 2015
Got nothing against the text on those buttons, except I'm not sure if all languages will fit in that size, but that's a matter of testing and checking.
Now the text between the windows I find it kinda pointless, just because you already get it when you log in to the server. Also if the all those "join" and "left" messages for random players are filtered out and only the ones friend-related are displayed, that text will surely stay there for quite a long time, hardly anyone uses that chat space.
I've also updated another one of my mockups check back on POST #1.
I'll update the Ui of the ''Room'' and I'll change your 'Help Button'.
Hedgewars Tournament 2015
Hi. how you edit the Online Room, I just change the ''Help button'' hope you like it.
For see the details you have to zoom it. Maybe you'll found an other yellow that is mine fail (it can be edit, of course).
Hedgewars Tournament 2015
Okey this is my best work: The Ui for the Room.
How you can see the background whit the Hedgewar's walkpaper, instead a Lump (lump on, lump off) I made a Hedgehog (Off) and a Golder hedgehog (On).
And yes it have the Inu's team cuz I copy the scheme from this: http://dl.dropbox.com/u/8510886/hedgewars/16.png
Well The UI room, whit the lump off:
The UI room, whit the lump On:
Hedgewars Tournament 2015
Hmmm, the little light-bulb hog seems a pretty good idea, tho for the "off" one I'd probably just go with the outline.
Now... to resort this menu a little bit...
Thanks.
Here is the menu changed. I added a Colour square and the count of the hogs, hope you like it.
Hedgewars Tournament 2015
Seems like I've been busy, but Randy, was bleeding with ideas!
Anyway, here's a small sketch on how the mission menu could be re-done.
Yes please. I've asked for this same concept before. Not like there is no shortage of space on the mission screen.
Ideally, it would actually be nice to have a "More Info" / "?" button in online game rooms, too. It would function much the same as the already-existing "Setup" button. However, when pushed it would bring up a screen with a more detailed "How-To-Play" for the currently selected gameplay mode and/or scheme options.
It would also be nice if we could click some kind of view button to check out what game flags and weapons our host has set in the case that he is using a custom scheme/wepset.
mikade
Hedgewars Developer
Hello guys. ¿UI's work stoped? I wanna work on pictures
Hedgewars Tournament 2015
I've just been busy with work I actually have schedules to finish, and enjoying my vacations when I can, tho everyone's free to contribute with suggestions.
Also there seem to be old mockups developed by one of the actual devs that were never available to the users to check out, which is a real shame.
And one more thing. While these mockups are based on the current theme and try to stay a little faithful to the original layout, a complete revamp is also welcome, so let your imagination run wild.
There are also some bad news from what I understood, .16 should still include the old "online game list" in which you can hardly fit any games at all, the games still wont be sorted by status by default, the button layouts are still team-associated and the weapon offsets from .14 wont be back yet either. *sad panda*
(there will be a lot of new other features tho :P)
I like this a lot
+1
Have been working on it for a while, little by little, trying to figure out were to place the stuff to save space but trying to keep it clean. Again, these "idealizations" consider a 1024x600 resolution, so good news for all the users with the smallest most common resolution being sold.
The buttons should be very self-explanatory, but... (from left to right)
1st - locks room (no more players are allowed to join as the room disappears from the game list)
2nd - locks the teams so that no more can be added
3rd - updates the game-lobby name
4th - sets the seed for the map
5th - goes to the settings (configurations)
6th - goes into "spectator" mode - for games already in progress
7th - ready button (same icon and all)
8th - PLAY button... pretty universal...
Ideally the "Play" button would change color...
Red :: While there are less than 2 teams added
Yellow :: While there are 2 or more teams but not everyone is "Ready!"
Green (glowing green?) :: There are 2 or more teams added and everyone is ready.
Edit:
Still not happy with it at all, too much happening there.
inu, what about all this? Any admin interesting?
Hedgewars Tournament 2015
Hmm, I've been thinking, and the whole filter menu is really kind of a crazy overkill.
It would just be so much more simple to be able to click on the column label and have that sort the games by that field, like the OS's do!
Guess I'll build a little mockup of that as well.
Edit: Some time later...
So, here it is. Made the "refresh" and "join\play" buttons a little shorter, a few more window corners less round to give it a smoother look and added a little "arrow" in front of the "Room Name" to suggest that it's clickable\usable.
Since that area only has 2 buttons now, the 3rd one can be used to access the admin menu, which only admins can see...
So, I'm on vacation again, might work on this topic again when I have little bits of time to spare, or I'm just bored, or waiting somewhere...
However, my approach is gonna be slightly different, as in, I'll try to make it even more "touchscreen" friendly. This would make the UI the same for every system, as long as the screen has at least a resolution of 1024x600 and it's 7 inches or bigger.
For smaller systems there's the mobile frontend.
Ok, had this one partially ready for a while, so just made a few tweaks and...
Being able to slide the viewable area up and down will finally allow us go get all needed extra space! There still has to be a minimum size for each of the 2 areas, but as long as we can read the last 3 to 5 lines and see 2 games, it's all good!
Hmmm, the sliding would probably create even more 'bugs' since QT doesn't handle automatic cell space distribution that well at all tho...
(Yeah, might have to tweak this mockup a bit.)
I want to take this project again: Here is my first mock-up/suggestion
Hedgewars Tournament 2015
I like this, though I really think Campaign or Multiplayer should be first and Quick Game be last. Also perhaps the new frontend could have random themes chosen for the background instead of just a select one (With Christmas and Halloween reserved for only those times of year), but that's just my thoughts.
Well the order of the options are just random. But I really like the idea of a manual selection for the background. Like here http://m8y.org/hw/hats/hats_js_anim.xhtml
Or maybe a weekly change of it?
+1 for the idea
Hedgewars Tournament 2015
+1 a weekly change, like having a competition, or a random map backround
{} {}
\___/ - Happy
I really like randy idea.
+1