Odkazy

S odkazem mohou uživatelé přejít na jinou stránku, okno nebo téma nápovědy; zobrazit definici; inicializovat příkaz; nebo zvolte možnost. Odkaz je text nebo obrázek, který označuje, že je možné na něj kliknout, obvykle zobrazením pomocí navštívených nebo nevzorovaných systémových barev. Tradičně jsou také podtržené odkazy, ale tento přístup je často zbytečný a vypadá z prospěchu, aby se snížil vizuální nepotřebný přehled.

Když uživatel najede myší na odkaz, text odkazu se zobrazí jako podtržený (pokud ještě nebyl) a obrazec ukazatele se změní na rukou.

Odkaz na text je nejlehčí ovládací prvek, na který lze kliknout, a často se používá ke snížení vizuální složitosti návrhu.

Je to správná kontrola?

Při rozhodování zvažte tyto otázky:

• Je odkaz použitý k přechodu na jinou stránku, okno nebo téma nápovědy; zobrazit definici; inicializovat příkaz; nebo zvolte možnost? Pokud ne, použijte jiný ovládací prvek.
• Bylo by příkazové tlačítko lepší volbou? Použijte příkazové tlačítko pokud:
  • Ovládací prvek zahájí okamžitou akci, včetně zobrazení okna, a tento příkaz se vztahuje k primárnímu účelu okna.
  • Zobrazí se okno pro shromáždění vstupu nebo volby, a to i v případě, že se jedná o sekundární příkaz.
  • Popisek je krátký, skládající se ze čtyř nebo méně slov, takže se vyhněte nepříjemnému vzhledu dlouhých tlačítek.
  • Příkaz není vložený.
  • Ovládací prvek se zobrazí ve skupině dalších souvisejících příkazových tlačítek.
  • Akce je destruktivní nebo nevratná. Vzhledem k tomu, že uživatelé přidružují odkazy k navigaci (a schopnost zpět), odkazy nejsou vhodné pro příkazy s významnými důsledky.
  • Podobně v průvodci nebo tok úlohpředstavuje příkaz závazek. V takových oknech příkazová tlačítka navrhují závazek, zatímco odkazy navrhují navigaci k dalšímu kroku.

Koncepty návrhu

Rozpoznávání odkazů

Odkazy nemají cenovou dostupnost, což znamená, že jejich vizuální vlastnosti nenavrhují způsob jejich použití a jsou srozumitelné pouze prostřednictvím zkušeností. Odkazy bez podtržení a barvy systému odkazů se zobrazují jako normální text; jediným způsobem, jak zjistit jejich chování, je z prezentace, jejich kontextu nebo umístěním ukazatele na ně.

Překvapivě, tento nedostatek dostupnosti je často motivací k používání odkazů, protože jsou tak jednoduché, a tím snižuje vizuální složitost návrhu. Odkazy eliminují vizuálně náročný rámec používaný příkazovými tlačítky a ohraničení používanými jinými ovládacími prvky. Když například můžete pomocí příkazových tlačítek zviditelnit primární příkazy, můžete zvolit odkazy pro sekundární příkazy, které je zvýrazní.

Výzvou je pak zachovat dostatek vizuálních vodítek, aby uživatelé mohli rozpoznat odkazy. Základním vodítkem je uživatelé musí být schopni rozpoznat odkazy pouze vizuální kontrolou, které by neměli najet myší na objekt nebo kliknout na něj a určit, zda se jedná o odkaz.

Uživatelé můžou rozpoznat odkaz pouze vizuální kontrolou, pokud odkaz používá systémové barvy propojení a alespoň jednu z následujících vizuálních vodítek:

• Podtržený text
• Obrázek nebo odrážka, například text s odkazem na ikonu vzor.
• Umístění v rámci standardní navigace, možnosti nebo umístění příkazu, jako je například oblast obsahu okna nebo v navigačním panelu, řádku nabídek, panelu nástrojů nebo zápatí stránky.

Uživatelé můžou také rozpoznat odkaz vizuální kontrolou s následujícími vizuálními vodítky, ale tyto stopy samy o sobě nestačí:

