Medium

me·di·um |ˈmēdēəm|
the intervening substance through which impressions are conveyed to the senses or a force acts on objects at a distance

Too often this is overlooked. Too often journalists talk about themselves and get in the way between you and the news or background story you’re looking to consume. Too often the majority of the screen time is spent on the presenter instead of the story. How could some anchor man possibly be as important as the war that is being reported? Earth to anchor man: I don’t care.

Basically, I think any really good medium is humble in its presentation, while passionate about its content.

Unsurprisingly, I think the same goes for software. As unpleasant I think journalists or tv stations are when their bias or ego gets in the way of good reporting, I am equally inconvenienced when software gets in the way of what I’m looking to do.

Take Mozilla Firefox. As little as I use it, every time I open it, it interrupts me in my work by starting an update, asking me to relaunch the app, skip through updating any plug-ins, only then to present me with a web page telling me what’s new in this particular +0.0.0.1 version increment. How could the browser possibly be as important as the information I’m looking to retrieve? Earth to Mozilla: I don’t care.

In contrast, Google Chrome does precisely the opposite: it quietly updates in the background and never even lets you know.

While these two browsers may seem like a trivial example, I think this directly goes to what well designed software is supposed to do: get out of the way.

And with that, software has the same job as any other medium: to give us the straight dope. My advice is to keep this in mind when you’re designing a site or an app: the best interaction is the least possible interaction – for the user to achieve their goal, as quickly as possible.

This is why I think good software design – including web design – is almost per definition minimalist. Humble in its presentation, while passionate about its purpose.

Checklist for a complete web design

Many web designers today still have a background in print, or, ‘traditional media’. As a consequence, not every web designer is aware of the added responsibility that they adopt when starting to design for an interactive medium. Doing web design, you are not only responsible for the layout and visual design, but also the structure and interaction.

When designing a web site, you are in fact designing an application with functionality. And when you design functionality, you need to determine the cause and effect between user actions and how the website responds.

Thus, I decided to write up the following 10 steps, that help to verify if the most important aspects of interaction are covered by your design.

  1. Is every webpage covered by the design/briefing? Including pages such as ‘about us’, ‘contact us’, ‘disclaimer, ‘thank you for your email’, et cetera?
  2. Take a look at every link or button, on every page. For each button or link, does the design cover what will happen when clicking them? Will the developer know what has to be built?
  3. Is it clear, per page, what should happen if there is more or less content in the various blocks than is anticipated by the screen designs? Is there room for less or more content? Perhaps some local scroll bars will be required?
  4. For every webpage, what happens if the user scrolls? Which parts will move along and which will not?
  5. What happens if the user grows or shrinks the browser window? Will the layout grow along, or will it move with the window size (centered) ? Or perhaps it will just stay to the left? Will anything fill the void?
  6. Are the chosen fonts Web-safe? If not, is the font available for use and has it been cleared for use online ?
  7. Is the design supported by the capabilities of HTML/CSS/JS? If not, is there a Flash developer available?

For websites with a CMS (content management system):

  1. Can each type of item (e.g.: clients, projects, service) on the site, be reduced to something consistent? For instance, will a project always have one image, title, description and web address?
  2. Has it been decided for each piece of text or image, whether it needs to be made editable in the CMS ? Is somebody capable of delivering this content?
  3. For every image, is it clear what the dimensions are? What if somebody posts an image with different dimensions or proportions? Should the web site scale or crop (cut out) those images? Will the layout remain intact when this happens?

Stappenplan voor een compleet web design

Nog veel hedendaagse webdesigners komen uit de drukwereld, ofwel, die van de ‘traditionele media’. Dit brengt met zich mee dat sommige webdesigners niet volledig zijn voorbereid op de extra taken die je als designer op je neemt, wanneer je voor een interactief medium gaat ontwerpen. Je bent dan ineens niet alleen verantwoordelijk voor het uiterlijk, maar ook voor de structuur en de interactie.

Wanneer je immers een website ontwerpt, ontwerp je feitelijk een applicatie met functionaliteit. Wanneer je functionaliteit inricht, eindigt je taak als ontwerper niet bij het visuele design, maar moet die functionaliteit volledig zijn uitgewerkt tot handeling en gevolg tussen gebruiker en website. Dit natuurlijk tenzij er apart nog een interaction designer aan te pas komt, maar dat is (helaas) nog niet altijd het geval.

Om die reden onderstaande 10-stappen plan, dat helpt te controleren of de belangrijkste interactieve vraagstukken wel zijn beantwoord in het ontwerp.

1. Wordt iedere pagina gedekt door het ontwerp of de briefing? Inclusief pagina’s als ‘over ons’, ‘contact’, ‘disclaimer’, ‘bedankt voor uw bericht’, etcetera?

2. Kijk naar iedere link en iedere button op iedere pagina. Is in het ontwerp voor iedere button of link, uitgewerkt wat je krijgt als je daarop klikt? Zal de ontwikkelaar precies weten wat er moet gebeuren?

3. Is voor iedere pagina duidelijk wat er moet gebeuren als er meer of minder inhoud in de verschillende vlakken komt, dan waar het ontwerp vanuit gaat? Is er ruimte voor meer of minder inhoud? Zijn er misschien plaatselijke scrollbars nodig?

4 Wat gebeurt er, per pagina, bij het scrollen? Wat beweegt er mee en wat niet?

5. Wat gebeurt er bij het vergroten/verkleinen van het venster? Groeit de layout mee in de breedte, of beweegt de site mee in de breedte (gecentreerd) ? Of blijft hij links staan? Wat komt er in de lege ruimte?

6. Zijn de gebruikte lettertypes Web-safe? Zo niet, is het lettertype beschikbaar en mag die online worden gebruikt?

7. Is het ontwerp haalbaar op basis van de mogelijkheden van HTML/CSS/JS? Zo niet, moet er een Flash ontwikkelaar aan te pas komen?

Voor websites met een CMS (beheersysteem):

8. Valt ieder soort onderwerp (bijvoorbeeld: klanten, projecten, diensten) op de site, terug te brengen naar een soort dat altijd dezelfde consistente eigenschappen zal hebben? Voorbeeld: ‘Een project zal telkens een plaatje, een titel, een omschrijving en een webadres hebben’.

9. Is voor ieder stuk tekst of afbeelding besloten of die moet kunnen worden beheerd in het CMS ? Is er iemand in staat die tekst of afbeelding aan te leveren?

10. Is voor iedere beheerbare afbeelding duidelijk wat daarvan de afmetingen zijn? Wat als daar van wordt afgewijkt bij gebruik van het CMS ? Moet het CMS dan schalen of uitsnijden? Blijft het ontwerp dan nog intact?