Share
Modal boxes zijn een van de meest effectieve 'bang for your buck'-ontwerpelementen die een webdesigner kan gebruiken. Vandaag gaan we definiëren dat een modale box is ... dan zullen we kijken naar de beste manieren om ze te gebruiken en een handvol van onze favoriete scripts voorstellen om ze in jouw eigen projecten te gebruiken.
Om de paar weken bekijken we enkele van onze favoriete lezers uit de geschiedenis van de site. Deze tutorial werd voor het eerst gepubliceerd in maart 2011.
Simpel gezegd, een modale box is een script-effect waarmee je een klein element over een website kunt leggen. Het belangrijkste voordeel van modal boxen is dat ze de noodzaak vermijden om conventionele vensterpop-ups of pagina-herlaadbeurten te gebruiken. Kort gezegd, modale dialoogvensters zijn een middel om snel informatie te tonen aan gebruikers op dezelfde pagina waar ze aan werken, waardoor de bruikbaarheid van uw site wordt verbeterd en onnodige herladen van pagina's wordt verminderd.
Het is dus een Lightbox, toch?? Nou, niet precies. Een lightbox is een type modale doos die is ontworpen om afbeeldingen weer te geven (en soms andere vormen van inhoud), maar het woord modale box verwijst naar een veel bredere reeks gebruikersinterfaceapparaten, die we zullen bespreken.
Modale boxen vinden hun oorsprong in interfacetoepassingen zoals Microsoft Windows, Mac OS en UNIX, maar de laatste tijd hebben ze zich verspreid in allerlei situaties - van websites tot mobiele applicaties.
Een standaard modaal vak kan Javascript gebruiken om een modaal "dialoogvenster" of een "wizard" te maken, wat neerkomt op formulieren waarbij gebruikers meestal worden gevraagd om informatie die relevant is voor wat ze doorbladeren. Als u bijvoorbeeld op Facebook bent, kan er een modaal dialoogvenster verschijnen om toestemming te vragen om een app te gebruiken. Of uw bankwebsite kan een modal-box starten om u te informeren wanneer uw sessie bijna verstrijkt.
Er zijn vijf situationele categorieën waar modale boxen vaak worden gebruikt:
Nu we weten wat een modale box is, laten we het verschil bespreken tussen een modale box en zijn neef, de modeless doos.
Voordat we verder gaan, laten we een mogelijk verwarrend stukje terminologie opruimen in de wereld van het ontwerpen van gebruikersinterfaces: het verschil tussen modaal en modeless (ook bekend als niet-modale) ontwerpelementen.
Modale dialoogvensters staan niet toe dat gebruikers met het bovenliggende venster werken als ze eenmaal zijn opgeroepen; Terwijl modeless dialoogvensters geven gebruikers toegang tot het bovenliggende venster, zelfs nadat ze zijn opgeroepen.
Een gebruiker moet het modale dialoogvenster binnen de applicatie sluiten om toegang te krijgen tot menu-opties of andere dialoogvensters; Maar het dialoogvenster zonder model kan open blijven terwijl de gebruiker blijft werken. Bij het grafische gebruikersinterfaceontwerp wordt het modale venster opgeroepen kind venster, en het is bedoeld om de gebruiker bewust te maken van noodsituaties.
Veelvoorkomende modelloze ontwerpelementen kunnen zijn:
Een goede analogie zou zijn om een modelloze doos te vergelijken met een goede vriend die altijd beschikbaar is om te helpen in een moeilijke situatie, maar niet veel onderhoud of veeleisend is ... waarbij een modale doos die vervelende vriend is die onmiddellijk je aandacht opeist en je laat alles vallen om ter plekke naar hen te luisteren.
Modale boxen moeten bij het opstarten alleen worden gebruikt in situaties waar ze echt nodig zijn.
Bijvoorbeeld: gebruikers informeren dat ze hun wachtwoord om beveiligingsredenen onmiddellijk moeten wijzigen, is belangrijk - gebruik in dit scenario een modale box. Gebruikers informeren dat u net een nieuw e-book hebt gelanceerd, is waarschijnlijk niet belangrijk genoeg om een modale box te rechtvaardigen - dus u zou dit waarschijnlijk op een andere creatieve manier op de pagina kunnen aankondigen.
Modeless boxes worden gebruikt als de gevraagde informatie niet verplicht is om door te gaan, dus het venster kan open blijven terwijl het werk wordt voortgezet. Een werkbalk is bijvoorbeeld een modelloos dialoogvenster,
en de items kunnen worden gebruikt om bepaalde functies van de toepassing te kiezen. Normaal gesproken zou een ideaal softwareontwerp zoveel mogelijk dit soort dialoogvensters oproepen. Ze verplichten de gebruiker er niet toe
specifieke werkingsmodus ... wat betekent dat ze in hun eigen tempo kunnen werken, in de volgorde die bij hen past.
Een modaal dialoogvenster stopt echter tijdelijk de interactie met de software, die het heeft geïnitieerd. Het programma kan aanvullende informatie vereisen of het kan van plan zijn om te bevestigen dat de gebruiker dit heeft gedaan
besloten om door te gaan met wat actie die gevaarlijk kan zijn.
Bruikbare experts menen dat modale dialogen geen goede ontwerpoplossingen zijn, omdat fouten waarschijnlijker zijn. Gebruikers hebben misschien de gewoonte ontwikkeld
ze te negeren wanneer onverwachte modale dialoogvensters verschijnen. Dus gevaarlijke acties worden eigenlijk niet voorkomen.
Hier is nog een potentieel probleem om op te letten: Modal boxes interfereren met de gewone workflow. Een modaal dialoogvenster onderbreekt de hoofdworkflow omdat het onderliggende bovenliggende venster is bevroren. Meestal kan het worden verplaatst of van grootte veranderen, maar het kan niet worden geminimaliseerd. Verder kan de gebruiker niet naar andere vensters verwijzen terwijl hij reageert op het dialoogvenster.
Er kunnen zich extra problemen voordoen: een modaal foutdialoogvenster kan onverwacht verschijnen tijdens het typen, waarbij de invoer wordt genegeerd; Bij gebruik in toepassingen die toetsenbordopdrachten gebruiken, kunnen modale vensters de toetsaanslagen verkeerd interpreteren. Dit staat bekend als focusstelen... modale vensters zijn ontworpen om de focus van een gebruiker te stelen ... maar overgebruik ervan kan frustrerend worden omdat het teveel wegversperringen binnen van een gebruiker gooit.
Het komt neer op: Begin altijd met een ontwerp door te proberen om modelloze vakken te gebruiken wanneer je maar kunt ... ze zijn niet intrigerend en staan een gebruiker toe om op zijn eigen manier te werken. Modal-boxen reserveren voor momenten waarop het absoluut noodzakelijk is om informatie te verzamelen of een gebruiker te waarschuwen voor iets dringends (en er zullen genoeg van deze tijden zijn!) Beschouw de modale doos als je geheime wapen ... je wilt het niet gebruiken totdat je je andere ontwerpopties hebt uitgeput, maar wanneer je het wel gebruikt, haal je snel uit een bind.
Modale vakken helpen de aandacht van de gebruiker te vestigen op cruciale informatie. Ik zal u enkele voorbeelden geven van gevallen waarin een modale box noodzakelijk is:
Praten over de ontwerpaspecten van modale boxen is geweldig ... maar zakendoen en daadwerkelijk gebruiken is helemaal een andere zaak. Ervan uitgaande dat je geen Javascript-goeroe bent die regels van aangepaste code helemaal opnieuw kan uithalen, moet je beginnen met een vooraf gebouwd scriptpakket en vanaf daar aanpassen. Het goede nieuws is dat er een heleboel gratis beschikbaar zijn - je hoeft alleen wat extra onderzoek te doen om te bepalen welke het beste bij je past. Hier zijn enkele van onze favorieten:
JQuery UI Dialog maakt deel uit van de hoofdbibliotheek van jQuery UI - die in wezen een bibliotheek van effecten en plug-ins is, gebouwd op jQuery. Het is aanpasbaar via css en kan in elk project zonder beperkingen worden geïmplementeerd. Het is waarschijnlijk het meest directe van alle modale kaderscripts in die zin dat je rechtstreeks met de jQuery-scriptbibliotheek werkt, niet via een derde partij. U kunt dit dialoogvenster gebruiken in vijf verschillende vormen: basisdialoog, modale dialoog, modale boodschap, modale bevestiging, modale vorm.
"prettyPhoto is een jQuery lightbox-kloon.Het ondersteunt niet alleen afbeeldingen, maar ook ondersteuning voor video's, flash, YouTube, iframes .Het is een volwaardige media lightbox.
Het is heel gemakkelijk in te stellen, maar toch erg flexibel als je het een beetje wilt aanpassen. Bovendien is het script compatibel met elke grote browser, zelfs IE6. "
ModalBox is een JavaScript-techniek voor het maken van moderne modale dialoogvensters (Web 2.0-stijl) of zelfs voor wizards (sequenties van dialoogvensters) zonder gebruik van conventionele pop-ups en herladen van pagina's. Het is geïnspireerd door modale dialoogvensters van Mac OS X. En ja, het kan ook handig zijn om grotere versies van afbeeldingen weer te geven.
Nyro is een van de meest uitgebreide van het stel en richt zich op het gemak van maatwerk en een breed scala aan inhoudstypen.
ModalBox is een JavaScript-techniek voor het maken van moderne modale dialoogvensters (Web 2.0-stijl) of zelfs voor wizards (sequenties van dialoogvensters) zonder gebruik van conventionele pop-ups en herladen van pagina's. Het is geïnspireerd door modale dialoogvensters van Mac OS X. En ja, het kan ook handig zijn om grotere versies van afbeeldingen weer te geven.
Dit is nog een lichtbox-aangedreven modaal. FancyBox is een hulpmiddel voor het weergeven van afbeeldingen, html-inhoud en multimedia in een "lightbox" in Mac-stijl die boven op de webpagina zweeft.
Facebox is een lichtgewicht lightbox in Facebook-stijl die afbeeldingen, div's of volledige externe pagina's (via Ajax) inline op de pagina en op verzoek kan weergeven. Het gebruikt de compacte jQuery-bibliotheek als engine, in tegenstelling tot Lightbox v2.0, die Prototype gebruikt.
Dit is eigenlijk een complete set van jQuery-schijfgereedschappen ... van een script waarmee u specifieke HTML-elementen kunt blootstellen aan een volledig formulier-maker.
Lightbox is een eenvoudig, onopvallend script dat wordt gebruikt om afbeeldingen op de huidige pagina samen te vatten. Het is een fluitje van een cent om te installeren en werkt op alle moderne browsers.
.
Verschillende browsers staan niet toe dat pop-upvensters modaal zijn, maar andere maken het mogelijk modale vensters te maken via verschillende methoden. Internet Explorer gebruikt window-showModalDialog () om a te openen
modaal venster. Zo'n venster wordt geopend wanneer Internet Explorer wordt uitgevoerd, terwijl andere browsers een JavaScript-foutmelding zullen weergeven. Mozilla-gebaseerde browsers zoals Firefox en Netscape 6 gebruiken een andere methode
om aan te geven dat het dialoogvenster vooraan moet blijven. Ze gebruiken de window.open met een extra attribuut voor modaal, hoewel het niet echt modaal is, maar laat het venster vooraan staan.
De realiteit is dat de meeste ontwerpers zich niet echt zorgen hoeven te maken over de fijne kneepjes van de browser-acceptatie totdat het tijd is om de codering te doen ... de meeste moderne browsers ondersteunen in feite wel modale boxen. Raadpleeg bij twijfel de documentatie voor het script dat u wilt gebruiken om te controleren of het werkt in de specifieke lijst met browsers waarvoor u het nodig heeft om voor te werken.
Oké, dat is het voor nu - voel je vrij om je eigen favoriete modale oplossingen in de comments te plaatsen!
Accentsconagua