Yahoo! User Interface Blog (YUIBlog)

Alternative Skins for YUI 3.1.0 Slider

We decided to take the YUI 3 Slider widget skins up a visual notch for YUI 3.1.0. These were our goals:

1. Improve the overall visual tastiness and 3-D appearance
2. Offer a wider range of thumb and rail skins
3. Provide two sets skins to serve dark as well as light page backgrounds
4. Provide a complete set of thumbs and rails for vertical as well as horizontal use
5. Make it easier to mix and match thumbs with different rail styles
6. Provide Photoshop assets to aid developers in modifying slider images to match any background color

Compare the YUI 2 slider skins with the YUI 3 ones below. The new set has more variety and should serve a broad spectrum of pages and styles.

YUI 2 Slider Skins:

YUI 3 Slider Skins:

We didn’t restrict the thumbs to rectangles and 45 degree angles. This posed some challenges with anti-aliasing. The YUI 2 thumbs have shadows incorporated into the thumb image, so they are a solid color gray. We’ve improved this by making a shadow object that’s separate from the thumb image. The shadow has opacity: 0.15. This means it looks natural as the shadow falls on the rail and the tick marks.

We will be providing original photoshop files containing each of the rail and thumb images. This will provide developers the source from which to easily customize the images so that they look their best when placed on whatever color background your site has.

YUI 3’s widget foundation reached GA status last week with the release of YUI 3.1.0. We don’t yet have a full slate of native YUI 3 widgets, and we haven’t yet defined a set of global skins. However, the work we did on visual assets for the beta Slider Component should make it more useful in the short term, and we’ll carry all of these visual options on as alternative themes or examples once YUI 3’s baseline themes are in place.

Have a look at these working code examples of the new sliders. Checkout the behind the scenes detailed workings of the skin images and CSS.

We hope these new sliders will be a nice visual addition to your bag of tricks.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Three new navigation design patterns

Over the past few months I conducted an audit of the patterns in Yahoo!’s internal design pattern library, with an eye toward publishing as many of them as possible in the open library at YDN. Why? Well, for one thing, to get more eyeballs on them, to gather more feedback and keep improving the patterns. Also, since very few patterns in the library contain Yahoo!-specific information, and an alternative process is now in place for vetting requirements specific to the Yahoo! network and brand components, the design pattern collection can now more easily focus on (relatively) universal design principles for web implementations.

I completed the audit before the end of last year and expect to release new patterns in batches over the next few months. Some patterns will be mature and provide a solid foundation for site design. A few will be published as beta patterns which may undergo significant changes in subsequent updates based on feedback received. Regardless of their status, we hope you’ll get involved and review and provide feedback on the patterns provided.

The first batch of patterns to come out from the audit relates to navigation bars. There are three patterns so far in this grouping: Top Navigation, Left Navigation, and Progress Bar. One legitimate question is whether top and left nav bars are still the best or most current way to navigate a site and find content? We still find many examples of them across the web and in use at Yahoo! so for now I’ll say yes, but it’s worth thinking about.

Wherever possible I try to link patterns back to the YUI Library and, where appropriate, to other code and implementation solutions. YUI has great support for navbars and menu examples. Probably the best place to start is the menu widget.

One interesting nomenclature issue we studied was the distinction between a stepwise progress indicator (which is what the pattern is about) and a continuous progress bar (for which there’s a great YUI example). These two things are often referred to with similar names, but perform different functions. Suggestions for more appropriate terminology are welcome.

Please check out these new patterns and let us know what you think!

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

iPhone Design Stencils in the Pattern Library

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Results of the Accordion Pattern survey

A few months back we shared our current thinking on the “accordion” navigation component, and asked the community of web developers and designers who read this blog to take a survey to help us determine defaults, current practices, and other guidelines to incorporate into an Accordion pattern and provide input into an Accordion YUI component.

I’ve had some time now to review and study the results and I wanted to share them with the community as we write up a “beta” version of the pattern and get ready to share it, so without further adieu, here are the results (note that this survey should not be considered strictly scientific).

Who Responded

Respondents identified themselves the following ways:

• Designer 21.4%
• Developer 32.1%
• Hybrid (Both designer and developer) 42.3%
• None of the Above 4.2%

Terminology Distinctions

Overwhelming majorities across all respondents agreed that

• Accordion and Accordion Menu mean the same thing (73%)
• Accordions and Tree Controls are two different things (89%)

Many commenters described the difference between accordions and trees along these lines: “Tree Control generally implies a depth of hierarchy that is not generally present with an accordion.”

