[Kimchi-devel] Wok index page mock up

Thu Aug 13 16:06:44 UTC 2015

Oh, I see. Well, coincidently today I saw two articles evaluating the usability of the hamburger button:

http://deep.design/the-hamburger-menu/

https://medium.com/mobile-growth/who-moved-my-hamburger-d237860bc589

-Most sites and applications are redesign or realigning their structure and getting rid of the hamburger button going back to… Tabs!

I think the navbar should have some contextual changes when browsing the API documentation and sample plugin compared to the current new-ui proposed for Wok. I need to validate some ui patterns first. I still need to present some mockups for low resolution screens with the navbar in the new-ui, adding more tabs doesn’t seem like a good option. Once the new-ui is stable I’ll work on some mockups and share with ML.

Thanks,

Samuel

From: Harshal Patil [mailto:harshal.patil at in.ibm.com]
Sent: quinta-feira, 13 de agosto de 2015 01:28
To: Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes at eldorado.org.br>
Cc: alinefm at linux.vnet.ibm.com; kimchi-devel at ovirt.org; socorro at linux.vnet.ibm.com
Subject: Re: RE: RE: [Kimchi-devel] Wok index page mock up

Not sure if I got you correctly there. I wasn't just referring to the API documentation, I was talking about overall layout of wok with all it's plugins loaded.

----- Original message -----
From: Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes at eldorado.org.br<mailto:samuel.guimaraes at eldorado.org.br>>
To: Harshal Patil/India/IBM at IBMIN
Cc: "alinefm at linux.vnet.ibm.com<mailto:alinefm at linux.vnet.ibm.com>" <alinefm at linux.vnet.ibm.com<mailto:alinefm at linux.vnet.ibm.com>>, "kimchi-devel at ovirt.org<mailto:kimchi-devel at ovirt.org>" <kimchi-devel at ovirt.org<mailto:kimchi-devel at ovirt.org>>, "socorro at linux.vnet.ibm.com<mailto:socorro at linux.vnet.ibm.com>" <socorro at linux.vnet.ibm.com<mailto:socorro at linux.vnet.ibm.com>>
Subject: RE: RE: [Kimchi-devel] Wok index page mock up
Date: Thu, Aug 13, 2015 1:48 AM

Yes, I think this pattern with fixed top, menu icon and search field is very good for the purpose of a documentation tool.

For the mockup I’ve edited a HTML page, captured it and added the logo with Gimp.

Samuel

From: Harshal Patil [mailto:harshal.patil at in.ibm.com]
Sent: quarta-feira, 12 de agosto de 2015 01:02
To: Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes at eldorado.org.br<mailto:samuel.guimaraes at eldorado.org.br>>
Cc: alinefm at linux.vnet.ibm.com<mailto:alinefm at linux.vnet.ibm.com>; kimchi-devel at ovirt.org<mailto:kimchi-devel at ovirt.org>; socorro at linux.vnet.ibm.com<mailto:socorro at linux.vnet.ibm.com>
Subject: Re: RE: [Kimchi-devel] Wok index page mock up

Hi,

Thanks for your comments. I liked the API explorer you have proposed.

For the hamburger and logo bar, do you want to keep a static bar or do you want to consider a dynamically changing contextual bar? I have attached the example of later here.

So depending upon which context you are it changes it's colour and items in the bar. The screenshots are from 'Inbox for Gmail'.  We can keep the logo somewhere there but we can also show which 'plugin' the is interacting with and change the color scheme accordingly. E.g if user selects 'Kimchi' plugin from hamburger menu we can display 'Kimchi' next to that hamburger menu (while continue to display 'Wok' in the center or something like that). This way we can get rid of 'tabs'. The top bar serves that purpose.

Let me know what do you think.

BTW, which mock up tool you used to create that mockup page of wok?

Harshal

