Category: Uncategorized

Flash Bashing

With the emergence of the powerful combination of HTML5, CSS3 and Javascript/jQuery as a browser-native way to produce animated and more complex interactive features for the web, many developers have been very eager to throw a particular baby called Flash out with the bath water – only to themselves engage in the same form of abuse of a new, preferred technology that they were once so critical of, when the name of that technology was Flash.

What developers are commenting on in these instances is typically Flash as it relates to web content publishing, and more specifically the Flash plugin as a rendering and delivery mechanism for that content. While most of this criticism is certainly valid, it represents a very narrow way to look at Flash, which really did not start as a web publishing tool, but as a sketching tool, and a vector-based animation tool, which is still where Flash is at its best, and where it is still very much relevant.

Flash is a design tool that allows a designer to build scalable and lean vector designs, ideal for a device-agnostic media landscape (SVGs anyone?). Flash offers both a spatial-, a layered-, a temporal state- and a behavior/object-oriented approach, with the canvas, timeline and its keyframes used to define both progressive and conditional changes to the design elements. In this, Flash allows for easy creation of library objects (way superior to Photoshop’s so-called smart objects), which enables the designer to create modular and adjustable design objects which scale very well into the creation of entire design systems.

Used right, Flash allows a designer to set up a proliferation of design objects with shared and nested library building blocks, which can be edited once, but where edits apply in multiple instances at once, while still allowing for some modification of each element in all individual instances where they occur (this, by the way, in many ways mirrors Sketch, a tool that is de-rigueur and more broadly used today). Flash also makes it easy to export all these objects with one command, in a variety of formats and resolutions, as a virtually unlimited series of bitmaps – very useful when for instance producing banner ads in many different versions.

All this makes Flash a very powerful, and truly dynamic graphics production tool with, in my mind, a more pragmatic and flexible approach than for instance Photoshop, which locks things into a more static and restrictive layer paradigm that is still burdened by its photo retouching origins. In fact, Flash can with a little extra work be used to mimic the functions of, and deliver some of the same benefits as, a dynamic ad serving tool, making the entire production process very nimble and efficient.

Furthermore, when developers scoff at Flash, and claim that HTML5 can replace it for animation purposes, that is not strictly true, and reveals a basic lack of understanding of Flash and its capabilities, as well as an over simplified view of animation as a practice.

For animation purposes, HTML5 is (at most) an animation encoding method; it is obviously not an animation tool per se. Flash, on the other hand, offers an entire animation environment in which you can do much more than just move shapes and text around, and create simple transition effects. Character animation, for one, is still something where Flash is very useful, since it integrates well with other production tools (such as Photoshop, Fireworks, or Illustrator), and producing animated graphics is still vastly more efficient and quick in Flash than anything related to, and restricted by, front-end presentation code.

There is absolutely nothing saying that Flash must be used only to output SWF files – the output and application options are really much broader than that, and are not even necessarily restricted to just graphics. Flash also offers a quick, simple way of integrating video and audio with any other visual and/or interactive material.

One must also remember that Actionscript is (still) a pretty powerful coding language for interactivity. I would argue that things like prototyping, or building apps or games for instance, are still much easier in Flash, than trying to turn a web page into an app, and coaxing the browser to render it in real-time, while simultaneously calculating outcomes and maintaining state of complex sequences of user interactions. Flash also frees you from the inconvenience of browser incompatibilities, and other browser-related limitations. That alone often makes it worth considering.

So, when rejecting one technology for another, it is still important to ask oneself what the technology is going to be used for. There are still lots of good uses for Flash, but to publish animated and/or interactive web content to be embedded on web pages using a plug-in – intros, content effects, interactive features and page behaviors etc – that was never its core strength to begin with, and never where it was best utilized.

We should perhaps at this point stop and ask ourselves if the current explosion of gimmicky HTML5 widgets doesn’t in fact in many respects mirror the early, somewhat annoying over-utilization of Flash in (mostly) non-meaningful ways.There is really no reason to favor poor usage of one tool over equally poor usage of another.

Once the dust settles, smart UX designers out there will know when to use certain tools, and when to continue searching through their toolbox. What ultimately matters are not the tools themselves, but what you do with them.

