Dan Rubin's SuperfluousBanter

Month: December 2003

  • Design and Usability: Part 1

    Not surprisingly, as a designer I value aesthetics highly. However at a certain
    point aesthetics clash with functionality – or more specifically usability.
    Sometimes I wish I were a painter. No constraints, no font size issues, no low
    contrast color combination problems, no accessibility or usability concerns
    and no angry users to face. You either like my work or not, no strings attached.
    But I’m not a painter, I design websites.

    The difference between a painting and a website will be obvious to most. A
    painting does not require interaction, at least not on a functional level. I
    can not use a painting. I can nevertheless enjoy or dislike
    a painting (the same analogy is to some extend applicable
    to motion pictures    ). A website, on the contrary, has a function that carries
    beyond its visual attractiveness. Websites generally require (functional) interaction
    of some form. The most feared and tenacious embodiment of interaction being
    the homo interneticus.

    You know what? Humans are nasty mammals. Humans developed to perfection their
    aptitude to bitch, whine, moan, complain, nitpick, nag, criticize, grumble,
    protest and disapprove. Ironically though, without users (thus interaction) my job
    is rather useless. Designing websites is (unfortunately?) not exclusively about
    visually pleasing users, it is also about limiting interference to effectively
    deliver content and enable efficient interaction. The latter is of course a
    simplified statement; the process is more complex and constituted of more factors
    and elements.

    In “Design and Usability: Part 2” I will dig a
    little deeper and try to discern some of the factors and elements related to
    usability and functionality. Last but not least, providentially, humans can
    also adore, cherish, care, appreciate, value, understand, realize and love.
    It is with these thoughts that I leave you and wish you a Merry Christmas and
    a Happy New Year. See you in 2004!

  • The Art of Navigation

    When building a website there’s an inevitable moment when it is required you think hard about navigational elements. I’m not talking about information architecture here. Information architecture usually helps answering the question: “How will this function?” (among others). Nope. I’m trying to answer the question “How will this look?” – purely from a graphic design perspective.

    The above mentioned stage of the design process is one that I spend a considerable amount of time on and particularly enjoy within any project. In this post I want to share my latest experiment on navigation design.

    CSS based navigation!In my quest for elegant, clever and nice navigation design I decided to let go of certain requirements. In this case I decided to ignore a few usability (and accessibility) best practices (note: this should of course be avoided in real life implementation).

    However, I’ve set myself a few constraints which make perfect sense, even in an experiment. This design should of course be constructed using the sounder XHTML and CSS combination, as opposed to tables. Furthermore, once CSS is disabled, a nice unordered list should remain. Other than that the sky is the limit.

    The main purpose of this design experiment is to see how far we can push CSS. Is it possible to create the most complex navigation (in terms of graphic design) and have it marked-up as an unordered list? The answer of course is “Yes!”. And there are a few designers who elegantly proved this point in the past.

    As said and proved by many before – CSS can handle your wildest dreams. Unfortunately we are currently only limited by the pace of web standards implementation in modern browsers (specifically one browser, no names of course). This small experiment should work in most modern browsers, but your mileage may vary. Comments are more than welcome, but keep in mind that this is only a trial in design, not in practical implementation as such.