• Text, který navrhuje kliknutí, například příkaz začínající imperativním slovesem, jako je Zobrazit, Tisk, Kopírovat nebo Odstranit
• Umístění v bloku normálního textu

Uživatelé samozřejmě můžou vždy určit propojení prostřednictvím interakce najetím myší nebo kliknutím. Pokud zjišťování odkazu nevyžaduje žádné významné úkoly, můžete tyto odkazy zrušit.

V tomto příkladu jsou odkazy Na nás, Podmínky použití, Ochranné známky a Prohlášení o zásadách ochrany osobních údajů. Záměrně se zvýrazňují, protože nejsou nutné pro žádné důležité úkoly. Jedinými vodítky, že jsou odkazy, jsou, že mají ukazatel myši na najetí myší a jsou umístěny ve standardní navigační oblasti v dolní části okna.

vytváření odkazů specifických, relevantních a předvídatelných

Text odkazu by měl znamenat výsledek kliknutí na odkaz.

Konkrétní odkazy jsou pro uživatele přesvědčivější než obecné odkazy, takže použít popisky odkazů, které poskytují konkrétní popisné informace o výsledku kliknutí na odkaz. Ujistěte se ale, že text odkazu není tak specifický, že je zavádějící a nedoporučuje správné použití.

Stručnější odkazy budou pravděpodobně přečtené než podrobné odkazy. Eliminujte nepotřebný text a podrobnosti. Popisky odkazů nemusí být komplexní.

Vyhodnocení textu odkazu:

• Ujistěte se, že text odkazu odráží scénáře, které odkaz podporuje.
• Ujistěte se, že výsledky odkazu jsou předvídatelné. Uživatelé by neměli být překvapeni výsledky.

Pokud uděláte jenom dvě věci...

1. Umožňuje vyhledat odkazy pouze vizuální kontrolou. Uživatelé by neměli s programem pracovat, aby našli odkazy.

2. Použijte odkazy, které poskytují konkrétní popisné informace o výsledku kliknutí na odkaz pomocí potřebného textu. Uživatelé by měli být schopni přesně předpovědět výsledek odkazu z textu odkazu a nepovinný informační popis.

Vzory použití

Odkazy mají několik funkčních vzorů:

Zvyk	Příklad
navigační odkazy Odkaz použitý k přechodu na jinou stránku nebo okno.	Kliknutím na odkaz přejdete na jinou stránku, například v okně prohlížeče nebo průvodci; nebo zobrazí nové okno. Na rozdíl od propojení úkolů navigace nespouštět úkol, ale jednoduše přejde na jiné místo nebo pokračuje s již probíhajícím úkolem. Navigace znamená bezpečnost, protože uživatel se může kdykoli vrátit. Nadpisy zpráv V tomto příkladu kliknutím na odkaz přejdete na stránku Nadpisy příspěvků.
propojení úkolů Odkaz použitý k zahájení nového příkazu.	Kliknutím na odkaz buď provedete příkaz okamžitě, nebo zobrazíte dialogové okno nebo stránku, které shromáždí další vstup. Na rozdíl od navigačních odkazů zahájí propojení úkolů nový úkol místo pokračování v existujícím úkolu. Úkoly neznamenají, že se bezpečnostní uživatel nemůže vrátit k předchozímu stavu pomocí příkazu Zpět. Propojení úkolů jsou volána tak, aby se zabránilo nejasnostem s příkazovými odkazy . Přihlášení do systému V tomto příkladu kliknutím na odkaz zahájíte příkaz login.
odkazy nápovědy Textový odkaz použitý k zobrazení tématu nápovědy.	Kliknutím na odkaz zobrazíte článek nápovědy v samostatném okně. Co je silné heslo? V tomto příkladu kliknutím na odkaz zobrazíte okno nápovědy s daným tématem.
odkazy definice textový odkaz použitý k zobrazení definice v informačním tipu, když uživatel klikne nebo najede myší na odkaz.	tento vzor je užitečný pro definování termínů, které nemusí být uživatelům známy bez přidání nepotřebné obrazovky. V tomto příkladu se zobrazí definice informačního popisu.
odkazy na nabídky sada odkazů úkolů sloužících k vytvoření nabídky.	vzhledem k tomu, že kontext nabídky označuje sadu odkazů, text obvykle není podtržený (s výjimkou při najetí myší) a nemusí používat systémové barvy propojení. V tomto příkladu vytvoří sada odkazů nabídku.
odkazy možností vybraná možnost nebo její zástupný symbol, kde kliknutím na odkaz vyvoláte příkaz, který změní danou možnost.	na rozdíl od běžných textových odkazů změní jeho text tak, aby odrážel aktuálně vybranou možnost a je vždy vykreslen pomocí barvy nepřipojeného odkazu. Příklad na levé straně zobrazuje pravidlo průvodce pravidly aplikace Microsoft Outlook s možnostmi zástupného symbolu. když uživatelé kliknou na odkazy a vyberou některé možnosti, v pravém příkladu se text odkazu aktualizuje, aby se zobrazily výsledky. použití odkazů možností je obzvláště vhodné, pokud mají možnosti formát proměnné. Příklad na pravé straně ukazuje, že pravidla aplikace Outlook mají formát proměnné. V příkladu vlevo je odkaz na možnost. Po výběru se z něj stane rozevírací seznam, jak je znázorněno na pravé straně.