It’s really not any more complicated than that.

On UI typography

The main principle of typography in User Interface design governs how text in UI elements is mainly functional (as opposed to communicative): UI text serves to explain the purpose of navigation elements, and guides interaction.

Texts in buttons are essentially labels, and labels have specific legibility requirements: the strokes need to be uniform and thick, the character width should preferably be rather narrow (to be more economical in terms of space), and the X-height should be tall, to make the text larger, since type size is by far the most critical requirement for legibility in UI design. This is important given that UI elements need to function in many different sizes, which is especially true in responsive design, where pages size up and down dynamically. Also, serifs tend to create kerning issues, which means characters need to be separated and spaced more liberally, so as to not have characters bump up against each other and create confusion about individual character shapes. That means that serif fonts are inherently less suitable for UI elements.

As for UI typography as it relates to branding, human computer interaction is a universal field – it is not tied to a specific corporate identity. What we recognize as a clickable element, such as a button, and therefore understand how to interact with, is different from what a brand and a CID dictates in terms of recognizability, and the principles of visual persuasion associated with branding. If you think about it, corporations typically don’t have custom designed door handles in their offices, and that is because handles are functional – they are more important to allow people to open doors than they are to establish a corporate identity. The same thing goes for UI elements.

Ultimately, this comes down to how we need our clients to trust that we keep their best interests in mind, while leveraging best practices and maximizing the benefits of our professional experience. The best person to make the distinction between branded elements and functional elements is probably always going to be a designer.


This article explains the issue very well: http://typecast.com/blog/type-on-screen-5-faces-for-ui-design. As you’ll notice, all the recommended typefaces are sans-serifs, for reasons explained above.

Mocking the mock – ceci n’est-pas une website

It is very rarely productive to adopt an “either-or” stance in UX, or in any other human endeavor for that matter. The UX discipline, with its many layered and intersecting tactics and methods, is much too complex for a simplistic black-and-white outlook. Often, things that are rejected as a result of developments in the field are not necessarily suddenly useless, but simply used the wrong way.

Such is the case of the much-reviled mock-up.

Today, this particular deliverable is often seen as an obsolete component of an antiquated approach to UX. And for a good reason – the mock-up is simply not a very useful development tool. In-browser prototyping generally represents a more practical approach, since it presents a continuous path from wireframing to final design, allows designs to adjust dynamically to shifting viewport widths, and also offers a more accurate predictive rendering of the final product. The work involved in keeping a mock-up updated and accurate through the development process, while at the same time offering an adequate approximation of the end result, as well as reflecting the many different possible page appearances in different browsers and viewports, quickly makes static mock-ups a costly and time-consuming proposition.

However, as a sales tool (as opposed to a development tool), and a relatively nimble way to deliver a quick approximate snapshot of the stylistic design intent, the mock-up still has a purpose. Given the time required to get a prototype to the same spit-and-polish as a mock-up, and given that this level of design detail and fidelity is often attained closer to launch (which is much too late to solicit constructive input from a client), a mocked-up page used the right way can facilitate an engaged look-and-feel dialogue with clients. The mock-up should really be seen as a rough, early view of a design inbetween a wireframe layout, and a finalized, fully styled page. Other forms of design deliverables, such as so-called style tiles, or moodboards, lack the applied visual structure of a laid out page, or the coherence of a properly defined visual hierarchy and integrated design system, that is typically evident in a mock-up.

As long as recipients of webpage mock-ups are aware that they are looking at an approximation, the sense of design progress that a mock-up represents often yields early insights into the client’s brand experience requirements, buys a team more time to get it right, and polish the end result. The pitfall of the design process is when the mock-up becomes a pointlessly iterative development substitute rather than a one-time conceptual presentation element, but this is easily avoided if the presentation of mock-ups is properly framed at the outset.

As is often the case, in UX and elsewhere, evolution is preferable to revolution. A revisionist approach to UX, where dogmatic, tendentious design and tool choices restrain the process for no identifiable reason or practical gain, has few real advantages over a more pragmatic stance.

