Clear Primary Actions in Drupal
2010 July 03
- Comments
- Topics
-
Clear primary actions can and should be applied across an application anytime there is a choice to be made.
Although we can't control our users' actions, we can certainly guide them visually, and as Smashing Magazine points out,
"[relieve] the user from having to think about which option to choose in order to complete their task."
Smashing Magazine does a great job of explaining the pattern:
What are primary and secondary actions? Primary actions lead to the completion of a form; for example, clicking "Save" or "Send." Secondary actions usually do not lead to a form's completion; these include clicking "Cancel." There are exceptions, though. Which are the primary and secondary actions when you see "Save," "Save and continue" and "Publish" buttons all in a row? When users have several options, highlighting primary actions and de-emphasizing secondary actions are good practice.
Drupal's administrative interface is completely lacking this treatment, but after noticing how its buttons are themed (and applying some CSS3 decoration), it's relatively easy to make something like this example below:
Continue reading Clear Primary Actions in Drupal
Drop-Down Menus: Don't Neglect Timing
2010 March 29
- Comments
- Topics
-
I was recently building a "mega menu" (a really big drop-down menu panel) for primary navigation, so I decided to re-read the Jakob Nielsen Alertbox regarding them. Apparently the mega menu is the only form of drop-down menu to perform well under user testing.
In the discussion of timing for the interaction, I was reminded of how only a few years ago it seemed that creating drop-down menus using only the CSS :hover pseudoclass was the trend, and how that pretty much violates all of the recommendations.
Continue reading Drop-Down Menus: Don't Neglect Timing
Sorting jQuery DOM Elements
2010 March 28
- Comments
- Topics
-
While updating the jQuery version referenced by a website I was working on, I found an interesting trick you can do with collections of DOM elements as of jQuery 1.3.2 (February 2009). Prior to this release, selecting a collection of DOM elements would return a plain old JavaScript object. Now, you get an array.
This may not jump out at you as exciting in and of itself, but for me the
ability to use array methods on these collections was really helpful. By writing a simple array sort method, I was able to grab one giant alphabetically ordered list of items from any number of smaller, categorized lists on my page, and then display that list in different ways on the fly.
Continue reading Sorting jQuery DOM Elements
Enhancing Your UI Before Page Load
2009 October 13
- Comments
- Topics
-
A common drawback of progressive enhancement is that the UI will often "flash" or "flicker" when first loading. This is because conventional wisdom of separation of concerns calls for waiting until the DOM is ready to set up the UI for a richer interaction (tabs, accordion, drilldown, the list goes on). While this makes sense academically, we're not always putting the user experience first. Trust me, users do notice these things, even when they occur in under a second.
Personally, the majority of what I do to prepare for an enhanced interaction is to hide and show elements and apply some styles. So, why wait for anything to load? What I really need is to simply check for JavaScript support; an aspect of the browser, not the content being loaded.
Assuming a general case where all that is needed is to A) know that JavaScript is supported and B) apply some enhanced CSS styles when A is true, we can do this as early as the <head /> portion of the page, and incur no flicker penalty.
Continue reading Enhancing Your UI Before Page Load
Spellcheck HTML Inline with GoogieSpell
2009 August 18
- Comments
- Topics
-
Orangoo Labs' GoogieSpell widget is a really clever way of spellchecking input fields or textareas on a Web form, completely inline (think Microsoft Word) and without that nasty popup window you usually see that loops through all of your typos serially. As a bonus, by default it makes a call to Google's spellchecking web service so you don't have to install or maintain your own dictionary (although you can easily extend it to do so). Also, did I mention it's FREE?
I recently worked on an online workflow for writing, and one of our primary goals was to curb the amount of spelling mistakes we were seeing from the authors. Our solution was to spellcheck their content in an elegant but mandatory way. Enter GoogieSpell.
But, nobody is satisfied with just plain text anymore, right? Much of this content happens to be HTML from a popular 3rd party rich text editor. This presented a more complicated problem than it sounds (or maybe it sounds just about as complicated as it is?) and I'm going to walk through my solution: making GoogieSpell play nicely with both HTML and plain text.
Continue reading Spellcheck HTML Inline with GoogieSpell
1 2 Next>