Category Archives: UI

jQuery Context Menu Plugin and Capturing Right-Click

I was thrilled to find Cory LaViska’s jQuery Context Menu Plugin a few months ago. In very little time, I was able to integrate the context menu with the jQuery Treeview.  I quickly had a really pretty user interface which took full advantage of limitedimage real estate.  And guess what.  As promised, the plugin worked in Chrome, Safari 3, IE 6/7/8, Firefox 2/3 and Opera 9.5.  Everything was perfect and I shipped to the Integration Environment.

One thing kept bugging though – right clicks aren’t the standard in a web environment. Sure, when one hovers over the treeview node, the mouse changed from an arrow to a pointer, but without help text most users will certainly left-click rather than right.

As I was already doubting the design decision, we did some Mac testing.  The context menu worked in Firefox but not Safari.  Damn.  That’s when I started digging into the Madness of Javascript Mouse Events.  Don’t tell, but it’s complicated.  About as close as one can get to capture the right-click mouse event on all major browsers on Windows and Mac is this:

    if (event.which == null)
       /* IE case */
       button= (event.button < 2) ? "LEFT" :
                 ((event.button == 4) ? "MIDDLE" : "RIGHT");
    else
       /* All others */
       button= (event.which < 2) ? "LEFT" :
                 ((event.which == 2) ? "MIDDLE" : "RIGHT");

Yikes.  The content menu code was simply checking if event.button == 2.  No problem.  Cory offers a jQuery Right Click Plugin which I’m sure works for windows but probably not the Mac either.  (Please note I haven’t verified this.)

Anyway, I decided to address my UI design concern and the Safari Mac issue in one swoop.  I decided to make the context menu respond to any mouse click event.  This didn’t take much – especially after seeing how Bill Beckelman updated the library to recognize the left click.

First, I added an AnyClick option to the library defaults:

  1. // Any click may trigger the dropdown and that's okay
  2. // See Javascript Madness: Mouse Events – http: //unixpapa.com/js/mouse.html
  3. if (o.anyClick == undefined) o.anyClick = false;

And then I trigger the context menu dropdown based on the following conditional:

if (evt.button == 2 || o.anyClick) {

Nothing tricky about that, right?  Finally, I updated my menu setup to include the AnyClick value, if true:

  1. $('.member').contextMenu({ menu: 'memberContextMenu', anyClick: true },
  2.             function (action, el, pos) {
  3.                 …

Now the context menu works in “all” environments if you left, right or even middle click. 

*Opera 9.5 has an option to allow scripts to detect right-clicks, but it is disabled by default. Furthermore, Opera still doesn’t allow JavaScript to disable the browser’s default context menu which causes a usability conflict.

Screen Design with Balsamiq Mockups

I was just speaking with a coworker about the tool I used to mockup screens in a recent requirements document.  If you aren’t familiar with Balsamiq Mockups, you are missing out.  Maybe you are responsible for application UI design or you simply like to sketch out your screens before you develop them?  If so, take a minute out of your day and give Balsamiq Mockups a try

Balsamiq mockups sped up my document writing time. It also increased the overall document quality and understandability when it came to sharing ideas with my customer.  Of course, the fact that working with Balsamiq Mockups is just plain fun doesn’t hurt my opinion of the tool…

The biggest plus is the fact the mockup data – even the data which is generated using the online trial – is yours and it’s in an open, portable and human readable format.  In other words, it’s super easy to duplicate, edit and share mockups.

If you want to learn more about Balsamiq Mockups, check out the product page.  Otherwise, just give it a try.  I promise it will be fun (and maybe even productive.)

Pandora Radio and User Interaction

I’m a fan of Pandora Radio.  I really love the product and I complete dig the simplicity and slickness of their Adobe Flash GUI…with one exception.  I have an issue with the play/pause control.  image

Pandora has chosen to recognize the current state of a song (playing, paused) by highlighting the associated button.  The image to the right, for example, shows the display when a song is playing.  Makes sense, eh?  Well, yes, this strategy makes complete sense until you consider how users are going to interact with the application. 

Quick.  Let’s list every possible action a user may take while a song is playing.  Pause the song, forward to the next song or adjust the volume.  That’s it.  What action will the user absolutely not take?  The user won’t play a song which is already playing.  Never.  It just doesn’t make sense.  However, since the buttons serve a multiple purpose (display state and trigger actions), the user is presented with a prominent, highlighted, active play button when they wish to pause a song.  Even worse, the pause button appears to be disabled.  If the UI could speak, it would be screaming at the user, “The song is playing?  Clicking the play button is your only option!”

I’m of the opinion that Pandora’s choice of button highlighting and “multi-purposeness” confuses things.  Is it just me or is this simple interface too simple?  Consider user interaction.

LinkButton Image

I am not a CSS expert, but the following technique can be used to easily apply an image next to virtually any link. 

First you need to define your CSS class which sets the background to a referenced image. 

.icon-cancel {
    background: url(../images/icons/cancel.gif) no-repeat left top;
    display:inline;
    padding-left:18px;
    margin-left: 10px;
    padding-right:10px;
}

Once defined, assign the class to your hyperlink.

<a href="#" class="icon-cancel">Cancel</a>
 

You may need to play with padding and margin, but you will end up with something similar to the following result:

image
 

I used this technique to pretty up a very plain GridView display by applying classes to my edit, update and cancel linkbuttons today.  All it took was the creation of a few more CSS classes and linkbutton class tag updates.  image

 
 
 
 
 
 
 
 
 
 
<asp:TemplateField ShowHeader="False">
    <EditItemTemplate>
        <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True"
            CommandName="Update" class="icon-save" Text="Update"></asp:LinkButton>
        <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False"
            CommandName="Cancel" class="icon-cancel" Text="Cancel"></asp:LinkButton>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"
            CommandName="Edit" class="icon-edit" Text="Edit"></asp:LinkButton>
    </ItemTemplate>
</asp:TemplateField>
 

Image Maps – When Not To Use CSS

I don’t remember anyone asking my opinion on this, but apparently over the last few years, image maps became out of favor.  I haven’t had to do anything remotely close to image maps for years now, but I still would have liked to be consulted. As I understand it, the cool kids are now using CSS image maps.  Though I’m a little insulted and bitter, I don’t want anyone to scoff when viewing my source so today I attempted to conform to the masses.  New and Improved?

I did this in spite of the small hurdle I encountered.  It appears that CSS image maps only provide support for rectangular areas where traditional image  maps support polygons.  Considering the fact that my little brother asked for help creating a map for an image with diagonal text, the polygon support would be nice.  Oh well.

I opted to go with the “new way” even though it didn’t make a lot of sense.  In the end, I needed to define twice as many areas and write a heck of a lot more code which produced a less-than-Old School Styleperfect CSS image map.  In this case, the old-school method would have been better, but at least I learned something (perhaps a lesson.)

Here’s to the good ol’ days and the ol’ school image map and hoping I never have to create a map again… 

 If you are interested in CSS image maps (You might as well be.  They work most of the time, I suppose), here’s one of the best examples I could find.

IE7 Support For Alpha Transparency In PNG Files

I have preferred PNG over GIF and JPEG for sometime now.  It isn’t that I’m an expert on image types, but I know that PNG files are generally smaller in size than GIF and they have consistently rendered nicely for me in Firefox and IE, so I stick with them.  

With this said, my faith in PNG had been shaken since working with Windows Live Writer.  If you have ever tried to insert an image into a post using Windows Live Writer you know that PNG is not included in their default  filter.  At first, I just got really frustrated because it took an extra click to get my job done.  Under my breath I’d curse the Windows Live Writer development team and say, “I don’t care if it is a beta release or not, somebody seriously messed up here.  How could a legitimate web-related product not automatically include PNG in their image list? ”  After a dozen or so posts, however, I started to doubt myself.  And I started doubting PNG.  After all I’m not a graphic designer (nor a web designer for that matter.)  Maybe I’m simply oblivious to the very good reason why Windows Live Writer is causing me such heartache.

Tonight I went looking for answers and I now believe my frustration has merit.  I didn’t realize it, but, Internet Explorer (like Windows Live Writer) has never fully-supported PNG and this has caused quite a lot of commotion amongst the web design community for some time now.  As I understand it, there are three arguments included in the petition for Proper PNG Support in Internet Explorer for Windows:

1. PNG is Superior to the GIF
When the same image is saved in both PNG and GIF formats, in an editor with full and proper support for both formats, the PNG image is typically a smaller file size, is free from royalties, patents, and copyright restrictions that hinder the GIF format, and can use more than 256 colors – up to 48-bit color.

2. PNG is a World Wide Web Consortium (W3C) Recommendation

Microsoft has repeatedly stated their renewed commitment to web standards, so implementing full PNG support would be the next logical step in fulfilling this promise, especially since it was supposed to be implemented over 10 years ago.

3. PNG Supports Alpha Transparency
Anybody who has designed images for use online knows the woes of trying to make that image appear smooth on any background. Some designers create different images to be used on different background colors, other designers simply leave the edges jagged, and still others just give their images a solid background. It’s a bad way to go, but it’s the only choice right now. Using PNG images with alpha transparency would eliminate all of these problems, and make the work of web designers a lot easier. 

To further explain the difference between PNG Alpha transparency and GIF transparency, a GIF image pixel is 100% transparent or 0% transparent. There is no middle ground which tends to lead to grainy-looking graphics in some cases.  Alpha transparency, on the other hand, allows for pixel transparency to range from 0% to 100%.  This allows one to blend images together much easier and create a more seamless look.

There’s some really great information on this subject available here and  here   Now that I know more about its history, the added PNG support with IE7 is worth mentioning.  Of course, I’m hopeful that the Windows Live Writer team will be influenced as well and I’m a just few clicks away from having my favorite image type included in the default filter with WLW’s next release.

Lorem Ipsum is Latin for Dummy Text

Lorem Ipsum is the defacto standard text we use on our web page mockups. Most often it is used as a placeholder until finalized content is available. However, there are believed to be other benefits. It has been thought that “real” text tends to draw focus away from the overall presentation. With this in mind, publishers use lorem ipsum to put the emphasis back on design. Additionally, lorem ipsum represents the standard distribution of English letters. This provides for a realistic look and further helps keep attention on the page as a whole.

This text is used freely and often but where does it come from? According to lipsum.com, the text comes from “The Extremes of Good and Evil” by Cicero. Written in 45BC, the book is a treatise on the theory of ethics and was very popular during the Renaissance.

Wikipedia tells us that lorem ipsum text was standardized in the 1500s.

Today’s Standard

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Cicero’s Original Text

…neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

H. Rackham translated the text in 1914. What does it mean?

Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

Umm, what? It’s still Greek, I mean Latin, to me…

Selling Beer in a Champaign Bottle

In a previous post, I discussed that 9Rules was reviewing the first round of potential new member websites starting yesterday, October 25. I took a look at what 9Rules was looking for in a site and I shared that they claim to put content ahead of design. In the article, I said, “I appreciated what the 9Rules team had to say [and] it was reassuring.”

But why was it “reassuring?” I chose this word quite intentionally since, though I wish it were the case, I don’t whole-heartedly buy it. In my option, the idea that look and feel plays second fiddle to content goes against what I believe I see in software production/marketing .[ 1 ]

You see, I don’t think large-audience software products (even community-based websites) become “top-sellers” primarily on merit. They don’t necessarily meet a need or provide a valuable service. I think “packaging” and “bells and whistles” play a much bigger role than we’d like to admit. If 9Rules, for example, didn’t have an attractive UI, I doubt there would be so much interest in becoming member.

The bottom line is I think you can sell anything if it has nice enough wrapping.

It’s true, isn’t it? When choosing between two products, we choose the one with the prettiest logo and the best marketing campaign. And it’s not just in software — it happens in grocery stores, car dealerships, everywhere.

What does this mean for software development? Make your stuff look pretty. And I’m talking about everything from cleaning up your code (code formatting, variable names, understandable and ample comments, etc) to making your prototypes presentable by using simple CSS, labels and help text. Try it out. Make your next demo look good and I bet you will get more praise for visual components rather functional ones. On a side note, beware of making prototypes too polished since the higher-ups may push to get the app promoted to the production environment a little too quickly, if you know what I mean.

Now, this is merely a rant. [ 1 ] There should be some opposition to my argument. Actually, I’m positive there are numerous big holes in my theory. For your convenience, here are some:

  1. One may argue that being first to market is key. This holds a lot of weight and it’s probably a post for another time which may have the title, “Using Other People’s Time and Money to Produce Solid Software.”
  2. One could say that good marketing and pretty “packaging” might land initial customers, but only a quality product will keep its user base. Maybe so, but check out # 1. Customers have a difficult time converting once they’ve already invested time and money into a product/service. My bet is initial customers will stay around at least until a superior product — with an inexpensive and easy transition plan — comes around.
  3. Well, doesn’t price matter? Um, yes. But put two similarly-priced products side-by-side and my claim holds true. The more appealing product will get picked off the shelf every time.
  4. Developers use tools which help them get their job done. They don’t care about packing and presentation. Developers aren’t typical consumers. Most of the time, they see right past the presentation and focus on content and/or functionality. Developers are the clear exception. If they weren’t, we wouldn’t touch some of the best technical tools/blogs with a ten foot pole.
  5. Google Search isn’t fancy. It has the most bland page in the world. Based on your logic, it should be a major flop. Think again. Google is a marketing machine. And the simple search page with nothing but a few links and their rotating logo is UID genius at its best.

With all this said, I wish what 9Rules had to say was true. Maybe someday content will reign, but for now, please pay close attention to presentation. In my twisted, somewhat cynical opinion, it still rules.


[ 1 ] This is not to be confused with what is actually happening. This is merely a rant and most likely just my skewed perception of reality.