Redesign MDI webové SPA aplikace pro tablet

[Electric Man]

Ahoj,
dělám na webovém rozhraní pro jednu poněkud starší aplikaci a naimplementoval jsem to jako javascriptovou MDI single page aplikaci běžící v okně prohlížeče. MDI aplikace je klasická aplikace která má programové menu a umožňuje mít otevřeno více oken najednou (ty se mohou překrývat), prostě tak jak tomu bývalo vždycky v dobách Windows na desktopu.

Webová aplikace vypadá nějak takto: ukázka.

Nyní ale vyvstal požadavek, že k webovému rozhraní se bude přistupovat také skrze tablet, a tam MDI aplikace asi není nejvhodnější.
Uvažuji proto nad tím, jak to přelayoutovat, ale moc si nejsem vůbec jistý jak se dělá design pro tablet. Vesměs asi master-detail view nebo tak něco?

Moje představa je, že předělám menu aplikace tak aby bylo vidět jenom to když se uživatel přihlásí, a vlastně kliknutím na koncovou položku menu se vyvolá akce která spustí příslušnou "aktivitu". V té aktivitě vlastně bude obsah který by jinak byl v plovoucím jakoby windowsovém okně. Takže najednou půjde vidět vždy jen jedno okno. Na druhou stranu tablety na kterých to má jet budou asi poměrně velké, takže možná bych tam vecpal i 2 okna vedle sebe.

Nějaké návrhy jak postupovat při redesignu MDI konceptu aplikace na tablet, zkrátka jak vytvářet moderní GUI?

[Reklama]

[Honza]

Android umí implicitní layout podle velikosti obrazovky, takže ty panely můžou být dva, ale jen tam, kde se vejdou.
Ta aktivita pak bude jenom jedna, ale menu budou dvě, a uživatel si může zvolit do kterého panelu se to má zobrazit (např.).
Celkem snadné.

[Pako]

Začal bych asi tím master/detail hierarchickým přístupem a pak by se vidělo jestli má někde smysl otevřít v části detailu detail další úrovně nebo jako modální okno přes celé nebo rozdělit obrazovku na dvě nezávislé mater/detail hierarchie. Hlavně aby to ovládání bylo konzistentní a přímočaré.

Taky si ujasnit co od toho ti lidé na tabletech očekávají a v jakých situacích to budou používat,jestli jako plnohodnotnou náhradu počítače, nebo někde “v terénu” na rychlou referenci: tj napsat si nějaké ty “user story” a nechat si je schválit, že jako k tomu to (v první jednoduché verzi) bude. A odpověď “chceme všechno hned stejně” nebrat.

[Ondrej Nemecek]

Android umí implicitní layout podle velikosti obrazovky, takže ty panely můžou být dva, ale jen tam, kde se vejdou.
Ta aktivita pak bude jenom jedna, ale menu budou dvě, a uživatel si může zvolit do kterého panelu se to má zobrazit (např.).
Celkem snadné.

Jenže to má být web aplikace, viz:

k webovému rozhraní se bude přistupovat také skrze tablet

[Honza]

Android umí implicitní layout podle velikosti obrazovky, takže ty panely můžou být dva, ale jen tam, kde se vejdou.
Ta aktivita pak bude jenom jedna, ale menu budou dvě, a uživatel si může zvolit do kterého panelu se to má zobrazit (např.).
Celkem snadné.

Jenže to má být web aplikace, viz:

k webovému rozhraní se bude přistupovat také skrze tablet

Zmátlo mě, že chce tazatel spouštět "aktivitu" na tabletu. Ale schválně, jestli to tak stejně nedopadne, tzn. frontend ve WebView v nativní aplikaci.

[Reklama]

[123]

Tady bude hlavně dobré si uvědomit, že tablet se celkově ovládá trochu jinak, než desktop - někteří vývojáři na to někdy zapomínají a pak aby na displayi ty miniaturní komponenty člověk lovil párátkem. Jinak osobně bych to asi nepojímal jako "tablet-only", celkově bych to překlopil na responzivní aplikaci. Za chvíli za tebou stejně přijdou s tím, že to má jet i na mobilu nebo v prohlížeči na desktopu.
Responzivní web se přizpůsobí jakékoliv velikosti, takže ho můžeš použít rovnou i v tom MDI(nebo se na MDI vykašlat úplně) a nepotřebuješ udržovat dvě verze vedle sebe, z toho jsou vždycky jenom problémy.

[P_V]

Podle mě určité aplikace patří jen na velkou přehlednou obrazovku, a portace na displejíček je z principu nesmysl. Pokud je ten tablet dostatečně velký, tak tam to MDI bude použitelné taky, a pokud ne, tak se o to nesnažit. Už takhle budete mít problémy s tím, že prst je tlustší než myší kurzor, takže budete muset ovládací prvky zvětšovat a rozhodíte si layout, kde budou plošně převažovat hejblata nad informací.
Je to podle mě stejná blbost, jako se domnívat, že k řízení automobilu stačí očistit od ledu čelní sklo na malé plošce před řidičem.

[q]

Všechno jde, když se chce.

[P_V]

OK, napadlo mě, tu víceokennost nechat, a jen její podobu překlopit do tabů nebo podobné nabídky otevřených oken. Okénka nebudou v libovolné pozici, ale vždy fullscreen. Asi s výjimkou pro modální dialogy. Možná najdete nějaký chytrý tab layout manager co umí i několik tabů vedle sebe, nebo seskupit nabídku tabů do hierarchie co z čeho bylo otevřeno. To by šlo celkem rychle, bez překopávání layoutu a filozofie. Ideální to nebude, ale použitelné to bude. A od toho se pak můžete odpíchnout k nějakým výraznějším změnám, bude-li chuť.