As the flat design trend has been recently surfacing in popularity it made enemies with a few good old friends of mine, some of which include: shadows, gradients, and textures. Taken literally, under the flimsy banner of honesty, flat design has ventured out against interfaces which resemble anything three dimensional or portray depth on a two dimensional screen. I’m calling bullshit on this for a number of reasons.

Please Don’t Steal My Design Elements

Back to basics from the time when I was still a graphic design student, I remember there were some fundamental design elements given to us to make use of. Armed with such primal elements as color, line and shape, we were one step closer on the road to respecting human perception above following ephemeral styles. We were learning how people see so that we could setup good visual hierarchies and differentiate between the more important and less important things on a page or screen. By not making everything look equal, but instead by making things larger or smaller, closer or farther, we could begin to guide the eye while grabbing people’s attention in different degrees.

Come today, two of these elements that are being attacked by flat design are texture and space (or depth). If this new awesome trend is now taking them away, then it’s ripping pages out of my graphic design text book and actually making me poorer as a designer. Not cool. As visual communicators we are stronger with more tools and techniques at our disposal, not less. I therefore respect the fact that human beings can see depth and there is nothing wrong with making a primary call to action large, shiny, and three dimensional. I am placing my bets that an embossed depth loaded button will be noticed more often than some ideologically restricted flat blob. From a business stand point, my clients will also be happier with a stronger conversion rate and a better ROI. From a usability standpoint, people will sweat less while trying to determine what is clickable and what is not (Bokardo seems to agree).

How Memorable is Flat?

One last other undesirable side effect of flat design (and any other minimalist, modernist, reductionist, clean or simple styles which have come and gone) is its potential to undermine human memory. Some time ago, in the context of charts and bar graphs, we were taught that chart junk is bad and we should keep our data-ink ratios in check while not succumbing to evil décor. But is this so? We have been warned that a purely simple and clean approach comes at the cost of making it harder to recall the information later on. Let this be a warning that extreme simplicity might not be the silver bullet after all if we’re striving for higher memory recall rates.

The fundamental thing about flat design is that it is a restrictive trend that ought to be questioned. Perhaps it’s cheaper to develop, design or maintain, but if taken in its literal interpretation it could result in a lower quality user interface. I believe that being respectful of people’s perception, attention, memory and the human ability to register depth, wins at the end of the day over following any stylistic fad. The answer probably lies within a more balanced approach and therefore – I choose not to design with one of my hands tied behind my back.

Credits: Jakub Linowski (@jlinowski)

Since more and more bullshit has been surfacing to the top lately, I’ve created a new bullshit tag to keep track of it. :)

Here is some lean UI sketching advice – let the level of detail be a variable in your design process that which you control. Staying conscious of and knowing when to cut a corner or when to spend additional time detailing an interaction, screen or flow is a healthy thing. All sorts of design tools impose certain fidelities on to us the second we pick them up. Take on Axure RP for example and before you know it you’re sucked into aligning stuff at a pixel level whether you like it or not. Load up Adobe Fireworks too quickly and subconsciously you begin writing actual copy, comparing pixels, and choosing RGB color values. The tools which we use, just as Donald Norman said of the artifacts we design, also come with affordances – do stay aware of how much detail they ask of us.

Surely everyone by now knows that sketching tends to be low fidelity in nature as it’s often quick and dirty. However when it comes to its fidelity I think there is more to it. Sketching in particular is a lot more flexible than we think comparatively to other tools out there. I believe that sketching allows designers to work at a wider and therefore more flexible range of detail. On one hand it may be super quick, yet at the same time it also allows us to slow down and elaborate. Here are a couple of examples of what I mean:

Scribbles vs. Real Text

Consider the text we show and indicate in our work. Sometimes it’s rightfully fine to just ignore detail and save time by showing it as a bunch of scribbled lines. At other times of course we may imbue our concepts with more detail and show the actual text. After all, copy has a clear connection to experience, usability, and understanding. Nevertheless, choose wisely.

