HM3: New UI ideas

I've been working for the last couple of weeks on rethinking the layout and user interface for HeroMachine 3. Here's a first pass at translating these thoughts into a design (click for a larger version):

newui

Some of these ideas are from Mark Shute's excellent usability study from a few months back, while some are new on my part. The main problems the current rough layout pose to my mind are:

  • No clear starting point. You're just supposed to know that you start by clicking on the slot selection drop-down, in the middle of the far-right side of the app. In Western writing, obviously, you go from the left to the right, top to bottom, so this placement is way off where you would expect something important to go. To address this, I've consolidated both the slot and set drop-down boxes into a "Add New Item" button in the top left portion of the screen. Clicking on this would bring up first the slot-selection menu (Head, Headgear, Body, ItemRight, etc), then the set-selection menu (Standard, Blades, etc.). Once you've chosen a set, you get the grid of black and white items at the bottom so you can pick a specific item.
  • Difficulty knowing which item you're currently working on, and knowing what all is on your character. Just below the "Add New Item" button is a scrolling list of all the items currently on the canvas that make up your character. Clicking on any one of these items will make that item current, bringing up its colors and transformations and other item-specific information. Ideally you'd be able to relayer items by dragging them up and down this list. Viewing the character in this list fashion should make it very easy to know exactly what you are dealing with at any given time. This was Mark's suggestion and I think it's brilliant.
  • Not obvious that you can click on items in the canvas area directly to select them. I noticed this particularly when sitting down with younger kids to design characters, and when talking with the UGO staff on the very first iteration of this technology (I think it was the Zombie mini, actually). I happened to mention I was clicking on an item and they were all like "You can do that?" I've addressed this by placing any tool that can directly affect the character, from basic selection to scaling and rotating and moving, to the bar just to the right of the "Add New Item" button. Depending on which of these is currently selected, making an item current (or adding a new one to the canvas) will result in a selection box appearing around it. This will immediately reinforce which item is current. If the Rotate tool is active, grabbing any one of the eight selection handles will allow you to rotate the item. If scaling is active, dragging a handle will scale it. And so on.
  • Too many buttons. Having all those buttons in the current layout between the canvas area and the ad was a bit confusing. There are an awful lot of them, some of which are for universal controls (like printing or help), while others were item-specific (coloring hair and skin). At Mark's suggestion, separating these functions out into more specific areas should help ease confusion. For instance, making just one "Color" tab instead of three, and moving the color-centered controls (like the paint brush and the Color All Skin/Hair) there would make more sense.

There's a lot more "under the hood work" to be addressed as well, naturally, but before I start coding I want to make sure I have the layout and user interface nailed, or as close as I can get, anyway.

I'm eager to hear your thoughts on all this, please let me know what you think, if this promises to be better or worse, obvious pitfalls you see, etc. Thanks!

