Hello All,
I am Sonny Chhen the Sr. Visual Designer on CloudStack. I wanted to share with you all a few ideas we have in the works on trying to improve upon the user-interface and user-experience. I would love to hear your feedback and any other possible ideas on how we can improve CloudStack. I'll try to answer any questions as well.
Below are links to some tech that we have been using to try to enhance the user experience of CloudStack with html5 and css3.
Sliding navigation:
A major point of feedback we have heard is that there is not enough screen real estate with our sliding panels system. The app was initially designed to be touch based at the iPad 2 resolution of 1024x768. To re-work the panel system to a fluid or responsive design would require a lot of recalculating. Instead we tried to meet users in the middle with sliding the navigation off screen and allowing for more real estate.
Filterable search:
The concept here is if the user were able to search for an item in a list view, the initial search would query the content on the page and filter accordingly. The list would then collapse within itself to show the results. To achieve this concept please do the following.
-click on the see more post link
-slide the time slider on the left all the way to the right
-sliding the time slider back will show how the list animates after a "search"
*this example must be done in a chrome web browser
Flip dashboard:
The idea here is to redo the dashboard so that it shows statistics, is widget based, customizable, and we can add "actions" to the dashboard. Once an item is selected the dashboard will rotate 180 degrees to show the screen or action on the other side.
*due to time constraints I added a "flip card" button instead of clicking on the widget panels
Overview
Content Tools
Apps
1 Comment
Prasanna
Some concepts we are working on in allowing more data to be viewed in the table view. In the attached screenshot we removed the status column and instead replaced it with the thin bar on the left hand side. When a user rolls over the corresponding color, the bar will expand over the name of the vm and state the status of the vm.
Another item we want to add is a quick view of the information. We removed the action column and instead added the "" column. When a user clicks on this, an overlay will open giving the user a quick glance at more information. The "" sign will rotate clockwise turning into an "x" that the user can use to close this view.
Sorry no html demos this time. You'll have to use your imaginations.