Přejít k navigační liště

Zdroják » Webdesign » 2010: Rok kdy se dotkneme webu

2010: Rok kdy se dotkneme webu

Články Webdesign

Dotyk. Slovo, které dneska v jeho anglické variantě (Touch) můžete zaslechnout snad všude. Částečně za to může Steve Jobs, částečně prostě poptávka uživatelů. Jisté ale je, že stará dobrá myš již brzy nebude výhradní prostředek pro pohyb po webových stránkách. Je nejvyšší čas se s tím sžít.

V roce 2007 Apple představil iPhone. Přes počáteční výsměch ze strany technických nadšenců se tento telefon stal legendou a proměnil celé mobilní odvětví. Výrobci se vrhli do výroby vlastních dotykových mobilních zařízení. V roce 2009 se celosvětově prodalo 175 milionů smartphonů, naprostá většina z nich s dotykovým ovládáním. Nokia, RIM, HTC a další tak denně prodávají velké množství zařízení, pomocí kterých se uživatel může webu doslova dotknout.

Mobilní přístroje jsou ale dnes zodpovědné jen za 1 – 1,5% zobrazení stránek na internetu. Jejich podíl sice vzrostl meziročně o 110%, ale i kdyby vzrostl v dalším roce o 200%, stále jsme na nějakých 5% zobrazení. Mělo by nás to vzrušovat?

Letos možná ne. Ale dotykových zařízení v roce 2010 přijde mnohem více. Na CES 2010 byly pořádně vidět tablety – počítače s dotykovou obrazovkou. Zatím je nikdo výrazně nepoužíval, ale vystavovatelé na CESu se vezli na vlně pověstí o Apple tabletu. Apple poté skutečně představil iPad. A ať už si o něm myslíte cokoli, nemůžete mu upřít, že na pár dní ovládl stránky novin. Hype okolo tabletů otevírá trh pro další. Ať už běží na vlastním OS (JooJoo), využívají Windows 7 či plánují využívat Google Chrome OS. Jsou slyšet i zvěsti o tom, že další Amazon Kindle bude mít barevnou dotykovou obrazovku.

Dotyková zařízení v roce 2010 přesto pravděpodobně nezískají výrazný podíl na trhu, ale již v roce 2011 začnou být výraznými hráči. A protože to, co vytvoříme dnes, s největší pravděpodobností minimálně rok přežije, měli bychom s tím začít počítat.

Na co se máme připravit?

Zkontrolovat web ve třech verzích IE, Firefoxu, Chrome, Opeře a Safari již nebude stačit.

Byly doby, kdy stačilo zkontrolovat web ve svaté trojici – IE, Firefox, Opera. Dneska potřebujete k dokonalé kontrole funkčnosti webu Mac, Windows, Linux a alespoň desítku prohlížečů. Zítra budete potřebovat velké množství mobilních zařízení a pár tabletů. Kompletní testování se tak stává finančně i lidsky neúnosným a budete si muset vybrat pár zařízení a prohlížečů, ve kterých web otestujete. Pomoci mohou částečně emulátory, ale nakonec se budete muset spoléhat na své zkušenosti a znalosti.

Rozdílnost zařízení si vynutí používání progressive enhancement. Kdo nechce riskovat, vytvoří nejprve základní kostru stránky a poté na ni bude postupně stavět další funkčnost. V novějších prohlížečích bude stránka hezčí, ve starších stále dobře použitelná. Jinak se ale pro mobilní web vyvíjet nedá. Nebo snad myslíte že stačí, když vaše stránky běhají krásně na iPhone a Androidu? (Jděte i s iPhone do …)

Nepoužíváte standardy? Běžte si hledat jinou práci.

Dokud se designovalo pouze pro pár desktopových prohlížečů, mohla se používat nestandardizovaná řešení. Pluginy a podobné věci dlouho tlačily celý web kupředu. S tím je konec. Dneska už se nemůžete spolehnout ani na to, že uživatel uvidí váš flashový banner. Někteří tvrdí, že Flash je mrtvý. Další tvrdí, že se z něj stane volitelná nadstavba případně vylepšující uživatelský prožitek. Jisté je to, že Flash bude na webu přítomen v mnohem menší míře.

Zapomeňte co jste znali.

Nejprve zapomeňte na Photoshop. Web zítřka se designuje v prohlížeči. Pokud se moje stránky přizpůsobují schopnosti prohlížeče, který zrovna uživatel používá, jak pro jejich návrh mohu používat nástroj, ve kterém vše vypadá vždy stejně? Jak mohu designovat interakci v nástroji, který ji nepodporuje?