Odkazy mají také několik vzorů prezentace:

Zvyk	Příklad
odkazy na prostý text se skládá pouze z textu.	tato prezentace je nejflexibilnější, protože ji lze použít kdekoli, včetně vložené. V tomto příkladu barva textu jasně identifikuje vložený odkaz.
Text s odkazy na ikonu text s předchozí ikonou, která označuje jeho funkci.	vzhledem k tomu, že grafika poskytuje další vizuální označení odkazu, je jednodušší rozpoznat jako odkaz než odkaz ve formátu prostého textu, který není podtržen. tento vzor obvykle používá ikonu 16 × 16 pixelů. v tomto příkladu ikony poskytují další vizuální označení odkazu. V tomto příkladu standardní triangular Play symbol označuje, že tento text je příkaz.
odkazy pouze na grafiku se skládá pouze z grafiky.	vzhledem k nedostatku textového odkazu neexistuje žádná barva nebo podtržení odkazu, které by odkaz označily. tyto odkazy závisí na grafickém návrhu, který navrhuje kliknutí, nebo textu v grafickém objektu, který navrhuje akci, když uživatelé kliknou. Odkazy pouze na grafiku někdy mají efekt myši, který označuje odkaz. tento přístup pomáhá, ale není zjistitelný pouze vizuální kontrolou. V tomto příkladu není odkaz zjistitelný pouze vizuální kontrolou. Vzhledem k potenciálním problémům s rozpoznáváním a lokalizací se odkazy pouze na grafiku nedoporučují jako jediný způsob, jak provést úlohu.

Pokyny

Interakce

• Pokud výsledek kliknutí na odkaz není okamžitý, zobrazte ukazatel zaneprázdnění. Bez zpětné vazby můžou uživatelé předpokládat, že se kliknutí nestalo a znovu klikněte.

Barva

• Pro navštívené a nevisené odkazy použijte systémové barvy motivu nebo odkazu. Význam těchto barev je konzistentní ve všech programech. Pokud se uživatelům z nějakého důvodu tyto barvy nelíbí (třeba z důvodů přístupnosti), můžou je změnit sami.

• Pro navigační odkazy použijte různé barvy pro navštívené a nevisené odkazy. Uchovávejte historii navštívených odkazů pouze po dobu trvání instance programu. Navštívená barva je důležitá k označení toho, kde už uživatelé byli, což jim brání v neúmyslné revizi stejných stránek opakovaně.

• U jiných typů odkazů nepoužívejte barvu navštíveného odkazu. Například při identifikaci navštívených příkazů není dostatečná hodnota.

• Neobarvit text, který není odkazem, protože uživatelé můžou předpokládat, že se jedná o odkaz. Použijte tučné písmo nebo odstín šedé, kde byste jinak používali barevný text.

