it-swarm-eu.dev

Tlačítko s odkazem: srozumitelné nebo matoucí?

Pracuji na návrhu verze dotykové obrazovky některé webové aplikace. Protože se jedná o dotykovou obrazovku, chtěl bych, aby všechny klikatelné prvky byly poměrně velké a snadno na ně klepnout (je to jednoduchý kiosek, takže vícenásobný dotyk a zoom by nefungovaly).

Standardní hypertextový odkaz je dobře rozpoznatelný, ale spíše malý:

enter image description here

Tlačítko může být mnohem větší:

enter image description here

Problém je však v tom, že tlačítka se obvykle používají pro některé akce a odkazy pro navigaci. A pak jsem si myslel: co když umístím odkaz na tlačítko, jako je tato:

enter image description here

A kdybych použil takový hybrid pro navigaci, fungovalo by to? Je to spojení s velkou klikatelnou oblastí kolem nebo je to jen něco matoucího a dezorientujícího? Co myslíš?

11
Kostya

V mém oppinionu byste měli použijte přístup tlačítka, pokud odkaz není umístěn v textu/větě, odstavci /. To znamená - použijte pozadí tlačítka a barvu odkazu, ale bez podtržení - tento typ míchání/podtržení textu v tlačítku/je pro zkušené uživatele matoucí.

Koncový uživatel však málokdy udělá jakýkoli rozdíl mezi odkazem a tlačítkem.

6
Yordanov

Jelikož se jedná o dotykové obrazovky ve stylu kiosku a dotyková oblast je poměrně velká, nejste omezeni pouze na používání textu. Možná velké tlačítko s příslušnou ikonou?

Button example with expanded text and icon

(Promiňte hrubý design, nemám tu možnost dělat slušné obrázky).

Tato metoda jasně ukazuje, že se jedná o tlačítko, a navíc k dispozici další nemovitost lze použít k poskytnutí více informací uživateli, aby si byli vědomi toho, co tlačítko skutečně dělá.

5
JonW

Podle mých zkušeností se lidé opravdu nezajímají o to, zda zobrazujete odkazy nebo tlačítka, pokud je to nenutí. Většina vizuálních reklam má například tlačítka, i když fungují jako odkazy.

Výzvou je, když máte stránku, na které musíte oba použít. V tomto případě musíte mít jasnou hierarchii mezi tlačítkem primární akce a sekundárními odkazy/tlačítky. Stále toho můžete dosáhnout pomocí dimenzování, stylingu a polohování.

A další věc: dotykovou oblast můžete vždy zvětšit než text. To udržuje vaši vizuální hierarchii a také poskytuje dobrou použitelnost.

4
Zoltán Gócza

Tlačítko s podtrženým textem je pro mě poněkud matoucí. Možná by bylo lepší použít tlačítko se šipkou označující další navigaci.

Velmi důležitým faktorem by byl také samotný text na tlačítku. Pokud tlačítko zní „Přejít na Google“, bude akce zcela zřejmá. Pokud by raději četl výraz „Hledat“, uživatel by neočekával přesměrování na webovou stránku.

2
Jozef

'Značkové odkazy' na této stránce jsou skvělým příkladem něčeho, co je odkazem (v označení), který se chová jako odkaz (zobrazuje jinou stránku na místě aktuální, bez dalších vedlejších efektů), ale je stylizovaný jako tlačítko.

Domnívám se, že obvykle bude mít kontext perfektní smysl, takže například něco, co vypadá dokonce nejasně jako tlačítko ve formuláři, bude vykládáno jako tlačítko; něco nejasně jako odkaz mimo formulář bude interpretováno jako odkaz. Při zahrnutí odkazu do formuláře jsem tedy vždy velmi opatrný.

Myslím, že je rozumné označit dotykovou/klikací oblast odkazu, zejména na dotykovém zařízení, které nemá ekvivalent: hover. Takže přidání jemného pozadí k odkazu se mi zdá rozumné.

2
Bobby Jack

Mějte na paměti, pro jaké médium navrhujete - dotkněte se, nikoli myši. Provedli jste nějaké pozorování lidí, kteří komunikují s kioskem, nebo si vyzkoušeli osvědčené postupy pro návrh dotykových zařízení?

Odkazy jsou dobré pro interakci s myší, protože lidé mají vysokou přesnost s myší.
Tlačítka jsou dobré pro interakci prstem (dotykem), protože poskytují větší cílovou oblast k zasažení.

  • Nejprve chceme, aby váš uživatel mohl kliknout - můj opionion: Použijte tlačítko (větší cíl pro silné prsty)
  • Za druhé musí uživatel pochopit, co se stane, když klikne dříve, než to udělá. Text tlačítka je proto důležitý.

Po této diskusi si myslím, že zdůraznění textu není, nebo není tak důležité jako poskytnutí velkého cíle pro nemotorné prsty a popisný text, který uživatele vede.

2
JeroenEijkhof

Myslím, že je více než ok kombinovat.

Jen se ujistěte, že celé tlačítko je zabaleno do jednoho odkazu. Tímto způsobem, když se uživatel pohybuje kdekoli na tlačítku, můžete povolit správnou zpětnou vazbu při přechodu (např .: podtržení).

Viz tento snímek obrazovky příklad převzatý z aktuální stránky Apple pro iPhone.

2
eknown

Pevně ​​s vámi souhlasím, že ztrácíme významnou příležitost ke komunikaci s našimi uživateli, pokud budeme i nadále používat odkazy a tlačítka zaměnitelně pro navigační i příkazové akce. Aby bylo možné rozlišovat mezi navigací a příkazy, měl bych ovládací prvky příkazů vypadat co možná jako tlačítka:

  • Štítek s černým textem.

  • Stínované pozadí kontrastující s pracovní oblastí.

  • „Zvýšený“ 3D pohled.

Zajistěte, aby ovládací prvky pro navigaci vypadaly co nejvíc jako odkazy a přitom stále hledaly způsob, jak vymezit velkou cílovou „horkou zónu“ dotykových obrazovek:

  • Popisek s barevným textem.

  • Podtrženo.

  • Whitish pozadí stejné barvy jako pracovní plocha.

  • Jako jemné označení hranic horké zóny, jak můžete uniknout.

Pro poslední odrážku bych zkusil nějaký druh „otevřeného“ značení a spoléhal se na princip uzávěru gestaltem, aby se ukázal jako pravoúhlá cílová horká zóna. Zkuste například odkaz propojit s:

  • Velké závorky.

  • Rohy obdélníku horké zóny (ale ujistěte se, že tyto nejsou zaměněny s výběrem „úchytů“).

  • Horizontální pravidla nad a pod.

Poslední z nich může eliminovat nutnost podtržení textu, protože spodní pravidlo navrhne podtržení, i když mezi textem a pravidlem bude velká mezera. Ve skutečnosti se tím také zlepší váš popis štítků odkazů.

1
Michael Zuschlag