The difference between comprehension and motivation

Let’s examine the difference between comprehension and motivation, as they relate to web design.

IT-consultants are fond of flaunting a term called usability. This is essentially a method for testing and evaluating human-computer interaction, where it is assessed whether the user is being given the right tools and the right information to adequately assimilate content.

This method often takes center stage when IT consultants are left in charge. And while it is certainly useful to guide design and development and evaluate a user’s comprehension, structuring a website so that the user merely understands how to use it is simply not sufficient. If the user does not want to use a website, the empirical knowledge of how to use it is largely inconsequential. Therefore, the content must also be packaged in a way that the user is emotionally motivated to partake of it.

A survey conducted by Carleton University in Ottawa determined that users form their impressions of a website and its visual appeal/clarity/usability within the first 20th of a second of visiting it. Even more surprisingly, these first impressions colored the entire experience of the site, whether or not the whole site actually turned out to match that initial perception. The conclusion of the survey was that this first impression was ”unlikely to involve cognition” – meaning it is largely an emotional response.

Comprehension without motivation usually provides unsatisfactory results. The reverse situation, however, is not necessarily equally flawed. There are plenty of examples in human-computer interaction where the user’s cognitive understanding is initially very low, but where he or she is emotionally motivated to explore, discover and eventually attain insight. I am talking of course of computer games, a salient example of how interactivity actually works.

On Content Management

Relying on content management, and the implementation of a content management system, to drive engagement with users is a good example of backwards thinking. A CMS provides you with the tools to create and distribute content, without helping you determine what content would actually be worth distributing, and how this could possibly further your business goals.

At this point, it must be understood that a CMS begins its life cycle in the domain of IT, and IT is not a discipline concerned with strategic brand building, particularly if we as an example examine the governing principles of content management systems. In fact, the process of CMS development and implementation is fundamentally very often on a direct collision course with strategic branding goals. Whether intentional or not, the mechanics of most content management systems are by necessity geared towards convenience, simplicity, speed and standardization. A CMS does not in itself encourage a brand-oriented outlook, where the aim would be to find a viable brand position, and set yourself apart from the competition.

Instead, a CMS acts as a proverbial meat grinder which molds all communicative content in the same generic form. A CMS, by proxy of the principle of least resistance, rewards adherence to pre-defined, generic design directives. And, conversely, by being a standardized tool of templates, it does not facilitate out-of-the-box thinking or the pursuit of the communicatively unique.

A CMS is essentially just an administrative tool; a technical facilitator that has no inherent value in marketing terms. It does not refine or process whatever communicative raw material goes in and, sadly, there is usually no compensation for any lack of brand awareness or guidance in this process. It places administrative people in a precarious broadcasting position, where quite commonly, insufficient attention is given to company core values and the brand essence. Consequently, the corporate identity that is being projected through the prism of a CMS is very often vague and uncoordinated at best, or distorted and outright inappropriate at worst.

The end result is a diluted brand, as well as a waste of marketing money and opportunity.

On Direct Response Creative

Direct Response creative needs to be:

Results-oriented: Content drives design drives action
Testable/scientific: Initial creative efforts based on data-backed hypothesis, then verified through testing
Device/channel/technology agnostic: maintaining messaging integrity across devices and channels
Interactive Brand Experience: Based on a segmented/interactive/dialogue brand paradigm (one-to-one), as opposed to a monolithic/static/broadcast one (one-to-many)
Modular/dynamic/variable/scalable:
– Based on user segmentation
– Based on needs/behavior-vectoring
– Behavior oriented rather than demographic
Iterative: optimization/iteration-oriented process
Integrated: customer experience needs to be cohesive from search to display to landing pages

Users First

“Mobile first” sound the tendentious battle cries of UX designers worldwide, suggesting that user experience design now supposedly needs to begin with mobile experiences, and build outwards from there.

I can think of at least three succinct reasons why that dictate is wrong:

First, it puts the device before the user, which is not meaningful. As designers, we are not engaging with devices, but with human beings. Do we really know that all users consistently favor small, mobile, high-resolution viewports over large, widescreen ones? I submit that the answer is no, because any such knowledge is contingent on not just awareness of user preferences, but user needs, user behaviors, and environmental circumstances, which are never consistently the same. Besides, even when factoring in these shifting parameters, we also have to consider the needs and intentions of our clients, for whom we are trying to make this interaction happen. We cannot assume that “mobile first” always makes sense in that context either.

We are currently seeing not only a convergence of web based experiences displayed on increasingly smaller devices, but a simultaneous divergence, where screens are also becoming larger – virtually all of them wired, and sometimes even interconnected.

We cannot assume anything about users until we know who they are, and what they are trying to do. This, in turn, will dictate which devices they will be using, and that should be what guides our designs – not dogmatic assumptions based on device classifications that are pre-destined to lose relevance.

Second, the statement “Mobile first” makes an implicit assumption about just what “mobile” means. The device landscape is changing so rapidly that the term itself is quickly becoming obsolete. In an age of ultralight laptops, netbooks and “phablets”, just what is a “mobile device”, really?

There are mobile phones that are straddling the divide between handheld and tablet devices, both in terms of size and resolution, and there are miniature, wearable devices whose resolutions we can assume will become higher and higher in order for those devices to display more information. At the same time, there are medium sized, often lower-resolution wireless touchscreens built into appliances and cars, where display characteristics may sometimes resemble mobile devices, even though they are often fixed, and usage is entirely different from that associated with smartphones. And there are both lower and higher resolution large screen devices and projection screens that blur the boundaries even further.

This means that we cannot, and should not, lock down user experience design to one type of screen, or size. We need to design for flexibility, but even more, we need to understand how users will be accessing our experiences, and what is most important to them. Since this is very much a moving target, the combination of mobility and compact screen size will not always top the list, of that we can be certain.

Third, we must realize that, not only are device classifications increasingly arbitrary and meaningless, but that the concepts of screen size and resolution – indeed, the very concept of human-computer interaction – are equally elusive. User experience cannot be locked down to a fixed pixel density, or a certain set of screen proportions – we are even seeing the merger of digital projections and physical reality; of the two- and the three-dimensional.

User experience, especially as it relates to screen projection, is relative, and depends not only on the physical properties of the screen in question – whether a pair of eye glass lenses, or a large projection screen – but also on the user’s distance to the screen, how the user is interacting with what is displayed there, and the various environmental circumstances at play.

This is why we need to change the mantra, from “Mobile first” to “Users first”.

What matters first and foremost to users is content, not the device on which this content is displayed. And how that content is structured, hierarchically as well as visually, also matters more to them than the technology used to display it. Even the visual presentation of the content matters more than the device, since the presentation is to some extent intrinsic to the content itself, and how it is intended to be perceived and experienced. The device is merely a facilitator in this perspective.

Therefore, the due process we need to observe is content before structure before style.

Defining the content is the designer’s number one priority. Without content, there is nothing to design, and without content to guide the design, it simply becomes meaningless fluff, regardless of the device used to deliver the experience. Once we have determined the content that will best serve users’ needs, aggregating the entirety of our content, and judging the value of it by virtue of Occam’s proverbial razor, we can proceed to shape it, and adapt it to the different rendering formats.

Realizing that design is first and foremost a process of reduction, the designer always sculpts the specific, smaller shape from the larger, unspecific whole; always crops and trims the desired view from the bigger picture. This is, ultimately, why user experience design can never truly be “mobile first”. Mobile, whatever we mean by that, may possibly be the desired end state of a given design, the terminus of our design journey, but it should never be the starting point.

We need to see the whole to define its most granular pieces, and determine their respective proportions, placements and relationships. We must outline an overall composition before we can craft the pieces that comprise it. We cannot build blindly outward by accumulating and assembling fragments; an artist does not create an image by cloning and repeating small sections, but rather composes a holistic experience by sketching in the most prominent components first, and filling in the details later. We must identify the smaller building blocks within the context of the bigger construct, and define the different ways in which they fit together. If we don’t, we are essentially improvising buildings by piecing bricks together, rather than first drawing up blueprints on which to base our constructions.

