v2.ocaml.org
v2.ocaml.org copied to clipboard
ocaml
Different button colors on different pages
I just noticed that the button color on other pages are green while it's grey on news page. Accessibility wise, I think it needs to be fixed. Because from the home page down, users already have it registered in their mind that green means it's a button.
Button on other pages
Button on news page
I think it will create better user experience. If it's a good fix, then I would have it fixed.
@dinakajoy I truly feel the coloring of the read more buttons is misleading. It initially struck me as a disabled button till I clicked on it.
Although I just noticed that the linking of the "Read More" button is not the same as the title to the articles they are attached to. Did you notice this?
Nothing has been said yet by the maintainers on it. Regarding the link, can you drop a screenshot please because it was okay when I tried it except when you try to open in new tab.
I think the 'read more' button on the news can be improved. It is an accordion not a button, so I suggest we indicate a drop down arrow with 'read more' text so as not to confuse users.
When 'Read More' is clicked, it opens up the remaining content and still shows other news topic after it which is confusing as users think they are on a new page not the current page.
@dinakajoy Personally I don't mind the button background color though there is no harm in changing it to be consistent with other buttons as well. What concerns me most is its positioning. Someone reading through will attempt to click the ... after encountering it. I believe it would make a lot more sense to place it immediately after ... to convey to the user there is a hidden content which can be revealed by clicking the button.
@dinakajoy , thanks for filing the issue! I agree that there's room for improvement, we just need to discuss the details. It should be implemented by someone who hasn't worked on 2 or more simple issue yet though :)
@nibble0101 if the read more button is placed immediately after the ... then it would be better it is styled more as a link.
hey @pitag-ha , till now I have submitted 2 PRs. one for a good-first-issue https://github.com/ocaml/ocaml.org/issues/1258 and improved contribution.md. can I work on this issue, as it will be my 2nd good-first issue? I'm also observing the site carefully and after this I'll try and open an issue with medium difficulty to work on :))
Hi @pitag-ha , I would like to work on this issue as my 1st good-first issue.
@yashi-hub, it's nice that you're eager to contribute, but every applicant can only work on one issue tagged as good-first-issue.
@oma16, sure, go ahead :)
@pitag-ha The button before
the after
Thanks @oma16, I'm not sure if I can see well the before and after screenshots, but I think that's already better! Have you also tried indicating a drop down arrow with 'read more' as suggested by @dinakajoy and/or making the extension points clickable as pointed out by @nibble0101 might be what users expect? I'm not sure which solution would be best.
Although I just noticed that the linking of the "Read More" button is not the same as the title to the articles they are attached to. Did you notice this?
@LindieK , I hadn't noticed that yet. Could you point me to an article where that happens?
Thanks @oma16, I'm not sure if I can see well the before and after screenshots, but I think that's already better! Have you also tried indicating a drop down arrow with 'read more' as suggested by @dinakajoy and/or making the extension points clickable as pointed out by @nibble0101 might be what users expect? I'm not sure which solution would be best.
@pitag-ha, I will try it now .
@pitag-ha I discovered that the read more button reveals the rest of the article more like an accordion and clicking the title of the article takes you an article on the same topic on an external site. I realize that this might be expected behaviour as all the other articles listed behaved the same way.
I would say that if we went down that route that would have to be styled differently. But I'm no design expert at all :) You can try out different things and see what works. If any of the others also has some more input, that's also appreciated :)
I have seen the v-shape symbol being used to symbolize the presence of a collapsible content but I think it looks funny here with the preceding .... And I think you also need to think about reversing the symbol if the accordion is open to demonstrate the reverse effect.
I have seen the v-shape symbol being used to symbolize the presence of a collapsible content but I think it looks funny here with the preceding
.... And I think you also need to think about reversing the symbol if the accordion is open to demonstrate the reverse effect.
I think the ellipses is enough indication that there is more ahead. Even screen readers would pick that up. Based on existing conventions, the text "Read more" always signifies there is more ahead on whatever preceded it.
I would say that if we went down that route that would have to be styled differently. But I'm no design expert at all :) You can try out different things and see what works. If any of the others also has some more input, that's also appreciated :)
Hi @oma16! I think the screenshot you've provided here: https://github.com/ocaml/ocaml.org/issues/1353#issuecomment-815662944 is good and conveys intent of the buttons well. You can go ahead and open a PR for this change. Thanks!