----- Original message -----
From: Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes at eldorado.org.br<mailto:samuel.guimaraes at eldorado.org.br>>
To: Harshal Patil/India/IBM at IBMIN, "alinefm at linux.vnet.ibm.com<mailto:alinefm at linux.vnet.ibm.com>" <alinefm at linux.vnet.ibm.com<mailto:alinefm at linux.vnet.ibm.com>>
Cc: "kimchi-devel at ovirt.org<mailto:kimchi-devel at ovirt.org>" <kimchi-devel at ovirt.org<mailto:kimchi-devel at ovirt.org>>, "socorro at linux.vnet.ibm.com<mailto:socorro at linux.vnet.ibm.com>" <socorro at linux.vnet.ibm.com<mailto:socorro at linux.vnet.ibm.com>>
Subject: RE: [Kimchi-devel] Wok index page mock up
Date: Wed, Aug 12, 2015 3:06 AM

Hi Harshal,

I liked the mockup. It looks good and I think that for Wok service we should have a clean interface since we are going to provide API documentation, it should feature different elements than Kimchi and Ginger but maintain the same design language. I think this is a good direction because if you look to several products Wikis and docs, they are adding some of the same elements that we can see in this mockup like the Hamburger Icon and an off-canvas menu. For the REST API documentation I was thinking in something similar to the attached image and this link: http://petstore.swagger.io/

However, that part would need user authentication for security reasons.

Regarding the logo, I believe it should be large and centered in the index page. Kimchi logo is good enough, maybe a flat version of it:

From: Harshal Patil [mailto:harshal.patil at in.ibm.com]
Sent: terça-feira, 11 de agosto de 2015 16:49
To: alinefm at linux.vnet.ibm.com<mailto:alinefm at linux.vnet.ibm.com>
Cc: kimchi-devel at ovirt.org<mailto:kimchi-devel at ovirt.org>; Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes at eldorado.org.br<mailto:samuel.guimaraes at eldorado.org.br>>; socorro at linux.vnet.ibm.com<mailto:socorro at linux.vnet.ibm.com>
Subject: Re: [Kimchi-devel] Wok index page mock up

Opps sorry Aline, forgot to answer your questions..

1. It was inspired from Android's hamburger menu design. It's also your in 'Inbox for Gmail's desktop page. But of course, this is not a final design. We can improve it further, if required.

2. IMHO, user doesn't need to login just to see the index page. There is nothing in there which needs to be protected behind a login page.

3. It could be right next to hamburger menu or on the RHS.

----- Original message -----
From: Aline Manera <alinefm at linux.vnet.ibm.com<mailto:alinefm at linux.vnet.ibm.com>>
To: Harshal Patil/India/IBM at IBMIN, kimchi-devel at ovirt.org<mailto:kimchi-devel at ovirt.org>, Samuel Henrique De Oliveira Guimaraes <samuel.guimaraes at eldorado.org.br<mailto:samuel.guimaraes at eldorado.org.br>>, Socorro Stoppler <socorro at linux.vnet.ibm.com<mailto:socorro at linux.vnet.ibm.com>>
Cc:
Subject: Re: [Kimchi-devel] Wok index page mock up
Date: Tue, Aug 11, 2015 8:47 PM

Hi Harshal,

Thanks for sending this mockup!

In general it looks good for me. Only some comments/doubts:

1) What is 3 lines button on the left corner? Does this represent a menu or something?

2) Will the welcome page be shown as the first page or user will need to login to get the welcome page?

3) Will wok have a logo? Where in page will we display it?

Maybe Socorro and Samuel can help us more on the page layout as they are UI experts =)

Regards,
Aline Manera

On 10/08/2015 07:43, Harshal Patil wrote:

Hi,

Working on issue #718 ,https://github.com/kimchi-project/kimchi/issues/718

Just some initial mock up about page layouts. Please let me know what do you think about it. These mock ups are only for showing the layout, so please ignore things like color scheme, font types etc.

Here is the pdf, https://drive.google.com/file/d/0B3vI9LCU26KEN19kcjZtbTVyOGM/view?usp=sharing

I am using Pencil to create that, so if you want to edit something here is pencil file,

https://drive.google.com/file/d/0B3vI9LCU26KETm52bU00V1hDZ00/view?usp=sharing

Thanks

_______________________________________________
Kimchi-devel mailing list
Kimchi-devel at ovirt.org<mailto:Kimchi-devel at ovirt.org>
http://lists.ovirt.org/mailman/listinfo/kimchi-devel

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20150813/5e3522e3/attachment.html>