But can the same be said for interactive design? In this nascent discipline, websites from a few short years ago seem antiquated with their table-built structures and rollover navigation images. Looking further back, the 216 color web safe palette meant dithering was commonplace, and the typographic challenge of using all web safe fonts yielded site after site in Times New Roman.

Constraints and Conventions in Interactive Design

Every year, screens become larger, browsers become more sophisticated and computers become faster. And it’s not only Moore’s Law at play — bandwidth also plays a key factor in determining the web experiences we can successfully deploy. The proliferation of mobile and tablet devices also demands more attention be paid to the dimensions of a site and the use of fingers as an input device.

Some rules evolve, others hold true. The late ’90s convention that “all links must be blue and underlined” is no longer a strict commandment. But a website with blue underlined links is still straightforward to use (especially when compared to that custom Flash interface with the twinkly confetti cursor).

While we are not able to design for technology that does not yet exist, we can account for basic principles that create longer lasting aesthetic appeal.

Good typography
Print: avoid trendy typefaces with novel elements
Web: legibility is key even though @font-face offers a variety of options

Simple composition
Print: do not use more graphic elements than necessary
Web: do not use more graphic elements than necessary

Limited color palette
Print: use a selective palette to provide compositional balance and harmony
Web: use fewer colors to provide consistency when navigating throughout the site

Design Case Study: IBM

Figure 1: IBM corporate logo poster, 1981
Widely considered to be a design classic, the graphic treatment explores the whimsical side of the corporate logo while maintaining a manageable palette.

Figure 2: IBM Website, 1998
Early conventions in navigation position begin to emerge, coupled with the constraints of the web safe palette.

Figure 3: IBM Website, 2012
Responsive design is used to fill the user’s entire window, but the composition is limited to several key elements.

Figure 4: IBM Website, 1994, and iPhone 4S, 2011
Good design is timeless: the website employs a simple composition, good typography and limited color palette.

The measure we use to evaluate interactive design should be tempered by an understanding of the time. Websites will always age as technology improves, but the underlying principles can still be seen.

Image Credits
IBM Poster image found via http://en.wikipedia.org/wiki/Paul_Rand
IBM website, 1994, and IBM website, 1998, screenshots found via http://epcostello.net/library/ibmcom/

Advertising in the 60s was a man’s business, and agency life was every bit as lurid as the fictional Mad Men suggests. Women were at the periphery, but a few found success. This is Jane’s story. (Related: anyone who claims things were better “back when” should review the way women were treated fifty years ago.)
 
 
Fast Company, March 2012

Obsession with Facebook vs. Google vs. Amazon vs. Apple continues. And, who knew Jack Dorsey had such symmetrical features.
 
 
Good to Great (to page 50)
Jim Collins

Great leaders make or break companies. The new ideal for a great leader is someone who inspires but doesn’t need the glow of the spotlight. Might Tim Cook fit this model?
 
 
The Midwest Mentality
Trevor Gilbert

Have noticed a pattern that goes like this: the Midwest isn’t as [pick one: cool, innovative, smart] because [fill in the blank with generalized stereotype].

Cue defensive facts, figures and retorts from the people who live there. This type of discussion is unproductive. Next!
 
 
Art in the Age of the Internet

One of the key distinctions of the early web era is the opportunity for like-minded thinkers to connect, regardless of their physical location. What are the implications and opportunities here?

The promise of a smart fridge is tantalizing. Magic apps to suggest dinner options! Family activity syncing! It’s almost like having a kitchen robot. But could the nature of smart appliances reduce their useful lifespan?

Picture the refrigerator at your parent’s house. How old is it — 10, 20, maybe even 30 years old? Now imagine popping over to troubleshoot problems on an OS from 1981. It could be the start of VCR programming all over again.

The problem with having a smart appliance is that the digital component will age more quickly than the physical components that accomplish its primary functions. The smart component needs to be removable and upgradable to ensure a responsible use of resources and affordable pricing.

Smart appliances alone aren’t a bad thing. They have the ability to adjust their energy consumption or, in some cases, their output functions, based on external factors like time of day, temperature, and so on.

The real challenge is that as technology comes to things like our refrigerator, it brings every other computer problem you’ve had along with it. In the near future, appliances may be able to order groceries for you. Which is all good and well until your fridge gets a virus and orders 200 tomatoes and a dozen tubs of ricotta cheese for you.

