Víte, přechody (transitions) vkládají do prezentace časovou dimenzi. To
znamená, že ovlivňují vnímání stránky. Jeden příklad jsem uváděl
nedávno při rozebírání Apple webu,
na kterém je animace (přechodu) použito přínosným způsobem, snad jako
pomůcka při vysvětlování rozhraní. V dnešním konkrétním případě je
přechodu užito – dovolím si říct – kontraproduktivně.
Snad je dobré zdůraznit, že od webových aplikací se očekává chování
poněkud jiné, než od webových prezentací, totiž více funkcionalistické,
více pragmatické. Zvlášť, pokud jde o analytickou aplikaci :-). Očekává
se mimo jiné maximální rychlost reakce. Nechci říct, že vložení
půl-sekundového přechodu do události myš je nad klikatelnou položkou
menu ⇒ změnit její barvu je nějak zvlášť opovržení-hodným
prohřeškem – ne – avšak o kontraproduktivní eye-candy zajisté jde.
(Kontraprodukcí tady myslím nežádoucí zpomalení zpětné vazby.)
Zároveň i v Google Analytics existují situace, v niž má přechod
praktické uplatnění. Kromě těch, kdy chceme zmírnit „mouse-over“ efekt
(protože reakce na událost není úplně relevatní) (např. zobrazení
doplňkových informací) jde o situace ty, kdy potřebujeme čas. A co si
budeme povídat, GA jsou občas pekelně pomalý nástroj a myslím že právě
přechody a animace (ať už implementované kteroukoli technologií) by mohly
tento dojem trochu korigovat. Umím si představit, že než se
půl-až-sekundová animace dokončí, na pozadí jsou staženy další data.
A ty mohou být zobrazeny opět přechodově, aby nenarušily případně
běžící myšlenkový tok.
Otázka se sice ptá na Internet Explorer, ovšem jádro problému je,
domnívám se, výše. To znamená v IE týmu. V nadřazených týmech. Nebo
prostě v Microsoftu a v té jejich přiblblé strategii.
Internet Explorer je jediný relevantní webový prohlížeč, který má na
trhu hned několik verzí. Momentálně je to verze 8, 7 a popřípadě 6. Pro
nás webdělače je to pochopitelně nepříjemné, a z toho popudu se
uchylujeme k publikování takovýchto nehezkých článků. Obzvláště
nepříjemné je to z toho důvodu, že pro takovýto stav a postup ze strany
Microsoftu není rozumného vysvětlení. Když mluvím o postupu ze strany MS,
narážím zejména na jeho neexistující snahu s tím cokoliv udělat.
Co by se s tím dalo udělat?
Nepropagovat neaktuální verze. Promiňte, ale toto je
prachsprostý výsledek omezeného myšlení či lenosti.
Ze stránky MS → IE → IE9 → Download
Udělat aktualizace jinak. Je řada důvodů, proč si
vypnout automatické aktualizace systému. Třeba protože mé Windows jsou
kradené, nebo protože v MS zatím nedokázali aktualizace navrhnout
dostatečně uživatelsky-přívětivě (úpřimnější vyjádření by bylo:
„to by jeden blil“).
Ale také je řada důvodů, proč aktualizace systému a aktualizace
aplikace by měly být oddělené. Třeba už kvůli těm anti-monopolním
buzeracím. Samozřejmě zpětně se takové změny neudělají snadno, ale
trochu se obávám, že ani teď si v MS neuvědomují, že během posledních
10ti let si uživatelé zvykli některé věci prostě neřešit.
Check the Internet Explorer 9 download page periodically for updates to
Internet Explorer 9. If an update is available, repeat the installation process
to install the latest version.
— ze stránky MS / IE9 / Help / Installation – velmi doufám, že tento
text tak vyznívá jen nechtěně a IE 9 se bude umět aktualizovat bez
mé účasti
Nové verze vydávat pro všechny operační systémy.
Nevím jestli si toho v MS všimli, ale podle mých statistik Windows 7 a
popřípadě Vista nemají ani polovinu trhu. Proto mi nejde do hlavy, proč
aktuální (9.) verzi IE nesprovozníte na Windows XP (které zaslouženě
zabírají zbývajích dejme tomu 50 % trhu). Co je uvnitř IE 9 tak
úchvatného, že trvají na závislosti na Windows Vista a novějších? Pro
kterýkoliv jiný prohlížeč to není problém, byť je dělají lidé
z podstatně chudšího zázemí.
Je jasné, že jakkoliv bude IE 9 tlačen (prozatím se pokud vím mezi
aktualizacemi systému neobjevil), v prvé řadě bude ukusovat z podílu IE
8, což, ruku na srdce, není ten kámen na srdci, který potřebujeme shodit.
(Tato situace, kdy na trhu hodlá setrvávat IE 7 a starší s podílem
10–15 % (a zároveň dvě třetiny prohlížečů budou mimořádně schopné)
hraje do karet zvětšování rozdílu v UX stránek v těchto – a
v ostatních prohlížečích. Progresivní obohacování UX – tak
tomu říkáme my cé-esesáci.)
Chtěl jsem říct jedno: Microsoft se teď mohl zatvářit, že mu leží na
srdci osud Webu a že mu tíží svědomí, jak nám, webdělačům s tou svou
nečinností zavařil, a že by si to teď rád odčinil. Protože může.
(A taky protože obnovení image průkopníka Webu by se mu šikla.) Ale asi se
prostě tam v Redmontu s rolí důchodce, který to „chce už jen nějak
doklepat“, sžili přespříliš.
Sympatický krok – snad v souvislosti s nadcházejícím zveřejněním
9. verze Internet Exploreru – podnikl sám Microsoft a spustil projekt pro
podporu vymýcení IE verze 6. Na webu ie6 countdown.com nabízí kromě
průběžného zpravodajství o stavu vyhlazování i ne moc pěkný banner
pro vaše-naše stránky s výzvou k upgradu (dnes stále ještě na IE 8).
Pozoruhodné je, že poskytnutý kód, potažmo hláška je určena nejen pro IE
6, ale i IE 7.
Tentýž proužek, ovšem zpracovaný graficky o 6 tříd lépe naleznete
mimo jiné i na ie6 update.com. Konkrétně
ie6 update.com poskytuje hlášku nepovedenou tentokrát technicky, takže jsem
si vyhrnul rukávy a napsal to po svém.
Apple.com redesignovalo přesně tak, jak dnes redesignuje každý. Po
malých kouscích. Jo, nic moc se nezměnilo – kromě mírné proměny
grafického stylu (viz hlavní navigace) přibylo pár fancy efektů –
zkrátka a dobře v součtu považuji apple(.com) za praktickou ilustraci toho,
jak by se měly věci dělat. A proto bych chtěl apple.com reverzně zinženýrovat a vyjmuté
orgány nechat kolovat posluchárnou. A poté si o nich popovídat.
Kromě toho, doufám, že mi s tím pitváním pomůžete.
Orgány
Hlavní navigační pruh
ztěží postřehnutelné CSS3 gradienty na pravém a levém okraji
samotná tlačítka jsou (spritovaným)
obrázkem. Nejsem si jist, jestli bych to nezkusil řešit pomocí CSS
gradientů a stínů. Kvůli iPodům a iPhonům bude mít apple.com
nezanedbatelnou část návštěvníků prohlížejících v Internet
Exploreru. Takže asi ne. U jemných gradientů je samozřejmě
situace jiná.
vizte příčky mezi tlačítky: border-image – opravdu
malinký obrázek vložený přímo do CSS souboru (jako
url(data:image/png;base64,etc))
a samozřejmě CSS transitions. A zdá se, že vyjmenovali
všechny dostupné vendor-prefixy! :-)
úvodka má 750 KB a na iPhonu se zobrazí zrovna tak, jako
v desktopovém prohlížeči. Neumím si dost dobře vysvětlit neexistenci
mobilní verze anebo alespoň mobilního layoutu pomocí CSS media-queries a
spíše mi to připadá jako zanedbávání určitého segmentu. Protože už
kvůli datové velikosti bude UX při mobilním prohlížení… no,
problematické.
pokud bychom byli důslední a HTML5 bychom na apple.com
nehledali v CSS a JQ souborech, nevím, kolik bychom ho našli. Nevidím dál,
než za doctype, konstrukce typu a > h4 + p a použití web
storage. Vlastní atributy si vymýšlí, ale nevím proč je neprefixují s
data-. V iTunes sekci naleznete známky WAI-ARIA.
border-radius a box-shadow jsou dnes klasika,
zítra skoro retro :-)
nejzajímavější ze všeho mi přijde… tramtarará:
načítání. Myslím, že postupné načítání
stránky, načítání s vizuálními efekty pohybu a přechodu jsou
zajímavá neprobádaná oblast – hlavně mám na mysli vliv takových
efektů na vnímání stránky. Rád bych si s tím v blízké budoucnosti
pohrál. (Zároveň se trochu obávám, že nebudu sám a čeká nás druhá
vlna nevkusných, nesmyslných animací.)
Neméně mě u řízeného vykreslování zajímá technické provedení.
Bohužel, i tyto neutříděné myšlenky zapisuji s vtíravou představou na
klienta, který čeká na slíbený návrh, takže tady bych doufal, že
v kolaboračním duchu budete pokračovat v rozboru vy v komentářích.
Načítání mě tak zaujalo, že jsem si ho nahrál a pustím si ho ve
smyčce před spaním. Enjoy.
V Safari
Ve FireFoxu 4
Doplnění 28. ledna
Screenshot stránky v IE 6 a v Safari 5. Navzdory technologické
nesrovnatelnosti obou prohlížečů, výsledek je téměř totožný.
Všimněte si zakulacených rohů a vnitřních stínů v Safari a také
použití šumu (součástí obrázku na pozadí). Na obrázcích není vidět
rozdíl v :hover stavu u čtveřice boxů (ani v IE 8 tento efekt není
vidět, protože změněné pozadí je definováno CSS gradientem).
Detail stránky v 300% zvětšení, zleva: Safari a IE 6.
Vážně, teď prosím vy. Co se vám zdá
inspirativní nebo alespoň pozoruhodné? Ať už z pohledu grafiky, UX nebo
HTML5 (klidně v tom lidovém slovasmyslu :-). Doplňujte, rozšiřujte,
opravujte, kritizujte, dovoleno je vše.
Není moc o čem mluvit. V případě většiny možností HTML5 –
vyčkávám:
než se specifikace posune do dalších fází
než se rozšíří implementace
A: Specifikace, která je fázi „Draft“ se nejen
může měnit, ale také doopravdy
mění. Proto se podivuji, že vycházejí papírové knihy o tom,
jak chápat a používat HTML5. B: Pokud je funkce podporována prohlížeči řekněme 50-ti
procenty návštěvníků, s náhradním (fallback) řešením si člověk
musí dát dost práce, což stojí čas.
Proto, a také proto, že dynamické webové aplikace nejsou mým oborem,
všechny ty zajímavé funkce jako geolokace, drag&drop, front-end databáze
a nakynuté cookies jdou mimo mě.
