New design for help pane

[juanis2112]

Complete new design for Home in help pane including: Link to Spyder docs, Link to Online help, Link to IPython docs Original message (without tutorial part)

Sections in Help pane will be displayed in different tabs.

@isabela-pf will be helping us with mock ups to come up with a new design!

[isabela-pf]

Based on current discussions, there's a few parts to this redesign. I'm listing them here to help make the direction of this issue more clear.

• Combine Help and Online Help pane experiences and resources into a single pane
• Update the toolbar with appropriate icons and search to reflect the new experience
• Add an updated and more comprehensive “home” page (that can be revisited without restarting Spyder!)
• Add in-pane tabs (including “home”, Spyder docs, preferences and/or shortcuts as possibilities)

[isabela-pf]

So far I’ve mocked up the “home” page and worked on possibilities for the toolbar. In terms of content, the new home needs basically an index that links to the Spyder docs, Online Help, and the IPython docs and keeps the original message (telling users the easy ways to access help from within the the Editor or Console). I did rewrite this content a little, so here’s the original and my edits for easy critique. Let me know if the way I rewrote it is inaccurate, confusing, or just not wanted.

Original: Here you can get help of any object by pressing Cmd+I in front of it either on the Editor or in the Console. Help can also be shown automatically after writing a left parenthesis next to an object. You can activate this behavior in Preferences > Help. Rewrite: Access the Help pane any time by pressing by pressing Cmd+I with your cursor by any object in the Editor or Console, or by typing a left parenthesis next to an object.

The X icon next to Explore Spyder Docs is a placeholder for the Spyder logo (since that hasn’t been finalized).

This is how it could look if we do not want to use icons to mark each option.

[isabela-pf]

For the most part, I choose toolbar item placement based on browser standards. I’m going to pick apart the changes I made so that it is clear what is being replaced or added compared to the current two toolbars (across what is currently two panes).

The backwards arrow, forwards arrow, and home should look standard (though these are Material icons instead of the current Font Awesome icons). The refresh icon is also similar, but when a refresh is initiated it should change to Material’s “clear” rather than having an almost always inactive stop button as it currently does. This will also help clear up the toolbar.

The circled check on the right is meant to replace the loading bar on the current online help. When something is loaded it will look like this, but I think it could have a separate loading animation with the circle alone (I can mock this up if people think this is a good idea).

The main area I’m still working out is the search bar itself and whether it can be combined with a feature that allows users to drop down select what help resources they want to access (so they don’t always have to go back to home). The first option I presented combines the two, but this second option has a separate search bar and icon drop down. I’m not sure how I feel about this, but I’d love the feedback.

Here is the combined option with the open drop down.

Here is the separated option with and without the drop down.

[juanis2112]

From the meeting:

• No check mark. Only spinner (in the position of the checkbox) and it will be separated from the reload.
• Missing hamburger menu in the top right corner.
• Replace IPython docs for "Object docs".
• We like second option for the search field but we would like a placeholder in the search field that displays the text. depending on the dropdown option.
• Provide explanation about being able to change the search field.
• Add tabs for displaying the online help and the docs "Index" pages (play with it?)
• Add shortcuts

[juanis2112]

From the meeting:

• Add a section for "Learning Resources" pointing to an index with links to resources like Scipy lectures, Carpentries, etc...

[isabela-pf]

We had an extensive discussion about this trying to figure out how the desired UX behavior and technical needs fit together and what current experiences make sense to keep and which we want to change. We think this is something we need to get more information on how people use help and what they care about. Here are some questions I wrote to get discussion started.

1. How would you explain the help options in Spyder to someone who had never used them before?
2. What are the main two reasons you use any of the help features in Spyder?
3. If you had to keep one thing about the current Spyder help experience, what would it be?
4. If you had to get rid of one thing about the current Spyder help experience, what would it be?
5. What would be your ideal way of getting help in Spyder?

[juanis2112]

1. Interactive help. You can get help from any Python object
2. Interactive + Documentation
3. Interactive help
4. Online help? Get rid of it
5. Documentation center (spyder docs, python docs and SciPy lectures) + Interactive help

[juanis2112]

1. Merge online help and help pane

• Add information from the environment that the user is to the help pane to be able to use it interactively and for searching objects from the index
• Decide a single style to display information from both sources
• Add link to the docs with the command '?' (or add placeholder to give access to docs)

[juanis2112]

About the meeting:

1. Home button will show a list of resources divided into "Spyder resources" and "External Resources". The second one will show links that open externally.
2. Add arrows for navigating forward and backward as in RStudio (Both for static and interactive help)

[juanis2112]

Internal resources:

• Information of the elements of Libraries in the environment (This is basically what we have in the interactive help right now).
• Index with libraries
• Tutorial
• Documentation included in the same format as the tutorial with NO gifs and NO screenshots

External resources:

• Numpy docs
• Pandas docs
• Scipy lectures
• YouTube tutorials

[juanis2112]

Idea for the documentation: Maybe have a script that generates it from the existing one to avoid maintaining both.