Archive for the 'interface design' category.
Aug 6 | Posted by Christy Gurga | Add a Comment
Scott Jehl – @scottjehl – Rich UI Design: An Access-Oriented Approach
Download the Presentation from the Filament Group website
- Should test pages on screen readers
- Jaws is most popular, 40 min trial available
- NVDA is open-source
- All or nothing is a bad approach to accessibility
- Consider Universal Access in all stage of development
- Instead of asking for browser, run tests to determine browser’s capabilities. Available at filimentgroup
- If browser fails tests, serve “basic” version with “Safe CSS”
- No floats
- No dark text on light backgrounds
- No background images
- No positioning
- If browser passes test:
- Add class “enhanced” to html element
- Dynamically load CSS and JavaScript
- Cookie the results
- Provide link to low-bandwidth version (which will change cookie and remove enhanced class)
- If building widgets not included in jqueryui themeroller:
- Replicate behavior before you extend
- Proxy back to native control
- Follow conventions and user expectations
- Consider the mouse optional
- Use WAI-ARIA
Mar 11 | Posted by Christy Gurga | 3 comments
Lightbox, the technique of displaying large images in modal windows, has become a familiar UI element across the web. Since Lokesh Dhakar released it in 2006, many variations on Lightbox have popped up, each claiming their own strength: optimized code, easier implementation and/or slicker transitions. The current Lightbox 2 uses the Prototype and script.aculo.us JavaScript libraries, but I was looking for a jQuery version to fit my needs. Additionally, I was looking for something I could quickly implement out-of-the-box (so that I could better spend my time writing a blog post!). Here’s how my decision was made:
Thickbox
Thickbox, recommended to me by @kcdunstan is a very popular jQuery Lightbox and is even hosted on the jQuery website.
Pros: Can be used with images, inline content, iFrames (people still use iFrames?) and Ajax. Seems to have a good support community behind it; John Resig is known to respond to some support issues.
Why I didn’t choose it: The out-of-the-box look doesn’t have nice buttons and transitions.
jqModal
jqModal, recommended to me by @sstrudeau, is very much a bad-ass developer tool.
Pros: Very lightweight and customizable for the person who knows what he/she is doing. Can be used with images, inline content, iFrames and Ajax, and specializes in dialog alert boxes.
Why I didn’t choose it: Way too complex for the specific project I’m working on. I’d want to use this on a highly-branded site where I’ve crafted a unique interface element instead of the familiar Lightbox we know and love. Also, I couldn’t determine if there is an easy way to use this in “gallery” mode where I want Previous/Next buttons to go between a set of images.
prettyPhoto
I found prettyPhoto via a forum I found through a Google search. As the name states, it’s a really nice looking Lightbox.
Pros: Really nice out-of-the-box styling options, and supports single or gallery photos. Good Web 2.0 rounded corners, and I like the buttons.
Why I didn’t choose it: This was nearly my final choice, but I don’t like the tab-like box above the photo for the title. The project I’m using will have a longer description for the title, and I want it below the picture. I would definitely use this for a gallery where the photos either have no title or short titles, though.
jQuery lightBox plugin
The winner! jQuery lightBox plugin was the first one I researched, and then it was also recommended to me by @thetristan and @twenty3x. It’s the closest match I’ve seen to the official Lightbox 2.
Why I chose it: Familiar Lightbox styling, nice transitions, gallery support; it’s got what I want right out of the box.
In short, the requirements of your project will dictate which jQuery Lightbox you should use. jQuery lightBox plugin seems to behave the closest to Lightbox2, and jqModal is the most customizable and developer-centric. I would love to hear about any other jQuery Lightbox recommendations in the comments or respond to me on Twitter, @christyyyjoy.
EDIT: @pdenya sent along the Lightbox Clones Matrix which compares Lightboxes by library, size and features. Nice!
Apr 6 | Posted by Jeffrey Barke | Add a Comment
For we non-designers out there, ajaxload.info offers a very cool service: automated creation of animated loading .gifs in three easy steps. Simply choose your indicator type (35 options!), set the background and foreground color, and generate it. View the preview and then download your .gif, ready to use.
Very simple and useful. Thanks for designing this, Kath
Jeffrey Barke is senior developer and information architect at theMechanism, a maxi-media firm in New York City and London.
Jan 24 | Posted by Jeffrey Barke | 2 comments
From Ask E.T.:
The iPhone platform elegantly solves the design problem of small screens by greatly intensifying the information resolution of each displayed page. Small screens, as on traditional cell phones, show very little information per screen, which in turn leads to deep hierarchies of stacked-up thin information—too often leaving users with "Where am I?" puzzles. Better to have users looking over material adjacent in space rather than stacked in time.
To do so requires increasing the information resolution of the screen by the hardware (higher resolution screens) and by screen design (eliminating screen-hogging computer administrative debris, and distributing information adjacent in space).
This video shows some of the resolution-enhancing methods of the iPhone, along with a few places for improvements in resolution.
Read the rest of Tufte's thought's and view the video here.
Thanks for sending this to us, Aline!
