What, it’s been two years already? That’s how long it took me to fill in my dotted Leuchtturm notebook (German engineering at its finest) front to back. Since I’m starting a new one, I thought to devise a bit of a color coding system for my upcoming notes and just share it here. The colors I typically use to underline the very first page title. Here are the colors:

Light Grey For Thoughts & Inspirations

Sometimes I’ll hear or read something of interest from a podcast, article, or book and it gets coded this way. My own free-form personal random thoughts across various disciplines get placed here as well.

Medium Grey For Project Ideas

For the more solid, practical and actionable thoughts or sketches. These are both new project ideas or adjustments to existing ones and are often accompanies by sketched out screens.

Black For Business Strategies

These are the most strict, closest and firm action points which are tied to my business initiatives. They are very high level for the most part and act as strategic todo’s of sorts.

Red For Contacts

If I meet someone or a company of interest, they will get placed here. This section might also be some residue from a conversation with someone over a cup of coffee.

Blue For UI Patterns

Here come the user interface patterns – both good and dark. Be it existing patterns seen somewhere or envisioned ones, they both land here.

Yellow For Content

I write and rely heavily for content marketing for much of my business. Specific content ideas for existing projects get placed here. Oh, and in the example listed you can actually see that I’ve started scribbling down some content points for the GoodUI Datastories promotions. :)

Was this helpful? How do you structure your notebooks or sketchbooks?

Credits: Jakub Linowski

Well, this surely is a bit away from traditional wireframing and sketching, but I just needed to share these inspirational business podcasts somehow. Fact is, I’ve been listening to these for quite some time now and they have been driving a big chunk of my thinking recently. They are all very entrepreneurial and startup oriented in nature while highly motivational as well. Personally, I found them as a nice way to complement the morning commute while stirring lots of business thinking. The list goes on starting from my favorite at the top:

The Business of Freelancing Podcast

Brennan Dunn is pretty solid with the content and advice. There are only 10 episodes or so, but they are packed with advice from pricing to qualifying leads and moving prospects along the sales pipeline. Wish there was more.

Eventual Millionaire

Jaime interviews millionaires each week who share tons of advice on their successes and failures. She speaks to a diverse range of business people and while listening to each person’s story, common patterns begin emerging. Great content!

Smart Passive Income Podcast

Pat Flynn shares a ton of goodness each week on blogging, affiliates, content marketing, video, email marketing, and just starting businesses online. Easy going and light weight, but still inspirational.

Email Marketing Podcast

John, “The Autoresponder Guy”, knows a thing or two about copy-writing as well as email marketing. He interviews many others with a lean on how to make the most out email for the purchase of building customer relationships.

Product People

Although at a bit of a standstill, Justin has been interviewing quite a few entrepreneurial minds and start ups. New episodes might appear here and there, but no promises.

Entrepreneur on Fire

John is on fire in this motivational and daily podcasts. The interviews are with all sorts of business owners who have decided to leave their day jobs and pursue their business passions. Sometimes a bit corny or sugary, but still a nice way to learn about what drives people to start their own things.

Giant Robots Smashing into other Giant Robots

Just started listening to this, and it also looks like it has some good content on the business of software development and design.

Startups for the Rest of Us

Mike and Rob discuss software development with a twist on the business side.
Typically they start off with 5-10 minutes or so on some technical problem first though.

One more thing. Typically I find that during or right after listening to an episode from this list, the ideas for courses of action start brewing very rapidly. It’s highly recommended to have an output such as a notebook or sketchbook ready nearby in order to jot down ideas or key insights.

Enjoy.

Credits: Jakub Linowski

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

MicroPersonas is a new icon set that I just came up with for building and using quick persona like characters in your interaction design deliverables. The set is founded on the belief that personas should be generated rapidly with only those characteristics that can be used to influence or inspire design action. If personas are to be leaner, more concise and live closer with interface sketches (without being lost in separate documents) then this is a materialization of that type of thinking and a step toward lighter documentation.

The set comes with 40 sketched style characters and 9 characteristics (beliefs, habits, comments, triggers, tools, needs, problems, data, and artifacts) setup in .AI (Illustrator) and .PNG (Fireworks) formats.

Purchase and download it at www.linowski.ca/micropersonas for $29. Enjoy …

Credits: Jakub Linowski (Twitter)

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

