More user-friendly menu

[GoogleCodeExporter]

What version of the product are you using? On what operating system?
0.9 - Windows 7 / Debian Sid

Hi, i would like to suggest an enhancement for the menu, because as lines 
increase it becomes more confused. I know that you will focus on aesthetics 
when the extension will be almost finalized, but you can get more hits with a 
more sleek appearance.

Here's my advices:

1) Use separator between "Save all open tabs" and "Show list..." because they  
play semantically different operations.

2) Use an icon for every line. It allows a faster focus when the user opens the 
menu. If you need one, Silk is a nice and free icon set 
(http://www.famfamfam.com/lab/icons/silk/).

3) I think you can delete the "Tags for new pages" entry and place the tag 
field, immediately after the "Save this page" with an internal click-to-hide 
faded string like "tags here". It would be nice to have a field with only the 
bottom layer shown with a faded color.

I mean a thing like this: 
http://www.pctunerup.com/up//results/_201010/20101007192623_scrapmenu.png

Bye and keep working, the extension is awesome :)

DISCLAIMER: i know nothing of Chrome extensions programming, i'm talking 
generally :D

Original issue reported on code.google.com by focabresm on 7 Oct 2010 at 5:27

[GoogleCodeExporter]

Hello,

Thank you for suggestions and especially for the picture. I implemented your 
suggestions in version 0.9.1, so I'm closing this bug now.

Original comment by eugeniy....@googlemail.com on 7 Oct 2010 at 7:17

• Changed state: Fixed

[GoogleCodeExporter]

Terrific :D

I'm becoming addicted! Watching you implementation i found that the tags field 
is better without any border, and the inside string left-aligned. The focus 
glow is awesome :D

For the separators color i suggest the same of the popup border!

I modified the screenshot:
http://www.pctunerup.com/up//results/_201010/20101008004535_20101007192623_scrap
menu.png

PS: sorry if i seem intrusive :)

Original comment by focabresm on 7 Oct 2010 at 10:59

[GoogleCodeExporter]

There is a slight problem with input field without any border: it is hard to 
discover when you don't know already what it is and you cannot see what space 
it occupies (cursor change helps, but I think it is better with some other 
indication). Maybe it is better to use dotted or dashed border instead? I can 
left-align the placeholder, but then it should look different from the actual 
tags... The popup border depends on OS and probably used theme, on my laptop it 
is already the same as menu separator :) And glow effect was "built-in" for all 
input fields :).

Original comment by eugeniy....@googlemail.com on 8 Oct 2010 at 7:08

[GoogleCodeExporter]

Original comment by eugeniy....@googlemail.com on 8 Oct 2010 at 7:08

• Changed state: Accepted

[GoogleCodeExporter]

Original comment by eugeniy....@googlemail.com on 8 Oct 2010 at 7:08

• Added labels: Type-Enhancement, Usability
• Removed labels: Type-Defect

[GoogleCodeExporter]

The string could be "insert tags here..." that explains the function of the 
field and is long enough to cover the entire field.

Like this: http://www.pctunerup.com/up//results/_201010/20101008120828_new menu 
2.png

If you want to use a border for the field, maybe it can be more funny to use 
the glowed border from the start with the word "tags..." inside (left-aligned).

Like this: http://www.pctunerup.com/up//results/_201010/20101008120849_new 
menu.png

As you can see, in both the screenshots i removed the separator below the "Show 
list..." entry maintaining inalterated the margin with "Last saved pages". The 
play a similar function and it seems more sleek.

One thing i forgot to say it's about the triggering of the save function when 
you are inside the tag field. You can associate a trigger with the enter key 
button when you are writing the tags.

Finally i think that the field content has to be resetted when you save a page, 
what do you think about this?

Original comment by focabresm on 8 Oct 2010 at 10:19

[GoogleCodeExporter]

Ops, the screenshots url are bad, you have to copy/paste including the menu.png 
part.

