Responsivní layout a módy

Myslím si, že tohle je už až moc přitažené za vlasy. Příkladem budiž menu, které je na Macu pro všechny aplikace na stejném místě .. konzistentní to je, ale ne dobré. Zejména při nemaximalizovaných oknem to dá práci tam z místa, kde momentálně pracuji, tou myší dojet. A hodně lidí má monitory s vyšším rozlišením než 1024×768.
Druhým příkladem jsou windows mobile 6.5, které by podle tohoto principu měly být lahodou k používání na mobilu. I kdyby někdo naportoval přesně OS na tablety nebo mobily, bude to chyba, protože se hlavně změnil způsob práce se zařízením. Na rozdíl od desktopu na mobilech/tabletech je interakce přímá (nikoli zprostředkovaná), vyžaduje to úplně jiné „stavy mysli“ a tedy i tak ji lze brát za nekonzistentní.
Konečně weby. Myslím si, že protože se mění princip interakce se zařízením a zprostředkovaně s webem, stejně tak jsou jiné podmínky a potřeby, s kterými člověk na web přistupuje, je legitimní mít pro portable verzi jiný vzhled (ale konzistentní napříč všemi přenosnými zařízeními) než pro desktop.
Hlavně mám pocit, že webdesignéři v myšlení na „blbost“ uživatelů dochází do krajností. Protože extrémem této situace jsou všechny weby naprosto stejné. A lidský intelekt úplně kdesi. A s takovým myšlením by nevznikl např. ani iPad, nebo například auto, protože by stačil jen rychlejší kůň.

Ve srovnání interface Macu a responsivního webu vidím jednu zásadní chybu – srovnáváš a požaduješ stejné chování na radikálně odlišných platformách.

Uspaný i probuzený počítač je v podstatě jeden stejný prohlížeč na stejném monitoru (z webového pohledu), takže se klidně může chovat pokaždé stejně. Ten samý web otevřený dvakrát po sobě na iPadu (nebo na PC, na Galaxy S atp.) taky bude pokaždé vypadat a reagovat stejně.

Ad debata na Twitteru – barrackobama.com určitě měla dost slušný rozpočet na to, aby proběhly debaty a rozsáhlá testování a určilo se, co je a co není důležité. Těžko můžeš stejný obsah, zobrazený na 960 (nebo spíš 1140) px webu fontem velikosti 13 (nebo lépe 14) px zobrazit na 320 px mobilu, kde navíc musíš počítat se zvětšením prvků kvůli dotykovému ovládání.

Zeldmanův přístup je v tomhle případě myslím dost omezený a těžko použitelný ve všech případech. Navíc jeho text (OK na retině) je na monitoru tak velký, až je nečitelný a strašně mě z toho rozbolely oči. Bad move!

Zajimavy postreh, File.

Nebude to myslim pravda vzdy. Na danem webu mohou jini uzivatele pouzivat mobilni verzi s jinym zamerem a potrebou jinych informaci nez by pouzivali verzi desktopovou.

Je dobre pamatovat na to, ze kontext ma nadvladu nad konzistenci (viz http://gettingreal.37signals.com/…sistency.php). A ze desktopovy web muze byt na podrobne potapeni, zatimco mobilni na jen takove snorchlovani… (viz http://kratce.vzhurudolu.cz/…ecenze-knihy).

Nicmene jako vsude i zde plati: to zalezi.

V podstatě jde o to zamyslet se nad tím, zda to, že web udělám responsivní, nezabrání části uživatelů v jeho efektivním používání.

Nevím zda se na to někdo díval tímto způsobem a zda to někdo testoval (co se stane, když jeden člověk kouká na 3 různé verze responsive webu a má konkrétní myšlenku – třeba najít ten článek, co byl posledně vizuálně v pravém sloupci dole) – a může to mít zajímavé důsledky pro tvorbu rozhraní. Prostě místo přizpůsobení se zařízení se přizpůsobit lidem a jejich chování.

Ondro – díky za komentář – jsem dalek toho tvrdit, že výše uvedené je pravda vždy – spíše bych nad tím rád rozvířil diskusi.

Každopádně tvrzení „desktopovy web muze byt na podrobne potapeni, zatimco mobilni na jen takove snorchlovani“ je s nástupem tabletů a vyšších verzí iPhonů stále více na hraně. Lidé s mobilem už často taky chtějí své hlubiny :-)

