Archive for the ‘Design’ Category

Jen Simmons: HTML5 APIs


04 Apr

Jen Simmons’ HTML5 APIs session was an interesting look into the back-end of HTML5, an area that I’m not as familiar with. Lots of new goodness about how we can make HTML not only create a basic layout but actually devise interactions, storage and flexibility.


Presenters: Jen Simmons (@jensimmons)
Hashtag: #html5apis


(more…)

CSS3 Attribute Selectors Query


10 Sep

The other day I was working on an internal UX Guidelines website and instituting one of the very things that I was advocating when I ran into a problem. Essentially, I was implementing the code to create a file type icon at the end of links so that all PDFs would show a PDF icon, all SWFs would have a Flash icon and all external links would have an external link icon, using the CSS3 attribute selectors. (more…)

REVIEW: Web Form Design – Filling in the Blanks


27 Jun

Web Form Design - Filling in the Blanks by Luke Wroblewski I just got done a great book on building usable forms – Luke Wroblewski’s “Web Form Design – Filling in the Blanks”. It was a really well-done, interesting book on a less than interesting topic (well, to most people) – in fact, it’s one of the best usability books I’ve read in terms of giving quick, easy-to-read, usable information. From my review on Goodreads.com:

“Good or bad, there aren’t many books that I can use for my job that I go through quickly. There’s just something about a limit to my absorption of information from these books that makes me take my time to get through them. However, that was not a problem with this book. Chock full of good information, Wroblewski manages to make it a quick, easy and yet informative read that only took me 2 days cover-to-cover.”

You can see more on Luke’s website, to get a feel for the book.

A Look Back…


07 May

I’m currently working on a project for a hemophilia product from a major pharmaceutical company. In the midst of working on it, there is a reference to another product that triggered a memory of a past project – one that I did when I was working for Waresoft. Back then, it was a project coming up with a combination of Flash, HTML and JavaScript tools for Humate-P, made by ZLB Behring.

In this project, I was tasked to do three things:

  1. Update a flash animation comparing Humate-P and other products
  2. Create a dosing calculator that allowed a user to put in their weight and the amount of Van Willebrand factor (VWF) they wanted in the bloodstream
  3. Create handy chart for the doctors to see a complete list of comparable weight and VWF levels

Well, since I was thinking about the old project, I went to see how it was looking – and it’s up and running on their site. It works pretty well, too. You can see the different aspects of it here:

Humate-P Densitometric Analysis – click on the “Click here” link at the top of the page to launch Flash.

Dosage Calculator

Complete Dosage Chart

Granted, I only adapted and improved the first, and got a TON of help from Van in creating the JavaScript for the Dosage Calculator, but I think it turned out pretty well. I remember that trying to sync up the voice and animation in Flash was a major nightmare; ironically, knowing Flash 8 a little better now, I realize that there was a much easier way to do it than I did. Oh well, stuff happens.
Aahhh, the salad days…

The Infamous Black Box Solution


04 May

Recently, a project came up which had a particularly difficult requirement included. Pharma industry sites have a pretty tight set of restrictions to start with but some things take it to a new level. One of these is the so-called “Black Box Warning” that some drugs must display. (more…)

Why You Don’t Skimp on QA


06 Feb

Wow, Wal-Mart really screwed the pooch on this one. If you visit their new Video Download beta site, you get a somewhat nice experience – not great, but not too bad – provided you are using Internet Explorer:

Walmart Video Downloads in IE (thumbnail)

If, however, you are using a modern browser such as say, Firefox, your experience is somewhat … shall we say, different?

Walmart Video Downloads in Firefox (thumbnail)

Notice anything wrong? Obviously, no one mentioned that over 10% of the country uses Firefox, including what might be a disproportionate number of the users who might use a download service like this. Of course, we are talking about Wal-Mart customers…

I sure hope that someone loses their job over this – this is sloppy and a REALLY poor example of what happens when you don’t do proper QA (or use qualified designers). I could go to town on the code itself, but could I really do worse than what they already show here?

Jazz Coding


14 Jul

Jazz Coding jăz • cod’-ing(v) –

1. Interpretive and often highly improvisational code development that doesn’t match spec or supplied codebase, and usually doesn’t work.
2. Rewriting functional or base code with non-standard and/or irregular code that is better understood, regardless of its validity.

While highly entertaining if viewed correctly, unappreciated by most. Doesn’t follow standard conventions, often putting completely disparate elements into the expected structure, causing unexpected results.

