kenny-designs / voxel-edit

A web based voxel art program.
https://kenny-designs.github.io/voxel-edit/
5 stars 3 forks source link

User Intuition #26

Closed kenny-designs closed 3 years ago

kenny-designs commented 3 years ago

Right now, the application is a little hard to understand at first glance.

  1. Click to add wasn't so obvious
  2. The color palette isn't so obvious either. The fact that when you change a color it affects all the voxels so you need to make that color replacement known.
  3. Make the default color something like blue or similar. Changing the hue will continue to give gray color the way it is set right now. Use an actual color for the starting color instead
kenny-designs commented 3 years ago

Had someone test the application to give some of their thoughts.

To counter this, having all of the squares be a different color (something like a rainbow) would make it easier to distinguish.

Another possible solution is to just have a single square with a single color and then a plus sign next to it. Then when the plus is clicked, a new empty square is added. That would make the color palette feel a lot less overwhelming. Perhaps leave three default colors in as well to help make it obvious that 'these are your colors'

The complaint here is that the user didn't know what 'add' meant. They thought it would have the action that the 'paint' option would have. Also, they didn't realize they were supposed to click the scene to add a voxel. They suggested I perhaps reword the Brush options to 'Add Voxel,' 'Remove Voxel,' and 'Paint Voxel.' Or perhaps use some icon that would better illustrate what is meant by these choices.

I'm not too certain what other options there are to make this more clear especially since I plan to add additional brush options for extruding and drag clicking to add voxels. Since this program is meant to be an editor, certain actions will require additional explanation (as I've experienced with Unity, Unreal Engine 4, Blender, etc). I still want to make it as streamlined as possible though.

Tooltips/popups would be helpful (such as hovering your cursor over add and it explains what it does). This likely won't work so well on mobile devices though. Perhaps add a '?' icon on the brush component that opens a modal with a explanation of what the options do? Mayb even include gifs that show what it does in action as well? I've found that particularly useful when playing complex/complicated video games where they explain what certain abilities do with visuals instead of text.

This may be more of a user error. Those who are adept at video games seem to have no issue getting used to this where else those that don't play have some trouble. I'm not sure how to best approach this. In various games, there is usually a brief tutorial in the very beginning that demonstrates how to rotate/pan/zoom the camera. I considered making short videos that teach people how to use this application but maybe consider adding an interactive tutorial for new users? This might also bypass some previous misunderstandings with how various parts of the application works especially as it becomes more advanced. In my experience with various editors, there comes a point where it's just not obvious what something will do and you have to actually show someone how it works or at least write a detailed tutorial on it (which most people would rather not read so they'll avoid the feature).

I agree with this one. If you want to change colors, you have to just click once. There's no dragging to get a feel for what color you want. I did this at first to improve performance but I believe it can be easily remedied. Only update the color palette when the user lets go of their mouse or throttle the changes. Clicking and dragging the color slider should ideally let the user observe how it affects the scene so they can find the perfect color. It's not comfortable to just tap around for a color. It feels better for it to actually act like a slider.

This actually a complaint from me. It's frustrating to be laying out a bunch of voxels of a single color and having them all blend together. Plus, the lighting is too dark sometimes and I can't tell what for something is. This can be addressed when the Camera or Project components are added but the default lighting should be improved as well. Maybe lambert isn't the best material? Or perhaps there are some better settings/lighting arrangements to make it pop? Also, it would be nice to toggle a grid so that edges show up on the voxels. That would make it way easier to figure out just where your voxel is gonna be added/removed/painted. On desktop, highlight voxels under the users cursor. That would also be very helpful.

kenny-designs commented 3 years ago

The last few updates have addressed many of the concerns from this thread. Tomorrow, I'll see if I can get some user feedback on the updates.

Lighting still needs to be improved along with adding a grid option.

kenny-designs commented 3 years ago

Addressed most of these issues.