5 běžných chyb použitelnosti a řešení, jak se jim vyhnout

Jsem trochu nevrlý webový uživatel, ale myslím, že to je součást toho, co mě vede k tomu, abych byl dobrým webovým vývojářem. Hrozně mě štvou věci, které ztěžují používání webu, věci, které by měly být základní. Zde je seznam pěti běžných chyb použitelnosti a řešení, jak se jim vyhnout. Udělejte sobě i svým uživatelům laskavost a ujistěte se, že neporušujete žádné z těchto pravidel.

Použijte submit Místo click Události; Použijte
Tags!

Nemohu vám říci, kolikrát jsem se pokusil odeslat (vnímaný) formulář s ENTER klíč (nebo mobilní šipka/klávesa Enter) a sledoval, jak se absolutně nic neděje. Poté kliknu nebo klepnu na tlačítko Odeslat a formulář konečně něco udělá. Toto je moje největší nepříjemnost z hlediska použitelnosti a jistá známka amatérské hodiny. Přechod na tlačítko Odeslat a zavření mobilní klávesnice a posunutí na tlačítko Odeslat jsou neuvěřitelně otravné kroky navíc, které nemusí existovat. Jednoduše použijte submit jak byste měli a budeme znovu přátelé:

document.getElementById("myForm").addEventListener("submit", function(e) {
	e.preventDefault();
	
	// ... Do processing here.  Yay for "enter" key submission!

	return false;
});

Pokud toto zvěrstvo pácháte kdekoli, okamžitě to prosím napravte. S pozdravem každé kotě, které zemřelo kvůli tvým hříchům.

Klikněte na Události: Nezabránit, když je také stisknuto [CONTROL] nebo [META]

Jsem sériový otvírák na nové karty a zatímco jsem nedávno hledal nový dům, díval jsem se na seznam webových stránek. Dostanu se na stránku se seznamem a se stisknutým příkazem kliknu na několik domů, jejichž fotografie bych si rád prohlédl, jen abych byl přesměrován na stránku na stejné kartě; obětí click listener a window.location change. Hrozný. Než u jakéhokoli odkazu zabráníte výchozímu nastavení, nezapomeňte zkontrolovat vlastnosti metadat a ovládacích prvků:

document.getElementById("myLink").addEventListener("click", function(e) {
	// e.preventDefault();  (bad)

	if(e.meta || e.ctrlKey) return; // Don't block user if they want to open a new tab
	e.preventDefault();
});

V současné době provádím tuto kontrolu na tomto blogu, aby uživatelé mohli bez problémů otevírat nové karty. Nenuťte své uživatele hrát na vašem webu hru typu click-back-click-back!

Přidat atributy nadpisu k prvkům s přetečením textu:elipsa

(Poněkud) nové CSS text-overflow: ellipsis majetek a hodnota jsou úžasné. Vývojáři si kdysi procházeli peklem, když se snažili tento efekt duplikovat. Jsem pro používání text-overflow: ellipsis , ale když najedu na prvek, který toto využívá, raději na něj dejte atribut title, abych rychle viděl celý text:

<div class="ellipsizeMe" title="I am some really, really long text that's going to be ellipsized">
I am some really, really long text that's going to be ellipsized
</div>

Pokud nechcete obsah vydávat dvakrát, můžete použít JS k dynamickému nastavení názvu. Ať děláte cokoli...prosím, připojte své uživatele.

Nezapomeňte :focus a :active !

Příliš mnoho lidí zapomíná na tyto stavy při úpravě prvků, za předpokladu, že uživatel má myš – špatný tvar. Použijte :focus a :active také uvádí:

a:hover, a:active, a:focus { /* change _all_ the pseudos! */
	color: #900;
}

Udělejte si laskavost: až budete příště vytvářet web, přejděte na stránku tabelátorem; pokud stisknete tabulátor a nemáte ponětí, na co bylo zaostřeno, podívejte se na svou šablonu stylů a zjistěte, zda jste nezapomněli přidat jeden z těchto stavů!

Použijte vyhledávání typu vstupu / e-mail

Když se snažím dokončit to peklo, co je formulář na mobilním zařízení, jsem neuvěřitelně frustrovaný, když musím přepínat mezi obrazovkami klávesnice, abych se dostal k „@“. Buďte dospělí a použijte správný typ vstupu:

<input type="search" value="" />

<input type="email" value="" />

Jedna rychlá aktualizace, obrovské zvýšení použitelnosti pro vaše mobilní uživatele.

Existují stovky běžných chyb, kterých se může vývojář dopustit, takže v budoucnu očekávejte více těchto příspěvků. Slibná věc je, že většinu problémů s použitelností lze velmi snadno opravit, jak jste si pravděpodobně všimli výše. Dejte mi vědět, pokud máte faux pas ohledně použitelnosti a řešení, o kterých byste chtěli lidi informovat, a já sestavím další příspěvek, kde je budu sdílet!