"Where's the 'any' key?"

A button is a visual artifact that represents one or more functions, functions that are executed when you press it. How we read and understand a button and its represented function(s) is determined by many different, often combined variables; additional text and/or images, color, the button’s own physical shape and feel, and in what context you read the button.

To read and understand the button

To know that something is a button we must read it as a button. That’s the easy part – it’s usually round, colored and contains a word or image. To understand what it actually does (what function it represents) can be trickier, depending on how well designed it is, where it is placed in relation to other elements, as well as how complex the context is:

handheld blender – easy.
Menu on the website – reasonably simple.
Remote digital box – at best reasonably understandable to significantly cryptic.

A well designed button is a button you understand, even if you are unfamiliar with the context in which it is found in. If we buy a food processor, we assume, probably without even reflecting on it, that it probably is equipped with a number of buttons, which representedt functions we quickly are able to understand. The product designer probably assumes that we assume that. A poorly designed button, in turn, is a button one is not able to identify (try finding the flush button on the toilet in a design hotel), or do not understand what it does. Good design is design that’s easy to read, understand and use – the user must understand how to navigate your site, what button to push in order to mix his or hers hummus, how to change the channel on their digital box. And so on.

Minimalist CD
A CD player without TRADITIONAL buttons. Even if you are not familiar with this product you probably will understand how to use it just by glancing at it. Simple, intuitive and playful.

Baby Box Noise Generator
Baby Box Noise Generator – a sound generator with deliberately complicated buttons and controls. The idea (as iI read the design) is that you shouldn’t understand the interface, which will lead to unforeseen musical art-by-accident expressions.

Effects of poor button design

Why I devote a blog post to investigateing something that may seem so obvious as to what constitutes a good or bad button depends on two key reasons: 1. I like details in design, often those that we might overlook. 2. A bad button contributes to a poor user experience, and a poor user experience is not good. One example of the effect of a poor user experience is that your potential customers or client gets tired of your website and leaves, chooses a competitor’s app or product, and so on.

Functionality versus aesthetics

Sometimes there might be design situations where functional intelligibility stands in one ring corner and visual expression in the other. One such example involves a large contemporary trend in design, namely flat design. Simplified, one could say that it is design whose elements have no shadings, textures or other effects that make them look three-dimensional.
Flat design: no shadings, no raised buttons. Instead, colors, color saturation and icons functions as signals for what elements to perceive as interactive, and which mode is enabled/active.

This is where the discussion about how we read the button comes back again – flat design has been criticized for being non-intuitive, a visual trend that stems from an aesthetic expression rather than functional rationalism. In short, users do not really understand what elements of an interface that are interactive (links, buttons, controls, slider and so on) and what is static non-interactive content.

My opinion is that flat design shouldn’t be deemed less user friendly by definition. It is as much about how it is used: how interactive elements are positioned in relation to non-interactive ones, how information is structured hierarchically, which words or images you put in the button as the representation of a specific function. And so on.

Skeumorphism: ugly design that works?

If we turn 180degrees away from flat design we find skeumorphism. In other words, design that tries to mimic the physical stature of the object it depicts: a button on a website or in a program, for example, might have a glossy plastic texture and shadow, as it would have looked like in real life. Looking at the early versions of different operating systems we can see how the interface designers tried to mimic the appearance of physical buttons, and make them look three-dimensional by simulating altitude using shadows, textures and contours:

A button in the good old Windows 95
Skeumorphism 1995: Good old Windows 95. An outer black frame combined with lighter and darker colors to simulates altitude difference. An inner dotted frame shows that is the active button, which is activated in case you prefer to press the Enter key instead of the mouse.

Buttons on Mac OS
Skeumorphism 2001: Stained glass beads (?) countersinked into a plate of brushed metal acts as buttons for window management on Mac OS X. The glass beads hung around for thirteen years, until 2014, when they became flat as pancakes in OS X Yosemite. The metal was also retired.

skeumorphistiskt interface
A skeumorphistiskt interface. This particular example is in my opinion relatively sophisticated, thanks to the discreetreet use of textures combined with very white surfaces.

World after the button

The button has been around a long time and will certainly be for a long time to come. But if there was a time before the button, so maybe it is reasonable to assume that there will be a time after it. Most of us has noticed that we live in interesting times; new futuristic ways to interact with our objects are constantly being developed, ranging from sophisticated voice control in Apple’s Siri and Microsoft’s Cortana, the hand movements in the air of Microsoft’s Xbox and Google’s project Solihull.

The button got its shape is, like everything single designed thing, as a result of the technological and cultural environment that surrounded it. At the time a round tingestobject with a spring mechanism under it was the most functional solution, and perhaps will trump future technologies in functionality. We will know that in ten years when we pleadcomplain about to faulty espresso machines or trying air-zooming in an unsympathetic Google Maps.

Hemsida för Hikki AB Umeå

Hikki - hemsida

Distinkt typografi i Futura och oregelbundna horisontalstreck speglar det möte mellan natur och designobjekt som Hikkis produkter är.