Hence, starting from a site-wide perspective, the designer should always first seek to define the content as a whole, distilling it into the total number of unique views necessary to contain the experience, classifying shared, global, re-useable content blocks as well as individual pieces of content; then whittling down experiences until able to look at individual pages, and components of pages. It is in this larger context that the mobile experience can be found. Eventually, the designer will arrive at the most purposeful, granular visual structure – or layout – as part of a holistic system of design elements, first and foremost tailored to the user’s needs, scalable up or down, as needed.

Not until we have shaped our content in this reductive fashion, and structured it both hierarchically and spatially, can we begin to apply style, or “look-and-feel”, to our design, down to the individual graphic elements. Only then can we start moving from defining content, and making content accessible and digestible, to also making it palatable and persuasive.

At this point, the devices used to render our experiences should pretty much be inconsequential; a natural selection produced by a deliberate, result-oriented process. Whether our user experiences are best suited for a smartwatch, smartphone, tablet, laptop, desktop computer, or a TV screen, should really be determined primarily by user and content considerations, ideally allowing the intentions of the sender and the needs of the recipient to meet in a mutually beneficial, equally purposeful harmonious whole.

Working with creatives

Understanding what matters most to Creatives will make it easier for you to work with them successfully. But what matters most to a Creative is not always what matters most to other professionals, so let me try to explain this from my perspective, as a Creative, but also draw on my experience working with other Creatives.

I have more than 30 years of professional experience as a designer, illustrator, animator, writer and creative entrepreneur. While I enjoy making money just as much as the next guy, and certainly appreciate recognition, I don’t typically focus very much on my paycheck or my title, and I don’t see my career as just a meal ticket. That is not to paint a picture of myself as some sort of altruist hippie, but simply to say that my work gives me enough satisfaction to make that my biggest reward, and I know the same goes for many other Creatives.

What matters most to me and to other Creatives is, hands down, having the luxury of being allowed to care for the quality of our work. Most people interpret this as signs of prima donna behavior, of artistic ego, and that is true to some degree, but on the other hand, if a Creative cares about producing top notch quality for you, how can that be a bad thing? It would be unfair to equate these signs of professional pride with an inflated sense of self-importance.

On the flip side of quality is timeliness and deadlines. While most Creatives take pride in being efficient and fast, they usually resent the notion that their work can be expedited, and cranked out without care. This would be equivalent of asking a trained chef to produce the goods like a hot dog street vendor. A client’s convenience is typically not a particularly rewarding consideration for a Creative, especially if that convenience comes at the cost of compromised quality. You may well perceive quick, expedited results from a Creative as being adequate, but your opinion of what is adequate may not matter much to a Creative, who would know precisely how much better they could have made something, if given more time. So, the best way to get Creatives to accept compromises in this context is to a) acknowledge that they actually could do better if given more time, and b) to occasionally let them do just that.

Consistency and professionalism are tricky subjects with Creatives. Any Creative would want to suggest that they always produce their best possible work, regardless of who the client is. This is unfortunately not quite true – who the client is, what the assignment is about, and what the Creative is being asked to do actually matters for the end result. While a true professional Creative should have a rather high standard, any Creative would confess, if pressed for an answer, that they sometimes elevate their standards further, and go above and beyond. This is because there is an emotional investment required in any creative endeavor, in which inspiration plays a part. There may not always be much you as a client can do about this, aside from encouraging your Creative to find that inspiration, but there is a lot you can avoid doing, so as to not sabotage the results. Being rude and disrespectful will never work in your favor – it is akin to insulting the waiter or the chef at a restaurant when sending your food back. You may not want to know what goes on back in the kitchen after such a display of rudeness.

Furthermore, on that same note, no Creative wants to be treated as a soul-less production machine. It would behoove anyone seeking the help of a Creative to recognize that if they themselves had been able to produce what they’re asking for, they would not need to talk to a Creative in the first place. We do not typically instruct a surgeon on how to perform surgery, and we don’t tell an architect how to plan a building. Similarly, my advice to any client would be to leave room for contribution from your Creative. When it comes to creative work, it s very easy for anyone and everyone to have opinions, but there are likely things that you’re not aware of, things your Creative can help you consider or avoid, which might improve on the desired end result. Micro-managing your Creative is likely not the best course of action, and it may even turn your Creative against you, which obviously doesn’t help.