Outlines vs. Depth with Contrasts

What about outlines – they are a quick way of suggesting an area. These of course can be elaborated with depth or contrast in order to convey element priority. Lighter backgrounds can give way to darker ones when it comes to showing importance.

Partials vs. Full Screens

I love how useful partial screen sketches can be! They cut through time and effort like a knife through butter (and also save you additional time when you later have to update your working documents). Why design a full screen if all that matters is the top navigation? Sketching in this way allows the designer to emphasize by leaving other elements out, literally. Of course, at other times full screens are the way to go. Be in control!

Placeholders vs. Detailed Components

Placeholders abstract a component by describing what it contains with the byproduct of spare time. It’s a good way of cutting a corner. Alternatively spend additional design time on the same component and turn it into a higher fidelity object.

Approximate vs. Precise Alignment

As mentioned previously, aligning elements to the pixel can be a time sink. Sometimes an approximate position is just as fine. Similarly, the same rule applies to how straight or crooked we draw our lines. Decide what works for you and when.

Taken together, being in greater control of a design process does matter with the level of detail being one such variable. When corners are decidedly cut however, some clear benefits do arise. The additional spare time which is brought on can then be allocated to other and more important areas instead. One beneficial use of effort early on in a process is on widening the scope for example and thinking through broader interactions as opposed to just a few screens. Another valuable benefit of cutting corners is for designing alternatives and generating more ideas for the same screen, interaction or user story. Of course as a project unfolds and more knowledge along with deeper consensus is generated, don’t forget to start raising your level of fidelity. After all, the devil is in the details. The important thing here is that you (and not the tool which you use) are in charge when the detailing begins to happen.

Credits: Jakub Linowski

A thoughtful article by Golden Krishna of Cooper came out a few months back which has picked up some steam recently. Its title reads “The best interface is no interface” which I think is one sided, flawed and so here are a few of my thoughts on it out in the open.

Reductionism and minimalism do not guarantee a good interaction. The author seems to advocate a 3 step process for most user tasks. On the other hand however, Zoltán Gócza writing the UX Myths blog has challenged the 3 click rule sometime in the past already, advocating for ease of navigation and a scent of information instead. Then again, I have to admit that I do value simplicity just as Golden Krishna. Lowering unnecessary cognitive workloads must be a good thing as opposed to lengthy and manual labour intensive tasks. I also do believe that a design process often unintentionally fragments the forms we design and it’s very healthy to spend energy and effort to merge or refactor shared functions so that there is less interface duplication. Nevertheless, you can still have a useless or unusable 3 step process and an awesome 7 one. More so, when you take the statement of reductionism and push it to the extreme, you result with a 0 step process and nothing to interact with at all. In that case all that you’re left with is an aware system that knows you inside out. Is that what we want? Is that good design? Perhaps in some cases yes, in others less so I think.

Non-screen based thinking does not guarantee good needs based design. The author writes “When we let go of screen-based thinking, we design purely to the needs of a person.” I’m not sure that letting go of the screen guarantees good design. There are tons of screen-less traditional tangible products which are crap. You can still have needs based user interfaces but that comes more from your values as a designer and your process. Don’t punish screens for poor design.

Interfaces are actually good because they allow us to express intent. Whether you are clicking a button on a screen or turning your keys to open a door (also an interface with two states), you are expressing a very clear intent. Interfaces (screen based or not) enable interaction. Sure, I believe adaptive systems that learn about users are great, but they are not an answer to all situations. Imagine Amazon’s adaptive algorithm being so far stretched that they actually automatically order products for you. Call it the No-Click Ordering Process. Would customers have to spend more time at the post office trying to ship and return unwanted products? Now imagine a purely adaptive nuclear launch facility without all those terrible buttons that require two users to turn the knob simultaneously before a missile is launched. Perhaps sometimes, manual expression of intent is still a good thing – at least until Ray Kurzweil figures out the singularity thing?