• Výjimka: Barevný text můžete použít, pokud jsou všechny odkazy buď podtržené, nebo umístěné v rámci standardní navigace nebo umístění příkazů.

  nesprávná odpověď:

  

  V tomto příkladu se modrý text nesprávně používá pro text, který není odkazem.

• Používejte barvy pozadí, které kontrastuje s barvami odkazu. Barva systému okna je vždy dobrou volbou.

  nesprávná odpověď:

  

  V tomto příkladu barva pozadí poskytuje špatný kontrast s barvou odkazu.

Podtržení

• Odkazy, které jsou nezbytné k provedení primární úlohy, poskytují vizuální vodítka, aby uživatelé mohli rozpoznat odkazy pouze vizuální kontrolou. Tyto vodítka zahrnují podtržení, grafiku nebo odrážky a standardní umístění odkazů. Uživatelé by neměli najet myší na objekt nebo se na něj pokusit kliknout, abyste zjistili, jestli se jedná o odkaz. Pokud odkaz není z kontextu jasný, použijte podtržený text.
• Podtržení textu, který není odkazem, protože uživatelé můžou předpokládat, že se jedná o odkaz. Používejte kurzívu, kde byste jinak používali podtržené texty. Vyhraďte si podtržení pouze pro odkazy.
• Při tisku nevytiskejte podtržení ani barvy odkazů. Vytištěné odkazy nemají žádnou hodnotu a potenciálně jsou matoucí.

Text s odkazy na ikonu

• Ikonu šipky použijte jenom pro příkazové odkazy. Běžné odkazy by neměly používat ikonu šipky, pokud nejsou použity jako náhrada příkazové odkazy v systému Windows XP.
• Umístěte ikonu vlevo od textu. Ikona musí vizuálně vést k textu.

správně:

nesprávná odpověď:

V nesprávném příkladu ikona nepřejde do textu.

• Výsledek kliknutí na ikonu je stejný jako kliknutí na text. Jinak by to bylo neočekávané a matoucí.

Odkazy pouze na grafiku

• Nepoužívejte odkazy pouze na grafiku. Uživatelé je obtížně rozpoznávají jako odkazy a jakýkoli text v grafickém objektu (který se používá k označení jejich akce po kliknutí) vytvoří problém lokalizace.

Navigační odkazy

• Ujistěte se, že navigační odkazy nevyžadují závazek. Uživatelé by se měli vždy vrátit do počátečního stavu, a to buď pomocí možnosti Zpět pro místní navigaci, nebo zrušením zavření nového okna.

• Odkaz na konkrétní obsah, nikoli na obecný obsah. Je například lepší vytvořit odkaz na příslušný oddíl dokumentu než na začátek.

• Odkaz použijte pouze v případě, že je propojený materiál relevantní, užitečný a ne redundantní. V navigačních odkazech používejte omezení, protože je můžete použít.

• Pokud odkaz přejde na externí web, vložte adresu URL do informačního, aby uživatelé mohli určit cíl odkazu.

• Propojte pouze první výskyt textu odkazu. Nadbytečné odkazy nejsou potřeba a můžou ztěžovat čtení textu.

  správně:

  Složka Obrázky usnadňuje sdílení obrázků. Pomocí úkolů v obrázcích můžete obrázky odeslat e-mailem nebo je publikovat v zabezpečeném privátním umístění na webu. Obrázky můžete vytisknout také přímo ze složky Obrázky.

  nesprávná odpověď:

  Složka Obrázky usnadňuje sdílení obrázků. Pomocí úkolů v obrázcích můžete obrázky odeslat e-mailem nebo je publikovat v zabezpečeném privátním umístění na webu. Obrázky můžete vytisknout také přímo ze složky Obrázky.

  Ve správném příkladu je propojený pouze první výskyt relevantního textu.

  výjimky :

  • Pokud má instrukce odkaz, vložte ho do instrukce.

    Použití silných hesel je velmi důležité. Další informace najdete v tématu Silná hesla.

    V tomto příkladu je odkaz v instrukci místo prvního výskytu.

  • Odkaz na pozdější výskyty, pokud jsou daleko od první. Můžete například propojit redundantně v různých oddílech v tématu nápovědy.