#4 .. otázkou je velikost dané skupiny uživatelů .. a můj názor je ten, že nemám kapacitu si pamatovat, kde byl článek, ale jeho nadpis (a pokud předpokládám, že na mém webu bude někdo hledat, tak mu tam dám inteligentní nebo aspoň základní hledání). To je jako by na iDnes musely všechny nové články být stále níže a níže, aby byly na svém místě.

„Responsivní layout vytváří módy“

Tohle tvrzení by asi potřebovalo nějaké argumenty. Minimálně by šlo namítnout, že módy nevytváří responsivní layout obecně, ale jen některé jeho konkrétní implementace, nebo že módy primárně vytváří už to jiné zařízení.

„Váš web je jiný na iPhone, iPadu a desktopu.“

Ano, ale jak to souvisí s responsivním layoutem? Tahle stránka responsivní layout nemá, že? Zkusil jsem si jí otevřít v tabletu na výšku. Písmo bylo moc malé, tak jsem dvakrát poklepal na střední sloupec s článkem. A hle – stránka hned vypadala jinak. Zmizel mi levý sloupec a na komentáře jsem musel dolů rolovat.

Stránka bude na těchto třech zařízeních vypadat vždy jinak, ať pro to něco uděláš, nebo neuděláš. Jen na nich může být více či méně použitelná.

„Jako vlastník všech těchto zařízení máte jeden web ve třech různých módech“

Co znamená web? Když na tomto tvém webu projdu například 100 stránek, každá bude jiná (předpokládám). Znamená to 100 různých módů?

„a nevíte, co kde hledat.“

Já tu nic hledat nechci. Přišel jsem si přečíst článek a případně napsat komentář. Obojí jsem našel a věřím, že bych to našel i v případě, že by to vypadalo trochu jinak. Tak jako tak si rozložení stránky na tomhle webu nepamatuji (i když sem chodím často) a musím ho vždy znovu „pochopit“.

Výmluvy designéra. Uživatel by vůbec nepochopil, o čem mluvíš :-)

Úplným odstraněním módů v rozhraní si myslím, že se podřizuje výsledek největšímu společnému jmenovali, což nevidím jako žádoucí.

Třeba takový facebook. Přístup z mobilních telefonů není konsistentní s tím desktopovým, ale nemyslím si, že by se používal hůře (samozřejmě je to subjektivní), naopak.

Nepochybuju o tom, že se najde situace, kdy tomu bude naopak.

Přiznám se, že se mi nechtělo psát „responsivní layout vytváří NĚKDY módy“, ale je to výrazně přesnější. :-)

Scénáře, co mě napadají pro „někdy“:

• vracím se na tabletu pro něco, co jsem na webu viděl a hledám to po vizuální paměti
• popisuji někomu, kde má na webu něco hledat, ale on ho má přeskládaný
• chci na webu udělat něco, co autor v rámci „přizpůsobení se potřebám lidí s mobilem“ do stránky nezahrnul

…

[9] Brání ti něco vzít tyhle scénáře během návrhu a testování konkrétního (responsivního) layoutu v konkrétních podmínkách konkrétního projektu v úvahu? Stejně přeci skoro vždy v designu hledáš nějaký kompromis, protože všechny scénáře mají jedno ideální řešení jen výjimečně, ať už je layout responsivní, nebo neresponsivní.

A také, otázka lidí, kteří postrádají funkcionalitu. Pokud má web možnosti feedbacku, tak přece v rámci evoluce webu je možné dělat drobné změny a reflektovat zvýšenou potřebu důležíté cílové skupiny. Tím, že jde web live, tak to přece nekončí.

