Eenduidig en duidelijk stylen van tekst-links

Zenmo / Holon-webapp

MIT License

2 stars 2 forks source link

Eenduidig en duidelijk stylen van tekst-links #966

Open patrickkerling opened 5 months ago

patrickkerling commented 5 months ago

TYPE UX/Technisch

LOCATIE/URL Gehele website

PROBLEEM Tekst-links zijn voor de scannende gebruiker onvoldoende duidelijk. Ze vallen onvoldoende op.

BESCHRIJVING

Tekst-links in duidelijker contrast laten zijn met de rest van de website/content, bijv. door het kiezen van een contrastkleur
Er zijn 3 verschillende typen links te onderscheiden, da tmoet ook visueel voor de gebruiker duidelijk zijn: link naar een normale pagina op de website, een link met meer informatie (vaak met tooltip) en een externe link.

IN PPT TE VINDEN ONDER #5

patrickkerling commented 5 months ago

Een suggstie hiervoor is meegenomen in deze mockups:

een iets duidelijker contrasterende kleur
icoon voor externe links
icoon voor links met pop-up met meer info en link naar wiki

Erikvv commented 5 months ago

Aangepast aan wiki-links:

groene kleur
dikkere onderlijn
dashes ipv stippeltjes

i'tjes krijg ik niet echt lekker. Ben er nu wat scheel op gekeken, misschien later nog eens kijken.

Aangepast aan interne links:

blauwe kleur
dikkere onderlijn
onderlijn verder van de tekst af

voor: links-before

na: links-after

patrickkerling commented 4 months ago

als alternatief op een evt. itje zouden we ook het mouseover effect iets kunnen aanpassen, zodat duidelijk is dat dit naar de wiki gaat. Nu is het een vraagteken, we zouden daar nog iets als "wiki" icm het vraagteken van kunnen maken?

Erikvv commented 4 months ago

Ingebouwde help cursor vervangen door een eigen SVG.

cursor-before

cursor-after

patrickkerling commented 4 months ago

Is het een idee om het label "wiki" achter het vraagteken te zetten, om te voorkomen dat dit een heel grote (hoge) cursor wordt?

Erikvv commented 4 months ago

Gedaan. Dacht dat het vreemd zou worden maar is wel OK.

cursor-horizontal