Propojení úkolů

• Propojení úkolů použijte pro příkazy, které nejsou destruktivní nebo snadno reverzibilní. Vzhledem k tomu, že uživatelé přidružují odkazy k navigaci (a schopnost zpět), odkazy nejsou vhodné pro příkazy s významnými důsledky. Vhodné jsou příkazy, které zobrazují dialogové okno nebo potvrzení.

  správně:

  Začínat

  Stop

  nesprávná odpověď:

  Odstranění souboru

  V nesprávném příkladu je příkaz destruktivní.

Odkazy na nabídku

• Seskupte související navigační odkazy a odkazy na úkoly do nabídek. Nabídka souvisejících odkazů umístěných ve standardní navigaci nebo umístění příkazu usnadňuje vyhledání a pochopení odkazů, než když jsou umístěné samostatně.

• U nabídek závislých na výběru odeberte odkazy na nabídky, které se nevztahují. Nezakažte je. Tím se eliminuje nepotřebné informace a uživatelé nezmeškají odkazy, které vyžadují výběr.

• U nabídek nezávislých na výběru zakažte odkazy na nabídky, které se nevztahují. Neodebíjejte je. Díky tomu jsou nabídky stabilnější a tyto odkazy se snadněji najdou.

  

  V tomto příkladu ze služby Windows Update se provádí aktualizace, takže příkaz Vyhledat aktualizace je místo odebrání zakázaný.

Popisy odkazů

• Pokud odkaz vyžaduje další vysvětlení, poskytnout vysvětlení buď v doplňkovém vysvětlení v samostatném textovém ovládacím prvku, neboinformační popis, ale ne v obou. Používejte úplné věty a koncovou interpunkci. Poskytnutí obou není nutné, pokud je text stejný a matoucí, pokud se text liší.

  

  V tomto příkladu poskytuje doplňkové vysvětlení další informace o odkazu.

  

  V tomto příkladu poskytuje informační popis další informace.

• Nezadávejte informační popis, který je pouze výrazem textu odkazu.

  nesprávná odpověď:

  

  V tomto příkladu informační popis riskuje otravné uživatele jeho opakováním.

Text

• Nepřiřazujte přístupový klíč. K odkazům se přistupuje pomocí klávesy Tab.

• Použít odkazy, které poskytují konkrétní popisné informace o výsledku kliknutí na odkaz, s použitím tolik textu, kolik je potřeba. Text odkazu by měl znamenat výsledek kliknutí na odkaz. Uživatelé by měli být schopni přesně předpovědět výsledek odkazu z textu odkazu a volitelného informačního tipu.

  nesprávná odpověď:

  

  V tomto příkladu je i když je odkaz důležitý, jeho popisek je příliš obecný. Uživatelé budou pravděpodobně kliknout na konkrétnější odkaz.

• Pro vložené odkazy:

  • Zachovejte velká písmena a interpunkci textu.

  • Nezahrnujte do odkazu koncovou interpunkci, pokud není text otázkou.

  • Odkaz na nejrelevantní část textu a zvolte text odkazu, který je dostatečně velký, aby bylo snadné kliknout.

    správně:

    Přejděte do diskusní skupiny.

    nesprávná odpověď:

    Přejděte do diskusní skupiny.

    Vtěchtoch souborech není v těchto příkladech "Go" nejrelevavantnější částí textu a není dostatečně velký, aby byl vhodný cíl kliknutí, zatímco "newsgroup" je.

  • Nepoužívejte dva různé vložené odkazy vedle sebe. Uživatelé si pravděpodobně budou věřit, že jsou jediným odkazem.

    nesprávná odpověď:

    Další informace najdete v pokynech pro uživatelské rozhraní.

    V tomto příkladu jsou "UX" a "guidelines" dva různé odkazy.

• Pro nezávislé odkazy (ne vložené):

  • Použijte velká písmena ve stylu věty .
  • Nepoužívejte koncovou interpunkci, pokud není odkaz otázkou.
  • Jako odkaz použijte veškerý text.

