Chyby ověření: co to je, jak zkontrolovat, zda je třeba je smazat, jak ovlivňují SEO. Proč potřebujete platný kód a jak opravit chyby ověření Co je chybový stav

Lidé mají tendenci dělat chyby. Chyby se objevují, když lidé komunikují s uživatelským rozhraním. Někdy se to stane, protože uživatelé dělají chyby. Někdy dochází k chybám v samotné aplikaci. Bez ohledu na příčinu mají chyby a jejich řešení obrovský dopad na UX. Nesprávné zpracování chyb spolu s neužitečnými chybovými zprávami může způsobit negativní reakci uživatele, která může následně vést k odmítnutí použití vaší aplikace.

V tomto článku prozkoumáme, jak můžete optimalizovat návrh aplikace, abyste zabránili chybám uživatelů, a jak vytvořit efektivní chybové zprávy v případě, že se chyby vyskytnou bez ohledu na to, co uživatel zadá. Také se podíváme na to, jak dobře zvládnutá chyba může proměnit neúspěch v obdiv. Společnost Adobe představila novou návrhářskou a vývojovou aplikaci Experience Design (Adobe XD), která umožňuje navrhovat interaktivní projekty a chybové stavy. Adobe XD si můžete stáhnout a vyzkoušet zdarma.

Co je chybový stav?

Chybový stav je obrazovka, která se uživateli zobrazí, když se něco pokazilo. Toto je příklad situace, kdy uživatel udělá něco, co se liší od požadovaného stavu. Protože se chyby mohou vyskytovat v neočekávaných kombinacích, mohou tyto podmínky zahrnovat zcela odlišné problémy, od nekonzistentních uživatelských operací (jako je nesprávné zadávání dat) až po to, že se aplikace nemůže připojit k serveru nebo dokonce není schopna zpracovat požadavek uživatele.

Obrazovky s chybami

Každá chyba, bez ohledu na její příčinu, se pro uživatele stává kamenem úrazu na jeho UX cestě. Naštěstí dobře vytvořená chyba může nepříjemný efekt snížit.

Prevence je lepší než léčba

Pokud vytváříte aplikaci, musíte pochopit, jaké jsou hlavní interakce uživatele s aplikací, které mohou vést k chybě. Obvykle je například velmi obtížné správně vyplnit formulář na první pokus nebo je nemožné správně synchronizovat data, pokud má zařízení špatné připojení k síti. Tyto body musíte vzít v úvahu, abyste minimalizovali možnost chyb. Jinými slovy, možnosti udělat chybu je lepší předcházet ukazováním tipů, používáním omezení a flexibility.

Pokud například lidem umožníte vyhledávat a rezervovat hotely, proč nechávat dostupná data v minulosti a házet chybu, pokud uživatel takové datum vybere?

Jak je znázorněno v příkladu Booking.com, můžete jednoduše použít nástroj pro výběr data, který uživatelům umožňuje vybrat pouze dnešní datum a data v budoucnosti. To povzbudí uživatele, aby vybrali pouze platná data.

Chybová obrazovka pro ověření formuláře

Forma je komunikace. Jako každá komunikace by se mělo jednat o sériovou komunikaci mezi dvěma stranami – uživatelem a vaší aplikací. Validace hraje v tomto komunikačním procesu hlavní roli. Ověřování formulářů je navrženo tak, aby uživatele provedlo složitostmi, chybami a nedorozuměními. Při správném ověření se taková komunikace stává jasnou a srozumitelnou. Obecně se validace dobré formy skládá ze čtyř důležitých prvků:

• Správný čas informovat o chybách (nebo úspěšném dokončení)
• Správné místo pro ověřovací zprávu
• Správná barva zprávy
• Jasný jazyk zprávy

Správný čas (ověření řetězce)

Ověření chyb formuláře je nevyhnutelné a je logickou součástí uživatelského vstupu (protože uživatelský vstup může být náchylný k chybám). Samozřejmě by měly být minimalizovány stavy, které mohou způsobit chybu, ale ověření chyb nelze odstranit. Nejdůležitější otázkou tedy je: "Jak zjednodušit uživateli proces obnovy chyb?"

