fireout / keepasssequencer

Word sequencer for KeePass
65 stars 12 forks source link

Graphical User Interface #15

Closed fireout closed 8 years ago

fireout commented 9 years ago

We should make sure the GUI is simple to use, also we should confirm where to integrate the Multiple configuration, Direware, and potentially other options.

fritzophrenic commented 9 years ago

Here are my suggestions for the user interface.

I actually really like the way you handled adding individual sequence items. That works fairly well. What I would change, is the configuration of each item.

Right now there is a gear icon with a drop-down menu as follows:

I would replace this menu, with a pop-up dialog. My suggestion for character items would be as follows:

  1. ☑ Always include
  2. Chance to include: [ 50% ▲/▼ ]
  3. Number of characters: [ 1 ▲/▼ ]
  4. (Something for LengthStrength would go here; what does this option even do?)
  5. ☑ Include default character list

If it isn't clear, items (1) and (5) would be checkboxes. Items (2) and (3) would be numerical entry fields with up/down arrows like is often done for font size, margins, etc.

Item (2) would be grayed out if "always include" (item 1) is checked. We could display 100% as well if "always include" is selected.

Item (5) would be grayed out and checked, when no custom list is entered. When the user sets a custom list, it would change to unchecked, and would no longer be grayed out.

Word items would be similar:

  1. ☑ Always include
  2. Chance to include: [ 50% ▲/▼ ]
  3. Capitalization: [ No letters / Every letter / First Letter / Random letters ]
  4. Capitalization chance per letter: [ 50% ▲/▼ ]
  5. ☑ Do character substitution
  6. Chance to substitute characters: [ 100% ▲/▼ ]
  7. ☑ Include default word list

Here, item (3) would be a combo box (a.k.a. drop-down menu), and item (4) would only be enabled, when item (3) has "Random letters" selected. Similarly, "chance to substitute characters" would be disabled/grayed out only when item (6) is selected. Items (1), (2), and (7) would work exactly like the character item menu.

I think this type of configuration menu would be much clearer and easier to use than the current non-descriptive popup for each individual configuration item.

Additionally, see issue #13. If multiple items are selected, for now we would disable/gray out the gear icon. It would be too difficult to try configuring each item in one go, especially if there are a mix of word items and character items. The "remove" button would remain enabled if multiple items are selected, to allow removing multiple items at once.

Finally, for issue #6 I plan to use either a combo box or radio button at the top of the setup dialog, to select between a word list or a file path. I want to completely remove the word list from view if the file-based configuration is selected, and vice versa.

For issue #5 I want a combo box with all the currently saved named configurations, as well as a "New..." item. This could go either at the top, next to the file/word list combo box, or it could go at the bottom. We will need a "delete" button as well to remove named configurations, right next to the combo box. This is where I would put the "Diceware" and any other pre-made configurations. We would save these just like any other named configuration, but placed in the install directory instead of the user directory, similar to the way we do normal config.

What do you think?

fireout commented 9 years ago

(Something for LengthStrength would go here; what does this option even do?)

This option works well with a bigger length; let's say you have a CharacterSequenceItem with a length of 10, well with a high LengthStrength, the resulting random sequence item will most likely be 10 characters, but as you go lower and lower, you will end up with a random length from 1 to Length. The logic is something like

// This code won't compile, it's just some pseudo code.
for (i=0; i<Length;i++)
{
    resultingCharList.Add(GetRandomChar());
    if (random.Between(0,100) > LengthStrength)
        break;
}
fireout commented 9 years ago

I like where you are going with your options popup, I especially find that the combinaison of a checkbox and a up/down simplifies understanding what's possible.

But would we have a seperate popup for specifying specific characters/words? Do you think it would be to complex to use if we would instead: Replace option 5/7 (including default characters/word) with a dropdown with Default Word|Characters, Default Word|Characters with additionnal, Specific Word|Characters (we can work on better labels, but you get the idea?). And when we select something else than the first option, a textbox shows up allowing to enter additionnal word/characters?