The next version of the Interactive Sketching Notation is out for those who like to sketch electronically and tell stories with big canvases. The Adobe Illustrator template has been mostly extended to include more icons, device screens, and components amongst a few other minor fixes.

There are now 80 common user interface icons in a sketch based style. Proportionally sized screens now include devices such as: iPhone 4 & 5, two popular Windows 8 phones (Nokia Lumia 920 & HTC Windows Phone 8X), Samsung Galaxy Nexus, Samsung Galaxy S3, iPad, iPad Mini, Nexus 7, and a bunch of browser screens. Newly added components include such things as a: video player, map, chart, two new tooltips, and tabs. Finally, I’m also am trying out a second user story style which is composed of a: user type, scenario title, scenario description, need, and problem – still experimental. If anyone has any symbols, components or feedback to be included in a future release, please let me know. Enjoy. :)

Purchase & Download here.

Credits: Jakub Linowski

I’ve decided to do a screencast of How I Sketch and the style that came to be known as the Interactive Sketching Notation. It’s around 13 minutes in length going over the basic concepts, some of the key benefits, as well as an example of a real world project. The video is in HD so you might have to expand to full screen in order to experience the real deal. Somewhere at the end you might also find a few minutes of attempted real time UI design. :) Let me know if it’s useful, and if it is, I might do another one of these in the future. I’ve also setup a Vimeo Channel for this just in case. Enjoy. Cheers.

If you need the Adobe Illustrator template, you can purchase it right here for $29.

Credits: Jakub Linowski

It took a while, but here are some results from what people submitted for the Feedback Note call for samples:

Dedicated Note Spaces

Craig’s preferred method of capturing feedback is on the wireframes themselves within a dedicated notes section. After printing out the full set of wires on a large piece of paper he then takes notes and sketches on top of what is already there. Looking more closely, a lot of the feedback in this particular wireframe is written in a question or task format – as in: “How would the user do this or that”. I think it’s an interesting way of testing the interface with additional sub cases which should be eventually accounted for.

Credits: Craig Kistler

Saving Whiteboards with Evernote

For Anirban, what works is jotting down everything on a whiteboard, and taking it as a snap using the Evernote app. Apparently, with Evernote he can capture the progression of the artifact and then play it out as a sequence as it occurred. In this way, the physical and the virtual can be easily bridged and stored for later.

Credits: Anirban Majumdar

Capturing Sign Off with Checkmarks

When it comes down to my own approach for collecting feedback, I often write all over the wireframes in a different colour on a separate layer. Recently however I’ve began trying to capture sign offs or some form of collective agreement in the wireframes. Sometimes when working with a larger group, team members wish to know and store what has been agreed upon, and what needs additional work. Extending my personal sketching style, I started using two basic circle like symbols of a checkmark as well as a “x” to denote just that. These little symbols I drop throughout the wireframes as needed, and then update a copy of the document in a shared folder (usually Dropbox).

Credits: Jakub Linowski

Thoughts? Comments? Or have other ways of collecting feedback? Please share.

A few weeks ago, I started a personal pattern project which I’m finding useful and thought to share as a potential design activity. After grabbing a blank notebook, I basically began sketching out and writing down various examples of interesting interactions I find all over the web. The idea isn’t completely new as design and interface patterns have been around us for quite a while now. In fact, some really awesome collections have sprung up that are great for designing interactions and interfaces. If you’re seeking inspiration from these publicly available pattern libraries some existing resources include:

1. UI Patterns
2. Pattern Tap
3. Patternry
4. Little Big Details
5. Designing Web Interfaces: Principles and Patterns for Rich Interactions (Book)
6. Welie.com – Patterns in Interaction Design
7. UIPatterns.net
8. Quince

By personalizing these patterns however, there could be a few added benefits beyond just observing other people’s work passively. For one, I’m beginning to notice that after drawing out some selected examples it becomes easier to internalize and remember them later on in the future. When working on projects, these sketched patterns tend to emerge from memory more vividly than ones that were just seen somewhere. Secondly, when recording these patterns personally it is also possible to gain another chance at practising and evolving your own personal sketching style. Patterns are a great source of more complex user-interface interactions which may push the boundaries of your visual communication and sketching abilities.

There is no set standard on how to record them. Some things which I thought might be useful to include were elements such as: a title, a few screens (tied together with user actions), a simple description, a date, and an example URL. But really, these being personal, it’s all up to you to come up with your own style. So go ahead and grab that fresh notebook …

Credits: Jakub Linowski