A smaller majority said that Accordion and Collapsible Panels refer to the same thing (60%).

These majorities were consistent across roles.

Presentation of Accordions

A solid majority (68%), said that accordions can be laid out horizontally as well as vertically (and in fact the pattern is well attested on the web). People suggested that the labels on a horizontal accordion should be written vertically and/or rotated.

An even larger majority (72%) said that accordions can have only two levels (this aligns with the distinction between accordions and trees):

A slight majority (53%) said that accordions may be nested within other accordions. The written comments suggested that the wording of the question led some to answer that it’s certainly possible but not necessarily desirable, making suggestions such as, “If you adequately gutter them, this would be possible, but generally a terrible idea – kind of like using too many tabs and having them wrap into multiple rows.”

This was one of the questions where self-described designers and developers took opposing sides. 57% of Developers and Hybrids agreed that accordions may be nested, whereas 64% of Designers said they may not be. (None of the Aboves split 50/50!)

If I had to guess, I’d say that developers (and hybrids), more intimately connected with the how than the why may have been expressing more of a “you could do it…” perspective, whereas designers may have been expressing more of a “…but you shouldn’t” point of view.

How Accordions Should Behave

A small majority (54%) believes that accordions should allow for more than one panel to be open at a time. Both behaviors can be found online, so our impression is that this behavior may depend more on the constraints of the design space and the purpose of the accordion than on a blanket rule one way or the other.

This question also split along identity lines, but in an ambiguous way. Hybrids preferred the one panel-at-a-time rule by a tiny majority, while Designers and Developers and None of the Aboves agreed that multiple panels are okay by slightly larger majorities.

A much larger majority (73%) believes that an accordion can have a completely closed state (that is, that it’s not necessary that there always be one panel open). The only outlier is that the None of the Aboves broke 60% for the position that there must always be one panel open.

Several commenters suggested that it is a good practice to have one panel open by default, and for that panel to be either the first one, the one most recently used.

Another large majority (76%) believes an accordion’s overall size can change as needed, rather than being constrained to a consistent size. (Of course, there are contexts, such as the screen of a mobile device, in which it may be a valid choice or even a design constraint that an accordion maintain a consistent size.)

A very slight majority (51%) suggested that accordions should open on click (as opposed to on hover) and a nearly as large minority (45%) said that it depends. Interestingly, fewer than 4% were willing to state the accordions should open on hover as a rule.

Written comments on this question offered plenty of good food for thought, such as:

Opening a panel should require explicit action. If an accordion has multiple panels, opening on hover could be a jarring experience. Rather, use a tooltip to convey summary details of what is in the panel, and have the user explicitly “click” to open that panel.

Depends on the configuration of each accordion.

I put these examples together [multiple, rollover], so the developer can actually use the “best fit” for each use case.

Also, there should be the option to use rollover with different rules: (one most be open) or (elements should be opened on mouseover only).

For advanced usages, an accordion should open on hover during drag and drop operations. In any other circumstance, you can’t trust that the hover is intentional.

Accessibility

Finally, we asked an open-ended question fishing for any known accessibility issues with accordions and got a lot of great answers. (For our example issue, most people agreed that making the entire label clickable and not just a small icon is important.)

Here is a sampling of other insight about accessibility with accordions:

I think it’s safe to assume that an Accordion interaction is an advanced interaction. Lots of accessibility problems can arise.

1. Content is hidden behind panels so people may not find it.
2. Depending on the size of the clickable area or the trigger to open/close the panels there could be issues with the manual dexterity needed.

Accordions should open all panels if javascript is unavailable (though that may produce a “flicker” for those with javascript).

It depends on whether content in the hidden panels is present in the DOM or is retrieved upon opening the panel. If it is being retrieved, focus needs to be placed on the newly opened panel.

Well, I really believe the title should be clickable, specially if the content of the element will be loaded using AJAX (just like a tabview approach), but the reality is that sometimes the developer (should have)/(want) the control to customize that behavior. Here is the list of examples that I created for an accordion widget implementation based on YUI 2.x, it’s probably one of the most used components from the bubbling YUI extension.

We’ve had a case where the ‘label’ of the accordion was a link to a full blog post, and so could not be accordion-clickable. In that case, we wrote an icon into the source with js to do the job. Provided the icon is sufficiently large and/or comes with an accesskey, I don’t see a major difficulty…

Accordion controls server the purpose of fitting lots of content into less space. Since this is a visual concern, it would be fine for a screen reader to simply read all of the content and ignore the fact that it is displayed as an accordion visually. It is sufficient for an icon to be clickable to expand a panel. There could be a configuration option to allow the entire label to expand a panel, or it can be left up to the implementing developer to attach a listener to the label that calls a public “open” or “expand” function to add that functionality.