WIKI addendum: Jazz Coding is often performed by less-informed developers who are unable to understand or modified newer and more compliant code structures. Rather than adhere to the level of code requested/supplied, they rewrite code to include more basic constructs that are better understood, such as <font> tags, incorrect/unmatched tags or structurally invalid code.

See Also jazz code (n); jazz coded (v, adj.), What the hell is this crap? (phrase)

Navigation Consternation


04 Jul

I’m in the middle of a contract where we will creating a site that incorporates several departments presentation needs to a varied number of customers. In short, Department A needs to be able to present information to Customer Type A and Customer Type B, while Department B needs to be able to present information to Customer Type C, as well as some information which is share by all Customer types. The data varies between global information without any account specificity, and user-specific transactional data.

The navigation consists of a global ‘frame’ from the parent company (header, footer and left-nav style). Between them is our content (<div id="container">), which in turn has two divs, leftcol and rightcol (I know, so original). We are basing the left navigation – the main navigational element – on the parent site, although we are tweaking the style slightly, customizing the menu items to our site specifics, and most of all making it compliant by removing tables and image-based ‘text’ links. The main content of the page would fit in the right column div, often being fed from another part of the company’s database.

The main navigation isn’t a problem. I’m using nested lists to create a primary and secondary navigation to mimic the table-based rollovers that the parent site has. The problem is that when we reach certain portions of the site, I would need to go to a tertiary level of navigation. Not necessarily a problem in and of itself, although it does pose space problems within the width of the left column div.

Still, it was my recommendation as the most advisable method to go, following this general pattern:


<ul>
<li>HEADER 1</li>
<li>HEADER 2</li>
<ul><li>page 1</li>
<li>page 2</li>
<li>CURRENT PAGE</li>
<ul><li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li></ul>
<li>page 4</li></ul>
<li>HEADER 3</li>
<li>HEADER 4</li>
<li>HEADER 5</li>
</ul>

Simple, aside from spacing problems (32-character option names don’t fit very well). However, the client team wanted to use a set of navigation for that particular page, all within the right column DIV. So, suddenly, we’re left with left navigation, and not-quite-as-far-left navigation. I tried to explain the fact that having to left-justified navigations would most likely be confusing to the user, and that incorporating the navigation into overall navigation would perhaps be more advisable. They weren’t so sure, because they wanted to make sure that the topic navigation was in the face of the user.

After some discussions, it was then suggested that perhaps top navigation within the right DIV (the ‘frame’, if you will) would make more sense. At first, I wasn’t so sure because having two navigational areas – one top and one left – isn’t always the best idea. However, most situations also use this with TOP = primary/global nav, while LEFT = secondary/subject nav – not the other way around. In the end, I created three comps:

1. Integrated Left Navigation
2. Dual Left Navigation
3. Left and Top Navigation.

So, the result? Strangely enough, to me at least, the last choice seems to be the consensus winner. While I had my concerns about offering two separate navigation elements (well, four if you include the header and footer links – but don’t get me started there), it seems to work pretty well. Creating the ‘Inner Nav’ using a top tab-based navigation, if offers a way for the user to focus on the navigation inherent to that particular user-specific system (in this case “Orders”) as opposed to the more global (and generic) navigation on the left side. All of the items that the customer might need to use from within that Order space would be within that inner navigational space – and when they are done, they simply use the global navigation to the left to visit other portions of the site.

From what I know about usability, it seems to fly in the face of good design, but in this case it seems to make the most sense, and actually appears to work fairly well. I’m sure the usability folks will have plenty of words on the subject, but at this point, I’m having trouble finding it.

Daily Links »

Do the Disabled Really Buy Sporting Goods?


28 Jun

While working on a website we are redesigning, I was seeing some minor usability/accessibility issues that I was concerned about. I brought up those issues, mentioning that the site would be significantly less functional in some cases to those with disabilities, such as the vision-impaired and physically handicapped persons for whom using a mouse is difficult. That was when someone asked, “Do blind people actually buy sporting goods?”.

In their defense, the speaker asked the question in good faith, and they were thinking of snowboards, golf clubs and footballs when they said it. It took me only a second to respond perhaps not, and to ask if they had considered sweatpants, baseball caps, knee braces and more. Suddenly, it was more pertinent, and I decided to look into the question – do the disabled really buy sporting goods, or more specifically, do they buy them online? (more…)

Strange Findings


16 Jun

We were doing a usability test recently on a site that I’ve been working on for a major sports retailer. In the tests, we were testing a hover functionality which would prompt the user to click for more information about that product. (more…)