Módy pro responsivní webdesign jsou daní za lepší experience (čitelnost, konzumace, rychlost nahrání stránky,…). Jak často ty situace NĚKDY řešíte ? 

Já vidím největší problém a výzvu responsivního webu v obsahu (jak ho připravovat a prioritizovat pro jednotlivý rozlišení a kontexty). Natáhnout obsahy a zrušit floaty je jednoduchá věc, ale málokdo už řeší smysluplný flow informací v jednotlivých  breakpointech. Zvlášť v pripadě, že někdo responsivně ohýbá starší desktopový web. Líbí se mi myšlenka CSS regions, ale je to zatím v plenkách… http://css-tricks.com/…ent-folding/

1. Proč mě ten odkaz na knihu hodil na e-shop s viagrou???
2. Takže když v prohlížeči stisknu např. tlačítko backspace, dostanu se na předchozí stránku. Ale pokud jsem zrovna v textarea a edituji tento komentář, tak mi to místo toho smaže předchozí písmenko. Čili jsem v jiném módu a UI se chová jinak. Je to špatně? Proč? Ještě jsem neviděl, že by to někomu dělalo zásadní problém.
3. Řekl bych, že problémy responzivního webu s „módy“ až tak nesouvisí, ale nevím, jestli správně chápu, co to ty módy přesně jsou.

1. nevím, ale už jsem ho opravil – díky za echo
2. módy nejsou nepřekonatelná překážka v používání, ale mohou ho ztížit – a tohle může být relevantní scénář – kdy přijdeš k počítači a nevíš, že jsi v textarey…
3. je to jiný pohled na módy – mám jiný web jen proto, že jsem na jiném zařízení…

2. Souhlasím, že to může být problém, ale asi si neumím představit rozhraní zcela bez módů. To zní jako dost radikální myšlenka.

3. Taky se mi nelíbí, když se layout na jiném zařízení (nedejbože v menším okně) nějak divoce zpřehází, že nevím, kde mi hlava stojí. Ale ten Zeldmanův přístup je taky úchylnej. Prostě ode zdi ke zdi.

„Autor je proti módům“ je myšleno Jef, nebo ty? Každopádně já nesouhlasím, samotné macy i IOS zařízení jsou „módů“ (nebo kontextového chování, chceš-li) plné, a je to velmi užitečné. Ostatně moderní UI obecně toho užívají vrchovatě (vidíš jen to, co je aktuálně nejdůležitější/dává smysl, zbytek je schovaný a mění se to podle kontextu) a rozhodně to považuju za správné.

Modální UI:

1. aktuální stav zařízení NENÍ uživatelově místě pozornosti (tzn. někde je přepnutý přepínač a já se na něj nesoustředím)
2. interface provede na základě gesta jednu z množiny operací v závislosti na stavu přepínače

Je otázka zda responsive splňuje podmínky – za mě ano, protože člověku je jedno zda dělá na iPadu/mobilu/jiném desktopu a pokud používá daný web opakovaně, tak mu zařízení může změnit vizuální stránku natolik, že ho to může zmást.

Microsoft ribbon v office od verze 2007 má přesně to „responsivní chování“ – se zde popisovanými vadami: stačí, abych si trochu změnil velikost okna a z ikonky s textovým popisem je najednou ikonka bez popisku, nebo se ikonka zmenší. Ano, hraje si to s uživatelem na schovávanou a mně osobně to nevyhovuje. Naopak při otočení mobilu z výšky na šířku, pokud ty změny jsou „tak nějak logické“, responsivní chování vítám.
Každopádně chválím článek za rozkrytí problému u jinak zdá se nekriticky zbožňovaného responsive design.

13/2) Tadýýýý. Zrovna minulý týden jsem psal na facebooku cca jednostránkový komentář k jedné ekonomické diskuzi – a přitom při mazání cestou k backspace nechtěně cvrnknul o touchpad. Ještě napovím, že na dynamické stránce, jakou facebook je, nezvládne při následném forward obnovit rozepsaný text ani Chrome.