The fear of the unknown should not limit what we do with our appliances, but we also need to be aware that technology can impose limits at the same time it expands possibilities. Judicious applications are welcome.

The Used Car Salesman

Peddling goods or services all the time? Better to back off — no one wants to interact with a virtual used car salesman. Twitter isn’t the classifieds, and using every tweet to announce a special deal or push a product can be a turn off.

The Lifestreamer

There is a time and place for sharing all the little details of your life, and the occasional personal anecdote can add spice to your tweets. But a play-by-play update of the horrible flu virus ravaging your family might better be left unsaid.

The Pre-Packaged Publisher

It’s easy to click the sparkly “Tweet this!” buttons on other news and shopping sites, but how many people want to click on tweets that are obviously pre-written? Put your own spin on soundbites published from other sites to make the content more personalized.

The Read-Only Lurker

The lurker uses Twitter as a source of information but rarely contributes their own thoughts or insights. Hitting the retweet button is a great way to emerge from the shadows. Dare to share an opinion or two.

The Mystery Guest

It’s hard to tell who’s behind that profile when the picture is the default Twitter egg. Is it a real person or a spambot? Show your true self, cellphone self-portraits are allowed! And avoid using a logo to represent yourself (unless you’re manning a corporate account, that is).

The Authentic Self

Traditional psychology theory aside,  the best way to use Twitter is to engage with an audience of like-minded people. Whether you’re into woodworking or web development, seek out others with like interests.

Timely, relevant snippets to web content and informed opinions will increase clout. Work to develop a curated thought process, and soon you’ll be shaping the digital landscape 140 characters at a time.

the nature of interactive work

Interactive work is intended to exist on screen. The luminosity of the screen and the wide color range of the RGB model make it difficult to reproduce a visual match on a printed page. The screen itself is a variable canvas. The dimensions of a website can vary widely from monitor to monitor. Technology is always evolving, and the monitors of today have better resolution than the ones from a few years ago. Even so, there is no standard for color on the screen, and each monitor displays color differently.

the nature of printed work

Printed work is, of course, designed on the screen, and this allows for the possibility that it may be viewed on screen again at some point (perhaps as a downloadable pdf, for example). Depending on the printing processes used, there might be elements like varnish or metallic ink that do not readily translate on screen. There is a physicality to a printed object that must be considered. The quality of the printing, the fold of the page and the experience of holding it in three dimensions all affect user perception.

To insist that one must experience print in person is to further limit the relevance of print in the digital era. Work should be best served by its native medium, but to remain relevant, print designers must acknowledge the limitations of the screen when sharing work.

when setting the timer

 
Figure 1) I’m ready to set the timer. I tap the “Set/Start” button below the label “Timer” and enter a time using the numeric keypad on the right.

 
 
Figure 2) The time has been input, and now I need to start the timer.

 
 
Figure 3) I hit the large “Start” button to the right of the keypad. The oven makes an error noise, and the timer does not start. Did I do something wrong?

 
 
Figure 4) Right, I wasn’t reading. I should have pressed the “Set/Start” button again, as the screen instructed me.

 
 
What happened here? The process breaks the sequence of numeric keypad plus enter button. Having been trained by previous experiences with numeric keypads on calculators and computer keyboards, a user would expect the start / enter button to be in close proximity to the keypad. The placement of the buttons creates a back-and-forth motion, not a left-to-right action, and moving both forward and backward is less efficient.

Setting the oven timer is a five second task, but small annoyances can multiply over time and affect user perception. One solution to this problem would be to have a global start button. When in the timer setting mode, the start button could activate the timer.

when creating a label in gmail

 
Figure 1) After searching for a particular phrase, I have the option to create a filter. In this example, my filter will be a label that is applied to all messages that match the filter criteria.

 
 
Figure 2) I’ve created my filter. But wait, it wasn’t applied to the messages I searched for — I should have checked the box “To also apply filter to 1 conversation below”. The placement of the “Create filter” button was first, so I didn’t notice this option until after the fact.

 
 
One solution to this would be to move the check box for applying the filter above the “Create filter” button. But given that the other elements there are actions related to the filter creation, it should be separated from that list. Another alternative might be to have a button that says “Create and apply filter”. Experimentation and testing would be required to arrive at the best solution.

In the end, it’s easier to remember sequences that don’t work well. For every problematic sequence in everyday life, there are a dozen that go well. Now it’s your turn to share — what interface elements have you encountered that are more complex than they need to be?