The Wilson Project Blog of UX/Front-End Developer Ivan Wilson

Menu Skip to Navigation

Tag Archive / Design

  • Why Design Now?

    Why Design Now signage - Cooper-Hewitt Museum, NYC

    Last week, I finally escaped DC for NYC. Got the chance to finally see the Cooper-Hewitt Museum, which is part of the large Smithsonian family. This museum’s focus is on design, whether functional or artistic. I got the chance to look at the exhibit Why Design Now? – part of the National Design Triennial.

    This exhibit reminds me of MoMA’s Design and the Elastic Mind a few years ago but on a smaller scale. In this case, the various themes were grouped into areas such as communication, mobility, and energy. I was very interested in the Materials section, looking at some very beautifully crafted items made with processes that had little environmental impact. For example, packaging or dishware that used local materials (paper/plant material) while being easily biodegradable. And then, there are the eyeglasses…

    I spend most of the day at the museum, soaking in all the design and getting recharged again after three months of work. Anyways, the exhibit is open until 1/9/2011. Enjoy.

  • Mental Steeplechase / Hurdle IA

    Charles - Home Page (w/ site revisions)

    After a some thought and some revisions, I decided that the homepage will take on the blog lister template. This caused the following changes in the primary navigation:

    1. Changed primary navigation with addition of “Home” link
    2. Changed “Information” with “About”
    3. Replacement of “Blog” (main blog page) with “Blog Links” (gray section below containing Blogroll, Archives, and Meta)
    4. Switched order of “Social Media” and “Blog Links”

    An additional change was the addition of the site byline to the header.

    As of today, this was the final substantial change to the look and feel of the Charles site. After almost a year and three concepts, Charles has its look and now I can move forward toward Charles’ completion in 1/1/2011.

    Next steps:

    1. Complete HTML5 code templates
    2. Move TWP site from Windows to Linux server
    3. Start initial steps/planning for CMS configuration
  • The Well-Dressed Submit Button

    (Originally published on CDG Interactive/Innate blog)

    Hello, again. This is CDG User Interface Developer Ivan Wilson with another lesson gleaned from the top of the snowy, white-capped mounds of work that keep me busy every day. As I explained in my last post, my job is about building the bridge between design and technology. I need to create things that function perfectly, look good, and are useful for users. Here’s how I tackled a recent challenge on-the-job.

    One of our clients, Mondial Assistance, is a large multinational provider of travel insurance. We’re in the midst of revising each of their national B2C sites—more than 20 sites in all, in a variety of different languages. Our core website needs to work as well for consumers in Germany as it does for consumers in Japan—and everywhere in between. And as every web pro knows, content is key.

    But what does content have to do with me, a developer who doesn’t deal (directly) with the spoken language? Allow me to explain!

    The truth is, content is inextricably tied to both design and technology. Think, for example, about the humble button on a web form, like this one. As a UI professional, I need to make sure that this button looks right from a design perspective, and also functions perfectly regardless of the browser or language.

    The simplest solution would be to just take that graphical image and turn into a submit button via HTML code. Or would it? Remember, this little button has to function across 20 sites and in multiple languages. Just imagine the following conversations…

    “Nice button. Nice style. Can you add it to the German site? Oh, don’t forget. The French site is launching next month. We need to use the same buttons there as well.”

    OK, open up Photoshop (or insert your preferred graphics program) and change the text to German. Done. Fine.

    Repeat again…this time in French.

    Repeat again…this time in [insert local language here]

    Before you know it, you’re creating 20 versions of the same button. And that’s just one button on the site. Take into account all of the other buttons that reside on the site, and it becomes an algebra problem: (# of buttons) x (# of languages) = massive headache.

    Let’s take a step back and look at the problem again.

    We need a submit button that is:

    1. Editable – It needs to be easy to translate and manage across sites
    2. Usable – We do not want to create problems or lock out the user, preventing them from finishing their task

    Graphical buttons are out. Sure, I could always use a linked image with a Javascript function to submit data upon clicking. But what if Javascript isn’t switched on? (Surely it won’t be on screen readers and mobile phones). Not good enough.

    The challenge is creating a default state for the button, which functions for everyone, and an enhanced state that looks perfect for top browsers.

    In the end, here’s what I did:

    1. Used an old fashionedHTML submit button
    2. Along with the button, I added an extra bit of code that displays the enhanced state:<span class=”startquote submit”><span>Start Quote</span></span>In this code, I’m using CSS to turn two tags (spans) and enclosed text to appear as the prior graphical button. And by adding Javascript, I can make this “button” act like a regular submit button.

    OK, but now we have two “buttons”. Here is where the magic comes in…

    If you load up the page (without CSS or Javascript), you are the “default” state and the standard HTML submit buttons shows up.

    Now, if you are using a top-of-the-line browser, you have Javascript and CSS well supported. That means that you are ready for the “options” state. When the HTML button loads up, you will get this functional stylized button. All along, the “default” button is still around, just hidden from sight.

    And as the topper, since the text is only text, it can be changed with a couple of keystrokes. Done right, it can stretch to accommodate different word lengths due to translation or editing. As seen below:

    Why only the Latin alphabet? What about Cyrillic? Japanese? Chinese?

    Everything works beautifully. (Well, actually, IE6 has problems with hover states…but it’s IE6, of course.)

    So, there it is. Highly stylized yet functional submit buttons – well dressed for any occasion. And best of all…useful.