Webbdesign | Identitet
Logotype for embossing - Morfar - Handcrafted by Sweden

Handcrafted by Sweden

Två sigillogotyper avsedda för print, webb och så förstås blindprägling i läder. För Handcrafted by Sweden.

Grafisk design | Identitet
The oceanhowler är en kombination av musik, video och gränssnittsdesign

The Oceanhowler

Ett interaktivt webbexperiment där musik, video och gränssnittsdesign möts. Genom att slå på/av fraser och justera volym kan besökaren skapa eviga ljudlandskap.

Experiment | Fria arbeten
Produktkatalog för Handcrafted by Sweden

Handcrafted by Sweden

En produktkatalog med bra bildtryck på ett kvalitativt obestruket papper i en rejäl vikt blir en förlängning av Handcrafted by Swedens egen designfilosofi.

Grafisk Design

Ox Choral

Tredje albumet med min enmannaorkester Nattavaara Rocks. Ett digitalt album i fysisk form, eller en skiva för det 21:a århundradet om man så vill.

Grafisk Design | Fotografi
Grafisk Profil för Affärsliv24, Västerbottens-Kurirens näringslivswebb


Hösten 2015 lanserade Västerbottens-kuriren sin nya näringslivssajt. Jag stod för den grafiska profilen.

Förpackningsdesign Nattavaara Rocks - Ghosts Move Through

Ghosts Move Through

Andra skivan med mitt musikprojekt Nattavaara Rocks. En 16-sidig digitaltryckt inlaga inklistrad i ett handgjort, blindpräglat konvolut.

Förpackningsdesign | Grafisk Design
Webbdesign för Elin Magnsusson

Elin Magnusson

Hemsida för konstnär Elin Magnusson. Mycket luft, diskret typografi och knappt någon färg lämnar ett neutralt rum åt konsten.

Webbdesign för House of Svala

House of Svala

Hur visar man mode på webben? Med bilder så stora som skärmen tillåter och diskret formgivning i en hemsida som egentligen är en look book.

Webbdesign | Identitet
Web design and visual identity for Sisters of Jam

Sisters of Jam

Hemsida och typografiskt uttryck till konstnärsduon Sisters of Jam, ett samarbete mellan systrarna och konstnärerna Mikaela och Moa Krestesen.

Webbdesign | Identitet
Bokbindning - Handbundna anteckningsböcker

Handbundna böcker

En bok är, trots alla digitala innovationer, oöverträffad när det kommer till tillgänglighet och enkelhet. Dessutom saknar den batterier.

Grafisk design | Fria arbeten
Webbdesign och produktfoto för Annova H&B

Annova H&B

Logotyp för tryck och prägling samt en hemsida med fokus på stora produktbilder paketerar Annova H&B.

Webbdesign | Produktfotografi
Blindprägling visitkort

Visitkort för det egna företaget

Om man kommer över en bit genomfärgad svart råkartong är det svårt att motstå impulsen att blindprägla den. Så det blev visitkort av alltihop.

Grafisk design
Webbdesign av Norberg Sounds - filmmusik

Norberg Sounds

En hemsida utan länkar, menyer eller undersidor rymmer innehållet: musik lämpad för rörlig bild, komponerad av mig.

Linoleumtryck gul minimalism

Gul minimalism

Linoleumtryck är en av dom enklaste och billigaste grafiska teknikerna. Med lite tålamod, en vass kniv och en färgroller kan man åstadkomma storverk.

Experiment | Fria arbeten

Piktogram: förtätad information

Det är inte givet att ord är det bästa sättet att förmedla information. Ibland fungerar bilder bättre, i synnerhet om dom bilderna tillhör familjen piktogram.

Vad är grafisk design?

Lite förenklat är det hantverket att ge information en ändamålsenlig visuell form som kommunicerar ett avsett budskap på avsett sätt.

Serif kontra Sans-serif

Serif vs sans-serif

Varje profession har sina myter, och grafisk design är inget undantag. En av de mest seglivade är att seriftypsnitt är enklare att läsa i löpande text. Vilket är nonsens.

Norberg satt med blytyper

Text i det tjugoförsta århundrandet

Retinaskärmar och OLED-teknik och E-bläck. Fint och bra och superduper. Men man har inte levt innan man blindpräglat ett läderband med blytyper.

Knappar i olika utföranden

Hur ser en knapp ut?

Hur ser en knapp ut, vad händer när jag trycker på den, och hur platt kan den bli innan jag slutar att förstå att det är en knapp?


Jag heter Andreas Norberg och arbetar som frilansande grafisk designer med Umeå som bas och Sverige som fält.

Jag erbjuder visuell utformning och teknisk produktion av responsiva hemsidor, logotyper, visuella identiteter, annonser, kataloger, produktblad, förpackningar mm. Min målsättningen är alltid att göra enkel, rak och fungerande form i enlighet med uppdragsgivarens vision och behov.

Jag är tillgänglig för frilansuppdrag och intressanta samarbeten, så du är välkommen att höra av dig.


Andreas Norberg Design
070-551 87 11

Dragongatan 14
903 22 Umeå