The UI design of the MTKE needs to be improved.
Navigation of components can be confusing at times. For instance, on the Taxonomy page (
http://mtke.boyd-arts.com/taxonomy.html) & Music Field (
http://mtke.boyd-arts.com/musicfield.html), All UI components currently have different sizes. It's difficult to see the hierarchy structure and it makes it difficult to locate & identify different modules.
Recommendation: You can consider a two-panel design with a tree view on the left as a sidebar, and show content (if any) of the selected component in the main area.
The [+] buttons doesn't change based on the collapsed/expanded status of the parent box. It is an interactive control and should reflect the state of the UI with different appearances.
Recommendation: Either make the [+] turn into [-] when the box is expanded, or use a common control shape such as the triangles.
As of now, everything has a blue background. Sharing the same background color makes it hard to identify different levels of content. Think about the UI from the users's standpoint --- what button should they be clicking when they're visiting this area for the first time? The UI should guide first-time users through the content. You can consider using a tiered design to visualize different levels of controls.
Would love to see the UI for the Tasks and Question/Answer components. Nice work overall!
Comments
Thanks for your feedback. I agree with the [+] / [-] and frankly, I just haven't got that far yet. I like the idea of a two panel design. In general, the style formatting has been minimal so far (quick and dirty might be a better description) in order to get the mechanics working. Now that the content is expanding I'm getting a better idea of how exactly things are cumbersome..
I'm still trying to figure out a better presentation of the hierarchical data. I admit it can get a bit cumbersome and perhaps I just need to modify the css to trim it down. If anyone has some sites that display hierarchical data that may be a suitable model, please suggest them.