Návrh stránek

4IZ268 – Webové technologie

Jirka Kosek

Poslední modifikace: $Date: 2017/11/10 11:22:34 $

Úvod

Recept na dobré webové stránky

  • grafický design – první co uživatel vidí

  • struktura stránek, informační architektura, navigace – aby se v tom uživatel vyznal a dlouho zůstal

  • přístupnost – obsah stránky by měl být vytvořen s ohledem na co nejširší okruh čtenářů

  • použitelnost – práce se stránkou/aplikací by měla být intuitivní a příjemná

  • dobře strukturovaný, snadno čitelný a srozumitelný text (copywriting)

  • syntakticky správný HTML kód – méně práce pro prohlížeč

  • vhodné metainformace – snazší nalezení stránky

  • přesný postup neexistuje, vždy je potřeba jednotlivé složky vyvážit

Postup tvorby webu

  • nebudeme suplovat předměty zaměřené na projektové řízení, ale…

  • samozřejmě je potřeba začít analýzou požadavků zadavatele a na základě ní pak stanovit cíle webu

  • cílům pak přizpůsobíme jednotlivé aspekty webu

  • pokročilé analytické nástroje dovolují průběžně monitorovat plnění cílů webu a průběžně web měnit a vylepšovat

  • pozor na zombie – vytvořit web je jedna věc, ale udržet jej v chodu a s aktualizovaným obsahem není jednoduché a levné

Použitelnost

Jak se pozná použitelný web

  • uživatel není nucen přemýšlet

  • jednoduchý a přehledný

  • rychle se načítá

  • konzistentní napříč všemi stránkami

  • ovládání je intuitivní

  • vše by mělo vést uživatele ke stanovenému cíli (např. dokončení prodeje v eshopu)

Testování použitelnosti

  • uživatelské testování

  • analýza návštěvnosti

  • A/B testování

  • heuristika na základě zkušeností

UX

  • UX (User eXperience) – zážitek z použití webu či celého širšího procesu navázaného na web

  • širší pojem než samotná použitelnost

Grafický design

Postup návrhu

  • klasický postup: wireframes → grafický návrh → nakódování do HTML+CSS

  • pro responzivní weby je potřeba udělat několik samostatných variant (poměrně pracné)

  • stále populárnější je tak „mobile first“ přístup, kdy se primárně vytváří poměrně jednoduchá verze webu

  • „graceful degradation“ vs. „progressive enhancement“

Základní pravidla

  • design by měl být střízlivý – méně je někdy více

  • bez zbytečně velkých animací a obrázků, které jsou k ničemu

  • vhodné kombinace barev

  • barva pozadí a textu musí být zvolena tak, aby se text dobře četl

  • obrázky na pozadí je lepší vůbec nepoužívat (téměř žádná profesionální stránka je nepoužívá)

  • jako barva pozadí je vhodná zejména bílá a velice světlé odstíny dalších barev

Výběr písma

  • na obrazovkách s menším rozlišením jsou čitelnější bezpatková písma (Arial, Verdana, Helvetica, …)

  • na obrazovkách s větším rozlišením jsou čitelnější patková písma (Times, Palatino, Cambria, …)

  • nekombinovat příliš druhů písma na jedné stránce

  • řádka by neměla být delší než 40-60 znaků → u delších se špatně přechází z konce jedné na začátek další

  • písmo o velikosti 10 pixelů je pro většinu lidí příliš malé

  • pro zvýraznění používat barvy, tučné písmo nebo kurzívu – zásadně nepoužívat podtrhnutí (to je vyhrazené pro odkazy)

Typografie

  • dodržovat typografická pravidla

  • základ je v pravidlech českého pravopisu – psaní mezer, interpunkce, pomlčky, uvozovky, přímá řeč apod.

Tabulka 1. Zápis některých znaků
Popis Ukázka Zápis v HTML pomocí entity
dlouhá pomlčka —
krátká pomlčka –
levá uvozovka „
pravá uvozovka “

