Topic: Crafting the UI (WIP)

Jorge Avila on December 07, 2011, 11:40:15 PM

Jorge Avila

  • Graphic design
  • Moderator
  • Full Member
  • *****
  • Posts: 171
  • Karma: +6/-0
    • View Profile
    • Portfolio/photography
I'm going to take this place to post the progress I made over our current UI, I will avoid stuff related to look & feel and focus on the behaviour of it.
As always your comments are appreciated and required, just take your time to write.


First of all:
Remove the screen that appears after the game is loaded
Is already displayed in the loading screen, and there is no need to display it again.

The main menu



The actual main menu is pretty consistent with what I am proposing here, just a few differences to improve it.

The changes:

The mesh is displayed at the centre of the screen, and closer.

Host and Join grouped into one menu (multiplayer)

To delete a hero you must select him first, to avoid accidental clicks errors.

Also, if you delete him, the alert message should be:


Create a hero



The main difference is the new panel to show a resume of the hero story (*Bio*), talking about his past, his abilities, his reason to fight, etc. This panel could be mixed with the *creation* panel.

Also i switched the list selector by this *kind of slider* which force the user to pass trough all the options. The reason to switch is to "encourage" the user to discover all the possible options before to chose a hero.

Also as a nice feature would be awesome if these heroes have animations and are placed into the nice scene that Stefan has madden.

The multi-player screen:



It consist intwo dialogues grouped in a screen. You can switch between them by selecting any area of them (the title, the frame, the inputs, etc).

As you may notice, I focus on keep the user informed about where he is, that's why the highlights.

This concept is temporary, I'm looking forward to know further the version that trapdoor is planning.

what happened with the credits dude?
I don't know, i'm figuring a way to display them nicely, they could be displayed while the game is loaded, or in short part like while loading a map you can display at the cookie of fortunes way: "hey do  you know that Kalimgard has written the story of this game? Go to sumwars.org/credits and discover who made this game".

Something like that, ideas are appreciated.

That's all for today (December 07, 2011)


The mini-map

Hi folks, here I'm uploading another design.
In this case the mini-map.

The idea behind it that points of interest will be marked in the map, and it will act like a compass (more like a gps) guiding the player to where he needs to go, it could be gradually implemented.

The idea is that those bubbles orbit around the mini-map pointing to the direction the player must go to find them.
When he is near the target the bubble disappear and the icon is showed in the mini-map.

I think it's pretty much explained in the sketch, but if you have any question feel free to ask.



New features? good points? bad points?
I think  I don't have to remind you that your criticizes are very welcome.
And I've uploaded the svg source, so, if anyone wants to contribute with a modification just go ahead.
That's all for today! (December 20, 2011)
« Last Edit: December 21, 2011, 12:11:42 AM by Jorge Avila »
Logged
  • Read 5895 times
  • Category Graphics
Comments: 12

dezGusty on December 08, 2011, 06:53:12 AM
Reply #1

dezGusty

  • Artists
  • Full Member
  • *
  • Posts: 245
  • Karma: +8/-0
    • View Profile
Hi,

I really like the prototyping pictures :)

I also like the idea of making the credits less traditional. But I think the team will want to give the option for people to see the credits in a traditional way.

Keep up the good work.
Logged

Lastmerlin on December 11, 2011, 09:02:32 AM
Reply #2

Lastmerlin

  • Administrator
  • Sr. Member
  • *****
  • Posts: 463
  • Karma: +5/-0
    • View Profile
Fast reply (sorry for not answering earlier):
The change to the delete hero button is simple and a good idea.
The Biography is pure story content (just a text the user may enter) - right ? This sounds easy to implement, however I somewhat doubt, that many users will really use it.
Concerning animations: Heros in creation _should_ have animations O_O I have to check this. However, they only perform animations, lvl1 players can perform (simple attack etc).

On the multiplayer part: Combining create game and join game into one screen does not sound good to me. Introducing this (most important information) by checking which window is highlighted is not a good design. As soon as we have a matchmaking server, the workflow could be:
Join Server -> (Join Game | Create Game). But the latter will be still a split step.
Logged

Jorge Avila on December 11, 2011, 03:22:13 PM
Reply #3

Jorge Avila

  • Graphic design
  • Moderator
  • Full Member
  • *****
  • Posts: 171
  • Karma: +6/-0
    • View Profile
    • Portfolio/photography
Hi, thanks for the reply Lastmerlin:

About animations, i'm thinking in an "idle" animations, just  a little of movement.
About the biography: this panel is to read, not write. That will be the story of his past, and what special abilities he have.
Basically is what is that hero for.
Example:

Priest
Story: Once upon a time, he was the most happy person of the town. But one day the evil came and destroy all the living creatures.
Now he is away from the goodness, and embrace the need of revenge.

Special abilities: heal himself and folks, Improve strenght of allies, physical attack at low range.


That's the story behind it.

Also I'm pretty sure that this multiplayer screen is not what it should be, but the basics are in there. And it goes away from technicals terms like "host", which means "create a new multiplayer game". My decition to make it selectable is to avoid having an additional step and by default see the "Join to a game", also is true that "create a new game" could be a secondary button and when is pressed display the "host screen".
« Last Edit: December 11, 2011, 03:24:14 PM by Jorge Avila »
Logged

artisticdude on December 12, 2011, 05:17:42 PM
Reply #4

artisticdude

  • Foil/Epee Fencer
  • Jr. Member
  • **
  • Posts: 54
  • Karma: +0/-0
  • Sound Effects Guy/Pixel Artist
    • View Profile