Uživatelé nemají rádi proces vyplňování formuláře, zvláště když na konci obdrží upozornění na chybu. Obzvláště frustrující je zobrazení chybové zprávy v několika polích po vyplnění dlouhého formuláře. A nejotravnější věc je neurčitost toho, jaké chyby jste udělali a kde.

Validace by měla uživatele neprodleně informovat o správnosti dané odpovědi ihned poté, co uživatel zadal údaje. Hlavní zásadou dobré validace je: „Mluv s uživateli! Řekni jim, co se děje!" a validace řetězce v reálném čase informuje uživatele o správnosti zadaných údajů. Tento přístup umožňuje uživatelům rychle opravit chyby a nečekat na zobrazení chyb po stisknutí tlačítka potvrzení.

Měli byste se však vyhnout ověřování každého úhozu, protože ve většině případů nebudete moci ověřit data, dokud uživatel nedokončí zadávání své odpovědi. Formuláře, které ověřují hodnotu při psaní, začnou uživatele obtěžovat, jakmile začnou zadávat data.

Na druhou stranu formuláře, které se po zadání dat ověřují, neinformují uživatele o chybě dostatečně rychle.

Michail Konževič ve svém článku „Ověřování řetězců ve formulářích – vytváření zkušeností! prozkoumal různé strategie ověřování a navrhl hybridní strategii: časná odměna, pozdní trest.

Správné místo

Dalším důležitým nástrojem je orientace na uživatele. Když přemýšlíte, kam umístit ověřovací zprávu, postupujte podle této rady: vždy umístěte zprávu do kontextu akce. Pokud chcete uživateli sdělit chybu v určitém poli, zobrazte ji vedle něj. Rychlé ověření je nejlépe umístit napravo od vstupního pole nebo pod ním.

Správná barva (intuitivní design)

Barva je jedním z nejlepších nástrojů, který lze použít při vytváření ověření. ve způsobu, jakým funguje na intuitivní úrovni, červená pro chybu, žlutá pro varování a zelená pro úspěch jsou obzvláště silné. Ujistěte se však, že uživatelé barvy dobře vnímají. To je kritický aspekt dobrého vizuálního designu.

jasná zpráva

Typická chybová zpráva může říkat „e-mail je neplatný“, aniž by uživateli vysvětlila, proč je e-mail neplatný. (Typografie? Je e-mail zaneprázdněn jiným uživatelem?) Jednoduché pokyny nebo pokyny mohou dělat věci jinak. Na příkladu vidíte, jak formulář informuje uživatele, že jeho email je již obsazen. Objeví se také několik návrhů (obnovení přihlášení nebo hesla).

Je tedy čas zobrazit chybovou stránku, aby se ukázalo, že se něco pokazilo. Jako příklad si představme situaci, kdy je spojení nefunkční a uživatel je na obrazovce, která je jediná dostupná. Měli byste využít této příležitosti, abyste lidem dali vědět, co se děje, a poskytli rychlý model nápovědy – vaše zpráva by měla být pro uživatele pomocnou rukou. Proto byste nikdy neměli zobrazovat následující:

• Kritická chybová zpráva. Zprávy, které hovoří o vnitřní chybě v kódu aplikace nebo obsahují text jako: „došlo k chybě typu 2“, jsou záhadné a děsivé.

• Chyba ve slepé uličce. Jednoduše proto, že takové zprávy neposkytují uživateli žádné užitečné informace.

• Nespecifikovaná chybová zpráva. Taková obrazovka (v příkladu níže) poskytuje uživateli tolik informací jako předchozí. Uživatelé nemají ponětí, co to znamená nebo co s tím dělat.

Nestrašte uživatele chybami. Také se nesnažte uživatele zavést do technických podrobností problému. Mluvte o chybě jednoduchým a srozumitelným jazykem. K tomu se snažte nepoužívat technický žargon a vyjadřujte své myšlenky jazykem uživatele.

Udělejte své příspěvky čitelné a užitečné – chyby by měly být zdvořilé, jasné a poučné a měly by obsahovat informace jako:

• Co se pokazilo a proč (pravděpodobně).
• Co by měl uživatel udělat, aby chybu napravil.

Zahrňte do chybových zpráv humor a obrázky

Chybové zprávy jsou skvělou příležitostí k použití ikon a ilustrací, protože lidé vnímají vizuální informace lépe než jen text. Můžete ale jít ještě dál a přidat do své aplikace obrázky, které budou pro uživatele užitečné. To přizpůsobí vaši aplikaci a zjemní vaši zprávu.

Humor prodlužuje život. Trocha humoru nikdy neuškodí a pomůže zmírnit zmatek z chyby. Na Littlebigdetails najdete spoustu příkladů vtipných hlášek. Zde jsou některé z mých oblíbených:

• Basecamp: Když ověření formuláře selže, znak nalevo udělá překvapený výraz.

• Při pokusu o zadání příliš velkého množství teček při vytváření nového účtu Gmail se zobrazí mírně drzá chybová zpráva.

Buďte však opatrní s humorem, protože ten nemusí být ve vaší chybové zprávě vždy vhodný; záleží na závažnosti chyby. Například humor funguje dobře pro jednoduchý problém s ověřením, jako je „chyba 404“ (stránka nenalezena). Ale když uživatel stráví určitou dobu prohlížením stránky s nápisem „Ach!“ - vypadá to nepatřičně.

Komplexní kontrolní seznam pro perfektní chybovou stránku

Dobré chybové stránky jsou pomocnou rukou pro uživatele a musí splňovat následujících šest kritérií:

1. Chybová zpráva se zobrazí dynamicky, ihned po zjištění chyby. Měl by informovat uživatele o problému.
2. Dávejte si pozor na zadané údaje. Vaše aplikace by neměla přerušit, odstranit nebo vrátit zpět to, co uživatel zadal nebo nahrál v době, kdy došlo k chybě.
3. Mluvte s uživatelem ve stejném jazyce. Zpráva by měla jasně chápat, co se pokazilo a proč; co by měl uživatel udělat, aby chybu napravil?
4. Nešokujte a nezmást uživatele. (Zpráva by neměla být příliš provokativní).
5. Neztrácejte kontrolu nad systémem. (Pokud problém není kritický, uživatel by měl mít přístup ke zbytku aplikace).
6. Použijte svůj smysl pro humor ke zmírnění problému.

Řešení nejčastějších chyb

Chyba 404 (stránka nenalezena)

Hlavním účelem chybové stránky 404 je přesměrovat uživatele co nejdříve na stránku, kterou hledal. Vaše stránka 404 by měla nabízet několik klíčových odkazů, kam může uživatel přejít. Nejbezpečnější možností je mít odkaz na „domovskou stránku“ webu na stránce 404. Můžete také zadat „nahlásit problém“, aby vás uživatel upozornil, že stránka nefunguje. Ujistěte se však, že přechod na hlavní stránku je spíše jasný a vizuálně více vyniká.

Problém s přihlášením

Obrazovka přihlašovacího formuláře často vypadá minimalisticky a obsahuje pole pro uživatelské jméno a pole pro heslo. Minimalismus ale nerovná se jednoduchost. Existuje mnoho důvodů, proč se uživatel může zaseknout na přihlašovací obrazovce. Hlavní pravidlo přihlašovací stránky - nenuťte uživatele hádat.

Podívejme se na řešení nejčastějších problémů pomocí příkladů z MailChimpu, který si s chybovými hláškami skvěle poradí.

• Uživatel na webu zapomněl své jméno. Pokud najdete podobnou chybu, měli byste poskytnout odkaz, kde ji může uživatel opravit. Řekněte uživateli, kde jej může získat (například: „zkontrolujte svou poštu, poslali jsme vám e-mail“) nebo uveďte odkaz na obnovení jména na webu.

Uživatelé se mnohokrát pokoušejí vstoupit na web pomocí nesprávného hesla. Aby se zabránilo takovým útokům na server, jsou uživatelské účty zablokovány po příliš mnoha neúspěšných pokusech. Jedná se o běžný bezpečnostní postup, ale uživatel musí být před zablokováním účtu varován.