Zaručená rada pro dobrý design

  • na skutečně dobrých webech dělá vždy více lidí

    • grafik/designér

    • HTML kodér

    • programátor

    • marketing, SEO, …

  • každý by měl dělat jen to, co umí dobře

Struktura stránek a navigace

Struktura stránek

  • hypertext umožňuje vytvořit téměř libovolnou strukturu, ale člověk je zvyklý na konzervativnější uspořádání – většinou na hierarchii

  • analýzou přístupových logů případně dalšími analytickými nástroji lze zjistit nejčastěji navštěvované stránky a přizpůsobit tomu jejich umístění

  • jedna stránka by měla obsahovat logický celek informací, ale nesmí být příliš dlouhá – „maximálně 5 obrazovek

  • stránka s odkazy by měla být vidět celá bez nutnosti rolování

  • silně AJAXové aplikace by měly dodržovat zvyklosti webu – historie, možnost tvorby záložek a sdílení odkazů, …

Navigace

  • na každé stránce by měla být navigační lišta, ze které bude jasné, v které části serveru jsme

  • „drobečková“ navigace

  • odkaz na hlavní a nadřazenou stránku, případně na předchozí a další

  • pozor na těžko ovladatelná „rozbalovací“ menu

  • každý větší server je nezbytné doplnit možností fulltextového prohledávání

Stránka

Stránka

  • aktuální a zajímavé informace

  • rychlé načtení

  • gramaticky správný a slohově čistý text – minimálně zkontrolovaný spell-checkerem a přečtený několika kamarády

  • stránku je dobré co nejlépe strukturovat pomocí HTML elementů – nadpisy, seznamy apod.

  • pokud to jde, měl by se obsah oddělit od vzhledu a použít CSS – menší a rychlejší stránky, snazší změny designu

  • dodržovat standary HTML, XHTML, CSS a další

Odkazy

  • nepoužívat odkazy typu – klikněte zde

  • oprostit se od technologických pojmů jako server, FTP, WWW – stránky jsou pro běžné uživatele a těm je jedno, jaké technologie stojí v pozadí

  • odkazy by měly být interaktivní, aby v uživateli vzbudily pocit, že jsou aktivní části dokumentu – např. změna barvy po přejetí kurzorem myši

  • zvykem je odkazy podtrhávat

  • v rámci jednoho serveru používat relativní odkazy, aby mohly být stránky snadno přesunuty na jiné místo

Každý dokument

  • každá stránka by měla obsahovat několik identifikačních údajů: kdo ji vytvořil včetně kontaktu, datum poslední modifikace, do kdy jsou uvedené informace platné

  • z každého dokumentu by mělo být jasné, na kterém jsme serveru (někdo se ke stránce může dostat zvenčí pomocí odkazu)

  • každý dokument by měl obsahovat výstižný název (element title)

  • metadata pro lepší vyhledávání a klasifikaci

Volba URL adresy

  • „jednoduchá, perzistentní a výstižná“

  • technologicky neutrální

    • bez koncovek typu .html, .php, .aspx apod.

    • technicky lze vyřešit modulem web-serveru pro přepisování URL (např. mod_rewrite)

  • škálovatelné pojmenovávací schéma (např. část cesty začíná rokem)

    http://www.vse.cz/2005/as/volba_rektora
  • v průběhu času by jedno URL mělo označovat stejný informační zdroj, i když se třeba mění jeho formát

Přístupnost

Proč přístupnost

  • absolutní počet uživatelů webu s nějakým handicapem je relativně velký

  • určité weby v určitých státech musí ze zákona splňovat pravidla přístupnosti

Zásady přístupnosti

  • textová alternativa pro obrázky

  • titulky k video/audio záznamům

  • web by měl jít ovládat jen pomocí klávesnice

  • podstatné informace by neměly být závislé na rozlišení barev

  • dostatečně kontrastní písmo a pozadí

  • stránka se rozumně zobrazí i při zvětšení/zmenšení písma

Další zdroje informací

Povinná četba

Design stránek