• Používejte odkazy, které jsou jasně odlišné od ostatních odkazů na obrazovce. Uživatelé by měli být schopni přesně předpovědět a rozlišovat cíle propojení.

  nesprávná odpověď:

  Vyhledání antivirového softwaru

  Získání antivirového softwaru

  správně:

  Jak zjistit, jestli je nainstalovaný antivirový software

  Instalace antivirového softwaru

  V nesprávném příkladu je rozdíl mezi těmito dvěma propojeními nejasný.

• Nepřidávejte text odkazu kliknutím nebo kliknutím sem. Není to nutné, protože odkaz znamená kliknutí. Také klikněte sem a sem samostatně sdělit žádné informace o odkazu při čtení čtečkou obrazovky.

  nesprávná odpověď:

  Kliknutím sem zobrazíte popis.

  správně:

  Popis

  V nesprávných příkladech "klikněte sem" přejde bez vyslovení a sdělí žádné informace o odkazu.

navigační odkazy

• Začněte odkaz podstatným jmenem a jasně popište, kam odkaz kliknete. Nepoužívejte koncovou interpunkci. Někdy možná budete muset začít navigační odkazy slovesem, ale nepoužívejte příkazy, které opakují navigaci, která je již odvozena faktem propojení, jako je zobrazení, otevřít nebo Přejít na.

• Prezentovat navigační odkaz jako adresu URL, pokud přejde na webovou stránku a očekáváte, že si cíloví uživatelé adresu URL vzpomenou a zadává ji do prohlížeče. Pokud je to možné, navrhujte takové adresy URL tak, aby byly krátké a snadno zapamatovatelné.

• Pokud odkaz obsahuje adresu URL webu začínající na "www", vynecháte název protokolu https:// a použijte text malými písmeny.

  nesprávná odpověď:

  https://www.microsoft.com

  www.microsoft.com

  správně:

  microsoft.com

  V nesprávných příkladech "https://" a "www" se neřeknou.

propojení úkolů

• Zahajte propojení s imperativním slovesem a jasně popište úkol, který propojení provádí. Nepoužívejte koncovou interpunkci.

• Pokud příkaz potřebuje k úspěšnému dokončení další informace (včetně potvrzení), ukončete odkaz třemi tečkami. Nepoužívejte tři tečky, pokud je úspěšné dokončení úkolu zobrazeno další okno pouze v případě, že je k provedení úkolu potřeba další informace.

  Tisknout...

  V tomto příkladu tisk... Příkazový odkaz zobrazí dialogové okno Tisk pro shromáždění dalších informací.

  Tisknout

  Naproti tomu v tomto příkladu příkazový odkaz Tisk vytiskne jednu kopii dokumentu na výchozí tiskárnu bez jakékoli další interakce uživatele.

  správné použití tří teček je důležité indikovat, že uživatelé mohou před provedením úkolu provést další volby nebo zrušit úkol zcela. Vizuální pomůcka, kterou nabízí tři tečky, umožňuje uživatelům zkoumat váš software bez obav.

• Pokud je to nutné, ukončete propojení úkolu "nyní", abyste ho odlišili od navigačního odkazu.

  Stažení souborů

  Stáhnout soubory

  V tomto příkladu "Stáhnout soubory" přejde na stránku pro stahování souborů, zatímco příkaz "Stáhnout soubory teď" skutečně provede příkaz.

odkazy nápovědy

Pokyny a příklady najdete v nápovědě.

informační popisy odkazů

• Používejte celé věty a koncovou interpunkci.

Další pokyny a příklady najdete v tématu popisy a popisy informací.

Dokumentace

Při odkazech na odkazy:

• Použijte přesný text odkazu, včetně jeho velká písmena, ale nezahrnujte tři tečky.
• Chcete-li popsat interakci uživatele, použijte kliknutí.
• Pokud je to možné, naformátujte text odkazu tučným písmem. V opačném případě vložte text odkazu do uvozovek, pouze pokud je to nutné, aby se zabránilo nejasnostem.

Příklad: Chcete-li spustit kontrolu, klepněte na tlačítko Skenování počítače.