Odmítnutí kreditní karty

Kreditní karta může být odmítnuta z několika důvodů: chyba formátování dat (překlep nebo chybějící data) nebo může být karta odmítnuta, protože vypršela její platnost nebo byla odcizena. Gabriel Tomescu ve svém článku Anatomy of a Credit Card Shape navrhl pro obě chyby následující strategii:

U prvního problému byste měli postupovat podle standardního ověření řetězce a vizuální indikace chyby:

Když však platební kartu z nějakého důvodu odmítne platební procesor, obvykle to vypadá jako únos. Od uživatele potřebujete jasná data. A i poté musíte stále informovat uživatele o tom, co se stalo; chybová zpráva by měla být velmi jasná.

Problém s připojením

Internetové připojení není dostupné všude a offline podpora by měla být klíčovým aspektem v životě každé moderní aplikace. Když připojení vypadne, musíte pečlivě přemýšlet o svém offline UX. Uživatelé by měli mít možnost interagovat s co největší částí vaší aplikace. To znamená, že aplikace potřebuje ukládat obsah do mezipaměti, aby bylo dobré offline uživatelské prostředí.

Analýza chyb validace webu

Mezi nekonečnou řadou objednávek jsem měla konečně volno a rozhodla jsem se založit si blog. Zkusme to zlepšit z hlediska validace. Níže v článku vám řeknu, co je validace webu, html a css kódu, proč je potřeba a jak na konkrétním příkladu uvést web do standardů.

Co je ověření webu?

Jednoduše řečeno, jedná se o kontrolu dodržování norem. Aby váš web mohl správně zobrazit jakýkoli prohlížeč. Platnost webu nemá na propagaci velký vliv, ale horší to rozhodně nebude.

Konkrétní příklad předání ověření pro webovou stránku

Vezměme si první stránku na mém webu - Base64 kódování a dekódování v Javě 8. Vyplňme adresu stránky do validátoru a podívejme se na výsledek:

Při kontrole tohoto dokumentu jako HTML 4.01 Transitional byly nalezeny chyby! Výsledek: 105 chyb, 67 varování Ano, obrázek je ošklivý: více než sto chyb a 67 varování – jak vyhledávače indexují můj blog a návštěvy lidí? Ale nebuďme naštvaní, ale naučme se procházet validací, opravovat chyby. Takže první varování:

Nelze určit režim analýzy! Validátor může zpracovávat dokumenty buď jako XML (pro typy dokumentů jako XHTML, SVG atd.) nebo SGML (pro HTML 4.01 a předchozí verze). Pro tento dokument nebyly dostupné informace dostatečné k jednoznačnému určení režimu analýzy, protože: Typ média MIME (text/html) lze použít pro typy dokumentů XML nebo SGML Nebyl zjištěn žádný známý typ dokumentu Žádná deklarace XML (např.) naleznete na začátku dokumentu. Žádný jmenný prostor XML (např ) naleznete v kořenovém adresáři dokumentu. Standardně se validátor vrací zpět do režimu SGML. Upozornění Nebyl nalezen žádný DOCTYPE! Kontrola s výchozím typem přechodného dokumentu HTML 4.01. V tomto dokumentu nebylo možné nalézt ani rozpoznat žádnou deklaraci DOCTYPE. To obecně znamená, že dokument nedeklaruje svůj typ dokumentu nahoře. Může to také znamenat, že deklarace DOCTYPE obsahuje pravopisnou chybu nebo že nepoužívá správnou syntaxi. Dokument byl zkontrolován pomocí výchozí „záložní“ definice typu dokumentu, která se velmi podobá „HTML 4.01 Transitional“. To je to samé. A oprava je jednoduchá: na samém začátku stránky přidejte značku:

Zkontrolujeme, co jsme udělali, a zjistíme, že jen s touto značkou jsme odstranili 105 chyb a 3 varování! Nyní nám zbývá pouze 64 varování. Začněme je rozebírat jeden po druhém.

Upozornění: Atribut type pro prvek style není potřeba a měl by být vynechán. Z řádku 5, sloupec 1; na řádek 5, sloupec 23 /x-ikona">↩