UI improvements: make prompt more succinct

[robwierzbowski]

First, thanks for the new library. After using it I have some suggestions to simplify the prompts and make them feel less lengthy.

Prompt line spaces

Right now in Inquirer there are empty lines in between each prompt:

Set up some directories. ☛
Nested directories are fine.

Choose a css directory (default "css"): css

Choose a javascript directory (default "js"): js

Choose an image file directory (default "image"): image

Choose a webfonts directory (default "fonts"): fonts

In the last Yeoman prompt I grouped my questions together by category, and added a single empty line break between each section:

Set up some directories. ☛
Nested directories are fine.
[?] Choose a css directory: (css) 
[?] Choose a javascript directory: (js) 
[?] Choose an image file directory: (image) 
[?] Choose a webfonts directory: (fonts) 

Choose a template. ☛
[?] Choose a Jekyll site template
 d: default
 h5: HTML5 ★ Boilerplate (d) 

Removing the whitespace will allow for grouping, make the prompt seem shorter to the user, and keep possibly related information on the screen longer.

Defaults:

Currently defaults display like this:

Choose a css directory (default "css"):
// after hitting enter
Choose a css directory (default "css"): css

The word 'default' lengthens the prompt, and for me interrupts the reading flow. The previous prompt added the default after the colon:

Choose a css directory: (css)

This seems more understandable, since the default value is in the area that you are adding content to, and avoids some repetition within and between prompts. I think the quotes could be removed with no negative effects as well. If you wanted to get really fancy you could remove the parenthesis after the user hits enter, like this:

Choose a css directory: (css)
// after hitting enter
Choose a css directory: css

List help

The list choice is awesome. It includes a "use arrow keys tip" that disappears on first arrow keypress:

Use a css preprocessor?
  [X] sass
  [ ] compass
  [ ] none
(Use arrow key)

This is minor, but I think this could be made more compact by adding the tooltip after the last choice or after the prompt message:

Use a css preprocessor?
  [X] sass
  [ ] compass
  [ ] none  (Use arrow key)
// or
Use a css preprocessor?  (Use arrow keys)
  [X] sass
  [ ] compass
  [ ] none
// or even
Use a css preprocessor?  (↑↓)
  [X] sass
  [ ] compass
  [ ] none

When a generator has 10+ prompts it's essential to keep them as compact as possible to avoid overloading the user. Pages of prompts create the perception of complexity.

Thoughts?

[SBoudrias]

Wow, really nice suggestions! I think we'd go for that. Plus it's in sync with some of the visual improvement asked over on the Yeoman-generator repo.

I'll keep you posted on the advancement.

[robwierzbowski]

Thanks!

[SBoudrias]

@robwierzbowski Can you give a try to the lastest master?

I implemented your suggestion. And also, now the lists type prompts fold once they're answered letting the answer easier to review.

[robwierzbowski]

Looking great! Couple notes:

• I don't think the (default option) is necessary on the list prompt type, since the marked checkbox is a clear indicator of what you get when you press enter.
• The [?] prefixes are a node prompt library default. I don't think they're needed, but it might be worth getting other opinions.
• The cursor bumps right up against the last list prompt option now, which is a little constricting. Could it be hidden on list prompts, or can a space be added in between it and the last prompt choice?
  

Great improvements so far. I'm really looking forward to using this.

[robwierzbowski]

Just noticed the folding. Very cool.

[stephenplusplus]

It just keeps getting better and better 🆒

[SBoudrias]

I fixed some of the remaining issue here. Could someone give it a try on the lastest master?

I was wondering if it could be nice to have the prefix [?] changed depending on the state of the question:

• [?] Question mode
• [!] Error mode (the input didn't pass validation)
• [√] Answer is saved

[robwierzbowski]

Great! I'll test out tomorrow.

Do you think it would give the user more information at a glance? For me, those states are apparent based on what text is being presented to me at the time. I do really like the color change from white to blue when you enter a choice — that helps me easily see the choices I've made after everything's been filled out.

I was thinking the checkmark would be a nice replacement for the x in the list prompt. Like:

[robwierzbowski]

Although I don't know if the check character is universal, or if I added a font with it at one point when configuring zshell.

[sindresorhus]

I was thinking the checkmark would be a nice replacement for the x in the list prompt. Like:

I agree. Might also consider dropping the brackets [].

[SBoudrias]

I removed the square brackets [ ] from all prompts (exception of the checkbox prompt on Windows and the question line prefix). Now list prompt simply implement a pointer like the checkbox. I think this better convey the action being done for this prompt (and there's less noise). So, thanks for the suggestion :)

Should be almost ready for a 0.2!

[sindresorhus]

Yay \o/

[sindresorhus]

Just wanted to say you're doing an awesome job with this prompt. I've had "create a better more interactive prompt" high on my todo-list for a long time, but never was able to realize it. So happy we finally have this.

[SBoudrias]

Thanks, happy to reduce your OS workload :)

I'm closing this issue as 0.2 is getting out in the next minutes. Feel free to reopen issue for any other UI improvements; these comments and suggestions are incredibly usefuls.

[pldg]

Checkbox are not displayed properly in WSL (tested also with ConEmu) and Git Bash for Windows 10

Is there a way to add square brackets instead of the current symbols?

   [ ] jpeg
   [X] webp
-> [X] png
   [ ] tiff

Suggestion: maybe add another prompt type rawcheckbox