Just think of an accordion as a tabbed view. The entire panel label area should be clickable, but if it contains other controls (e.g. a “dismiss” or “close” button) I suggest only the label (text) be clickable, or at least the clikable area only expand up to the interactive controls (i.e. for a caption containing a button, the area above, below and “after” the button should be clickable).

Releasing the Draft Pattern

One commenter questioned the artificial constraints of the survey (a fair cop, if you ask me):

I didn’t like this survey. The questions were not flexible enough. As a designer/developer, I believe all interface elements need to be tailored to particular site or web application. Asking black and white questions does not leave room for the obvious differences between projects. Some projects need a hard and fast rule, while the same rule might be totally inappropriate for another application. For the most part, I could of answered every question with a “it depends” result.

Rest assured that the pattern will only gently recommend and the YUI code will be flexible and powerful. The survey wasn’t designed to limit people’s choices but rather to gather opinions and preferences, so even feedback about not having hard-and-fast rules is useful.

We’ve published a beta version of the Accordion pattern in the Yahoo! Design Pattern Library. If you’d like to give further feedback on the pattern, in a free-form manner, please drop by or visit the related forum discussion.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

John Peloquin’s Multi-layer Calendar

YUI contributor (and author of the Interval Selection Calendar example) John Peloquin of W. Hardy Interactive has released another excellent option for Calendar implementers: a layered navigation path for selecting years and months. The layered approach provides an alternative to the built-in navigator interface that ships with Calendar.

John describes the inspiration and thought process behind this implementation on his blog, where you’ll also find API documentation and source code.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Survey: When is an Accordion not an Accordion?

I’m looking for feedback from people who have designed or built an interface using an “accordion” module (or are considering doing so). You see, I’ve been working on a design pattern for accordion modules, and I’d like to throw out a handful of open questions to the community via this brief survey. I’ll be listening elsewhere as well, on twitter (@mediajunkie) and on mailing lists where web designers and developers hang out.

(I realize this is not a scientific survey. I’m just interested in engaging the wider community in a discussion instead of trying to impose my view or Yahoo!’s view on the community as authoritative.)

Everywhere I go lately, it seems that interaction designers and web developers are talking about accordion widgets and debating about what makes an accordion an accordion. Not everyone working in this field has heard the term (some may simply refer to “stacked panels” or “collapsible panels”) but most get the gist fairly easily. Ironically, none of the UI elements described as accordions share the actual behavior of a real-world accordion (the musical instrument): namely, that stretching an accordion opens all the folds evenly.

Accordions have been an on-and-off topic of discussion on the main IxDA mailing list; we discussed them in our Pattern Library workshop in Vancouver earlier this month, and there’s been an ongoing discussion about accordions on our internal designer mailing list here at Yahoo!.

So I sat down with some folks from the YUI team (and Marco, the maker of an experimental YUI accordion widget) a little while ago to sort through a draft of an accordion pattern that might help inform the development of an official YUI component.

Broadly speaking, most people agree on what we’re talking about when we talk about an accordion interface element. Everyone agrees that accordions are used to compress content into a limited space and that they consist of panels that can collapse or expand. Beyond this, there are a number of subtle nuances that not everyone agrees on.

One trend I’ve noticed is that front-end developers tend be agnostic about how the accordion should work, viewing it as really just a variant on a tree widget. Designers tend to be more prescriptive, saying that to be an accordion it must behave in thus and such a way (but not all designers agree on what these rules are).

In the end, the YUI folks will produce code that can be made to do just about anything. We aren’t going to try to impose our own taste or preferences in design through the functionality of the code itself. However, we will use the associated pattern to make suggestions and recommendations drawn from the experience of the entire design community, and we will probably lobby for default behaviors that match what most people expect.

So, if you’ve got a few minutes and an opinion, please visit the survey and let me know what you think!

I’ll close the survey on April 30.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

YUI Turns Three!

The YUI Library turned three years old this month and we’d like to invite you — our community of developers and implementers — to come out and celebrate! To celebrate our third birthday (and our 2.7.0 release), we’ll be hosting a recession-chic happy hour at the Blue Chalk Cafe in downtown Palo Alto, Thursday, February 26 from 6:00 to 8:00 pm. Nothing too fancy, but we’ll have fun goodies to give away and the first few rounds of drinks are on us (until the tab runs out). Details and signups are at Upcoming. Hope to see you there!

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!