I wonder if the 'positive and negative' buttons could be switched. In other words, if 'accept' could be on the right side and 'back' could be on the left, which seems like it would be more intuitive to me. Since you read from left to right, you would expect that 'back' would be towards the left, and 'go to the next page' would be on the right. Same for 'accept' and 'deny', or any other positive/negative combination. So the right button = continuation, progress, acceptance, and the left button = returning, negating, denying. It's a concept that is used fairly frequently in UI design I believe, and I for one might have trouble accidentally clicking 'back' instead of 'accept' simply because I expect their placement to be reversed. :-\
« Last Edit: December 12, 2011, 05:19:16 PM by artisticdude »
Trifles make perfection, and perfection is no trifle.
                                                              --Michelangelo
Logged

Jorge Avila on December 20, 2011, 11:56:45 PM
Reply #5

Jorge Avila

  • Graphic design
  • Moderator
  • Full Member
  • *****
  • Posts: 171
  • Karma: +6/-0
    • View Profile
    • Portfolio/photography
Hi, Artisticdude:
Thank you for pointing this. I think that is very important to define the way we will be communicating with the user.
If positive on the left, negative on the right.

I think that the real matter behind it is stay with a code which the user could understand and could get used to it.

It's about "where I put the close button?"
Some people will prefer it at the left, and some others will not.

The important thing is that they easily understand where is it.

Second motive of the  post: I've made an update. I designed a new concept for the mini-map. Check it at the final of my first post.
« Last Edit: December 21, 2011, 12:03:10 AM by Jorge Avila »
Logged

Kulik on December 21, 2011, 09:31:35 AM
Reply #6

Kulik

  • Newbie
  • *
  • Posts: 22
  • Karma: +1/-0
    • View Profile
Hi,
the minimap looks cool.

I would maybe make the remote out of minimap points of interest smaller than on the map. They would get bigger the closer you get to them. This would allow the player to prioritise easily and avoid going in circles.

Also, are you planning an overhaul of the overlay map (currently M key)? Right now it doesn't look pretty, doesn't rotate with camera and is quite confusing :-)
Logged

protogenes on December 21, 2011, 12:06:14 PM
Reply #7

protogenes

  • Administrator
  • Jr. Member
  • *****
  • Posts: 59
  • Karma: +5/-0
    • View Profile
Also, are you planning an overhaul of the overlay map (currently M key)? Right now it doesn't look pretty, doesn't rotate with camera and is quite confusing :-)
This is the current "minimap". It was only a temporary solution, but became one of those nice permanent temporary solutions ;D Anyway I think hiponboy's sketch will be a replacement for the overlay map. And I think the overlay map should not rotate for better navigation. And it looks like hiponboy's minimap won't rotate either.

I also second artisticdude's wish to swap the <Back> and <Okay> buttons in dialoges. It is unusual and unnatural to have the back button on the right side.
Logged

dezGusty on December 21, 2011, 03:39:15 PM
Reply #8

dezGusty

  • Artists
  • Full Member
  • *
  • Posts: 245
  • Karma: +8/-0
    • View Profile
I would also propose to have the Tilde Key (~) as the default map key, instead of "M". But other than that, map design is nice; I'm also against rotating the camera.
Logged

protogenes on December 21, 2011, 04:32:11 PM
Reply #9

protogenes

  • Administrator
  • Jr. Member
  • *****
  • Posts: 59
  • Karma: +5/-0
    • View Profile
I would also propose to have the Tilde Key (~) as the default map key, instead of "M". But other than that, map design is nice; I'm also against rotating the camera.
Those keys are chosen to match the first letter of the function.. Map, Inventory, Character, Party... I think that is a good and common way to do it. And my question is: which key is the "~ Key"? Either on an English or German Keyboard layout (QWERTY/Z) it isn't a key...
Logged

dezGusty on December 21, 2011, 05:07:56 PM
Reply #10

dezGusty

  • Artists
  • Full Member
  • *
  • Posts: 245
  • Karma: +8/-0
    • View Profile
Why the [~] key: because it's (on most layouts) the key next to the key [1]. And it's the closest to the Diablo-style [Tab] key (as it is just underneath it). For most Diablo players, the brain is already wired into pressing that area of the keyboard for map display. Just moving it a bit up is not a major change. Moving it all the way to where the [M] key is located, is a bigger change.
Of course, these are just default settings, which can be customized by any user. But I believe in the power of defaults: http://www.codinghorror.com/blog/2007/01/the-power-of-defaults.html.
Using the keys M, I, C, P... works to a certain point ...for English. ([T] is skill Tree... why not use ). But that's not why we use those keys; we borrow a lot of already established shortcuts, by Diablo2 and by Torchlight from what I see :).
Anyway, those are just my 2 cents.
Logged

greengecko on December 21, 2011, 06:04:21 PM
Reply #11

greengecko

  • Jr. Member
  • **
  • Posts: 77
  • Karma: +0/-0
    • View Profile
Hey, I didn ´t read the thread.
I just had a look about your prototypes.
And I rly like them :)

Especially the minimap! That feature would be rly nice!
Logged

Jorge Avila on December 21, 2011, 07:44:24 PM
Reply #12

Jorge Avila

  • Graphic design
  • Moderator
  • Full Member
  • *****
  • Posts: 171
  • Karma: +6/-0
    • View Profile
    • Portfolio/photography
I believe in the power of defaults too.

First: The user will use the map in very rare circumstances because
the mini-map will relieve the user from doing that.

Also... which is the most common hotkeys for games? not just for diablo for rpg games.
If you can do some research and post your results, i think that this would help us to decide.

I believe that most games use M is the map.
Logged