Při součastné dostupnosti a podpoře vyspělých webových technologií (jako například jQuery, AJAX) si webový designér může pro strukturování obsahu dovolit používat množství interaktivních prvků, které pomáhají k lepšímu rozložení obsahu na webových stránkách. Jednou z možností jsou modální okna (ang. modal window).
Modální okno není v uživatelských rozhraních nic nového a každý je ve své podstatě zná z běžné práce na počítači s operačním systémem. Jedná se v podstatě o okna aplikací a dialogová okna, která používá každý operační systém s grafickým rozhraním. V souvislosti s obsahem webové stránky je to věc relativně nová. Modální okno má při tvorbě webu mnoho výhod. Nejdůležitější je, že modální okno snižuje počet stánek, které musí uživatel procházet, aby se dostal k požadované informaci. Tento faktor výrazně zlepšuje použitelnost webové prezentace.
Další neoddiskutovatelnou výhodou je, že modální okna snižují množství zobrazených informací na konkrétní webové stránce. Příkladem může být video na stránce. Pokud není přehráváno, zabírá velký prostor a nepřináší žádnou informační hodnotu. Pomocí technologií modálních oken můžeme vytvořit pouze malý odkazový náhled, který po kliknutí vyvolá modální okno a uživateli se zobrazí video v plné kvalitě bez nutnosti přechodu na novou stránku (tedy bez reloadu stránky).
Dalším příkladem mohou být vysvětlující modální okna. Kdy na webové stránce máme prvky, ke kterým bychom potřebovali podat další informaci. Tato informace může být delší, tím pádem nám nabourá informační čistotu webu a bude obtěžovat ty uživatele, kteří vysvětlení již nepotřebují. Zde je také využití modálního okna velmi užitečnou praxí.
Případová studie využití modálních oken u ZOO Dvůr Králové
Jelikož web pro ZOO - externí odkaz je velice komplikovaný a poskytuje velké množství informací, bylo využití modálních oken jednou z možností jak dosáhnout přehlednosti i při velkém množství funkcionalit a textů.
Vysvětlující modální okno na úvodní straně.
Uživatelským testováním jsme dospěli k tomu, že záložky k uživatelským scénářům jsou pro jistou skupinu uživatelů nepochopitelné. Proto jsme zde zvolili vysvětlující modální okno. Všimněte si, že v pravé části okna je tlačítko, které umožňuje okno zavřít. Možnost zavření modálního okna je nezbytnou vlastností.
Modální okno fotogalerie
Fotogalerie je řešena pomocí modálního okna, které je multifunkcionální. Jeho primární funkcionalita je zvětšení obrázku do plné velikost. Použité modální okno obsahuje dále náhledy dalších obrázků v dané galerii. Jednotlivé obrázky galerie lze procházet kolečkem myši nebo tlačítky ve spodní části okna.
Modální okno pro přehrávání videí z YouTube.
Jelikož ZOO produkuje i multimediální obsah, který pomocí našeho CMS SiteWizard odesílá na YouTube, byla potřeba jednotlivá videa umístit přehledně na stránkách. Jelikož klasický EMBED YouTube videa zabíral velký prostor. Přistoupili jsme také k přehrávání videa v modálním oknu.
Vyhledávání
Zvláštním případem modálního okna je full-textové vyhledávání. Nejedná se o modální okno v pravém slova smyslu, blíže má k drop-down menu. Není vyvolané kliknutím na odkaz, ale psaním do vstupního pole. Také neobsahuje tlačítko zavřít. Zavření výsledku vyhledávání je realizováno tím, že uživatel může kliknout kamkoliv do těla stránky a tím okno uzavře.
Inspirace modálních oken u jiných webů
www.apple.com/macbookair/features.html - externí odkaz
maps.google.com - externí odkaz
www.realmacsoftware.com - externí odkaz
www.versionsapp.com - externí odkaz
V některém z dalších příštích článku se k modálním oknům určitě vrátíme a zaměříme se na použitelnost a přístupnost modálních oken.
Datum: 03.09.2009 | Autor: Karel Michálek
