User Experience Audit Model

  • A. LOOK & FEEL (scored 1-3 OR as an aggregate score 3-18)
    • Branding (scored 1-3)

      1. Brand presence is weak; brand identity adherence is poor; brand recognition is difficult and requires  prior awareness of the brand.
      2. Brand presence is average; brand identity adherence is fair; brand recognition is fair but does not build towards exposure in other channels or touchpoints.
      3. Brand presence is strong; brand identity adherence is very good; brand recognition is easy and continues brand experience beyond the channel. 

        BRAND PRESENCE: Can you, based on a cursory view of the experience, determine what the sender does, what sets them apart, what they stand for, how they are relevant to the customer?

        BRAND IDENTITY: Does the design align with brand standards and other brand touchpoints?

        BRAND RECOGNITION: If you cover up the logo, can you still recognize the brand, or at least the industry, or does the page appear generic and unspecific?

    • Aesthetics (scored 1-3)
      1. Look and feel is dated and/or inappropriate for target audience; aesthetics are not cohesive; visual impact is weak and visual impression is conflicted.
      2. Look and feel is neutral and/or not customized for target audience; aesthetics are average; visual impact is fair and visual impression is acceptable.
      3. Look and feel is modern and/or appropriate for target audience; aesthetics are consistent; visual impact is strong and visual impression is pleasing.
        VISUAL IMPACT: Does the overall design create a strong, distinctive, memorable impression?


        VISUAL IMPRESSION: Does the design make the sender appear professional and credible; is it likely that the target audience would view the sender favorably, without skepticism?
    • Typography (scored 1-3)
      1. Typography is poor; legibility is muddled; text hierarchies are unclear; text is too small; choice of fonts is questionable and/or inconsistent.
      2. Typography is fair; legibility is acceptable; text hierarchies are differentiated; text size is OK; choice of fonts is acceptable or at least consistent.
      3. Typography is good; legibility is good; text hierarchies are clear; text size is purposeful; choice of fonts is sophisticated and consistent.

        TEXT HIERARCHIES: Is typography used purposefully to create a structured appearance of the text, where it is clear how sections relate to each other, linearly and/or hierarchically?

        LEGIBILITY: Are characters, words, lines and sections sufficiently large, recognizable and distinguished from each other, but not so far separated or contrasted so as to cause confusion? Are line lengths appropriate (preferably no less than 20 chars and no more than 60 chars)? Are lines spaced apart enough to guide the eye along one line at a time, but not so much that the reader has trouble finding the next line? Are different weights (for instance: light, regular, bold, extra bold) being used to appropriately contrast with ordinary body copy?

        CHOICE OF FONTS: Is there an appropriate variety of fonts on the page so as to create clarity and contrast, but not so varied as to cause confusion and disharmony? Do headlines stand out sufficiently from body copy? Do fonts align with the brand identity? Do fonts render well, or do characters seem fuzzy, or bump up against each other?

    • Imagery (scored 1-3)
      1. Images are of poor quality and/or inappropriate; image compression is poor; size, cropping and composition is inadequate; treatments are questionable.
      2. Images are of decent quality and/or appropriate; image compression is fair; size, cropping and composition is adequate; treatments are acceptable.
      3. Images are of high quality and very appropriate; image compression is good; size, cropping and composition is good; treatments are purposeful.

        IMAGE SIZE: Are images able to render on the page without “crowding” it and compromising the layout? Does image size align with the purpose of the content, or is image size unrelated to the importance of the content piece it is representing?

        IMAGE CROPPING: Does the way the images are cropped create confusion or lack of clarity about what the image is meant to convey?

        IMAGE COMPOSITION: Does the way the images are composed and placed on the page draw attention to appropriate elements, or does it create a distraction? Does image composition create an appropriate emotional response?

        IMAGE TREATMENTS: Are effects and filters applied to the images, and if so, are these treatments aligned with the purpose of the page, and/or the brand identity, or do the treatments appear gratuitous?

    • Use of color (scored 1-3)
      1. Color usage is weak or overpowering; choice of colors is inappropriate; colors clash; color interferes with scanning and/or reading of the page.
      2. Color usage is fair and balanced; choice of colors is appropriate; colors do not clash; color does not interfere with scanning and/or reading of the page.
      3. Color usage is strong and supports the content and layout; colors match; choice of colors elevates the experience; color facilitates scanning and reading.

        COLOR USAGE: Are there a lot of colors on the page, and if so, do they all appear to be justified by the purpose of the page, or do they cause confusion? Are there very few colors on the page, and if so, are components of the page looking too similar? Could the page have benefited from more colors? Does there appear to be a system behind how colors are applied, or do they appear to have been applied randomly? Do the colors evoke an appropriate emotional response?

        CHOICE OF COLORS: Are color choices justified either by the brand identity, or by elements on the page being made more easily distinguishable and/or groupable by contextual similarity? Do colors contrast sufficiently to not cause uncertainty and vagueness, but not so much that it causes visual competition and conflict?

    • Design Execution (scored 1-3)
      1. Quality of design execution is lacking; visual errors or flaws are common.
      2. Quality of design execution is fair; visual errors or flaws are few.
      3. Quality of design execution is good; no visual flaws are apparent.
  • B. USABILITY (scored 1-3 OR as an aggregate score 3-18)
    • Navigation (scored 1-3)
      1. Menu is absent or poorly designed; navigation is complicated and/or confusing; paths to content are unclear and confidence in navigation is poor.
      2. Menu is acceptably designed; navigation is workable; paths to content are identifiable and confidence in navigation is fair.
      3. Menu is well designed and functional; navigation is straight-forward; paths to content are clear and confidence in navigation is high.

        PATHS TO CONTENT: Does navigation provide sufficient direction in how to structure and assimilate the content?
        Does navigation aid sufficiently in finding and selecting the various pieces of content?

        CONFIDENCE IN NAVIGATION: Is the navigation behaving consistently and predictably so as to instill confidence in the user that using the nav will have the desired results? Do navigation elements provide sufficient cues to guide the user in what to expect, and to confirm current position in the site structure?

    • Iconography (scored 1-3)
      1. Icons are absent or poorly designed, and hard to understand; icons cause more confusion than clarity.
      2. A few icons are utilized, are adequately designed and reasonably clear, but may be gratuitous and/or contributing to visual clutter.
      3. Icons are well designed and purposeful; facilitate navigation and/or scanning of content; clarify site structure and/or product offering,

        ICON DESIGN: Are icons designed in a manner consistent with the overall aesthetics of the brand and the site? Do they stand out sufficiently to aid in scanning the page, or do they create a visual distraction? Do they detract from the brand?

    • Conversion Point (scored 1-3)
      1. Online form and/or offline click-to-call are absent or poorly designed and structured. Errors break the form and/or the layout.
      2. Online form and/or offline click-to-call are present and fairly well designed and structured. Form functionality is robust.
      3. Online form and/or offline click-to-call are very well designed and structured. Form adjusts to user needs (multi-step, expanding sections, etc)
        FORM DESIGN: Is the purpose of the form clear? Does the form appear intimidating and complicated? Is the form appropriately sized, or is too much squeezed into too small of a footprint? Are form fields labeled clearly and intelligibly? Are required fields marked appropriately? Are form fields appropriately sized for the text that needs to go into them? Are buttons readily identifiable as such? Does the form gel with the rest of the page design?


        FORM STRUCTURE: Is the sequence of form fields logical, and does it guide the user through the process of filling out the form? Are the appropriate form elements used (i.e., checkboxes vs radio buttons vs drop-downs).

        FORM FUNCTIONALITY: Are form fields large enough to click or tap into? Can form fields be tabbed between sequentially? Are there floating labels to guide the user about intended form field usage, and if so, do these disappear when the field is filled out, and reappear if the field is cleared? Are drop-downs functional and easy to select? Is the appropriate entry pre-selected in the drop-down? Are buttons identifiable as such and easily clickable? Do appropriate form errors display when the user causes a form error? Does the appropriate keyboard appear on mobile when the user selects a field (numerical vs text)? Is there a confirmation when the form has been correctly filled out?
    • Clarity (scored 1-3)
      1. Objectives of the page are unclear and page lacks features to explain funnel process. Conversion is confusing.
      2. Objectives of the page are implied and page sustains movement to the funnel. Conversion is a somewhat cohesive experience.
      3. Objectives of the page are very clear and page drives deliberate action to and through funnel. Conversion is simple and effortless.
    • Exit Links (scored 1-3)
      1. 50+ links on page, fully exposed, likely impacting conversion and interaction metrics negatively.
      2. 6-50 links on page, fully or partially exposed, possibly impacting conversion and interaction metrics somewhat negatively.
      3. 0-5 links on page or, if more, with visibility mitigated through design so as to not interfere with product research or conversion.
    • Features (scored 1-3)
      1. Page lacks any interactive features that aid users in finding the right product and/or offer, or such features are entirely inadequate.
      2. Page contains one or two interactive features that aid users in finding the right product and/or offer, and make the experience somewhat more purposeful.
      3. Page contains several useful interactive features that aid users in finding the right product and/or offer, and make the experience more purposeful.
  • C. CONTENT (scored 1-3 OR as an aggregate score 3-18)
    • Structure (scored 1-3)
      1. Site structure is unintuitive; subpages seem arbitrary and/or poorly aligned with user needs. Page structure is inadequate and presents content poorly.
      2. Site structure is acceptable or nonexistent; subpages align with user needs. Page structure is fair and presents content in a logical order.
      3. Site structure is purposeful; subpages drive user engagement. Page structure is good and presents content in a convincing order that drives conversions.

        SITE STRUCTURE: Do individual subpages correspond to actual user needs of similar weight and importance, or does the selection of subpages seem random or confusing?

        PAGE STRUCTURE: Is content grouped in a way that would make sense to users, and are those groupings placed in a meaningful order that facilitates user research? Is content arranged leading with the most important information? Does high level overview lead to increasing levels of detailed information

    • Messaging (scored 1-3)
      1. Messaging conflicts with the desired response and/or is inconsistent; product benefits and offer details are unconvincing; no sense of urgency is created.
      2. Messaging aligns with the desired response and/or is somewhat consistent; product benefits and offer details are clear; urgency is not stressed.
      3. Messaging supports and drives to the desired response; product benefits and offer details are convincingly presented; a sense of urgency is instilled in users.
    • Research (scored 1-3)
      1. Content does not facilitate research of products and offers; information is muddled; no RTBs; amount of copy is excessive or entirely inadequate.
      2. Content allows for research of products and offers; information is somewhat clear; some RTBs exist; copy may require some editing, or fleshing out.
      3. Content drives engagement and facilitates research of products and offers; information is clear and RTB:s convincing; amount of copy well balanced.
    • CTAs (scored 1-3)
      1. CTAs are inadequate or missing altogether; urgency is not communicated; benefits of and reasons for taking action not clear.
      2. CTAs are adequate but not compelling; urgency somewhat lacking; benefits of and reasons for taking action described but not felt.
      3. CTAs are strong and compelling; urgency is underlined; benefits of and reasons for taking action are emphasized, and drive action.

        CTA ADEQUACY: Do CTAs reflect actual user needs, do they describe consequences and benefits of actions, are they specific rather than generic, and are they persuasive and emphasize urgency?

    • Diversity (scored 1-3)
      1. Content lacks diversity; mostly text, possibly supported by a few images. Pages quickly become monotonous.
      2. Content demonstrates some diversity; mostly text and images but with a few other content categories (video, testimonials, social proof, infographics, etc).
      3. Content is rich and varied; many different forms of content drive engagement and highlight different aspects of the brand. the products and the offers.
    • Segmentation (scored 1-3)
      1. No visible sign of content being tailored to different audience segments.
      2. Some light tailoring of content to align with multiple audience segments; content for multiple segments may exist side-by-side.
      3. Well segmented user experience with separate pages and/or separate sections devoted entirely to and tailored for specific audience segments.
  • D. PERFORMANCE (scored 1-3 OR as an aggregate score 3-18)
    • Conversion (scored 1-3)
      1. Conversion complicated and/or tedious; only possible on select pages; limited conversion options (i.e., form or phone only); limited call center hours.
      2. Conversion manageable, requiring reasonable effort; more than one con-version point; more than one conversion option (i.e., form and phone).
      3. Conversion simple and quick; persistent across pages; several conversion options (i.e., form, phone , chat, etc); generous service availability.
    • Post-Conversion Activity (scored 1-3)
      1. No confirmation of next steps; no Thank You page; no follow-up emails or call-backs; poor continuity of consumer experience.
      2. Next steps outlined; Thank You message exists; follow-up emails or call-backs may exist but are not executed well; fair consumer experience continuity.
      3. Next steps well defined; good Thank You page; prompt and courteous follow-up emails and call-backs ; strong consumer experience continuity.
    • Search Engine Marketing (scored 1-3)
      1. No use of site links; poor search ad copy, questionable or no keyword bidding.
      2. Some site links; adequate search ad copy, average keyword bidding.
      3. Good use of site links; strong and compelling search ad copy, competitive keyword bidding.
    • Targeting (scored 1-3)
      1. Unsophisticated or no targeting; no or poor experience alignment with audience/keywords/geo/ other; no messaging variability by segment.
      2. Somewhat sophisticated targeting; experience aligned with audience/keywords/geo/other; some messaging variability by segment.
      3. Sophisticated targeting; experience optimized for audience/keywords/geo/ other; messaging varies by segment; consumer modeling in place.
    • Channel Optimization (scored 1-3)
      1. Natural Search site only.
      2. Natural Search site + Paid Search site.
      3. Natural Search site + Paid Search site + DR optimized.
    • Direct Response Best Practices (scored 1-3)
      1. Site not optimized to Direct Response best practices; path to conversion unclear; CTAs weak; webform poor or nonexistent; no contact number.
      2. Site aligned with DR best practices; path to conversion clear; CTAs fair; form adequately structured and placed; contact number poorly visible.
      3. Site is driving DR best practices; path to conversion clear and compelling; CTAs strong; form well structured and placed; contact number highlighted.
  • E. TECHNOLOGY (scored 1-3 OR as an aggregate score 3-18)
    • Front-End Functionality (scored 1-3)
      1. Interactive functionality (Javascript/jQuery) is unreliable and of questionable purpose; functionality performs poorly and may throw browser errors.
      2. Interactive functionality is workable and mostly serves a purpose; functionality performs as expected and errors are rare.
      3. Interactive functionality is sophisticated and purposeful; functionality performs well without errors, and adds value to the page.
    • Cross-Browser Compatibility (scored 1-3)
      1. Pages render inconsistently and functionality performs differently across browsers. Some browsers may be entirely unsupported.
      2. Pages render somewhat consistently across browsers and functionality performs as expected, with slight variations.
      3. Pages render elegantly in a consistent manner, and functionality is yielding intended results regardless of browser.
    • Load Time (scored 1-3)
      1. Pages load slowly (5+ sec) and reload unnecessarily.
      2. Pages load within an acceptable timeframe (3-5 sec) and only reload when absolutely necessary.
      3. Pages load fast (3 sec or less) and components are implemented to load as needed, without the need to reload the entire page.
    • Cross-Device Operability (scored 1-3)
      1. Same experience is served for different devices, with different bandwidth constraints and viewports.
      2. Different experiences are served for different devices, although these are not optimized for the device type, or for bandwidth constraints.
      3. Different, device-optimized experiences are served for different devices and  page loads are balanced based on bandwidth.
    • Front-End Development Best Practices (scored 1-3)
      1. Development best practices are violated; efficacy is poor; code is convoluted and/or not commented; code does not validate to any applicable standards.
      2. Some development best practices are observed; efficacy is fair; structure is acceptable; code follows some or most standards but is not ideal.
      3. Development best practices are followed; efficacy is observed; code is light and easily readable; code is in line with and validates to current standards.
    • Technical Execution (scored 1-3)
      1. Quality of technical execution is lacking; errors are frequent; would require complete rework.
      2. Quality of technical execution is fair; errors are few, some rework would be recommended.
      3. Quality of technical execution is good; no errors are apparent; minor touch-ups may be desirable
  • F. LAYOUT (scored 1-3 OR as an aggregate score 3-18)
    • Scannability (scored 1-3)
      1. Visual structure is poor; page is difficult to scan for cues; typography and/or visual elements do not facilitate scanning.
      2. Visual structure is acceptable; page can be scanned for cues; typography and/or visual elements aid in identifying pieces of content.
      3. Visual structure is good; page is easily scannable for cues; typography and/or visual elements provide ample clarity on how to digest the content.

        VISUAL STRUCTURE: Are columns and sections defined in a way that creates visual cohesion where needed, and visual separation where needed, in order for users to assimilate the content? Is the scale of the content well adapted to the available space, or does the content create visual noise that is hard to penetrate? ? Are the most granular levels of content arranged into larger groups in a manner that facilitates consumption of content? Does the visual structure help guide the eye through the page towards the desired actions, or does the visual structure create “roadblocks”?

    • Use of Space (scored 1-3)
      1. Page real-estate is utilized poorly; important content is given insufficient space whereas gratuitous elements take up unnecessary space.
      2. Page real-estate is utilized acceptably; important content is given sufficient space whereas gratuitous elements are few and use limited space.
      3. Page real-estate is utilized very well; important content is given a maximized amount of space and the page mostly lacks gratuitous elements.
    • Placement (scored 1-3)
      1. Placement of content and functional elements is poor; no clear paths of interaction; page hierarchy is weak; a majority of content requires scrolling.
      2. Placement of content and functional elements is fair; user paths are recognizable; page hierarchy is acceptable; limited content below the fold.
      3. Placement of content and functional elements is good; user paths are strong page hierarchy is clear; all vital content is arranged at the top.

        PATHS OF INTERACTION: Are actionable elements placed together with content in a progressive order, in an either horizontal or vertical “path”, where content creates interest and drives towards increasing levels of decisiveness, so that interaction follows naturally from the consumption of content?

    • Separation of Content (scored 1-3)
      1. Content is mixed together with poor integrity and unclear visible demarcation; page grid is undefined or violated; page elements contrast poorly.
      2. Content integrity is preserved and visible demarcation is fair; adherence to page grid is fair; page elements are relatively easy to separate.
      3. Content integrity is good with strong visible demarcation; page grid is applied consistently; page elements contrast well.
    • Whitespace (scored 1-3)
      1. Lack of, or poorly/unevenly applied whitespace, creating a cluttered impression, or visual emphasis where it is not desired.
      2. Adequate amounts of whitespace, creating a fair visual structure with purposeful visual emphasis in some cases.
      3. Well balanced amounts of whitespace, creating a clear visual structure with breathing room and purposeful visual emphasis that guides the eye.
    • Viewport Adaptation (scored 1-3)
      1. Poor utilization of available viewport size; content and design applied without responsive considerations; identical page layout served for all viewports.
      2. Fair utilization of available viewport size; content and design applied with some responsive considerations; separate mobile experience.
      3. Good utilization of available viewport size; content and design applied with full responsive alignment; mobile and desktop dynamically served with same code.

        UTILIZATION OF VIEWPORT SIZE: Do the content and design elements scale and re-organize to fit the available screen real-estate, or do they appear to be inappropriately sized, or shoe-horned in?

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.