RTL: Improve visibility of the [more help...] link by adding an icon [#234785]

Comment	File	Size	Author
#24	more_help.patch	1.33 KB	Rowanw

#17	more_help_screenshot_0.png	71.71 KB	Rowanw
#15	help.png	367 bytes	yoroy
#15	help.svg	193.42 KB	yoroy
#11	help.png	879 bytes	Rowanw
#10	more_help.patch	1.51 KB	Rowanw

#9	more_help.patch	1.53 KB	Rowanw

#6	help.png	862 bytes	Rowanw
#6	more_help_screenshot.png	37.86 KB	Rowanw
#6	more_help.patch	1.53 KB	Rowanw

#2	more_help.patch	1.33 KB	Rowanw

	more_help.patch	1.32 KB	Rowanw

Comment #1

floretan CreditAttribution: floretan commented 21 March 2008 at 22:32

Status:

Needs review

» Needs work

I agree with the string change from "more help" to "Read more", or even "Read more on this topic", as well as the removal of the ellipses.

Removing the brackets and the right-alignment of the link makes it very easy to confuse with regular text though, so while I think this patch is headed in the right direction I also think that we need some more work on this to get the intended effect.

Log in or register to post comments

Comment #2

Rowanw CreditAttribution: Rowanw commented 22 March 2008 at 03:13

Status:

Needs work

» Needs review

File	Size
more_help.patch	1.33 KB

Thanks for the feedback flobruit, I changed the text to "Read more on this topic", but when I right-aligned the link it looked out of place. I'm not sure what you mean by 'regular text'.

Another idea I just had: why not turn the help link into a tab? Is there any reason not to?

Log in or register to post comments

Comment #3

floretan CreditAttribution: floretan commented 22 March 2008 at 17:03

By "regular text" I meant the paragraph just above the help link.

Turning the help link into a tab would not be a good idea, what if two different tabs each have a help link? We want the help link to be visually linked to the help paragraph above it.

Adding an icon to this link as has been suggested in #230014: Identify more clearly internal help links (was: Awesomification of help) might make the help link more obvious, while keeping it visually linked but distinct from the help text. #193311: Ajax Popups in Drupal 7: Adding Modal Dialogs to Help, Confirmations and Filter tips (Unified) deals with these help links as well, and we should take that into account when choosing an icon.

Log in or register to post comments

Comment #4

Rowanw CreditAttribution: Rowanw commented 23 March 2008 at 10:00

An icon is a great idea.

Log in or register to post comments

Comment #5

floretan CreditAttribution: floretan commented 23 March 2008 at 17:45

Status:

Needs review

» Needs work

Log in or register to post comments

Comment #6

Rowanw CreditAttribution: Rowanw commented 29 March 2008 at 02:51

Title:	Improve 'usability' of the [more help...] link	» Improve visibility of the [more help...] link
Status:	Needs work	» Needs review

File	Size
more_help.patch	1.53 KB

more_help_screenshot.png	37.86 KB
help.png	862 bytes

I've made some significant changes/improvements this time, they include:

* Reworded the link (again) from "Read more on this topic" to "Get more help about this topic" - as I wanted to get the word help in the link.
* Added a circular blue help icon with a question mark inside - I searched the issue queue for existing help icons but I couldn't find any decent generic ones, so I made this one with Inkscape.
* Aligned the text to the right since the icon carries a lot of visual weight.

See attached for sreenshot and patch.

Log in or register to post comments

Comment #7

moshe weitzman CreditAttribution: moshe weitzman commented 29 March 2008 at 03:20

Now that we have the icon, I think we could go bck to a shorter text like 'read more'. my .02

Log in or register to post comments

Comment #8

keith.smith CreditAttribution: keith.smith commented 29 March 2008 at 03:34

I agree with Moshe. The icon is nice. "Get" is awkward here though. "More help" or "Read more" seem simple and to the point though.

Log in or register to post comments

Comment #9

Rowanw CreditAttribution: Rowanw commented 29 March 2008 at 03:49

File	Size
more_help.patch	1.53 KB

Just realised I made a typo in the last patch. You can get the icon from my previous comment.

@Moshe, what's wrong with the longer version?

For a short version, what about these? (the word 'help' should always be present, IMO)

* Get more help
* More help
* Help

Log in or register to post comments

Comment #10

Rowanw CreditAttribution: Rowanw commented 29 March 2008 at 04:09

File	Size
more_help.patch	1.51 KB

OK, I decided to go back to More help, it does seem right (talk about going full circle). Opinions?

Log in or register to post comments

Comment #11

Rowanw CreditAttribution: Rowanw commented 29 March 2008 at 04:38

File	Size
help.png	879 bytes

I've also cleaned up the icon a little (there was a faint white spot on the top left corner).

Log in or register to post comments

Comment #12

moshe weitzman CreditAttribution: moshe weitzman commented 29 March 2008 at 13:11

Title:	Improve visibility of the [more help...] link	» Improve visibility of the [more help...] link by adding an icon
Status:	Needs review	» Reviewed & tested by the community

Log in or register to post comments

Comment #13

Dries CreditAttribution: Dries commented 31 March 2008 at 18:08

I've tried this patch and while I like it, the help icon doesn't really fit the default Drupal theme (and its default colors). Can we try to make an icon that fits a little nicer?

Log in or register to post comments

Comment #14

catch

he/him

English

CreditAttribution: catch commented 31 March 2008 at 19:03

Status:

Reviewed & tested by the community

» Needs work

Marking to needs work for the icon. Otherwise this looks great though.

Log in or register to post comments

Comment #15

yoroy CreditAttribution: yoroy commented 2 April 2008 at 10:53

File	Size
help.svg	193.42 KB
help.png	367 bytes

keith.smith pointed me to this issue, re: the icon. For core, the current proposal seems a bit over-designed (the glow and double outline). I'd suggest using the standard 'Drupal blue' (#0077c0) as the background and just a single, white border.

Log in or register to post comments

Comment #16

yoroy CreditAttribution: yoroy commented 2 April 2008 at 11:09

Status:

Needs work

» Needs review

Log in or register to post comments

Comment #17

Rowanw CreditAttribution: Rowanw commented 2 April 2008 at 11:18

Status:

Needs review

» Reviewed & tested by the community

File	Size
more_help_screenshot_0.png	71.71 KB

Looks good, I've attached a screenshot of the blocks page with yoroy's icon.

Edit: here's a better screenshot.

Log in or register to post comments

Comment #18

Dries CreditAttribution: Dries commented 2 April 2008 at 20:23

Status:

Reviewed & tested by the community

» Fixed

I like the new icon a lot better so I've committed this to CVS HEAD. Thanks all. :)

Log in or register to post comments

Comment #19

hass CreditAttribution: hass commented 2 April 2008 at 22:20

Status:

Fixed

» Needs work

This patch seems missing the RTL stuff and the LTR comment.

.more-help-link a {
  padding: 1px 0 1px 20px; /* LTR */
}

Log in or register to post comments

Comment #20

Rowanw CreditAttribution: Rowanw commented 3 April 2008 at 01:40

How does the RTL stuff work exactly?

If it needs to be an exact mirror for RTL then the background position needs to be changed as well, how would this be handled?

Log in or register to post comments

Comment #21

hass CreditAttribution: hass commented 3 April 2008 at 06:59

The comitted LTR code in system.css must looks like (currently only the /* LTR */ comment is missing):

.more-help-link a {
  font-size: 0.85em;
  padding: 1px 0 1px 20px; /* LTR */
  background-image: url(../../misc/help.png);
  background-repeat: no-repeat;
}

...and the CSS in system-rtl.css must looks like:

.more-help-link a {
  padding: 1px 20px 1px 0;
}

what will overwrite the padding-left to 0px and padding-right to 20px in RTL. This is not a patch, but how the patch must looks like... untested. I'm not sure if you need to turn the graphic in Hebrew... maybe one of the RTL people can say more.