aframevr / aframe-inspector

:mag: Visual inspector tool for A-Frame. Hit *<ctrl> + <alt> + i* on any A-Frame scene.
https://aframe.io/aframe-inspector/examples/
MIT License
654 stars 201 forks source link

Text over icons and menu bar #315

Closed fernandojsg closed 5 years ago

fernandojsg commented 8 years ago

This is an issue we've been discussing in different issues and regarding the menu we already had one one but removed it after some brainstorming about it. But with the recent icons and now that we're in a situation where we're going to start adding more functionality I believe it's good to have one discussion about it.

We removed icons on the components title bar to use text instead image And we should do that change too in the entity options for consistency with the previous one (https://github.com/aframevr/aframe-inspector/issues/311)

And the same goes for the scenegraph (https://github.com/aframevr/aframe-inspector/issues/265): image

We've also discussed it on https://github.com/aframevr/aframe-inspector/issues/166

I agree that looking at examples like sketch or keynote the UI is very clean and intuitive

screen shot 2016-07-08 at 2 29 52 am

10-html-export-opt

But they're just exposing some of the most common used options, they still have a menubar for the rest of less commonly used features. And in fact I don't find an icon for one action while learning the UI I could always go to the menu and spot the option I want as it's a easy way to group and order all the actions of the application. For example for this issue: https://github.com/aframevr/aframe-inspector/issues/311 it's clear that it's an UI/UX issue but you could keep working if you see Edit -> Copy entity to HTML or whatever.

My main concern is to end up with an UI without icons and full of text, and trying to expose almost every action on the UI ruining the UX and the overall aesthetics. I also don't feel like doing a witch hunt for the icons could be that good, people got used of using icons daily in their phones, and apps everywhere, in fact, having the app just in English could be harder entry point for non-english speakers if we just use text for every option instead of using icons that they could already know.

One example of UI that get rid of the menu and try to put as much options on the UI could be the new Microsoft Office suite where the options tabs is changing constantly based on the context, that makes hard to remember the position of the options and sometimes you can go crazy looking for an option because you've selected a cell instead of the whole table, or so on.

Looking at the Vizor approach, they've a huge list of options and you have to scroll them or use the search box. I would prefer having them in a menu that it's easier for grouping the options. Regarding the searchbox I really like it, in fact we had a prototype to include a searchbox similar to spotlight or sublimetext where you could select entities quickly or do some actions: image

Let's brainstorm! :)

feiss commented 8 years ago

I think the menu bar is interesting when the rest of the application is confusing in some part. If the tool was simple and very easy to pick up there would be no need of it. Right now I think there are issues regarding the UI that should be improved, but there aren't really so many features and options that justify the need of adding a menu bar.

BUT, I find the menu bar would be beneficial in two aspects:

Also, the screen space it takes is insignificant comparing to the mentioned benefits, and frames the whole application and gives the user a starting/home point.

So: I think a menu bar is interesting in terms of scalability and usability, specially for future versions.

Regarding icon labels: I think they are necessary if icons are confusing and not clear enough, which is the case now, but I think they could be fixed. The think is: if the application grows, there will be much less space for icon labels. Examples like Sketch or Keynote are not very appropriate, because they have a toolbar, a dedicated, scalable space for icons, which we don't have.

(btw, instead of labels, nice, big tooltips could be useful although not very mobile friendly).

cvan commented 8 years ago

Regarding icon labels: I think they are necessary if icons are confusing and not clear enough, which is the case now, but I think they could be fixed.

agreed, yes.

The think is: if the application grows, there will be much less space for icon labels.

how do we expect the application to grow?

Examples like Sketch or Keynote are not very appropriate, because they have a toolbar, a dedicated, scalable space for icons, which we don't have.

why might not we be able to afford a dedicated space for icons? (see below for possible implementations for when we may need to expand our options.)

(btw, instead of labels, nice, big tooltips could be useful although not very mobile friendly).

agreed, great point. IME, tab bars tend to work well:

image

image

and, popover menus when necessary to hide actions that are more secondary:

image

also, re: tooltips (which are touched on already in #37 and #20), I'd recommend using https://frend.co/components/tooltip/

ngokevin commented 5 years ago

going to close for now. any icons we have now are infrequently used or not part of the target workflow (@feiss is the #1 user of the inspector!).

if we gain more functionality, we can reconsider adding menus and such. going to prioritize making the inspector useful / frictionless