[Kimchi-devel] Kimchi UI design proposals

Wed Oct 1 15:38:29 UTC 2014

Hi Don,

Thanks for the proposal! I really liked this new UI. However, I have a
few comments:

Overall:
  - The filter and sort features are a very nice addition to the UI!
Every main screen has it now, that's very useful.
  - What are the buttons "Export" and "Print"?
  - What is the last tab "Settings"? Is that a future feature? We don't
have general settings as of now.

HostPanel.png:
  - Why is there "Hosts > Hostname" in the header? I'd expect only the
hostname there. What happens if I click on "Hosts"?
  - On "Repositories", the green check means the repository is enabled
and its absence means the repository is disabled, right? I think
something like a gray check, instead of nothing, is better to indicate
that the repository is disabled. Actually, I think I'd try to click
those green checks, they look like something clickable/selectable...

Host_ContextMenu.png:
  - The icon for "Enable" would look better if it was the same icon
which represents an enabled repository: the green check thing. The
current icon, the "play" button, reminds me as a start/play action,
not an enable action.
  - Unlike the context menus in all other mockup screenshots, the text
"Remove" (or whatever is the destructive action in red background) is
not gray.

Host_Debug_ContextMenu.png:
  - The same thing regarding the destructive menu item text color, as in
Host_ContextMenu.png.

GuestsPanel_gallery.png:
  - What happens when I click on "Custom group name"? That's a future
feature, right? How would it look like?
  - Why is there "Disks" on the green header text? Is that a mockup
error?

Guest_ContextMenu.png:
  - The icon for "Connect" doesn't look appropriate to me. That would
be for something like "Enable", as it is the exact same icon which
indicates something is enabled back in the gallery.
  - The icon for "Start" also doesn't look appropriate to me. That icon
is for something like restart/refresh. Hence, it's used as an icon to
restart the host. IMO the "Play" icon looks better for "Start".
  - What is the menu entry "View disks"? Do we have that feature? If
we do, an eye doesn't seem like a good icon. It looks odd and it
doesn't indicate what the user will actually see. Some kind of disk
would look better there as that's what the user would see.
  - What is the menu entry "Connect VNC"? AFAIK, that's what "Connect"
does - it connects to the VM's VNC/Spice server. That looks like a
duplicate menu entry to me.
  - The text "Delete guest" is not consistent with the other
delete/remove/destroy menu items in the other context menus. All of
them have only "Delete" (or a similar destructive action). As the menu
is triggered from a specific guest, I guess we don't need to state
"Delete guest", just "Delete". Otherwise, we also should have "Start
 guest", "Edit guest", "Connect to guest"... and also update all the
other context menus.

GuestsPanel_table.png:
  - What is the column "Virtual network console"? And why isn't it
present on the gallery view?
  - What is that black arrow on the right side of the screen?
  - The same thing regarding the text "Disks" on the header of the
other "Guests" views.

TemplatesPanel_table.png:
  - Why is the icon on the Ubuntu entry missing? Is that a mockup error
or does it mean something?

Tempalte_ContextMenu.png:
  - The icon for "Clone" doesn't look appropriate. That's for
restart/refresh.

StoragePanel_gallery2.png:
  - Why is the header link "Add a Storage" bold? The other header links
"Add <foo>" are not bold.
  - What should be the "Storage name" in the header? That screen lists
all storage pools, not just one.
  - What do those arrows on the columns "Volumes" and "Disks" mean?
What happens when a user clicks them? I'd say they would expand the
volumes and disk details, but then I don't know why there are two
different arrows.
  - AFAIU the entry "StoragePool_ID0010" is disabled because the
enabled check icon is not there (even though, as I stated before
referring to the repositories, I think there should also be an icon
meaning "disabled") and the text color is gray. But why are the Type
and Location columns not gray? Is that a mockup error or is it
something else? The opposite also happens on "StoragePool_ID005"; AFAIU
that storage pool is enabled but the columns Type and Location are
gray.
  - It looks like there is no option to change the view from list to
gallery, like on the other tabs.
  - What is that black arrow on the right side of the screen?

StoragePanel_table.png:
  - What should be the "Storage name" in the header? That screen lists
all storage pools, not just one.

Storage_ContextMenu2.png:
  - The icon for "Deactivate" looks like an icon for "Stop". As I
commented above, I think there should be an icon in the list/gallery
views meaning something is disabled, instead of having no icon. One
more reason to have it is to be consistent and use the same icon here.
If we're using the green check icon to mean "Enabled" and the same icon
to "Enable" something, it would be nice to have another icon meaning
"Disabled" and to use that same icon to "Disable" something.
Enable/disable are not exactly the same thing as start/stop.

NetworkPanel_table.png:
  - What does "Networks >" mean in the header? There is no navigation
expected after that, a trailing ">" sign looks meaningless.
  - The same thing regarding inconsistent enabled/disabled entries
with gray/black text, as for the storage pools.
  - What is that black arrow on the right side of the screen?
  - It looks like there is no option to change the view from list to
gallery, like on the other tabs.

Network_ContextMenu.png:
  - A network cannot be deleted when it is currently activated (the
user has to stop it first), so in this screenshot the entry "Delete"
should be grayed out.

Again, this new UI looks very nice, it has nice fonts, nice colors, and
a modern interface. It'll be great when it really gets responsive to
different screen sizes and devices.

I'm looking forward for the next set of the design updates .

Best regards,
Crístian.

On Ter, 2014-09-30 at 13:40 -0400, Don S. Spangler wrote:
> I recently created a page on the Kimchi wiki (UI Design Proposals)
> around developing a set of UI design proposals with the following
> goals:
>       * Provide a complete user interface and visual style for all
>         major tabs and tasks
>       * Maintain clean design and interactions in keeping with Kimchi
>         directions
>       * Design flexible framework to allow for consistency when adding
>         new capabilities
>       * Enable design to support responsiveness and touch / mobile
>         (tablet / phone) interactions
> We plan on making iterative updates to the screens and would like to
> open it up to feedback. The initial focus has been the major content
> areas (host, guest, template, storage, and networks) and will be
> working on details of the interactions, including page level
> blueprints. The layouts to support responsiveness are particularly
> important and would be part of the next updates.
> 
> We look forward to your feedback, including areas that may need more
> clarification and issues around implementation.
> 
> Thanks!
> 
> Don Spangler
> _______________________________________________
> Kimchi-devel mailing list
> Kimchi-devel at ovirt.org
> http://lists.ovirt.org/mailman/listinfo/kimchi-devel