Funktionslink

Sådan bruges komponenten

Anvendes til

Brug funktionsikoner til at tilbyde brugeren systemfunktionalitet, som fx: print, pdf, indstillinger, etc. Funktionalitet, der ikke er essentiel for brugerens umiddelbare gennemførsel af løsningen.

Anvendes ikke til

Brug ikke funktionsikoner til generel navigation mellem sider eller til næste trin. Brug da standard links og primærknap i stedet. Anvend ikke funktionslinks til navigation til forrige side, anvend da tilbage-linket.

Brug sprogvælgeren til valg af sprog.

Vejledning

Systemfunktionalitet er fx:

• at aktivere browserens printfunktionalitet
• at vælge en dato i en popover kalender
• at generere en pdf
• at ændre indstillinger i løsningen
• at åbne operativsystemets mailklient
• at gemme en kladde i løsningen
• m.fl…

Funktionsikoner bør akkompagneres af et ord, der beskriver funktionaliteten. For næsten alle ikoner gælder det, at betydningen af disse ikke er entydigt givet og skal du vælge imellem kun et ikon eller kun et ord, vil ordet altid være det bedste og sikreste valg.

Enkelte ikoner kan stå alene, hvis der fx skal spares på pladsen i en tabel. Det drejer sig fx om: slet, rediger, print, pdf og gem, der er relativt konventionelle ikoner.

Har man brug for at fremhæve en funktionalitet, fordi brugeren ikke bør gennemføre løsningen uden brug af funktionaliteten, bør man vælge at lave en tertiærknap med et ikon i, i stedet for et funktionslink.

Sådan (do)

Sådan: Placér funktionslinks så som ”Print”, ”Del”, ”Åbn som pdf” mv. øverst på websiden, hvor brugerne kan se dem, før de begynder at interagere med indholdet. Brugerne har ikke behov for at printe en side, når de har læst den. Undersøgelser viser også, at brugerne ofte deler sider, inden de læser dem (Manjoo, 2013).

Ikke sådan (don't)

Ikke sådan: Undlad at placere funktionslinks i bunden af sider. Undgå også ukonventionelle placeringer, hvor det måske slet ikke falder brugerne ind at kigge efter funktionslinkene (Farrell, 2015).

Se komponenten i eksempelløsninger

Trinformular til registrering: Vælg personer

Referencer

• Farhad Manjoo: You Won’t Finish This Article (2013)
• Susan Farrell: Utility Navigation: What It Is and How to Design It (2015)

Installation

HTML Struktur

<a href="javascript:if(window.print)window.print()"
    class="function-link"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#print"></use></svg>Print</a>

Funktionslink kan teknisk defineres som <a> element eller <button> afhængigt af funktionen.

Gem kladde

<button type="button"
    class="function-link"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#save"></use></svg>Gem
    kladde</button>

Luk

<button type="button"
    class="function-link"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#close"></use></svg>Luk</button>

Slet

<button type="button"
    class="function-link"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#trash-can"></use></svg>Slet</button>

Download

<button type="button"
    class="function-link"><svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#file-download"></use></svg>Download</button>