C|B sides

Comments

0

Topics

• JavaScript
• Mobile
• UI Patterns

I recently had the pleasure of seeing a true Web pioneer give a talk on mobile JavaScript. A Touching Look Into The Future Known As Today brings Peter-Paul Koch (@ppk, creator of quirksmode.org) to Brooklyn to give an updated talk about his experience in the trenches testing JavaScript touch event support on various mobile devices. I'll attempt to distill it down to some key points.

Mouse events and touch events are blended on mobile

The three interaction modes, in the order of the most to least we know about them:

1. Mouse
2. Keyboard
3. Touch

Event handling on the desktop is easy because the mouse and keyboard events rarely fire simultaneously. But with the advent of touch-screen devices, both touch and mouse events fire, a conscious decision to allow mobile users to browse the countless existing sites relying on mouse events for interaction.

If you want to make a distinction:

// desktop
element.onmousedown = dostuff;

// touch
element.ontouchstart = function() {
  dostuff();
  element.onmousedown = null;
};

Continue reading PPK in the BK on Mobile JavaScript

Comments

0

Topics

• UI Patterns

Toward the end of a recent post at The UI Observatory, there's a nice discussion about Undo/Redo in Pixelmator (an image editing app). Pixelmator actually messages you the type of action you've just undone or redone, front-and-center. This feature would be handy any time you find yourself creating or editing, as long as it's sufficiently out of the way when it needs to be. This could be especially useful on the web, where HTML editors generally hijack context from the browser and it's easy for the context of Undo/Redo to change with a few mouse clicks.

Continue reading Undo Notification with Context

Comments

0

Topics

• Mobile
• UI Patterns

Apple has finally fit a multitouch interface into the 6th generation iPod Nano. In order to cram that into the diminutive form factor, users give up a few features such as video recording, playback, and the orientation sensor. Dropping the sensor seems logical now; the device is so small that orientation loses its meaning, and with a 1:1 aspect ratio there's no potential for a better fit for the on-screen content. I love the new approach of actually rotating the screen with your fingers, in the event you actually need to (assuming that would be due to the way it's clipped to you). There's a great demo of multitouch on the Nano at Apple's website using the latest and greatest techniques in CSS animation (sorry, Chrome or Safari only).

This update got me thinking about the lost orientation sensor, and when it can frustrate more than delight. I purchased the last generation iPod Nano for my girlfriend. What I got back was an ethnographic study. Although she loved the build quality of the device and the fact it held all her music, it turned out to be less than ideal for her most common use — at the gym.

Continue reading Orientation Switch in "Nano"-Sized Devices

Comments

1

Topics

• Drupal
• UI Patterns

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

Comments

0

Topics

• Accessibility
• UI Patterns

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