Chyby ověření jsou chyby v kódu stránek webu, zatímco chyby na hlavní stránce a na vnitřních stránkách webu se mohou navzájem lišit. Stránka je považována za platnou, pokud neobsahuje žádné chyby v kódu stránek webu. Při vývoji webu se mohou objevit chyby, například když jsou html tagy uzavřeny špatně nebo nejsou zavřeny vůbec, když jsou použity zastaralé tagy, není nastaven typ dokumentu (), vnoření prvků je nesprávně organizováno a další. Některé chyby mohou být viditelné a uživatel si jich bude moci všimnout při návštěvě stránek webu, některé chyby mohou být skryté.
Nejoblíbenějším a nejosvědčenějším validátorem je podle našeho názoru validator.w3.org , který v souladu s pravidly přijatými konsorciem prohledává stránky na chyby. Celosvětová Síť standardy. Tento validátor má 3 způsoby, jak zkontrolovat chyby: zadejte adresu URL konkrétní stránky vašeho webu, nahrajte soubor stránky webu a zadejte část kódu webu, kterou je třeba zkontrolovat.
Po dokončení kontroly se vám na stránce zobrazí seznam chyb s popisem chyby, číslem řádku s chybou a částí řádku, která chybu obsahuje.
Existuje funkce filtrování chyb, pomocí které můžete postupně opravit konkrétní skupiny chyb, navíc u každé chyby je uveden odkaz na standardy w3c, kde můžete najít příčinu této chyby.
Existují také pluginy pro prohlížeče, které najdou chyby na stránkách webu.
http://users.skynet.be/mgueury/mozilla/ - plugin pro Mozillu
https://chrome.google.com/webstore/detail/html-tidy-browser-extensi/ – plugin pro Chrome
https://addons.opera.com/en/extensions/details/validator/ - plugin pro Operu
Po kontrole chyb na webu vyvstává celkem rozumná otázka: je nutné je okamžitě odstranit a co to znamená pro propagaci SEO?
Vyhledávače při hodnocení webů v Výsledky vyhledávání stále více věnovat pozornost dalším aspektům, jako je interní optimalizace webu, odkazový profil, obsah. Ale ani validace by neměla být úplně ignorována.
V první řadě doporučuji věnovat pozornost chybám souvisejícím s obsahem, protože. Pro vyhledávače je tento faktor důležitý při hodnocení stránek. Pokud je na stránkách webu mnoho chyb (více než 25), důrazně se doporučuje odstranit chyby v kódu, protože stránky s velkým počtem chyb se déle načítají a také se hůře indexují, což může vést k absenci části stránek webu v indexu vyhledávače.
Pojďme analyzovat, kolik chyb je přítomno v kódu stránky velkých zdrojů.
Ruské železnice JSC:
Jak jste si již všimli, dokonce i stránky vyhledávače v kódu stránek jsou chyby, což opět potvrzuje, že odstraňování chyb má spíše poradní charakter, přičemž je vhodné zmínit, že byste tento faktor neměli zanedbávat a svůj web „spustit“. Rozvíjejte web komplexně, komplexně, pak výsledek splní vaše očekávání.
Mimochodem, kontrola stránek na chyby, které skutečně ovlivňují propagaci, probíhá v rámci SEO auditu. Pokud pochybujete, že dokážete správně vyhodnotit chyby na svých stránkách, kontaktujte nás.
Validace je jedním z nejdůležitějších aspektů dobrého webdesignu. Podívejme se, co to je a jak zkontrolovat platnost HTML kódu. Jako příklad si uveďme nejrozšířenější redakční systém (CMS) – WordPress. Poté se podělíme o seznam chyb, se kterými jsme se v praxi setkali, a hlavně nabídneme vlastní, osvědčené, metody, jak je odstranit.
Proč je nutné kontrolovat platnost webu
Jednoduše řečeno, kontrola webové stránky určí, zda je v souladu se standardy vyvinutými konsorciem World Wide Web Consortium (W3C). To se obvykle provádí kontrolou platnosti jednotlivých stránek pomocí online ověřovací služby W3C.
Stejně jako gramatická pravidla v různé jazyky, existují i pravidla v programování. Ověření vám umožní zjistit, zda stránka těmto pravidlům vyhovuje, a pokud se vyskytnou chyby a varování, budou poskytnuta doporučení k jejich odstranění. Více podrobností o potřebě takové kontroly bude diskutováno níže.
Co ovlivňuje validitu webu
Přemýšleli jste někdy o tom, jak prohlížeče „čtou“ webovou stránku? Mají „motory“ pro analýzu kódu a jeho převedení do vizuální podoby pro lidi. Každý prohlížeč má bohužel svůj vlastní mechanismus zpracování kódu, což může způsobit, že se vaše stránky budou zobrazovat jinak.
Neplatnou webovou stránku mohou prohlížeče číst různými způsoby. To bude mít za následek, že vaši návštěvníci ani nebudou moci správně zobrazit obsah stránky ve svých prohlížečích. Validace později opraví téměř všechny hlavní rozdíly a zpřístupní vaši webovou stránku téměř všem webovým prohlížečům (nejčastěji výjimkou je internet Explorer starší verze). Odtud pochází termín „rozvržení napříč prohlížeči“. rozložení, které je stejně dobré (kompatibilní) pro všechny oblíbené prohlížeče.
Jak to ovlivní SEO? Je důležité pochopit, že roboti vyhledávačů milují sémantické webové stránky. Sémantické rozvržení je podle Wikipedie přístup k vytváření webových stránek na jazyk HTML, na základě použití HTML tagy podle jejich sémantiky (účelu). Strukturální sémantická webová stránka navíc umožňuje vyhledávacím robotům přesněji určit význam jak jednotlivých prvků webové stránky, tak celého textu jako celku. Podle Googlu platný kód nijak neovlivňuje hodnocení stránek. Zároveň ale může přítomnost chyb v kódu negativně ovlivnit skenování mikrodat a přizpůsobivost mobilním zařízením.
Ověřovací nástroje pro váš web
Pochopení potřeby absence chyb ověření na stránkách webu, podívejme se, jak tyto chyby hledat.
Je jich mnoho bezplatné služby pro ověření webu, jako je W3C Markup Validation Service , Web Page Analyzer , Browsershots a další.
Lidé mají tendenci dělat chyby. Při interakci s lidmi dochází k chybám uživatelská rozhraní. 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 se zbytečnými chybovými zprávami může způsobit negativní reakci uživatele, která může následně vést k tomu, že uživatel vaši aplikaci opustí.
V tomto článku se podíváme na to, jak můžete optimalizovat návrh aplikace, abyste tomu zabránili vlastní chyby a jak vytvořit efektivní chybová hlášení v případě, že dojde k chybám 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. Vzhledem k tomu, že chyby se mohou vyskytnout v neočekávaných kombinacích, mohou tyto podmínky zahrnovat úplně různé problémy: od nekompatibility uživatelských operací (například chybné zadání dat) až po nemožnost aplikace připojit se k serveru, nebo dokonce neschopnost 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 není možné správně synchronizovat data, pokud má zařízení špatné internetové připojení. 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.
Výběr data v aplikaci Booking.com. Zobrazí se celý měsíc, ale data v minulosti nejsou k dispozici. 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 nejnepříjemnější je nedostatek jasnosti v tom, 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.
Formuláře Google zobrazují e-mailovou chybu, i když jste ještě nedokončili psaní. Na druhou stranu formuláře, které se po zadání dat ověřují, neinformují uživatele o chybě dostatečně rychle.
Ověření v Apple obchod provádí po zadání dat. 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.
Hybrid - brzká odměna, pozdní trest - přístup Správné místo
Orientace na uživatele je jiná důležitý nástroj. Když přemýšlíte, kam umístit ověřovací zprávu, zde je tip: 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.
Chyby ve formuláři v reálném čase. Správná barva (intuitivní design)
Barva je jedna z nejlepší nástroje použít při vytváření ověření. ve způsobu, jakým funguje na intuitivní úrovni, červená je zvláště účinná pro chyby, žlutá pro varování a zelená pro úspěch. Ujistěte se však, že uživatelé barvy dobře vnímají. To je kritický aspekt dobrého vizuálního designu.
Text chyby by měl být jasný a jasně vyčnívat na pozadí aplikace. 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 dali lidem vědět, co se děje, a poskytli model rychlá pomoc- vaše sdělení by se mělo stát nataženou pomocnou rukou pro uživatele. 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é.
Chybová zpráva napsaná vývojářem pro vývojáře. - Chyba ve slepé uličce. Jednoduše proto, že takové zprávy žádné neposkytují užitečné informace pro uživatele.
Chybová obrazovka na Spotify říká „Došlo k chybě“ a neobsahuje možnosti a kroky k vyřešení problému. - 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.
Aplikace Buffer obsahuje dobrá zpráva o chybě, ale neposkytuje uživateli žádné informace. Nestrašte uživatele chybami. Také se nesnažte uživatele zavést do technických podrobností problému. Mluvte o chybě v jednoduchém a prostý jazyk. 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.
Aplikace Remote vysvětluje, proč uživatelé nic nevidí, a nabízí řešení. 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.
Azendoo používá ilustrace a humor, aby inspiroval uživatele k vyřešení problému. 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í:
- Chybová zpráva se zobrazí dynamicky, ihned po zjištění chyby. Měl by informovat uživatele o problému.
- 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 k chybě došlo.
- Mluvte s uživatelem ve stejném jazyce. Zpráva by měla jasně porozumět tomu, co se pokazilo a proč; co by měl uživatel udělat, aby chybu napravil?
- Nešokujte ani nezmást uživatele. (Zpráva by neměla být příliš provokativní).
- Neztrácejte kontrolu nad systémem. (Pokud problém není kritický, uživatel by měl mít přístup ke zbytku aplikace).
- 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 „ domovská stránka“ 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:
Nicméně, když kreditní karta odmítl platební systém z nějakého důvodu to obvykle 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ého. 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í.
Štítky: , , ,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 to validace webu, html kód a css, proč je to potřeba a jak uvést web do standardů pomocí konkrétního příkladu.
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 MIME média (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. Varová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 stejné. 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">↩'); var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, funkce regex_function(str) ( return ' url(\'' + dir_path + '/' + str.replace (/url\(\'/gi, '').replace(/^\s+|\s+$/gm, ''); )); splited_css += ""; ) var td_theme_css = jQuery('link#td-theme-css'); if (td_theme_css.length) ( td_theme_css.after(splited_css); ) ) )); ) ))();