Jaké navrhnout uživatelské rozhraní pro webovou aplikaci?

Sheldonizátor

Ahoj, jakožto bývalého backendistu by zajímal by mě názor lidí tady na to, jak navrhnou uživatelské rozhraní SCADA aplikace běžící v okně prohlížeče, která ale bude primárně používána na desktopu s velkým monitorem. Aplikace by měla být přístupná i z tabletu (ale nikoliv nutně z mobilu) a přitom umět využít výhod velkého monitoru a přizpůsobit se v případě potřeby i tabletu. Nemám mnoho zkušeností s UX ani s UI, takže se rád nechám poučit.

Aplikace zobrazuje mnoho různých prvků které mění stav a jsou nakresleny pomocí SVG (cca 20 tisíc řádků javascriptu kreslí SVG které má obvykle několik tisíc elementů, ty mohou různě blikat, měnit barvu, zobrazovat číselné hodnoty atp. v závislosti na datech získaných pomocí nějaké webové služby), při kliknutí na prvek by o něm mělo být možno zjistit nějaké informace a nebo na něm provést nějakou akci. Tento SVG obrázek je to největší co by v aplikaci mělo být vidět a měl by zabírat velkou část obrazovky. Co bude třeba dále zobrazovat jsou právě informace o prvcích obrázku a nějaké tabulka s událostmi která by měla být viditelná současně s tím obrázkem.

Aplikace by měla mít moderní grafický design a vypadat pěkně, ale je těžké říct jak by měl moderní design poplatný dnešní době vypadat (nemám umělecké cítění, spíš naopak...), o tom jak dělat UX a UI tak aby bylo pěkné mnoho nevím, navíc všechny články o UX řeší především webové stránky, nikoliv webové aplikace. Nepotřebuji řešit "konverzi" ani "SEO", potřebuji vědět jak dneska mají vypadat webové aplikace aby vizuálně oslovily zákazníka a neurazily koncového uživatele.

Osobně zastávám názor že klasické desktopové rozhraní typu MDI (více oken v jednom oknu) a kontextovým menu na klik pravým tlačítkem je pro tento typ aplikace stále nejlepší, minimálně by mělo být možno hýbat okýnkem nad dalšími okny. Další možností je samzřejmě rozdělit aplikaci pomocí splitterů/divů do několika oblastí a do každé z nich kreslit něco jiného (master/detail view), tohoto stavu lze ale dosáhnout i vhodným seskupením oken v MDI aplikaci takže MDI je pořád lepší. Z tohoto hlediska se mi velmi líbí qooxdoo či podobné frameworky (kdyby se jenom ExtJS neprodávalo po 5 licencích...) které napodobují klasické desktopové rozhraní v prohlížeči. Pro tablet si dovedu představit návhr separátního rozhraní v něčem jiném, podle mě je třeba UI přizpůsobit cílovému zařízení a nespoléhat na nějaké kouzla s css.

Obávám se ale, že je legitimní i názor že takovéto řešení že již není moderní a že dneska už takhle aplikace zkrátka nevypadají, takové rozhraní navíc ani není "responzivní" a tabletu se nepřizpůsobí a udržovat oddělené rozhraní pro tablet a desktop je nevhodné protože celou aplikaci by měl být schopen co se programování týče udržovat jen jeden člověk.

Je pravda že dneska aplikace mají vypadat tak jako jakýsi ten "google material design" a nebo ty na iPadu, že všechny akce by mělo být možno vykonat bez použití kontextového menu ale pouze jedním klepnutím, nejlépe na nějakou "dlaždici" či "čtverec". Trojrozměrný zakulacený vzhled poměrně malých prvků se stíny už designově nepůsobí dobře a rozhraní by mělo být jednoduché i za cenu že se uživatel pro vykonání nějaké akce bude muset proklikat přes více obrazovek. Takový design se dovede přizpůsobit i tabletu. Typickým zástupcem frameworku toto splňující je OpenUI5, zdá se to vhodné pro tablety a nejspíše i pro typické business aplikace typu ERP systém, docházkové systémy atp.. O dostatečnosti něčeho takového pro systémy typu SCADA ale pochybuji. Bude to fungovat, ale desktopové rozhraní mi stále příjde lepší.

Jaký je váš názor, měl by být zahozen klasický okýnkový design a zcela nahrazen tím který se ujal na tabletech, a to i na desktopu? Jak byste rozhraní pro takovou aplikaci navrhli vy?

Zkoušel jsem i experimentovat s Bootsrapem, ale to je fakt věc na webové stránky, je asi hloupost aby okna aplikace byla na různých místech obrovské dlouhé stránky a na ně se odkazovalo pomocí navbaru na horní straně stránky, jak správně ohnout Bootstrap pro aby single page aplikaci která nesmí scrollovat netuším...


v

Re:Jaké navrhnout uživatelské rozhraní pro webovou aplikaci?
« Odpověď #1 kdy: 20. 01. 2016, 22:04:01 »
nedávno jsem řešil problém gui aplikace v haskellu a dospěl k závěru, že webový prohlížeč je jedinná pohodlná možnost, takže si rád přečtu reakce :)
k samotnému dotazu - moc design neřešit a přizpůsobit vždy danému nasazení a většinou bude mít každý operátor víc monitorů
a jestli chcete aby se to líbilo zákazníkovi (zákazník != uživatel), tak 3D obrázky

Michal Acler

Re:Jaké navrhnout uživatelské rozhraní pro webovou aplikaci?
« Odpověď #2 kdy: 21. 01. 2016, 09:53:54 »
Na Tvou otázku neexistuje jednoznačná odpověď, protože "to záleží...". Vůbec si ve svém příspěvku nezmínil to nejdůležitější – kontext. Kdo má aplikaci používat? K čemu má primárně sloužit? Jak se má aplikace používat v rámci nějakého existujícího workflow? Má aplikace nahradit nějaké existující řešení? Jaká je konkurence? Jaký je "industry-standards"? Jaké jsou byznysové požadavky na aplikaci (kromě "moderního designu":)? A tak dále a tak dále.

Těžko se něco radí bez nějaké detailnější analýzy a pokud někdo dá nějaký obecný názor typu "má to být tak", bude ti to k ničemu.

Osobně nenavrhuju nic bez tvrdých dat a dalších insightů o byznysu, uživatelích a technologických omezeních. Doba, kdy se věci dělaly na základě dojmů nebo pocitů je díkybohu už pryč. (Nebo mám osvícené klienty:).