fritzophrenic commented 9 years ago

Good point. It's probably clearest if the "include default word list" option is right next to the word list. I would not crowd the options dialog with that. How about the pencil icon becomes an "edit word list" or "edit character list" button that brings up a separate dialog. It would have two check buttons: "Default list" and "Custom list". Next to "custom list" is a text entry field to enter words, disabled when "custom list" is unchecked.

When file-based word lists are added, that would get a third check box and file browse field.

fritzophrenic commented 9 years ago

I notice there is not currently any GUI for item-specific substitutions. Do you have any ideas where that should be? How hard is it to make a configuration dialog with multiple tabs? We could put the word/character list on one tab, the settings discussed above on another tab, and the substitutions and substitution-related settings on a third.

fireout commented 9 years ago

I don't think I have got that far in the UI development. If I remember correctly, it was my next think to do... It's not that hard to add tabs, and it's a good idea to group it [within tabs] like you say. The only thing I have a hard time is to divide the form elements into smaller elements (files) to allow for an easier maintenance in the future... Because, from my experience, as a form grows, if it's all implemented in the same class, it gets very hard to change/add feature.

fritzophrenic commented 9 years ago

One more UI improvement needed: the current listing of each option in text form for each item in the dialog is not very user friendly. I think it would be better, to instead give 5-6 samples of what the item would generate. E.g. the first 5 words out of the selected word lists, with capitalization and substitutions applied just like when generating a password. Then users can see what the options do immediately, with a fair guess at the enabled options. For details they can just click the "edit" button. What do you think?

fireout commented 9 years ago

My first draft at a UI was something like that; well, in fact, it was one sample but spaced out to clearly see each elements, and then you could see/edit options for each item by clicking on it, and regenerate another "sample" on demand. I ended up forgetting this method as I was wasting time trying to find an easy way to implement it (have I mentionned UI is not my strong side?).

I'm not so sure about the edit button though, what flow did you had in mind? Would the edit bring up the list of elements in a dropdown?

But the Idea of showing a (some) sample(s) is great, maybe we can have something in between, something like

Word Word Char Word
wh4tev whatev l5u 4NYTHI
anythin wh4tev m1h WHATEV

And then, clicking on any element of one column would edit the sequence item? I'm just not so sure how easy it would be to "highlight" a whole column when editing, to clearly show what is being edited; although it might not be that important...

fritzophrenic commented 9 years ago

I see. Actually I like the layout of the current UI, that has a (vertical) list of items; with buttons to re-arrange, edit, or configure each item.

I think with the tabbed item config we discuss above, we could combine the "configure" and "edit" buttons, but the only change I was suggesting for the general layout was to replace the multiple text columns with a list of examples.

fireout commented 9 years ago

So then something like the following Sample 1 and 2 and more, or something like Samples?

Item Sample 1 Sample 2 Samples
Word wh4tev 4nythi whatev 4nythin wh4tev
Word anythin 4nythin whatev anythin Whatev
Char l3m n98 nfe i83 j2k
Word WH4TEV ANYTHIN WHATEV ANYTHIN 4NYTHIN

?

fritzophrenic commented 9 years ago

I was picturing something like the "samples" column. If words are pulled from multiple lists (custom, default, file...) then we could pull one or two words from each list for the sample.

I'm not sure if there's a good place to ask for feedback. :-)

fritzophrenic commented 8 years ago

I just pushed a branch where I started working on using "samples" instead of a list of options. I need to figure out how to get the samples to refresh when you change the word list, character list, or substitutions list, other than that it's ready to try out. The samples refresh fine when you edit the configuration for any given item.

fireout commented 8 years ago

I tried some moving around and little ui tweaks I thougt I'd share here.

I was hoping it would emphasis more on the words in the upper part, I also think their will rarely be a lot of characters so I kept this input small.

