Proposed design changes for qmlui
Posted: Tue Aug 29, 2017 5:24 am
I have successfully compiled qmlui and played around for a few hours. I have some feedback regarding the design. I must say I really like the new touch friendly interface. However, I think it is possible to make it even better. I will try to focus mostly on bigger structural design changes in this post.
1) First of all it needs to me a little bit more consistent in it's behavior. I really like the idea of having just a small number of UI elements to do the basic tasks. Those elements should always behave the same on the different screens inside the application. For example a toolbar should always be in the same place, work in the same way and look exactly the same. It might be a good idea to try to write down some kind of "UI behavior guidelines" for how the UI is supposed to work. Those guidelines could also be part of a the documentation / a quick start when introducing new users.
2) I would like to do a lot of changes to the navigation structure in the application. I think 99% of the different screens should be reachable via two navigation bars. The first one (Primary navigation) should be just as the top bar is today. When doing web development the best practice is to not have more than 8 buttons in the primary navigation. I think we should aim for about 6-8 buttons we actually use, but could accept even more buttons. Maybe 10 or 12 could be okay, if really needed.
Under the "Primary navigation" there should be a "Secondary navigation", which will contain the second level in the navigation tree structure. This navigation could also work as a toolbar for the screens that needs this. The toolbar elements should be clearly distinguished from the secondary navigation. Either with a separator, or left/right align. This seems to be the case today, but if I remember correctly I found a few exceptions.
3) I think the "Actions" menu is inconsistent from the behavior of the other buttons in the toolbar. I think a better idea would be to remove the drop down menu and replace it with a new screen with buttons. Those buttons could be a fairly big to fill up most of the screen. It could also have a list of recent projects and probably some other things as well.
4) When clicking the BPM there is configuration options directly in the popup. I think this configuration should be in a separate Settings screen and the popup should be as clean as possible. It's more consistent like this. Another reason is that I would also like to have more advanced synchronisation settings in the future, like getting the tempo out of a Pioneer CDJ-2000 NXS (There is such open source projects already). This would probably not fit in the popup.
5) I'm primarily interested in using QLC+ for live performances with a really limited ability to pre-program a workspace before a gig. I think people like me would appreciate that all the settings stuff goes into a separate settings screen. In this way you can have the interface you work with clean from thinks like adding fixtures etc.
6) Whith all this said I would like to propose a new navigation structure. The first level is for the primary navigation and the second level is for secondary navigation.
8) I added a new screen in Functions. It's called "Programmer" and is supposed to view a table of what DMX values have been changed and could be saved into a new scene. This could also be used to show the content of a already existing scene.
9) I think the left sidebar in Functions should go away. All the buttons that show up in the toolbar when selecting an fixure needs to be moved. I would prefer that the buttons are removed completly and the color pickers, sliders etc show up at the bottom, just like grandMA2 or Cuelux. In this way there will be less clicks when programming.
10) It's not always clear what button shows/hides a sidebar. I think this could be improved as well.
11) The size of buttons (and probably other UI elements) seems to be a little bit non-consistent. I'm not sure if this is a design bug, or you have not bothered with minor design improvements yet. However, it may be a good idea to create some kind of basic UI design guidelines with at least the following information:
Notes:
I have not yet tried figure out if/how the Function editor could be improved. From what I have seen so far I'm pretty sure I could come up with a few improvments here as well.
I have not looked into the Virtual console yet.
I will not look into the Show manager, as this is a function I have no plans to use at all.
I am a programmer and I want to contribute to the project. I do have an working development environment and some spare time. I have mostly done low level C programming before, but have some limited C++ knowledge.
1) First of all it needs to me a little bit more consistent in it's behavior. I really like the idea of having just a small number of UI elements to do the basic tasks. Those elements should always behave the same on the different screens inside the application. For example a toolbar should always be in the same place, work in the same way and look exactly the same. It might be a good idea to try to write down some kind of "UI behavior guidelines" for how the UI is supposed to work. Those guidelines could also be part of a the documentation / a quick start when introducing new users.
2) I would like to do a lot of changes to the navigation structure in the application. I think 99% of the different screens should be reachable via two navigation bars. The first one (Primary navigation) should be just as the top bar is today. When doing web development the best practice is to not have more than 8 buttons in the primary navigation. I think we should aim for about 6-8 buttons we actually use, but could accept even more buttons. Maybe 10 or 12 could be okay, if really needed.
Under the "Primary navigation" there should be a "Secondary navigation", which will contain the second level in the navigation tree structure. This navigation could also work as a toolbar for the screens that needs this. The toolbar elements should be clearly distinguished from the secondary navigation. Either with a separator, or left/right align. This seems to be the case today, but if I remember correctly I found a few exceptions.
3) I think the "Actions" menu is inconsistent from the behavior of the other buttons in the toolbar. I think a better idea would be to remove the drop down menu and replace it with a new screen with buttons. Those buttons could be a fairly big to fill up most of the screen. It could also have a list of recent projects and probably some other things as well.
4) When clicking the BPM there is configuration options directly in the popup. I think this configuration should be in a separate Settings screen and the popup should be as clean as possible. It's more consistent like this. Another reason is that I would also like to have more advanced synchronisation settings in the future, like getting the tempo out of a Pioneer CDJ-2000 NXS (There is such open source projects already). This would probably not fit in the popup.
5) I'm primarily interested in using QLC+ for live performances with a really limited ability to pre-program a workspace before a gig. I think people like me would appreciate that all the settings stuff goes into a separate settings screen. In this way you can have the interface you work with clean from thinks like adding fixtures etc.
6) Whith all this said I would like to propose a new navigation structure. The first level is for the primary navigation and the second level is for secondary navigation.
- (Aligned left)
- Actions
- (No secondary navigation on this screen, only big buttons)
- New project
- Open project
- Save project
- Save project as..
- Documentation
- Start tutorial
- Recent projects
- Functions
- DMX View
- Programmer
- 2D View
- 3D View
- Virtual Console
- Simple Desk
- Show Manager
- (Aligned right)
- Settings
- Input/Output
- Synchronization (BPM)
- Universe View
- Address tool
- Toggle fullscreen
- BPM
8) I added a new screen in Functions. It's called "Programmer" and is supposed to view a table of what DMX values have been changed and could be saved into a new scene. This could also be used to show the content of a already existing scene.
9) I think the left sidebar in Functions should go away. All the buttons that show up in the toolbar when selecting an fixure needs to be moved. I would prefer that the buttons are removed completly and the color pickers, sliders etc show up at the bottom, just like grandMA2 or Cuelux. In this way there will be less clicks when programming.
10) It's not always clear what button shows/hides a sidebar. I think this could be improved as well.
11) The size of buttons (and probably other UI elements) seems to be a little bit non-consistent. I'm not sure if this is a design bug, or you have not bothered with minor design improvements yet. However, it may be a good idea to create some kind of basic UI design guidelines with at least the following information:
- Text sizes
- Button sizes
- Color scheme
- I think it's a good idea to avoid popups when possible
- Drop down menus should only be used as a select element to choose an option. Drop downs should not execute an task or change screen (If possible)
- Avoid popup windows (If possible)
Notes:
I have not yet tried figure out if/how the Function editor could be improved. From what I have seen so far I'm pretty sure I could come up with a few improvments here as well.
I have not looked into the Virtual console yet.
I will not look into the Show manager, as this is a function I have no plans to use at all.
I am a programmer and I want to contribute to the project. I do have an working development environment and some spare time. I have mostly done low level C programming before, but have some limited C++ knowledge.