Zapomeňte i :hover. Nic takového dotyková zařízení neznají. UI návrháři uroní slzu, :hover poskytoval spoustu zajímavých možností k zjednodušení uživatelského rozhraní. Stačí se kouknout na Facebook. Zase jedna oběť jediné neměnné konstanty webu – změny.

Zapomeňte na spory o používání jednotky "px" pro velikosti písma. Na webu, na kterém si celou stránku přibližuji dvěma prsty, to už nikoho netrápí.

A zapomeňte na všechny řeči o tom, že důležité věci musí být vidět nad zalomením stránky. Tzv. page fold za a) ničemu příliš nevadí a za b) ve chvíli, kdy si uživatel přibližuje jen části stránky, se jeho případný význam zcela mění.

Hlavní menu ztrácí význam.

Hlavní menu bývalo centrálním opěrným bodem stránek. Ale ve chvíli, kdy si uživatel přibližuje části stránky, je pro něj neviditelné. Krátké a výstižné odkazy pod článkem, výzvy k akci přímo na místě, kdy jste návštěvníka přesvědčili, že ji má provést – to je to, čím se budou zabývat experti na použitelnost na celém světě v příštích letech. Dodnes stačilo nadesignovat stránku jako celek. Zítra budete muset navrhovat každý detail. Bůh ví, kam se uživateli zachce zazoomovat.

Dotyk přináší revoluci do naší interakce s webem.

Sotva jsme se téměř naučili vytvářet dobré weby pro standardní obrazovky a někteří z nás i pro klasické mobily, jsme na prahu další velké změny. Nebude jí ale Sémantický web, – tou mnohem bližší revolucí bude změna ovládání.

(Děkuji Ondrovi Válkovi za jeho inspirativní seznam věcí, které změní iPad. – pozn.aut.)

Komentáře

Subscribe
Upozornit na
guest
19 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Ondrej Valka

A ja dekuju Honzovi Sladkovi za velmi ctive a chytre zamysleni nad budoucnosti Webu. Jen houst a vetsi kapky! :-)

Ad hover: zrovna dnes jsem nad tim premyslel: budeme-li mit k dispozici JavaScriptovou udalost, neco jako onZoom, dovedu si predstavit, ze pomuze jako nahrada :hover. Od urcite urovne zoomovani zkratka uvidime to, na co bychom jinak museli najet mysi. Dava to smysl: pri naslednem mazani prispevku na Twitteru se stejne soustredime jen na tuto akci.

Ondřej Válka

:-) Mit tak kridla (rozumej neomezeny rozpocet), tak si to implementujem‘ v JS sami! :-)

karf

Mně ten článek přijde jako (a ať se autor neurazí) snůška klišé opepřených trendovými slovíčky. Kdyby si aspoň odpustil ty nabubřelé podnadpisy…

Ad hover: podle mě by nejjednodušším řešením bylo nějaké shift tlačítko (klidně virtuální), které kdyby člověk přidržel, tak by se doteky chovaly jako hover.

pas2007

Dva prsty nebude chtít nikdo používat, pokud nebude muset. :)

To se mi víc líbí takovéhle nápady:

http://www.youtube.com/watch?v=FjIFLAkvv1Q

Dovedu si představit site map udělanou tímhle způsobem, která vyjede z boku (samozřejmě pouze pokud se nacházíme na dotykovém displeji).

keff

To je výborný postřeh, pro touchscreen je teprve první dotyk onen nezávazný hover, problém ale je, že se to není kompatibilní se současným webem, a tak nás čeká těžká schizofrenie – stránky které budou na touchscreenu marně čekat na hover, aby odkryly nějaké UI, a stránky které budou na desktopu hover ignorovat aby pak menu vyjelo až na první klik – k překvapení uživatele navyklého onhover světu.

Automatickou cestu ven z toho moc nevidím, když třeba na touchscreenu první dotek vyvolá onhover (pokud na daném prvku :hover existuje, jinak by se choval jako běžný klik), spoustu stávajících interakcí, včetně klikání na odkaz, to prodlouží z jednoho kliku na dva – a byla by potřeba takřka umělá inteligence, aby pochopila úmysl autora stránky (anebo hodně chytrá heuristika ala „byl tam hover, ale po hoverování se nezměnil lokální DOM, takže to budeme počítat jako klik“?).

karf