Interfaces are also good because they limit the amount of information that is displayed at once. Take a book as an example which is an interface to a story. With it, we can navigate through pages and chapters and focus our limited human attention at words which we combine into sentences over the course of time. If a book did not have an interface however, we would not be able to flip through pages. Instead, we’d have to comprehend the full story in an instant split second with our brains frying from cognitive information overload. A good interface respects our cognition with a proper visual hierarchy and serves us limited amount of content at a time. Let’s not get rid of it completely perhaps?

Screen based interfaces are extremely multifunctional. Actually one thing that traditional screen based interfaces do quite well is that they can shift their functions pretty quickly and flexibly as someone interacts with them. The number of functions a screen can serve is infinite. Sure that comes at the price of learning and possibly confusing some users, but that becomes the designer’s job with the potential at their disposal. A physical product such as a wine opener will be a wine opener and serve a very narrow set of functions by comparison. Yes, the advantage is surely that a wine opener allows us to store the interaction as motor memory with the benefit of physical tactile feedback. Nevertheless I think a designer should choose if the product should be screen based or tactile or both based on some of the qualities and interaction characteristics.

Don’t get me wrong. I think it’s great that Golden is challenging the amount of screens we “slap” everywhere. Those two examples of a car dashboard with a Twitter screen and a fridge with another are perfect in highlighting desperate and thoughtless products. I think it’s also great that the author is thinking about adaptive systems that alleviate unnecessary labour and guess some decisions for us. Finally, I also think it’s great that Golden is taking into account hardware sensors that open up novel ways of interacting. But please don’t shoot yourself in the foot and make sensational statements that the best UI is no user interface at all. If the best UI was truly no UI, then why not put your money where your mouth is and get rid of all links and buttons on the Cooper.com website, and well, actually why not get rid of the screen based website altogether? Sorry if this sounds harsh, but it’s just a devil’s advocate thought experiment to make a counter point. :) I suggest we stay clear of extremist design philosophies and find a more balanced approach where good interfaces live alongside adaptive systems and new interactions. In the end, interfaces are here to stay and so is my pencil.

Credits: Jakub Linowski

Article by:
Sam Smith

I am a sketcher. I recently realized quite how much sketching defines what I do when someone pointed out to me that I rarely present any work without a pen in my hand. Whether I’m drawing on a whiteboard or quickly sketching on paper sketching that helps me to illustrate what I’m talking about. So it was an interesting challenge when I was asked to present a workshop at the Interaction12 conference in Dublin, where I would be doing the talking but the participants would be doing the sketching.

Looking at the number of workshops and presentations at the conference that were related in some way to sketching, and the number of people who have viewed my presentation slides on Slideshare (nearly 70k views in just over a week), I think it’s pretty safe to say that the perceived lack of sketching skills in the digital design community is something that has obviously touched a nerve. With all the rhetoric around collaboration with coders and clients through sketching, and the focus on lesser deliverables, this was obviously well timed.

I do believe that by breaking the ‘art’ of sketching down to a set of basic techniques that can be practiced, anyone can create sketches that not only do a good job of communicating but also look good. But before I dived into the practical side of the workshop I spent a bit of time asking people to think about 2 really important aspects that underpin all of the techniques that I was about to share: ‘what is a sketch?’ And ‘why sketch?’

What is a sketch? (and what isn’t?)

Firstly, and possibly most importantly, I like to make a distinction between sketching and drawing.

A sketch is not the same as a drawing in 2 important ways: execution and intent.

Aside from the obvious wiggly lines vs. straight lines type of differences, it’s easy to look quickly at something and decide whether it’s a sketch or a drawing. Quality and fidelity are easy markers but there’s more to it than that.

Unlike drawings, sketches aren’t precise and often include mistakes or corrections. A drawing is closer to a finalized design or idea. From a drawing you can get a good idea what the whole thing will look like. And that’s often what stops people picking up a pen. Half of the time when people are reluctant to sketch it’s because they are scared that their sketches will be judged by the same standards we use to judge a drawing or a polished design.