Jelikož jsem podobnou situaci už párkrát řešil, dumpnul jsem paměť procesu a v hexeditoru v ní našel cachovaný text. Co by ale dělal fermat, kdyby si zrovna poznamenával důkaz své velké věty a nevládnul vývojářskými schopnostmi, to netuším.

Laičtějším uživatelům stačí už několikanásobná ztráta hodinové práce k vybudování doživotního strachu z počítačů. A s takovou situací se přitom určitě potkají s větší pravděpodobností, než já. Arogance designérů.

Filosofovi posílám poděkování od Larryho Nomodes Tesslera :) http://en.wikipedia.org/…Larry_Tesler

Zajímavý článek, ale podle mě je interpretace Raskinových modes zahnaná do extrému.

Raskin definuje módy jako ‚způsob, jakým interface odpovídá na uživatelovy akce (gestures).‘.

Čili je to o významech komponent a akcích, které na nich může user provádět. To je přímo napojeno na mentální model uživatele (©Cooper) který reprezentuje jeho pochopení aplikace a potažmo problému/use case, který pomocí ní řeší. Pokud stejné komponenty reprezentují různé věci, uživatel je zmaten a jeho mentální model je narušen.

Raskin (potažmo Norman) radí 1. Módy buď nemít, nebo 2.mít je dobře rozlišené, nebo 3.v nich používat rozdílné akce.

Podle mě v multi-device světě dochází k automatickému rozlišení jednotlivých módů (2.) – uživatelé chápou rozdíly jednotlivých zařízení a poslední výzkumy ukazují, že je i používají na různé věci (a nesouvisí to až tak s kapacitou a rozlišeními, jak tu bylo také řečeno, ale spíše s kontextem, ve kterém jednotlivá zařízení používají). S tím také souvisí jejich očekávání.

Já osobně, když jdu číst web na iphone, mám zcela jiná očekávání ohledně vzhledu a funkčnosti, než když jdu to samé dělat na mém macbooku. Nutno poznamenat, že mám ale naprosto stejná očekávání ohledně použitelnosti – tu chci perfektní na obojím!

A jsme u toho – Use Case ‚Orientace/navigace uživatele podle layoutu‘ (‚Chci ten článek, co byl vlevo dole‘) je slabší, než UC ‚Chci si web přečíst pořádně a komfortně na příslušném zařízení‘.

s tím, že se web zobrazuje různě se střetávám pokaždé.. Někdy je z toho pěkný smetiště.. Ale nepomohlo by udělat univerzálně pro mobilní zařízení a pro desktopy také? Je jasné, že na jablíčku to bude vypadat blbě ale když si vezmu do úvahy PC které mají sekretářky pak weby vůbec nemusí být širokoúhlé…ale to je jen můj názor… :)

Zajímavý postřeh. Nevidím problém v různém zobrazení na různých zařízeních (desktop vs mobil vs tablet), protože uživatel má jiný kontext (minimálně v podobě zařízení, které ovládá), ale za problém považuji nekonzistentní zobrazení na jednom zařízení, zejména desktopu.

Hlavně na Macu, kde jsou uživatelé zvyklí běžně měnit velikost okna prohlížeče se tak může stát, že uvidí aplikaci v různých módech. To může být pro uživatele, kteří koncept responsive designu neznají, hodně matoucí (je to bug?).
Například u bankovních webových aplikací může být změna layoutu při změně velikosti viewportu na jednom zařízení nežádoucí věc.

[20] palec nahoru za komentář :-)

Módy ve webdesignu:
Mám v dílně různé nástroje, mezi nimi asi pět kladiv. Každé je jinak těžké, mají různá topora, jinak se drží. Různá kladiva mám proto, že se každé hodí na něco jiného.
Také mám různou elektroniku a je v pořádku, že vypadá, chová se a ovládá se jinak.

Nemyslím si, že když má kamarád jiný typ mobilu a vidím u něj jinou variantu webu, že jde o mód. Spíše bych to označil jako své prostředí. Kamarádi mají různá auta, ženy, domy… a ničemuto nevadí. Právě naopak.