38 Responses to HM3: New UI ideas

  1. Nice.

    I’m used to having all the controls on the right side, so to me it’s a little strange to flip them. However, the reason you stated is very good, I support this.

    I LOVE the idea of the Transform Handles. Right now, it’s a pain to work with completely transparent items layered behind other items (and for some reason I do that a lot). The handles should take care of that.

    I also like the idea of layering items by dragging them in the list. Also, I’d like to see the layer’s number somewhere.

    Small suggestion, if a slot has only one set of items then “auto choose it”.

    BIG suggestion, increase the scale limits to 1000% or 999%. This would open a lot more of possibilities for already existing items.

    Another big suggestion. Change the saving system. The current system has several negative points:
    *You don’t have direct control over your save files, flash has the control.
    *The save file is difficult to find (and therefor, difficult to move or copy)
    *The save files are considered temporary files by windows, so they are deleted by many applications.
    *If you accidentally delete the save file, it doesn’t go to the recycle bin, it’s permanently erased.

    Because of those reasons I believe there should be a saving system that allow you to more directly handle the save file(let me choose where I want my file to be, don’t send it to some forsaken folder in the darkest corner of my hard drive :p ).

    And of course, the usual suggestions, undo button (even with a single action this would be a huge help), some kind of zoom tool, a swap colors button and some type of Import function.

    Keep up the good work 🙂

  2. Thanks Neon. Whether the canvas should be on the right or left was a puzzle for me. I finally realized that I have it on the right currently because I draw right-handed. Putting it on the left with the CONTROLS on the right felt unnatural, because then it was almost like I was drawing on the opposite side of my body. But it’s on a computer so that doesn’t make actual sense, just mental sense. Or something.

    Saving and loading is definitely something that’s going to take a lot of work and thought. We’ve gone over it a couple of times and I will be doing at least one more dedicated idea roundup before coding starts. At this point my thought is that you’ll be able to save characters in multiple ways: online on the HeroMachine server; in the current method of saving the .sol file to your hard drive via Flash; or via the old character string method. On one hand it’s good to have options, on the other hand it’s bad to have so many options it’s confusing. But I can put them behind an “advanced” tab or something.

  3. I like the new layout/interface you’re proposing, I believe it will make everything easier to use. And I’m glad you’re doing something different with the transform feature the way it works now is kind of a pain.

  4. I really like the layout Jeff 😀 , just wondering if you’re planning to bring out female hands soon, although I apologise at the fact that over the last few additions to HM3 I seem to be kinda putting presure on you by asking you do do it.

  5. everything looks good to me but you said only one color tab as opposed to the imediate thing i notice about that is if you look at the range of colors in the hm3 bet it would take up the whole space unless you thew in a scroll bar. like this. So instead of tabs everything is in that space and you just have to scroll down to which ever color you wanted.

    Color 1
    (all colors)
    Color 2
    (all colors)
    Line Color
    (All colors)

    This way its still obvious that thing that can more then one color and you can scroll to which ever heading you want to color.

    Conversely you have a paint brush tool appear after selecting a color and click on the item/ section of item to be colored, this however could be to confusing and cumbersome due to images with many items/layers, i prefer each item be colored closer to how they are now.
    I hope this is clear enough.

  6. Jeff, this may be an off-topic comment, but I hope you’ll put it in the “bugs to be fixed” file.

    For me the biggest problem with HM 3 right now is the “Transform” menu. When you start designing a character, you start with one of the default body types and sizes, and then you can choose to “transform all items” if you want a non-standard body type: something like a “dwarf” or a “brick” from HM 2.5 or one of the “teen” sizes from Shakti Warriors. So far so good, right? The problem comes when I try to save and re-display the transformed image. I can click on the J or P button to save the image, but when I open the saved image in my image viewing application (in my case, Microsoft Office Picture Manager) the image is redisplayed as the original standard body type. It’s as if the file or the application totally ignore any transformation I made. Am I doing something wrong, or is there a flaw in the coding? If you’re going to be working “under the hood” for the time being, this is something I’d really like to see addressed.

  7. “All items” scale also resets when you go into headshot view.

  8. I really like the idea of handles on items to be moved, transformed, rotated, etc., rather than the current separate rotation wheel. Sometimes I find myself having to switch between looking at the item and looking at the wheel, trying to get the angle right.

    I also like the idea of a list of selected items that can be rearranged just by dragging the items to different positions on the list. With the current system, sometimes I can see that an item has been selected, but I have no idea where it is in relation to other things. It may be behind or under a bunch of other things, and I may have to click up or down through dozens of layers to get it to where I can see it or get it to where it needs to be.

    This problem is particularly annoying when I’m designing backgrounds. Normally I like to design the character first and then add the background. But sometimes, the app will add the background ON TOP OF the character. I may have to click the background’s “1 layer down” button dozens of times to finally get the background behind the character. The character re-emerges from the background one piece at a time, like the Cheshire Cat from Alice in Wonderland. It’s hilarious and annoying at the same time. 🙂 Would it be possible to fix things so that the background automatically goes to the hindmost or bottom-most layer of the image?

  9. Also, would it be possible to have an “auto-masking on” option, or something? I understand that manual masking gives a designer greater flexibility, but sometimes, for reasons I’m not sure of, I can’t get masking to work. It would be nice if when I chose a gun, sword, spear, etc. to go in a character’s hand, the item automatically appeared in the right place, as it does in HM 2.5.

  10. one thing that bothers me is when im trying to pick items that require two of the item (eyes, ears, shoulders, etc) i have to turn on the multiples tab to see the left and right together. But if i want to experiment i have to manually delete each item and click on both of the next pair, then so on so on, til i found one that i like. Is there another function you could use besides the multiples thing?

  11. The Atomic Punk

    I understand switching the Controls and Canvas because of handedness. However, it’s different when you are drawing with a pencil as opposed to selecting items from a list. Just by moving my mouse around the mock-up, I found my eyes focusing more on the controls than on the drawing. Plus the minor inconvenience of moving the mouse further.

    Maybe a customizable interface? Let the user decide where to place the elements. I know it’s aesthetic and I can adjust, but I can’t draw. Which is why I love HM. My habits and natural tendency are to “sketch” on the right, then check my progress on the left.

    I love the idea of Transform Handles! Scaling and rotating in HM3 is a little touchy to be honest. Asking a little much, but I’m sure Drag-and-Drop has been explored. Works great when moving Items in HM3. Being able to drag a Coat or RightGlove from the Menu to the Canvas would be nice.

  12. I like the transform handles idea, and some stuff that increses functionality is also good, but please, PLEASE, keep the UI on the left!

    It feels extremely alien to have it on the right. If anything make it an optional thing. Please.

  13. It would be nice to hace the choice of witch side you want the drawing on. Almost like the flip button it would let you pick the side.

  14. Personally I like having the canvas on the left and the controls on the right, because to me the canvas is ultimately the starting point. But this is personal preference, and probably mostly because its what I’m used to. Overall, I think you’re on the right track here. Good work

  15. @Niall (#6): I think that’s a bug when you use the “All” setting on the scaling screen. If you scale the items individually (which you should really do, since only the body and the clothing on that body will be at the same x and y scales, the head and hands and such will be different) it works. Note that regardless, it ought to give you a proper image even if you use the All toggle, it just … doesn’t. Yet.

    @cfc (14) et. al: on the left/right side, I’m open to doing it either way, really. I suspect that just making the “Add New Item” button big and obvious I’ll be all right. A toggle would work, but I don’t know how complicated that would be to code. I’ll have to keep it in mind.

    @xavierkane (5): I’ll have to squish the color swatches down a bit, and at the top put in a HM2 style radio button so you can toggle between color 1, color 2, and color 3. This will also let you do the click-to-transfer a color from one color area to the other like you could in 2.x, which people have asked for.

    @AtomicPunk (11): I’m not clear on what you mean by the drag-and-drop … you know you can drag an item wherever you want on the canvas now, right? Just click on its preview to add it to the canvas, then click and hold on the actual item, move it wherever you want. Is that what you were talking about?

    Good feedback guys, thank you!

  16. One suggestion about transform/scale function. That might need some changing to stretch a component on any axis, not just horizontal and vertical. I found it confusing to try and stretch a component after rotating to an odd angle only to find out that it didn’t stretch in that direction. A function to rotate the axis’ of scaling the same way the component itself can be rotated would be a handy function.

  17. @Jeff: I’m pretty sure AtomicPunk(11) meant to be able to click and hold an item on the select menu and drag it onto the canvas. I’m not clear on how much more “usable” this would be.

    On the rest of the interface, I LOVE the item list. Being able to re-layer by just dragging the item up or down is an awesome idea.

    I think the canvas position looks good either way (left or right), but if you make it selectable you might find that new people will just keep it “as is” (canvas on right), while “most” of the current users will flip it back to the old position just based on familiarity (It’s been that way for a while now at least since 2.0). Not sure how much usability gain you’d get from allowing us to select canvas position.

    Transform handles. Great Idea.

    Question: Will the mask tab actually tell me what item the currently selected one is masked to? If so it would be great as it’s hard to remember what square insignia #5 is masked to currently. AND speaking of masking, I hope you can tackle the “unmasking issue”, where if you add another item of the same set you already masked other items, they all pop out of masking leaving the last item added, masked IN PLACE of the previous one.

    I like the “add items” button. Maybe on start-up and on clearing the canvas it could actually draw attention to itself by blinking or something like that, so new users know to “click here first” 😉

    Otherwise, just stay the course and you’re doing great.

  18. I like the new idea, but I have to voice it aloud that I prefer canvas to the left and controls to the right.

    I’m right-handed, and controls on the right kind of makes sense to me; if the canvas is to the right when I deal with controls (which in this instance are paint brush equivalents) that are to the left, I get confused. (Which is why I like GIMP and its free-floating tool boxes — I can place them wherever I darn well please.)

    If you can put in a button “flip canvas position” which switches canvas from right to left and vice versa, I’d be satisfied with that.

  19. Oh, yeah. And it’d be lovely to have a free zoom tool as opposed to just headshot. 🙂

  20. Demented The Clown

    Ewwww Controls On Left?

  21. @Jeff and @Word Yes, the added benefit is that you can position the Item at the same time that you select it.

    With Transform Handles, will you be able to select multiple Items using [Ctrl] or [Shift]? Like if you want to rotate both hands at the same time?

    A “Link Items” option to permanently join selected Items. So your Top Items of Vest and Upper- and Forearm Sleeves link to form a customized Coat. Any changes apply to all items without having to repeatedly select them.

    Can’t say it enough. I really appreciate the time and effort put into the evolution of this wonderful program.

  22. I think its pretty good as is with layout but a bit of tweaking with the colour tabs makes sense. Don’t move the panel to the left side its always been there and it should stay there.
    With the start point problem you should put a “How this Works” panel that comes up as soon as the games loads, kinda like having the help panel come up as soon as the game loads

  23. I would like to see a “Multiples All” button so I don’t have to click on “Multiples” everytime I use Eyes, Gloves Left/Right, Male Tops, etc.

  24. @Atomic Punk: I am NOT the descriptor for the generic component of all languages. Worf jIH ‘ej mu’ jIHbe'(“I am Worf not word” in Klingon).

    @Jeff: Sorry for the off-topic remark, I couldn’t let it go 😉

  25. How about an option to flip the panel?

  26. I’m not gunna lie
    I like the version now :/
    I like the new idea, but for me it would be abit confusing :/
    But hey, i’m not on Heromachine much anymore, so change it as you will (:

  27. @Worf No offense, big guy. I’m not the best typist at 1:30 am. 🙂

    Just had another idea. How about shadows for objects? Or an option to adjust the line-weight? I’m able to accomplish the effect by layering the same item. Slightly move the second item and shade (usually black or grey). Some tweaking with the size to create long or short shadows (depending on whether it’s summer or winter). It’s not too taxing, but I can find other uses for thinner and heavier outlining.

  28. personally i like the rotating system now because i can put two items at same angles YAY FOR NO PUNCTUATION

  29. Demented The Clown

    @Danny agreed

    Also Im right handed so Put Controls On Right, Or Make Switchable For Left Handers?

  30. I agree with Atomic Punk’s idea of making thinner or thicker lines. This has been an issue whenever I shrink something down considerably, the only color that can be seen clearly is the Line Color.

    I’d rather keep the canvas and UI where they are. One suggestion I have is to get rid of the Delete All button. If they want to delete everything, they can refresh the page. Once, I meant to hit the Flip Item button and I accidentally hit the Delete All button. It was awful. Oh, and I’m all for an Undo button.

  31. Right or left doesn’t matter to me.

    The only persistant issue I`ve been seeing is freezing when I add numerous layers of the same item or using masking.

  32. Second Atomic Punk’s idea for the Link Items function. Maybe click and drag a dotted-line frame around a number of components and then it’d give you the Link option so you could resize/color/pattern/mask them as a unit. (An Unlinking option would be handy too.) And I’d also like to see a Shadow function of some sort, as AP also suggests. A selectable(Shadow All)light source??
    Also love skiriki’s Free Zoom notion.
    And while the current incarnation appears to have arrows to increment up percentages of scale, and lock icons to do something or other, I’ve never got them to have any effect. And typing in the desired percentage was always futile, while trying, for instance, to zoom up a circle and keep it circular was always awkward, and fatiguing for my mousehand. It’d be great to have that level of control.
    That said, I freakin’ love HM3 and am having lots of fun with it, and am very impressed at what’s been accomplished so far. Congratulations already.

  33. I like the new layout, but controls on the right, just like everyone has been saying.

    there are some things I really think would increase the ease of HM3 by like 1000 percent. Specifically, a dropdown menu that has what is listed on what layer. That would help so much with multi-layer masking.

    I really wish there was a tool to use one item as a cutout for another, that way I could actually show the real skin rather than recolor an item that doesn’t have the same textural look to it, i.e. cleavage.

    By the same token, a join item option, which would eliminate lines between clothing items of the same color if you’re trying to make it look like a full body suit for a superhero or something.

    Also, one thing I really miss from HM2 is the ability to swap Color 1 and Color 2 with just one click.

    The biggest thing however, is an undo button. Oh sweet Jesus, how I wish there was an undo button.

  34. UNDO BUTTON!!

  35. I’m with Matt though, and am wondering about Female hands. The standard hands can work most of the time, but sometimes, when you are trying to make a more feminine lady, slapping a pair of rough looking meathooks on her can ruin the effect.
    Also, there was mention of including more fantasy stuff as well. As a GM of a fantasy campaign, and a player in another fantasy group, this would be REALLY helpful.

    As for the program, anything that you could do to make it easier for us non-artists to create characters would be wonderful. Some of us aren’t lucky enough to have a good eye for design like Hammerknight or Imp. So, anything that makes it easier for us artistically challenged individuals to create nice looking characters instead of some sloppy slapped together monstrosity would be much appreciated.
    Maybe something like a button on the panel that could access design hints and tips. You could mine the Heromachine community for them, and then when someone clicks on the button, it would pull up a list of various design topics (ie, Overall design, Facial design, Backgrounds, etc.), and allow you to click on them for further information.

  36. It’s always cool to consider ergomnomic inprovements. Keep up the good work. By the way, here’s my latest animation from Hero Machine 3 and Window Movie Maker. Enjoy!

    Jeff

  37. WOW! I love 3.0. It works well, the layering is neat, and the different options rock. However, there have been a couple of times when my computer kicked me off the page. It’s probably just my computer being weird, but just the same, you might want to look into it. I love how I can have more than one type of item on my character at once, it makes for perfect detail. Hope you finnish soon, and that when you do there’s a way to save or print my character. Keep up the good work!

  38. Hope this thread hasn’t run cold. I am going back over my HM2 and 2.5 characters in HM3. It would be nice to be able to upload my old pictures alongside HM3 as I worked on the updates. I use a 14″-screen laptop not my dual monitor at work. Flipping back and forth between the picture and HM3 does nothing for my tragically goldfish short attention-span.

    http://members.cox.net/freethespam/hm-idea.JPG