Tak tomu ale není. Na iPhone se „tap“ nebo „touch“ rozhodně nepodobá hoveru, a to ani v Safari, ani v nativních aplikacích. Kolikrát už jsem zůstal hledět na řadu ikon v nové aplikaci a říkal si „kdybych tak tušil, co se stane, až na tohle klepnu“ – žádný nezávazný hover se nekoná, kontextová nápověda žádná, nezbývá než to risknout. Mít k dispozici nějaký shift-touch, bylo by to ideální, zpětně kompatibilní, transparentní a bezproblémové (narozdíl od vymýšlení nových komplikovaných způsobů jak toto obechcat).

V mobilním Safari je to stejné – touch vyvolá sice všechny události jako mouseover, mousedown, :hover a další, ale zároveň i click, takže o nezávazném hoveru nemůže být ani řeč.

Petr Pecháček

Co takle něco jako onfingerdown = hover a onrelease = klimnutí? IPhone jsem nikdy nepoužíval, ale myslel jsem si, že to takle nějak funguje…

Ondřej Válka

Jeste mne k tomu napada, ze absence :hover na dotykovych zarizenich muze navrhovani UI jen prospet: proste proto, ze designeri zacnu delat ikonky jasne na prvni pohled aj.

keff

A ještě přidám varovné připomenutí: iPhone is the new Internet Explorer 6 http://www.guardian.co.uk/technology/blog/2010/feb/08/mobile-web-broswer-criticism – nenechme se stáhnout k představě že mobilní verze stránek = 320px široká, works in mobile safari only, nebo s tím budeme za pár let bojovat stejně jako s aktuální noční můrou!

dc

Po prve preco sa stale dokola omiela ze pre iPhonom nikto nerobil dotykove mobily? HTC robi dotykove snad od zaciatku, Nokia tiez so vselicimi koketovala. A snad sa tu nebavime o Newtone ktory mal sice Apple v dobach davnych ale asi ma s iPhonom malo spolocneho.Je pravda ze touch ovladanie doviedol Apple do skoro dokonalosti ale rozhodne nebol jediny kto ma touch obrazovku.

A co sa tyka zalomovania a zoomovania tak priznam sa po spusteni safari na iPhone som zazil maly sok ked som zistil ze nieco ako reflow je pre neho cudzie slovo.Zvyknuty z opery mobile na reflow je safari na nieco ine ako na ukazovanie „cool zoomovania s prstami“ prakticky nepouzitelny. Citat nejaku dlhsiu stranku alebo nebodaj forum je na iPhone utrpenie. Pritom reflow je asi najdolezitejsia funkcia na zariadeni s malou obrazovkou.

wix

JASNE VSICHNI SE KVULI IPADU PO…….. :) jsou to nesmysly..na celem clanku je tak 10% pravdy

ra.ri.ta

Článek je to pěkný, leč opomíjí jednu skutečnost. Nerozlišuje zábavu a práci.

Nedovedu si dost dobře představit napsat tento text na dotyku. Kupodivu této činnosti je 90%.

Na zábavu jo a bude slábnout.
Ne práci ani omylem.

Radek

Jojo, pěkně se to mlátí prázdná sláma a pěkně se to čte. A teď vzhůru do práce – kódovat stránku plnou kulatých natahovacích rámečků, ke které mám od grafika podklady v bitmapě. Samozřejmě pomocí ořezané podmnožiny CSS2, aby to jelo všude. Takže přeji pěkné snění.

asystematic

Moc pekne napsano! Ale dovolim si podotknout ze autor pod navalem „trendy“ modernich technologii a hypu vidi vyvoj na muj vkus trochu moc fatalne. Kurz vzdy udava chovani spotrebitelu a i pres stoupajici trend v pouzivani mobilnich zarizeni, si dovolim rict, ze nikdy nebudou sto konkurovat laptopum/desktopum v zasadni mire. Sam pouzivam „smartfoun“ casto ale vzdy jen jako doplnek(email, rychle prolitnuti zajimavosti na webu). Zkuste si prohlizet v pda,smartfounu, tabletu web dele nez pul hodiny/hodinu denne – jednak je to stale celkem nepohodlne(scro­llovani po touch screenu) a to nemluvim o namahanych ocich. Samozrejme ze vyvojar musi brat zretel na vsechny trendy, ale v teto otazce si myslim ze se spis budou prizpusobovat technologie na mobilnich zarizeni, nez ze by vyvojari museli zasadne upravit proces vyvoje webu(uz jenom kvuli nakladum, jak autor spravne pomodotkl).

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.