Improve the kite dialog design.

[ccordoba12]

The idea is to do this for 4.2.2 and we'll discuss it after coming from holidays.

[isabela-pf]

My main goal is to continue making consistent use of Spyder’s UI, and since I’ve received some positive feedback about the tour dialog (#22) I’m working with that as a template. In meeting, we also talked about whether the image should be the Kite logo or a Spyder-style icon for code completion. Since it’s going to take me a little longer to make icons, I wanted to show ideas with the logo first since everything else would be the same for either option.

These options are mostly visual updates of the current dialogs with a little bit of text changes in dialog 1.

Dialog 1 Option 1

This has only two buttons because the Learn More is a link in the text. It makes for a more compact dialog.

Dialog 1 Option 2

This option keeps all three buttons from the current dialog.

Dialog 2

Dialog 2 looks about the same as well. It would keep the current gif even though I’m showing a static screenshot.

I’m not sure we even need this dialog. Is there a reason the Learn More (in any form) doesn’t link directly to the Kite website? Right now, both of the dialogs have some kind of Learn More that link to different places (either the second dialog or the Kite website) which is not a behavior I think is necessary.

[juanis2112]

After meeting:

• [ ] We like dialog 1 option 1 but changing the icon to something that refers to code completions and include the kite icon but without the text.
• [ ] @ccordoba12 will send @isabela-pf the new text for the dialog
• [ ] Include the title from dialog 2

[isabela-pf]

Hi again! After getting some feedback on the last round, here are some updated mockups.

The biggest change we wanted to try is to have a Spyder-style illustration representing code completion. All options need more refinement, but since we are trying to get this done quickly I thought it might be best to share a few concepts even when unpolished. I’m also trying to work in the Kite logomark where possible, though it will need review to check it is being used in a way the brand allows.

Dialog 1 Option 3

The puzzle is about helping fill in the gaps by noticing patterns to create a bigger picture.

Dialog 1 Option 4

The robot is supposed to be a playful version of the idea that working with Kite is like getting help/working with another expert. It’s a conversation between parties, like finishing each other’s sentences. My main concerns are that this looks too much like a mascot that Kite doesn’t have and that it only looks right with the logo being the same shade of blue which may break Kite brand gudelines.

I also have a version without the Kite logo.

Dialog 1 Option 5

This is a more literal depiction of a typical editor. I think it might read more quickly and familiarly as code completion than any of the other options.

[juanis2112]

From the meeting:

1. @ccordoba12 will ask about having or not the secondary dialog
2. @isabela-pf will try different outlines around the screenshot (the black doesn't really look good)
3. Add more line numbers in the screenshot
4. We like the Matplotlib screenshot instead of the other one
5. Title is fine

[isabela-pf]

Based on the feedback and the screenshots we currently have, here's what I think the proposed dialog will look like in our template.

I'd recommend using a shadow instead of solid black outline around the image since we are trying to avoid adding more outlines to Spyder. Let me know what specifications are helpful for this; I don't know what information Qt might be looking for. I've also made the lower "Kite is free to use…" text the same size as the rest because the text is already at the minimum recommended size for digital text and I'd rather not go below that.

The above dialog is wider than our current template because it's the best way to accommodate the horizontal image without making it small. To show what I mean, here is the dialog with the same width as the existing tour dialog.

[ccordoba12]

@ccordoba12 will ask about having or not the secondary dialog

Adam told me we can remove the secondary dialog and leave only the link in this new dialog.

We like the Matplotlib screenshot instead of the other one

This is the actual screenshot, with more line numbers (as we wanted);

[ccordoba12]

I'd recommend using a shadow instead of solid black outline around the image since we are trying to avoid adding more outlines to Spyder

Sounds good to me. It looks nice!

Let me know what specifications are helpful for this; I don't know what information Qt might be looking for

I'm not sure about that either, but I think at this point @juanis2112 can proceed with the implementation, so she'll let us know what's technically feasible.

[isabela-pf]

🎉