A good sketch doesn’t try to describe everything in detail (the bit that counts is ‘in focus’ and the rest is vaguely described for context), but it gives you enough information to get the point across.

When I sketch I’m not looking to create a beautiful, polished or even finished object (sketches can be beautiful, but they don’t have to be). What I’m trying to do is to capture an idea so that I can communicate it to others and explore whether or not it works. I’m not trying to do visual design on paper. We’ve all been in scenarios where the bottom line is boss and thinking time is seen as a luxury. If I’m spending time articulating all of my ideas in high fidelity on paper, it’s going to take way more time than I have.

The point of sketching is not to produce polished outputs, it’s to explore, challenge and validate ideas. That’s not to say that sketches can’t look good. They can, and with a bit of practice they will. But it’s not so much about what they look like as what they allow you to achieve.

Fast and free

I like to sketch because it’s quick and free (and not just in the financial sense). I can explore ideas on paper much quicker than I can in Illustrator or other tools and I’m not tempted to fall back on libraries of stock elements to solve problems because it’s easy.

Plus, the temptation in doing things digitally is to make things too neat.

When I am about to sketch on paper, knowing that it will be harder to undo, I hold myself back and think twice before the ink or lead leaves a mark … When I sketch electronically, this worry disappears as I know that I don’t have to generate the right ideas, but instead can easily correct myself if something needs adjusting. [Jakub Linowski]

Show your workings

I’m not against sketching digitally. If you can work as quickly as you can on pencil and explore as many ideas in the same way, then the medium isn’t really the issue. My worry is that working digitally encourages us to tidy up and erase mistakes, when often the mistakes are just as important as the final idea. If we are constantly hitting undo, all of those mistake are lost. We end up with a polished final sketch, but no record or evidence of how we got there.

When we’re reluctant to capture our ideas as sketches, often those ideas don’t get captured or aren’t explored as fully as they might be. Sketching is a really useful ideation and communication tool. The ‘art’ of sketching can be learned and practiced, but the real value is in the generating of ideas and the discussions around those ideas that sketches prompt.

Sketching shouldn’t always be solo

Jakub makes a really nice point in his piece on digital sketching:

Looking back, sketching has been wonderful at giving rise to design
representations that naturally act as conversation starters

I agree wholeheartedly with this. When I start to address a design challenge, my sketches are much looser and lower fidelity, but still enough to prompt and aid those conversations.

Sketches do not have to be pretty, beautiful or even immediately understandable by others. However, you should be able to explain your sketches and ideas when anyone asks about them.

– Sketching User Experiences [Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt & Bill Buxton]

Often the sketch will develop and evolve over the course of the conversation, as per Jakub’s point here:

Perhaps the use of paper can still be justified in collaborative sketching sessions when there‘s more than one designer at the table and the design activity happens simultaneously in real time.

I am a big advocate of this style, with one significant difference. I’ve seen this work successfully (and often) where the collaborators around the table aren’t just designers. Some of my most successful ideation sessions (for generating good design based around insight) have been when there have been designers, clients/stakeholders and developers all contributing and sketching – not just the designers.

Part of the beauty of sketching is that it doesn’t look like the finished product. It’s like creating wireframes with ‘wiggly’ sketch lines to reassure the client that this isn’t what it’s going to end up looking like – except you’re actually sketching rather than making your digital version look sort of like a sketch. The key thing here is that people don’t mind scribbling on a sketch to show you what they mean. And then you’re on your way to collaborative design. Happy days.

Sketching in code

I heard the phrase ‘sketching in code’ mentioned more than a few times at IXD12. In his presentation, Jonas Löwgren talked about (and showed) how really complex interactions can sometimes be best communicated by building them out (show don’t tell).

Although I don’t disagree with this, I don’t think it’s always necessary when we’re dealing with less complex interactions, as many of us are compared to the things Jonas demonstrated.