Reviewing work is a particular point of concern for me and for Creatives in general. That is not always to say that Creatives can’t handle criticism, but it is a sensitive issue, and dismissive or unfair criticism especially so. Most Creatives, myself included, get very involved and put a lot of thought into their work. It may not always be the right thoughts, or the most relevant thoughts, and it’s true that Creatives sometimes believe they have a monopoly on the creative truth. But it is also true that many clients, managers and co-workers are not aware of the thought process and intellectual investment to begin with, and therefore tend to dismiss them too lightly and perhaps unwittingly. Therefore, the best way to work with a Creative is always to start by assuming they do have a purpose behind their work, and ask what that purpose is. You can then proceed to discuss it, and ask if and how the solution can be improved, if inadequate in any way. Asking how something good can be made even better is a challenge most Creatives would embrace quite willingly.

It is important to recognize that creative work – especially in design, where components interact in often complex visual systems – is always intended as a very specific (custom) solution to often very specific (unique) challenges. Therefore, framing those needs and challenges accurately at the outset of a project is of paramount importance. Also, connecting the problem and its original specifications to the solution when reviewing it is equally important. Very often, a reviewer (be it a client, a manager or a co-worker) changes and evolves the definition of a problem as a project progresses, and to me, this means that my solution is based on faulty assumptions, and work therefore has to start over, to ensure that my results are addressing the actual problem. Instead, reviewers often go about reviewing creative as if it is a set of checkboxes that can be unchecked independently of each other. This notion is often insulting to Creatives, who tend to see their solutions as too complex and specific for that – a set of dominoes laid out in a path, rather than a set of freely exchangeable lego pieces. Remove a piece in the laid-out path, and the chain is broken.

A reviewer may feel they are helping mould and sculpt the solution, whereas for a Creative, the solution is being bastardized and Frankensteined into something unrecognizable and less purposeful. The best way to proceed is actually therefore, somewhat counterintuitively, to go back to the beginning and start over. Personally, I always prefer that to being forced to mutilate something I have taken great care crafting.

Finally, it is exceedingly common for clients to think that creative egos require flattery, and to mistake that flattery for an expression of respect. And it is true that any Creative appreciates being recognized for their talent, but flattery really doesn’t work very well and is very often seen as insincere or manipulative, at least it appears that way to me. Creatives tend to only respect the opinions of other Creatives, and flattery – especially if directed at work the Creative is not happy with – will only serve to further undermine the respect felt for others. You don’t need to worry about your Creative feeling unappreciated; that will only happen if you actually tell or show them you don’t care for what they’re doing. If the work is good, a Creative will know it. And if there is a difference in opinion in regards to the quality of the work, you expressing a liking for something will not change a Creative’s mind – even if they may be willing to compromise.

Design – for whom?

Is being a designer merely a privilege?

Have we designers through our training, experience and fancy titles bought ourselves a carte blanche to project our own taste and personal aesthetics onto the canvas of the world, or does being a designer also bring certain obligations and responsibilities?

The answer to this question is not as simple as it may seem.

First of all, as designers, we are very rarely designing in a vacuum. Chances are, our designs will be seen by many people – both those who wish to see it and those who don’t. Therefore, it behooves us to be sensitive to how our design affects society as a whole. We should not be design polluters.

Second, as long as we expect others to pay for our services, it is reasonable to assume that our design is there not only to serve our own interests or purposes, but to aid someone else in achieving their communicative goals.

Third, as long as we expect others to take part of our work – visit our websites, read our magazines, look at our ads etc – we also have a responsibility to our audience. We should strive to make their experience a meaningful one.

Fourth: as long as we expect others – for example: copywriters, illustrators or programmers – to contribute to our work, we have an obligation also to them, to not obstruct or diminish their work unnecessarily, but to try and facilitate and incorporate their contribution in the best possible way.

This does not mean that we have to forget about our own personal motives and desires. Hopefully we can achieve a healthy balance, and produce good design while doing so.