Como muchos sabrán, una de mis fuentes de inspiración es la revista Smashing Magazine, y en este caso, publican un articulo que se que va a dar mucho que hablar en cierto tiempo, se trata del uso de ventanas emergentes para dar un Look mas moderno a nuestros desarrollos Web. Y con sorpresa veo que muchos de los componentes utilizados, ya fueron mezclados con SharePoint por algunos Bloggers, y que no es nada dificil sacar partido de estas funcionalidades en nuestras plataformas….
El Articulo Original de Smashing Magazine lo encuentran Aqui (Asi no me dicen que no dejo las fuentes…)
A que viene esto, voy a hacer un Resumen del Articulo que aplica a SharePoint, con los Recursos fundamentales del Articulo y los Links de Descarga…
When to Use Modal Windows
Modal windows are an excellent structural element, but they don’t work for every type of content or media. Here are few elements for which you should consider using modal windows.
Lightbox for Images/Videos
The most obvious use of modal windows is for the lightbox, which showcases images and video in a clean and usable fashion. By using a lightbox for images, users don’t have to load a new page just to view a single image or video. Modal windows also save space in the content layout by allowing you to show only the thumbnail of an image or video, which opens the modal window when clicked. By using a thumbnail instead of the entire element, you take up much less space and the layout looks more organized.
Furthermore, you would usually blur or fade out the background behind a modal window, putting the focus on the image or video itself, thus creating an excellent environment in which site visitors can view the media. For details on fading and blurring out the background of a modal window, see the styling practices outlined below.
When using a lightbox for an image gallery, be sure to link every image to the same lightbox, providing “Next” and “Previous” buttons to allow users to navigate the image set with ease. The user then does not have to close and re-open the modal window to view each image in the gallery.
Contact Forms
One often sees contact forms contained in modal windows. Modal windows work well for this purpose because you don’t have to create a full page for the function. In terms of usability, it is important for contact forms to be immediately available and easy to find. By using a floating window, contact forms are easily accessible on each and every page. Contact forms are generally small, so they will fit quite nicely in these windows.
Sign-Up/Log-In Forms
Instead of creating a separate page for users to log in to and sign up for your website, you can use a modal window, which is actually often used for this purpose. This approach makes the form available on each page for easier access. You can include a link to the log-in window in the header of the website.
Alerts/Notices
When you want to alert users of a critical function or an action taking place, the best way to do so is through a modal window. When a modal window opens on a page, the user cannot ignore it because it will appear directly in the middle of the screen, right where the user is looking. Furthermore, the rest of the content will be faded out and disabled, so the user can’t do anything else until they look at the window and click to close it. In the screenshot below, you can see a modal window being used to alert users to a download.
Please notice that you should not use modal window as an alternative pop-up-approach. Please make sure to alert your visitors only in case something cruical to the current browsing session has taken place. In many situations, a simple faded block in the layout would work better than a modal window.
Help Elements/Tips
Additional help elements and tips aren’t essential to the functionality and navigation of a website, so you don’t want them to take up space and get in the way of content. Not all users want to use them anyway. However, they need to be conveniently located for those who do want to use them, so it seems reasonable to show help elements and tips in modal windows. Users can easily open and close them, without them getting in the way of content and functionality.
Here below is a good example of a help element in a floating window. This window is much smaller than the other ones we’ve seen; but it contains similar functions. For example, a semi-transparent border for visual separation and an “exit” (close-) button in the top-right corner.
Search Boxes
This is a less common practice, but you will occasionally see modal windows containing search boxes. Advanced search functionality can take up quite a bit of room, so to prevent a large search box from taking space away from the content, you can put it in a floating window. You can see this in practice in the screenshot below.
Embedding PDFs
Sometimes you need to embed files on your website, such as a PDF of your résumé. Instead of providing a link that users can click on to download the PDF to their computer or embedding the PDF some other way, you can use a modal window for the same purpose. This way, the PDF can be easily viewed without disrupting the user’s experience of the website. By blurring the background, you also bring focus to the PDF, which improves usability.
Y lo mas importante, las Herramientas para lograr esto…
Scripts, Tools and Plug-Ins For Lightboxes and Modal Windows
When you start the process of integrating modal windows, you’ll probably want something to build off of. Here are 11 excellent jQuery scripts and plug-ins on which to base your modal windows. Each has its own unique features and functions, so check them all out.
Fancy Lightbox
This is one of the better lightbox jQuery plug-ins. It’s well styled and very functional. It has clean styling, labeling features and website integration, and it works with AJAX.
Lightbox 2
This is the original lightbox script, built only for images. It’s simply styled and supports image set viewing.
Facebook Image/Content Viewer
Here is an excellent script, based on Facebook’s floating window. This one supports images and content and is styled similar to Facebook’s well-known window.
Woork Mootools Lightbox
This excellent tutorial from Woork shows you how to create a simple lightbox script. The script includes image set functions and label features.
nyroModal jQuery Plug-In
This simple window plug-in supports all types of media and file scripts, including AJAX. It also has some great show/hide effects.
jQuery Alert Dialog
This jQuery plug-in is for alert and dialog boxes. It has numerous functions and works very nicely for sending messages to users.
LightWindow
Here is a comprehensive lightbox script with many features, such as PDF embedding, multiple image gallery support, SWF implementation and more.
Prototype Window Class
Another in-depth set of scripts with different functions, such as dialog boxes, log-in windows, AJAX content windows, image lightboxes and more.
ThickBox 3.1
One of the more popular lightbox tools, ThickBox. It works with images, inline content and AJAX.
prettyPhoto
A well-styled image lightbox that works nicely with image sets.
jQuery Expose
This is a little different than a modal window script. This one exposes selected HTML elements. When you click a specific element, the rest of the page fades out. This is an excellent alternative to the modal window: it still fades out the page to bring focus to an element.
Creo que estos Tips de diseño pueden ayudar a mas de uno a mejorar sus portales y a darle un look mas “futurista” :)
No hay comentarios.:
Publicar un comentario