Committing to building something (as opposed to sketching it) definitely restricts the way that I design. It certainly takes me longer to build it than to sketch it, and as a consequence I find myself exploring less ideas. Plus, if I’ve spent time building something, I’m more inclined to keep elements and re-use them rather than starting from a blank slate. Perhaps this is a symptom of me needing to get more comfortable in code the way I am encouraging people to get more comfortable with a pen or pencil?

Sketch more, sketch better

So, in short: sketching is good, mistakes are ok, neater isn’t necessarily better and when it comes down to brass tacks, good well thought through ideas are what counts.

Like anything, the more you practice, the better you’ll get. There’s more about what is/is not a sketch as well as some basic techniques and exercises in my Sketching Interfaces workshop sides.

Credits: Sam Smith

It’s probably nothing new that the sketch has been gaining quite some attention lately as a powerful design tool. Some UI designers have began to precede wireframing and prototyping with free-form pen and paper approaches that afford exploration and support a wider diversity of ideas. For over a year now, in my design process I’ve started doing just the same right after I picked up a set of markers and sketch pads. Looking back, sketching has been wonderful at giving rise to design representations that naturally act as conversation starters and therefore make sketching more so compatible with agile philosophies. However, traditional pen and paper has a few limitations which over the last few months became noticeable. As a reaction to this, I grabbed an Intuos 3 from Wacom, installed Adobe Illustrator and began sketching electronically using a pen and tablet. Finding the new approach superior, I have doubts I’ll ever go back to paper and wanted to share some of the reasons why.

Scaling

Like it or not, design ideas need to scale over time and good tools provide room for such growth. One thing that I love about Illustrator (which paper lacks of course) is that the art board or workspace can be stretched as needed whenever concepts need the extra room. The flexibility to resize the canvas is a really great feature especially during early ideation when multiple screens need to be shown together to tell a meaningful story. On the same note, another way Illustrator excels is in terms of a scalable fidelity. Whereas early on in a project the amount of detail might be small, over time however, the fidelity of an electronic sketch has the potential to develop. In a vector environment it is super easy to take a small UI sketch, stretch it to a larger size, and inject more detail inside of it.

Ease of Editing

Yes, in the real world we have pencils, erasers and the ability to redraw or correct our sketches to some degree. We can however only correct our paper sketches somewhat before they becomes unreadable. This isn’t the case with anything electronic or digital where cutting, deleting, undoing, redoing, erasing is second nature. A very common scenario is to draw different screens and only learn eventually that it makes sense for the two or three screens to be placed together – something that is very easily done by reorganizing or repositioning on the computer. Another superb thing about Illustrator is the ability to select a line and just redraw it, causing it the take on the new form. This of course can be done an unlimited amount of times in an electronic tool.

Legibility

Although this might not be the case for everyone out there, I personally find that my hand writing is very hard to read. Unless I spent extra care and time to write legibly, I find that on the computer it is way easier and quicker to type out text that can be read by others.

Carelessness

When I am about to sketch on paper, knowingly that it will be harder to undo, I hold myself back and think twice before the ink or lead leaves a mark. This slow down or inefficiency can be easily overcome in the electronic world with a tablet pen. When I sketch electronically, this worry disappears as I know that I don’t have to generate the right ideas, but instead can easily correct myself if something needs adjusting. This careless quality of electronic sketching brings forth immense value by affording greater exploration to occur more freely.

Reuse

Illustrator allows to create symbols of artwork very easily which in turn speeds up exploration ever more. Let’s say you have the same screen or component which you want to use a number of times across your work. Dragging the selection into the symbols palette allows you to reuse or instantiate that artwork and still have the ability to edit it in one location with it updating throughout. This is simply a superiority that paper cannot compete with.

The above are the reasons why I moved in the direction of electronic sketching. Perhaps the use of paper can still be justified in collaborative sketching sessions when there are more than one designer at the table and the design activity happens simultaneously in real time. For the remaining times, I find that the electronic sketch offers advantages over paper that are just too good to pass.

Credits: Jakub Linowski