I find it better with previews of 50 full passwords. @fritzophrenic do you find any additionnal use displaying the samples columns also? I removed them to find room, but I could probably fit them in tight if needed.

Changes are availables if you want to see how it resizes

Any thoughts?

fritzophrenic commented 8 years ago

I love how clean and usable that looks. The reason I had a sample of each word was to show the effect of the options. Do you think this look accomplishes that? Since we're probably removing the "probability" field, I think this probably shows the options good enough.

By the way, I think my changes on the progress bar are done now (including a readout). If you think this is the new look, then I'll merge in your changes, put out a pull request, and update the wiki tomorrow.

fritzophrenic commented 8 years ago

Oh, but can we lose the side-scroll? 4 columns should be plenty. :Heck, even 2 or 3 should be plenty, which would leave more room for longer sequences to display fully.

fireout commented 8 years ago

Yes we should probably drop the scrolling. The number of column is dynamic depending on the length of the passwords. I'm not sure we can just simply disable the scroll though, other option is to make the amount of generated previews variable depending on the pasword length so it "fills" the list box most of the time... Hopefuly we can disable the scrollbar without side effects. I'll see what I can do about this.

I think it shows enought password to understand what each options does, and yes, it should be even easier with some options removed. We could enhance each input box and add text to explain what each one does,

Sure, go ahead with merging into this branch, I also wanted to work on the wiki, I wanted to divide the guide into parts, so it is not one big one-pager, and it would be easier if we both have to work on in, being different page instead of the same one. Can you also split the wiki page if I havent had the time to do it before you add your changes?

fritzophrenic commented 8 years ago

I think we're really close on the interface, now. Especially with the "advanced mode" hiding some options that won't be used frequently.

I don't think we need a full dialog anymore when editing options. Here's what I think should change still:

  1. The menu items for adding words to the default list should probably move out of the "File" menu to their own menu. Maybe an "Add Words" menu or similar.
  2. "Include defaults" can be a checkbox directly in the menu rather than launching a dialog, similar to how advanced mode looks.
  3. Default character length should probably be 1. And/or, put a character count in the sequence item itself? E.g. instead of "Character" or "Character (50%)" show "2 Characters" or "0-5 Characters (50%)"
  4. Need tooltips in the sequence item options menu

Do you agree? Should we make issues to track each of these?

By the way, were you planning to announce on the KeePass forums when there is a new release? And maybe get the URL on the plugin page updated? Or do you still want people going to SourceForge first?

fireout commented 8 years ago

Sorry, I lost track of this discussion...

I did post a note on the keepass website by now, and they updated the link.

I do not mind moving the default words options into it's own, we could name it Add Preset (?) until we come up with a better name...

If I'm correct, point 2 is done?

As of naming the sequence item accordingly, definitly! :) Same thing for the tooltips.

We should track those with issues, except for anything that would already be completed...

fritzophrenic commented 8 years ago

OK, I think I've captured remaining GUI tasks in Enhancement issues. Point 2 is done already as you note.

I saw they updated the KeePass website. Two suggestions there:

  1. It's not clear where to download files. Do you want to use the "Releases" feature of GitHub for that? I'm not sure exactly how to do that but that's probably what people expect. Or at least, link to the files in the installation instructions. By the way, the readme in the releases folder mentions an old alpha release instead of the latest.
  2. How should people ask for help? Using the forums on Sourceforge or using this issues list? Or through email? We should probably specify that. Maybe with a "Getting Help" wiki page.

Feel free to close this issue after responding, unless you think there's more to discuss.

fireout commented 8 years ago

It's the first time I use the github release feature... I read about it first... I did create a release now, I hope I've done it right :)

I'll create a getting help page, it's a good idea, although I do not have a preference about it would work

I like the github issues because it's linked to development, but I find it less discussion oriented... I like sourceforge forum, well, because it's a forum.

As for the readme, I updated it in a branch a while back, must have forgot to create a PR for it, I did want you to review, it just in case. I'll create it now.

Thanks again for your help