Original comment by focabresm on 8 Oct 2010 at 10:22

[GoogleCodeExporter]

I think I'll do the following in the next version: input field without any 
border by default, placeholder "tags..." on the left (it can be hard to 
translate longer one and feet it into the field), dotted line on the bottom 
will appear if the first menu entry is highlighted.

Saved content in the filed is intentional, so it can be used to save several 
pages with same tags/categories (maybe I should rename them...).

I'm not sure if triggering save by pressing Enter is good idea... Maybe someone 
wanted to press "Save all"...

Original comment by eugeniy....@googlemail.com on 8 Oct 2010 at 12:01

[GoogleCodeExporter]

Ah, i didn't get that tags are also relevant for the "Save all open tabs" 
entry...

Maybe in this case it's more logical to place a second field after that entry, 
or this will be somewhat hard to discover. Furthermore, this will make the 
enter triggering functional.

In the case you'll go for this, you have to take care of the indent of the 
fields. Like this: 
http://www.pctunerup.com/up//results/_201010/20101008143700_20101008120849_new%2
0menu.png

In regard of the saved field content, you could make this an option, letting 
the user choose the behaviour. I hope other will join the discussion with 
interesting tips...

Keep the good work, i wait for the next rev :)

Original comment by focabresm on 8 Oct 2010 at 12:41

[GoogleCodeExporter]

For now I released a version with my changes as in Comment 8.

Making saving of the filed content an option will be good. But then there 
should be a way to add options. I'll look at this later, perhaps after I finish 
reorganizing saved pages list (hopefully this weekend). And I prefer to have 
only one input field for tags. Otherwise the menu looks too complex.

Original comment by eugeniy....@googlemail.com on 8 Oct 2010 at 1:14

[GoogleCodeExporter]

Nice, the ui becomes more attractive from rev. to rev.

I'll wait your new commits, bye :)

Original comment by focabresm on 8 Oct 2010 at 2:04

[GoogleCodeExporter]

What do you think about 2 keyboard shortcut to trigger the page save when 
writing tags? Something like: CTRL+ENTER for single page and CTRL+ALT+ENTER for 
all tabs...

Original comment by focabresm on 13 Oct 2010 at 7:11

[GoogleCodeExporter]

Shortcuts should be easy, I'll look at it later.

Original comment by eugeniy....@googlemail.com on 13 Oct 2010 at 10:15

[GoogleCodeExporter]

I added shortcuts in 0.10.2. It is Ctrl+Enter and Alt+Enter (Alt+Ctrl+Enter 
should also work).

Original comment by eugeniy....@googlemail.com on 13 Oct 2010 at 8:37

[GoogleCodeExporter]

@focabresm: I'm going to add options next. For now I have this idea about those 
tags:

Save default tags:
  x Always
    Only for one browser session
    Newer

Is it ok with you? Any other suggestions?

Original comment by eugeniy....@googlemail.com on 15 Oct 2010 at 9:44

[GoogleCodeExporter]

Terrific! I will test the function as soon as you release the next rev.

I think that those 3 options cover all usability aspects of the "default tag" 
function.

Original comment by focabresm on 16 Oct 2010 at 2:37

[GoogleCodeExporter]

Hi, I added those options in version 0.10.4. It was harder than I thought. 
Hopefully it works.

Original comment by eugeniy....@googlemail.com on 17 Oct 2010 at 6:40

[GoogleCodeExporter]

I tested it, it seems to work fine! Nice job :)

Now that i have many pages saved i see that it's a bit hard to recognize the 
last saved pages. What about using an icon also for this?

Original comment by focabresm on 18 Oct 2010 at 10:50

[GoogleCodeExporter]

I added icons in 0.11

Original comment by eugeniy....@googlemail.com on 18 Oct 2010 at 8:55

[GoogleCodeExporter]

Awesome, super sleek :D
Nice idea shortening the title using the tooltip with the full title!

Original comment by focabresm on 19 Oct 2010 at 8:44