Feedback on UI for my new plugin that will be coming soon, QAP
New ui:
13 Likes
The āQuick Animation Previewā isnāt playingā¦
2 Likes
Looking clean and modern. the simple look is simply amazing
1 Like
Yes it is just a UI test the animation preview will have a play bar just like in the bottom right of the preview testing
Overall there should be a greater contrast with the current background gray and the lighter gray elements. The spacing between different elements is great and the UI corners match up nicely.
Light blue - text should be a brighter color than the rest of the gray in my opinion, or at least everything ābrighterā/more āsaturatedā
Orange - these are call-to-action buttons and should be white or an off-white in my opinion. Some color other than that light/hard to see gray.
Yellow/gold - more text that should be more noticeable, maybe different brightness compared to the text underlined with the light blue lines.
1 Like
Thank you for the feedback, this is helpful because I am not a UI designer.
1 Like
Based on your feedback here is the new and improved UI
1 Like
Looks better! My main issue is still with the typography however. (prepare your eyes the website linked does not have a dark mode.) Specifically the contrast between the text on the screen versus the background.
I recommend checking out this video, itās got tons of information:
Hope that helps. 
1 Like
You have to think about the person using the plugin without as much knowledge as you about the plugin. Initially looking at it, it looks very confusing and overwhelming. The main action should be at the top, where the eye initially (most of the time) looks at. Then, secondary components goes at the bottom. Along with Animations and Preview should be side to side, because it shows better that the Animations picker directly affects the preview.
Iām not sure what the Add button does, because itās telling you to search yet the search bar is a ādrag file hereā icon. I would remove that, and add a button to the top of the āAnimationsā container because it better explains how to use the plugin. Then, the button gives a modal or some other input of the animation name. The current way, of uploading and changing the name, or at least which it seems like, is confusing and takes a while to figure out.
Iām also not sure what the slider button does, and the play button seems out of place (tucken away in the corner) to be a major part of how the plugin works. Iād move it to a place where it is more close to where they eye initially scans (remember, the eye scans in an F shape), so someplace closer to the top. Along with better showing the user what the slider does.
The color seems very bland, Iād suggest adding in primary colors along with better contrast.
It in fact does look pretty pleasing to the eye, however the UX of the design is pretty bad. UX Design comes first, you figure out the userās goal, and find out how to make that goal as short as possible, then you design the UI based off your previous research.
It is confusing without context, the ādrag from computerā icon as you say it is the icon that was made for uploading files, this icon will be used to add animations from your inventory.
This is just an example of a plugin ui for my plugin āanimation nameā is a placeholder for the animations name.
I feel like it would make sense for it to be under also, the human eye naturally (or at least for me) looks down for settings and features
A slider with a play button next to it is a clear representation of a bar that allows you to see the video while still paused like on youtube.
Overall you seem to be purposefully trying to make problems and act like you have never seen a UI with the options below or a playbar. (this comment is not meant to cover up my UI design)
You just contradicted what you just said
Iām not sure if you think Iām trying to attack you or something. Iām sorry if my previous message was unclear. Also, remember, the design changes I proposed have meaning towards them, but at the end of the day they are personal preferences.
Although, the fact you have to clarify confusions which are core parts of the plugin, just shows that itās confusing. The UI should have those clarifications built in.
Yes, but the current layout of how you upload an animation is confusing because it further spreads two major parts of data-based UI, input/output. It is unclear that the āAddā button, which looks like a search textbox, is meant to upload data to a completely different container.
Options being the choosing character. Eyes scanning left to right look left for choosing the content, and right for receiving the content.
It at first looked to me like a zoom slider or something similar, not a play sliderā¦ Youtube shows that it is playing content because of itās active indicator. Adding color would most likely fix this. You should look for inspiration from UI like Youtube.
I am trying to make problems. Iām stress-testing your UI so that it can be the best it can be, and holding it up to high standards. Itās also not a good UI practice to assume youāre in the good because you think it wonāt be confusing to most of your users. Literally accessibility 101.
It does make more sense now. Although, it is visible that when you look in the F shape, you see a preview but it doesnāt give you any insight of what the preview is for. Verses, with a layout with animations to the left and preview to the right, in the first initial scan the user has a better understanding of the purpose.
1 Like
Wow not bad! I would suggest you add a little more contrast to it.
1 Like
When looking at and rating a UI you are not trying to make problems, that is a bad practice. A ROBLOX plugin like this is used by more high level developers and not people who do not know how to use studio. The thing that your analysis is lacking is intended audience. Unlike you, most developers do not research things about how people look at designs, people who learn these practices have a higher chance of scanning something with a F shape when in reality most people will look at an entire UI before using it. Studies that have looked into the F shaped scanning have mostly been on large bodyās of text and you will almost never see this F shaped scanning in any other ROBLOX plugin. Please not that most of this is my opinion but some is based on truth
Sorry if anything that I have said seems like I am attacking you I am just stating my opinions as a human that can understand a GUI without Scanning it in an F shape.
1 Like
a potential issue with your plugin is that animators can already preview animations with the animation editor. I think it might be better if your plugin automatically appears when they are creating an animation in the corner and allows the user to preview the animation they are currently working on with different avatars.
1 Like
The idea is that you create an animation with the standard Animation editor and then using my plugin to test it on other rigs and make changes in the animation editor based on that.
1 Like
It will be a pain to manually have to apply your plugin everytime. It would be beneficial to automatically pop up. You could also add an option to toggle this feature.
1 Like
Ill look into this when I am scripting the plugin
This is actually a really popular misconception. When people rate UI, they usually look at the looks of it. When people fail to criticize the actual usage of the product, the product usually doesnāt turn out too well. Thatās why developers actually do try to implement easy design into their products, not only because simpler is easy to build, but it is also easy for the user. Sure, your intended audience may be ROBLOX developers who arenāt elders with Jitterbug phones, but that doesnāt mean that they should have to use something unnecessarily complicated, which is why you try to design for the worst case scenario. You are also taking this F scan thing way too far. Itās not perfect. Itās just an industry standard on how UI is built on.
The UI also feels rushed, and I feel like you shouldāve went through more steps iterating the design before you asked for feedback. Feedback is meant for one of the final versions of the product. If you donāt care about the UI, then you should consider doing a barebones animation player.
Iām not trying to force you to to do something, Iām just giving you feedback on the design. You can choose if you want to listen to my feedback, instead of producing comments with a snarky tone. You try to use Material Design components, so Iād suggest searching up the Material Design documentation to learn how to better use the components.
1 Like
Welp now that I know you know nothing about what feedback is you can now go away and stop, feedback makes things. Feedback is used in the middle stages of design, after feedback is your final stage and ending point. Saying that feedback is used when the UI is on its final version may just be the dumbest thing Iāve ever heard.
Thereās a difference between internal and public feedback. I was talking about public feedback
1 Like