Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change logo for tour dialog at the beginning of spyder #22

Closed
juanis2112 opened this issue Oct 13, 2020 · 6 comments · Fixed by spyder-ide/spyder#14104
Closed

Change logo for tour dialog at the beginning of spyder #22

juanis2112 opened this issue Oct 13, 2020 · 6 comments · Fixed by spyder-ide/spyder#14104
Assignees
Labels
ready-for-implementation Changes decided during UX study

Comments

@juanis2112
Copy link
Contributor

The idea is to design a logo for the new dialog added in spyder-ide/spyder#13953 to make it more appealing and "fun".

@isabela-pf
Copy link
Collaborator

There’s a few directions we could go with this icon depending on what part of the message we want to emphasize and how we think they look. Quick note: these icons are designed in the same style as the work being done on #11 and #14. I also started with them sharing the same color, but I’m not sure if I like the contrast for this dialog since a dialog is designed to stand out while the work for empty panes is meant to not distract until a user is ready to explore that pane. That’s why there are two color options (both tied to the color work happening on #13).

The main concept I had to emphasize the tour was a map. The first version is supposed to be like exploring a map, though with magnifying glasses being so closely tied to search features, I could see this not being chosen.

Frame 5

Frame 13

Another idea with the map is to emphasize how the tour shows the user where they are.

Frame 8

Frame 11

We could also focus on the “welcome” part of the message and go with a simple hand wave. Yes it doesn’t emphasize the tour, but I do like that it feels human and easy enough to recognize that this is ideal for people new to Spyder.

Frame 9

Frame 10

Finally, I wanted to show the binoculars work since we discussed it when meeting along with the concept of exploring space. This is the best angle for them to actually look like binoculars, but having any setting around it doesn’t work with the small space/icon role. Even though this isn’t the option I’d recommend, I wanted to include it to follow up on our discussion.

Frame 6

Frame 12

@ccordoba12
Copy link
Member

ccordoba12 commented Oct 16, 2020

Hey @isabela-pf, thanks a lot for your work on this! These are the ones I like the most:

Frame 11

Frame 10

I especially like the saluting hand, I agree it feels human and welcoming. What you think about using both? One to the left and the other to the right of the text? I think they both apply because we're welcoming people and telling them about the tour at the same time.

I also started with them sharing the same color, but I’m not sure if I like the contrast for this dialog since a dialog is designed to stand out while the work for empty panes is meant to not distract until a user is ready to explore that pane

I also think that using a more contrasting shade of blue looks better. But I'm not sure about a shade leaning towards cyan. Let's see what @juanis2112 and @steff456 think about it.

@isabela-pf
Copy link
Collaborator

Based on their feedback, we're going more towards the map but adding in some of the details from other options. I also made a few changes to try and make the dialog a little more prominent, mainly making the dialog larger and giving it larger margins so it feels less crowded.

As for color, we agreed on going with the lighter option. I also toned down the cyan and made it a little more pure blue.

Frame 17

I can't think of any other ways to make the tour more prominent based on existing Spyder interactions. I don't think it should be more disruptive than a standard dialog, since any fresh install of Spyder will bring it up and many users might not need it. If it does end up happening, I do think it could work as a notification (like discussed in #8) because then the tour can be put off but still saved for later in the center. Looking like this:

88 (1)

@ccordoba12
Copy link
Member

Based on their feedback, we're going more towards the map but adding in some of the details from other options. I also made a few changes to try and make the dialog a little more prominent, mainly making the dialog larger and giving it larger margins so it feels less crowded.

Thanks for your help @isabela-pf! Looks good to me now.

@juanis2112, @steff456, what do you think?

@juanis2112
Copy link
Contributor Author

I think this looks great! Thanks Isabella! Let me know @steff456 and @ccordoba12 if I can tag this as ready for implementation and do it as soon as possible so we can have it for Spyder 4.2

@ccordoba12
Copy link
Member

Please proceed with the implementation @juanis2112. If @steff456 has additional comments, she can leave them in the corresponding PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ready-for-implementation Changes decided during UX study
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants